:root{
  --blue:#0069B4; --ink:#0B1220; --paper:#FFFFFF; --mist:#F1F3F7;
  --yellow:#E31E27; --muted:#5C6473; --line:#E6E8EE; --bar:#0B1220;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-padding-top:env(safe-area-inset-top,0px);}
body{font-family:'Inter',sans-serif; background:var(--paper); color:var(--ink);
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); overflow-x:hidden;}
h1,h2,h3{font-family:'Archivo Black',sans-serif; font-weight:400; letter-spacing:-0.01em; text-transform:uppercase;}
a{color:inherit; text-decoration:none;}

/* announcement bar: rotates one message at a time, stories-style progress */
.ticker{background:var(--bar); color:#fff; padding:10px 24px; position:relative; overflow:hidden;}
.ticker-inner{max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:center; gap:14px; min-height:18px;}
.ticker-msg{position:relative; font-size:.78rem; font-weight:700; letter-spacing:.03em; text-align:center;}
.ticker-msg .slot{position:absolute; inset:0; opacity:0; transform:translateY(8px); transition:opacity .4s ease, transform .4s ease; white-space:nowrap;}
.ticker-msg .slot.active{position:relative; opacity:1; transform:none;}
.ticker-msg .slot b{color:var(--yellow);}
.ticker-dots{display:flex; gap:5px; flex-shrink:0;}
.ticker-dots span{position:relative; width:16px; height:3px; border-radius:2px; background:rgba(255,255,255,.22); overflow:hidden;}
.ticker-dots span i{position:absolute; left:0; top:0; height:100%; width:0; background:var(--yellow); border-radius:2px;}
.ticker-dots span.active i{width:100%; transition:width 4s linear;}
.ticker-dots span.done i{width:100%; transition:none;}

/* header */
header{position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--line); transition:box-shadow .3s ease, padding .3s ease;}
header.shrink{box-shadow:0 6px 20px rgba(0,0,0,.06);}
.topwrap{max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:14px 24px; transition:padding .3s ease;}
header.shrink .topwrap{padding:9px 24px;}
.logo{display:flex; align-items:center; gap:12px; font-family:'Archivo Black',sans-serif; text-transform:uppercase;}
.logo-badge{display:flex; align-items:center; transition:transform .25s ease;}
header:hover .logo-badge{transform:translateY(-1px);}
.logo-mark{
  height:64px; width:auto; display:block; transition:height .3s ease;
}
header.shrink .logo-mark{height:46px;}
.logo-word{line-height:1.05; color:var(--ink);}
.logo-word b{display:block; font-size:1rem; letter-spacing:-.01em;}
.logo-word em{display:block; font-family:'Inter',sans-serif; font-style:normal; font-weight:600; font-size:.6rem;
  letter-spacing:.08em; color:var(--muted); text-transform:uppercase; margin-top:1px;}
nav{display:flex; gap:26px; align-items:center;}
nav{position:relative;}
nav a{font-size:.84rem; font-weight:700; text-transform:uppercase; letter-spacing:.02em; position:relative; padding:4px 0;}
.nav-indicator{
  position:absolute; bottom:-2px; left:0; height:3px; width:0; background:var(--yellow); border-radius:2px;
  transition:transform .3s cubic-bezier(.4,0,.2,1), width .3s cubic-bezier(.4,0,.2,1), opacity .2s ease; opacity:0; pointer-events:none;
}
.pillbtn{background:var(--blue); color:#fff; padding:11px 22px; border-radius:999px; font-weight:700; font-size:.82rem; text-transform:uppercase;
  transition:transform .2s ease, background .2s ease;}
.pillbtn:hover{background:var(--bar); transform:translateY(-2px);}
.burger{display:none; width:24px; height:18px; position:relative; cursor:pointer;}
.burger span{position:absolute; left:0; width:100%; height:2px; background:var(--ink);}
.burger span:nth-child(1){top:0;} .burger span:nth-child(2){top:8px;} .burger span:nth-child(3){top:16px;}

