/* =====================================================================
   Antione's Cakery artisan / handmade palette
   Warm terracotta + cream + earth-tone browns
   Change any colour here and it updates across the whole site.
   ===================================================================== */
:root {
  --color-bg:          #fbf6ef;   /* warm cream */
  --color-surface:     #ffffff;
  --color-cream:       #f3e9db;   /* soft oat */
  --color-primary:     #b56a43;   /* terracotta */
  --color-primary-dk:  #934f2f;   /* deep terracotta */
  --color-brown:       #5b3d2e;   /* earthy chocolate brown */
  --color-brown-dk:    #3e2a1f;
  --color-accent:      #c99a5b;   /* warm caramel/gold */
  --color-text:        #3e2a1f;   /* dark brown text */
  --color-text-muted:  #786152;
  --color-border:      #e7d6c3;
  --color-error:       #b23b2e;
  --color-success:     #5a8a4f;

  --radius:     10px;
  --radius-lg:  18px;
  --shadow:     0 3px 16px rgba(91, 61, 46, 0.10);
  --shadow-lg:  0 10px 38px rgba(91, 61, 46, 0.16);

  --font-script:  'Parisienne', cursive;            /* logo / accents */
  --font-heading: 'Playfair Display', Georgia, serif;/* headings */
  --font-body:    'Nunito Sans', 'Segoe UI', system-ui, sans-serif;

  --max-width: 1120px;
  --gutter:    1.25rem;
}

/* =====================================================================
   Reset & base
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.65;
}
img{display:block;max-width:100%;height:auto}
a{color:var(--color-primary-dk)}
a:hover{color:var(--color-primary-dk)}
h1,h2,h3{font-family:var(--font-heading);line-height:1.2;font-weight:700}

/* =====================================================================
   Utility
   ===================================================================== */
.container{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 var(--gutter)}

