/*
 * site.css: the only stylesheet for ovenandgrillhexham.co.uk.
 *
 * Sections, in order:
 *   1. Tokens        colours, fonts, spacing (custom properties)
 *   2. Fonts         @font-face for self-hosted Google Fonts
 *   3. Base          reset and element defaults
 *   4. Layout        container, rows and columns
 *   5. Components    one block per component: "=== Component: <name> ==="
 *   6. Pages         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 original was one Elementor page; spacing values below are the original's own
 * (paddings/margins in px), so the layout matches at every width.
 */

/* ============ 1. Tokens ============ */
:root {
  /* Colours (from the original's computed styles) */
  --color-text: #000000;
  --color-heading-dark: #191919;
  --color-bg: #ffffff;
  --color-cream: #f7f3ed;      /* welcome card and contact section */
  --color-primary: #4c8db3;    /* blue: buttons, boxes, headings, footer */
  --color-primary-contrast: #ffffff;
  --color-dark-button: #191919;
  --color-icon-muted: rgb(255 255 255 / 0.44);

  /* Typography */
  --font-display: "Londrina Solid", sans-serif;
  --font-body: "Rubik", sans-serif;
  --font-list: "Josefin Sans", sans-serif;
  --font-footer: "Roboto", sans-serif;

  /* Layout */
  --container: 1140px;
  --radius: 2px;
  --widget-gap: 20px;          /* Elementor's default space between widgets */

  /* Motion (match the original's timings) */
  --duration: 300ms;
  --ease: ease;
}

/* ============ 2. Fonts ============ */
/* Self-hosted Google Fonts (latin subset). Londrina Solid only exists in 100/300/400/900:
   the original asked for 500 and 600, which browsers render as 400 and 900 respectively. */