/* hero */
.hero{max-width:1200px; margin:0 auto; padding:56px 24px 16px;}
.hero h1{font-size:clamp(1rem,2.3vw,1.7rem); line-height:1.22; margin-bottom:28px; max-width:none;}
.hero h1 .mark{
  display:inline-block; background:var(--yellow); color:#fff; padding:2px 14px 6px;
  border-radius:6px; transform:rotate(-1.2deg); margin:0 2px; box-shadow:4px 4px 0 rgba(0,0,0,.08);
}
.hero h1 .mark.alt{background:var(--blue); color:#fff; transform:rotate(1deg);}

/* slider banner */
.slider{position:relative; margin:0 0 60px;}
.slider-frame{position:relative; overflow:hidden; height:clamp(320px,46vw,480px);}
.slide{position:absolute; inset:0; opacity:0; transition:opacity .7s ease; display:flex; align-items:flex-end;}
.slide.active{opacity:1;}
.slide .bg{position:absolute; inset:0; background:linear-gradient(135deg,var(--bg1),var(--bg2));}
.slide .bgimg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.slide .photo-note{
  position:absolute; top:18px; left:18px; z-index:1; display:flex; align-items:center; gap:7px;
  background:rgba(0,0,0,.32); backdrop-filter:blur(4px); color:#fff; font-size:.74rem; font-weight:600;
  padding:6px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.25);
}
.slide .veil{position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.75) 0%,rgba(0,0,0,.15) 55%,transparent 100%);}
.slide .cap{position:relative; z-index:1; color:#fff; padding:34px max(40px,calc(50vw - 576px)) 34px 40px; max-width:660px; margin-left:max(0px,calc(50vw - 600px - 24px));}
@media(max-width:1248px){.slide .cap{margin-left:0;}}
.slide .eyebrow2{display:inline-block; background:var(--yellow); color:#fff; font-weight:800; font-size:.72rem;
  text-transform:uppercase; padding:5px 11px; border-radius:3px; margin-bottom:12px;}
.slide h2{font-family:'Archivo Black',sans-serif; font-size:clamp(1.4rem,2.6vw,2.1rem); line-height:1.08; margin-bottom:12px; text-transform:none;}
.slide p{font-size:.92rem; line-height:1.55; color:#E7EAF2; margin-bottom:16px; max-width:52ch;}
.slide .pillbtn{background:var(--blue);}
.s-arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.14); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.35); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:1.1rem; transition:background .2s ease;}
.s-arrow:hover{background:rgba(255,255,255,.3);}
.s-prev{left:16px;} .s-next{right:16px;}
.s-dots{position:absolute; z-index:2; right:20px; bottom:18px; display:flex; gap:7px;}
.s-dots span{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.4); cursor:pointer; transition:background .2s ease, width .2s ease;}
.s-dots span.active{background:var(--yellow); width:22px; border-radius:5px;}
.jubilee-badge{
  position:absolute; z-index:2; top:20px; right:20px; width:92px; height:auto;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); transition:transform .3s ease;
}
.slide:hover .jubilee-badge{transform:rotate(-4deg) scale(1.04);}
@media(max-width:640px){.jubilee-badge{width:64px; top:14px; right:14px;}}

/* quicklinks - bento strip */
.quick{max-width:1200px; margin:0 auto 60px; padding:0 24px; display:grid; grid-template-columns:repeat(5,1fr); gap:2px; background:var(--line);}
/* Each quicklink is rendered by Joomla as its own Custom HTML module:
   .quick > div.mod-custom > div (inline padding/text-align) > i.fa + br + a > span
   Style the module wrapper itself as the card; the markup inside stays as authored. */
.quick > div{
  background:#fff; display:flex; align-items:center; justify-content:center; min-height:120px;
  transition:opacity .5s ease, transform .5s ease, background .2s ease;
}
.quick > div.reveal{opacity:0; transform:translateY(14px);}
.quick > div.reveal.in{opacity:1; transform:none;}
.quick > div:hover{background:var(--mist);}
.quick > div > div{width:100%;}
.quick i.fa{font-size:1.6rem; color:var(--blue); transition:color .2s ease;}
.quick > div:hover i.fa{color:var(--yellow);}
.quick a{display:inline-block; font-size:.82rem; font-weight:700; text-transform:uppercase; color:var(--ink);}
.quick a span{font-size:.82rem !important; font-weight:700; text-transform:uppercase;}
.quick a img{display:block; margin:0 auto 8px; border-radius:4px;}