/* Honeypot: clip technique, NOT display:none (bots skip display:none) */
.hidden-honeypot{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.script-accent{font-family:var(--font-script);color:var(--color-primary);font-size:1.4em;line-height:1}

/* =====================================================================
   Buttons
   ===================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1.7rem;border:none;border-radius:var(--radius);
  font-size:1rem;font-weight:700;font-family:var(--font-body);
  cursor:pointer;text-decoration:none;text-align:center;line-height:1.3;
  transition:background .18s,transform .12s,box-shadow .18s;
  min-height:50px;
}
.btn:active{transform:scale(.97)}
.btn--primary{background:var(--color-primary);color:#fff;box-shadow:0 4px 14px rgba(181,106,67,.32)}
.btn--primary:hover{background:var(--color-primary-dk);color:#fff}
.btn--secondary{background:transparent;color:var(--color-primary);border:2px solid var(--color-primary)}
.btn--secondary:hover{background:var(--color-primary);color:#fff}
.btn--brown{background:var(--color-brown);color:#fff}
.btn--brown:hover{background:var(--color-brown-dk);color:#fff}
.btn--whatsapp{background:#25d366;color:#fff;box-shadow:0 4px 14px rgba(37,211,102,.3)}
.btn--whatsapp:hover{background:#1da851;color:#fff}
.btn--coming-soon{background:#c9c9c9;color:#6b6b6b;box-shadow:none;cursor:not-allowed;
  display:flex;align-items:center;justify-content:center;gap:.5rem;flex-wrap:wrap}
.btn--coming-soon:hover{background:#c9c9c9;color:#6b6b6b}
.btn--coming-soon span{background:#fff;color:#8a6f5e;font-size:.68rem;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;padding:.2rem .5rem;border-radius:999px}
.btn--ghost{background:transparent;color:var(--color-text-muted);border:1.5px solid var(--color-border)}
.btn--ghost:hover{border-color:var(--color-primary);color:var(--color-primary)}

/* =====================================================================
   Header
   ===================================================================== */
.site-header{
  background:rgba(251,246,239,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--color-border);
  padding:.6rem 0;position:sticky;top:0;z-index:100;box-shadow:var(--shadow);
}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem}
.site-header__logo{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--color-brown)}
/* Cream "coin" frame: the grey logo sits on warm material instead of clashing */
.site-header__logo-badge{
  width:56px;height:56px;flex-shrink:0;box-sizing:border-box;padding:5px;
  border-radius:50%;
  background:radial-gradient(circle at 50% 38%,#fbf3e7 0%,#f1e2cd 70%,#e7d2b6 100%);
  box-shadow:0 3px 10px rgba(91,61,46,.22),inset 0 0 0 2px #e3cfae;
}
.site-header__logo-text{display:flex;flex-direction:column;line-height:1.1}
.site-header__logo-name{font-family:var(--font-script);font-size:1.55rem;color:var(--color-primary)}
.site-header__tagline{font-size:.72rem;color:var(--color-text-muted);font-style:italic}
.site-nav{display:none;gap:1.4rem}
.site-nav a{text-decoration:none;color:var(--color-brown);font-weight:600;font-size:.92rem}
.site-nav a:hover{color:var(--color-primary)}
@media(min-width:820px){.site-nav{display:flex}}

/* =====================================================================
   Hero: intro + cake collage side by side
   ===================================================================== */
.hero{background:linear-gradient(150deg,#f7ede0 0%,#f3e3d0 100%);
  padding:2.5rem 0 3rem;overflow:hidden}
.hero__inner{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center}
.hero__eyebrow{font-family:var(--font-script);font-size:1.6rem;color:var(--color-primary);margin-bottom:.25rem}
.hero__title{font-size:clamp(2rem,6vw,3.4rem);color:var(--color-brown);margin-bottom:1rem}
.hero__subtitle{font-size:1.05rem;color:var(--color-text-muted);max-width:460px;margin-bottom:1.75rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem}

.hero__visual{display:flex;justify-content:center;align-items:center}
.baker-wrap{position:relative;width:fit-content}
.baker-variant{display:flex;justify-content:center;align-items:center}
.baker-variant[hidden]{display:none}
.baker-svg{width:min(250px,68vw);animation:baker-float 3.6s ease-in-out infinite;filter:drop-shadow(0 16px 26px rgba(91,61,46,.22))}
.baker-svg--medallion{width:min(290px,76vw)}
@keyframes baker-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.baker-wave{transform-box:fill-box;transform-origin:left bottom;animation:wave-arm 2.4s ease-in-out infinite}
@keyframes wave-arm{0%,100%{transform:rotate(0)}25%{transform:rotate(14deg)}50%{transform:rotate(-6deg)}75%{transform:rotate(12deg)}}
.sparkle{position:absolute;font-size:1.5rem;pointer-events:none;animation:sparkle-float 3s ease-in-out infinite;line-height:1}
.sparkle--1{top:6%;left:0;animation-delay:0s}
.sparkle--2{top:14%;right:-2%;animation-delay:1.1s;font-size:1.2rem}
.sparkle--3{bottom:16%;right:2%;animation-delay:2.2s}
@keyframes sparkle-float{0%,100%{transform:translateY(0) rotate(0);opacity:.75}50%{transform:translateY(-14px) rotate(18deg);opacity:1}}

/* =====================================================================
   Section layout
   ===================================================================== */
.section{padding:3.5rem 0}
.section--cream{background:var(--color-cream)}
.section--surface{background:var(--color-surface)}
.section__eyebrow{font-family:var(--font-script);font-size:1.5rem;color:var(--color-primary);text-align:center}
.section__heading{font-size:clamp(1.6rem,4vw,2.4rem);color:var(--color-brown);text-align:center;margin-bottom:.4rem}
.section__sub{color:var(--color-text-muted);margin-bottom:2.25rem;text-align:center;max-width:560px;margin-left:auto;margin-right:auto}
.order-note{background:var(--color-cream);border-left:4px solid var(--color-primary);border-radius:var(--radius);
  padding:.85rem 1.1rem;max-width:680px;margin:-1rem auto 2.25rem;color:var(--color-brown);font-size:.9rem;text-align:left;
  position:sticky;top:88px;z-index:20;box-shadow:var(--shadow)}

/* =====================================================================
   Dietary filter chips
   ===================================================================== */
.filter-bar{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:2rem}
.filter-chip{
  padding:.5rem 1.1rem;border:1.5px solid var(--color-border);border-radius:999px;
  background:var(--color-surface);font-size:.88rem;font-weight:600;cursor:pointer;
  color:var(--color-text-muted);transition:all .18s;min-height:42px;
}
.filter-chip:hover{border-color:var(--color-primary)}
.filter-chip.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}

/* =====================================================================
   Menu grid
   ===================================================================== */
#menu-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
.cake-card{
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;
  transition:box-shadow .2s,transform .2s;
}
.cake-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.cake-card__image-wrap{aspect-ratio:4/3;overflow:hidden;background:var(--color-cream);position:relative}
.cake-card__image{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.cake-card:hover .cake-card__image{transform:scale(1.05)}
.cake-card__diet{position:absolute;top:.6rem;left:.6rem;display:flex;gap:.35rem}
.diet-badge{background:rgba(255,255,255,.94);color:var(--color-success);font-size:.7rem;font-weight:700;padding:.2rem .55rem;border-radius:999px;letter-spacing:.03em}
.cake-card__body{padding:1.25rem;display:flex;flex-direction:column;flex:1;gap:.5rem}
.cake-card__name{font-size:1.3rem;color:var(--color-brown)}
.cake-card__desc{font-size:.88rem;color:var(--color-text-muted);flex:1}
.cake-card__meta{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;flex-wrap:wrap}
.cake-card__price{font-size:1.15rem;font-weight:800;color:var(--color-primary)}
.cake-card__price small{font-size:.7rem;font-weight:600;color:var(--color-text-muted)}
.cake-card__allergens{font-size:.72rem;color:var(--color-text-muted)}
.cake-card__flavours{font-size:.76rem;color:var(--color-text-muted);margin:.15rem 0}
.cake-card__flavours strong{color:var(--color-brown)}
.cake-card__pick{margin-top:.5rem}

/* =====================================================================
   Order builder
   ===================================================================== */
.builder{max-width:680px;margin:0 auto;background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:1.5rem}
@media(min-width:560px){.builder{padding:2rem}}

.builder__step{margin-bottom:1.6rem}
.builder__step:last-of-type{margin-bottom:0}
.builder__step-label{display:flex;align-items:center;gap:.6rem;font-weight:700;color:var(--color-brown);margin-bottom:.7rem;font-size:.98rem}
.builder__step-num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--color-primary);color:#fff;font-size:.82rem;flex-shrink:0}
.builder__group-label{font-size:.78rem;font-weight:700;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.04em;margin:.6rem 0 .4rem}
.builder__group-label:first-of-type{margin-top:0}
.option-tile strong small{font-weight:600;color:var(--color-text-muted);font-size:.72rem;margin-left:.2rem}

/* Option tiles (cake + size + flavour choices) */
.option-grid{display:grid;grid-template-columns:1fr;gap:.55rem}
@media(min-width:480px){.option-grid.cols-2{grid-template-columns:1fr 1fr}
  .option-grid.cols-3{grid-template-columns:repeat(3,1fr)}}
.option-tile{
  display:flex;flex-direction:column;gap:.15rem;
  padding:.85rem 1rem;border:1.5px solid var(--color-border);border-radius:var(--radius);
  background:var(--color-bg);cursor:pointer;transition:all .18s;min-height:50px;justify-content:center;
}
.option-tile:hover{border-color:var(--color-primary)}
.option-tile.selected{border-color:var(--color-primary);background:rgba(181,106,67,.08)}
.option-tile strong{font-size:.92rem;color:var(--color-brown)}
.option-tile span{font-size:.78rem;color:var(--color-text-muted)}

/* Form fields */
.field{display:flex;flex-direction:column;gap:.35rem;position:relative;margin-bottom:1.1rem}
.field label{font-weight:700;font-size:.88rem;color:var(--color-brown)}
.field input,.field select,.field textarea{
  padding:.8rem 1rem;border:1.5px solid var(--color-border);border-radius:var(--radius);
  font-size:16px;font-family:inherit;background:var(--color-bg);color:var(--color-text);width:100%;
  transition:border-color .18s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(181,106,67,.15)}
.field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--color-error)}
.field textarea{resize:vertical;min-height:90px}
.field__hint{font-size:.78rem;color:var(--color-text-muted)}
.field-error{color:var(--color-error);font-size:.8rem;min-height:1.1em}
.field-row{display:grid;grid-template-columns:1fr;gap:1.1rem}
@media(min-width:480px){.field-row{grid-template-columns:1fr 1fr}}

