/* ==========================================================================
   Sporometrics refined home — page shell + home layout.
   Ported from the approved _home.html prototype. Depends on:
     css/fonts.min.css, css/tokens.css, css/components.css
   Loaded only on the front page (see meta.php).
   ========================================================================== */

/* ===== Page shell ===== */
*{ box-sizing:border-box }
body{ margin:0; color:var(--text-body);
  background:linear-gradient(to bottom,
    #ffffff 0%, #ffffff 39%, #e5e5e5 55.5%, #e1e1e1 69%, #e5e5e5 82.5%, #ffffff 99%, #ffffff 100%) fixed;
  font-family:var(--font-body); font-size:var(--fs-base); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased; }
/* Grainy texture over the gradient (SVG feTurbulence #grain filter, defined in markup) */
body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  filter:url(#grain); opacity:.78 }
/* Soft white highlight at the top-centre */
body::after{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 1100px 260px at 50% 0%,
    rgba(255,255,255,1) 0%, rgba(255,255,255,1) 45%, rgba(255,255,255,0) 100%) }
a{ color:var(--link); text-decoration:none } a:hover{ color:var(--link-hover) }
img{ max-width:100%; height:auto; display:block }
.canvas{ max-width:1080px; margin:0 auto; padding:20px 20px 0 }
.section{ margin-bottom:var(--sp-6) }

/* Masthead */
.masthead{ display:flex; justify-content:space-between; align-items:flex-end; padding:8px 4px 16px; gap:16px }
.masthead .logo img{ height:56px }
.masthead .tagline img{ height:62px }

/* Header nav row */
/* Nav bar rule (ALL views, and intended for every page): the bar is centred,
   90% of the width of the billboard element below it, and floats down so it
   overlaps ~half its own height into that billboard. The overlap is created by
   pulling the billboard row up under the (z-raised) nav row; -22px ≈ half the
   ~45px bar height (the mobile hamburger overrides this with its own half). */
.navrow{ position:relative; z-index:30 }
.navrow.section{ margin-bottom:0 }
.spo-nav{ width:90%; margin-left:auto; margin-right:auto; min-height:45px }  /* same bar height in all views */
.hamburger, .drawer, .scrim{ display:none }
#navtoggle{ display:none }

/* Nav search form. On desktop it's a text field; on smaller views (below the
   joined-layout breakpoint) it collapses to a magnifying-glass icon so the nav
   links fit, expanding back to a field on focus. */
.spo-search form{ display:flex; align-items:center; margin:0 }
.spo-search input[type=search],
.spo-search input[type=text]{ background:transparent; border:0; outline:0; color:#fff;
  font:var(--fw-regular) var(--fs-sm) var(--font-body); width:158px; transition:width var(--mo-hover) }
.spo-search .search-submit{ position:absolute; left:-9999px }
.spo-search .search-ico{ display:none }
@media (max-width:1023px){
  .spo-search input[type=search],
  .spo-search input[type=text]{ width:0; padding:0 }
  .spo-search:focus-within input[type=search],
  .spo-search:focus-within input[type=text]{ width:144px; margin-right:6px }
  .spo-search{ padding-top:var(--sp-1); padding-bottom:var(--sp-1) }  /* keep the bar 45px tall */
  .spo-search .search-ico{ order:2; display:flex; align-items:center; justify-content:center;
    width:24px; height:24px; color:#fff; cursor:pointer }
  .spo-search .search-ico svg{ width:18px; height:18px; display:block }
  /* Collapsed views: silver-tab chevron moves to the RIGHT of the text. It lives
     inside .tab-label so it follows the last word (even when the title wraps),
     un-flipped so it points right ">". */
  .spo-tab::before{ display:none }
  .spo-tab .tab-label::after{ content:"\203A"; margin-left:.32em;   /* double the separation */
    font:var(--fw-medium) 1.55em/0 var(--font-display); color:var(--chevron);
    -webkit-text-stroke:3px #fff; paint-order:stroke fill; vertical-align:0 }   /* centred on the text */
  .spo-tab:hover .tab-label::after,
  .spo-tab.is-current .tab-label::after{ color:var(--chevron-hover) }
}

/* Billboard row: banner + news rail. Pulled up under the nav bar (all views). */
.billboard-row{ display:grid; grid-template-columns:2fr 1fr; gap:var(--sp-5);
  position:relative; z-index:1; margin-top:-22px }
/* Billboard = frozen box. The hero image occupies the right 2/3 of the box, on top
   of the orange gradient but beneath the copy, and fills the panel top-to-bottom
   (object-fit:cover, bottom-weighted) so it is flush with BOTH the top and bottom
   edges of the orange panel in every view. Padding lives on .banner-text so the
   copy keeps its inset while the hero bleeds to the box edges. */
.banner-feature{ position:relative; min-height:280px; overflow:hidden; padding:34px 0 0 }  /* grid-stretch keeps it equal to the silver panel; top padding all views */
.banner-feature .banner-text{ position:relative; z-index:2; max-width:62%; padding:0 var(--sp-8) var(--sp-6) }
.banner-feature .fig{ position:absolute; inset:0; z-index:1; margin:0; overflow:hidden }  /* full-width so the hero may flow behind ALL the copy (text sits above at z-index 2) */
/* Size the hero by HEIGHT in ALL views: the full image fills the panel top-to-bottom
   at its native ratio — top flush with the nav bar's lower edge, bottom with the
   white content panel's top edge — anchored bottom-right, horizontal excess clipped
   behind the copy. (object-fit:cover was cropping these transparent-background cutouts
   and leaving orange gaps at top/bottom, most visibly on the wide desktop panel.) */
.banner-feature .fig img{ position:absolute; right:0; bottom:0; height:100%; width:auto; max-width:none; display:block }
/* Rotating billboard: slides stacked in one grid cell (so the box height stays
   fixed at the tallest slide) and crossfaded between; the figure/text fade with
   each slide. Driven by the rotator script in front-page.php. */
.banner-feature .bb-slides{ display:grid }
.banner-feature .bb-slide{ grid-area:1 / 1; min-width:0;
  opacity:0; visibility:hidden; transition:opacity .55s ease, visibility 0s linear .55s }
.banner-feature .bb-slide.is-active{ opacity:1; visibility:visible; transition:opacity .55s ease }
.banner-feature .bb-slide .banner-text{ transform:translateY(8px); transition:transform .55s ease }
.banner-feature .bb-slide.is-active .banner-text{ transform:none }
@media (prefers-reduced-motion: reduce){
  .banner-feature .bb-slide, .banner-feature .bb-slide .banner-text{ transition:none }
  .banner-feature .bb-slide .banner-text{ transform:none }
}
.banner-feature h2{ font:var(--fw-regular) var(--fs-2xl) var(--font-display); margin:0 0 8px; color:#fff }
.banner-feature p{ margin:0 0 14px }
/* Orange stroke around the copy so it stays legible where the full-width hero
   encroaches behind it. The stroke matches the panel orange, so it is invisible
   over the plain-orange areas and only reads as separation over the image.
   paint-order:stroke keeps the stroke behind the fill (no loss of letter weight). */
.banner-feature h2, .banner-feature p{ paint-order:stroke fill;
  -webkit-text-stroke:2px var(--orange-base); text-stroke:2px var(--orange-base); }
.banner-feature h2{ -webkit-text-stroke-width:3px; text-stroke-width:3px }
.newslist .head{ font:var(--fw-regular) var(--fs-xl) var(--font-display); color:var(--heading-orange);
  letter-spacing:-.01em; margin:0 0 var(--sp-3) 4px }

/* --- Desktop: join the billboard + silver panels into one monolithic block,
   square off their touching (inner) corners, and float the 25%-narrower nav bar
   centred over their shared top edge (overlapping half the nav's height). ---- */
@media (min-width:1024px){
  .billboard-row{ gap:0; align-items:stretch; margin-bottom:0 }
  .banner-feature{ border-radius:var(--r-banner) 0 0 var(--r-banner) }
  /* Desktop only: anchor the hero's TOP to the bottom of the nav bar (which
     overlaps the panel by 22px) so it no longer sits behind the nav; its bottom
     rises 22px to meet the top edge of the floated White Content panel. */
  .banner-feature .fig{ top:22px; bottom:22px }
  .newslist{ display:flex; flex-direction:column }
  .newslist .spo-tablist{ flex:1; border-radius:0 var(--r-tab) var(--r-tab) 0;
    display:flex; flex-direction:column; justify-content:center; padding:26px 0 }
  /* Each row carries an equal 10px top AND bottom padding (interstitial) so the
     gap above and below every middle row's text is the same 10px (no flex gap,
     which used to sit only below each row). The group is centred; the outside
     gaps absorb the remaining height so the panel stays equal to the billboard. */
  .newslist .spo-tablist .spo-tab{ padding-top:20px; padding-bottom:20px; min-height:0 }
  .newslist .spo-tablist .spo-tab::before{ line-height:0 }   /* don't let the chevron inflate the row so 10px pad governs */
  /* White Content panel: 90% of the billboard/silver panel width, centred, top
     floated onto that panel by the same 22px the nav overlaps at the top. */
  .content-panel{ width:90%; margin-left:auto; margin-right:auto; margin-top:-22px;
    position:relative; z-index:2 }
}

/* 3-column services card */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-10) }
/* Column heading: brand icon to the left of the two-tone label */
.col-head{ display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-2) }
/* Card heading is a link to its section — keep the two-tone type, add a hover cue. */
a.col-head{ text-decoration:none; }
a.col-head .word2{ transition:color var(--mo-hover); }
a.col-head:hover .word2{ color:var(--heading-orange); }
.col-icon{ height:46px; width:auto; flex:none }
.col .ico{ width:54px; height:54px; margin-bottom:var(--sp-3) }
.col .lead{ margin:var(--sp-2) 0 var(--sp-4); color:var(--text-body); font-size:15px; line-height:1.55 }
/* Laboratory Testing list — and Quick Links reuses the exact same style at a
   slightly smaller size. Inline (not flex) so a spilled line gets a hanging
   indent and the chevron follows the last word (never right-justified). */
.testlist,
.quicklinks ul{ list-style:none; margin:var(--sp-2) 0 0; padding:0 }
.testlist li,
.quicklinks li{ padding:0 }
.testlist li a,
.quicklinks li a{ display:block; padding:.32em 0 .32em 1.15em; text-indent:-1.15em; line-height:1.25;
  font:var(--fw-bold) var(--fs-sm) var(--font-body); text-transform:uppercase;
  letter-spacing:.015em; color:var(--n-600) }                 /* .32em vertical padding scales with
                                                                  the font -> Quick Links row spacing
                                                                  matches the testlist proportionally */
.quicklinks li a{ font-size:var(--fs-xs) }
.testlist li a:hover,
.quicklinks li a:hover{ color:var(--link) }   /* text -> orange on rollover */
.testlist .spo-chevron{ display:none }
/* Grey chevron that follows the text inline; line-height:0 keeps it from
   expanding the row, vertical-align seats it on the text. */
.testlist li a::after,
.quicklinks li a::after{ content:"\203A"; margin-left:.06em; color:var(--n-600);
  font-family:var(--font-display); font-weight:var(--fw-medium); font-size:1.7em;
  line-height:0; vertical-align:-.06em }   /* seated on the text's vertical centre */
.quicklinks li a::after{ font-size:1.5em }
/* Rollover: orange, thickened via text-stroke (keeps Medium metrics -> no vertical shift) */
.testlist li a:hover::after,
.quicklinks li a:hover::after{ color:var(--link); -webkit-text-stroke:.04em var(--link) }

/* Utility row */
.util-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5) }
.util h3{ font:var(--fw-bold) var(--fs-lg) var(--font-display); color:var(--heading-orange); margin:0 0 var(--sp-3) }
.util ul{ list-style:none; margin:0; padding:0 }
/* News tab whose item is currently shown in the billboard: chevron pre-rolled-over
   (orange; the white stroke is already on .spo-tab::before) */
