/*
 * site.css: the only stylesheet for nonnarina.co.uk (Nonna Rina).
 *
 * Sections, in order:
 *   1. Tokens        colours, fonts, spacing (custom properties)
 *   2. Fonts         @font-face for self-hosted fonts
 *   3. Base          reset and element defaults
 *   4. Layout        container, section spacing, two-column rows
 *   5. Components    one block per component: "=== Component: <name> ==="
 *   6. Pages         rare page-specific rules: "=== Page: <path> ==="
 *   7. Utilities     a handful of helpers
 *
 * Breakpoints (from the original Elementor CSS; media queries can't use custom properties):
 *   mobile  ≤ 767px    tablet 768px–1024px    desktop ≥ 1025px
 *   The menu collapses to the burger at ≤ 1024px (Elementor "dropdown: tablet").
 *
 * Fonts: the original used "Luthon Southard Serif/Script" (demo, personal-use-only TTFs).
 * They are replaced by Google Fonts (decision d5): serif → Gilda Display, script → Ms Madi.
 * If the owner holds a commercial licence, swap the two @font-face blocks in section 2
 * and the --font-serif / --font-script tokens back.
 */

/* ============ 1. Tokens ============ */
:root {
  /* Colours (from the original's computed styles) */
  --color-bg: #121212;            /* page background */
  --color-text: #ffffff;
  --color-header: 43 43 43;       /* header background rgb (#2b2b2b), alpha set by site.js */
  --color-nav-active: #61ce70;    /* nav underline (Elementor global accent) */
  --color-green: #559f59;         /* tricolour line + logo green */
  --color-white: #ffffff;
  --color-red: #ff0000;
  --color-card-starters: #83ff94;
  --color-card-mains: #ffffff;
  --color-card-sides: #e90000;
  --color-dropdown: #121212;

  /* Typography */
  --font-serif: "Gilda Display", "Times New Roman", serif;
  --font-script: "Ms Madi", cursive;
  /* Ms Madi runs ~15% wider than the original script font: script sizes are scaled by this
     factor (line boxes keep the original heights) so text widths match. */
  --script-scale: 0.87;
  --font-body: "Poppins", Arial, sans-serif;
  --font-app: "Roboto", Arial, sans-serif;

  /* Spacing and shape */
  --container: 1280px;
  --col-pad: 10px;                /* Elementor column padding */

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

  /* Header height (used for anchor offsets) */
  --header-h: 116px;
}
@media (max-width: 1024px) { :root { --header-h: 147px; } }
@media (max-width: 767px) { :root { --header-h: 97px; } }

/* ============ 2. Fonts ============ */
@font-face { font-family: "Gilda Display"; src: url("/assets/fonts/gilda-display-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Ms Madi"; src: url("/assets/fonts/ms-madi-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-200.woff2") format("woff2"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("/assets/fonts/roboto-300.woff2") format("woff2"); font-weight: 300; 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); overflow-x: hidden; }
img, svg, video, iframe { max-width: 100%; }
img, video { height: auto; display: block; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1; }
p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; transition: color var(--duration) var(--ease), background-color var(--duration) var(--ease); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-nav-active); outline-offset: 2px; }
/* Sections reached from the nav stop at the top of the viewport, as on the original. */
[id] { scroll-margin-top: 0; }

/* ============ 4. Layout ============ */
.container { width: 100%; max-width: var(--container); margin-inline: auto; }
/* Two equal columns side by side from 768px; stacked on mobile (Elementor columns). */
.split { display: grid; grid-template-columns: 1fr 1fr; }
.split__col { padding: var(--col-pad); display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 1024px) { .section--padded { padding-inline: 30px; } }
@media (max-width: 767px) { .split { grid-template-columns: 1fr; } }

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

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

/* === Component: site-header ===
 * Fixed bar over the hero. Background #2b2b2b whose opacity follows the scroll position
 * (site.js "headerfade": about 0.2 at the top → 1 at the bottom of the page, like the
 * original's Elementor Pro motion effect). On mobile the original only kept the burger
 * fixed and its header band scrolled away, so the bar has no background there. */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 10; padding: var(--col-pad); background: rgb(var(--color-header) / var(--header-alpha, 0.21)); transition: background-color var(--duration) var(--ease); }
.site-header__inner { display: flex; flex-direction: column; align-items: center; padding-block: 25px; }
.nav-toggle { display: none; background: none; border: 0; margin: 0 auto; padding: 0.25em; font-size: 51px; width: 1.5em; height: 1.5em; color: var(--color-white); cursor: pointer; align-items: center; justify-content: center; transition: color var(--duration) var(--ease); }
.nav-toggle:hover, .nav-toggle:focus { color: #121212; }
.nav-toggle svg { width: 1em; height: 1em; fill: currentColor; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }
.site-nav__list { display: flex; flex-wrap: wrap; justify-content: center; list-style: none; margin: 0; padding: 0; }
.site-nav__list a { position: relative; display: block; padding: 17px 20px 9px; font-family: var(--font-serif); font-size: 24px; line-height: 20px; color: var(--color-white); }
/* Underline pointer (Elementor "underline", fade animation) */
.site-nav__list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--color-nav-active); opacity: 0; transition: opacity var(--duration) var(--ease); }
.site-nav__list a:hover::after, .site-nav__list a:focus-visible::after, .site-nav__list a.is-active::after { opacity: 1; }