.checkbox-row{display:flex;align-items:flex-start;gap:.6rem;padding:.6rem 0}
.checkbox-row input{width:20px;height:20px;accent-color:var(--color-primary);flex-shrink:0;margin-top:.15rem}
.checkbox-row label{font-weight:600;font-size:.9rem}

/* Live estimate panel */
.estimate{
  background:var(--color-cream);border:1.5px solid var(--color-border);border-left:5px solid var(--color-primary);
  border-radius:var(--radius);padding:1.1rem 1.25rem;margin:1.4rem 0;
}
.estimate__row{display:flex;justify-content:space-between;font-size:.92rem;margin-bottom:.3rem;color:var(--color-text-muted)}
.estimate__total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px dashed var(--color-border);padding-top:.6rem;margin-top:.6rem}
.estimate__total strong{font-size:1.5rem;color:var(--color-primary);font-family:var(--font-heading)}
.estimate__note{font-size:.78rem;color:var(--color-text-muted);font-style:italic;margin-top:.5rem}

.builder__actions{display:flex;flex-direction:column;gap:.75rem;margin-top:1.25rem}
@media(min-width:480px){.builder__actions{flex-direction:row}}
.builder__actions .btn{flex:1}

/* =====================================================================
   About section
   ===================================================================== */
.about{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center}
.about__photo{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:1;background:var(--color-cream);
  display:flex;align-items:center;justify-content:center;color:var(--color-text-muted);font-size:.9rem;text-align:center}
