/* ==========================================================================
   Global ADHD Conference — site-wide layer
   Repo: ADHD-UK/globaladhd · public/gac-site.css

   Loaded on every redesigned page, immediately after gac-homepage.css, which
   supplies the tokens used here.

   Why this exists: gac-homepage.css is 65KB and has to be uploaded by hand,
   so a twelve-line header fix costs a full re-upload of the whole stylesheet.
   This file is small enough to be pushed straight to GitHub, the same as
   gac-forms.css - so site-wide tweaks stop costing a round trip.

   The rule: anything in here supersedes gac-homepage.css, and re-declares the
   whole rule block rather than patching a single property, so there is never a
   half-rule to reason about.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header logo — squashing, at every width

   Measured across 380/500/640/760/900/979/1000/1200px:

       979px   125x62   aspect 2.013   correct
      1000px    99x54   aspect 1.825   SQUASHED
      1200px   109x54   aspect 2.014   correct

   Mechanism: the Theme Builder header carries a "logo width: 15%" module
   setting - .et_pb_menu_0_tb_header ... .et_pb_menu__logo-wrap{width:15%} -
   and Divi leaves max-width:100% on the image. A capped width against a fixed
   height does not scale the mark, it compresses it horizontally. Wherever 15%
   of the row is narrower than the aspect-correct width, the logo distorts.
   Around 1000px that is a 9% horizontal squash; it is not clipping.

   So this must apply at EVERY width, not just mobile: releasing the wrap and
   removing the image's max-width lets the aspect ratio govern the width again.
   An earlier version of this fix sat inside @media (max-width:980px), which is
   why the broken band from roughly 981px to 1150px survived it.
   -------------------------------------------------------------------------- */
.gac-hdr .et_pb_menu__logo-wrap,
.gac-hdr .et_pb_menu__logo-slot,
.gac-hdr .et_pb_menu__logo{
  overflow:visible !important;
  width:auto !important; max-width:none !important; flex:0 0 auto;
}
.gac-hdr .et_pb_menu__logo img{
  width:auto !important; max-width:none !important;
  height:54px !important; max-height:54px !important;
}

/* --------------------------------------------------------------------------
   Mobile header logo — scale

   With the squashing fixed the mark measured 85x42 at 386px: geometrically
   correct but too small to read. It is a three-line lockup (GLOBAL ADHD /
   CONFERENCE / dates), so at 42px the wordmark is about 9px and the date line
   about 3px.

   62px was chosen by rendering 42, 50, 56, 62 and 68 side by side at a 390px
   viewport - the first size at which the date line resolves. Mark 125px wide,
   header 86px, roughly 200px clear before the burger. This departs from mock
   4a's 42px, which was drawn against a simpler placeholder lockup.
   -------------------------------------------------------------------------- */
@media (max-width:980px){
  .gac-hdr .et_pb_menu__logo img{
    height:62px !important; max-height:62px !important;
  }
  /* The menu sheet clones that same <img>, so it inherits the same trap. */
  .gac-menu-logo-slot{ overflow:visible; }
  .gac-menu-logo{
    height:62px !important; max-height:62px !important;
    width:auto !important; max-width:none !important; display:block;
  }
  .gac-menu-head{ min-height:86px; }
}

/* --------------------------------------------------------------------------
   Mobile menu sheet vs the WordPress admin bar

   #wpadminbar carries z-index 100001 - exactly the value the sheet uses. Equal
   z-index means paint order falls back to DOM order, and the admin bar is
   later in the document, so it won. Measured with the menu open at the top of
   the donate page:

       admin bar   top 0, height 46, z 100001
       sheet       z 100001
       menu head   top 0, height 86  ->  53% covered
       elementFromPoint(close button)  ->  the admin bar's bell icon

   So the close button was not merely hidden, it was unclickable. This only
   affects logged-in users; visitors have no admin bar.

   Raising the sheet above it is preferred over offsetting the sheet down by
   46px: below 600px WordPress switches the bar to position:absolute so it
   scrolls away, and a fixed 46px offset would then leave a strip of the page
   showing above the sheet. A full-screen modal covering the admin bar for as
   long as it is open is the ordinary behaviour.

   But raising the sheet alone does nothing, because it is not competing with
   the admin bar directly. Divi nests it inside three stacking contexts:

       .et_builder_inner_content    position:relative  z-index:2
         .et_pb_row--with-menu                         z-index:3
           .et_pb_column                               z-index:3
             .et_mobile_menu                           z-index:100100

   A z-index only orders an element among its siblings inside the nearest
   stacking context, so the sheet's 100100 never reaches the comparison. The
   value actually racing #wpadminbar is the outermost one - z-index 2 - and 2
   loses to 100001 every time.

   So the ancestor is what has to be lifted, and only while the sheet is open,
   which is what body.gac-menu-open marks. Everything below it, the sheet
   included, then paints above the admin bar.
   -------------------------------------------------------------------------- */
