/*
Theme Name: The Buzz
Theme URI: https://walkridegm.org.uk/
Author: Walk Ride Greater Manchester
Author URI: https://walkridegm.org.uk/
Description: Theme for The Buzz - the school walking and cycling bus programme running across Manchester and Trafford. Includes a "The Buzz Landing" page template carrying the full branded landing page, plus plain templates for ordinary pages and posts.
Version: 1.1
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: the-buzz
Tags: one-column, custom-colors, wide-blocks, editor-style
*/

/* ==========================================================================
   1. SITE CHROME  (header, footer, ordinary pages and posts)
   ========================================================================== */

:root{
  --buzz-black:#000000;
  --buzz-yellow:#fff310;
  --buzz-blue:#4189eb;
  --buzz-red:#fd4d38;
  --buzz-paper:#f4f1e6;
  --buzz-wm:'Archivo Black','Arial Black',Impact,Helvetica,sans-serif;
  --buzz-slab:'Aptos Slab','Roboto Slab',Georgia,serif;
}

body{margin:0;font-family:var(--buzz-slab);color:#111;background:#fff;line-height:1.6;}
.site-header{background:var(--buzz-header-bg,var(--buzz-red));border-bottom:5px solid #000;}
.site-header .bar{max-width:1180px;margin:0 auto;padding:16px 24px;display:flex;
  align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.site-header .brand img{height:42px;width:auto;display:block;}
.site-header .brand .site-title{font-family:var(--buzz-wm);font-size:22px;text-decoration:none;color:#000;}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:22px;flex-wrap:wrap;}
.site-nav a{font-family:var(--buzz-slab);font-weight:700;text-transform:uppercase;
  font-size:14px;letter-spacing:.02em;color:#000;text-decoration:none;}
.site-nav a:hover,.site-nav a:focus{text-decoration:underline;}

.site-main-inner{max-width:820px;margin:0 auto;padding:56px 24px 72px;}
.site-main-inner h1,.site-main-inner h2,.site-main-inner h3{font-family:var(--buzz-slab);font-weight:900;line-height:1.15;}
.site-main-inner a{color:#1a5fc0;}

.site-footer{background:#000;color:#fff;padding:38px 0;}
.site-footer .bar{max-width:1180px;margin:0 auto;padding:0 24px;display:flex;
  align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;}
.site-footer img{height:36px;width:auto;display:block;}
.site-footer p{margin:0;font-size:14px;color:#bbb;}

/* visible keyboard focus everywhere */
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:3px solid var(--buzz-blue);outline-offset:2px;}
.skip-link{position:absolute;left:-9999px;}
.skip-link:focus{left:8px;top:8px;z-index:999;background:#000;color:#fff;padding:10px 16px;}

/* ==========================================================================
   2. THE BUZZ LANDING PAGE
   Everything below is scoped to .buzz-page so it cannot leak into
   ordinary pages and posts.
   ========================================================================== */

/* Google Fonts are enqueued properly in functions.php, not @imported here. */

.buzz-page{
  --black:#000000;
  --yellow:#fff310;
  --blue:#4189eb;
  --red:#fd4d38;
  --paper:#f4f1e6;
  --rule:4px;
  --wm:'Archivo Black','Arial Black',Impact,Helvetica,sans-serif;
  --slab:'Aptos Slab','Roboto Slab',Georgia,serif;
  font-family:var(--slab);
  color:var(--black);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.buzz-page *,.buzz-page *::before,.buzz-page *::after{box-sizing:border-box;margin:0;padding:0;}
.buzz-page img{display:block;max-width:100%;}
.buzz-page a{color:inherit;text-decoration:none;}
.buzz-page .wrap{max-width:1180px;margin:0 auto;padding:0 24px;}

/* ---------- HERO ---------- */
.buzz-page .hero{background:var(--yellow);padding:56px 0 0;}
.buzz-page .hero .logo-buzz{max-width:min(620px,88%);margin:0 auto 6px;}
.buzz-page .hero .lead{max-width:720px;margin:26px auto 0;font-family:var(--slab);font-weight:400;
  font-size:clamp(19px,2.4vw,25px);line-height:1.55;color:#111;}
.buzz-page .hero .lead strong{font-weight:700;}
.buzz-page .hero .easy{max-width:720px;margin:34px auto 0;font-family:var(--slab);font-weight:900;
  text-transform:uppercase;color:var(--blue);-webkit-text-stroke:2.5px #000;paint-order:stroke fill;
  line-height:1.05;font-size:clamp(30px,5.6vw,54px);}

/* ---------- BANDS (marquee + photo strips) ----------
   Stacked bands would otherwise show their own top AND bottom border where
   they meet, drawing a rule twice as thick as everywhere else. Each band
   carries a top rule only; the last band in a stack adds .end for its
   bottom rule, so every rule on the page is the same weight. */
.buzz-page .band{border-top:var(--rule) solid #000;}
.buzz-page .band.end{border-bottom:var(--rule) solid #000;}

/* ---------- MARQUEE ----------
   Z glyphs are sized to the z-height inside the wordmark (79.1% of the
   wordmark's full height) and sit on the same baseline, so the
   bikebuzzzzzz / walkbuzzzzzz strip reads as one continuous word. */
.buzz-page .marquee{--wm-h:82px;background:var(--red);overflow:hidden;}
.buzz-page .marquee.alt{background:var(--blue);}
/* the blue/yellow strip runs the opposite way to the red one, a little faster */
.buzz-page .marquee.alt .track{animation-name:buzz-scroll-rev;animation-duration:24s;}
.buzz-page .hero .photoband{margin-top:40px;}
.buzz-page .marquee .track{display:flex;align-items:flex-end;width:max-content;
  animation:buzz-scroll 30s linear infinite;padding:14px 0;}
.buzz-page .marquee .seg{display:flex;align-items:flex-end;flex-shrink:0;}
.buzz-page .marquee .wm{height:var(--wm-h) !important;width:auto !important;
  max-width:none !important;display:block;}
.buzz-page .marquee .zs{height:calc(var(--wm-h) * 0.791) !important;width:auto !important;
  max-width:none !important;display:block;margin-bottom:calc(var(--wm-h) * 0.012);}
@keyframes buzz-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------- PHOTO BANNER (scrolling) ---------- */
.buzz-page .photoband{--band-h:400px;background:#000;overflow:hidden;}
.buzz-page .photoband .track{display:flex;width:max-content;
  animation:buzz-scroll 90s linear infinite;}
.buzz-page .photoband.reverse .track{animation-name:buzz-scroll-rev;}
.buzz-page .photoband .seg{display:flex;flex-shrink:0;}
.buzz-page .photoband .pi{height:var(--band-h) !important;background-size:cover;
  background-position:center;border-right:3px solid #000;flex-shrink:0;}
@keyframes buzz-scroll-rev{from{transform:translateX(-50%);}to{transform:translateX(0);}}

/* per-image background classes (each photo's data is defined once here and
   reused by both banners, so the page carries it a single time) */
.buzz-page .photoband .p00{aspect-ratio:0.6671;background-image:url(assets/img/banner/b00.jpg);}
.buzz-page .photoband .p01{aspect-ratio:0.6671;background-image:url(assets/img/banner/b01.jpg);}
.buzz-page .photoband .p02{aspect-ratio:0.6671;background-image:url(assets/img/banner/b02.jpg);}
.buzz-page .photoband .p03{aspect-ratio:0.6671;background-image:url(assets/img/banner/b03.jpg);}
.buzz-page .photoband .p04{aspect-ratio:1.5000;background-image:url(assets/img/banner/b04.jpg);}
.buzz-page .photoband .p05{aspect-ratio:0.6671;background-image:url(assets/img/banner/b05.jpg);}
.buzz-page .photoband .p06{aspect-ratio:0.6671;background-image:url(assets/img/banner/b06.jpg);}
.buzz-page .photoband .p07{aspect-ratio:0.6671;background-image:url(assets/img/banner/b07.jpg);}
.buzz-page .photoband .p08{aspect-ratio:0.6671;background-image:url(assets/img/banner/b08.jpg);}
.buzz-page .photoband .p09{aspect-ratio:1.5000;background-image:url(assets/img/banner/b09.jpg);}
.buzz-page .photoband .p10{aspect-ratio:0.6671;background-image:url(assets/img/banner/b10.jpg);}
.buzz-page .photoband .p11{aspect-ratio:1.5000;background-image:url(assets/img/banner/b11.jpg);}
.buzz-page .photoband .p12{aspect-ratio:1.5000;background-image:url(assets/img/banner/b12.jpg);}
.buzz-page .photoband .p13{aspect-ratio:1.5000;background-image:url(assets/img/banner/b13.jpg);}
.buzz-page .photoband .p14{aspect-ratio:0.6671;background-image:url(assets/img/banner/b14.jpg);}
.buzz-page .photoband .p15{aspect-ratio:1.5000;background-image:url(assets/img/banner/b15.jpg);}
.buzz-page .photoband .p16{aspect-ratio:1.5000;background-image:url(assets/img/banner/b16.jpg);}
.buzz-page .photoband .p17{aspect-ratio:0.6671;background-image:url(assets/img/banner/b17.jpg);}

/* ---------- PRODUCT SECTIONS (bike / walk) ---------- */
.buzz-page .product{padding:64px 0;}
.buzz-page .product.bike{background:var(--blue);}
.buzz-page .product.walk{background:var(--red);}
.buzz-page .product .inner{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
.buzz-page .product.walk .inner{direction:rtl;}
.buzz-page .product.walk .inner > *{direction:ltr;}
.buzz-page .product .logo{max-width:340px;width:80% !important;height:auto !important;
  margin-bottom:22px;}
.buzz-page .product p{font-family:var(--slab);font-weight:500;font-size:clamp(18px,2vw,22px);
  line-height:1.55;color:#fff;max-width:480px;}
.buzz-page .product .when{display:block;margin-top:20px;font-family:var(--slab);font-weight:900;
  text-transform:uppercase;line-height:1.05;font-size:clamp(20px,2.9vw,32px);
  -webkit-text-stroke:2px #000;paint-order:stroke fill;}
.buzz-page .product.bike .when{color:var(--red);}
.buzz-page .product.walk .when{color:var(--blue);}
.buzz-page .product .photo img{width:100%;border-radius:14px;border:5px solid #000;display:block;}
/* Section sign-up buttons, each set against its panel:
   blue panel -> yellow button, red panel -> blue button. */
.buzz-page .product .signup{display:inline-block;margin-top:22px;font-family:var(--slab);
  font-weight:900;text-transform:uppercase;letter-spacing:.01em;font-size:15px;
  padding:13px 26px;border-radius:8px;border:4px solid #000;text-decoration:none;
  box-shadow:5px 5px 0 #000;transition:transform .12s,box-shadow .12s;}
.buzz-page .product .signup:hover,.buzz-page .product .signup:focus{
  transform:translate(2px,2px);box-shadow:3px 3px 0 #000;}
.buzz-page .product.bike .signup{background:var(--yellow);color:#000;}
.buzz-page .product.walk .signup{background:var(--blue);color:#fff;}

/* ---------- WHY IT MATTERS ---------- */
.buzz-page .why{background:var(--paper);padding:70px 0;}
.buzz-page .why .headline{font-family:var(--slab);font-weight:900;text-transform:uppercase;
  color:var(--blue);-webkit-text-stroke:2px #000;paint-order:stroke fill;line-height:1.05;
  font-size:clamp(28px,4.8vw,46px);max-width:820px;margin-bottom:34px;}
.buzz-page .why .cols{display:grid;grid-template-columns:1.1fr 0.9fr;gap:44px;align-items:start;}
.buzz-page .why .text p{font-family:var(--slab);font-weight:400;font-size:17px;line-height:1.65;
  color:#222;}
.buzz-page .why .text p + p{margin-top:18px;}
.buzz-page .why .text p.lede{font-weight:700;font-size:19px;}
.buzz-page .why .image img{width:100%;border-radius:14px;border:5px solid #000;}
.buzz-page .why .changes{font-family:var(--slab);font-weight:900;text-transform:uppercase;
  color:var(--red);-webkit-text-stroke:2px #000;paint-order:stroke fill;line-height:1.05;
  font-size:clamp(24px,3.4vw,36px);margin:26px 0 22px;}

/* ---------- PARTNER / FUNDER LOGO BAND ---------- */
.buzz-page .partners{background:#fff;padding:52px 0 56px;border-top:5px solid #000;}
.buzz-page .partners .row{display:flex;align-items:flex-start;gap:22px;flex-wrap:wrap;}
.buzz-page .partners .row + .row{margin-top:34px;}
.buzz-page .partners .group{display:flex;flex-direction:column;gap:12px;}
.buzz-page .partners .label{font-family:var(--slab);font-weight:700;font-size:14px;
  color:#111;letter-spacing:.01em;white-space:nowrap;}
.buzz-page .partners .marks{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.buzz-page .partners .marks > span{display:inline-flex;align-items:center;}
/* Heights are marked !important because many WordPress themes and plugins
   ship a blanket `img { height: auto }` rule that would otherwise let these
   logos render at full natural size. */
.buzz-page .partners img{width:auto !important;max-width:none !important;display:block;}
/* wide wordmark lockups share one cap height */
.buzz-page .partners .mark-wide img{height:38px !important;}
/* circular marks need more height to read at the same optical weight */
.buzz-page .partners .mark-round img{height:65px !important;}
/* the stacked ATE crest sits between the two */
.buzz-page .partners .mark-tall img{height:61px !important;}
.buzz-page .partners .divider{align-self:stretch;width:3px;background:#000;flex-shrink:0;}
/* ---------- INSTAGRAM FEED BAND ----------
   Same height and rule weight as the photo bands. .ig-inner is what a feed
   plugin renders into; .ig-fallback is the branded follow bar shown when no
   feed plugin is connected. */
/* ---------- INSTAGRAM FEED BAND ----------
   The band does NOT clip the widget to a fixed height. Behold's grid is
   responsive, so its natural height changes with viewport width - pinning it
   to a fixed height meant it was cropped when the grid grew (zoomed out) and
   left a black gap when it shrank (zoomed in). Letting the band take the
   widget's own height keeps it correct at any zoom level.
   Set the widget to a single row in the Behold dashboard so that height stays
   in the same ballpark as the photo bands. */
.buzz-page .igband{--band-h:400px;background:#000;}
.buzz-page .igband .ig-inner{height:auto;}
.buzz-page .igband .ig-inner > *{max-width:100%;}
/* Behold renders its own grid; give it the full width and its own height. */
.buzz-page .igband behold-widget,
.buzz-page .igband .behold-mount{display:block;width:100%;height:auto;}

/* Post shape. Behold's authoritative aspect-ratio control is in its own
   dashboard (Customize > post aspect ratio) - set it to 3:4 there. These
   rules are a belt-and-braces nudge for the cases where the widget renders
   into the light DOM; they are inert if it uses a shadow root. */
.buzz-page .igband{--ig-ratio:3 / 4;}
.buzz-page .igband .behold-mount img,
.buzz-page .igband behold-widget img{aspect-ratio:var(--ig-ratio);object-fit:cover;}
.buzz-page .igband .behold-mount [class*="post"],
.buzz-page .igband behold-widget::part(post){aspect-ratio:var(--ig-ratio);}

/* Once the widget paints, hide the follow-bar fallback. If the script is
   blocked, the bar stays visible. */
.buzz-page .igband behold-widget:not(:defined){display:none;}
.buzz-page .igband .ig-inner:has(behold-widget:defined) .ig-fallback,
.buzz-page .igband .ig-inner:has(.behold-mount *) .ig-fallback{display:none;}
.buzz-page .igband .ig-fallback{display:flex;min-height:var(--band-h);align-items:center;
  justify-content:center;gap:22px;flex-wrap:wrap;text-align:center;
  text-decoration:none;background:#000;padding:20px;}
.buzz-page .igband .ig-handle{font-family:var(--slab);font-weight:900;
  color:var(--yellow);-webkit-text-stroke:2px #000;paint-order:stroke fill;
  font-size:clamp(26px,4vw,44px);line-height:1.1;}
.buzz-page .igband .ig-cta{font-family:var(--slab);font-weight:700;color:#fff;
  font-size:clamp(14px,1.6vw,18px);letter-spacing:.02em;}
.buzz-page .igband a:hover .ig-cta,.buzz-page .igband a:focus .ig-cta{color:var(--yellow);}

.buzz-page .cta{background:var(--yellow);padding:70px 0;text-align:center;}
.buzz-page .cta .easy{font-family:var(--slab);font-weight:900;text-transform:uppercase;
  color:var(--red);-webkit-text-stroke:2.5px #000;paint-order:stroke fill;line-height:1.05;
  font-size:clamp(30px,5.6vw,52px);margin-bottom:22px;}
.buzz-page .cta p{font-family:var(--slab);font-size:19px;margin-bottom:26px;}
.buzz-page .cta .btn{display:inline-block;font-family:var(--slab);font-weight:900;text-transform:uppercase;
  letter-spacing:.02em;background:var(--blue);color:#fff;padding:16px 36px;border-radius:8px;
  border:4px solid #000;font-size:17px;box-shadow:5px 5px 0 #000;transition:transform .12s;}
.buzz-page .cta .btn:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 #000;}

/* ---------- TEAM ---------- */
.buzz-page .team{background:var(--paper);padding:70px 0 80px;}
.buzz-page .team .head-row{display:flex;align-items:center;gap:18px;margin-bottom:36px;flex-wrap:wrap;}
.buzz-page .team .head-row img{height:46px !important;width:auto !important;
  max-width:none !important;display:block;position:relative;top:-2px;}
.buzz-page .team .head-row .txt{font-family:var(--slab);font-weight:900;font-size:22px;
  text-transform:uppercase;letter-spacing:.01em;line-height:1;display:flex;align-items:center;}
.buzz-page .team .grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;}
.buzz-page .team .card{background:#fff;border-radius:12px;overflow:hidden;border:3px solid #000;
  display:flex;flex-direction:column;}
.buzz-page .team .card .ph{aspect-ratio:1/1;background:#ddd;overflow:hidden;border-bottom:3px solid #000;
  display:flex;align-items:center;justify-content:center;}
.buzz-page .team .card .ph img{width:100% !important;height:100% !important;
  max-width:none !important;object-fit:cover;}
.buzz-page .team .card .ph-init{font-family:var(--wm);font-size:15px;color:rgba(0,0,0,.35);}
.buzz-page .team .card .body{padding:16px 16px 20px;flex:1;display:flex;flex-direction:column;
  align-items:flex-start;}
.buzz-page .team .card .name{font-family:var(--wm);letter-spacing:-.01em;font-size:clamp(16px,1.8vw,19px);
  line-height:1.15;}
.buzz-page .team .card .role{display:inline-block;margin:10px 0 10px;font-family:var(--slab);
  font-weight:900;letter-spacing:.01em;font-size:12px;padding:4px 10px;border-radius:4px;color:#000;}
.buzz-page .team .card .bio{font-family:var(--slab);font-weight:400;font-size:13.5px;line-height:1.5;
  color:#333;margin-bottom:16px;}
.buzz-page .team .card .email{display:inline-block;margin-top:auto;font-family:var(--slab);
  font-weight:900 !important;font-size:11px !important;line-height:1.25;letter-spacing:.01em;
  text-decoration:none !important;padding:7px 11px;border-radius:6px;border:2px solid #000;
  max-width:100%;overflow-wrap:anywhere;word-break:break-word;
  transition:transform .12s,box-shadow .12s;box-shadow:2px 2px 0 #000;}
.buzz-page .team .card .email:hover,.buzz-page .team .card .email:focus{
  transform:translate(1px,1px);box-shadow:1px 1px 0 #000;}

/* Each button is set against its card's role badge so the two never clash:
   yellow badge -> blue button, blue badge -> yellow, red -> black,
   black -> red. */
.buzz-page .team .card:nth-child(5n+1) .email{background:var(--blue);color:#fff;}
.buzz-page .team .card:nth-child(5n+2) .email{background:var(--yellow);color:#000;}
.buzz-page .team .card:nth-child(5n+3) .email{background:#000;color:var(--yellow);}
.buzz-page .team .card:nth-child(5n+4) .email{background:var(--red);color:#fff;}
.buzz-page .team .card:nth-child(5n+5) .email{background:var(--blue);color:#fff;}
.buzz-page .team .card:nth-child(5n+1) .role{background:var(--yellow);color:#000;}
.buzz-page .team .card:nth-child(5n+2) .role{background:var(--blue);color:#fff;}
.buzz-page .team .card:nth-child(5n+3) .role{background:var(--red);color:#fff;}
.buzz-page .team .card:nth-child(5n+4) .role{background:#000;color:var(--yellow);}
.buzz-page .team .card:nth-child(5n+5) .role{background:var(--yellow);color:#000;}

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
  .buzz-page .product .inner{grid-template-columns:1fr;gap:28px;}
  .buzz-page .product.walk .inner{direction:ltr;}
  .buzz-page .product .photo{order:2;}
  .buzz-page .why .cols{grid-template-columns:1fr;gap:24px;}
  .buzz-page .team .grid{grid-template-columns:repeat(2,1fr);}
  .buzz-page .marquee{--wm-h:52px;}
  .buzz-page .photoband,.buzz-page .igband{--band-h:220px;}
  .buzz-page .partners .row{gap:30px;}
  .buzz-page .partners .marks{gap:24px;}
  .buzz-page .partners .mark-wide img{height:34px !important;}
  .buzz-page .partners .mark-round img{height:58px !important;}
  .buzz-page .partners .mark-tall img{height:56px !important;}
  .buzz-page .partners .divider{display:none;}
}
@media(prefers-reduced-motion:reduce){
  .buzz-page .marquee .track,.buzz-page .photoband .track{animation:none;}
}