.about__photo img{width:100%;height:100%;object-fit:cover;display:block}
.about__text h2{text-align:left}
.about__text p{margin-bottom:1rem;color:var(--color-text-muted)}
@media(min-width:760px){.about{grid-template-columns:1fr 1.3fr}}

/* =====================================================================
   FAQ (accordion)
   ===================================================================== */
.faq{max-width:720px;margin:0 auto}
.faq-item{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);margin-bottom:.75rem;overflow:hidden}
.faq-q{width:100%;text-align:left;background:none;border:none;padding:1.1rem 1.25rem;font-size:1rem;font-weight:700;
  color:var(--color-brown);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;font-family:var(--font-body)}
.faq-q::after{content:"+";font-size:1.4rem;color:var(--color-primary);transition:transform .2s;flex-shrink:0}
.faq-item.open .faq-q::after{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;padding:0 1.25rem}
.faq-item.open .faq-a{max-height:300px;padding:0 1.25rem 1.1rem}
.faq-a p{color:var(--color-text-muted);font-size:.92rem}

/* =====================================================================
   Reviews
   ===================================================================== */
.reviews{display:grid;grid-template-columns:1fr;gap:1.25rem}
@media(min-width:640px){.reviews{grid-template-columns:repeat(2,1fr)}}
.review-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:1.5rem;box-shadow:var(--shadow)}
.review-card__stars{color:var(--color-accent);font-size:1.1rem;margin-bottom:.5rem}
.review-card__text{font-style:italic;color:var(--color-text);margin-bottom:.75rem}
.review-card__author{font-weight:700;color:var(--color-brown);font-size:.9rem}
.reviews-placeholder{text-align:center;color:var(--color-text-muted);font-style:italic;grid-column:1/-1;padding:1rem}

