/*
Theme Name: Klein FFA Boosters
Theme URI: https://github.com/
Author: Klein FFA Booster Club
Description: Custom theme for the Klein High School FFA Booster Club. Klein blue and gold, a scrolling sponsor banner on every page driven by a Sponsors admin screen, and block-editor styling so the board can edit every page normally.
Version: 1.2.1
Requires at least: 6.0
Tested up to: 6.7
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: klein-ffa-boosters
Tags: education, custom-colors, custom-logo, custom-menu, block-styles, wide-blocks
*/

/* ============================================================
   1. TOKENS — Klein High School palette
   Change a color here and it changes everywhere on the site.
   ============================================================ */
:root{
  --ground:#F5F4F0;
  --surface:#FFFFFF;
  --surface-2:#E8E6DF;
  --ink:#16202B;
  --ink-soft:#55606D;
  --line:#DEDBD3;
  --line-strong:#BEB9AD;
  --gold:#FDBB30;
  --gold-wash:#FFF3D6;
  --hero-wash:#FFF3D6;
  --accent:#0054A4;
  --on-gold:#003A72;
  --btn-bg:#0054A4;
  --btn-fg:#FFFFFF;
  --btn-bg-hover:#003D78;
  --bar-bg:#0054A4;
  --bar-fg:#FFFFFF;
  --bar-line:#2E74B5;
  --bar-soft:#CFE2F4;
  --bar-faint:#A9C6E4;
  --focus:#0B63C5;

  --f-display:"Oswald","Haettenschweiler","Arial Narrow",sans-serif;
  --f-body:"Source Serif 4",Georgia,"Times New Roman",serif;
  --f-data:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --measure:66ch;
  --pad:clamp(1.15rem,4vw,2.5rem);
  --bar-h:64px;
  --wrap:1120px;
}

/* ============================================================
   2. BASE
   ============================================================ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--bar-h) + 4px);
}
body.no-sponsor-bar{padding-bottom:0}
img{max-width:100%;height:auto}

h1,h2,h3,h4,h5,h6{
  font-family:var(--f-display);font-weight:600;line-height:1.08;
  margin:0;text-wrap:balance;letter-spacing:.005em;
}
h1{font-size:clamp(2.4rem,6vw,4.1rem);text-transform:uppercase;letter-spacing:.012em}
h2{font-size:clamp(1.6rem,3.4vw,2.45rem);text-transform:uppercase;letter-spacing:.02em}
h3{font-size:1.2rem;text-transform:uppercase;letter-spacing:.05em}
h4{font-size:1rem;text-transform:uppercase;letter-spacing:.07em;font-weight:500}
h5,h6{font-size:.86rem;text-transform:uppercase;letter-spacing:.09em;font-weight:500;color:var(--ink-soft)}

p{margin:0}
a{color:var(--accent)}
a:hover{color:var(--ink)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap;
}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{
  left:1rem;top:1rem;z-index:99;background:var(--surface);
  padding:.6rem 1rem;border:1px solid var(--line-strong);
}

.kfb-wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* ============================================================
   3. HEADER + NAV
   ============================================================ */
.kfb-topbar{
  position:sticky;top:0;z-index:40;
  background:var(--bar-bg);color:var(--bar-fg);
  border-bottom:2px solid var(--gold);
}
.admin-bar .kfb-topbar{top:32px}
@media screen and (max-width:782px){.admin-bar .kfb-topbar{top:46px}}

