/*
Theme Name: Dates With Benefits
Theme URI: https://dateswithbenefits.com.au
Description: Custom theme for Dates With Benefits. Full-screen hero built on a looping product film, single-typeface system (Mulish) with the script "with" retained in the lockup. Child theme of Storefront - all other pages inherit Storefront and WooCommerce styling.
Author: Dates With Benefits
Version: 2.1.0
Template: storefront
Text Domain: dwb-child
*/

  :root{
    color-scheme: light;
    --bg:#F5E7D6;
    --surface:#FFFBF4;
    --surface-2:#EFDCC3;
    --ink:#432A1D;
    --ink-soft:#8A6650;
    --rust:#8B4A34;
    --rust-deep:#6E3A28;
    --rose:#C28974;
    --tan:#D5B49C;
    --sand:#E7CFBA;
    --line: rgba(67,42,29,0.16);
    --on-accent:#FBF3E9;
    --shadow: 0 24px 48px -28px rgba(67,42,29,0.45);
  }
  /* Brand palette is locked to the light/cream scheme so every visitor sees
     the same look as the packaging, regardless of their device dark-mode setting. */

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'Mulish', ui-sans-serif, system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  a{ color:inherit; }
  img{ max-width:100%; }

  .display{
    font-family:'Mulish', ui-sans-serif, system-ui, sans-serif;
    font-weight:300;
    letter-spacing:-0.025em;
    text-wrap:balance;
  }
  .script{
    font-family:'Beau Rivage', cursive;
    font-weight:400;
  }
  .eyebrow{
    font-family:'Mulish', sans-serif;
    text-transform:uppercase;
    letter-spacing:0.16em;
    font-size:0.72rem;
    font-weight:600;
    color:var(--ink-soft);
  }

  .wrap{ max-width:1180px; margin-inline:auto; padding-inline: clamp(20px, 5vw, 64px); }

  /* ---------- Nav ---------- */
  header.nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding-block: 22px;
  }
  .brandmark{
    display:flex;
    align-items:baseline;
    gap:0.18em;
    font-size:1.15rem;
    line-height:1;
    text-decoration:none;
    color:var(--ink);
    font-weight:500;
    letter-spacing:-0.012em;
  }
  /* Same optical treatment as the hero headline, scaled down: the script
     sits larger than its neighbours and on their baseline, so the lockup
     reads identically in the nav, the footer and the hero. */
  .brandmark .script{
    font-size:1.72em;
    font-weight:400;
    line-height:0;
    color:var(--rust);
    letter-spacing:0;
    padding-inline:0.06em;
    position:relative;
    top:0.06em;
  }
  nav.links{
    display:flex;
    gap:clamp(16px,3vw,34px);
    align-items:center;
    font-size:0.92rem;
  }
  nav.links a{ text-decoration:none; color:var(--ink-soft); font-weight:500; transition:color .2s ease; }
  nav.links a:hover, nav.links a:focus-visible{ color:var(--rust); }
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0.85em 1.6em;
    border-radius:999px;
    font-size:0.92rem;
    font-weight:600;
    text-decoration:none;
    border:1px solid transparent;
    cursor:pointer;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
    white-space:nowrap;
  }
  .btn:focus-visible{ outline:2px solid var(--rust); outline-offset:3px; }
  .btn-primary{ background:var(--rust); color:var(--on-accent); box-shadow:var(--shadow); }
  .btn-primary:hover{ transform:translateY(-2px); }
  .btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
  .btn-ghost:hover{ border-color:var(--rust); color:var(--rust); }

  /* ---------- Hero: product film plate ---------- */
  .dwb-hero{
    position:relative;
    display:flex;
    align-items:center;
    min-height:100vh;
    min-height:100svh;
    overflow:hidden;
    isolation:isolate;
    padding-block: clamp(96px, 14vh, 160px);
    background:
      radial-gradient(74% 58% at 78% 16%, color-mix(in srgb, var(--rose) 38%, transparent), transparent 70%),
      linear-gradient(168deg, color-mix(in srgb, var(--rose) 13%, var(--bg)) 0%, var(--bg) 58%);
  }

  /* The film sits furthest back and is deliberately held down in contrast.
     It is atmosphere, not subject: --plate-op is the single dial for how
     present it is, and the scrim below protects the reading column. */
  .dwb-hero__plate{
    position:absolute;
    inset:0;
    z-index:0;
    overflow:hidden;
    pointer-events:none;
    background:var(--bg);
  }
  .dwb-hero__plate > *{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:var(--plate-pos, 56%) 50%;
    transform:translate3d(0, var(--plate-y, 0px), 0) scale(1.05);
    will-change:transform;
  }
  .dwb-hero__poster{
    opacity:var(--plate-op, 0.92);
    transition:opacity .7s ease;
  }
  .dwb-hero__video{
    opacity:0;
    transition:opacity .7s ease;
  }
  .dwb-hero__plate.is-playing .dwb-hero__poster{ opacity:0; }
  .dwb-hero__plate.is-playing .dwb-hero__video{ opacity:var(--plate-op, 0.92); }


  /* Lifts the reading column to near-solid cream, and lands the foot of the
     hero on the page colour so it meets the next section without a seam. */
  .dwb-hero__scrim{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:
      linear-gradient(96deg,
        color-mix(in srgb, var(--bg) 62%, transparent) 0%,
        color-mix(in srgb, var(--bg) 30%, transparent) 34%,
        transparent 56%),
      linear-gradient(180deg,
        color-mix(in srgb, var(--bg) 62%, transparent) 0%,
        transparent 15%,
        transparent 72%,
        var(--bg) 100%);
  }

  .dwb-hero__inner{ position:relative; z-index:2; width:100%; }
  .dwb-hero__content{
    max-width:min(620px, 92%);
    transform:translate3d(0, var(--sy, 0px), 0);
    opacity:var(--so, 1);
    will-change:transform, opacity;
  }

  .dwb-hero__title{
    font-family:'Mulish', ui-sans-serif, system-ui, sans-serif;
    font-weight:300;
    font-size:clamp(3.05rem, 7.4vw, 5.9rem);
    line-height:0.98;
    letter-spacing:-0.032em;
    margin:0 0 0.34em;
    color:var(--ink);
    text-wrap:balance;
  }
  .dwb-hero__title .script{
    font-family:'Beau Rivage', cursive;
    font-weight:400;
    font-size:1.24em;
    line-height:0.8;
    color:var(--rust);
    padding-inline:0.04em;
  }
  .dwb-hero__tagline{
    font-family:'Mulish', ui-sans-serif, system-ui, sans-serif;
    font-weight:500;
    font-size:clamp(1.12rem, 2.1vw, 1.55rem);
    line-height:1.2;
    letter-spacing:-0.01em;
    color:var(--rust);
    margin:0 0 0.7em;
  }
  .dwb-hero__lede{
    font-size:clamp(1rem, 1.15vw, 1.09rem);
    line-height:1.6;
    color:var(--ink-soft);
    max-width:42ch;
    margin:0 0 2.1em;
  }
  .dwb-hero__cta{ display:flex; flex-wrap:wrap; gap:14px; }

  .dwb-hero .btn{
    padding:1.02em 1.95em;
    font-size:0.97rem;
    letter-spacing:0.01em;
  }
  .dwb-hero .btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 26px 44px -22px rgba(67, 42, 29, 0.66);
  }
  .dwb-hero .btn-ghost{
    background:color-mix(in srgb, var(--surface) 70%, transparent);
    backdrop-filter:blur(6px);
  }
  .dwb-hero .btn-ghost:hover{
    border-color:var(--rust);
    color:var(--rust);
    transform:translateY(-2px);
  }

  /* ---------- Reduced motion: the still frame, held ---------- */
  @media (prefers-reduced-motion: reduce){
    .dwb-hero__video{ display:none; }
    .dwb-hero__poster{ opacity:var(--plate-op, 0.92); }
    .dwb-hero__plate > *{ transform:scale(1.06); }
    .dwb-hero__content{ transform:none; opacity:1; }
  }

  @media (max-width: 1024px){
    .dwb-hero__content{ max-width:min(560px, 96%); }
    .dwb-hero{ --plate-pos:62%; }
  }
  @media (max-width: 640px){
    .dwb-hero{
      min-height:92svh;
      padding-block:clamp(88px, 16vh, 132px);
      --plate-op:0.8;
    }
    .dwb-hero__content{ max-width:100%; }
    .dwb-hero__lede{ max-width:34ch; }
    /* phones: the film becomes a band above the copy, never behind it */
    .dwb-hero{ --plate-pos:74%; }
    .dwb-hero__plate{
      bottom:auto;
      height:38%;
      -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 46%, transparent 100%);
      mask-image:linear-gradient(180deg, #000 0%, #000 46%, transparent 100%);
    }
    /* copy is centred in the viewport on phones, so protect the middle */
    .dwb-hero__scrim{
      background:linear-gradient(180deg,
        color-mix(in srgb, var(--bg) 55%, transparent) 0%,
        transparent 22%,
        color-mix(in srgb, var(--bg) 70%, transparent) 40%,
        var(--bg) 52%);
    }
    .dwb-hero__cta{ gap:11px; }
    .dwb-hero .btn{ flex:1 1 auto; justify-content:center; }
  }

  /* ---------- Attributes band ---------- */
  .attrs{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    border-radius:20px;
    overflow:hidden;
    margin-block: clamp(48px,7vw,84px);
  }
  .attr{
    background:var(--surface);
    padding: clamp(22px,3vw,32px) clamp(16px,2.4vw,26px);
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .attr svg{ width:26px; height:26px; color:var(--rust); }
  .attr h3{ margin:0; font-family:'Mulish', sans-serif; font-weight:600; font-size:1.02rem; letter-spacing:-0.006em; }
  .attr p{ margin:0; font-size:0.86rem; color:var(--ink-soft); line-height:1.5; }

  /* ---------- Section heading ---------- */
  .section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
    margin-bottom: clamp(28px,4vw,40px);
    flex-wrap:wrap;
  }
  .section-head h2{
    margin:0.2em 0 0;
    font-weight:400;
    font-size:clamp(1.9rem,3.4vw,2.7rem);
  }

  /* ---------- Flavors ---------- */
  .flavors{ padding-block: clamp(24px,4vw,40px); }
  .flavor-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
  }
  .flavor{
    position:relative;
    border-radius:22px;
    padding:26px 22px 22px;
    min-height:240px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    border:1px solid var(--line);
    overflow:hidden;
    isolation:isolate;
  }
  .flavor::before{
    content:"";
    position:absolute; inset:0;
    background: var(--flavor-tint);
    opacity:0.9;
    z-index:-2;
  }
  .flavor::after{
    content:"";
    position:absolute; inset:0;
    background: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,0.35), transparent 55%);
    z-index:-1;
  }
  .flavor{
    text-decoration:none;
    color:var(--flavor-ink);
    transition:transform .25s ease, box-shadow .25s ease;
  }
  a.flavor:hover,
  a.flavor:focus-visible{
    transform:translateY(-4px);
    box-shadow:0 26px 44px -26px rgba(52,30,18,0.55);
  }
  a.flavor:focus-visible{ outline:2px solid var(--rust); outline-offset:3px; }

  .flavor h3{
    margin:0;
    font-family:'Mulish', sans-serif;
    font-weight:600;
    font-size:1.24rem;
    letter-spacing:-0.012em;
    color:var(--flavor-ink);
  }
  /* the script line is the flourish that carries each card */
  .flavor__tagline{
    margin:0.06em 0 0.5em;
    font-size:1.78rem;
    line-height:1;
    color:var(--flavor-ink);
    opacity:0.92;
  }
  .flavor__short{
    margin:0;
    font-size:0.84rem;
    line-height:1.5;
    color:var(--flavor-ink);
    opacity:0.76;
  }
  .flavor__more{
    margin-top:14px;
    font-size:0.7rem;
    font-weight:600;
    letter-spacing:0.13em;
    text-transform:uppercase;
    color:var(--flavor-ink);
    opacity:0.55;
    transition:opacity .2s ease;
  }
  a.flavor:hover .flavor__more{ opacity:1; }

  .flavor-grid--index{ margin-top:clamp(28px,4vw,44px); }

  /* ---------- Wholesale band ---------- */
  .wholesale{
    margin-block: clamp(56px,7vw,90px);
    border-radius:26px;
    background:var(--rust);
    color:var(--on-accent);
    padding:clamp(36px,6vw,64px);
    display:grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap:32px;
    align-items:center;
  }
  .wholesale h2{
    margin:0 0 0.4em;
    font-weight:400;
    font-size:clamp(1.7rem,3vw,2.3rem);
  }
  .wholesale p{ margin:0; opacity:0.88; max-width:46ch; line-height:1.6; }
  .wholesale .btn-ghost{ border-color:color-mix(in srgb, var(--on-accent) 50%, transparent); color:var(--on-accent); }
  .wholesale .btn-ghost:hover{ border-color:var(--on-accent); }
  .wholesale-actions{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
  .wholesale-note{ font-size:0.82rem; opacity:0.72; }

  /* ---------- Inner pages ---------- */
  .skip-link{
    position:absolute; left:-9999px;
    background:var(--surface); color:var(--ink);
    padding:10px 16px; border-radius:4px; z-index:100;
  }
  .skip-link:focus{ left:16px; top:16px; }

  .page-head{
    padding-block: clamp(48px,7vw,84px) clamp(18px,3vw,28px);
    background:
      radial-gradient(64% 120% at 88% 0%, color-mix(in srgb, var(--rose) 32%, transparent), transparent 72%),
      linear-gradient(180deg, color-mix(in srgb, var(--rose) 10%, var(--bg)) 0%, var(--bg) 100%);
  }
  .page-head h1{
    margin:0.08em 0 0;
    font-size:clamp(2.2rem,5.4vw,3.5rem);
    line-height:1.02;
    color:var(--ink);
  }
  .page-head__tagline{
    margin:0.1em 0 0;
    font-size:clamp(1.95rem,4.6vw,3rem);
    line-height:1;
    color:var(--rust);
  }

  .page-body{ padding-block: clamp(24px,4vw,40px) clamp(56px,7vw,88px); }
  .page-body > *{ max-width:68ch; }
  .page-body > .flavor-grid{ max-width:none; }
  .page-body h2{
    font-family:'Mulish', sans-serif;
    font-weight:600;
    font-size:clamp(1.2rem,2.3vw,1.45rem);
    letter-spacing:-0.012em;
    margin:2.2em 0 0.5em;
  }
  .page-body h2:first-child{ margin-top:0; }
  .page-body p{ margin:0 0 1.05em; color:var(--ink-soft); line-height:1.72; }
  .page-body a{ color:var(--rust); text-underline-offset:3px; }

  /* unwritten copy should look unwritten */
  .page-body .dwb-todo{
    border-left:2px solid color-mix(in srgb, var(--rust) 45%, transparent);
    background:color-mix(in srgb, var(--rust) 5%, transparent);
    padding:12px 16px;
    border-radius:2px;
    color:var(--ink-soft);
    font-style:italic;
  }

  /* ---------- Footer ---------- */
  .site-footer{
    padding-block: clamp(40px,6vw,64px) clamp(44px,6vw,72px);
    border-top:1px solid var(--line);
  }
  .foot-grid{
    display:grid;
    grid-template-columns:1.6fr 1fr 1fr 1fr;
    gap:clamp(24px,4vw,48px);
    align-items:start;
  }
  .foot-grid h4{
    margin:0 0 0.75em;
    font-family:'Mulish', sans-serif;
    font-size:0.72rem;
    font-weight:600;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--ink);
  }
  .foot-grid a{
    display:block;
    text-decoration:none;
    color:var(--ink-soft);
    font-size:0.92rem;
    padding-block:3px;
    transition:color .2s ease;
  }
  .foot-grid a:hover{ color:var(--rust); }
  .foot-grid .brandmark{ margin-bottom:0.7em; }
  .foot-line{ margin:0; font-size:0.88rem; line-height:1.6; color:var(--ink-soft); }
  .foot-note{ display:block; margin-top:0.6em; font-size:0.8rem; color:var(--ink-soft); opacity:0.8; }

  @media (max-width: 900px){
    .attrs{ grid-template-columns:repeat(2,1fr); }
    .flavor-grid{ grid-template-columns:repeat(2,1fr); }
    .foot-grid{ grid-template-columns:1fr 1fr; }
    .wholesale{ grid-template-columns:1fr; }
  }
  @media (max-width: 640px){
    nav.links{ display:none; }
    .attrs{ grid-template-columns:1fr; }
    .flavor-grid{ grid-template-columns:1fr; }
    header.nav{ padding-block:16px; }
    .foot-grid{ grid-template-columns:1fr; gap:26px; }
  }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
  }