/* ==========================================================================
   Babylon Bakery & Grill — Design-Token Base Stylesheet
   Direction: Ishtar / Heritage Modern
   Fonts: Fraunces (display) · Inter (body)
   ========================================================================== */

/* --------------------------------------------------------------------------
   2. DESIGN TOKENS  (contract — other tasks depend on these verbatim)
   -------------------------------------------------------------------------- */
:root {
  /* — Color: Brand palette — */
  --lapis:       #0E2659;   /* deep Ishtar-gate blue         */
  --lapis-2:     #163486;   /* mid-range lapis               */
  --cobalt:      #2C57C4;   /* signage / accent blue         */
  --gold:        #D8B15C;   /* warm gilded gold              */
  --gold-bright: #E8C879;   /* highlight / hover gold        */
  --gold-deep:   #B68A38;   /* shadow / pressed gold         */
  --terracotta:  #CB6A3E;   /* interior pendants / terrazzo  */
  --cream:       #F5EEDF;   /* warm off-white                */
  --sand:        #E7D8BC;   /* lighter warm neutral          */
  --ink:         #11203F;   /* near-black body text          */

  /* — Typography: font stacks — */
  --display: 'Fraunces', Georgia, serif;
  --body:    'Inter', system-ui, sans-serif;

  /* — Radius — */
  --r:    14px;
  --r-lg: 28px;

  /* — Spacing scale (8-pt grid) — */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 48px;
  --s6: 64px;
  --s7: 96px;
  --s8: 128px;

  /* — Layout — */
  --maxw: 1280px;

  /* — Elevation / shadows — */
  --shadow-sm:  0 2px  8px rgba(14, 38, 89, .16);
  --shadow-md:  0 8px 26px rgba(14, 38, 89, .22);
  --shadow-lg:  0 24px 60px rgba(0, 0, 0, .40);
  --shadow-gold: 0 8px 26px rgba(216, 177, 92, .32);

  /* — Transition — */
  --ease:        cubic-bezier(.25, .46, .45, .94);
  --duration-ui: 180ms;
  --duration-md: 280ms;

  /* — Z-index scale — */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 20;
  --z-modal:   40;
  --z-toast:   100;
  --z-top:     1000;

  /* — Extended colour tokens — */
  --cream-warm:         #FBF6EA;   /* slightly warmer off-white (hero headline) */
  --text-on-lapis:      #CBD4EC;   /* body text on lapis — 9.84:1 contrast      */
  --text-on-lapis-dim:  #AFBADA;   /* secondary text on lapis — 7.54:1 contrast */
}


/* --------------------------------------------------------------------------
   3. MODERN RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  /* prevent horizontal scroll from rogue elements */
  overflow-x: hidden;
  /* establish a predictable base font size */
  font-size: 16px;
}

body {
  font-family: var(--body);
  font-size: 1rem;           /* 16px — avoids iOS auto-zoom on focus */
  line-height: 1.65;
  color: var(--ink);
  background-color: var(--cream);
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* Sections that sit on lapis background override color/bg directly */
}

img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  max-width: 100%;
}

img {
  height: auto;              /* preserve aspect ratio */
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

ul, ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: inherit;
}

p {
  max-width: 70ch;           /* comfortable reading measure */
}

input, textarea, select {
  font: inherit;
  color: inherit;
}

fieldset {
  border: none;
}


/* --------------------------------------------------------------------------
   4. ACCESSIBILITY
   -------------------------------------------------------------------------- */

/* Visible focus ring for keyboard / assistive technology navigation.
   Applied to all interactive elements that do NOT override via their own styles. */
:focus-visible {
  outline: 2.5px solid var(--gold-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip-to-content link (referenced from index.html) */
.skip-link {
  position: absolute;
  top: -999px;
  left: var(--s2);
  z-index: var(--z-top);
  padding: var(--s1) var(--s3);
  background: var(--gold);
  color: var(--ink);
  font-weight: 600;
  font-size: .875rem;
  border-radius: 0 0 var(--r) var(--r);
  transition: top var(--duration-ui) var(--ease);
}
.skip-link:focus {
  top: 0;
}


/* --------------------------------------------------------------------------
   5. REDUCED-MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:        .01ms !important;
    animation-iteration-count: 1     !important;
    transition-duration:       .01ms !important;
    scroll-behavior:           auto  !important;
  }
  html {
    scroll-behavior: auto;
  }
}


/* --------------------------------------------------------------------------
   6. LAYOUT UTILITIES
   -------------------------------------------------------------------------- */

/* Centred max-width column */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--s4);  /* 32px on desktop */
}

@media (max-width: 720px) {
  .container {
    padding-inline: var(--s2);  /* 16px on mobile */
  }
}

