/*
 * site.css: the only stylesheet for humblerutlandcafe.co.uk.
 *
 * 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, sections
 *   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
 *
 * Values come from the original's Elementor CSS (post-7.css) and computed styles.
 * Editing: change tokens to restyle the site; add new components as new blocks;
 * add modifier classes instead of changing a component for one page.
 */

/* ============ 1. Tokens ============ */
:root {
  /* Colours */
  --color-red: #de0b04;            /* intro overlay, contact section */
  --color-social: #ba0006;         /* header social icons */
  --color-white: #ffffff;
  --color-offwhite: #fafafa;       /* hero base, address text */
  --color-header-border: #f7f7f7;
  --color-dark-overlay: #2d2d2d;   /* order-online overlay */
  --color-copy: #0c0c0c;           /* copyright text */
  --color-black: #000000;
  --color-top-hover: #e2e2e2;      /* back-to-top hover */

  /* Typography: Helvetica is a system font (Arial on Windows); Open Sans is self-hosted */
  --font-body: Helvetica, Arial, sans-serif;
  --font-address: "Open Sans", Arial, sans-serif;

  /* Layout */
  --container: 1140px;             /* Elementor boxed width (desktop) */
  --container-tablet: 1024px;
  --container-mobile: 767px;
  --gutter: 10px;                  /* Elementor column padding */
  --widget-gap: 20px;              /* Elementor space between widgets */

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

/* ============ 2. Fonts ============ */
@font-face { font-family: "Open Sans"; src: url("/assets/fonts/open-sans-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: 16px; line-height: 1.5; color: var(--color-black); background: var(--color-white); }
img, svg, video, iframe { max-width: 100%; }
img, video { height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--font-body); margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; transition: color var(--duration) var(--ease); }
a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.icon { width: 1em; height: 1em; fill: currentColor; display: block; }

/* ============ 4. Layout ============ */
/* Elementor-style boxed container: max 1140 / 1024 / 767; columns add a 10px gutter. */
.container { width: 100%; max-width: var(--container); margin-inline: auto; }
@media (max-width: 1024px) { .container { max-width: var(--container-tablet); } }
@media (max-width: 767px) { .container { max-width: var(--container-mobile); } }

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

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

/* === Component: site-header (logo left, social icons right; not sticky) === */
.site-header { position: relative; z-index: 999; background: var(--color-white); border-bottom: 1px solid var(--color-header-border); padding-inline: 15px; }
.site-header__inner { display: flex; align-items: center; }
.site-header__brand, .site-header__social { width: 50%; padding: var(--gutter); }
.site-header__logo { display: block; width: fit-content; }
.site-header__logo img { width: 180px; max-width: 100%; }
.site-header__social { display: flex; justify-content: flex-end; }
@media (max-width: 767px) { .site-header__social { justify-content: center; } }

/* === Component: social-icons (Font Awesome icons as inline SVG, 20px, red; black on hover) === */
.social-icons { display: flex; gap: 5px; list-style: none; margin: 0; padding: 0; }
.social-icons a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-size: 20px; color: var(--color-social); }
.social-icons a:hover { color: var(--color-black); }

/* === Component: hero (background photo under a white wash; the intro overlaps it by 110px) === */
.hero { position: relative; min-height: 650px; background-color: var(--color-offwhite); }
.hero::before { content: ""; position: absolute; inset: 0; background: var(--color-white) var(--hero-image) no-repeat bottom center / cover; opacity: 0.75; }
@media (min-width: 1025px) { .hero::before { background-attachment: fixed; } }
@media (max-width: 1024px) { .hero { min-height: 400px; } }
@media (max-width: 767px) { .hero { min-height: 300px; } }

/* === Component: bg-section (section with a background photo and a colour overlay) === */
.bg-section { position: relative; background-image: var(--section-image); background-position: center center; }
.bg-section::before { content: ""; position: absolute; inset: 0; background-color: var(--overlay-color); opacity: var(--overlay-opacity); pointer-events: none; }
.bg-section > * { position: relative; }
.bg-section--cover { background-size: cover; background-repeat: no-repeat; }
@media (min-width: 1025px) { .bg-section--fixed { background-attachment: fixed; } }

/* === Component: intro (red story + opening hours block) === */
.intro { --overlay-color: var(--color-red); --overlay-opacity: 0.85; margin-top: -110px; padding: 100px; text-align: center; color: var(--color-white); }
.intro__inner { padding: var(--gutter); }
.intro__title { font-size: 60px; font-weight: 700; line-height: 1; letter-spacing: 0.5px; }
.intro__divider { margin-top: var(--widget-gap); padding-block: 15px; }
.intro__divider::before { content: ""; display: block; width: 10%; margin: 0 auto; border-top: 3px solid var(--color-white); }
.intro__text { display: flow-root; margin-top: var(--widget-gap); font-size: 18px; line-height: 1.4; }
.intro__text p { margin-block: 18px; }
.intro__text .intro__hours { margin: 0; padding-bottom: 1.4em; }
@media (max-width: 1024px) { .intro__title { font-size: 48px; } }
@media (max-width: 767px) {
  .intro { padding: 50px 25px; }
  .intro__title { font-size: 26px; }
}

/* === Component: cards (two photo cards with a heading and outlined button) === */
.cards { --overlay-color: var(--color-white); --overlay-opacity: 0.8; padding-block: 110px; }
.cards__grid { display: flex; }
.card { --overlay-color: var(--color-black); --overlay-opacity: 0.62; width: calc(50% - 2 * var(--gutter)); margin: var(--gutter); padding: var(--gutter); text-align: center; background-size: cover; }
.card__title { margin-top: calc(50px + var(--widget-gap)); font-size: 42px; font-weight: 400; line-height: 1; letter-spacing: 2px; color: var(--color-white); }
.card__action, .order__action { display: flex; justify-content: center; }
.card__action { margin-top: calc(var(--widget-gap) + 16px); margin-bottom: calc(var(--widget-gap) + 50px); }
.card .button { font-size: 20px; }
.card--bottom { background-position: bottom center; }
@media (max-width: 1024px) {
  .card__title, .card .button { font-size: 16px; }
}
@media (max-width: 767px) {
  .cards__grid { flex-direction: column; }
  .card { width: auto; }
  .card__title, .card .button { font-size: 24px; }
}

/* === Component: button (outlined white, grow on hover) === */
.button { display: inline-block; padding: 15px 40px; border: 2px solid var(--color-white); border-radius: 0; background: transparent; color: var(--color-white); font-family: var(--font-body); font-size: 20px; font-weight: 400; line-height: 1; letter-spacing: 2px; text-decoration: none; }
.button--caps { font-weight: 500; text-transform: uppercase; }

/* === Component: grow (Elementor "grow" hover animation) === */
.grow { transition-duration: var(--duration); transition-property: transform; }
.grow:hover, .grow:focus-visible, .grow:active { transform: scale(1.1); }

/* === Component: order-banner (dark photo banner with heading + button) === */
.order { --overlay-color: var(--color-dark-overlay); --overlay-opacity: 0.82; padding-block: 68px; text-align: center; }
.order__inner { padding: var(--gutter); }
.order__title { margin-top: calc(50px + var(--widget-gap)); font-size: 42px; font-weight: 600; line-height: 1.3; letter-spacing: 4px; text-transform: uppercase; color: var(--color-white); }
.order__action { margin-top: calc(var(--widget-gap) + 26px); margin-bottom: calc(var(--widget-gap) + 50px); }
@media (max-width: 1024px) { .order__title { font-size: 34px; } }
@media (max-width: 767px) { .order__title { font-size: 38px; } }

/* === Component: contact (red block: name + address left, map right) === */
.contact { background: var(--color-red); padding-block: 110px; color: var(--color-white); }
.contact__grid { display: flex; align-items: center; }
.contact__details { width: 40%; padding: var(--gutter); }
.contact__map { width: 60%; padding: var(--gutter); }
.contact__title { font-size: 26px; font-weight: 600; line-height: 1; letter-spacing: 0.3px; }
.contact__address { margin: calc(var(--widget-gap) + 16px) 0 16px; font-family: var(--font-address); font-size: 16px; line-height: 42px; letter-spacing: 0.3px; color: var(--color-offwhite); }
@media (max-width: 1024px) { .contact { padding: 50px 25px 100px; } }
@media (max-width: 767px) {
  .contact { padding: 50px 25px; text-align: center; }
  .contact__grid { flex-direction: column; align-items: stretch; }
  .contact__details, .contact__map { width: 100%; }
}

/* === Component: map === */
.map { display: block; width: 100%; height: 400px; border: 0; }

/* === Component: site-footer (white copyright bar + back-to-top) === */
.site-footer { background: var(--color-white); padding: 25px 0; }
.site-footer__inner { display: flex; align-items: center; }
.site-footer__copyright { width: 50%; padding: var(--gutter); font-size: 16px; font-weight: 300; line-height: 26px; letter-spacing: 0.3px; color: var(--color-copy); }
.site-footer__copyright a { color: var(--color-black); }
.site-footer__top { width: 50%; min-height: 59px; padding: var(--gutter); display: flex; align-items: center; justify-content: flex-end; }
@media (max-width: 1024px) {
  .site-footer { padding: 25px; }
  .site-footer__copyright { width: 75%; }
  .site-footer__top { width: 25%; }
}
@media (max-width: 767px) {
  .site-footer__inner { flex-direction: column; align-items: stretch; }
  .site-footer__copyright, .site-footer__top { width: 100%; text-align: center; }
  .site-footer__top { justify-content: center; }
}

/* === Component: back-to-top (double chevron, black; light grey + grow on hover) === */
.back-to-top { display: inline-block; font-size: 35px; line-height: 1; color: var(--color-black); }
.back-to-top:hover { color: var(--color-top-hover); }

/* === Component: not-found (404 page) === */
.not-found { padding: 110px 25px; text-align: center; }
.not-found__title { font-size: 42px; font-weight: 700; line-height: 1.2; }
.not-found__text { max-width: 640px; margin: 20px auto 0; font-size: 18px; line-height: 1.4; }
.not-found__action { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 36px; }

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