/*
Theme Name: Dates With Benefits
Theme URI: https://dateswithbenefits.com.au
Description: Custom homepage theme for Dates With Benefits. Child theme of Storefront - the front page is a bespoke landing design, all other pages inherit Storefront and WooCommerce styling.
Author: Dates With Benefits
Version: 1.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:'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  a{ color:inherit; }
  img{ max-width:100%; }

  .display{
    font-family:'Fraunces', ui-serif, Georgia, serif;
    font-optical-sizing:auto;
    text-wrap:balance;
  }
  .script{
    font-family:'Beau Rivage', cursive;
    font-weight:400;
  }
  .eyebrow{
    font-family:'Instrument Sans', 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);
  }
  .brandmark .script{ font-size:1.5em; color:var(--rust); }
  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); 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: three-layer product field ---------- */
  .dwb-hero{
    position:relative;
    display:flex;
    align-items:center;
    min-height:100vh;
    min-height:100svh;
    overflow:hidden;
    isolation:isolate;
    perspective:1200px;
    perspective-origin:64% 44%;
    padding-block: clamp(96px, 14vh, 160px);
    background:
      radial-gradient(74% 58% at 78% 16%, color-mix(in srgb, var(--rose) 46%, transparent), transparent 70%),
      radial-gradient(62% 54% at 8% 92%, color-mix(in srgb, var(--sand) 62%, transparent), transparent 74%),
      linear-gradient(168deg, color-mix(in srgb, var(--rose) 15%, var(--bg)) 0%, var(--bg) 58%);
  }

  .dwb-hero__field{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    transform-style:preserve-3d;
  }
  .dwb-layer{
    position:absolute;
    inset:0;
    transform-style:preserve-3d;
    transform:translate3d(
      calc(var(--px, 0px) * var(--par, 0)),
      calc(var(--py, 0px) * var(--par, 0)),
      0);
  }

  .dwb-date{
    position:absolute;
    top:0;
    left:var(--x, 50%);
    width:var(--size, 120px);
    aspect-ratio:var(--ratio, 1.5);
    transform-style:preserve-3d;
    animation:dwb-fall var(--fall-dur, 30s) linear var(--fall-delay, 0s) infinite;
    will-change:transform;
  }
  .dwb-date__sway{
    position:absolute;
    inset:0;
    transform-style:preserve-3d;
    animation:dwb-sway var(--sway-dur, 10s) ease-in-out var(--sway-delay, 0s) infinite alternate;
    will-change:transform;
  }
  .dwb-date__spin{
    position:absolute;
    inset:0;
    animation:dwb-spin var(--spin-dur, 60s) linear var(--spin-delay, 0s) infinite;
    animation-direction:var(--spin-dir, normal);
    will-change:transform;
  }
  .dwb-date img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    opacity:var(--op, 0.9);
    filter:blur(var(--blur, 0px)) saturate(var(--sat, 1));
    user-select:none;
  }
  .dwb-layer--mid .dwb-date img,
  .dwb-layer--front .dwb-date img{
    filter:blur(var(--blur, 0px)) saturate(var(--sat, 1))
           drop-shadow(0 18px 26px rgba(62, 34, 20, 0.30));
  }

  /* Vertical travel plus a long, slow horizontal drift. */
  @keyframes dwb-fall{
    from{ transform:translate3d(calc(-50% - var(--drift, 0vw)), -38vh, 0); }
    to  { transform:translate3d(calc(-50% + var(--drift, 0vw)), 122vh, 0); }
  }
  /* Toward/away from the viewer, with a gentle side-to-side sway. */
  @keyframes dwb-sway{
    from{ transform:translate3d(calc(var(--sway-x, 20px) * -1), 0, var(--z-far, -40px)); }
    to  { transform:translate3d(var(--sway-x, 20px), 0, var(--z-near, 20px)); }
  }
  @keyframes dwb-spin{
    from{ transform:rotate(0deg) scaleX(var(--flip, 1)); }
    to  { transform:rotate(360deg) scaleX(var(--flip, 1)); }
  }

  /* Nothing composites while the hero is off screen. */
  .dwb-hero__field.is-paused .dwb-date,
  .dwb-hero__field.is-paused .dwb-date__sway,
  .dwb-hero__field.is-paused .dwb-date__spin{ animation-play-state:paused; }

  /* Soft wash that guarantees contrast behind the copy. */
  .dwb-hero__scrim{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:linear-gradient(102deg,
      color-mix(in srgb, var(--bg) 86%, transparent) 0%,
      color-mix(in srgb, var(--bg) 58%, transparent) 32%,
      transparent 60%);
  }

  .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:'Fraunces', ui-serif, Georgia, serif;
    font-optical-sizing:auto;
    font-weight:400;
    font-size:clamp(3.1rem, 7.6vw, 6.1rem);
    line-height:0.94;
    letter-spacing:-0.022em;
    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:'Fraunces', ui-serif, Georgia, 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: composed still life ---------- */
  .dwb-date.is-still{
    top:var(--still-y, 40%);
    transform:translate3d(-50%, 0, 0);
    animation:none;
  }
  .dwb-date.is-still .dwb-date__sway{ animation:none; transform:none; }
  .dwb-date.is-still .dwb-date__spin{
    animation:none;
    transform:rotate(var(--still-rot, 0deg)) scaleX(var(--flip, 1));
  }
  @media (prefers-reduced-motion: reduce){
    .dwb-date,
    .dwb-date__sway,
    .dwb-date__spin{ animation:none !important; }
    .dwb-hero__content{ transform:none; opacity:1; }
  }

  @media (max-width: 1024px){
    .dwb-hero{ perspective-origin:70% 42%; }
    .dwb-hero__content{ max-width:min(560px, 96%); }
  }
  @media (max-width: 640px){
    .dwb-hero{
      min-height:92svh;
      padding-block:clamp(88px, 16vh, 132px);
      perspective-origin:50% 40%;
    }
    .dwb-hero__content{ max-width:100%; }
    .dwb-hero__lede{ max-width:34ch; }
    /* protect the centre of the screen, where the copy sits */
    .dwb-hero__scrim{
      background:radial-gradient(126% 66% at 50% 48%,
        color-mix(in srgb, var(--bg) 80%, transparent) 0%,
        color-mix(in srgb, var(--bg) 48%, transparent) 46%,
        transparent 78%);
    }
    .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:'Fraunces', serif; font-weight:500; font-size:1.05rem; }
  .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 .pod{
    position:absolute;
    top:22px; right:20px;
    width:34px; height:34px;
    border-radius:50%;
    border:1.5px solid color-mix(in srgb, var(--flavor-ink) 55%, transparent);
    display:flex; align-items:center; justify-content:center;
    font-family:'Fraunces',serif;
    font-style:italic;
    font-size:0.95rem;
    color:var(--flavor-ink);
  }
  .flavor h3{
    margin:0 0 4px;
    font-family:'Fraunces', serif;
    font-weight:500;
    font-size:1.3rem;
    color:var(--flavor-ink);
  }
  .flavor p{
    margin:0;
    font-size:0.82rem;
    color:var(--flavor-ink);
    opacity:0.78;
  }

  /* ---------- 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; }

  /* ---------- Footer ---------- */
  footer{
    padding-block: clamp(40px,6vw,64px) 40px;
    border-top:1px solid var(--line);
    display:flex;
    justify-content:space-between;
    gap:24px;
    flex-wrap:wrap;
    font-size:0.86rem;
    color:var(--ink-soft);
  }
  footer .foot-brand{ max-width:32ch; }
  footer .brandmark{ margin-bottom:0.6em; }
  footer .foot-cols{ display:flex; gap:clamp(28px,5vw,64px); flex-wrap:wrap; }
  footer h4{ margin:0 0 0.8em; font-size:0.76rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink); }
  footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.6em; }
  footer a{ text-decoration:none; }
  footer a:hover{ color:var(--rust); }

  @media (max-width: 900px){
    .attrs{ grid-template-columns:repeat(2,1fr); }
    .flavor-grid{ grid-template-columns:repeat(2,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; }
    /* on narrow screens the hero text stacks full-width, so keep the
       falling dates confined to a slim strip along the right edge —
       still clearly falling, just out of the text's way */
  }

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