/*
 * site.css: the only stylesheet for lotushouse.je.
 *
 * 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, grids
 *   5. Components    one block per component: "=== Component: <name> ==="
 *   6. Pages         rare page-specific rules: "=== Page: <path> ==="
 *   7. Utilities     a handful of helpers
 *
 * Breakpoints (Elementor defaults on the original; media queries can't use custom properties):
 *   mobile  ≤ 767px    tablet 768px–1024px    desktop ≥ 1025px
 *   plus one custom rule from the original at ≤ 768px (story heading line break hidden).
 *
 * Values come from the original Elementor CSS (post-12.css / post-14.css) and computed styles.
 */

/* ============ 1. Tokens ============ */
:root {
  /* Colours */
  --color-text: #232323;          /* headings, nav, story text */
  --color-text-strong: #000000;   /* footer text */
  --color-bg: #ecece4;            /* page background (whole site) */
  --color-primary: #ba1f21;       /* red: buttons, active/hover nav */
  --color-primary-contrast: #ffffff;
  --color-divider: #2222222b;
  --color-social-bg: #0000001c;
  --color-map-veil: rgb(236 236 228 / 0.3);

  /* Typography */
  --font-body: "Alegreya", Georgia, serif;
  /* Original heading font "Xhers" (commercial, unlicensed) → closest Google Font: Antonio (decision d4/d10) */
  --font-heading: "Antonio", "Arial Narrow", sans-serif;
  --heading-weight: 500;
  --heading-tracking: -0.02em;   /* Antonio is ~4% wider than Xhers; keeps the original line breaks */
  --text-nav: 20px;
  --text-hero: 112px;
  --text-h2: 48px;
  --text-lead: 24px;
  --text-footer: 18px;
  --text-footer-heading: 22px;
  --text-button: 24px;
  --tracking-footer: -0.03em;

  /* Spacing and shape */
  --container: 620px;             /* Elementor kit boxed width */
  --container-narrow: 460px;      /* app section */
  --container-wide: 1080px;       /* footer */
  --gutter: 32px;
  --radius: 0;

  /* Motion */
  --duration: 300ms;
  --ease: ease;
}

/* ============ 2. Fonts ============ */
@font-face { font-family: "Alegreya"; src: url("/assets/fonts/alegreya-400-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Antonio"; src: url("/assets/fonts/antonio-latin-variable.woff2") format("woff2"); font-weight: 100 700; 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: 16px; line-height: 1.5; color: var(--color-text); background: var(--color-bg); }
img, svg, video, iframe { max-width: 100%; }
img, video { height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--heading-weight); margin: 0; color: var(--color-text); text-transform: uppercase; letter-spacing: var(--heading-tracking); }
p { margin: 0; }
a { color: inherit; transition: color var(--duration) var(--ease); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ============ 4. Layout ============ */
.container { width: 100%; max-width: var(--container); margin-inline: auto; }
.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: var(--container-wide); }

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

/* === Component: skip-link === */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 8px 16px; background: #fff; color: var(--color-text); }
.skip-link:focus { left: 16px; }

/* === Component: site-header (static, logo centred above an inline nav; no mobile toggle, as original) === */
.site-header { padding: 32px; text-align: center; }
.site-header__logo { display: block; width: 160px; margin: 0 auto 32px; }
.site-nav__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 40px; list-style: none; margin: 0; padding: 0; }
.site-nav a { display: block; font-family: var(--font-body); font-size: var(--text-nav); line-height: 20px; color: var(--color-text); text-decoration: none; }
.site-nav a:hover, .site-nav a:focus, .site-nav a.is-active { color: var(--color-primary); }
@media (max-width: 767px) {
  .site-nav__list { gap: 0 20px; }
  .site-nav a { font-size: 18px; }
}

/* === Component: button (red, square, heading font; "Order Now") === */
.button { display: inline-block; padding: 12px 24px; border: 1px solid currentColor; border-radius: var(--radius); background: var(--color-primary); color: var(--color-primary-contrast); font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: var(--text-button); line-height: 1; text-transform: uppercase; letter-spacing: var(--heading-tracking); text-align: center; text-decoration: none; transition: all var(--duration) var(--ease); }
.button:hover, .button:focus { background: var(--color-primary); color: var(--color-primary-contrast); border-color: var(--color-primary-contrast); }
.button--block { display: block; width: 100%; }

