/* ==========================================================================
   ABC overrides. Loaded after the theme's styles.css / pages.css / nav.css.
   Palette is taken from the existing auditbureau.org site:
   ABC blue #0828A1, amber #FFAB23, orange #FC8123, cream #FFE6AF.
   ========================================================================== */

:root{
  --blue:      #0828A1;
  --blue-600:  #071F85;
  --blue-700:  #061A6E;
  --navy:      #07124A;
  --navy-soft: #0E1F6B;

  --amber:     #FFAB23;
  --amber-600: #FC8123;
  --cream:     #FFF6E0;

  --tint:      #F3F6FF;
  --tint-2:    #FFF9EC;
  --tint-3:    #FFEFC9;
  --line:      #E4E6F0;
  --ink:       #0B1338;

  --shadow-btn: 0 12px 24px rgba(8, 40, 161, .26);
}

/* ------------------------------------------------------------------ buttons */
.btn-accent{
  background:linear-gradient(180deg, #FFC24D 0%, var(--amber) 100%);
  color:#1A1400; box-shadow:0 10px 22px rgba(252,129,35,.28);
}
.btn-accent:hover{ background:var(--amber); transform:translateY(-2px); }
.btn-outline-light{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.35); }
.btn-outline-light:hover{ background:rgba(255,255,255,.12); border-color:var(--white); }
.btn-block + .btn-block{ margin-top:10px; }

/* ------------------------------------------------------------------- header */
.site-header{ border-bottom:3px solid var(--amber); }
.brand{ display:flex; align-items:center; gap:12px; flex:none; }
.brand-logo{
  filter:none; height:58px; width:auto;
  background:var(--white); border-radius:8px; padding:3px 6px;
}
.brand-name{
  font-family:var(--font-head); font-weight:700; font-size:1rem;
  line-height:1.2; color:var(--white); max-width:9.5em;
}
a.meganav-link{ text-decoration:none; }
.megapanel-intro .eyebrow{ color:var(--amber-600); }

/* --------------------------------------------------------------------- hero */
.hero-bg{
  background:
    radial-gradient(900px 420px at 50% -8%, rgba(8,40,161,.14), transparent 70%),
    linear-gradient(126deg, #F3F6FF 0%, #F3F6FF 45%, #FFE9BD 100%);
}
.hero-bg::after{ content:none; }
.hero .eyebrow{ color:var(--amber-600); }

/* slider */
.slider{ position:relative; }
.slider-track{
  position:relative; aspect-ratio:2275 / 1180; overflow:hidden;
  border-radius:var(--r-xl);
  border:6px solid rgba(255,255,255,.8);
  box-shadow:0 30px 70px rgba(8,40,161,.22);
  background:var(--white);
}
.slider-slide{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .8s ease;
}
.slider-slide.is-active{ opacity:1; }
.slider-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
  background:var(--white); box-shadow:var(--shadow-sm); cursor:pointer;
  display:grid; place-items:center;
}
.slider-arrow::before{
  content:""; width:9px; height:9px;
  border-right:2px solid var(--blue); border-bottom:2px solid var(--blue);
}
.slider-arrow--prev{ left:-16px; }
.slider-arrow--prev::before{ transform:translateX(2px) rotate(135deg); }
.slider-arrow--next{ right:-16px; }
.slider-arrow--next::before{ transform:translateX(-2px) rotate(-45deg); }
.slider-arrow:hover{ border-color:var(--blue); }
.slider-dots{ display:flex; justify-content:center; gap:4px; margin-top:14px; }
.slider-dot{
  width:28px; height:28px; padding:0; border:0; background:none; cursor:pointer;
  display:grid; place-items:center;
}
.slider-dot::before{
  content:""; width:10px; height:10px; border-radius:50%;
  background:#C3C9E0; transition:background .2s ease, transform .2s ease;
}
.slider-dot.is-active::before{ background:var(--amber-600); transform:scale(1.25); }

/* ----------------------------------------------------- important information */
.quote-band::before{ content:none; }
.info-band{ padding:clamp(40px,5vw,64px) 0; }
.info-band .eyebrow{ color:var(--amber); }
.info-band blockquote{
  max-width:860px; font-size:clamp(1.15rem,2.2vw,1.6rem); font-weight:500;
  line-height:1.4; letter-spacing:-.01em; margin-bottom:1.4rem;
}
.info-band blockquote .accent{ color:var(--amber); font-weight:700; white-space:nowrap; }