.kfb-topbar-inner{
  max-width:var(--wrap);margin:0 auto;padding:.6rem var(--pad);
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
}
.kfb-brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;margin-right:auto;color:inherit}
.kfb-brand:hover{color:inherit}
.kfb-brand img,
.kfb-brand .kfb-brand-logo{
  max-height:46px;width:auto;display:block;flex:none;
}
.kfb-brand-mark{
  width:38px;height:38px;flex:none;display:grid;place-items:center;
  background:var(--gold);color:var(--on-gold);
  font-family:var(--f-display);font-weight:700;font-size:1rem;letter-spacing:.04em;
  clip-path:polygon(50% 0,100% 22%,100% 78%,50% 100%,0 78%,0 22%);
}
.kfb-brand-text{display:block;line-height:1.05}
.kfb-brand-text b{
  display:block;font-family:var(--f-display);font-weight:600;
  font-size:1.06rem;letter-spacing:.08em;text-transform:uppercase;
}
.kfb-brand-text span{
  display:block;font-family:var(--f-data);font-size:.6rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin-top:.15rem;
}

.kfb-navtoggle{
  display:none;background:transparent;color:inherit;border:1px solid var(--bar-line);
  font-family:var(--f-data);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;
  padding:.5rem .8rem;cursor:pointer;
}
.kfb-nav ul{display:flex;gap:.15rem;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.kfb-nav li{position:relative}
.kfb-nav a{
  display:block;text-decoration:none;color:var(--bar-fg);
  font-family:var(--f-display);font-weight:400;font-size:.86rem;
  letter-spacing:.09em;text-transform:uppercase;
  padding:.5rem .68rem;border-bottom:2px solid transparent;white-space:nowrap;
}
.kfb-nav a:hover{color:var(--gold)}
.kfb-nav .current-menu-item > a,
.kfb-nav .current_page_item > a,
.kfb-nav .current-menu-ancestor > a{color:var(--gold);border-bottom-color:var(--gold)}

/* dropdowns for any sub-menu the board adds later */
.kfb-nav ul ul{
  display:none;position:absolute;top:100%;left:0;min-width:220px;
  background:var(--bar-bg);border:1px solid var(--bar-line);flex-direction:column;z-index:50;
}
.kfb-nav li:hover > ul,.kfb-nav li:focus-within > ul{display:flex}
.kfb-nav ul ul a{padding:.6rem .9rem;border-bottom:1px solid var(--bar-line)}

@media (max-width:900px){
  .kfb-navtoggle{display:block}
  .kfb-nav{display:none;width:100%}
  .kfb-nav.is-open{display:block}
  .kfb-nav ul{
    flex-direction:column;gap:0;
    border-top:1px solid var(--bar-line);margin-top:.55rem;padding-top:.3rem;
  }
  .kfb-nav a{padding:.62rem .1rem;border-bottom:1px solid var(--bar-line)}
  .kfb-nav ul ul{position:static;border:0;padding-left:1rem}
}

/* ============================================================
   4. PAGE HERO — built from the page title + excerpt
   ============================================================ */
.kfb-hero{
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--hero-wash) 70%,transparent),transparent 78%),
    var(--ground);
  border-bottom:1px solid var(--line);
  padding:clamp(2.4rem,6vw,4.2rem) 0 clamp(2rem,4vw,3rem);
}
.kfb-eyebrow{
  font-family:var(--f-data);font-size:.7rem;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:var(--accent);
  display:flex;align-items:center;gap:.65rem;margin:0 0 .9rem;
}
.kfb-eyebrow::after{content:"";flex:1;height:1px;background:var(--line-strong);max-width:90px}
.kfb-hero .kfb-lede{
  font-size:1.16rem;color:var(--ink-soft);max-width:56ch;margin-top:1.1rem;
}
.kfb-hero-rule{height:6px;background:var(--gold);width:104px;margin-top:1.6rem}

/* ============================================================
   5. CONTENT — styling for standard WordPress blocks
   Everything below makes normal block-editor content look designed,
   so the board never has to touch HTML.
   ============================================================ */
