/* Additions on top of the original Happy Dough stylesheet (original.css). */
@font-face { font-family: "Karla"; src: url("../fonts/Karla.woff2") format("woff2"), url("../fonts/Karla.ttf") format("truetype"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Karla"; src: url("../fonts/Karla-Italic.woff2") format("woff2"), url("../fonts/Karla-Italic.ttf") format("truetype"); font-weight: 200 800; font-style: italic; font-display: swap; }

/* Maps */
.hdx-map { display: block; width: 100%; height: 100%; min-height: 300px; border: 0; }

/* FAQ answers */
.hdx-faq-answer { padding: 0 0 1.25rem; font-size: 1.05rem; line-height: 1.6; color: color-mix(in oklab, var(--color-ink) 75%, transparent); }
@media (min-width: 768px) { .hdx-faq-answer { font-size: 1.15rem; } }

/* Flavours: category nav and sections */
.hdx-catnav { position: sticky; top: 60px; z-index: 40; background: color-mix(in oklab, var(--color-bubblegum) 95%, transparent); backdrop-filter: blur(8px); }
@media (min-width: 768px) { .hdx-catnav { top: 76px; } }
.hdx-cat { scroll-margin-top: 140px; padding-top: 3.5rem; }
.hdx-cat-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .75rem 2rem; margin-bottom: 2.5rem; padding-top: 2rem; border-top: 2px solid rgb(255 255 255 / .25); }
.hdx-cat:first-of-type .hdx-cat-head { border-top: 0; padding-top: 0; }
#allergens { scroll-margin-top: 140px; }

/* The Classic: one big feature card */
.hdx-feature .hdx-flavour { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .hdx-feature .hdx-flavour { grid-template-columns: 1fr 1fr; gap: 4rem; } .hdx-feature h3 { font-size: clamp(2.5rem, 5vw, 4.5rem); margin-top: 0; } }

/* Allergen lines on each flavour */
.hdx-contains { margin-top: .6rem; font-size: .9rem; line-height: 1.45; color: rgb(255 255 255 / .92); }
.hdx-contains span { font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; margin-right: .25rem; }
.hdx-note { margin-top: .6rem; display: inline-block; background: var(--color-yolk); color: var(--color-ink); border-radius: 999px; padding: .3rem .8rem; font-size: .78rem; font-weight: 800; }
.hdx-ingredients { margin-top: .75rem; color: rgb(255 255 255 / .85); }
.hdx-ingredients summary { cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; color: #fff; list-style: none; }
.hdx-ingredients summary::-webkit-details-marker { display: none; }
.hdx-ingredients summary::after { content: "+"; font-size: 1.1rem; line-height: 1; }
.hdx-ingredients[open] summary::after { content: "–"; }
.hdx-ingredients p { margin-top: .5rem; font-size: .85rem; line-height: 1.55; }

/* Allergen table */
.hdx-table-wrap { margin-top: 3rem; overflow-x: auto; border-radius: 2rem; background: #fff; }
.hdx-allergens { width: 100%; min-width: 680px; border-collapse: collapse; color: var(--color-ink); }
.hdx-allergens th, .hdx-allergens td { padding: .85rem 1.1rem; text-align: center; border-bottom: 1px solid rgb(0 0 0 / .07); }
.hdx-allergens thead th { background: var(--color-bubblegum); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.hdx-allergens th[scope=row], .hdx-allergens thead th:first-child { text-align: left; font-weight: 800; }
.hdx-allergens tbody tr:last-child > * { border-bottom: 0; }
.hdx-yes { color: var(--sprinkles); font-size: 1.15rem; filter: saturate(2) brightness(.85); }
.hdx-no { color: rgb(0 0 0 / .25); }
.hdx-may { text-align: left !important; font-size: .85rem; color: rgb(0 0 0 / .65); }

/* Forms */
.hdx-hp { position: absolute; left: -9999px; }
.hdx-check { margin-top: .2rem; width: 1.15rem; height: 1.15rem; accent-color: var(--color-bubblegum); flex-shrink: 0; }
.hdx-review { display: grid; gap: .5rem; }
.hdx-review div { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: .75rem; padding: .5rem 0; border-bottom: 1px solid rgb(0 0 0 / .08); font-size: .95rem; }
.hdx-review dt { font-weight: 800; color: rgb(0 0 0 / .6); }
.hdx-invalid { border-color: #d9534f !important; }

/* Trading hours panel on the store finder */
.hdx-hours { margin-top: .5rem; max-width: 22rem; font-size: .9rem; }
.hdx-hours div { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; border-bottom: 1px solid rgb(0 0 0 / .08); }
.hdx-hours .is-today { font-weight: 800; }

@media (prefers-reduced-motion: reduce) { .hd-reveal { opacity: 1 !important; transform: none !important; } }

/* Store page headings: keep long names (e.g. Kawana Shoppingworld) inside the half-width column */
@media (min-width: 1024px) { .hdx-store-title { font-size: clamp(2.4rem, 4.6vw, 5.5rem) !important; overflow-wrap: anywhere; } }

/* Homepage hero: wide landscape photo across the page (cabinet shot) */
.hdx-hero { position: relative; width: 100%; margin: 1.25rem auto 0; overflow: hidden; border-radius: 1.5rem; aspect-ratio: 4 / 3; background: #e9d9c8; box-shadow: 0 30px 60px -30px rgba(23, 33, 33, .45); }
.hdx-hero img { --hz: 1.22; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 40% 100%; transform-origin: 46% 78%; transform: scale(calc(var(--hz) + .06)); animation: hdx-hero-settle 1.6s cubic-bezier(.2, .7, .2, 1) .1s forwards; }
@media (min-width: 768px) {
  .hdx-hero { aspect-ratio: auto; height: clamp(440px, 50vw, 74svh); border-radius: 2rem; margin-top: 1.75rem; }
  .hdx-hero img { --hz: 1; object-position: 50% 66%; }
}
@keyframes hdx-hero-settle { to { transform: scale(var(--hz)); } }
@media (prefers-reduced-motion: reduce) { .hdx-hero img { animation: none; transform: scale(var(--hz)); } }

/* Mobile polish (launch QA): 44px tap targets, readable labels, allergen table */
.text-\[0\.65rem\] { font-size: .72rem !important; }
.hdx-ingredients summary { min-height: 44px; }
button[aria-label^="Go to review"] { position: relative; }
button[aria-label^="Go to review"]::before { content: ""; position: absolute; inset: -17px -5px; }
.hdx-allergens th[scope=row], .hdx-allergens thead th:first-child { position: sticky; left: 0; z-index: 1; }
.hdx-allergens th[scope=row] { background: #fff; box-shadow: 6px 0 8px -6px rgb(0 0 0 / .18); }
.hdx-swipe { display: none; margin-top: 2rem; font-weight: 800; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: rgb(0 0 0 / .5); }
@media (max-width: 767px) {
  .hdx-swipe { display: block; }
  .hdx-swipe + .hdx-table-wrap { margin-top: .75rem; }
  a[href*="google.com/maps"]:not(footer a), a[href^="mailto:"]:not(footer a), a[href^="tel:"]:not(footer a) { display: inline-block; padding-top: .65rem; padding-bottom: .65rem; }
  details > summary.cursor-pointer { display: flex; align-items: center; min-height: 44px; padding: .5rem 0; }
}

/* Home: delivery announcement pill above the hero */
.hdx-announce { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; padding: .4rem 1rem .4rem .4rem; border-radius: 999px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .35); color: #fff; font-weight: 700; font-size: .9rem; text-decoration: none; transition: background .2s; }
.hdx-announce:hover { background: rgba(255, 255, 255, .26); }
.hdx-announce-new { background: #EDBD46; color: #132B2A; border-radius: 999px; padding: .3rem .7rem; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
@media (min-width: 768px) { .hdx-announce { font-size: 1rem; } }

/* Buttons: keep the arrow icon on the same line as the label (the base styles make every svg a block) */
.hd-btn[href*="google.com/maps"] svg { display: inline-block; vertical-align: -0.2em; margin-left: .35em; width: 1.1em; height: 1.1em; }
/* Home hero buttons: wide enough for "Order Pickup or Delivery" on one line */
@media (min-width: 640px) { .hdx-hero-ctas { max-width: 680px; } .hdx-hero-ctas .hd-btn { white-space: nowrap; padding-left: 2.25rem; padding-right: 2.25rem; } }
/* Mobile menu: finish the panel with an edge so the page underneath doesn't run straight into it */
.hdx-menu-panel { border-radius: 0 0 1.75rem 1.75rem; box-shadow: 0 24px 40px -12px rgba(19, 43, 42, .45); max-height: calc(100svh - 72px); overflow-y: auto; }