/* ---------------------------------------------------- news and notifications */
.updates-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); }
.updates-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding-bottom:.9rem; margin-bottom:.4rem; border-bottom:2px solid var(--ink);
}
.updates-head h2{ margin:0; font-size:clamp(1.3rem,2.2vw,1.7rem); }
.updates-list{ list-style:none; margin:0; padding:0; }
.updates-list li{ border-bottom:1px solid var(--line); }
.update{
  display:grid; grid-template-columns:1fr auto; column-gap:16px; row-gap:.2rem;
  padding:1.1rem .25rem; text-decoration:none; color:inherit;
  transition:background .16s ease;
}
.update:hover{ background:var(--tint-2); }
.update-meta{
  grid-column:1; font-family:var(--font-head); font-size:.82rem; font-weight:700;
  color:var(--amber-600);
}
.update-title{ grid-column:1; color:var(--ink); font-size:.98rem; line-height:1.5; }
.update:hover .update-title{ color:var(--blue); }
.update-dl{
  grid-column:2; grid-row:1 / span 2; align-self:center;
  width:36px; height:36px; border-radius:50%; background:var(--tint);
  display:grid; place-items:center;
}
.update-dl::before{
  content:""; width:16px; height:16px; background:var(--blue);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11 3h2v9.2l3.3-3.3 1.4 1.4L12 16 6.3 10.3l1.4-1.4L11 12.2V3ZM5 19h14v2H5v-2Z'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11 3h2v9.2l3.3-3.3 1.4 1.4L12 16 6.3 10.3l1.4-1.4L11 12.2V3ZM5 19h14v2H5v-2Z'/></svg>") center/contain no-repeat;
}
.updates-empty{ padding:1.1rem .25rem; color:var(--muted); }

/* ---------------------------------------------------------------- about ABC */
.link-cards--compact{ grid-template-columns:repeat(4,1fr); }
.link-cards--compact .link-card{ justify-content:space-between; gap:1rem; padding:20px 22px; }

/* --------------------------------------------------------------- ad banners
   Leaderboard sits above News / Circulars / Notifications; the tiles form a
   rail beside them on wide screens and a row beneath them on narrow ones. */
.ad img{ display:block; max-width:100%; height:auto; border-radius:6px; }
.ad-leaderboards{ display:grid; justify-items:center; gap:16px; margin-bottom:clamp(32px,4vw,52px); }
.ad--tile{
  border:1px solid var(--line); border-radius:var(--r-sm); padding:8px;
  background:var(--white); box-shadow:var(--shadow-sm);
}
.updates-layout.has-rail,
.about-layout.has-rail{
  display:grid; grid-template-columns:minmax(0,1fr) 223px;
  gap:clamp(24px,3vw,40px); align-items:start;
}
.ad-rail{ display:grid; gap:18px; justify-items:center; }
.has-rail .updates-grid--three{ gap:clamp(20px,2.4vw,32px); }
.about-layout.has-rail .link-cards--compact{ grid-template-columns:repeat(3,1fr); }
@media (max-width:1180px){
  .updates-layout.has-rail,
  .about-layout.has-rail{ grid-template-columns:1fr; }
  .ad-rail{ display:flex; flex-wrap:wrap; justify-content:center; gap:20px; margin-top:8px; }
}

/* ------------------------------------------------------------------- footer */
.footer-logo{ background:var(--white); border-radius:10px; padding:6px 10px; height:auto; width:120px; filter:none; }
.footer-brand p{ font-family:var(--font-head); font-weight:700; color:var(--white); }
.footer-contact strong{ color:var(--white); font-weight:600; }

