/*
 * site.css: the only stylesheet for this site (Mama's Greek Kitchen).
 *
 * Sections, in order:
 *   1. Tokens        colours, fonts, spacing, breakpoints (custom properties)
 *   2. Fonts         @font-face for self-hosted fonts
 *   3. Base          reset and element defaults
 *   4. Layout        container, sections, columns
 *   5. Components    one block per component: "=== Component: <name> ==="
 *   6. Pages         rare page-specific rules: "=== Page: <path> ==="
 *   7. Utilities     a handful of helpers
 *
 * Breakpoints (the original's Elementor breakpoints; media queries can't use custom properties):
 *   mobile  ≤ 767px    tablet 768px–1024px    desktop ≥ 1025px
 *   Container: 1140px max on desktop, full width (1024px max) on tablet, full width on mobile.
 *
 * Editing: change tokens to restyle the site; add new components as new blocks;
 * add modifier classes (.button--large) instead of changing a component for one page.
 */

/* ============ 1. Tokens ============ */
:root {
  /* Colours (from the original's computed styles) */
  --color-text: #ffffff;          /* all visible text on the original is white */
  --color-text-dark: #5a5d60;     /* text on light backgrounds (404 page) */
  --color-bg: #5a5d60;            /* grey info band */
  --color-primary: #00a7be;       /* teal: ORDER ONLINE button, footer bar */
  --color-primary-contrast: #ffffff;
  --color-border-light: #ffffff;  /* button border */

  /* Typography */
  --font-body: "Roboto", sans-serif;
  --font-heading: "Roboto", sans-serif;
  --font-accent: "Poiret One", sans-serif;  /* ORDER ONLINE button */
  --text-base: 1rem;               /* 16px: footer bar */
  --text-info: 1.25rem;            /* 20px: address and hours */
  --leading-info: 1.4;
  --text-phone: 39px;              /* Elementor "XL" heading size */
  --text-button: 26px;
  --text-button-mobile: 18px;

  /* Spacing and shape */
  --space-xs: 10px;                /* Elementor default column gap (padding) */
  --space-sm: 20px;                /* Elementor widget spacing */
  --space-md: 30px;                /* Elementor "wider" column gap (padding) */
  --space-lg: 50px;                /* info band vertical padding */
  --container: 1140px;
  --radius: 3px;

  /* Motion (the original's button transition: no visible hover change) */
  --duration: 300ms;
  --ease: ease;
}