.spo-tab.is-current::before{ color:var(--chevron-hover) }
.hours b{ color:var(--n-600) } .hours p{ margin:0 0 var(--sp-2) }
/* "After hours drop box" link — match the "Sample Reception" heading size */
.hours .h2link{ margin:var(--sp-2) 0 0; font:var(--fw-bold) var(--fs-lg) var(--font-display); line-height:1.2 }
.hours .h2link a{ color:var(--heading-orange) }
.hours .h2link a:hover{ color:var(--link-hover) }
.follow{ display:flex; gap:var(--sp-2) }

/* Footer */
.footer{ background:var(--n-600); color:#dcdcdc; margin-top:var(--sp-8); border-radius:var(--r-card) var(--r-card) 0 0 }
.footer .inner{ max-width:1080px; margin:0 auto; padding:var(--sp-6) 24px;
  display:grid; grid-template-columns:2.4fr 1.1fr 1fr; gap:var(--sp-6); align-items:start }
.footer a{ color:#eee } .footer a:hover{ color:var(--link) }
.footer .fnav{ display:flex; flex-wrap:wrap; gap:10px 18px; font:var(--fw-bold) var(--fs-xs) var(--font-body);
  text-transform:uppercase; letter-spacing:var(--tr-label); margin-bottom:var(--sp-4) }
.footer .fnav ul{ list-style:none; margin:0; padding:0; display:contents }
.footer .addr{ font-size:var(--fs-sm); line-height:1.7 }
.footer .badges{ display:flex; gap:var(--sp-2); margin-bottom:var(--sp-3); flex-wrap:wrap }
/* Badge rollover: darken the disc, keep the glyph white (don't let the footer
   link-hover recolour the white icon into the orange fill). */
.footer .spo-badge{ transition:background var(--mo-hover) }
.footer .spo-badge:hover{ background:var(--link-hover); color:#fff }
.footer .foot-legal{ text-align:right }

/* Accreditation seals — now shown in the white "Accreditations" utility card */
.seals{ display:flex; gap:var(--sp-4); align-items:center; flex-wrap:wrap }
.seals img{ height:auto; width:auto; max-height:64px; max-width:100% }  /* keep aspect (no squash); +15% */
.accreditations .seals{ margin-top:var(--sp-2); display:grid; grid-template-columns:repeat(3,1fr);
  gap:var(--sp-3) var(--sp-2); justify-items:center; align-items:center }  /* equal columns -> even spacing */

/* ===== Responsive ===== */
@media (max-width:1023px){
  .billboard-row{ grid-template-columns:1fr }
  .grid-3{ grid-template-columns:1fr 1fr; gap:var(--sp-6) }
  .util-row{ grid-template-columns:1fr 1fr }
  .footer .inner{ grid-template-columns:1fr 1fr }
  .footer .foot-legal{ text-align:left }
}
@media (max-width:639px){
  .canvas{ padding:14px 12px 0 }
  .masthead{ flex-direction:column; align-items:center; gap:6px; text-align:center }
  .masthead .tagline img{ height:51px }   /* +50% */
  /* Keep the same (tablet) nav bar on mobile — no hamburger. Tighten it so the
     links + search icon fit the narrow 90% bar; the hamburger/drawer stay hidden
     (base rule). Nav overlap uses the base -22px (nav bar is ~45px). */
  .spo-nav{ gap:7px; padding:6px var(--sp-1) }
  .spo-nav a{ letter-spacing:0; font-size:15px }   /* slightly smaller than 16px to give the links breathing room */
  #navtoggle{ display:none }
  .grid-3, .util-row, .footer .inner{ grid-template-columns:1fr }
  /* Mobile: unfreeze height so long copy is never clipped; hero flows below the
     text, still right-aligned. Keep the billboard short — clamp the excerpt and
     shrink the hero. */
  .banner-feature{ min-height:400px; height:auto }
  /* Text occupies the left two-thirds; the hero shows through on the right. */
  .banner-feature .banner-text{ max-width:66.667% }
  .banner-feature p{ display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden }
  /* Hero: inherit the base 2/3-width figure + the below-desktop height-fit rule
     (sized to the panel's vertical dimension, anchored bottom-right, sitting under
     the copy: fig z-index 1, banner-text z-index 2). */
  .spo-card, .util { border-radius:var(--r-banner) }
}