/*
Theme Name: Takali Brewing Co.
Author: Coffeepress Media
Description: Faithful port of the Takali Brewing Co. crowdfunding design (Phase 1). Built from the Claude Design source.
Version: 1.0.87
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: takali
*/

*{box-sizing:border-box}
  html{scroll-behavior:smooth;scroll-padding-top:90px}
  body{margin:0;background:#FFF6E6;font-family:'Work Sans',sans-serif;color:#1A1A1A;-webkit-font-smoothing:antialiased}
  img{display:block;max-width:100%}
  @keyframes floaty{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-12px) rotate(var(--r,0deg))}}
  @keyframes pulsedot{0%,100%{box-shadow:0 0 0 0 rgba(249,120,40,.55)}50%{box-shadow:0 0 0 12px rgba(249,120,40,0)}}
  @keyframes marchy{0%{background-position:0 0}100%{background-position:240px 0}}
  @keyframes spin{to{transform:rotate(360deg)}}

/* ===== generated :hover states (from design) ===== */
.hv1:hover{color:#F97828}
.hv2:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 #1A1A1A,0 6px 14px -8px rgba(249,120,40,.7)}
.hv3:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 #1A1A1A,0 8px 18px -10px rgba(249,120,40,.65)}
.hv4:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 #1A1A1A}
.hv5:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 #C9A84C}
.hv6:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 #1A1A1A}
.hv7:hover{filter:brightness(1.08)}
.hv8:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 #F5D100}
.hv9:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 #1A1A1A}
.hv10:hover{color:#F5D100}
.hv11:hover{filter:brightness(1.08)}
/* skip-to-content link: hidden until keyboard-focused */
.tk-skip{position:absolute;left:8px;top:-60px;z-index:500;background:#1A1A1A;color:#F5D100;border:2px solid #F5D100;border-radius:8px;padding:10px 16px;font:700 14px 'Work Sans',sans-serif;text-decoration:none;transition:top .15s}
.tk-skip:focus{top:8px}
.hv12:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.75)}

/* ===== button text in Anton (all CTA/button hover classes; keeps each button's inline size) ===== */
.hv2,.hv3,.hv4,.hv5,.hv6,.hv7,.hv8,.hv9,.hv11,.hv12{font-family:'Anton',sans-serif !important;font-weight:400 !important;letter-spacing:.01em;}

/* ===== header cart + account icon buttons (Phase 2 store affordances) ===== */
.tk-iconbtn{display:inline-flex;align-items:center;justify-content:center;position:relative;flex:none;width:44px;height:44px;background:#fff;border:3px solid #1A1A1A;border-radius:999px;box-shadow:3px 3px 0 #1A1A1A;color:#1A1A1A;text-decoration:none;transition:transform .15s,box-shadow .15s,color .15s;}
.tk-iconbtn:hover{transform:translate(3px,3px);box-shadow:0 0 0 #1A1A1A;color:#F97828;}
.tk-iconbtn svg{width:20px;height:20px;display:block;}
.tk-cartcount{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;padding:0 5px;background:#F97828;color:#fff;border:2px solid #1A1A1A;border-radius:999px;font:700 11px/1 'Work Sans',sans-serif;display:flex;align-items:center;justify-content:center;}
/* desktop: icons live in the right cluster next to Join the Club; mobile: surface them in the top bar */
.tk-mobile-icons{display:none;}
@media (max-width:767px){
  .tk-mobile-icons{display:flex;align-items:center;gap:10px;margin-left:auto;}
  .tk-navactions .tk-iconbtn{display:none;}
}

/* ===== self-hosted Anton (GDPR/perf — no Google CDN); falls back to Arial Black ===== */
@font-face{
  font-family:'Anton';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('assets/fonts/Anton-Regular.woff2') format('woff2'),
      url('assets/fonts/Anton-Regular.ttf') format('truetype');
}

/* ===== self-hosted Work Sans (body/UI font — everything that isn't an Anton heading); variable 100-900; GDPR/perf, no Google CDN ===== */
@font-face{
  font-family:'Work Sans';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('assets/fonts/WorkSans-Variable.woff2') format('woff2');
}

/* ===== self-hosted Constructio Grotesk — trial: applied to the section titles (formerly Anton); single weight 400; GDPR/perf, no Google CDN ===== */
@font-face{
  font-family:'Constructio Grotesk';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('assets/fonts/ConstructioGrotesk-Regular.woff2') format('woff2');
}

/* ===== campaign stats: balanced 2x2 on mobile/small screens; approved 4-across kept >=768px ===== */
@media (max-width:767px){
  .tk-stats{display:grid !important;grid-template-columns:1fr 1fr;}
}

/* ===== Crafts Village feature cards: 2-per-row on mobile/small screens; approved auto-fit kept >=768px ===== */
@media (max-width:767px){
  .tk-crafts{grid-template-columns:1fr 1fr !important;}
}

/* ===== Refer-a-friend card: centre it on mobile (stacked full-width column); left-aligned desktop kept ===== */
@media (max-width:767px){
  .tk-refcard{margin-left:auto;margin-right:auto;}
}

/* ===== mobile collapsible nav: hamburger below 768px; desktop nav unchanged (menu flows via display:contents) ===== */
.tk-navtoggle{display:none;}
.tk-navmenu{display:contents;}
@media (max-width:767px){
  .tk-navtoggle{
    display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex:none;
    width:46px;height:46px;padding:0;cursor:pointer;
    background:#F97828;border:3px solid #1A1A1A;border-radius:12px;box-shadow:3px 3px 0 #1A1A1A;
  }
  .tk-navtoggle span{display:block;width:22px;height:3px;background:#1A1A1A;border-radius:2px;transition:transform .2s ease,opacity .2s ease;}
  .tk-navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .tk-navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .tk-navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .tk-navmenu{display:none;}
  .tk-navmenu.open{display:flex;flex-direction:column;align-items:flex-start;gap:16px;flex-basis:100%;width:100%;padding:6px 0 10px;}
  .tk-navmenu.open .tk-links{flex-direction:column !important;align-items:flex-start !important;gap:16px;width:100%;}
}

/* ===== Our Story feature cards: 2x2 on mobile (single column was the default) ===== */
@media (max-width:767px){
  .tk-story{grid-template-columns:repeat(2,1fr) !important;}
}

/* ===== WooCommerce "store paused" holding page — brand it =====
   WooCommerce renders this block with its own Cardo/Inter fonts using !important, so the overrides need
   to match that weight. Scoped to the block so nothing else on the site is affected. */
.wp-block-woocommerce-coming-soon h1,
.wp-block-woocommerce-coming-soon h2,
.wp-block-woocommerce-coming-soon .has-cardo-font-family{
  font-family:'Anton',sans-serif !important;
  font-weight:400 !important;
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:1.02;
  color:#1A1A1A !important;
}
.wp-block-woocommerce-coming-soon h1{font-size:clamp(34px,6vw,64px) !important;}
.wp-block-woocommerce-coming-soon p,
.wp-block-woocommerce-coming-soon .has-inter-font-family{
  font-family:'Work Sans',sans-serif !important;
  color:#444 !important;
  font-size:clamp(15px,2vw,18px) !important;
  line-height:1.6;
}
.wp-block-woocommerce-coming-soon{background:#FFF6E6 !important;}

/* ===== "Become a Founder" submenu =====
   The parent stays a normal link to the tiers; the caret beside it opens the submenu. Desktop also
   opens on hover, but hover alone would strand touch and keyboard users, so the caret is the real
   control and hover is the shortcut. */
.tk-hasmenu{position:relative;display:inline-flex;align-items:center;gap:5px;}
.tk-submenu-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;padding:0;border:0;background:none;color:#1A1A1A;cursor:pointer;
  border-radius:4px;transition:transform .15s,color .15s;
}
.tk-submenu-toggle svg{width:11px;height:8px;display:block;}
.tk-submenu-toggle:hover{color:#F97828;}
.tk-submenu-toggle:focus-visible{outline:2px solid #F97828;outline-offset:2px;}
.tk-hasmenu.open .tk-submenu-toggle{transform:rotate(180deg);}
.tk-submenu{
  display:none;position:absolute;top:calc(100% + 12px);left:-14px;z-index:60;min-width:190px;
  background:#fff;border:3px solid #1A1A1A;border-radius:14px;box-shadow:5px 5px 0 #1A1A1A;
  padding:8px;
}
.tk-submenu a{
  display:block;padding:9px 12px;border-radius:9px;color:#1A1A1A;text-decoration:none;
  font:700 12px 'Work Sans',sans-serif;text-transform:uppercase;letter-spacing:1.1px;white-space:nowrap;
}
.tk-submenu a:hover{background:#FFF6E6;color:#F97828;}
.tk-hasmenu.open > .tk-submenu{display:block;}
@media (min-width:768px){
  /* Hover keeps the pointer path quick; the gap above is bridged by the padding so the menu doesn't
     vanish while the cursor travels to it. */
  .tk-hasmenu:hover > .tk-submenu,
  .tk-hasmenu:focus-within > .tk-submenu{display:block;}
  .tk-submenu::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px;}
}
@media (max-width:767px){
  /* In the stacked mobile menu a floating panel would overlay the links below it, so it expands inline. */
  .tk-hasmenu{display:flex;flex-wrap:wrap;width:100%;}
  .tk-submenu{position:static;display:none;width:100%;margin:10px 0 2px;box-shadow:3px 3px 0 #1A1A1A;}
  .tk-hasmenu.open > .tk-submenu{display:block;}
  .tk-submenu a{padding:11px 12px;}
}

/* ===== Founders Wall page: decorative art crowds the type on narrow screens, and the stat row needs
   to breathe once it wraps ===== */
@media (max-width:900px){
  .tk-wall-deco{display:none;}
}
@media (max-width:520px){
  .tk-wall-stats{gap:18px 32px;}
}

/* ===== readable content for WP pages (Privacy Policy etc.) rendered via page.php ===== */
.tk-page-content h2{font:400 clamp(22px,3vw,30px) 'Constructio Grotesk',sans-serif;letter-spacing:-.01em;text-transform:uppercase;margin:32px 0 10px;color:#1A1A1A}
.tk-page-content h3{font:800 17px 'Work Sans',sans-serif;margin:24px 0 8px;color:#1A1A1A}
.tk-page-content p{margin:0 0 16px}
/* Only plain prose lists — WooCommerce's own lists (notices, cart, account nav) all carry classes and
   must keep their own padding. Without :not([class]) this rule overrode the padding WooCommerce reserves
   for the icon on .woocommerce-error, so the icon printed on top of the message text. */
.tk-page-content ul:not([class]),.tk-page-content ol:not([class]){margin:0 0 16px;padding-left:22px}
.tk-page-content ul:not([class]) li,.tk-page-content ol:not([class]) li{margin:0 0 7px}
.tk-page-content a{color:#1d7a63;text-decoration:underline}
.tk-page-content strong{color:#1A1A1A}