@media (max-width: 1024px) {
  .site-header__inner { padding-block: 25px; }
  .nav-toggle { display: inline-flex; }
  /* Full-width dropdown under the toggle; grid 0fr → 1fr row slides it open (0.3s). */
  .site-nav { position: absolute; top: 100%; left: 0; right: 0; display: grid; grid-template-rows: 0fr; align-items: stretch; background: var(--color-dropdown); transition: grid-template-rows var(--duration) var(--ease), visibility 0s linear var(--duration); visibility: hidden; }
  .site-nav.is-open { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows var(--duration) var(--ease); }
  .site-nav__list { display: block; overflow: hidden; min-height: 0; }
  .site-nav__list a { padding: 10px 0; font-size: 18px; line-height: 20px; text-align: center; }
  .site-nav__list a::after { display: none; }
  /* Hover/focus highlight only: the original's dropdown didn't show the scroll-spy state. */
  .site-nav__list a:hover, .site-nav__list a:focus-visible { background: var(--color-white); color: #121212; }
}
@media (max-width: 767px) {
  .site-header { background: transparent; }
  .site-header__inner { padding-block: 0; }
}

/* === Component: tricolour-link ===
 * Script/serif text link with the green/white/red underline from the original
 * (an inline SVG icon there; here a CSS gradient). Modifiers set the line width/offset. */
.tricolour-link { position: relative; display: inline-block; color: var(--color-white); }
.tricolour-link::after { content: ""; position: absolute; left: var(--line-left, 0px); top: var(--line-top, 100%); width: var(--line-width, 175px); height: 2.2px; transform: translateY(-50%); background: linear-gradient(to right, var(--color-green) 0 32.5%, transparent 32.5% 33.75%, var(--color-white) 33.75% 66.25%, transparent 66.25% 67.5%, var(--color-red) 67.5% 100%); pointer-events: none; }
/* About-section buttons: Ms Madi 38px, 12px/24px padding, line at the bottom of the text */
.tricolour-link--button { padding: 12px 24px; font-family: var(--font-script); font-size: calc(38px * var(--script-scale)); line-height: 38px; --line-top: calc(100% - 12px); --line-left: 5px; }
/* "View Full Menu": serif 38px, 209px line 13px under the text */
.tricolour-link--serif { font-family: var(--font-serif); font-size: 38px; line-height: 38px; --line-width: 209px; --line-top: calc(100% + 13px); --line-left: 50%; }
.tricolour-link--serif::after { transform: translate(-50%, -50%); }
.button-group { display: flex; flex-wrap: wrap; gap: 0 12px; list-style: none; margin: 0 0 79px; padding: 0; } /* bottom margin = the original's underline icon widgets */
.button-group li:nth-child(2) .tricolour-link--button { --line-left: 15px; }
@media (max-width: 1024px) {
  .button-group { flex-direction: column; align-items: flex-start; }
  .button-group li:nth-child(2) .tricolour-link--button { --line-left: 5px; }
}
@media (min-width: 1025px) { .button-group { flex-direction: row; } }

/* === Component: hero === */
.hero { position: relative; margin-top: -2px; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; background: #121212 url("/wp-content/uploads/2023/02/Hero.png") center center / cover no-repeat; }
.hero__inner { width: 100%; text-align: center; }
.hero__logo { width: 64%; margin-inline: auto; }
.hero__spacer { height: 85px; }
.hero__enter { font-family: var(--font-script); font-size: calc(64px * var(--script-scale)); line-height: 64px; }
.hero__enter a { color: var(--color-white); }
.hero__line { display: block; width: 1px; height: 72px; margin: 0 auto 4px; }
@media (min-width: 1025px) { .hero { background-attachment: fixed; } }
/* The original header overlapped the hero by its negative margin, so the hero started slightly above 0. */
@media (max-width: 1024px) { .hero { margin-top: -15px; } .hero__logo { width: 94%; } .hero__spacer { height: 110px; } }
@media (max-width: 767px) {
  .hero { margin-top: -65px; }
  .hero__logo { width: 100%; }
  .hero__spacer { height: 29px; }
  .hero__enter, .hero__line { display: none; }
}

/* === Component: section-title === */
.section-title { font-family: var(--font-serif); color: var(--color-white); }
.section-title--xl { font-size: 82px; }
.section-title--lg { font-size: 70px; }
@media (max-width: 1024px) { .section-title--xl { font-size: 56px; } .section-title--lg { font-size: 38px; } }

/* === Component: about === */
.about { margin-block: 120px; }
.about__text { font-weight: 300; font-size: 16px; line-height: normal; padding-top: 0; }
.about__text p { margin: 1em 0; }
.about__image { width: 402px; margin-inline: auto; }
@media (max-width: 1024px) { .about__text { font-size: 14px; } }
@media (max-width: 767px) { .about__text { font-size: 12px; } .about .button-group { margin-bottom: 87px; } }

/* === Component: menu-banner === */
.menu-banner { padding: 110px 10px; /* 100px + Elementor column padding */ background-image: url("/wp-content/uploads/2023/02/Italianflag.png"); text-align: center; }
.menu-banner .section-title { font-size: 60px; }
@media (max-width: 767px) { .menu-banner { background-position: center center; background-repeat: no-repeat; background-size: 623px auto; } }

/* === Component: menu-cards === */
.menu-cards { max-width: 1053px; margin: 100px auto; padding: var(--col-pad); }
.menu-cards__grid { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 1054px; margin-inline: auto; list-style: none; padding: 0; }
.menu-card { margin: 0 25px; border: 3px solid var(--card-border, #fff); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.menu-card--starters { --card-border: var(--color-card-starters); padding-top: 25px; }
.menu-card--mains { --card-border: var(--color-card-mains); padding-bottom: 25px; justify-content: flex-start; }
.menu-card--sides { --card-border: var(--color-card-sides); padding-top: 25px; }
.menu-card__title { width: 100%; font-family: var(--font-script); font-size: calc(81px * var(--script-scale)); line-height: 81px; }
.menu-card__title a { color: var(--color-white); }
.menu-card__img { width: 100%; }
.menu-card--starters .menu-card__title, .menu-card--sides .menu-card__title { margin-bottom: 25px; }
.menu-card--mains .menu-card__title { margin-top: 31px; }
.menu-cards__more { margin: 50px 0 106px; text-align: center; } /* bottom = the original's underline icon widget */
@media (max-width: 1024px) {
  .menu-cards { padding-inline: 40px; }
  .menu-card__title { font-size: calc(50px * var(--script-scale)); line-height: 50px; }
}
@media (max-width: 767px) {
  .menu-cards { padding-inline: 40px; }
  .menu-cards__grid { grid-template-columns: 1fr; }
  .menu-card--starters, .menu-card--mains { margin-bottom: 50px; }
}

/* === Component: app-promo === */
.app-promo__text { font-family: var(--font-app); font-weight: 300; font-size: 16px; line-height: normal; }
.app-promo__text p { margin: 1em 0; }
.app-promo__cta { display: flex; align-items: center; }
.app-promo__cta a { font-family: var(--font-script); font-size: calc(37px * var(--script-scale)); line-height: 37px; color: var(--color-white); }
.app-promo__arrow { width: 50px; height: 50px; margin-left: 14px; fill: var(--color-white); }
.app-promo__phone { width: 280px; margin-inline: auto; }
@media (max-width: 1024px) { .app-promo__phone { width: 69%; } }

/* === Component: site-footer (the original's "Get in Touch" block, #contact) === */
.site-footer { margin-block: 140px; padding-inline: 30px; }
.site-footer__inner { padding: var(--col-pad); }
.site-footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); }
.site-footer__col { padding: var(--col-pad); }
.site-footer__heading { font-family: var(--font-serif); font-size: 24px; line-height: 1; color: var(--color-white); }
.site-footer__links { list-style: none; margin: 20px 0 0; padding: 0; }
.site-footer__links li { display: flex; min-height: 18px; line-height: 1; }
.site-footer__links li + li { margin-top: 20px; }
.site-footer__links a { display: block; font-weight: 200; font-size: 16px; line-height: 1; padding-block: 1px; color: var(--color-white); }
.site-footer__text { display: flow-root; margin-top: 10px; font-weight: 200; font-size: 16px; line-height: normal; }
.site-footer__text p { margin: 1em 0; }
.site-footer__badges { display: block; margin-top: 10px; width: 162px; }
.site-footer__rule { margin: 25px 0 0; padding-block: 15px; border: 0; }
.site-footer__rule::before { content: ""; display: block; border-top: 3px solid var(--color-white); }
.site-footer__copy { font-family: var(--font-serif); font-size: 24px; line-height: 1; margin: 0; }
.site-footer__copy strong { font-weight: inherit; }
.site-footer__copy a { color: inherit; }
@media (max-width: 1024px) {
  .site-footer__heading { font-size: 16px; }
  .site-footer__links a, .site-footer__text { font-size: 12px; }
  .site-footer__links a { padding: 4px 0 2px; }
  .site-footer__badges { margin-top: 25px; width: 77%; max-width: 162px; }
  .site-footer__copy { text-align: center; }
}
@media (max-width: 767px) {
  .site-footer { margin-block: 50px; }
  .site-footer__cols { grid-template-columns: 1fr; }
  .site-footer__copy { font-size: 16px; }
}

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

/* === Page: /404.html === */
.not-found { min-height: 70vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: calc(var(--header-h) + 40px) 30px 60px; }
.not-found p { font-weight: 300; }
.not-found__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 24px; list-style: none; padding: 0; margin: 30px 0 0; }

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