.kfb-main{padding:clamp(2.2rem,5vw,3.4rem) 0 3.5rem}
.entry-content{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.entry-content > *{max-width:var(--measure)}
.entry-content > .alignwide,
.entry-content > .alignfull,
.entry-content > .wp-block-columns,
.entry-content > .wp-block-table,
.entry-content > .wp-block-buttons,
.entry-content > .wp-block-separator,
.entry-content > .wp-block-group,
.entry-content > .wp-block-embed,
.entry-content > figure{max-width:none}

.entry-content > * + *{margin-top:1.15rem}
.entry-content > h2{margin-top:2.6rem}
.entry-content > h3{margin-top:2rem}
.entry-content > h2 + *,
.entry-content > h3 + *{margin-top:.9rem}
.entry-content > .wp-block-columns,
.entry-content > .wp-block-table,
.entry-content > .wp-block-buttons{margin-top:1.8rem}

.entry-content li{margin-bottom:.4rem}
.entry-content ul,.entry-content ol{padding-left:1.2rem}

/* an h2 gets the gold rule automatically */
.entry-content > h2::after{
  content:"";display:block;width:74px;height:5px;background:var(--gold);margin-top:.75rem;
}

/* --- buttons --- */
.wp-block-buttons{display:flex;flex-wrap:wrap;gap:.7rem}
.wp-block-button__link,.wp-element-button{
  display:inline-flex;align-items:center;gap:.5rem;border-radius:0!important;
  font-family:var(--f-display);font-weight:500;font-size:.9rem;
  letter-spacing:.09em;text-transform:uppercase;text-decoration:none;
  padding:.78rem 1.35rem;background:var(--btn-bg);color:var(--btn-fg);
  border:1px solid var(--btn-bg);transition:background .15s ease;
}
.wp-block-button__link:hover,.wp-element-button:hover{
  background:var(--btn-bg-hover);border-color:var(--btn-bg-hover);color:var(--btn-fg);
}
.wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent;color:var(--ink);border-color:var(--line-strong);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover{
  background:var(--surface-2);border-color:var(--ink);color:var(--ink);
}

/* --- columns become cards ---
   Layout is declared here rather than left to core block styles, so the
   design holds even if a plugin or setting strips wp-block-library. */
.wp-block-columns{
  display:flex;flex-wrap:wrap;align-items:stretch;gap:1.1rem;
}
.wp-block-column{
  flex:1 1 0%;min-width:0;
  background:var(--surface);border:1px solid var(--line);padding:1.35rem;
}
@media (max-width:781px){
  .wp-block-columns:not(.is-not-stacked-on-mobile){flex-direction:column}
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column{flex-basis:100%!important}
}
.wp-block-column > *+*{margin-top:.55rem}
.wp-block-column h3,.wp-block-column h4{font-size:1.06rem}
.wp-block-column p{color:var(--ink-soft);font-size:.97rem}
/* opt out with the "plain-columns" class on the Columns block */
.wp-block-columns.plain-columns .wp-block-column{background:none;border:0;padding:0}

/* --- images ---
   Full-bleed inside a card: the card's own padding is cancelled on the top
   and sides so a portrait graphic sits flush against the border. */
.wp-block-image{margin:0}
.wp-block-image img{display:block;max-width:100%;height:auto}
.wp-block-column > .wp-block-image:first-child{
  margin:-1.35rem -1.35rem 0;
  border-bottom:2px solid var(--gold);
}
.wp-block-column > .wp-block-image:first-child img{width:100%}
.entry-content > .wp-block-image{
  border:1px solid var(--line-strong);background:var(--surface);
}
.entry-content > .wp-block-image img{width:100%}
.wp-block-image figcaption{
  font-family:var(--f-data);font-size:.74rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft);
  padding:.6rem 1rem;margin:0;
}

/* --- tables --- */
.wp-block-table{overflow-x:auto;border:1px solid var(--line-strong);background:var(--surface)}
.wp-block-table table{border-collapse:collapse;width:100%;min-width:520px}
.wp-block-table td,.wp-block-table th{
  text-align:left;padding:.72rem 1.1rem;border:0;border-bottom:1px solid var(--line);font-size:.96rem;
}
.wp-block-table thead th{
  font-family:var(--f-data);font-size:.7rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-soft);font-weight:600;
}
.wp-block-table tbody td:first-child{
  font-family:var(--f-data);font-variant-numeric:tabular-nums;color:var(--ink);
  white-space:nowrap;
}
/* keep amounts on one line; let the last column take the slack */
.wp-block-table tbody td:nth-child(2){white-space:nowrap}
.wp-block-table tbody td:last-child{width:100%;white-space:normal}
/* A middle column squeezed between a nowrap date and a greedy last column
   shreds into one word per line. Give it room to hold a short phrase. */
