/*
Theme Name: Bonfire
Theme URI: https://bonfireff.com
Author: Bonfire Fort Frances
Description: Custom theme for Bonfire — a community-led youth organization in Fort Frances, Ontario. "Pull up a log."
Version: 1.0.0
Requires PHP: 7.4
Text Domain: bonfire
*/

/* ============ TOKENS ============ */
:root{
  --bf-ember:        #E2542C;
  --bf-ember-deep:   #B33A18;
  --bf-spark:        #F2B134;
  --bf-nightpine:    #16302A;
  --bf-lakewater:    #2D6E8C;
  --bf-birch:        #F5F0E6;
  --bf-ash:          #55635F;
  --bf-rule:         #DCD4C4;

  --bf-bg:           var(--bf-birch);
  --bf-surface:      #FFFFFF;
  --bf-text:         var(--bf-nightpine);
  --bf-text-muted:   var(--bf-ash);
  --bf-accent:       var(--bf-ember);
  --bf-link:         var(--bf-lakewater);

  --bf-font-display: 'Archivo Black', Impact, sans-serif;
  --bf-font-body:    Inter, system-ui, -apple-system, sans-serif;
  --bf-font-hand:    Caveat, cursive;

  --bf-size-poster:  clamp(40px, 9vw, 128px);
  --bf-size-h1:      clamp(32px, 5.4vw, 60px);
  --bf-size-h2:      clamp(24px, 3.4vw, 36px);
  --bf-size-h3:      20px;
  --bf-size-body:    16.5px;
  --bf-size-small:   14px;
  --bf-size-label:   12px;

  --bf-track-display: -0.03em;
  --bf-track-label:    0.16em;
  --bf-leading-tight:  1.06;
  --bf-leading-body:   1.6;

  --bf-s1: 4px;  --bf-s2: 8px;  --bf-s3: 12px; --bf-s4: 16px;
  --bf-s5: 24px; --bf-s6: 32px; --bf-s7: 48px; --bf-s8: 64px; --bf-s9: 96px;

  --bf-r-pill: 999px;
  --bf-border: 1px solid var(--bf-rule);
  --bf-border-accent: 5px solid var(--bf-ember);

  --bf-max: 1140px;
}

/* ============ BASE ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bf-bg);color:var(--bf-text);font-family:var(--bf-font-body);font-size:var(--bf-size-body);line-height:var(--bf-leading-body);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3{font-family:var(--bf-font-display);letter-spacing:var(--bf-track-display);line-height:var(--bf-leading-tight);margin:0 0 var(--bf-s4);font-weight:400}
h1{font-size:var(--bf-size-h1)}
h2{font-size:var(--bf-size-h2)}
h3{font-family:var(--bf-font-body);font-weight:700;font-size:var(--bf-size-h3);letter-spacing:0;margin-bottom:var(--bf-s2)}
p{margin:0 0 var(--bf-s4)}
a{color:var(--bf-link);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1.5px}
a:hover{color:var(--bf-ember-deep)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--bf-lakewater);outline-offset:2px}
small,.bf-fine{font-size:var(--bf-size-small);color:var(--bf-text-muted)}
img{max-width:100%;height:auto}
ul,ol{padding-left:1.2em}

.bf-label{font-size:var(--bf-size-label);letter-spacing:var(--bf-track-label);text-transform:uppercase;font-weight:700;color:var(--bf-ember-deep)}
.bf-hand{font-family:var(--bf-font-hand);font-size:28px;line-height:1.1}
.bf-display{font-family:var(--bf-font-display);font-size:var(--bf-size-poster);letter-spacing:var(--bf-track-display);line-height:var(--bf-leading-tight);text-transform:uppercase}
.bf-dark{background:var(--bf-nightpine);color:var(--bf-birch)}
.bf-dark a{color:var(--bf-spark)}

.bf-wrap{max-width:var(--bf-max);margin:0 auto;padding-left:clamp(20px,5vw,56px);padding-right:clamp(20px,5vw,56px)}
/* padding-top/bottom only below — .bf-section is combined with .bf-wrap on the
   same element, and a shorthand `padding` here would win the cascade (equal
   specificity, later source order) and silently zero out bf-wrap's side padding. */
.bf-section{padding-top:var(--bf-s8);padding-bottom:var(--bf-s8)}
.bf-section--tight{padding-top:var(--bf-s6);padding-bottom:var(--bf-s6)}