/* --------------------------------------------------------------- responsive */
@media (max-width:1080px){
  .link-cards--compact,
  .about-layout.has-rail .link-cards--compact{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:900px){
  .brand-name{ font-size:.92rem; }
  .updates-grid{ grid-template-columns:1fr; }
  .link-cards--compact,
  .about-layout.has-rail .link-cards--compact{ grid-template-columns:repeat(2,1fr); }
  .slider-arrow--prev{ left:8px; }
  .slider-arrow--next{ right:8px; }
}
@media (max-width:640px){
  .brand-logo{ height:48px; }
  .slider-track{ border-width:3px; border-radius:var(--r-md); }
  .slider-arrow{ display:none; }
  .link-cards--compact,
  .about-layout.has-rail .link-cards--compact{ grid-template-columns:1fr; }
  .info-band blockquote .accent{ white-space:normal; }
  .hero-actions .btn{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
  .slider-slide{ transition:none; }
}

/* keep the top-level menu labels on one line and the header inside the shell */
.meganav-link{ white-space:nowrap; }
.header-cta{ white-space:nowrap; }
/* the full name only fits beside the logo once the menu collapses */
@media (min-width:1001px){
  .brand-name{ display:none; }
}
@media (max-width:1140px){
  .header-inner{ gap:8px; }
  .meganav{ margin-left:4px; }
  .meganav-link{ padding-inline:.42rem; }
  .header-actions{ gap:6px; }
  .header-cta{ padding-inline:.7rem; }
}
@media (max-width:1000px){
  .brand-name{ display:block; }
}
@media (max-width:760px){
  .brand-name{ display:none; }
}
@media (max-width:560px){
  .brand-name{ display:block; }
}

/* mobile sheet sits on the dark ground */
.mpanel-back{ color:var(--amber); }
.mlink--overview{ color:var(--amber); }
.mobilenav-foot .btn-outline-light{ margin-top:10px; }
@media (max-width:640px){
  .link-cards--compact .link-card{ flex-direction:row; align-items:center; padding:16px 18px; }
}

/* News, Circulars, Notifications side by side */
.updates-grid--three{ grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,40px); }
@media (max-width:900px){ .updates-grid--three{ grid-template-columns:1fr 1fr; } }
@media (max-width:760px){ .updates-grid--three{ grid-template-columns:1fr; } }

/* Three columns: share one set of rows (heading + 3 items), so each News and
   Circulars row lines up with the matching, often taller, Notifications row */
@media (min-width:901px){
  #updates .updates-grid--three{ grid-template-rows:auto repeat(3, auto); row-gap:0; }
  #updates .updates-col{ display:grid; grid-row:span 4; grid-template-rows:subgrid; }
  #updates .updates-list{ display:grid; grid-row:span 3; grid-template-rows:subgrid; }
  #updates .updates-list li{ display:grid; }
  #updates .update{ align-content:start; }
}

/* --------------------------------------------------------- inner pages
   Section links on the left (the old site's left menu), page body beside
   them; the links move above the body on narrow screens. */
button.meganav-link.is-current{ color:var(--amber); }
.page-hero{
  background:
    radial-gradient(700px 320px at 85% -10%, rgba(8,40,161,.12), transparent 70%),
    linear-gradient(126deg, #F3F6FF 0%, #F3F6FF 50%, #FFE9BD 100%);
  border-bottom:1px solid var(--line);
}
.page-hero .eyebrow{ color:var(--amber-600); }
.page-hero .page-hero-inner{ max-width:var(--shell); }
.page-hero h1{ color:var(--ink); max-width:24ch; text-wrap:balance; }

.page-layout{
  display:grid; grid-template-columns:260px minmax(0,1fr);
  gap:clamp(28px,4vw,56px); align-items:start;
}
.page-nav{
  position:sticky; top:110px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm); padding:20px 14px;
}
.page-nav-title{
  font-family:var(--font-head); font-size:.74rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--amber-600);
  margin:0 .7rem .6rem;
}
.page-nav ul{ list-style:none; margin:0; padding:0; }
.page-nav a{
  display:block; padding:.6rem .7rem; border-radius:10px;
  color:var(--ink); text-decoration:none; font-size:.94rem; line-height:1.35;
  border-left:3px solid transparent;
}
.page-nav a:hover{ background:var(--tint); color:var(--blue); }
.page-nav a.is-current{
  background:var(--tint); color:var(--blue); font-weight:600;
  border-left-color:var(--amber);
}

.page-body{ max-width:860px; color:var(--ink); }
.page-body p{ line-height:1.75; margin:0 0 1.1rem; }
.page-body ul{ margin:0 0 1.2rem; padding-left:1.3rem; }
.page-body li{ line-height:1.7; margin-bottom:.35rem; }
.page-body li::marker{ color:var(--amber-600); }
.page-body a:not(.btn):not(.update){ color:var(--blue); }
.page-body a:not(.btn):not(.update):hover{ text-decoration:underline; }
.page-body .sub-head{
  margin:2.2rem 0 .9rem; padding-top:1.6rem; border-top:1px solid var(--line);
  font-size:clamp(1.15rem,2vw,1.4rem);
}
.page-docs{ display:flex; flex-wrap:wrap; gap:12px; margin-top:1.4rem; }