.wp-block-table tbody td:nth-child(3):not(:last-child){min-width:17ch}
.wp-block-table tbody tr:last-child td{border-bottom:0}
.wp-block-table figcaption{
  padding:.8rem 1.1rem;font-family:var(--f-data);font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
}

/* --- quote becomes the gold callout --- */
.wp-block-quote{
  border-left:4px solid var(--gold);background:var(--gold-wash);
  padding:1rem 1.2rem;margin:0;font-size:.97rem;font-style:normal;
}
.wp-block-quote p{margin:0}
.wp-block-quote p + p{margin-top:.5rem}
.wp-block-quote strong:first-child{
  font-family:var(--f-display);letter-spacing:.05em;text-transform:uppercase;
  font-size:.9rem;display:block;margin-bottom:.3rem;font-weight:600;
}
.wp-block-quote cite{
  display:block;margin-top:.5rem;font-family:var(--f-data);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);font-style:normal;
}

/* --- separator --- */
.wp-block-separator{border:0;border-top:1px solid var(--line);margin:2.4rem 0}

/* --- the "strip" utility: add class `kfb-strip` to a Columns block --- */
.wp-block-columns.kfb-strip{
  gap:0;border:1px solid var(--line-strong);background:var(--surface);
}
.wp-block-columns.kfb-strip .wp-block-column{
  border:0;border-right:1px solid var(--line);padding:1rem 1.15rem;
}
.wp-block-columns.kfb-strip .wp-block-column:last-child{border-right:0}
.wp-block-columns.kfb-strip h3,
.wp-block-columns.kfb-strip h4{
  font-family:var(--f-data);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);font-weight:600;
}
.wp-block-columns.kfb-strip p{
  font-family:var(--f-display);font-size:1.08rem;text-transform:uppercase;
  letter-spacing:.03em;color:var(--ink);margin-top:.3rem;
}
.wp-block-columns.kfb-strip p em{
  display:block;font-family:var(--f-data);font-size:.82rem;font-style:normal;
  text-transform:none;letter-spacing:0;color:var(--ink-soft);margin-top:.25rem;
}
@media (max-width:781px){
  .wp-block-columns.kfb-strip .wp-block-column{
    border-right:0;border-bottom:1px solid var(--line);
  }
  .wp-block-columns.kfb-strip .wp-block-column:last-child{border-bottom:0}
}

/* --- "TBA" pill: wrap text in inline code to get it --- */
.entry-content code{
  font-family:var(--f-data);font-size:.72rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--accent);
  border:1px dashed var(--gold);padding:.14rem .45rem;background:transparent;
  white-space:nowrap;
}

/* ============================================================
   6. FOOTER
   ============================================================ */
