/*
Theme Name: Dutchies
Theme URI: https://dutchies.amsterdam
Author: Vondel Foods LLC
Author URI: https://vondelfoods.com
Description: Full Site Editing block theme for Dutchies — the snack brand that's Made for Good Times. Anton headlines, Montserrat body, a vibrant flavor-coded color system, and editable brand patterns. Built on Brand Style Guide v2.0.
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
Version: 2.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dutchies
Tags: full-site-editing, block-patterns, food-and-drink, custom-colors, custom-logo, editor-style
*/

/*
  Most styling lives in theme.json (colors, fonts, spacing, buttons).
  This file holds only brand graphics and small utilities that theme.json
  can't express. Loaded on the front end and in the editor (see functions.php).
*/

/* ---- Sunburst ray background utility ---- */
.dutchies-sunburst{ position:relative; overflow:hidden; isolation:isolate; }
.dutchies-sunburst::before{
  content:""; position:absolute; inset:-40% -25%; z-index:-1; opacity:.16;
  background:repeating-conic-gradient(from 0deg at 50% 32%, #ffffff 0deg 6deg, transparent 6deg 12deg);
  pointer-events:none;
}
/* darker rays on light/yellow fields */
.dutchies-sunburst.is-dark-rays::before{
  opacity:.20;
  background:repeating-conic-gradient(from 0deg at 50% 32%, rgba(0,0,0,.22) 0deg 6deg, transparent 6deg 12deg);
}

/* ---- Product image gentle float ---- */
@media (prefers-reduced-motion: no-preference){
  .dutchies-float img{ animation:dutchies-float 4s ease-in-out infinite; }
  @keyframes dutchies-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
}

/* ---- Wordmark logo (text fallback when no image logo set) ---- */
.dutchies-wordmark{
  font-family:"Montserrat",sans-serif; font-weight:800; letter-spacing:-.02em;
  text-transform:lowercase; line-height:1; display:inline-block;
}
.dutchies-wordmark .tm{ font-size:.4em; vertical-align:super; font-weight:700; }

/* ---- Flavor accent helper for headings inside a colored band ---- */
.has-anton-display{ font-family:"Anton",sans-serif !important; text-transform:uppercase; line-height:.95; }

/* ---- Wordmark: add the brand trailing period to the site title ---- */
/* Keeps the WP site title clean ("dutchies") while displaying "dutchies." per the brand mark. */
.wp-block-site-title a::after{ content:"."; color:currentColor; }

/* ---- Pill tag ---- */
.dutchies-tag{
  display:inline-block; border-radius:100px; padding:5px 14px; font-weight:700;
  font-size:12px; letter-spacing:.06em; text-transform:uppercase;
}

/* ---- POSM poster gallery frames ---- */
.dutchies-poster img{ border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.18); }