/* === Component: hero (full-width photo, centred heading + button) === */
.hero { display: flex; align-items: center; min-height: 620px; background: center / cover no-repeat; background-image: var(--hero-image); }
.hero__inner { text-align: center; }
.hero__title { font-size: var(--text-hero); line-height: 1; color: #fff; margin-bottom: 48px; }
@media (max-width: 767px) {
  .hero__title { font-size: 96px; }
}

/* === Component: story (artwork background, heading, text + button beside an image) === */
.story { display: flex; align-items: center; min-height: 67.5vw; padding: 0 var(--gutter); background: center / 100% auto no-repeat; background-image: var(--story-image); }
.story__title { font-size: var(--text-h2); line-height: 1.4; text-align: center; margin-bottom: 40px; }
.story__cols { display: grid; grid-template-columns: 1fr 1fr; }
.story__text { display: flex; flex-direction: column; justify-content: space-between; margin-right: 16px; }
.story__lead { font-size: var(--text-lead); line-height: normal; color: var(--color-text); }
.story__media { display: flex; justify-content: flex-end; align-items: flex-start; }
@media (max-width: 768px) {
  .story__title br { display: none; }
}
@media (max-width: 767px) {
  .story { min-height: 0; padding: 80px var(--gutter); background-size: 0 auto; }
  .story__title { margin-bottom: 32px; }
  .story__cols { grid-template-columns: 1fr; }
  .story__text { margin: 0 0 48px; }
  .story__lead { margin-bottom: 32px; }
  .story__media img { width: 100%; }
}

/* === Component: app-promo (heading + store badge image) === */
.app-promo { padding: 120px var(--gutter); text-align: center; }
.app-promo__title { font-size: var(--text-h2); line-height: 1.4; margin-bottom: 48px; }
.app-promo__badge { display: inline-block; vertical-align: top; }
@media (max-width: 767px) {
  .app-promo { padding: 80px var(--gutter); }
}

/* === Component: map (keyless Google iframe, greyscale with a light veil, as original) === */
.map-block { position: relative; }
.map-block::before { content: ""; position: absolute; inset: 0; z-index: 1; background-color: var(--color-map-veil); pointer-events: none; }
.map { display: block; width: 100%; height: 440px; border: 0; filter: saturate(0%); }

/* === Component: site-footer (4 columns, divider, copyright + social icons) === */
.site-footer { padding: 80px var(--gutter) 40px; color: var(--color-text-strong); font-size: var(--text-footer); line-height: 1.6; letter-spacing: var(--tracking-footer); }
.site-footer__cols { display: flex; }
.site-footer__col:nth-child(1) { width: 22.667%; padding-right: 24px; }
.site-footer__col:nth-child(2) { width: 28.25%; padding-inline: 12px; }
.site-footer__col:nth-child(3) { width: 31.083%; padding-inline: 12px; }
.site-footer__col:nth-child(4) { width: 17.979%; padding-left: 24px; }
.site-footer__heading { font-size: var(--text-footer-heading); line-height: 1; letter-spacing: var(--heading-tracking); margin-bottom: 24px; }
.site-footer__links { list-style: none; margin: 0; padding: 0; line-height: normal; }
.site-footer__links li + li { margin-top: 12px; }
.site-footer__links a { text-decoration: none; color: var(--color-text-strong); }
.site-footer__badge { display: inline-block; }
.site-footer__divider { border: 0; border-top: 1px solid var(--color-divider); margin: 64px 0; }
.site-footer__bar { display: flex; align-items: flex-start; }
.site-footer__copyright { width: 73.417%; }
.site-footer__copyright a { color: inherit; text-decoration: none; }
.site-footer__copyright a:hover { text-decoration: underline; }
.site-footer__social { width: 26.543%; display: flex; justify-content: flex-end; gap: 16px; list-style: none; margin: 0; padding: 0; }
@media (max-width: 767px) {
  .site-footer__cols { flex-direction: column; }
  .site-footer__col:nth-child(n) { width: 100%; padding: 0; }
  .site-footer__col:not(:last-child) { margin-bottom: 24px; }
  .site-footer__divider { margin: 48px 0; }
  .site-footer__bar { flex-direction: column-reverse; }
  .site-footer__copyright, .site-footer__social { width: 100%; }
  .site-footer__social { justify-content: flex-start; }
}

/* === Component: social-icon (circle, not linked on the original: decision d5) === */
.social-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--color-social-bg); color: #000; }
.social-icon svg { width: 16px; height: 16px; fill: currentColor; }

/* === Component: contact-email (replaces WordPress forms; unused on this site, the original had no forms) === */
.contact-email { display: grid; gap: 16px; justify-items: start; }
.contact-email__address { font-weight: 600; word-break: break-word; }
.contact-email__phone a { color: inherit; }

/* === Component: not-found (404 page) === */
.not-found { padding: 120px var(--gutter); text-align: center; }
.not-found__title { font-size: var(--text-h2); line-height: 1.4; margin-bottom: 24px; }
.not-found__text { font-size: var(--text-lead); margin-bottom: 40px; }
.not-found__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

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

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

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