.kfb-foot{
  background:var(--bar-bg);color:var(--bar-fg);border-top:2px solid var(--gold);
  padding:2.4rem 0 2rem;
}
.kfb-foot a{color:var(--gold)}
.kfb-foot a:hover{color:#fff}
.kfb-foot-grid{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.kfb-foot h4{color:var(--gold);margin-bottom:.6rem}
.kfb-foot p,.kfb-foot li{font-size:.94rem;color:var(--bar-soft)}
.kfb-foot ul{list-style:none;margin:0;padding:0}
.kfb-foot li{margin-bottom:.3rem}
.kfb-foot-legal{
  margin-top:2rem;padding-top:1.1rem;border-top:1px solid var(--bar-line);
  font-family:var(--f-data);font-size:.72rem;letter-spacing:.06em;color:var(--bar-faint);
}

/* ============================================================
   7. SPONSOR BANNER — appears twice on every page, top and bottom,
   both fed by the same Sponsors screen so they always match.
   ============================================================ */
.kfb-sponsorbar{
  height:var(--bar-h);z-index:50;
  background:var(--bar-bg);
  display:flex;align-items:center;overflow:hidden;
}
/* under the header, scrolls away with the page */
.kfb-sponsorbar--top{
  position:relative;
  border-top:1px solid var(--bar-line);
  border-bottom:2px solid var(--gold);
}
/* pinned to the bottom of the window */
.kfb-sponsorbar--bottom{
  position:fixed;left:0;right:0;bottom:0;
  border-top:2px solid var(--gold);
}
/* the two run in opposite directions so they don't read as one long band */
.kfb-sponsorbar--top .kfb-track{animation-direction:reverse}
.kfb-sponsorbar .kfb-sb-label{
  flex:none;height:100%;display:flex;align-items:center;gap:.5rem;
  padding:0 .95rem;background:var(--gold);color:var(--on-gold);
  font-family:var(--f-data);font-size:.64rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
}
.kfb-marquee{flex:1;overflow:hidden;position:relative;height:100%}
.kfb-track{
  display:flex;align-items:center;gap:0;height:100%;width:max-content;
  animation:kfb-roll 42s linear infinite;
}
.kfb-marquee:hover .kfb-track{animation-play-state:paused}
@keyframes kfb-roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.kfb-plaque{
  flex:none;display:flex;flex-direction:column;justify-content:center;
  padding:0 1.35rem;height:44px;margin:0 .55rem;
  border:1px dashed var(--bar-line);color:var(--bar-fg);text-decoration:none;
  font-family:var(--f-display);font-size:.88rem;letter-spacing:.09em;
  text-transform:uppercase;white-space:nowrap;
}
.kfb-plaque.is-filled{border:1px solid var(--gold);color:var(--gold)}
.kfb-plaque img{max-height:36px;width:auto;display:block}
.kfb-plaque em{
  font-family:var(--f-data);font-style:normal;font-size:.58rem;
  letter-spacing:.15em;color:var(--bar-faint);text-transform:uppercase;
}
.kfb-sponsorbar .kfb-sb-join{
  flex:none;padding:0 1rem;height:100%;display:flex;align-items:center;
  font-family:var(--f-display);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--on-gold);background:var(--gold);text-decoration:none;
  border-left:1px solid var(--bar-line);
}
.kfb-sponsorbar .kfb-sb-join:hover{background:#FFCB55;color:var(--on-gold)}
@media (max-width:620px){
  .kfb-sponsorbar .kfb-sb-label span{display:none}
  .kfb-sponsorbar .kfb-sb-join{font-size:.7rem;padding:0 .7rem}
}

/* ============================================================
   8. POSTS (news) — used only if the club starts blogging
   ============================================================ */
.kfb-postlist{display:grid;gap:1.1rem;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.kfb-postcard{background:var(--surface);border:1px solid var(--line);padding:1.4rem}
.kfb-postcard h2{font-size:1.35rem}
.kfb-postcard h2 a{text-decoration:none;color:var(--ink)}
.kfb-postcard h2 a:hover{color:var(--accent)}
.kfb-postmeta{
  font-family:var(--f-data);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.5rem;
}
.kfb-pagination{
  max-width:var(--wrap);margin:2.4rem auto 0;padding:0 var(--pad);
  font-family:var(--f-display);letter-spacing:.06em;text-transform:uppercase;
}
.kfb-pagination .page-numbers{
  display:inline-block;padding:.4rem .8rem;border:1px solid var(--line-strong);
  margin-right:.35rem;text-decoration:none;
}
.kfb-pagination .page-numbers.current{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ============================================================
   9. MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .kfb-track{animation:none}
  .kfb-marquee{overflow-x:auto}
  .wp-block-button__link,.wp-element-button{transition:none}
}