/* =========================================================
   Ashcroft Forensic Advisory — Core Styles (GeneratePress + Gutenberg)
   Scope & intent:
   - Stable, predictable layout primitives with minimal regressions
   - AFA system classes:
     - One consistent content column:         .afa-inner
     - Full-width bands with backgrounds:     .afa-band (+ --muted / --cta)
     - Hero: full-bleed Cover:               .afa-hero
       -> Hero ALWAYS uses a nested .afa-inner for column alignment
       -> Cover's internal inner-container is neutralized (prevents drift)
     - Tighter vertical rhythm / less whitespace
     - Opt-in equal-height cards:            .afa-equal-cards on Columns block
     - Optional accent button:               .afa-btn--accent on Button wrapper
     - Services wrapper (page-level):        .afa-service (full-width Group)
   Git workflow (always):
   1) Update local file: Website/site-css/additional.css
   2) Commit
   3) Upload to server: wp-content/plugins/afa-css/assets/additional.css (overwrite)
   ========================================================= */

/* ---------- Design tokens ---------- */
:root{
  --afa-ink:#222222;
  --afa-bg:#f7f8f9;
  --afa-card:#ffffff;
  --afa-line:rgba(34,34,34,.12);
  --afa-primary:#1C0770;
  --afa-accent:#D2691E;

  --afa-max:1100px;
  --afa-gutter:24px;
  --afa-gutter-mobile:16px;

  /* Section rhythm */
  --afa-band-pad-y:32px;
  --afa-band-pad-y-mobile:22px;

  /* Muted sections slightly tighter (reduces “grey slab” feel) */
  --afa-band-muted-pad-y:26px;
  --afa-band-muted-pad-y-mobile:18px;

  --afa-radius:16px;

  /* Services rhythm (tight but readable) */
  --afa-service-gap:2px;           /* space between sections */
  --afa-service-gap-mobile:2px;
  --afa-service-divider:rgba(34,34,34,.04);
  --afa-service-divider-pad:4px;   /* space after divider before content */
  --afa-service-divider-pad-mobile:4px;
}

/* ---------- Base ---------- */
body{ background: var(--afa-bg); color: var(--afa-ink); }

.entry-content{ line-height:1.7; font-size:18px; }
@media (max-width:768px){ .entry-content{ font-size:16.5px; } }

.entry-content h1,
.entry-content h2,
.entry-content h3{ color: var(--afa-primary); letter-spacing:-0.01em; }

.entry-content,
.entry-content p,
.entry-content li{ color: var(--afa-ink); }

a{ color: var(--afa-primary); text-decoration-thickness:2px; text-underline-offset:3px; }
a:hover{ color: var(--afa-accent); }

.site-header{ border-bottom:1px solid var(--afa-line); background:var(--afa-card); }
.site-footer{ border-top:1px solid var(--afa-line); }

/* ---------- Alignment system ---------- */
/* Single source of truth for content column */
.afa-inner{
  box-sizing:border-box;
  width:100%;
  max-width:var(--afa-max);
  margin:0 auto;
  padding-left:var(--afa-gutter);
  padding-right:var(--afa-gutter);
  text-align:left;
}
@media (max-width:768px){
  .afa-inner{
    padding-left:var(--afa-gutter-mobile);
    padding-right:var(--afa-gutter-mobile);
  }
}

/* Hard lock heading alignment inside afa-inner */
.afa-inner :is(h1,h2,h3),
.afa-inner .wp-block-heading{
  text-align:left !important;
  margin-left:0 !important;
}
.afa-inner .has-text-align-center{ text-align:left !important; }

/* ---------- Bands ---------- */
/* NOTE: Set the OUTER band Group block Alignment = Full width in editor */
.afa-band{
  width:100%;
  padding-top:var(--afa-band-pad-y);
  padding-bottom:var(--afa-band-pad-y);
}
@media (max-width:768px){
  .afa-band{
    padding-top:var(--afa-band-pad-y-mobile);
    padding-bottom:var(--afa-band-pad-y-mobile);
  }
}