/* ---- FAQ accordion (core/details) ---- */
.dutchies-faq .wp-block-details{
  background:#fff; border:2px solid var(--wp--preset--color--ink,#1B1B1B);
  border-radius:14px; padding:16px 22px; margin-bottom:14px;
  box-shadow:0 4px 14px rgba(0,0,0,.06);
}
.dutchies-faq .wp-block-details > summary{
  cursor:pointer; list-style:none; font-weight:700;
  font-family:"Montserrat",sans-serif; color:var(--wp--preset--color--ink,#1B1B1B);
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.dutchies-faq .wp-block-details > summary::-webkit-details-marker{ display:none; }
.dutchies-faq .wp-block-details > summary::after{
  content:"+"; font-weight:800; font-size:1.4em; line-height:1;
  color:var(--wp--preset--color--orange,#FF7A00);
}
.dutchies-faq .wp-block-details[open] > summary::after{ content:"\2013"; }
.dutchies-faq .wp-block-details[open] > summary{ margin-bottom:10px; }

/* ============================================================
   Good Times Wall — "Pick Your Good Time" carousel
   Content lives in the pattern (editable blocks). Behaviour is
   enabled by JS adding .gtw--ready; without JS it degrades to a
   clean, editable horizontal row (good in the editor).
   ============================================================ */
.gtw{ --gtw-orange:#FF7A00; --gtw-ink:#1B1B1B; --gtw-cream:#FFF6E9; --gtw-card:clamp(240px,58vw,420px); --gtw-radius:24px; }
.gtw__head{ text-align:center; max-width:760px; margin:0 auto 1.6rem; }
.gtw__eyebrow{ margin:0 0 .4rem; font-size:.8rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gtw-orange); }
.gtw__intro{ max-width:60ch; margin-inline:auto; }

.gtw__viewport{ position:relative; }
.gtw__track{
  display:flex; gap:clamp(14px,2vw,28px);
  overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding-block:18px; padding-inline:max(1.25rem, calc((100% - var(--gtw-card)) / 2));
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.gtw__track::-webkit-scrollbar{ display:none; }
.gtw--ready .gtw__track{ cursor:grab; }
.gtw--ready .gtw__track.is-dragging{ cursor:grabbing; scroll-behavior:auto; }
.gtw__track:focus-visible{ outline:3px solid var(--gtw-orange); outline-offset:4px; border-radius:8px; }

.gtw__card{
  --s:.9; --y:0; --r:0;
  position:relative; flex:0 0 var(--gtw-card); width:var(--gtw-card); aspect-ratio:4/5;
  scroll-snap-align:center; border-radius:var(--gtw-radius); overflow:hidden; background:#e9ddc7;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  transition:transform .45s cubic-bezier(.2,.8,.2,1), opacity .45s ease, box-shadow .45s ease;
}
/* Effects only once JS is ready (so the editor shows full, editable cards) */
.gtw--ready .gtw__card{ opacity:.6; transform:translateY(var(--y)) rotate(var(--r)) scale(var(--s)); transform-origin:center bottom; }
.gtw--ready .gtw__card.is-active{ --s:1; opacity:1; box-shadow:0 22px 50px rgba(226,92,0,.28); }
.gtw__card .gtw__img{ margin:0; height:100%; }
.gtw__card .gtw__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.gtw__cap{
  position:absolute; inset:auto 0 0 0; padding:1.3rem 1.1rem 1rem;
  background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.3) 55%, transparent);
}
.gtw__tag{
  display:inline-block; margin:0 0 .4rem; padding:4px 12px; border-radius:100px;
  background:var(--gtw-orange); color:#fff; font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.gtw__cardtitle{ margin:0; color:#fff; line-height:.98; font-size:clamp(1.2rem,2.4vw,1.85rem); }

@media (hover:hover) and (prefers-reduced-motion: no-preference){
  .gtw--ready .gtw__card:hover{ --y:-10px; --r:-1.4deg; cursor:pointer; }
  .gtw--ready .gtw__card.is-active:hover{ --y:-8px; --r:-1deg; }
}

/* nav buttons (created by JS) */
.gtw__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:48px; height:48px; border:none; border-radius:50%; cursor:pointer;
  background:var(--gtw-orange); color:#fff; font-size:1.7rem; line-height:1;
  box-shadow:0 6px 18px rgba(226,92,0,.4); transition:transform .2s ease, background .2s ease;
}
.gtw__nav:hover{ background:#E25C00; transform:translateY(-50%) scale(1.08); }
.gtw__nav:focus-visible{ outline:3px solid var(--gtw-ink); outline-offset:2px; }
.gtw__nav--prev{ left:max(.5rem,2vw); }
.gtw__nav--next{ right:max(.5rem,2vw); }

/* pills (created by JS) */
.gtw__pills{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-top:1.6rem; padding:0 1.25rem; }
.gtw__pill{
  border:2px solid var(--gtw-ink); background:#fff; color:var(--gtw-ink); border-radius:100px;
  padding:.55rem 1.2rem; cursor:pointer; font:inherit; font-weight:700; font-size:.85rem;
  text-transform:uppercase; letter-spacing:.04em; transition:background .2s ease, color .2s ease, transform .2s ease;
}
.gtw__pill:hover{ transform:translateY(-2px); }
.gtw__pill.is-active{ background:var(--gtw-orange); border-color:var(--gtw-orange); color:#fff; }
.gtw__pill:focus-visible{ outline:3px solid var(--gtw-orange); outline-offset:2px; }

@media (max-width:680px){
  .gtw{ --gtw-card:min(82vw,360px); }
  .gtw__nav{ width:42px; height:42px; font-size:1.4rem; }
  .gtw__pills{ flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; scrollbar-width:none; }
  .gtw__pills::-webkit-scrollbar{ display:none; }
  .gtw__pill{ flex:0 0 auto; }
}

@media (prefers-reduced-motion: reduce){
  .gtw__track{ scroll-behavior:auto; }
  .gtw--ready .gtw__card{ transform:none; opacity:1; }
  .gtw--ready .gtw__card.is-active{ box-shadow:0 12px 30px rgba(0,0,0,.18); }
  .gtw__nav{ transition:none; }
}

/* ---- Make core button text uppercase + tracked (brand voice) ---- */
.wp-block-button__link{ text-transform:uppercase; letter-spacing:.04em; }

/* ---- Guarantee full-bleed for alignfull sections (theme-independent) ---- */
.wp-site-blocks .alignfull{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
html, body{ overflow-x:hidden; }