/* Full-bleed section wrapper (colour is set on the section itself) */
.section {
  position: relative;
  z-index: var(--z-raised);
}

/* Utility: visually hidden but accessible to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}


/* --------------------------------------------------------------------------
   7. TYPOGRAPHY PRIMITIVES
   -------------------------------------------------------------------------- */

/* Display headings */
.display-xl {
  font-family: var(--display);
  font-size: clamp(44px, 5.6vw, 82px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.01em;
}

.display-lg {
  font-family: var(--display);
  font-size: clamp(32px, 4vw, 60px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.display-md {
  font-family: var(--display);
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 500;
  line-height: 1.14;
}

/* Section label — eyebrow text (uppercase, letter-spaced, small) */
.label {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  font-family: var(--body);
  font-size: .75rem;          /* 12px */
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1;
}

/* Optional decorative rule before label */
.label::before {
  content: '';
  display: inline-block;
  width: 34px;
  height: 1px;
  background: var(--gold);
  opacity: .7;
  flex-shrink: 0;
}

/* Lead / intro paragraph */
.lede {
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.7;
  color: var(--text-on-lapis); /* on lapis backgrounds */
  max-width: 32em;
}

/* Body text on light (cream) backgrounds */
.body-text {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
}

/* Small muted text */
.text-muted {
  font-size: .875rem;
  color: #9FAACB;
}


/* --------------------------------------------------------------------------
   8. BUTTON PRIMITIVES
   -------------------------------------------------------------------------- */

/* Base button — share across .btn-gold and .btn-ghost */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--body);
  font-weight: 600;
  font-size: .875rem;         /* 14px */
  letter-spacing: .02em;
  padding: 13px 22px;
  border-radius: 999px;       /* pill */
  cursor: pointer;
  border: none;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform       var(--duration-ui) var(--ease),
    box-shadow      var(--duration-ui) var(--ease),
    background      var(--duration-ui) var(--ease),
    border-color    var(--duration-ui) var(--ease),
    color           var(--duration-ui) var(--ease);
  /* Prevent layout shift on scale feedback */
  will-change: transform, box-shadow;
  /* Accessible minimum touch target */
  min-height: 44px;
  min-width: 44px;
}

.btn:focus-visible {
  outline: 2.5px solid var(--gold-bright);
  outline-offset: 3px;
}

/* Gold gradient — primary CTA */
.btn-gold {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #3A2A08;             /* high-contrast dark amber on gold — WCAG AA */
  box-shadow: var(--shadow-gold);
}

.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(216, 177, 92, .45);
}

.btn-gold:active {
  transform: translateY(0);
  box-shadow: var(--shadow-gold);
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
}

.btn-gold:disabled,
.btn-gold[aria-disabled="true"] {
  opacity: .5;
  pointer-events: none;
  box-shadow: none;
}

/* Ghost — secondary / outline CTA */
.btn-ghost {
  background: transparent;
  border: 1.5px solid rgba(216, 177, 92, .55);
  color: var(--gold-bright);
}

.btn-ghost:hover {
  border-color: var(--gold-bright);
  background: rgba(216, 177, 92, .08);
  color: var(--gold-bright);
}

.btn-ghost:active {
  background: rgba(216, 177, 92, .16);
}

.btn-ghost:disabled,
.btn-ghost[aria-disabled="true"] {
  opacity: .4;
  pointer-events: none;
}

/* Delivery-platform brand theming — secondary to the gold Pick-Up CTA.
   Brand-coloured outline + icon that fills with the brand colour on hover.
   (Icons inherit currentColor, so they pick up the brand colour automatically.) */
