/*
 * site.css: the only stylesheet for this site (Pizza Kitchen Derby, one page).
 *
 * 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        tile rows (the Elementor-style flex sections)
 *   5. Components    one block per component: "=== Component: <name> ==="
 *   6. Pages         rare page-specific rules
 *   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
 *   plus 800px: the original's custom rule that makes each tile ("box") a square at ≤ 800px.
 *
 * Fonts (see SITE.md):
 *   --font-nav     Roboto (self-hosted): nav, address line
 *   --font-text    Nunito Sans (self-hosted) in place of Avenir (paid, decision d4)
 *   --font-display headings + Order Online button. The original asked for "ChalkBrush" from a
 *                  dead domain, so every visitor saw the browser's default serif (decision d5).
 *                  To switch to a real display font later, change this one token.
 */

/* ============ 1. Tokens ============ */
:root {
  --color-black: #000000;
  --color-white: #ffffff;
  --color-nav-active: #808080;
  --color-nav-hover: rgb(0 0 0 / 0.59);
  --color-dropdown-active: #3f444b;
  --color-tile-overlay: rgb(255 255 255 / 0.64);
  --color-tile-overlay-hover: rgb(255 255 255 / 0.7);

  --font-nav: "Roboto", Arial, sans-serif;
  --font-text: "Nunito Sans", Arial, sans-serif;
  --font-display: "Times New Roman", Times, serif;

  --container: 1140px;
  --duration: 300ms;
  --ease: ease;
}