@font-face { font-family: "Londrina Solid"; src: url("/assets/fonts/londrina-solid-100.woff2") format("woff2"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Londrina Solid"; src: url("/assets/fonts/londrina-solid-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Londrina Solid"; src: url("/assets/fonts/londrina-solid-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Londrina Solid"; src: url("/assets/fonts/londrina-solid-900.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Rubik"; src: url("/assets/fonts/rubik-latin-variable.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Josefin Sans"; src: url("/assets/fonts/josefin-sans-latin-variable.woff2") format("woff2"); font-weight: 100 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("/assets/fonts/roboto-400.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-text); background: var(--color-bg); }
img, svg, video, iframe { max-width: 100%; }
img, video { height: auto; display: block; }
h1, h2, h3, h4, p { margin: 0; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

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

/* A row of columns; stacks on mobile. Column widths are set per section with --col-w. */
.row { display: flex; flex-wrap: wrap; }
.row--middle { align-items: center; }
.col { position: relative; display: flex; width: 100%; }
.col__wrap { position: relative; display: flex; flex-wrap: wrap; align-content: flex-start; width: 100%; }
.col__wrap > * { width: 100%; }
@media (min-width: 768px) {
  .row { flex-wrap: nowrap; }
  .col { width: var(--col-w, 100%); }
}

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

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

/* === Component: button (Elementor "shrink" hover: scale 0.9 over 0.3s) === */
.button { display: inline-block; font-family: var(--font-display); font-weight: 300; text-transform: uppercase; letter-spacing: 1.8px; line-height: 1; color: var(--color-primary-contrast); background: var(--color-dark-button); border-radius: var(--radius); padding: 16px 30px; text-decoration: none; transition: transform var(--duration) var(--ease), background-color var(--duration) var(--ease); font-size: 15px; }
.button:hover, .button:focus { transform: scale(0.9); background: var(--color-primary); color: var(--color-primary-contrast); }
.button--xl { font-size: 53px; background: var(--color-primary); }

/* Wrapper for a lone button so the line box doesn't add space under it */
.button-wrap { display: flex; }

/* === Component: divider (short double line under headings) === */
.divider { margin-top: -10px; padding-block: 5px; }
.divider::before { content: ""; display: block; width: 75px; border-top: 4px double var(--color-primary); }

/* === Component: info-box (blue box with title and text) === */
.info-box { background: var(--color-primary); color: #ffffff; border-radius: 0 0 var(--radius) var(--radius); }

/* === Component: image-box (small icon above a title) === */
.image-box { text-align: center; line-height: 0; }
.image-box__img { display: inline-block; margin: 0 0 10px; vertical-align: top; }
.image-box__img img { width: 100%; transition: transform var(--duration) var(--ease); }
.image-box__title { font-family: var(--font-display); color: var(--color-heading-dark); letter-spacing: 0.4px; line-height: normal; text-transform: capitalize; margin-top: calc(1em + 4px); }

/* === Component: icon-list (icon + text lines) === */
.icon-list { list-style: none; margin: 0; padding: 0; }
.icon-list__item { display: flex; align-items: center; }
.icon-list__icon { display: inline-flex; width: 14px; height: 14px; flex: none; color: var(--color-icon-muted); }
.icon-list__icon svg { width: 14px; height: 14px; fill: currentColor; }
.icon-list__text { padding-left: 5px; font-family: var(--font-list); font-size: 15px; font-weight: 300; line-height: 1.6; letter-spacing: 0.4px; color: #ffffff; }
.icon-list__text a { color: inherit; text-decoration: none; }

/* === Component: map (keyless Google Maps iframe) === */
.map { display: block; width: 100%; height: 670px; border: 0; }

/* === Component: site-footer (blue bar: copyright left, credit right) === */
.site-footer { background: var(--color-primary); color: #ffffff; }
.site-footer__inner { display: flex; align-items: center; }
.site-footer__col { width: 50%; padding: 10px; }
.site-footer p { margin: 16px 0; font-size: 16px; line-height: normal; }
.site-footer__copyright { font-family: var(--font-footer); }
.site-footer__credit { font-family: var(--font-body); text-align: end; }
.site-footer__credit a { color: #ffffff; text-decoration: none; }
@media (max-width: 767px) {
  .site-footer__col:first-child { width: 55%; }
  .site-footer__col:last-child { width: 45%; }
  .site-footer p { font-size: 14px; margin: 14px 0; }
}

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

/* === Page: / (home) === */

/* Hero: pizza photo, radial dark overlay, logo, tagline, XL Order Now, brush-stroke bottom edge */
.hero { position: relative; background: url("/wp-content/uploads/2021/02/image-3.jpg") left bottom / cover no-repeat; }
.hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(at bottom center, rgba(25, 7, 0, 0) 28%, #000000 100%); }
.hero__inner { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-height: 890px; text-align: center; }
.hero__inner > * + * { margin-top: var(--widget-gap); }
.hero__logo { width: 570px; }
.hero__tagline { margin-inline: 15%; font-family: var(--font-display); font-size: 24px; font-weight: 100; line-height: 1.4; letter-spacing: 2px; text-transform: uppercase; color: #ffffff; align-self: stretch; }
.hero__spacer { height: 80px; }
.hero__brush { align-self: stretch; height: 50px; margin-top: calc(var(--widget-gap) + 300px); background: url("/wp-content/uploads/2021/02/Brushoverlay03.png") center bottom / cover no-repeat; }
@media (max-width: 1024px) { .hero__tagline { margin-inline: 0; } }
@media (max-width: 767px) {
  .hero__inner { min-height: 207px; }
  .hero__tagline { margin-inline: 30px; font-size: 14px; }
  .hero__brush { margin-top: calc(var(--widget-gap) + 170px); }
}

/* Welcome: pizza with blue "Oven and Grill" box, and the cream welcome card */
.welcome { background: #ffffff; padding: 80px 0 0; }
.welcome__pizza { --col-w: 65.333%; }
.welcome__pizza > .col__wrap { padding: 0 527px 500px 0; background: url("/wp-content/uploads/2021/02/pizza.png") left center / cover no-repeat; }
.welcome__box { padding: 60px 40px; border-radius: 0 0 var(--radius) var(--radius); background: var(--color-primary); color: #ffffff; }
.welcome__box-title { font-family: var(--font-display); font-size: 35px; font-weight: 500; line-height: 35px; }
.welcome__box-text { margin-top: 20px; font-family: var(--font-body); font-size: 16px; font-weight: 300; line-height: 1.6; letter-spacing: 0.4px; }
.welcome__card { --col-w: 34.667%; }
.welcome__card > .col__wrap { margin-bottom: 170px; padding: 40px; background: var(--color-cream); border-radius: var(--radius); }
.welcome__card > .col__wrap > * + * { margin-top: var(--widget-gap); }
.welcome__card > .col__wrap > .divider { margin-top: calc(var(--widget-gap) - 10px); } /* widget gap minus the original's -10px pull-up */
.welcome__title { margin-top: -10px; font-family: var(--font-display); font-size: 45px; font-weight: 500; line-height: 55px; letter-spacing: 0.1px; color: var(--color-primary); }
.welcome__text { font-size: 16px; font-weight: 300; line-height: 1.6; letter-spacing: 0.1px; color: #000000; }
@media (max-width: 1024px) {
  .welcome { padding: 0 20px; }
  .welcome__pizza { --col-w: 62%; }
  .welcome__pizza > .col__wrap { padding: 0 280px 0 0; }
  .welcome__box { padding: 20px; }
  .welcome__box-title { font-size: 30px; }
  .welcome__box-text { font-size: 15px; }
  .welcome__card { --col-w: 38%; }
  .welcome__card > .col__wrap { margin: 0; padding: 40px 25px 30px; }
  .welcome__title { font-size: 34px; line-height: 44px; }
  .welcome__text { font-size: 15px; }
}
@media (max-width: 767px) {
  .welcome { padding: 0 0 0 15px; }
  .welcome__pizza > .col__wrap { padding: 0 160px 240px 0; }
  .welcome__box-text { margin-top: 10px; }
  .welcome__card > .col__wrap { margin: 40px 15px 0 0; }
}

/* Features: Fresh Pizza / Burgers icons, and the "Freshly Prepared Pizza" photo panel */
.features { background: #ffffff; padding: 0 0 120px; }
.features > .row { min-height: 930px; }
.features__icons { --col-w: 49.544%; align-items: center; }
.features__icons > .col__wrap { padding: 0 300px 0 0; }
.features__icons .image-box + .image-box { margin-top: calc(var(--widget-gap) + 60px); }
.image-box--pizza .image-box__img { width: 15%; }
.image-box--pizza .image-box__title { font-size: 28px; font-weight: 400; margin-bottom: 25px; }
.image-box--burger .image-box__img { width: 15%; }
.image-box--burger .image-box__title { font-size: 24px; font-weight: 500; margin-bottom: 28px; }
.features__photo { --col-w: 50%; align-items: center; }
.features__photo > .col__wrap { align-content: center; padding: 180px 0 220px; border-radius: var(--radius); background: url("/wp-content/uploads/2021/02/iStock-523441823.jpg") left top / cover repeat; }
.features__photo > .col__wrap::before { content: ""; position: absolute; inset: 0; border-radius: var(--radius); background: url("/wp-content/uploads/2021/02/Brushoverlay03.png") left bottom / auto no-repeat; }
.features__panel { position: relative; margin-left: -200px; padding: 70px 50px 60px; background: #ffffff; }
.features__panel > * + * { margin-top: var(--widget-gap); }
.features__panel > .divider { margin-top: calc(var(--widget-gap) - 10px); }
.features__title { font-family: var(--font-display); font-size: 45px; font-weight: 600; line-height: 64px; color: var(--color-primary); }
@media (max-width: 1024px) {
  .features { padding: 0 20px 80px 30px; }
  .features > .row { min-height: 720px; }
  .features__icons { --col-w: 50%; }
  .features__icons > .col__wrap { padding: 50px 120px 50px 0; }
  .image-box--pizza .image-box__img { width: 16%; }
  .image-box--pizza .image-box__title { margin-bottom: 16px; }
  .image-box--burger .image-box__img { width: 12%; }
  .image-box--burger .image-box__title { margin-bottom: 16px; }
  .features__photo { --col-w: 50%; }
  .features__photo > .col__wrap { padding: 0; }
  .features__panel { margin-left: -90px; padding: 30px 30px 30px 20px; }
  .features__title { font-size: 30px; line-height: 50px; }
}
@media (max-width: 767px) {
  .features { padding: 80px 20px 120px; }
  .features__icons > .col__wrap { margin-bottom: 80px; padding: 0; }
  .features__icons .image-box { padding: 0 20px; }
  .image-box--pizza .image-box__title, .image-box--burger .image-box__title { font-size: 24px; }
  .features__photo > .col__wrap { padding: 40px 0; }
  .features__panel { margin: 40px 50px 80px -9px; }
  .features__title { font-size: 26px; line-height: 40px; }
  .features__panel .divider::before { width: 21%; }
}

/* Contact: photo + blue contact card, and the map, on the cream section with a brush edge */
.contact { padding: 100px 0 160px; background: var(--color-cream) url("/wp-content/uploads/2021/02/Brushoverlay02-1.png") center bottom / contain no-repeat; }
.contact__card { --col-w: 24%; }
.contact__card > .col__wrap { margin-top: -266px; }
.contact__photo { border-radius: var(--radius) var(--radius) 0 0; width: 100%; }
.contact__box { padding: 70px 50px 60px; }
.contact__title { font-family: var(--font-display); font-size: 45px; font-weight: 400; line-height: 35px; }
.contact__name { margin-top: 30px; font-family: var(--font-body); font-size: 22px; font-weight: 300; line-height: 35px; letter-spacing: 0.4px; }
.contact__address { margin-top: 20px; font-family: var(--font-body); font-size: 15px; font-weight: 300; line-height: 1.6; letter-spacing: 0.4px; font-style: normal; }
.contact__box .icon-list { margin-top: 20px; }
.contact__map { --col-w: 76%; }
.contact__map > .col__wrap { padding: 0 40px 40px 140px; }
@media (max-width: 1024px) {
  .contact { padding: 60px 0 0 30px; }
  .contact__card { --col-w: 30%; }
  .contact__box { padding: 40px 25px; }
  .contact__title { font-size: 38px; }
  .contact__map { --col-w: 70%; }
  .contact__map > .col__wrap { padding: 0 50px; }
}
@media (max-width: 767px) {
  .contact { padding: 30px 0 0; }
  .contact__card > .col__wrap { margin: 0 30px; }
  .contact__title { font-size: 34px; }
  .contact__map > .col__wrap { padding: 60px 30px 0; }
}

/* === Page: /404.html (short hero) === */
.hero--short .hero__inner { min-height: 640px; }
.hero--short .hero__brush { margin-top: calc(var(--widget-gap) + 120px); }
.hero--short .button-wrap { justify-content: center; }
@media (max-width: 767px) {
  .hero--short .hero__inner { min-height: 0; padding-top: 20px; }
  .hero--short .button--xl { font-size: 36px; }
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}