.btn-ubereats {
  background: rgba(6, 193, 103, .10);
  border: 1.5px solid #06C167;          /* Uber Eats green */
  color: #3FD98A;                       /* brightened for AA contrast on lapis */
}
.btn-ubereats:hover {
  background: #06C167;
  border-color: #06C167;
  color: #04231A;
}
.btn-ubereats:active { background: #05A357; border-color: #05A357; color: #04231A; }

.btn-doordash {
  background: rgba(255, 48, 8, .10);
  border: 1.5px solid #FF3008;          /* DoorDash red */
  color: #FF7E66;                       /* brightened for AA contrast on lapis */
}
.btn-doordash:hover {
  background: #FF3008;
  border-color: #FF3008;
  color: #FFFFFF;
}
.btn-doordash:active { background: #E02C07; border-color: #E02C07; color: #FFFFFF; }

/* Brand-logo watermark behind the platform buttons.
   Masked glyph painted in currentColor, so it tints with the button
   (brand colour at rest, flips with the text colour on hover). The old
   placeholder <svg> icons are hidden in favour of the real brand mark. */
.btn-ubereats,
.btn-doordash { position: relative; overflow: hidden; isolation: isolate; }
.btn-ubereats > svg,
.btn-doordash > svg { display: none; }
.btn-ubereats::after,
.btn-doordash::after {
  content: "";
  position: absolute;
  z-index: -1;                 /* behind the label, above the button's tint */
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  background-color: currentColor;
  opacity: .22;
  pointer-events: none;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.btn-ubereats::after {
  width: 84px; height: 30px;
  -webkit-mask-image: url("../img/brand/ubereats.svg");
  mask-image: url("../img/brand/ubereats.svg");
}
.btn-doordash::after {
  width: 52px; height: 40px;
  -webkit-mask-image: url("../img/brand/doordash.svg");
  mask-image: url("../img/brand/doordash.svg");
}

/* Ghost on light (cream) backgrounds */
.btn-ghost-dark {
  background: transparent;
  border: 1.5px solid rgba(14, 38, 89, .40);
  color: var(--lapis);
}

.btn-ghost-dark:hover {
  border-color: var(--lapis);
  background: rgba(14, 38, 89, .06);
}

/* Small size modifier */
.btn-sm {
  font-size: .8125rem;        /* 13px */
  padding: 9px 16px;
  min-height: 36px;
}

/* Large size modifier */
.btn-lg {
  font-size: 1rem;
  padding: 16px 28px;
  min-height: 52px;
}


/* --------------------------------------------------------------------------
   9. ARCH — Arched / vaulted-ceiling photo frame
   -------------------------------------------------------------------------- */

/* Echoes the arched windows and vaulted ceilings of Middle Eastern architecture.
   Border-radius: rounded top (pill) → flat-ish bottom corners. */
.arch {
  position: relative;
  width: 100%;
  border-radius: 999px 999px var(--r) var(--r);   /* arched top, square-ish base */
  overflow: hidden;
  border: 1.5px solid rgba(216, 177, 92, .40);    /* hairline gold outline */
  box-shadow:
    0 40px 80px -28px rgba(0, 0, 0, .60),
    inset 0 0 0 8px rgba(245, 238, 223, .04);     /* subtle inner glow */
  /* Default placeholder background echoing the Ishtar-gate palette */
  background:
    linear-gradient(180deg, rgba(203, 106, 62, .16), rgba(14, 38, 89, .55)),
    conic-gradient(from 200deg at 50% 30%, #2C57C4, #163486, #0E2659, #1d2f63, #2C57C4);
}

/* Aspect-ratio shorthand variants */
.arch--portrait  { aspect-ratio: 4 / 5; }
.arch--square    { aspect-ratio: 1 / 1; }
.arch--landscape { aspect-ratio: 5 / 4; }

/* When arch contains a real photo */
.arch > img,
.arch > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;  /* favour face/top for portrait food shots */
}

/* Decorative bottom gradient overlay — softens photo edge */
.arch::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 34%;
  background: linear-gradient(180deg, transparent, rgba(14, 38, 89, .55));
  pointer-events: none;
}

/* Small decorative tile accent (bottom-left corner) — matches reference */
.arch__tileband {
  position: absolute;
  bottom: 26px;
  left:   26px;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  opacity: .85;
  background:
    conic-gradient(from 45deg, var(--cobalt) 25%, var(--cream) 0 50%, var(--cobalt) 0 75%, var(--cream) 0);
  background-size: 32px 32px;
  border: 1px solid rgba(216, 177, 92, .50);
  pointer-events: none;
}


/* --------------------------------------------------------------------------
   10. TILE-BG — Faint gold glazed-tile / geometric background pattern
   -------------------------------------------------------------------------- */

/* Replicates the Ishtar-gate star-tile texture as an SVG-free CSS pattern.
   Use as a fixed layer behind page content (z-index: 0). */
.tile-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: .07;
  pointer-events: none;
  /* Two offset radial rings form a repeating star / rosette grid */
  background-image:
    radial-gradient(circle at 0 0,     transparent 9px, var(--gold) 9px 10px, transparent 10px),
    radial-gradient(circle at 30px 30px, transparent 9px, var(--gold) 9px 10px, transparent 10px);
  background-size: 60px 60px;
}

/* Absolute variant — for sections that need the pattern scoped, not fixed */
.tile-bg--local {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .07;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 0 0,     transparent 9px, var(--gold) 9px 10px, transparent 10px),
    radial-gradient(circle at 30px 30px, transparent 9px, var(--gold) 9px 10px, transparent 10px);
  background-size: 60px 60px;
}


/* --------------------------------------------------------------------------
   11. GLOW HELPERS — Blurred radial colour accents
   -------------------------------------------------------------------------- */