/* ============ 2. Fonts ============ */
@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; }
@font-face { font-family: "Nunito Sans"; src: url("/assets/fonts/nunito-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 200 1000; 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-nav); font-size: 16px; line-height: 1.5; color: #333333; background: var(--color-white); overflow-x: hidden; }
img, svg, video, iframe { max-width: 100%; }
img, video { height: auto; display: block; }
h1, h2 { 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-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ============ 4. Layout ============ */
/* A tile row = one full-width Elementor section: flex row of two 50% tiles, a min-height
   shared between the rows when they stack (tablet/mobile), black border lines. */
.tile-row { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; min-height: 55vh; background: var(--color-black); border-style: solid; border-color: var(--color-black); }
.tile-row--hours { border-width: 5px 0 1px; }
.tile-row--app { border-width: 3px 0 1px; }
.tile { position: relative; display: flex; flex-wrap: wrap; align-content: center; align-items: center; justify-content: center; width: 50%; padding: 10px; text-align: center; background-color: var(--color-white); background-repeat: repeat; background-size: cover; border-right: 2px solid var(--color-black); }
.tile > * { position: relative; width: 100%; }
@media (max-width: 1024px) {
  .tile-row { min-height: 100vh; }
  .tile { width: 100%; }
}
@media (max-width: 800px) {
  .tile { aspect-ratio: 1 / 1; }
}
@media (max-width: 767px) {
  .tile-row { min-height: 80vh; }
  .tile-row--reverse-mobile > .tile:first-child { order: 10; }
}

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

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

/* === Component: site-header ===
   Transparent nav band in normal flow; the hero is pulled up under it (margin-bottom -6% here,
   hero margin-top -22% on mobile), as on the original. */
.site-header { position: relative; z-index: 20; margin-bottom: -6%; }
.site-header__inner { width: min(100%, var(--container)); margin-inline: auto; padding: 55px 10px 35px; display: flex; flex-direction: column; }
.site-nav__list { display: flex; flex-wrap: wrap; justify-content: center; list-style: none; margin: 0; padding: 0; }
.site-nav__list li + li { margin-left: 30px; }
.site-nav__list a { display: block; font-family: var(--font-nav); font-size: 24px; font-weight: 700; line-height: 20px; letter-spacing: 0.2px; color: var(--color-white); }
.site-nav__list a:hover, .site-nav__list a:focus { color: var(--color-nav-hover); }
.site-nav__list a[aria-current="page"] { color: var(--color-nav-active); }
.nav-toggle { display: none; }
@media (max-width: 767px) {
  .site-header { margin-bottom: 0; z-index: 999; }
  .site-header__inner { position: static; padding: 30px 10px 10px; }
  .nav-toggle { display: flex; align-items: center; justify-content: center; align-self: flex-end; width: 33px; height: 33px; padding: 0; border: 0; border-radius: 0; background: var(--color-white); color: var(--color-black); cursor: pointer; }
  .nav-toggle svg { width: 22px; height: 22px; }
  .nav-toggle__close, .nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }
  /* full-width black dropdown 10px under the toggle; slides open (grid 0fr -> 1fr) */
  .site-nav { position: absolute; left: 0; right: 0; top: 73px; display: grid; grid-template-rows: 0fr; align-items: stretch; background: var(--color-black); transition: grid-template-rows var(--duration) var(--ease); }
  .site-nav.is-open { grid-template-rows: 1fr; }
  .site-nav__clip { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s var(--duration); }
  .site-nav.is-open .site-nav__clip { visibility: visible; transition: none; }
  .site-nav__list { flex-direction: column; flex-wrap: nowrap; }
  .site-nav__list li + li { margin-left: 0; }
  .site-nav__list a, .site-nav__list a[aria-current="page"] { padding: 10px 20px; color: var(--color-white); }
  .site-nav__list a:hover, .site-nav__list a:focus, .site-nav__list a[aria-current="page"] { background: var(--color-dropdown-active); color: var(--color-white); }
}

/* === Component: hero === */
.hero { position: relative; display: flex; border-style: solid; border-color: var(--color-black); border-width: 2px 0 0 1px; background: var(--color-black) url("/wp-content/uploads/2023/11/burger-min.png") 10% 3% / cover no-repeat; }
.hero::before { content: ""; position: absolute; inset: 0; background: var(--color-black); opacity: 0.72; }
.hero__inner { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: min(100%, var(--container)); min-height: 102vh; margin-inline: auto; padding: 10px; }
.hero__logo { width: 50%; margin-bottom: 20px; }
@media (max-width: 1024px) {
  .hero { background-position: 16% 80%; background-size: 280% auto; }
  .hero__inner { min-height: 50vh; }
}
@media (max-width: 767px) {
  .hero { margin-top: -22%; background-position: center center; background-size: auto; }
  .hero__logo { width: 70%; margin-bottom: 25px; }
}

/* === Component: button (pill, "Order Online") === */
.button { display: inline-block; font: inherit; text-decoration: none; cursor: pointer; transition: all var(--duration) var(--ease); }
.button--pill { padding: 10px 20px 18px; border-radius: 50px; background: var(--color-white); color: var(--color-black); font-family: var(--font-display); font-size: 26px; font-weight: 700; line-height: 1; }
@media (max-width: 767px) { .button--pill { font-size: 20px; } }

/* === Component: tile (text tiles on wood background; image tiles) === */
.tile--text { background-image: url("/wp-content/uploads/2023/11/AdobeStock_311189265.jpeg"); background-position: center center; }
.tile--text::before { content: ""; position: absolute; inset: 0; width: auto; background: var(--color-tile-overlay); transition: background 2s; }
.tile--text:hover::before { background: var(--color-tile-overlay-hover); }
.tile--app { border-right-width: 0; }
.tile--burger { background-image: url("/wp-content/uploads/2023/11/burger-4-1.png"); background-position: center right; }
.tile--brownies { background-image: url("/wp-content/uploads/2023/11/dessert-min.png"); background-position: center right; background-size: 300% auto; }
.tile--image::after { content: ""; display: block; height: 50px; }
.tile__title { font-family: var(--font-display); font-size: 48px; font-weight: 500; line-height: 1; color: var(--color-black); }
.tile__text { margin: 40px 0 10px; font-family: var(--font-text); font-size: 24px; font-weight: 700; line-height: 1.5; color: var(--color-black); }
.tile__badges { width: 360px; margin-inline: auto; margin-top: 20px; }
@media (max-width: 767px) {
  .tile--text { padding: 20px; }
  .tile--image { padding: 0; }
  .tile--image::after { height: 35vh; }
  .tile--brownies { background-size: 350% auto; }
  .tile--hours .tile__title { font-size: 34px; line-height: 1.4; }
  .tile--app .tile__title { font-size: 34px; line-height: 1.3; }
  .tile__text { margin-top: 35px; margin-bottom: 0; font-size: 18px; }
}

/* === Component: contact (Contact Us block with icon list) === */
.contact { display: flex; margin-block: 3%; }
.contact__inner { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; padding: 10px; text-align: center; }
.contact .tile__title { font-weight: 400; }
@media (max-width: 1024px) {
  .contact { margin-block: 0; }
  .contact__inner { min-height: 50vh; }
}
@media (max-width: 800px) { .contact__inner { aspect-ratio: 1 / 1; } }
@media (max-width: 767px) {
  .contact__inner { min-height: 40vh; }
  .contact .tile__title { font-size: 34px; }
}

/* === Component: icon-list === */
.icon-list { list-style: none; margin: 35px 0 0; padding: 0; }
.icon-list__item { display: flex; justify-content: center; align-items: center; line-height: 1.25; font-family: var(--font-nav); font-size: 26px; font-weight: 500; color: var(--color-black); }
.icon-list__item + .icon-list__item { margin-top: 12px; }
.icon-list__item a { display: flex; align-items: center; font-family: var(--font-text); color: var(--color-black); }
.icon-list__text { padding-left: 5px; }
.icon-list .icon { flex: none; width: 30px; height: 24px; color: var(--color-black); }
@media (max-width: 1024px) { .icon-list { margin: 35px 15px 15px; } }
@media (max-width: 767px) {
  .icon-list__item { font-size: 18px; }
  .icon-list .icon { width: 27.5px; height: 22px; }
}

/* === Component: site-footer (added: "Powered by OrderYOYO", decision d8) === */
.site-footer__bar { padding: 12px 16px; text-align: center; font-family: var(--font-nav); font-size: 14px; color: var(--color-black); }
.site-footer__bar p { margin: 0; }
.site-footer__bar a { text-decoration: underline; }

/* === Component: page-404 (404.html: message on the hero background) === */
.page-404 { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; width: 100%; min-height: 80vh; padding: 140px 20px 80px; text-align: center; }
.page-404__title { color: var(--color-white); }
.hero--404 { background-size: cover; }
.page-404 p { max-width: 36rem; font-family: var(--font-text); font-size: 20px; color: var(--color-white); }

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