.page-table-wrap{ margin-bottom:1.6rem; }
.page-table{ min-width:0; }
.page-table th{
  font-family:var(--font-head); font-size:.74rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--blue);
  background:var(--tint-2); vertical-align:top;
}
.page-table td{ vertical-align:top; line-height:1.5; }
.page-table .member{ display:block; margin-bottom:.9rem; }
.page-table .member:last-child{ margin-bottom:0; }
.page-table .member b{ display:block; color:var(--ink); }
.page-table .member span{ color:#4C5B6B; }
.page-table .center{ text-align:center; }
.page-table tbody tr:hover{ background:transparent; }

@media (max-width:900px){
  .page-layout{ grid-template-columns:1fr; }
  .page-nav{ position:static; padding:14px 10px; }
  .page-nav ul{ display:flex; flex-wrap:wrap; gap:6px; }
  .page-nav a{ border-left:0; border:1px solid var(--line); border-radius:999px; padding:.45rem .9rem; font-size:.86rem; }
  .page-nav a.is-current{ border-color:var(--amber); }
}
@media (max-width:640px){
  .page-table, .page-table tbody, .page-table tr, .page-table th, .page-table td{ display:block; width:100% !important; }
  .page-table tr{ border-bottom:1px solid var(--line); }
  .page-table th, .page-table td{ border-bottom:0; }
}
@media (max-width:640px){
  .page-table tr.head-row{ display:none; }
  .page-table td[data-label]::before{
    content:attr(data-label); display:block; margin-bottom:.5rem;
    font-family:var(--font-head); font-size:.72rem; font-weight:700;
    letter-spacing:.1em; text-transform:uppercase; color:var(--blue);
  }
  .page-table td{ padding:1rem 1.1rem; }
  .page-table .center{ text-align:left; }
}

/* Document lists on inner pages reuse the homepage's .update rows */
.page-body .updates-list{ margin:0 0 1.6rem; padding-left:0; border-top:1px solid var(--line); }
.page-body .update{ padding:.95rem .25rem; text-decoration:none; }
.page-body .update:hover{ text-decoration:none; }
.page-body .update-title{ grid-row:1 / span 2; align-self:center; font-weight:500; }
.page-body .sub-head:first-child{ margin-top:0; padding-top:0; border-top:0; }
.doc-type{ font-family:var(--font-head); font-size:.72rem; font-weight:700; color:var(--muted); margin-left:.5rem; }
.page-layout--single{ grid-template-columns:minmax(0,1fr); }

/* Contact details and sitemap */
.contact-list{ list-style:none; padding:0 !important; margin:0; display:grid; gap:1.2rem; }
.contact-list li{ margin:0; padding:1.2rem 1.4rem; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--white); box-shadow:var(--shadow-sm); }
.contact-list b{ display:block; font-family:var(--font-head); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--amber-600); margin-bottom:.3rem; }
.sitemap-cols{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:28px 40px; }
.sitemap-cols h2{ font-size:1.05rem; margin:0 0 .6rem; padding-bottom:.5rem; border-bottom:2px solid var(--amber); }
.sitemap-cols ul{ list-style:none; padding:0 !important; margin:0; }
.sitemap-cols li{ margin:0; border-bottom:1px solid var(--line); }
.sitemap-cols a{ display:block; padding:.55rem 0; text-decoration:none; }

/* News, Circulars and Notifications listings: date column and page links */
.updates-table .updates-date{ white-space:nowrap; font-family:var(--font-head); font-size:.85rem; font-weight:700; color:var(--amber-600); }
.updates-table td a:not(.update-dl){ color:var(--ink); }
.updates-table td a:not(.update-dl):hover{ color:var(--blue); text-decoration:underline; }
.updates-table .update-dl{ display:inline-grid; }
.updates-table tbody tr:hover{ background:var(--tint-2); }

.pager ul{ list-style:none; margin:0; padding:0 !important; display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.pager li{ margin:0; }
.pager a, .pager span{
  display:inline-grid; place-items:center; min-width:40px; height:40px; padding:0 .8rem;
  border:1px solid var(--line); border-radius:10px; background:var(--white);
  font-family:var(--font-head); font-size:.86rem; font-weight:600; color:var(--ink); text-decoration:none;
}
.pager a:hover{ border-color:var(--blue); color:var(--blue); }
.pager .is-current{ background:var(--blue); border-color:var(--blue); color:var(--white); }
.pager .is-disabled{ color:var(--muted); opacity:.55; }
.pager .pager-gap{ border:0; background:none; min-width:0; padding:0 .2rem; }