/* news - editorial image cards */
.section{max-width:1200px; margin:0 auto; padding:0 24px 72px;}
.section-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:26px;}
.section h3{font-size:1.5rem;}
.news-wrap{position:relative; border-radius:10px;}
.news-wrap::before{
  content:''; position:absolute; inset:-20px; z-index:0; border-radius:18px; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(0,105,180,.14), rgba(255,210,63,.09) 45%, transparent 70%);
  opacity:0; transition:opacity .35s ease;
}
.news-wrap:hover::before{opacity:1;}
.news-wrap{position:relative;}
.news{
  position:relative; z-index:1; display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px;
}
.news::-webkit-scrollbar{display:none;}
.news .card{flex:0 0 calc((100% - 44px)/3); min-width:240px; scroll-snap-align:start;}
.news-arrow{
  position:absolute; top:42%; transform:translateY(-50%); z-index:3; width:40px; height:40px; border-radius:50%;
  background:#fff; border:1px solid var(--line); box-shadow:0 10px 24px -10px rgba(0,0,0,.3);
  display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:1.1rem; color:var(--ink);
  transition:background .2s ease, color .2s ease, opacity .2s ease;
}
.news-arrow:hover{background:var(--blue); color:#fff; border-color:var(--blue);}
.news-arrow.is-hidden{opacity:0; pointer-events:none;}
.news-prev{left:-18px;}
.news-next{right:-18px;}
@media(max-width:860px){
  .news .card{flex:0 0 82%;}
  .news-prev{left:4px;} .news-next{right:4px;}
}
.card{
  transition:opacity .6s ease, transform .6s ease, box-shadow .35s ease;
  perspective:800px;
}
.card.reveal{opacity:0; transform:translateY(24px);}
.card.reveal.in{opacity:1; transform:none;}
.card:hover{box-shadow:0 20px 40px -22px rgba(0,105,180,.35);}
.card .ph{
  aspect-ratio:4/3; border-radius:4px; overflow:hidden; background:linear-gradient(145deg,var(--blue),var(--bar)) center/cover;
  margin-bottom:14px; transition:transform .25s ease; transform-style:preserve-3d; will-change:transform;
}
.card .card-media{display:block;}
.news-section{max-width:1200px; margin:0 auto; padding:0 24px 72px;}
.news-section .section-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:26px;}
.news-section .section-head h3{font-size:1.5rem;}
.news-pagination{margin-top:28px; display:flex; justify-content:center;}
.news-pagination ul{list-style:none; display:flex; gap:8px;}
.news-pagination li{list-style:none;}
.news-pagination a, .news-pagination span{
  display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px;
  border-radius:8px; font-size:.82rem; font-weight:600; padding:0 8px;
}
/* Joomla's own Bootstrap-based .page-link already draws a border/background of
   its own — without this override that shows up as a second, inner rectangle
   stacked inside ours. */
.news-pagination .page-link{border:1px solid var(--line) !important; background:transparent !important; box-shadow:none !important;}
.news-pagination a:hover{border-color:var(--blue); color:var(--blue);}
.news-pagination .active .page-link, .news-pagination [aria-current="page"]{
  background:var(--blue) !important; color:#fff !important; border-color:var(--blue) !important;
}
/* Joomla's first/prev/next/last pagination buttons are empty <span> hooks for
   its own icon font (icon-angle-double-left etc.) — confirmed from the live
   markup. That font isn't part of our template, so the button renders empty.
   Plain Unicode arrows need no font of their own and always show. */
.news-pagination .icon-angle-double-left::before{content:'«';}
.news-pagination .icon-angle-left::before{content:'‹';}
.news-pagination .icon-angle-right::before{content:'›';}
.news-pagination .icon-angle-double-right::before{content:'»';}
.news-pagination .page-item.disabled .page-link{opacity:.35; cursor:default;}
.news-pagination .page-item.disabled .page-link:hover{border-color:var(--line); color:inherit;}
.card .date{color:var(--blue); font-size:.76rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase;}
.card h4{font-family:'Inter',sans-serif; font-weight:700; font-size:1.05rem; margin:8px 0; line-height:1.3; text-transform:none;}
.card p{color:var(--muted); font-size:.88rem; line-height:1.5;}

