/*
Theme Name: Canadian Beekeepers Federation
Theme URI: https://www.canadianbeekeepers.ca
Author: Canadian Beekeepers Federation
Description: Custom theme for the Canadian Beekeepers Federation - warm honey-gold design with an image-led blog flowing on the front page. All page text, links, pricing and contact details are editable from Appearance > Customize > "CBF page content" (no code editing).
Version: 1.1
License: GNU General Public License v2 or later
Text Domain: cbf
*/


  :root{
    --honey:#e0a81f;
    --honey-deep:#c08a10;
    --amber:#f6cb52;
    --gold-a:#f6ce5a;
    --gold-b:#dca01c;
    --gold-deep:#bd8410;
    --wax:#fbf4e6;
    --wax-2:#f5ead2;
    --ink:#2b2118;
    --ink-soft:#5c4a36;
    --line:#e7d9bd;
    --cream:#fffdf8;
    --maple:#a8341f;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:Georgia,'Times New Roman',serif;
    color:var(--ink);
    background:var(--cream);
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;text-decoration:none;}
  .sans{font-family:'Helvetica Neue',Arial,sans-serif;}
  .wrap{max-width:1140px;margin:0 auto;padding:0 28px;}

  /* ---- Accessibility skip link ---- */
  .skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--wax);
    font-family:'Helvetica Neue',Arial,sans-serif;font-size:13px;padding:10px 16px;border-radius:0 0 8px 0;}
  .skip-link:focus{left:0;}

  /* ---- Demo banner ---- */
  .demo-flag{
    background:var(--ink);color:var(--wax);text-align:center;
    font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;letter-spacing:.14em;
    text-transform:uppercase;padding:7px 12px;
  }

  /* ---- Top utility bar ---- */
  .util{background:linear-gradient(180deg,var(--gold-a),var(--gold-b));color:#4a3208;font-family:'Helvetica Neue',Arial,sans-serif;font-size:12.5px;letter-spacing:.04em;}
  .util .wrap{display:flex;justify-content:space-between;align-items:center;height:38px;}
  .util a{opacity:.92;}
  .util a:hover{opacity:1;}
  .util .right{display:flex;gap:22px;align-items:center;}

  /* ---- Header / nav ---- */
  header.site{background:var(--cream);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;}
  header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:92px;}
  .brand{display:flex;align-items:center;gap:14px;}
  .brand .mark{width:50px;height:50px;flex:0 0 50px;}
  .brand .name{font-size:19px;font-weight:bold;letter-spacing:.01em;line-height:1.15;color:var(--ink);}
  .brand .name small{display:block;font-family:'Helvetica Neue',Arial,sans-serif;font-weight:400;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--honey-deep);margin-top:3px;}
  nav.main{display:flex;gap:30px;align-items:center;font-family:'Helvetica Neue',Arial,sans-serif;font-size:14px;letter-spacing:.03em;}
  nav.main a{padding:6px 0;border-bottom:2px solid transparent;color:var(--ink-soft);}
  nav.main a:hover,nav.main a.active,nav.main .current-menu-item > a{color:var(--ink);border-bottom-color:var(--honey);}
  nav.main a.btn{border-bottom:1px solid var(--gold-deep);}
  .btn{
    font-family:'Helvetica Neue',Arial,sans-serif;font-size:13.5px;letter-spacing:.04em;
    background:linear-gradient(180deg,var(--gold-a),var(--gold-b));color:#3a2a10;font-weight:700;
    padding:11px 20px;border-radius:30px;border:1px solid var(--gold-deep);
    display:inline-block;transition:filter .15s,transform .15s;cursor:pointer;
  }
  .btn:hover{filter:brightness(1.06);transform:translateY(-1px);}
  .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6);}
  .btn.ghost:hover{background:rgba(255,255,255,.12);}

  /* ---- Mobile nav toggle (hidden on desktop) ---- */
  .nav-toggle{display:none;background:transparent;border:0;cursor:pointer;width:44px;height:44px;padding:10px;}
  .nav-toggle span{display:block;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s;}
  .nav-toggle span + span{margin-top:5px;}

  /* ---- Hero ---- */
  .hero{position:relative;background:var(--ink);color:var(--wax);overflow:hidden;}
  .hero::before{content:"";position:absolute;inset:0;z-index:0;
    background:linear-gradient(135deg,#6b4e17,#2b2118) center/cover no-repeat;
    filter:brightness(1.18) saturate(1.42) contrast(1.07);}
  .hero .scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(28,20,10,.8) 0%,rgba(33,25,16,.5) 52%,rgba(33,25,16,.22) 100%);}
  .photo{background-position:center;background-size:cover;background-repeat:no-repeat;}
  .hero .wrap{position:relative;z-index:2;padding:96px 28px 104px;}
  .hero .eyebrow{font-family:'Helvetica Neue',Arial,sans-serif;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--amber);margin-bottom:20px;}
  .hero h1{font-size:50px;line-height:1.08;max-width:780px;font-weight:bold;letter-spacing:-.01em;}
  .hero p.lede{font-size:19px;max-width:600px;margin-top:22px;color:#f0e6d2;}
  .hero .cta{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap;}

  /* ---- Section scaffolding ---- */
  section{padding:74px 0;}
  .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:36px;flex-wrap:wrap;}
  .kicker{font-family:'Helvetica Neue',Arial,sans-serif;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--honey-deep);margin-bottom:10px;}
  h2.sec{font-size:34px;letter-spacing:-.01em;}
  .sec-head a.more{font-family:'Helvetica Neue',Arial,sans-serif;font-size:13.5px;letter-spacing:.04em;color:var(--honey-deep);border-bottom:1px solid var(--honey);padding-bottom:2px;}

  /* ---- Featured + blog flow ---- */
  .blog{background:var(--wax);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  .feature{display:grid;grid-template-columns:1.15fr 1fr;gap:0;background:var(--cream);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:46px;box-shadow:0 18px 40px -28px rgba(70,45,10,.4);}
  .feature .img{min-height:340px;position:relative;}
  .feature .img svg{position:absolute;inset:0;width:100%;height:100%;}
  .feature .body{padding:42px 44px;display:flex;flex-direction:column;justify-content:center;}
  .tag{display:inline-block;font-family:'Helvetica Neue',Arial,sans-serif;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--maple);font-weight:600;margin-bottom:14px;}
  .feature h3{font-size:29px;line-height:1.2;margin-bottom:14px;}
  .feature p{color:var(--ink-soft);font-size:16.5px;margin-bottom:20px;}
  .meta{font-family:'Helvetica Neue',Arial,sans-serif;font-size:13px;color:#8a7757;letter-spacing:.02em;}
  .readlink{font-family:'Helvetica Neue',Arial,sans-serif;font-size:14px;color:var(--honey-deep);font-weight:600;margin-top:18px;display:inline-block;}
  .readlink:hover{color:var(--maple);}

  .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
  .card{background:var(--cream);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s;}
  .card:hover{transform:translateY(-4px);box-shadow:0 22px 40px -26px rgba(70,45,10,.5);}
  .card .img{height:188px;position:relative;}
  .card .img svg{position:absolute;inset:0;width:100%;height:100%;}
  .card .body{padding:24px 24px 28px;display:flex;flex-direction:column;flex:1;}
  .card h4{font-size:20px;line-height:1.25;margin-bottom:10px;}
  .card p{color:var(--ink-soft);font-size:15px;margin-bottom:16px;flex:1;}

  /* ---- Pillars ---- */
  .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
  .pill{padding:30px 28px;border:1px solid var(--line);border-radius:10px;background:var(--cream);}
  .pill .ic{width:46px;height:46px;margin-bottom:16px;}
  .pill h3{font-size:20px;margin-bottom:8px;}
  .pill p{color:var(--ink-soft);font-size:15.5px;}

  /* ---- Membership strip ---- */
  .join{background:linear-gradient(135deg,var(--honey) 0%,var(--honey-deep) 100%);color:#fff;border-radius:14px;padding:54px 56px;display:grid;grid-template-columns:1.4fr 1fr;gap:30px;align-items:center;position:relative;overflow:hidden;}
  .join .combs{position:absolute;right:-40px;top:-40px;width:320px;height:320px;opacity:.18;}
  .join h2{font-size:32px;line-height:1.15;margin-bottom:12px;position:relative;}
  .join p{font-size:16.5px;color:#fff6e4;position:relative;max-width:520px;}
  .join .act{text-align:right;position:relative;}
  .join .btn{background:#fff;border-color:#fff;color:var(--honey-deep);}
  .join .btn:hover{background:var(--wax);}
  .join .price{font-family:'Helvetica Neue',Arial,sans-serif;font-size:13px;letter-spacing:.04em;color:#fff7e6;margin-top:12px;}

  /* ---- Directors roster ---- */
  .directors h2,.directors h3{font-family:Georgia,serif;color:var(--ink);margin:30px 0 6px;}
  .directors h3{font-size:21px;}
  .directors ul{list-style:none;padding:0;margin:18px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;}
  .directors ul li{border:1px solid var(--line);border-radius:10px;background:var(--cream);padding:18px 20px;font-size:16px;color:var(--ink);}

  /* ---- Footer ---- */
  footer.site{background:var(--ink);color:#d9c9ac;padding:60px 0 34px;font-family:'Helvetica Neue',Arial,sans-serif;}
  footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px;}
  footer.site h5{color:#fff;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px;}
  footer.site a,footer.site p{font-size:14px;color:#cbb892;line-height:1.9;}
  footer.site a:hover{color:var(--amber);}
  footer.site .brand .name{color:#fff;font-family:Georgia,serif;}
  footer.site .brand .name small{color:var(--amber);}
  .legal{border-top:1px solid #4a3a26;margin-top:42px;padding-top:22px;font-size:12.5px;color:#9c896a;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}

  @media(max-width:900px){
    .feature{grid-template-columns:1fr;}
    .feature .img{min-height:230px;}
    .grid{grid-template-columns:1fr 1fr;}
    .pillars{grid-template-columns:1fr;}
    .join{grid-template-columns:1fr;}
    .join .act{text-align:left;}
    .hero h1{font-size:36px;}
    footer.site .cols{grid-template-columns:1fr 1fr;}

    /* Mobile navigation */
    .nav-toggle{display:block;}
    nav.main{
      position:absolute;top:92px;left:0;right:0;
      flex-direction:column;align-items:flex-start;gap:0;
      background:var(--cream);border-bottom:1px solid var(--line);
      box-shadow:0 18px 30px -20px rgba(70,45,10,.5);
      padding:8px 0;display:none;
    }
    body.nav-open nav.main{display:flex;}
    nav.main a{width:100%;padding:13px 28px;border-bottom:1px solid var(--line);}
    nav.main a:hover,nav.main .current-menu-item > a{border-bottom-color:var(--line);background:var(--wax);}
    nav.main a.btn{margin:12px 28px;width:auto;text-align:center;border-radius:30px;border:1px solid var(--gold-deep);}
    body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
    body.nav-open .nav-toggle span:nth-child(2){opacity:0;}
    body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  }
  @media(max-width:600px){
    .grid{grid-template-columns:1fr;}
    .util .left{display:none;}
    .hero h1{font-size:30px;}
  }
  .brandlogo{height:54px;width:auto;display:block;}

/* --- WordPress helpers --- */
.post-content{max-width:760px;margin:0 auto;}
.post-content p{font-size:17px;color:var(--ink-soft);margin-bottom:18px;}
.post-content h2,.post-content h3{font-family:Georgia,serif;color:var(--ink);margin:26px 0 10px;}
.post-content img{max-width:100%;height:auto;border-radius:8px;}
.post-content a{color:var(--honey-deep);text-decoration:underline;}
.article-hero{height:300px;background:var(--ink) center/cover no-repeat;}
.article-wrap{padding:48px 0 70px;}
.article-title{font-family:Georgia,serif;font-size:38px;line-height:1.15;max-width:860px;margin:0 auto 8px;}
.article-meta{font-family:'Helvetica Neue',Arial,sans-serif;font-size:13px;color:#8a7757;max-width:860px;margin:0 auto 26px;text-transform:uppercase;letter-spacing:.04em;}
.dl-list{list-style:none;padding:0;margin:24px 0;display:grid;gap:14px;}
.dl-list li{border:1px solid var(--line);border-radius:10px;background:var(--cream);}
.pagenav{max-width:760px;margin:34px auto 0;display:flex;justify-content:space-between;font-family:'Helvetica Neue',Arial,sans-serif;font-size:14px;}
.pagenav a{color:var(--honey-deep);font-weight:600;}
.card .body h4 a, .feature h3 a{color:inherit;}

.custom-logo{height:54px;width:auto;display:block;}

/* --- Brand colours usable as block backgrounds/text on Pages & Posts --- */
/* (these match the palette registered in functions.php) */
.has-honey-background-color{background-color:#e0a81f!important;}
.has-honey-color{color:#e0a81f!important;}
.has-honey-deep-background-color{background-color:#c08a10!important;}
.has-honey-deep-color{color:#c08a10!important;}
.has-amber-background-color{background-color:#f6cb52!important;}
.has-amber-color{color:#f6cb52!important;}
.has-wax-background-color{background-color:#fbf4e6!important;}
.has-wax-color{color:#fbf4e6!important;}
.has-cream-background-color{background-color:#fffdf8!important;}
.has-cream-color{color:#fffdf8!important;}
.has-ink-background-color{background-color:#2b2118!important;}
.has-ink-color{color:#2b2118!important;}
.has-maple-background-color{background-color:#a8341f!important;}
.has-maple-color{color:#a8341f!important;}
.has-honey-gradient-background{background:linear-gradient(135deg,#e0a81f 0%,#c08a10 100%)!important;}
.has-gold-gradient-background{background:linear-gradient(180deg,#f6ce5a 0%,#dca01c 100%)!important;}

/* Give a coloured group/cover block comfortable padding by default */
.post-content .wp-block-group.has-background,
.post-content .wp-block-cover{border-radius:12px;}
.post-content .wp-block-group.has-background{padding:28px 30px;}

/* --- Wide / Full alignment so any block (incl. Columns) can break out --- */
/* Works even inside the narrow reading column on Pages & Posts. */
.post-content > .alignwide{
  width:min(1080px, calc(100vw - 40px));
  max-width:none;margin-left:50%;transform:translateX(-50%);
}
.post-content > .alignfull{
  width:100vw;max-width:100vw;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
}
/* Keep full-width Columns content off the very edge of the screen */
.post-content > .wp-block-columns.alignfull,
.fullwidth-content > .wp-block-columns.alignfull{padding-left:28px;padding-right:28px;}

/* --- Uniform circular head-shots (Directors / team) --- */
/* Automatic on the Directors page template. On any other page, add the CSS
   class  director-cards  to your Columns block (block > Advanced >
   Additional CSS class(es)) and every photo inside becomes an identical
   circle, cropped to fill - no matter the original size. */
.directors .wp-block-image img,
.directors figure img,
.director-cards img{
  width:200px;height:200px;max-width:100%;
  object-fit:cover;border-radius:50%!important;
  display:block;margin:0 auto 14px;
}
.director-cards .wp-block-column{align-items:center;}

/* Make sure the Image block's "Rounded" style stays a true circle on the live
   page (the theme's default image rounding must not flatten it to a square). */
.post-content .wp-block-image.is-style-rounded img,
.fullwidth-content .wp-block-image.is-style-rounded img{border-radius:9999px;}

/* --- Full-width page template (Template: Full width) --- */
.fw-head{padding:42px 0 0;}
.fw-head .article-title{margin:0;max-width:1140px;}
.fullwidth-content{padding:34px 0 0;}
.fullwidth-content > *{max-width:760px;margin-left:auto;margin-right:auto;margin-bottom:18px;padding-left:28px;padding-right:28px;}
.fullwidth-content > .alignwide{max-width:1140px;}
.fullwidth-content > .alignfull{max-width:none;width:100%;margin:0 0 18px;padding-left:0;padding-right:0;}
.fullwidth-content > .alignfull:last-child{margin-bottom:0;}
.fullwidth-content p{font-size:17px;color:var(--ink-soft);line-height:1.7;}
.fullwidth-content h2,.fullwidth-content h3{font-family:Georgia,serif;color:var(--ink);margin:26px 0 10px;}
.fullwidth-content img{max-width:100%;height:auto;border-radius:8px;}
.fullwidth-content a{color:var(--honey-deep);text-decoration:underline;}
/* a full-bleed coloured band: keep its inner text readable & centred */
.fullwidth-content > .alignfull.has-background,
.fullwidth-content > .wp-block-cover.alignfull{padding-top:60px;padding-bottom:60px;}