/* ==========================================================================
   Sporometrics refined theme — SHARED PAGE SHELL.
   The frame common to every refined page: background + grain, .canvas, masthead,
   the glossy nav pill (incl. the <=1023px search-collapse), and the footer.
   Extracted from css/home.css & css/interior.css (previously hand-synced).
   Load order (meta.php): fonts -> tokens -> components -> SHELL -> home|interior.
   ========================================================================== */

/* ===== 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. */
.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 */

/* 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) }
}

/* 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 }