:root{
      --bg:#0b1220;
      --panel:#111a2e;
      --panel2:#0f172a;
      --text:#e5e7eb;
      --muted:#a7b0c0;
      --border:rgba(255,255,255,.08);
      --shadow: 0 10px 25px rgba(0,0,0,.25);
      --accent:#0080cc;
      --accent2:#a78bfa;
      --ok:#34d399;
      --warn:#fbbf24;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      background: radial-gradient(1200px 800px at 10% 10%, rgba(167,139,250,.18), transparent 60%),
                  radial-gradient(1000px 700px at 90% 20%, rgba(125,211,252,.14), transparent 55%),
                  linear-gradient(180deg, var(--bg), #070b14 70%);
      color:var(--text);
      line-height:1.55;
    }
    
/* ===== Typography normalisation (single font family) ===== */
body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
h1,h2,h3,h4,h5,h6,p,li,a,span,div,button,input,textarea,select{
  font-family: calibri;
}
/* Make small labels match body font */
/*
.kbd{
  font-family: inherit;
  letter-spacing:.2px;
}
*/

.container {
    background: radial-gradient(1200px 800px at 10% 10%, rgba(167, 139, 250, .18), transparent 60%), radial-gradient(1000px 700px at 90% 20%, rgba(125, 211, 252, .14), transparent 55%), linear-gradient(180deg, var(--bg), #070b14 70%);
   }

/* ===== ATC button class (avoids Joomla/template clashes) ===== */
.atc-btn{
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(125,211,252,.16), rgba(167,139,250,.10));
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  font-weight:700;
  font-size:14px;
  transition: transform .08s ease, border-color .15s ease;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.atc-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(125,211,252,.35);
  text-decoration:none;
}
a{color:var(--accent); text-decoration:none}
    a:hover{text-decoration:underline}
   /* .atc-wrap{max-width:1060px;margin:0 auto;padding:28px 18px 44px} */
    .atc-wrap{max-width:1400px; margin-left:auto; margin-right:auto }
    .atc-topbar{
      display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;
      margin-bottom:14px
    }
    .atc-crumbs{color:var(--muted);font-size:13px}
    .hero{
      padding:18px 18px 16px;
      border:1px solid var(--border);
      border-radius:18px;
      background: linear-gradient(180deg, rgba(17, 26, 46, .92), rgba(15, 23, 42, .86));
      box-shadow:var(--shadow);
      backdrop-filter: blur(10px);
      position:relative; overflow:hidden;
    }
    .hero::before{
      content:"";
      position:absolute;inset:-1px;
      background: radial-gradient(500px 150px at 20% 0%, rgba(125,211,252,.14), transparent 60%),
                  radial-gradient(500px 150px at 80% 0%, rgba(167,139,250,.14), transparent 60%);
      pointer-events:none;
      opacity:.9;
    }
    .hero-inner{position:relative}
    h1{margin:0;font-size: clamp(24px, 3.3vw, 38px); letter-spacing:.2px}
    .lead{margin:10px 0 0;color:var(--muted);max-width:75ch}
    .atc-meta{display:flex;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:13px;margin-top:12px}
    .atc-meta span{border:1px solid var(--border);background:rgba(15,23,42,.6);padding:6px 10px;border-radius:999px}
    .atc-main{margin-top:16px}
    .atc-grid{display:grid;gap:14px}
    @media (max-width: 900px){ .atc-grid{grid-template-columns:1fr} }
    .atc-card{
      border:1px solid var(--border);
      border-radius:18px;
      background:linear-gradient(180deg, rgba(17,26,46,.92), rgba(15,23,42,.86));
      box-shadow:var(--shadow);
      padding:14px 14px 12px;
    }
    h2{margin:0;font-size:18px}
    p{margin:10px 0 0;font-size:15px}
    ul{margin:10px 0 0; padding-left:18px; color:var(--text)}
    li{margin:6px 0}
    .callout{
      margin-top:12px;
      border:1px solid rgba(52,211,153,.22);
      background:rgba(52,211,153,.08);
      border-radius:14px;
      padding:12px;
      color:var(--text);
    }
    .callout strong{color: var(--ok)}
    .aside h3{margin:0;font-size:16px}
    .aside p{color:var(--muted);font-size:14px}
    .kbd{
      font-family: inherit;
      font-size:12px;color:var(--muted);
      border:1px solid var(--border);background:rgba(11,18,32,.35);
      padding:2px 8px;border-radius:999px;
    }
    .atc-footer{
      margin-top:14px;
      color:var(--muted);
      font-size:13px;
      padding:14px 18px;
      border:1px solid var(--border);
      background: linear-gradient(180deg, rgba(17, 26, 46, .92), rgba(15, 23, 42, .86));
      border-radius:18px;
      display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;
    }
  
/* Layout: main content + quick checklist side-by-side */
.atc-layout{
  display:flex;
  gap:24px;
  align-items:flex-start;
}
.atc-main{
  flex: 1 1 65%;
}
.atc-aside{
  flex: 0 0 35%;
  margin-top: 16px;
}

/* Responsive: stack on small screens */
@media (max-width: 900px){
  .atc-layout{
    flex-direction:column;
  }
  .atc-aside{
    flex: 1 1 auto;
  }
}



/* Layout fix: main + quick checklist side-by-side */
.atc-layout{
  display:flex;
  gap:24px;
  align-items:flex-start;
}
.atc-layout .atc-main{
  flex: 1 1 65%;
}
.atc-layout .atc-aside{
  flex: 0 0 35%;
}

.atc-layout > [class*="col-"]{
  padding-left:0;
  padding-right:0;
}



@media (max-width: 900px){
  .atc-layout{ flex-direction:column; }
  .atc-layout .atc-aside{ flex: 1 1 auto; }
}


/* Layout fix v3: robust two-column (flex + float fallback) */
.atc-layout:before,
.atc-layout:after{
  content:" ";
  display:table;
}
.atc-layout:after{ clear:both; }

.atc-layout{
  /* flex first (modern) */
  display:flex;
  gap:24px;
  align-items:flex-start;
}

/* Float fallback (in case flex is overridden) */
.atc-layout .atc-main{
  float:left;
  width:66%;
  box-sizing:border-box;
}
.atc-layout .atc-aside{
  float:right;
  width:32%;
  box-sizing:border-box;
}

/* Ensure flex takes precedence when available */
@supports (display:flex){
  .atc-layout .atc-main{ float:none; width:auto; flex: 1 1 65%; }
  .atc-layout .atc-aside{ float:none; width:auto; flex: 0 0 35%; }
}

@media (max-width: 900px){
  .atc-layout{ display:block; }
  .atc-layout .atc-main,
  .atc-layout .atc-aside{
    float:none;
    width:100%;
  }
}

.footer {
width:100%;
Padding:1%;
}

.footer .container {
width:100%;
Padding:1%;
}

### CSS required to intergarted into Joomla without chnging the tempetate

.maximenuck  {
    background: radial-gradient(1200px 800px at 10% 10%, rgba(167, 139, 250, .18), transparent 60%), radial-gradient(1000px 700px at 90% 20%, rgba(125, 211, 252, .14), transparent 55%), linear-gradient(180deg, var(--bg), #070b14 70%);
}
 ul.maximenuck {
background:none !important;
}

.floatck {
background: radial-gradient(1200px 800px at 10% 10%, rgba(167, 139, 250, .18), transparent 60%), radial-gradient(1000px 700px at 90% 20%, rgba(125, 211, 252, .14), transparent 55%), linear-gradient(180deg, var(--bg), #070b14 70%) !important ;
border: none !important;
}

.titreck {
color: #ffffff !important;
padding-left: 2px !important;
padding-right: 2px !important;
}

div#maximenuck377.maximenuckh ul.maximenuck li.maximenuck.level1.parent > a:after, div#maximenuck377.maximenuckh ul.maximenuck li.maximenuck.level1.parent > span.separator:after, div#maximenuck377.maximenuckh ul.maximenuck li.maximenuck.level1.parent > .maximenuck-toggler:after {
    border-top-color: #ffffff !important;
    color: #ffffff !important;

}

div#maximenuck377 ul.maximenuck li.maximenuck ul.maximenuck2 li.parent:hover > a:after, div#maximenuck377 ul.maximenuck li.maximenuck ul.maximenuck2 li.parent.active > a:after {
    border-color: transparent transparent transparent #ffffff !important;
}

div#maximenuck377 ul.maximenuck li.maximenuck.level1:hover, div#maximenuck377 ul.maximenuck li.maximenuck.level1.active {
    background: #070b14 !important;
}