/* ============ 2. Fonts ============ */
/* Self-hosted Google Fonts (SIL Open Font Licence), latin subset. */
@font-face { font-family: "Roboto"; src: url("/assets/fonts/roboto-latin-variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
/* Poiret One only exists in 400; the button asks for 600, so browsers synthesise bold exactly as on the original. */
@font-face { font-family: "Poiret One"; src: url("/assets/fonts/poiret-one-400-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

/* ============ 3. Base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-body); font-size: var(--text-base); line-height: normal; color: var(--color-text-dark); background: #ffffff; }
img, svg, video, iframe { max-width: 100%; }
img, video { height: auto; }
h1, h2, h3, h4 { font-family: var(--font-heading); }
a { color: inherit; transition: color var(--duration) var(--ease); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-primary-contrast); outline-offset: 2px; box-shadow: 0 0 0 4px var(--color-primary); }

/* ============ 4. Layout ============ */
/* Boxed container: 1140px on desktop, full width below (as Elementor "boxed" sections). */
.container { width: 100%; max-width: var(--container); margin-inline: auto; }
@media (max-width: 1024px) { .container { max-width: 1024px; } }

/* Two equal columns side by side; stack on mobile unless the component says otherwise. */
.columns { display: flex; flex-wrap: wrap; }
.columns > * { width: 50%; }
@media (max-width: 767px) { .columns > * { width: 100%; } }

/* ============ 5. Components ============ */

/* === Component: skip-link === */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: var(--space-xs) var(--space-sm); background: #ffffff; color: var(--color-text-dark); }
.skip-link:focus { left: var(--space-sm); }

/* === Component: hero (full-height wood background with logo, button and app badges) === */
/* Background image as on the original (Elementor section background, cover, centred, scrolls with the page). */
.hero { background-image: url("/wp-content/uploads/2020/11/pexels-lukas-349609.jpg"); background-position: center center; background-size: cover; }
.hero__inner { display: flex; align-items: center; min-height: 100vh; }
.hero__content { width: 100%; padding: var(--space-xs); text-align: center; }
.hero__content > * { margin: 0 0 var(--space-sm); }
.hero__content > :last-child { margin-bottom: 0; }
.hero__logo, .hero__badges img { display: block; margin-inline: auto; }
.hero__action { display: flex; justify-content: center; }
.hero__spacer { height: 25px; }
.hero__spacer--small { height: 10px; }
.hero__badges { display: block; width: fit-content; margin-inline: auto; }
@media (max-width: 767px) {
  .hero__content > .hero__logo-wrap { margin: 50px 50px 70px; }
  .hero__content > .hero__badges-wrap { margin: 0 20px; }
}

/* === Component: button (ORDER ONLINE) === */
.button { display: inline-block; padding: 20px 30px; font-family: var(--font-accent); font-size: var(--text-button); font-weight: 600; line-height: 1; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; color: var(--color-primary-contrast); background-color: var(--color-primary); border: 2px solid var(--color-border-light); border-radius: var(--radius); transition: all var(--duration) var(--ease); }
.button:hover, .button:focus { color: var(--color-primary-contrast); }
@media (max-width: 767px) { .button { font-size: var(--text-button-mobile); } }

/* === Component: info-band (grey band: map left, phone/address/hours right) === */
.info-band { background-color: var(--color-bg); padding: var(--space-lg) 0; color: var(--color-text); }
.info-band__col { display: flex; flex-wrap: wrap; align-content: flex-start; padding: var(--space-md); }
.info-band__col--details { align-items: center; align-content: center; }
.info-band__col > * { width: 100%; }
.info-band__phone { margin: 0 0 var(--space-sm); font-size: var(--text-phone); font-weight: 600; line-height: 1; color: var(--color-text); }
.info-band__details { font-size: var(--text-info); line-height: var(--leading-info); }
.info-band__details p { margin: var(--space-sm) 0; }
.info-band__details p:last-child { margin-bottom: 0; }
.hours { margin: 0; padding: 0; list-style: none; }
@media (max-width: 767px) {
  .info-band__phone, .info-band__details { text-align: center; }
}

/* === Component: map (keyless Google Maps iframe) === */
.map { display: block; width: 100%; height: 380px; border: 0; }
@media (max-width: 767px) { .map { height: 300px; } }

/* === Component: site-footer (teal bar: copyright left, credit right) === */
.site-footer { background-color: var(--color-primary); color: var(--color-text); }
.site-footer__col { display: flex; flex-wrap: wrap; align-items: center; align-content: center; padding: var(--space-xs); }
.site-footer__col > * { width: 100%; }
.site-footer p { margin: 1em 0; }
.site-footer__credit { text-align: end; }
.site-footer__credit a { color: #ffffff; text-decoration: none; }
.site-footer__credit a:hover { text-decoration: underline; }
@media (max-width: 767px) {
  .site-footer .columns > .site-footer__col--copyright { width: 55%; }
  .site-footer .columns > .site-footer__col--credit { width: 45%; }
  .site-footer__copyright { font-size: 12px; }
  .site-footer__credit { font-size: 14px; }
}

/* === Component: page-content (simple text pages: 404) === */
.page-content { padding: var(--space-lg) var(--space-sm); text-align: center; color: var(--color-text-dark); }
.page-content h1 { font-size: var(--text-phone); font-weight: 600; line-height: 1; margin: 0 0 var(--space-sm); }
.page-content p { font-size: var(--text-info); line-height: var(--leading-info); margin: 0 0 var(--space-sm); }
.page-content a:not(.button) { color: var(--color-primary); }
/* 404 page: the grey band with the logo, centred message and the ORDER ONLINE button */
.not-found { min-height: calc(100vh - 71px); }
.not-found .page-content { color: var(--color-text); }
.not-found .page-content a:not(.button) { color: var(--color-text); }
.not-found__logo { display: block; margin: 0 auto var(--space-sm); }

/* === Component: contact-email (replaces WordPress forms; not used on this site, which had none) === */
.contact-email { display: grid; gap: var(--space-sm); justify-items: start; }
.contact-email__address { font-weight: 600; word-break: break-word; }
.contact-email__phone a { color: inherit; }

/* ============ 6. Pages ============ */

/* ============ 7. Utilities ============ */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.text-center { text-align: center; }

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}