/* =====================================================================
   Delivery note
   ===================================================================== */
.delivery-note{max-width:620px;margin:0 auto;text-align:center;background:var(--color-surface);
  border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:2rem;box-shadow:var(--shadow)}
.delivery-note h3{color:var(--color-brown);margin-bottom:.5rem;font-size:1.3rem}
.delivery-note p{color:var(--color-text-muted)}

/* =====================================================================
   Footer
   ===================================================================== */
.site-footer{background:var(--color-brown-dk);color:#d9c3b3;text-align:center;padding:2.5rem var(--gutter);font-size:.9rem;line-height:1.9}
.site-footer a{color:var(--color-accent)}
.site-footer__name{font-family:var(--font-script);font-size:1.6rem;color:#fff;display:block;margin-bottom:.4rem}
.site-footer__legal{margin-top:1rem;font-size:.78rem;opacity:.6}
.site-footer__links{margin-top:.5rem;font-weight:600}

/* =====================================================================
   Legal pages (allergens / privacy / terms)
   ===================================================================== */
.legal{max-width:760px;padding:3rem var(--gutter) 4rem;line-height:1.75}
.legal__eyebrow{font-family:var(--font-script);font-size:1.5rem;color:var(--color-primary);margin-bottom:.1rem}
.legal h1{font-family:var(--font-heading);font-size:clamp(1.8rem,5vw,2.5rem);color:var(--color-brown);margin-bottom:.35rem}
.legal__updated{font-size:.82rem;color:var(--color-text-muted);margin-bottom:1.75rem}
.legal h2{font-family:var(--font-heading);font-size:1.25rem;color:var(--color-primary);
  margin:2.25rem 0 .6rem;padding-bottom:.35rem;border-bottom:2px solid var(--color-border)}
.legal p{margin-bottom:1rem}
.legal ul{margin:0 0 1rem 1.25rem}
.legal li{margin-bottom:.5rem;padding-left:.25rem}
.legal a{color:var(--color-primary-dk);font-weight:600}
.legal__callout{background:var(--color-cream);border-left:4px solid var(--color-primary);
  border-radius:var(--radius);padding:1rem 1.25rem;margin:1.25rem 0}
.legal__note{font-size:.88rem;color:var(--color-text-muted);background:var(--color-surface);
  border:1px solid var(--color-border);border-radius:var(--radius);padding:.85rem 1.1rem}
.legal__table-wrap{overflow-x:auto;margin:1.25rem 0}
.legal__table{border-collapse:collapse;width:100%;min-width:520px;font-size:.9rem;
  background:var(--color-surface);border-radius:var(--radius);overflow:hidden}
.legal__table th,.legal__table td{border:1px solid var(--color-border);padding:.6rem .8rem;text-align:left}
.legal__table th{background:var(--color-cream);color:var(--color-brown);font-weight:700}
.legal__back{margin-top:2.5rem}

/* =====================================================================
   Thank-you page
   ===================================================================== */
.thankyou-wrap{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4rem var(--gutter);gap:1.25rem}
.thankyou-wrap__icon{font-size:4rem;line-height:1}
.thankyou-wrap__title{font-size:clamp(1.75rem,5vw,2.75rem);color:var(--color-primary)}

/* =====================================================================
   Responsive: hero/about two-column
   ===================================================================== */
@media(min-width:600px){
  #menu-grid{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:760px){
  .hero__inner{grid-template-columns:1.1fr 1fr}
}
@media(min-width:920px){
  #menu-grid{grid-template-columns:repeat(3,1fr)}
}