.breadcrumb {
background: #070b14 !important;
border-radius: 12px !important;
max-width: 1200px  !important;
margin-left: auto  !important;
margin-right: auto  !important;
}

.breadcrumb > li {
text-shadow: none !important;
}

.breadcrumb > .active {
    color: #ffffff !important;
}

a.pathway {
color: #0080cc;
}

.pager li > a, .pager li > span {
    background-color: #070b14 !important; 
    border: none;
}


/* ATC 3-colour typography system (scoped) */
.atc-wrap{
  --atc-text:  #E5E7EB;
  --atc-muted: #9CA3AF;
  --atc-accent:#0080cc;
  color: var(--atc-text);
}

/* Main text */
.atc-wrap p,
.atc-wrap li,
.atc-wrap td,
.atc-wrap th{
  color: var(--atc-text);
}

/* Muted text (meta, notes, helper lines) */
.atc-wrap .atc-meta,
.atc-wrap .atc-meta span,
.atc-wrap .note,
.atc-wrap small{
  color: var(--atc-muted);
}

/* Headings: keep them in the main colour (not a 4th colour) */
.atc-wrap h1,
.atc-wrap h2,
.atc-wrap h3,
.atc-wrap h4{
  color: var(--atc-text);
}

/* Links: the only “accent” colour */
.atc-wrap a{
  color: var(--atc-accent);
}
.atc-wrap a:hover,
.atc-wrap a:focus{
  color: var(--atc-accent);
  text-decoration: underline;
}

/* If Joomla template forces strong/em colours, pin them */
.atc-wrap strong,
.atc-wrap b,
.atc-wrap em{
  color: var(--atc-text);
}