.afa-band--muted{
  background:#eeeeee;
  padding-top:var(--afa-band-muted-pad-y);
  padding-bottom:var(--afa-band-muted-pad-y);
}
@media (max-width:768px){
  .afa-band--muted{
    padding-top:var(--afa-band-muted-pad-y-mobile);
    padding-bottom:var(--afa-band-muted-pad-y-mobile);
  }
}

.afa-band--cta{ background:var(--afa-primary); }

/* CTA text inversion + button style inside CTA */
.afa-band--cta, .afa-band--cta *{ color:#fff !important; }

.afa-band--cta .wp-block-button__link{
  background:#fff !important;
  color:var(--afa-primary) !important;
  border-color:transparent !important;
}
.afa-band--cta .wp-block-button__link:hover{
  background:var(--afa-accent) !important;
  color:#fff !important;
}

/* Remove gaps between major sections (only affects your layout blocks) */
.entry-content > .wp-block-cover.afa-hero,
.entry-content > .afa-band{ margin:0 !important; }

/* ---------- Hero (Cover block) ---------- */
/* Editor: set Cover Alignment = Full width */
/* Full-bleed hero background */
.wp-block-cover.afa-hero{
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  display:block !important;
}

/* Critical: neutralize Cover's own inner container to prevent page-to-page drift */
.wp-block-cover.afa-hero .wp-block-cover__inner-container{
  max-width:none !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  text-align:left !important;
}

/* The ONLY hero content column wrapper */
.wp-block-cover.afa-hero .afa-inner{
  box-sizing:border-box;
  width:100%;
  max-width:var(--afa-max);
  margin:0 auto;
  padding-left:var(--afa-gutter);
  padding-right:var(--afa-gutter);
}
@media (max-width:768px){
  .wp-block-cover.afa-hero .afa-inner{
    padding-left:var(--afa-gutter-mobile);
    padding-right:var(--afa-gutter-mobile);
  }
}

/* ---------- Vertical rhythm (less whitespace) ---------- */
.entry-content h2, .entry-content h3{ margin:0 0 10px 0; }
.entry-content p{ margin:0 0 12px 0; }

.entry-content ul, .entry-content ol{
  margin:6px 0 14px 0;
  padding-left:1.1em;
}
.entry-content li{ margin:0 0 .35em 0; }

.entry-content h2 + ul,
.entry-content h2 + ol,
.entry-content h3 + ul,
.entry-content h3 + ol{ margin-top:6px; }

/* Tighten between “groupings” inside AFA bands/heroes only */
.entry-content :is(.afa-band, .wp-block-cover.afa-hero) > .wp-block-group{
  margin-block: 0 !important;
}
.entry-content :is(.afa-band, .wp-block-cover.afa-hero) .wp-block-group + .wp-block-group{
  margin-top: 14px !important;
}

/* Keep spacer blocks from reintroducing huge whitespace
   Scoped to AFA sections to avoid site-wide regressions */
.entry-content :is(.afa-band, .wp-block-cover.afa-hero) .wp-block-spacer{
  height:18px !important;
}
@media (max-width:768px){
  .entry-content :is(.afa-band, .wp-block-cover.afa-hero) .wp-block-spacer{
    height:14px !important;
  }
}

/* ---------- Buttons ---------- */
.wp-block-button__link,
a.button, button, input[type="submit"]{
  border-radius:999px;
  padding:12px 18px;
  font-weight:600;
  border:1px solid var(--afa-line);
}

.wp-block-button__link{
  background:var(--afa-primary);
  color:#fff !important;
  border-color:transparent;
}
.wp-block-button__link:hover{ background:var(--afa-accent); }

/* Opt-in: force a specific button to use the accent
   Apply class to the Button block wrapper:  afa-btn--accent
*/
.afa-btn--accent .wp-block-button__link{
  background:var(--afa-accent) !important;
  color:#fff !important;
  border-color:transparent !important;
}
.afa-btn--accent .wp-block-button__link:hover{
  background:var(--afa-primary) !important;
  color:#fff !important;
}

/* ---------- Panels / cards ---------- */
.afa-panel{
  background:var(--afa-card);
  border:1px solid var(--afa-line);
  border-radius:var(--afa-radius);
  padding:22px;
  box-shadow:0 6px 16px rgba(0,0,0,.05);
}

/* Columns spacing
   Scoped to AFA bands/heroes to avoid site-wide regressions */
.entry-content :is(.afa-band, .wp-block-cover.afa-hero) .wp-block-columns{
  gap:22px;
}
@media (max-width:768px){
  .entry-content :is(.afa-band, .wp-block-cover.afa-hero) .wp-block-columns{
    gap:16px;
  }
}

/* ---------- Equal-height cards (OPT-IN) ---------- */
/* Add class "afa-equal-cards" to the COLUMNS block you want equalized */
.entry-content .wp-block-columns.afa-equal-cards{
  align-items:stretch !important;
}
.entry-content .wp-block-columns.afa-equal-cards > .wp-block-column{
  display:flex !important;
  min-width:0;
}
.entry-content .wp-block-columns.afa-equal-cards > .wp-block-column > .afa-panel{
  flex:1 1 auto;
  width:100%;
}

/* ---------- Workflow “stepper” ---------- */
/* Put class afa-stepper on a Paragraph block */
.afa-stepper{
  display:inline-block;
  margin:6px 0 18px 0;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--afa-line);
  background:rgba(255,255,255,.65);
  color:var(--afa-primary);
  font-weight:600;
  letter-spacing:.01em;
  line-height:1.2;
}