/* ============ SITE HEADER ============ */
.bf-site-header{background:var(--bf-nightpine);color:var(--bf-birch);padding:18px clamp(20px,5vw,56px);display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.bf-site-header__brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:inherit}
.bf-site-header__word{font-family:var(--bf-font-display);font-size:22px;letter-spacing:-.03em;color:var(--bf-birch)}
.bf-site-header__nav{margin-left:auto;display:flex;gap:26px;font-size:15px;font-weight:600;align-items:center;flex-wrap:wrap}
.bf-site-header__nav a{color:#D6E0DC;text-decoration:none}
.bf-site-header__nav a:hover{color:var(--bf-spark)}
.bf-site-header__nav .current-menu-item a,
.bf-site-header__nav a.is-active{color:var(--bf-spark)}
.bf-site-header__nav ul{list-style:none;display:flex;gap:26px;margin:0;padding:0;flex-wrap:wrap}

/* ============ SITE FOOTER ============ */
.bf-site-footer{background:var(--bf-nightpine);color:#B9C7C2;padding:44px clamp(20px,5vw,56px) 26px}
.bf-site-footer .bf-wrap{display:flex;gap:40px;flex-wrap:wrap;align-items:flex-start}
.bf-site-footer__tagline{font-family:var(--bf-font-hand);font-size:28px;color:var(--bf-spark);line-height:1.1}
.bf-site-footer__place{font-size:14px;margin:10px 0 0}
.bf-site-footer__col{font-size:14px;line-height:1.9;min-width:180px}
.bf-site-footer__col b{color:var(--bf-birch);display:block}
.bf-site-footer__col a{color:#B9C7C2;text-decoration:none}
.bf-site-footer__col a:hover{color:var(--bf-spark)}
.bf-site-footer__disclosure{max-width:var(--bf-max);margin:24px auto 0;padding:20px 24px 0;border-top:1px solid #2C4A42;font-size:12.5px;line-height:1.6}

/* ============ HERO ============ */
.bf-hero{background:var(--bf-nightpine);color:var(--bf-birch);padding:72px clamp(20px,5vw,56px) 64px}
.bf-hero__inner{max-width:var(--bf-max);margin:0 auto}
.bf-hero__kicker{display:flex;align-items:center;gap:13px;margin-bottom:26px}
.bf-hero__kicker-place{font-size:9px;letter-spacing:.26em;font-weight:700;color:var(--bf-spark);margin-left:2px}
.bf-hero h1{font-size:clamp(34px,6vw,72px);max-width:19ch;margin:0 0 20px}
.bf-hero h1 em{font-style:normal;color:var(--bf-spark)}
.bf-hero p{font-size:18px;color:#D6E0DC;max-width:56ch;margin:0 0 30px}
.bf-hero__actions{display:flex;flex-wrap:wrap;gap:14px}

/* ============ BUTTONS ============ */
.bf-btn{font-family:var(--bf-font-body);font-weight:700;border-radius:var(--bf-r-pill);border:2px solid transparent;cursor:pointer;display:inline-flex;align-items:center;gap:8px;text-decoration:none;transition:.14s;line-height:1}
.bf-btn--lg{font-size:17px;padding:16px 30px}
.bf-btn--md{font-size:15px;padding:12px 24px}
.bf-btn--sm{font-size:13px;padding:9px 18px}
.bf-btn--primary{background:var(--bf-ember);color:#fff}
.bf-btn--primary:hover{background:var(--bf-ember-deep);color:#fff}
.bf-btn--secondary{background:transparent;color:var(--bf-nightpine);border-color:var(--bf-nightpine)}
.bf-btn--secondary:hover{background:var(--bf-nightpine);color:var(--bf-birch)}
.bf-btn--onDark{background:var(--bf-spark);color:var(--bf-nightpine)}
.bf-btn--onDark:hover{background:#e0a02b;color:var(--bf-nightpine)}
.bf-btn--onDarkOutline{background:transparent;color:var(--bf-birch);border-color:var(--bf-birch)}
.bf-btn--onDarkOutline:hover{background:var(--bf-birch);color:var(--bf-nightpine)}
.bf-btn:focus-visible{outline:3px solid var(--bf-lakewater);outline-offset:2px}

/* ============ TAGS ============ */
.bf-tag{display:inline-block;font-size:10.5px;font-weight:700;padding:4px 9px 3px;border:1px solid currentColor;background:none;letter-spacing:.1em;text-transform:uppercase;line-height:1.4}
.bf-tag--age{color:#4A5450}
.bf-tag--go{color:#1D6B3F}
.bf-tag--soon{color:#8A5B12}
.bf-tag--later{color:#B33A18}
.bf-tag--free{background:var(--bf-ember);border-color:var(--bf-ember);color:#fff}

/* ============ CARDS ============ */
.bf-grid{display:grid;gap:16px}
.bf-grid--3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.bf-grid--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.bf-card{background:var(--bf-birch);border:1.5px solid var(--bf-nightpine);display:flex;flex-direction:column}
.bf-card .k{align-self:flex-start;background:var(--bf-nightpine);color:var(--bf-birch);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;padding:5px 10px 4px}
.bf-card__body{padding:18px 20px 20px}
.bf-card h4{font-family:var(--bf-font-display);font-weight:400;font-size:22px;letter-spacing:-.025em;margin:0 0 8px;line-height:1.08}
.bf-card p{margin:0 0 14px;font-size:14.4px;color:var(--bf-ash);line-height:1.5}
.bf-card .tags{display:flex;flex-wrap:wrap;gap:6px}
.bf-panel{background:#fff;border:var(--bf-border);padding:24px}
.bf-panel.bf-dark{border-color:var(--bf-nightpine)}

/* ============ PILLAR BAND ============ */
.bf-pillar{background:var(--bf-nightpine);color:var(--bf-birch);padding:26px;display:flex;flex-direction:column;gap:10px}
.bf-pillar__num{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--bf-spark)}
.bf-pillar h4{font-family:var(--bf-font-display);font-weight:400;font-size:19px;letter-spacing:-.02em;margin:0;color:var(--bf-birch)}
.bf-pillar p{margin:0;font-size:14.4px;color:#B9C7C2;line-height:1.5}
.bf-pillar__measures{margin:6px 0 0;padding-left:18px;font-size:13px;color:#9FB3AD}
.bf-pillar__measures li{margin-bottom:4px}

/* ============ STAT / QUOTE / CALLOUT ============ */
.bf-stat{padding:20px 26px 22px 0;border-top:1.5px solid var(--bf-nightpine)}
.bf-stat b{display:block;font-family:var(--bf-font-display);font-weight:400;font-size:clamp(38px,4.6vw,54px);line-height:.92;letter-spacing:-.045em;color:var(--bf-nightpine);margin-bottom:12px}
.bf-stat span{display:block;font-size:14.5px;line-height:1.42;max-width:30ch}

.bf-quote{max-width:44ch;border-top:1.5px solid var(--bf-nightpine);padding-top:18px}
.bf-quote p{margin:0;font-family:var(--bf-font-display);font-weight:400;font-size:clamp(21px,2.4vw,28px);line-height:1.14;letter-spacing:-.02em}
.bf-quote cite{display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--bf-ash);font-style:normal;margin-top:18px;line-height:1.6}

.bf-callout{background:var(--bf-nightpine);color:var(--bf-birch);padding:26px 30px}
.bf-callout b{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--bf-spark);margin-bottom:10px}
.bf-callout p{margin:0;font-size:17px;line-height:1.5;max-width:62ch}
.bf-callout--plain{background:none;color:var(--bf-nightpine);border-top:1.5px solid var(--bf-nightpine);border-bottom:1.5px solid var(--bf-nightpine);padding:20px 0}
.bf-callout--plain b{color:var(--bf-ember-deep)}

/* ============ FORMS ============ */
.bf-field{display:block;margin-bottom:18px;max-width:460px}
.bf-field label{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;margin-bottom:7px}
.bf-field .hint{display:block;font-size:12.5px;color:var(--bf-ash);font-weight:400;text-transform:none;letter-spacing:0;margin-top:4px}
.bf-input{width:100%;font-family:var(--bf-font-body);font-size:15.5px;padding:12px 14px;border:1.5px solid var(--bf-nightpine);background:#fff;color:var(--bf-nightpine)}
.bf-input:focus{outline:3px solid var(--bf-lakewater);outline-offset:1px;border-color:var(--bf-lakewater)}
.bf-chip-row{display:flex;flex-wrap:wrap;gap:8px}
.bf-chip{font-family:var(--bf-font-body);font-size:14px;font-weight:600;padding:9px 15px;border:1.5px solid var(--bf-nightpine);background:none;color:var(--bf-nightpine);cursor:pointer}
.bf-chip input{position:absolute;opacity:0;width:1px;height:1px}
.bf-chip:has(input:checked){background:var(--bf-nightpine);color:var(--bf-birch)}
.bf-form-honeypot{position:absolute;left:-9999px;top:-9999px}
.bf-form-note{background:#fff;border-left:5px solid #1D6B3F;padding:16px 20px;margin-bottom:22px}
.bf-form-note--error{border-left-color:var(--bf-ember-deep)}

/* ============ BOARD CARD ============ */
.bf-boardcard{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.bf-boardcard__front{background:var(--bf-nightpine);color:var(--bf-birch);padding:32px;display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.bf-boardcard__front .brand{display:flex;align-items:center;gap:14px}
.bf-boardcard__front .brand-word{font-family:var(--bf-font-display);font-size:22px;letter-spacing:-.03em}
.bf-boardcard__front .brand-tag{font-size:9.5px;letter-spacing:.28em;font-weight:700;color:var(--bf-spark)}
.bf-boardcard__front .headline{font-family:var(--bf-font-display);font-size:26px;line-height:1.06;letter-spacing:-.03em}
.bf-boardcard__front .headline em{font-style:normal;color:var(--bf-spark)}
.bf-boardcard__front .sub{font-size:12.5px;color:#B9C7C2}
.bf-boardcard__back{background:#fff;border:var(--bf-border);padding:30px;display:flex;flex-direction:column;gap:20px}
.bf-boardcard__back ul{margin:8px 0 0;padding-left:17px;font-size:13.5px;line-height:1.6;color:var(--bf-ash)}
.bf-boardcard__back p{font-size:13.5px;color:var(--bf-ash);margin:8px 0 0}

/* ============ MISC ============ */
.bf-table{width:100%;border-collapse:collapse;font-size:15px}
.bf-table th,.bf-table td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--bf-rule)}
.bf-table th{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--bf-ash)}
.bf-source-line{font-size:12.5px;color:var(--bf-ash);border-top:var(--bf-border);padding-top:16px;margin-top:8px}
.bf-strip{background:#fff;border:var(--bf-border);padding:36px 30px;display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.bf-strip h3{margin:0 0 6px}
.bf-strip p{margin:0;color:var(--bf-ash);max-width:52ch}

/* ============ PROSE — editable page content ============
   Maps the WordPress block editor's native output (headings, paragraphs,
   lists, buttons, quotes) to the Bonfire look, so page content edited in
   wp-admin renders on-brand without needing custom blocks or plugins. */
.bf-prose{max-width:74ch}
.bf-prose > *:first-child{margin-top:0}
.bf-prose h1{font-size:var(--bf-size-h1);max-width:18ch}
.bf-prose h2{font-size:var(--bf-size-h2);max-width:20ch;margin-top:var(--bf-s7)}
.bf-prose h3{margin-top:var(--bf-s6)}
.bf-prose p{max-width:64ch}
.bf-prose ul,.bf-prose ol{padding-left:1.3em;margin:0 0 var(--bf-s4);max-width:64ch}
.bf-prose li{margin-bottom:var(--bf-s2)}
.bf-prose blockquote{border-top:1.5px solid var(--bf-nightpine);border-left:none;margin:var(--bf-s6) 0;padding:var(--bf-s4) 0 0;font-family:var(--bf-font-display);font-weight:400;font-size:clamp(20px,2.2vw,26px);line-height:1.18;letter-spacing:-.02em}
.bf-prose blockquote p{max-width:44ch;margin:0}
.bf-prose hr{border:0;border-top:1px solid var(--bf-rule);margin:var(--bf-s7) 0}
.bf-prose .wp-block-buttons{display:flex;flex-wrap:wrap;gap:14px;list-style:none;margin:var(--bf-s5) 0 0;padding:0}
.bf-prose .wp-block-button__link{font-family:var(--bf-font-body);font-weight:700;font-size:16px;padding:14px 26px;border-radius:var(--bf-r-pill);border:2px solid transparent;text-decoration:none;display:inline-block;background:var(--bf-ember);color:#fff}
.bf-prose .wp-block-button__link:hover{background:var(--bf-ember-deep);color:#fff}
.bf-prose .wp-block-button.is-style-outline .wp-block-button__link{background:transparent;color:var(--bf-nightpine);border-color:var(--bf-nightpine)}
.bf-prose .wp-block-button.is-style-outline .wp-block-button__link:hover{background:var(--bf-nightpine);color:var(--bf-birch)}

/* On the dark hero band: light text, and buttons flip to the onDark pairing. */
.bf-prose--ondark{color:var(--bf-birch)}
.bf-prose--ondark h1,.bf-prose--ondark h2,.bf-prose--ondark h3{color:var(--bf-birch)}
.bf-prose--ondark p{color:#D6E0DC}
.bf-prose--ondark a{color:var(--bf-spark)}
.bf-prose--ondark blockquote{border-top-color:var(--bf-birch)}
.bf-prose--ondark .wp-block-button__link{background:var(--bf-spark);color:var(--bf-nightpine)}
.bf-prose--ondark .wp-block-button__link:hover{background:#e0a02b;color:var(--bf-nightpine)}
.bf-prose--ondark .wp-block-button.is-style-outline .wp-block-button__link{background:transparent;color:var(--bf-birch);border-color:var(--bf-birch)}
.bf-prose--ondark .wp-block-button.is-style-outline .wp-block-button__link:hover{background:var(--bf-birch);color:var(--bf-nightpine)}

@media (max-width:640px){
  .bf-site-header{padding-top:14px;padding-bottom:14px}
  .bf-site-header__nav{gap:16px;width:100%;justify-content:space-between}
  .bf-hero{padding-top:52px;padding-bottom:48px}
}