/* Base glow — position via modifier classes or inline style */
.glow {
  position: fixed;
  z-index: 0;
  border-radius: 50%;
  filter: blur(120px);
  opacity: .45;
  pointer-events: none;
  will-change: transform;   /* keep off main thread */
}

/* Cobalt glow — top-right accent (as in reference mockup) */
.glow--cobalt {
  width: 520px;
  height: 520px;
  background: var(--cobalt);
  top:   -160px;
  right: -120px;
  opacity: .45;
}

/* Terracotta glow — bottom-left accent */
.glow--terracotta {
  width: 420px;
  height: 420px;
  background: var(--terracotta);
  bottom: -160px;
  left:   -120px;
  opacity: .30;
}

/* Gold glow — optional section accent */
.glow--gold {
  width: 360px;
  height: 360px;
  background: var(--gold);
  opacity: .18;
}

/* Absolute-positioned glows for scoped sections */
.glow--abs {
  position: absolute;
}


/* --------------------------------------------------------------------------
   12. CARD PRIMITIVE
   -------------------------------------------------------------------------- */

.card {
  background: rgba(245, 238, 223, .96);
  color: var(--ink);
  border-radius: var(--r-lg);
  padding: var(--s3);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

/* Card on lapis backgrounds */
.card--dark {
  background: rgba(22, 52, 134, .55);
  color: var(--cream);
  border: 1px solid rgba(216, 177, 92, .20);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Floating info card — mirrors .floatcard from reference */
.card--float {
  position: absolute;
  border-radius: var(--r);
  padding: 14px 16px;
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .50);
  width: 172px;
}

.card__label {
  font-size: .625rem;       /* 10px */
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 600;
}

.card__value {
  font-family: var(--display);
  font-size: 1.125rem;      /* 18px */
  margin-top: 3px;
  line-height: 1.15;
}

.card__sub {
  font-size: .75rem;
  color: #5b6480;
  margin-top: 4px;
}


/* --------------------------------------------------------------------------
   13. CHIP / BADGE PRIMITIVE
   -------------------------------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  font-size: .6875rem;      /* 11px */
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(216, 177, 92, .40);
  border-radius: 999px;
  padding: 7px 14px;
  white-space: nowrap;
}

/* Status indicator dot */
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dot--online {
  background: #5BD08A;
  box-shadow: 0 0 0 4px rgba(91, 208, 138, .18);
}


/* --------------------------------------------------------------------------
   14. DIVIDER
   -------------------------------------------------------------------------- */

.divider {
  border: none;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(216, 177, 92, .35) 20%,
    rgba(216, 177, 92, .35) 80%,
    transparent
  );
  margin-block: var(--s5);
}


/* --------------------------------------------------------------------------
   15. FORM ELEMENT BASE STYLES
   -------------------------------------------------------------------------- */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field__label {
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .01em;
}

.field__input,
.field__textarea,
.field__select {
  width: 100%;
  min-height: 44px;           /* accessible touch target */
  padding: 10px 14px;
  border-radius: var(--r);
  border: 1.5px solid rgba(14, 38, 89, .25);
  background: #fff;
  color: var(--ink);
  font-size: 1rem;
  transition:
    border-color var(--duration-ui) var(--ease),
    box-shadow   var(--duration-ui) var(--ease);
}

.field__input:focus,
.field__textarea:focus,
.field__select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(216, 177, 92, .22);
}

.field__input::placeholder,
.field__textarea::placeholder {
  color: #9FAACB;
}

.field__hint {
  font-size: .8125rem;
  color: #6b7a99;
}

.field__error {
  font-size: .8125rem;
  color: #c0392b;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Dark-background form variant (e.g., booking form on lapis) */
.field--dark .field__input,
.field--dark .field__textarea,
.field--dark .field__select {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(216, 177, 92, .30);
  color: var(--cream);
}

.field--dark .field__input::placeholder,
.field--dark .field__textarea::placeholder {
  color: rgba(245, 238, 223, .40);
}

.field--dark .field__input:focus,
.field--dark .field__textarea:focus,
.field--dark .field__select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(216, 177, 92, .18);
}

.field--dark .field__label {
  color: var(--sand);
}


/* --------------------------------------------------------------------------
   16. SECTION-THEME HELPERS
   -------------------------------------------------------------------------- */

/* Dark lapis section (used for hero, story sections) */
.bg-lapis {
  background-color: var(--lapis);
  color: var(--cream);
}

/* Slightly lighter lapis for alternating sections */
.bg-lapis-2 {
  background-color: var(--lapis-2);
  color: var(--cream);
}

/* Warm cream section (menus, testimonials) */
.bg-cream {
  background-color: var(--cream);
  color: var(--ink);
}

/* Sand background */
.bg-sand {
  background-color: var(--sand);
  color: var(--ink);
}