footer{background:var(--bar); color:#C9CEDA; padding:48px 24px 0; font-size:.84rem;}
footer .fwrap{max-width:1300px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:28px; align-items:start; padding-bottom:36px;}
footer b{color:#fff;}
.footer-col-title{font-family:'Inter',sans-serif; text-transform:uppercase; letter-spacing:.04em; font-size:.76rem;
  font-weight:700; color:#8089A0; margin-bottom:14px;}
.footer-brand b{display:block; font-size:1rem; line-height:1.4; max-width:240px; margin-bottom:10px;}

/* --- footer module cards (login, "about" text) reuse the psiCard chrome but
   need a dark-on-dark palette instead of the light sidebar version. They're
   now direct children of footer .fwrap, so each one is its own grid column
   alongside the brand/menu/banners columns — not nested in a sub-grid. */
footer .side-card{
  border:1px solid rgba(255,255,255,.22); border-radius:12px; padding:18px; background:rgba(255,255,255,.055);
}
footer .side-card-title{color:#fff; font-size:.88rem;}
footer .side-card-body{color:#AEB4C4; font-size:.82rem; line-height:1.6;}
footer .side-card-body a{color:#fff; text-decoration:underline; text-underline-offset:2px;}
footer .side-card-body input[type="text"], footer .side-card-body input[type="password"]{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); color:#fff;
}
footer .side-card-body input[type="text"]::placeholder, footer .side-card-body input[type="password"]::placeholder{color:#8089A0;}
footer .side-card-body label{color:#AEB4C4; font-size:.8rem;}
footer .side-card-body ul{list-style:none; margin-top:8px;}
footer .side-card-body ul li{margin-top:4px;}
/* the passkey/"sign in without a password" avatar button looks out of place
   in a compact dark footer card — keep it functional but visually quiet */
footer .side-card-body img{max-width:48px; opacity:.6;}

.footer-banners ul{list-style:none; display:flex; flex-direction:column; gap:8px; margin-bottom:14px;}
.footer-banners a{color:#C9CEDA; font-size:.84rem;}
.footer-banners a:hover{color:#fff;}
.footer-banners img{max-width:100%; height:auto; border-radius:6px; margin-top:8px; background:rgba(255,255,255,.08);}

.fbottom{border-top:1px solid rgba(255,255,255,.1); padding:16px 24px; font-size:.78rem; color:#8089A0;}
.fbottom .fwrap{display:block; padding:0;}

@media(max-width:860px){
  footer .fwrap{grid-template-columns:1fr; gap:28px;}
}

@media(max-width:860px){
  nav{position:fixed; top:0; right:0; height:100%; width:min(78vw,300px); background:#fff;
      flex-direction:column; align-items:flex-start; padding:90px 24px 24px; transform:translateX(100%); transition:transform .3s ease; border-left:1px solid var(--line);}
  nav.open{transform:none;}
  .burger{display:block;}
  .hero-row{grid-template-columns:1fr;}
  .quick{grid-template-columns:repeat(2,1fr);}
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--paper:#0F1320; --ink:#F2F4F8; --muted:#9BA3B7; --line:#262C3C; --mist:#171C29;}
  header{background:#0F1320;} .quick{background:var(--line);} .quick > div{background:#171C29;}
}

/* Joomla core modules (mod_menu, mod_breadcrumbs etc.) rely on this Bootstrap-style
   utility class to hide screen-reader-only helper text ("Подробнее: X" links etc.)
   from sighted users while keeping it available to assistive tech. */
.sr-only, .visually-hidden{
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important;
}

/* ============ GENERIC JOOMLA MODULE OUTPUT ============ */

/* --- Primary nav (mod_menu, real Joomla output: some top-level items are a plain
   <a>, others — pure category headings with no page of their own — are rendered as
   <button class="mod-menu__toggle-sub"><span class="mod-menu__separator">Text</span>...
   Both patterns must look and behave identically. --- */
#nav{position:relative; display:flex; align-items:center; gap:4px;}
#nav > ul{display:flex; align-items:center; gap:26px; list-style:none; margin:0; padding:0;}
#nav li{position:relative; display:flex; align-items:center;}
/* invisible bridge over the gap between a top-level item and its dropdown
   (the dropdown sits 8px below, for breathing room from the red indicator) —
   without this, the mouse leaves the hoverable <li> while crossing that gap
   and the dropdown closes before the pointer ever reaches it. */
@media(min-width:861px){
  #nav > ul > li::after{content:''; position:absolute; top:100%; left:0; width:100%; height:10px;}
}

/* reset the button so it stops looking/acting like a native <button> */
#nav li > button.mod-menu__toggle-sub{
  background:none; border:none; margin:0; font:inherit; cursor:pointer;
  display:inline-flex; align-items:center; gap:4px; padding:8px 0;
}

/* the visible label — whether it's the <a> itself or the separator <span> inside
   the button — gets identical typography */
#nav li > a,
#nav li .mod-menu__separator{
  font-size:.84rem; font-weight:700; text-transform:uppercase; letter-spacing:.02em;
  color:var(--ink); padding:8px 0; display:inline-block; cursor:pointer;
}
#nav li > button.mod-menu__toggle-sub > .mod-menu__separator{padding:0;} /* avoid double padding inside the button */
#nav li.active > a{color:var(--blue);}
/* if an admin sets "Link Icon Class" / "Link Image" on a menu item (Joomla's
   own built-in Link Type fields), style it in — no extra markup needed from us */
#nav li > a i, #nav li > a img{margin-right:6px; vertical-align:middle;}
#nav li ul.mod-menu__sub a i, #nav li ul.mod-menu__sub a img{
  margin-right:8px; width:16px; height:16px; object-fit:contain; vertical-align:middle;
}
#nav li .icon-chevron-down{font-size:.55em; opacity:.55; margin-left:1px; transition:transform .2s ease;}
#nav li:has(> button[aria-expanded="true"]) .icon-chevron-down,
#nav li:has(> a + button[aria-expanded="true"]) .icon-chevron-down{transform:rotate(180deg);}

/* an item that already has its own <a> also gets a redundant toggle button from
   Joomla (only needed for the mobile accordion) — hide it on desktop, hover on
   the <li> already opens the dropdown there */
@media(min-width:861px){
  #nav li > a + button.mod-menu__toggle-sub{display:none;}
}

/* dropdown: Joomla's own core script (media/mod_menu/js/menu.min.js) owns the
   click-to-open interaction and toggles aria-expanded="true/false" on the
   sibling <button class="mod-menu__toggle-sub"> — we only style the result via
   that attribute instead of reinventing our own show/hide trigger (an earlier
   :hover-based version fought Joomla's own display:none and never won). */
#nav li ul.mod-menu__sub{
  list-style:none; position:absolute; top:calc(100% + 8px); left:0; min-width:260px; background:#fff;
  border:1px solid var(--line); border-radius:8px; padding:8px; box-shadow:0 18px 40px -16px rgba(0,0,0,.2);
  z-index:80; display:none; margin:0;
}
/* Desktop: hover/keyboard focus only — click-to-open is intentionally NOT
   wired up here (mobile has its own separate aria-expanded rule below, using
   the accordion/max-height mechanism, and is unaffected by this). */
@media(min-width:861px){
  #nav li:hover > ul.mod-menu__sub,
  #nav li:focus-within > ul.mod-menu__sub{display:block !important;}
}
#nav li ul.mod-menu__sub li{width:100%;}
#nav li ul.mod-menu__sub a{display:block; padding:9px 12px; font-size:.78rem; text-transform:none; font-weight:600; border-radius:5px; white-space:normal; line-height:1.35;}
#nav li ul.mod-menu__sub a:hover{background:var(--mist); color:var(--blue);}
#nav li ul.mod-menu__sub ul.mod-menu__sub{top:0; left:100%; margin-left:6px;}

@media(max-width:860px){
  #nav{position:fixed; top:0; right:0; height:100%; width:min(82vw,320px); background:#fff; z-index:200;
      flex-direction:column; align-items:stretch; padding:90px 18px 24px; transform:translateX(100%);
      transition:transform .3s ease; border-left:1px solid var(--line); overflow-y:auto;}
  #nav.open{transform:none;}
  #nav > ul{flex-direction:column; align-items:stretch; gap:2px; width:100%;}
  #nav li{width:100%; flex-wrap:wrap;}
  #nav li > a{width:100%; padding:12px 8px; border-bottom:1px solid var(--line);}
  #nav li > button.mod-menu__toggle-sub{width:100%; justify-content:space-between; padding:12px 8px; border-bottom:1px solid var(--line);}
  #nav li > a + button.mod-menu__toggle-sub{width:auto; position:absolute; right:0; top:0; height:100%; border-bottom:none; padding:0 8px; display:flex !important;}
  #nav li ul.mod-menu__sub{position:static; box-shadow:none; border:none; display:block;
      max-height:0; overflow:hidden; padding:0; transition:max-height .3s ease;}
  #nav li:has(> button[aria-expanded="true"]) > ul.mod-menu__sub,
  #nav li:has(> a + button[aria-expanded="true"]) > ul.mod-menu__sub{max-height:1000px !important; padding:4px 0 8px 14px !important;}
  #nav li ul.mod-menu__sub ul.mod-menu__sub{margin-left:0;}
  .nav-indicator{display:none;}
}

/* --- Sidebar module cards --- */
.page-wrap.has-sidebar .page-grid{display:grid; grid-template-columns:1fr 320px; gap:36px;}
.page-wrap.full-width .page-grid{display:block;}
.page-main{min-width:0;}
.page-side{display:flex; flex-direction:column; gap:18px;}
.side-card{border:1px solid var(--line); border-radius:12px; padding:18px;}
.side-card-title{font-family:'Inter',sans-serif; text-transform:none; font-size:.95rem; font-weight:700; margin-bottom:10px; color:var(--ink);}
.side-card-body{font-size:.86rem; line-height:1.6; color:var(--muted);}
.side-card-body a{color:var(--blue);}
.side-card-body input[type="text"], .side-card-body input[type="password"]{
  width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:6px; margin-bottom:8px; font-size:.86rem;
}
.side-card-body button, .side-card-body input[type="submit"]{
  background:var(--blue); color:#fff; border:none; padding:9px 16px; border-radius:999px; font-weight:700;
  font-size:.82rem; text-transform:uppercase; cursor:pointer;
}
@media(max-width:860px){ .page-wrap.has-sidebar .page-grid{grid-template-columns:1fr;} }

.page-wrap{max-width:1200px; margin:0 auto; padding:34px 24px 60px;}

/* --- Breadcrumbs --- */
.breadcrumb-wrap{max-width:1200px; margin:0 auto; padding:14px 24px 0; font-size:.8rem; color:var(--muted);}
.breadcrumb-wrap ul, .breadcrumb-wrap ol{list-style:none; display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:0; padding:0;}
.breadcrumb-wrap li:not(:last-child)::after{content:'·'; margin-left:6px; color:var(--line);}
.breadcrumb-wrap a{color:var(--muted);}
.breadcrumb-wrap a:hover{color:var(--blue);}

/* --- Article / compliance content (itemprop tables etc. rendered verbatim by Joomla) --- */
.item-page{font-size:.95rem; line-height:1.7;}
.item-page h2{font-family:'Inter',sans-serif; text-transform:none; font-weight:800; font-size:1.3rem; margin:26px 0 12px;}
.item-page h3{font-family:'Inter',sans-serif; text-transform:none; font-weight:700; font-size:1.08rem; margin:22px 0 10px;}
.item-page p{margin-bottom:12px;}
.item-page img{max-width:100%; height:auto; border-radius:4px;}
.item-page iframe{max-width:100%;}
.item-page table{border-collapse:collapse; margin:14px 0; font-size:.88rem; width:100%; max-width:720px;}
.item-page td, .item-page th{padding:10px 12px; vertical-align:top; border-bottom:1px solid var(--line);}
.item-page td:first-child{background:var(--mist); font-weight:600; width:34%;}
.item-page hr{border:none; border-top:1px solid var(--line); margin:18px 0;}
.item-page ul, .item-page ol{margin:0 0 14px 22px;}

/* --- Footer menu + footer modules --- */
.footer-menu ul{list-style:none; display:flex; flex-direction:column; gap:10px;}
.footer-menu a{color:#C9CEDA; font-size:.84rem;}
.footer-menu a:hover{color:#fff;}
.footer-brand p{margin-top:0; color:#9BA3B7;}

/* --- Banners row --- */
.banners-row{max-width:1200px; margin:0 auto 20px; padding:0 24px; display:flex; flex-wrap:wrap; gap:18px; align-items:center;}
.banners-row img{max-height:48px; width:auto; opacity:.85; transition:opacity .2s ease;}
.banners-row img:hover{opacity:1;}

/* --- Error page --- */
.error-block{max-width:640px; margin:80px auto; padding:0 24px; text-align:center;}
.error-code{font-family:'Archivo Black',sans-serif; font-size:clamp(4rem,14vw,7rem); color:var(--blue); line-height:1;}
.error-title{margin:10px 0 16px;}
.error-text{color:var(--muted); margin-bottom:26px;}

/* --- Search module --- */
.header-search form{display:flex; align-items:center;}
.header-search input[type="text"]{
  border:1px solid var(--line); border-radius:999px; padding:8px 14px; font-size:.82rem; width:150px;
}

/* dark mode: extend generic module coverage */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) #nav li ul{background:#171C29; border-color:var(--line);}
}
:root[data-theme="dark"] #nav li ul{background:#171C29; border-color:var(--line);}