/* =========================================================
   Services wrapper (full-width Group with class: afa-service)
   Fixes:
   - removes Gutenberg constrained-child max-width inside services
   - keeps your .afa-inner column width (1100px) + gutters
   - tightens section spacing + dividers
   ========================================================= */

.wp-block-group.alignfull.afa-service{
  background: linear-gradient(180deg, rgba(28,7,112,0.030), rgba(28,7,112,0) 280px);
}

/* Ensure the wrapper itself isn’t boxed in by its inner container */
.wp-block-group.alignfull.afa-service > .wp-block-group__inner-container{
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* CRITICAL: override Gutenberg “constrained layout child width” inside services.
   This is what keeps your content stuck in a narrow centered column. */
.wp-block-group.alignfull.afa-service
  :is(.is-layout-constrained, .wp-block-group-is-layout-constrained)
  > :where(:not(.alignleft):not(.alignright):not(.alignfull)){
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Each section group is your true content column */
.wp-block-group.alignfull.afa-service .wp-block-group.afa-inner{
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: var(--afa-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--afa-gutter) !important;
  padding-right: var(--afa-gutter) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
@media (max-width:768px){
  .wp-block-group.alignfull.afa-service .wp-block-group.afa-inner{
    padding-left: var(--afa-gutter-mobile) !important;
    padding-right: var(--afa-gutter-mobile) !important;
  }
}

/* Make the very first section breathe a little under the hero */
.wp-block-group.alignfull.afa-service .wp-block-group.afa-inner:first-child{
  padding-top: 12px !important;
}

/* Section spacing + divider */
.wp-block-group.alignfull.afa-service .wp-block-group.afa-inner + .wp-block-group.afa-inner{
  margin-top: var(--afa-service-gap, 14px) !important;
  padding-top: var(--afa-service-divider-pad, 12px) !important;
  border-top: 1px solid var(--afa-service-divider, rgba(34,34,34,.08));
}

/* Services heading accent underline */
.wp-block-group.alignfull.afa-service .afa-inner :is(h2,h3){
  position: relative;
  padding-bottom: 6px;
}
.wp-block-group.alignfull.afa-service .afa-inner :is(h2,h3)::after{
  content:"";
  display:block;
  width: 56px;
  height: 3px;
  margin-top: 6px;
  background: var(--afa-accent);
  border-radius: 999px;
  opacity: 0.9;
}

/* ===== Services: tighten internal block rhythm (scoped) ===== */
.wp-block-group.alignfull.afa-service .afa-inner :is(h2,h3){
  margin-bottom: 8px !important;
}

.wp-block-group.alignfull.afa-service .afa-inner p{
  margin-bottom: 10px !important;
}

.wp-block-group.alignfull.afa-service .afa-inner ul,
.wp-block-group.alignfull.afa-service .afa-inner ol{
  margin-top: 6px !important;
  margin-bottom: 10px !important;
}

.wp-block-group.alignfull.afa-service .afa-inner li{
  margin-bottom: .22em !important;
}

/* Columns sections: reduce extra space around the Columns block */
.wp-block-group.alignfull.afa-service .afa-inner .wp-block-columns{
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

/* Any spacers used inside services: clamp harder */
.wp-block-group.alignfull.afa-service .wp-block-spacer{ height: 6px !important; }
@media (max-width:768px){
  .wp-block-group.alignfull.afa-service .wp-block-spacer{ height: 5px !important; }
}

/* Services: force consistent tight rhythm inside each section */
.wp-block-group.alignfull.afa-service
  .wp-block-group.afa-inner
  > .wp-block-group__inner-container
  > *{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.wp-block-group.alignfull.afa-service
  .wp-block-group.afa-inner
  > .wp-block-group__inner-container
  > * + *{
  margin-top: 7px !important; /* <- adjust: 8px tighter, 12px looser */
}

/* ---------- Mobile header hard reset (undo any grid + prevent vertical letter stacking) ---------- */
@media (max-width:768px){

  html, body { overflow-x:hidden; }

  /* Allow wrapping so the nav can expand below */
  .site-header .inside-header{
    display:flex !important;
    flex-wrap:wrap !important;          /* <-- key change */
    align-items:center !important;
    gap: 10px !important;

    grid-template-columns: unset !important;
    grid-template-rows: unset !important;
    column-gap: unset !important;
    row-gap: unset !important;
  }

  /* Logo + Branding + Toggle */
  .site-header .site-logo,
  .site-header .custom-logo-link{
    order: 1 !important;
    flex:0 0 56px !important;   /* fixed slot prevents column collapse*/ 
  }
  
  .site-header .site-logo img,
  .site-header .custom-logo{
    max-width: 56px !important;
    height: auto !important;
  }

  /* Branding uses remaining space */
  .site-header .site-branding{
    order: 2 !important;
    flex:1 1 auto !important;
    min-width:0 !important;     /* critical for wrapping */
  }

  /* Toggle stays on the right of the first row */
  .site-header .menu-toggle{
    order: 3 !important;
    flex:0 0 auto !important;
    margin-left:auto !important;
  }

  /* NAV must become a full-width row below when opened */
  .site-header .main-navigation{
    order: 4 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  /* GP typically adds .toggled to .main-navigation */
  .site-header .main-navigation.toggled{
    display:block !important;
  }

  /* If GP uses a nested .main-nav container */
  .site-header .main-navigation.toggled .main-nav{
    display:block !important;
    width:100% !important;
  }
  
  .site-header .main-title a,
  .site-header .site-description{
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: auto;
  }
}

/* ---------- Extra-small mobile header scaling (add at end) ---------- */
@media (max-width:480px){

  /* Slightly tighter spacing on very small screens */
  .site-header .inside-header{
    gap: clamp(6px, 2vw, 10px) !important;
  }

  /* Logo slot and image scale down smoothly */
  .site-header .site-logo,
  .site-header .custom-logo-link{
    flex-basis: clamp(40px, 12vw, 56px) !important;
  }

  .site-header .site-logo img,
  .site-header .custom-logo{
    max-width: clamp(40px, 12vw, 56px) !important;
    height: auto !important;
  }

  /* Title/subtitle scale down smoothly for tiny screens */
  .site-header .main-title{
    font-size: clamp(16px, 4.6vw, 20px) !important;
    line-height: 1.12 !important;
  }

  .site-header .site-description{
    font-size: clamp(11px, 3.2vw, 13px) !important;
    line-height: 1.25 !important;
  }

  /* Make the toggle slightly smaller on narrow devices */
  .site-header .menu-toggle{
    transform: scale(clamp(0.88, 0.25vw + 0.85, 0.95));
    transform-origin: right center;
  }
}