.gac-hdr .et_mobile_menu.gac-sheet-open{ z-index:100100 !important; }
body.gac-menu-open .et-l--header .et_builder_inner_content{ z-index:100100 !important; }

/* --------------------------------------------------------------------------
   Page-content gutter

   MOBILE-SPEC: "Side padding 20px everywhere". The Theme Builder header and
   footer already had a gutter; the page content never did. Measured on the
   homepage before this fix - content row left edge against header left edge:

       viewport   content   header
          390px       0        20     <- flush to the screen edge
          560px       0        20
          768px       0        20
          860px       0        24
          980px       0        24
         1100px       0        64
         1280px      57        64     <- fine, the 1152 max-width centres it

   So it was edge-to-edge at every width below about 1150, not only on mobile.
   The values below mirror what Divi already gives the header at each of its
   own breakpoints, so the two line up exactly rather than approximately.

   Body content is distinguished from header/footer by .et-l--post, which the
   Theme Builder wraps page content in - the header is .et-l--header.
   Nothing is applied above 1166px, where the row's 1152px max-width already
   provides the gutter and adding padding would narrow the content column.
   -------------------------------------------------------------------------- */
@media (max-width:1166px){
  .et-l--post .et_pb_row{ padding-left:64px !important; padding-right:64px !important; }
}
@media (max-width:980px){
  .et-l--post .et_pb_row{ padding-left:24px !important; padding-right:24px !important; }
}
@media (max-width:768px){
  .et-l--post .et_pb_row{ padding-left:20px !important; padding-right:20px !important; }
}

/* --------------------------------------------------------------------------
   Grid tracks that could not shrink

   A `1fr` track is `minmax(auto, 1fr)`, and that `auto` floor is the item's
   min-content width - so a card with a long unbreakable line refuses to go
   below it and pushes out of its container. The watch-back row did exactly
   that: at a 965px layout the four cards measured 995px, which is a horizontal
   scrollbar. Pre-existing, but the gutter above makes the container narrower
   still, so it is fixed here rather than left to bite later.

   minmax(0,1fr) removes the floor. The 4-up breakpoint also moves from 900px
   to 1000px, since four cards were already cramped well above 900.
   -------------------------------------------------------------------------- */
.gac-watch{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:1000px){ .gac-watch{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:768px){ .gac-watch{ grid-template-columns:minmax(0,1fr); } }

.gac-speakers{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:1100px){ .gac-speakers{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:560px){ .gac-speakers{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* --------------------------------------------------------------------------
   MOBILE-SPEC corrections (blocks 4a), measured at 390px against the live page

   Everything in the type scale already matched - H1 37/40/800, kicker 11px at
   0.16em, sub 15.5px, countdown 26px, stats 32px, line-up H2 27px. These are
   the values that did not.

       line-up tiles      spec 4 mystery + CTA bar   was 5 + CTA
       line-up gap        spec 10px                  was 12px
       watch card pad     spec 18px 20px             was 16px 18px
       donate radius      spec 18px                  was 20px
       donate padding     spec 28px 24px             was 26px 20px

   The fifth mystery tile is hidden rather than removed from the markup, so the
   desktop grid is untouched and the shortcode still renders one list. The
   :not(:last-child) guard means that if the grid ever holds exactly five items
   the CTA is not the thing that disappears.
   -------------------------------------------------------------------------- */
@media (max-width:768px){
  .gac-speakers{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .gac-speakers > :nth-child(5):not(:last-child){ display:none; }
  .gac-speakers > :last-child{ grid-column:1 / -1; }
  .gac-wcard{ padding:18px 20px; }
  .gac-donate{ border-radius:18px; padding:28px 24px; }
}

/* --------------------------------------------------------------------------
   Desktop / mobile text swap

   MOBILE-SPEC §2 shortens the hero kicker's date on mobile: desktop reads
   "1-2 OCTOBER 2026" with a hyphen, mobile "1–2 OCT 2026" with an en-dash.
   Two different strings, so it is a swap rather than a restyle.

   Both live in the Code module and one is hidden per breakpoint. display:none
   takes the hidden span out of the kicker's flex layout entirely, so it leaves
   no phantom gap and no doubled separator - which is why no wrapper element is
   needed. The amber separator before the date stays a normal child, since both
   breakpoints show all three.

   Reusable for any other desktop/mobile copy difference.
   -------------------------------------------------------------------------- */
.gac-swap-m{ display:none; }
@media (max-width:768px){
  .gac-swap-d{ display:none; }
  .gac-swap-m{ display:inline; }
}

/* --------------------------------------------------------------------------
   GROWTH BAND  —  [gac_growth]   (design block 6a)

   Values are the canvas inline literals from block 6a, which the spec names as
   authoritative over its own prose. The chart is plain divs: no library, no
   SVG, and the bar heights (30/56/61/73 on a 96px baseline) are the design's
   own, not recomputed from the numbers.

   The band is full-width on the page background and is NOT a card - only the
   right-hand stat panel is.
   -------------------------------------------------------------------------- */
.gac-growth{
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
  text-align:left;
}
.gac-growth-kicker{ justify-content:flex-start; }

.gac-growth-h2{
  margin:14px 0 0 !important;
  font-size:40px; line-height:1.1; font-weight:800;
  font-stretch:112%; letter-spacing:-.01em; color:var(--gac-ink);
}
.gac-growth-hl{ color:var(--gac-purple); }
/* "live" is picked out inside the purple stat phrase. The colour is the same
   green that marks live status elsewhere on this very card - the pulsing dot
   in the 2026 row - so the word and the indicator agree.

   That dot is #3BA55C, which measures only 3.05:1 on the #FDFCFB page: it
   scrapes WCAG's large-text minimum and fails everything else, which is fine
   for a 9px dot and not for a word. #25784A is the same hue darkened to
   5.30:1, so it passes at the 40px desktop heading, the 30px mobile one, and
   anywhere it might later be reused. */
.gac-growth-em{ color:#25784A; }
.gac-growth-p{
  margin:16px 0 0; font-size:16px; line-height:1.65;
  color:var(--gac-text); max-width:480px;
}

/* --- presenter invite --------------------------------------------------- */
.gac-growth-invite{
  margin-top:24px; max-width:480px;
  background:rgba(240,180,55,.13); border:1px solid rgba(224,160,40,.4);
  border-radius:16px; padding:20px 24px;
}
.gac-growth-invite-t{ font-size:15px; font-weight:800; color:var(--gac-ink); }
.gac-growth-invite-b{
  font-size:14px; line-height:1.6; color:var(--gac-name); margin-top:4px;
}
/* Padding rather than a bigger font gives the 44px target without changing
   how the link looks. */
.gac-growth-invite-a{
  display:inline-block; margin-top:10px; padding:11px 0;
  font-size:14px; font-weight:700; color:var(--gac-purple); text-decoration:none;
}
.gac-growth-invite-a:hover{ color:var(--gac-purple-dark); text-decoration:underline; }

/* --- stat card ---------------------------------------------------------- */
.gac-growth-card{
  background:#fff; border:1px solid var(--gac-bd-2); border-radius:20px;
  padding:32px 36px; box-shadow:0 1px 2px rgba(36,27,46,.04);
}
.gac-growth-hero{
  font-size:62px; font-weight:800; font-stretch:115%;
  letter-spacing:-.02em; line-height:1; color:var(--gac-ink);
}
.gac-growth-herocap{ font-size:13.5px; color:var(--gac-lav); margin-top:6px; }

.gac-growth-two{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  margin-top:18px; border-top:1px solid #F1EBF4; padding-top:18px;
}
.gac-growth-n{ font-size:28px; font-weight:800; color:var(--gac-ink); }
.gac-growth-lab{ font-size:12.5px; color:var(--gac-lav); margin-top:2px; }

/* --- bar chart ---------------------------------------------------------- */
.gac-growth-chartwrap{ margin-top:20px; }
.gac-growth-chartlab{
  font-size:11px; font-weight:600; letter-spacing:.14em; color:var(--gac-lav);
}
.gac-growth-chart{
  display:flex; align-items:flex-end; gap:10px; height:96px; margin-top:10px;
}
.gac-growth-col{
  flex:1; min-width:0;
  display:flex; flex-direction:column; justify-content:flex-end; height:100%;
}
/* line-height:1.2 is deliberate. Divi sets 1.7em globally, which inflated the
   value label to ~24px and left only 72px of the 96px chart for the bar - so
   the tallest bar (73px) was squeezed to 68 and the chart no longer matched
   the design's proportions. flex:none stops any future squeeze silently
   rescaling a bar rather than overflowing visibly. */
.gac-growth-val{
  font-size:12px; font-weight:700; line-height:1.2; color:var(--gac-lav);
  text-align:center; margin-bottom:4px;
}
.gac-growth-val--on{ color:var(--gac-purple); }
.gac-growth-bar{ border-radius:6px 6px 0 0; flex:none; }
.gac-growth-years{ display:flex; gap:10px; margin-top:6px; }
.gac-growth-yr{
  flex:1; min-width:0; text-align:center;
  font-size:11px; line-height:1.4; color:var(--gac-lav);
}
.gac-growth-yr--on{ font-weight:700; color:var(--gac-purple); }

/* --- the live 2026 row -------------------------------------------------- */
.gac-growth-live{
  display:flex; align-items:flex-start; gap:10px; margin-top:18px;
  background:#F7F3F9; border-radius:12px; padding:12px 16px;
}
.gac-growth-live .gac-pulse{ flex:none; margin-top:5px; }
.gac-growth-live-t{ font-size:13.5px; line-height:1.55; color:var(--gac-ink); }
.gac-growth-live-mid{ color:var(--gac-muted); }
.gac-growth-live-t a{ font-weight:700; color:var(--gac-purple); text-decoration:none; }
.gac-growth-live-t a:hover{ color:var(--gac-purple-dark); text-decoration:underline; }

/* --- responsive --------------------------------------------------------- */
@media (max-width:980px){
  .gac-growth{ grid-template-columns:1fr; gap:40px; align-items:stretch; }
  .gac-growth-p, .gac-growth-invite{ max-width:none; }
}
@media (max-width:768px){
  .gac-growth-h2{ font-size:30px; }
  .gac-growth-hero{ font-size:48px; }
  .gac-growth-card{ padding:24px 20px; }
  /* The chart is width-fluid - bars flex, heights stay fixed - so it needs no
     mobile treatment beyond the card's narrower padding. */
}

/* --------------------------------------------------------------------------
   "Run by" charity links (hero)

   The five charity names became links to each organisation's own site, opening
   in a new tab. The brief was that they keep looking exactly as they do now,
   so the resting state inherits everything from the <strong> around it - no
   colour change, no underline, no visited state.

   A hover cue is still worth having: without one there is nothing to tell a
   mouse user these are clickable, and the underline only appears on hover so
   the resting line is untouched. Keyboard focus gets a visible ring, since
   removing the outline and giving nothing back would make the row impossible
   to tab through sighted.
   -------------------------------------------------------------------------- */
.gac-credit a{
  color:inherit; text-decoration:none;
}
.gac-credit a:visited{ color:inherit; }
.gac-credit a:hover{ color:var(--gac-purple); text-decoration:underline; }
.gac-credit a:focus-visible{
  outline:2px solid var(--gac-purple); outline-offset:3px; border-radius:3px;
}

/* --------------------------------------------------------------------------
   Charity ribbon — logo and name as one link

   Both ribbons (About page and homepage) now link each charity to its own
   site in a new tab. The whole tile is the target - logo AND name in a single
   <a> - so there is one obvious hit area rather than two adjacent ones, and
   the tile easily clears 44px.

   Same rule as the hero: the resting state must be indistinguishable from
   before, so colour and decoration are inherited. The hover lifts the tile
   very slightly and tints the name, which is enough of a cue without turning
   a quiet credit row into a set of buttons.
   -------------------------------------------------------------------------- */
.gac-ribbon-link{
  display:flex; flex-direction:column; align-items:center; gap:inherit;
  color:inherit; text-decoration:none;
  transition:transform .15s ease;
}
.gac-ribbon-link:visited{ color:inherit; }
.gac-ribbon-link:hover{ transform:translateY(-2px); }
.gac-ribbon-link:hover .gac-ribbon-name{ color:var(--gac-purple); }
.gac-ribbon-link:focus-visible{
  outline:2px solid var(--gac-purple); outline-offset:4px; border-radius:8px;
}
@media (prefers-reduced-motion:reduce){
  .gac-ribbon-link{ transition:none; }
  .gac-ribbon-link:hover{ transform:none; }
}