/*
 * site.css: the only stylesheet for dansfishbar.com.
 *
 * Sections, in order:
 *   1. Tokens        colours, fonts, spacing, motion (custom properties)
 *   2. Fonts         @font-face for self-hosted Montserrat and Open Sans
 *   3. Base          reset and element defaults
 *   4. Layout        content column
 *   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 "dansfishbar" App4 theme; media queries can't use custom properties):
 *   ≤ 1020px  home tile text slightly smaller
 *   ≤ 768px   mobile layout: "MENU" bar with slide-down list, stacked top bar, 15px body text,
 *             smaller page banner, home tiles 2 per row, app badges without the label
 *   ≤ 580px   home tile text smaller again
 *   ≤ 420px   home tiles one per row
 *
 * 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 (from the original's computed styles) */
  --color-text: #333333;
  --color-heading: #181818;
  --color-bg: #ffffff;
  --color-primary: #3f51b5;      /* top bar, nav links, MENU bar, app band, review text, buttons */
  --color-primary-contrast: #ffffff;
  --color-hover: #f51017;        /* link hover (red) */
  --color-focus: #e61828;        /* link focus */
  --color-button-hover: #cccccc;
  --color-divider: #d8d8d8;      /* mobile menu dividers */
  --color-menu-hover: #eeeeee;   /* mobile menu item hover */
  --color-field-border: #aaaaaa;

  /* Typography */
  --font-body: "Montserrat", "Open Sans", sans-serif;
  --font-button: "Open Sans", sans-serif;   /* the original form button: Open Sans 300 */
  --text-base: 14px;             /* 15px at ≤768 */
  --leading: 1.5;                /* 1.4 at ≤768 (both give 21px lines) */
  --text-h4: 21px;               /* 18px at ≤768 */
  --text-h5: 18px;               /* 16px at ≤768 */
  --leading-h4: 1.25;            /* 1.2 at ≤768 */
  --leading-h5: 1.25;            /* 1.2 at ≤768 */

  /* Spacing and shape */
  --container: 1000px;           /* .page-content max-width */
  --column: 600px;               /* centred text column on About / Contact */
  --gutter: 20px;
  --banner-height: 200px;        /* inner page banner; 100px at ≤768 */
  --banner-title: 40px;          /* 20px at ≤768 */

  /* Motion (match the original's timings) */
  --duration-tile: 100ms;        /* home tiles: .1s linear */
  --duration-gallery: 200ms;     /* gallery zoom and button hover: .2s linear */
  --duration-menu: 200ms;        /* SlickNav slide-down default */
  --ease-menu: cubic-bezier(0.45, 0, 0.55, 1); /* close to jQuery "swing" */
}

@media (max-width: 768px) {
  :root {
    --text-base: 15px;
    --leading: 1.4;
    --text-h4: 18px;
    --text-h5: 16px;
    --leading-h4: 1.2;
    --leading-h5: 1.2;
    --banner-height: 100px;
    --banner-title: 20px;
  }
}

/* ============ 2. Fonts ============ */
/* Montserrat and Open Sans (Google Fonts, OFL), self-hosted: latin subset, variable files.
 * Montserrat is used at 400 and 700; Open Sans at 300 (the Send button). */
@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat-latin-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("/assets/fonts/open-sans-latin-variable.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

/* ============ 3. Base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
img, iframe { max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--color-heading); font-weight: 700; line-height: 1.25; }
h4 { font-size: var(--text-h4); line-height: var(--leading-h4); margin-bottom: 3px; }
h5 { font-size: var(--text-h5); line-height: var(--leading-h5); font-weight: 400; margin-bottom: 3px; }
p { margin: 0 0 18px; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-hover); }
a:focus { color: var(--color-focus); }
a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ============ 4. Layout ============ */
/* .content is the original #content (padding around the page body); .page-content the 1000px column. */
.content { padding: 50px var(--gutter); }
.page-content { display: flow-root; width: 100%; max-width: var(--container); margin: 0 auto; }

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

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

/* === Component: site-header (blue info bar, centred logo, centred nav; ≤768 "MENU" bar) === */
.site-header {
  position: relative;
  z-index: 100;
  background-color: var(--color-bg);
  box-shadow: 0 -5px 10px 5px #000000;
}

/* Info bar: four items in one row (table cells) separated by small white dots; stacked at ≤768. */
.topbar { padding: 10px; background-color: var(--color-primary); color: var(--color-primary-contrast); }
.topbar__item { display: table-cell; vertical-align: middle; font-size: 12px; line-height: 12px; }
.topbar__item::before {
  content: "";
  display: block;
  float: left;
  width: 2px;
  height: 2px;
  margin: 5px 12px;
  background-color: #ffffff;
}
.topbar__item:first-child::before { display: none; }
.topbar a, .topbar a:hover, .topbar a:focus { color: #ffffff; }

.site-header__lower { padding: 0 var(--gutter); }
.site-header__logo { display: block; width: 60%; max-width: 300px; margin: 50px auto 30px; }
.site-header__logo img { width: 100%; }

/* Desktop nav: centred uppercase links, blue, red on hover */
.site-nav { padding: 0 var(--gutter); text-align: center; }
.site-nav__list li { display: inline-block; }
.site-nav__list a {
  display: block;
  padding: 10px 20px;
  font-size: 0.9em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.site-nav__list a:hover, .site-nav__list a:focus { color: var(--color-hover); }

.nav-toggle { display: none; }

@media (max-width: 768px) {
  .topbar__item { display: block; margin-bottom: 3px; text-align: center; }
  .topbar__item:last-child { margin-bottom: 0; }
  .topbar__item::before { display: none; }

  /* "MENU ☰" bar, full width (SlickNav look) */
  .nav-toggle {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 6px;
    border: 0;
    border-radius: 0;
    background-color: var(--color-primary);
    color: #ffffff;
    font: inherit;
    line-height: 1.125em;
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  /* Invisible extension of the tap area into the white space above, so the 30px bar is a 44px target. */
  .nav-toggle::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
  .nav-toggle__text { display: inline-block; font-size: 0.8em; }
  .nav-toggle__icon { display: inline-block; margin: 0 5px -1px; vertical-align: baseline; }
  .nav-toggle__icon span { display: block; width: 20px; height: 2px; border-radius: 1px; background-color: #ffffff; }
  .nav-toggle__icon span + span { margin-top: 3px; }

  /* Slide-down list: grid row 0fr → 1fr. align-items: stretch keeps the list clipped while it animates. */
  .site-nav {
    display: grid;
    grid-template-rows: 0fr;
    align-items: stretch;
    padding: 0;
    visibility: hidden;
    transition: grid-template-rows var(--duration-menu) var(--ease-menu), visibility 0s linear var(--duration-menu);
  }
  .site-nav.is-open { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows var(--duration-menu) var(--ease-menu), visibility 0s; }
  .site-nav__list {
    min-height: 0;
    overflow: hidden;
    background-color: #ffffff;
    font-size: 0.875em;
    text-align: center;
  }
  .site-nav__list li { display: block; border-bottom: 1px solid var(--color-divider); }
  .site-nav__list li:last-child { border-bottom: 0; }
  .site-nav__list li:first-child { border-top: 1px solid #ffffff; }
  /* 44px tall items (original 29px) for the tap-target rule. */
  .site-nav__list a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 5px 10px;
    font-size: inherit;
    text-transform: none;
    color: var(--color-text);
  }
  .site-nav__list a:hover, .site-nav__list a:focus { background-color: var(--color-menu-hover); color: var(--color-text); }

  /* Without JavaScript the menu can't toggle: show the list open. */
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .site-nav { grid-template-rows: 1fr; visibility: visible; }
}

/* === Component: page-banner (inner pages: cover image, 40% dark tint, uppercase white title) === */
.page-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--banner-height);
  background-color: #777777;
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1000px rgb(0 0 0 / 0.4);
}
.page-banner__title {
  width: 100%;
  font-size: var(--banner-title);
  line-height: 1;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 2px 2px 2px #000000;
}

/* === Component: hero (home: full-width cover image; 60% of the window height, 2:1 at ≤768) === */
.hero {
  position: relative;
  width: 100%;
  height: 60vh;
  max-height: 720px;
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 -10px 10px -10px #000000;
}
@media (max-width: 768px) {
  .hero { height: auto; aspect-ratio: 2 / 1; }
}

/* === Component: tiles (home: four image links with uppercase labels; text grows on hover) === */
.tiles { display: flex; flex-wrap: wrap; width: 100%; margin-bottom: 6px; } /* the original's inline-block row left a 6px gap below */
.tile {
  display: block;
  width: 25%;
  padding: 10% 0;
  background-size: cover;
  background-position: center;
  color: #ffffff;
  font-size: 2em;
  line-height: 0;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 2px 2px 2px #000000;
  transition: all var(--duration-tile) linear;
}
.tile:hover, .tile:focus { color: #ffffff; font-size: 2.2em; }
@media (max-width: 1020px) {
  .tile { font-size: 1.7em; }
  .tile:hover, .tile:focus { font-size: 1.9em; }
}
@media (max-width: 768px) {
  .tiles { margin-bottom: 5px; }
  .tile { width: 50%; padding: 12% 0; }
}
@media (max-width: 580px) {
  .tile { font-size: 1.4em; }
  .tile:hover, .tile:focus { font-size: 1.6em; }
}
@media (max-width: 420px) {
  .tile { width: 100%; padding: 20% 0; }
}

/* === Component: reviews (home: Swiper, one review per slide, dots below) ===
 * Section total height matches the original: 50px top + 100px slides + 5px + 44px dots row + 21px bottom.
 * Each dot button is a 30×44px tap target with the 12px dot drawn at its top-left, as Slick drew it.
 */
.reviews { padding: 50px var(--gutter) 21px; color: var(--color-primary); text-align: center; }
.review__text { display: block; max-width: 620px; margin: 0 auto 30px; }
.review__text::before, .review__text::after { content: " '' "; white-space: pre; }
.review__name {
  display: block;
  width: 80%;
  max-width: 800px;
  margin: 0 auto 30px;
  font-size: 0.9em;
  font-style: italic;
  color: var(--color-text);
}
.reviews .swiper-pagination.swiper-pagination-horizontal {
  position: static;
  height: 44px;
  margin-top: 5px;
  line-height: 0;
  text-align: center;
}
.reviews .swiper-pagination .swiper-pagination-bullet {
  position: relative;
  width: 30px;
  height: 44px;
  margin: 0;
  border-radius: 0;
  background: none;
  opacity: 1;
  vertical-align: top;
}
.reviews .swiper-pagination-bullet::before {
  content: "";
  position: absolute;
  top: 0;
  left: 5px;
  width: 12px;
  height: 12px;
  border-radius: 10px;
  background-color: var(--color-primary);
  opacity: 0.5;
}
.reviews .swiper-pagination-bullet-active::before { opacity: 1; }
/* Without JavaScript only the first review shows (as before Slick starts). */
html:not(.js) .reviews .swiper-slide:not(:first-child) { display: none; }

/* === Component: app-band (blue "Get our Mobile App" bar with App Store / Google Play badges; all pages) === */
.app-band {
  height: 50px;
  padding: 10px var(--gutter);
  background-color: var(--color-primary);
  color: #ffffff;
  font-size: 24px;
  line-height: 0;
  text-align: center;
}
.app-band__link { position: relative; display: inline-block; width: 144px; height: 30px; margin-bottom: -7.5px; }
.app-band__link img { display: block; width: 100%; }
@media (max-width: 768px) {
  /* The label is hidden on mobile (font-size 0), only the badges show. */
  .app-band { height: auto; font-size: 0; color: transparent; }
  .app-band__link { margin: 0 5px; width: 130px; height: auto; }
}

/* === Component: site-footer (centred copyright line + OrderYOYO credit) === */
.site-footer { padding: 30px var(--gutter); font-size: 0.8em; text-align: center; color: var(--color-text); }
.site-footer p { margin: 0; font-size: inherit; line-height: inherit; }
.site-footer a, .site-footer a:hover { color: var(--color-text); }

/* === Component: text-column (centred 600px text column: About intro, Contact intro) === */
.text-column { max-width: var(--column); margin: 0 auto 50px; text-align: center; }
.text-column--intro { margin-bottom: 40px; }

/* === Component: map (Google Maps iframe, full column width, 400px tall) === */
.map { display: block; width: 100%; height: 400px; border: 0; }
.map-block { margin: 0 0 24px; }

/* === Component: gallery-grid (rows of three square image links; zoom on hover; GLightbox) === */
.gallery-grid { width: 100%; max-width: 980px; margin: 0 auto; }
.gallery-grid__row { display: flex; }
.gallery-grid__item {
  position: relative;
  display: block;
  width: 30%;
  aspect-ratio: 1 / 1;
  margin: 0 5% 5% 0;
  overflow: hidden;
}
.gallery-grid__item:nth-child(3) { margin-right: 0; }
.gallery-grid__row:last-child .gallery-grid__item { margin-bottom: 0; }
.gallery-grid__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--duration-gallery) linear;
}
.gallery-grid__item:hover img, .gallery-grid__item:focus img { transform: scale(1.1); }

/* GLightbox: white overlay like the original Colorbox (styled here, vendor files untouched). */
.glightbox-container .goverlay { background: rgb(255 255 255 / 0.9); }
.glightbox-clean .gclose, .glightbox-clean .gnext, .glightbox-clean .gprev { background-color: rgb(0 0 0 / 0.75); }
/* GLightbox hides prev/next on small screens; the original Colorbox showed them at every width. */
@media (max-width: 768px) {
  .glightbox-clean .gprev, .glightbox-clean .gnext { top: 45%; }
}

/* === Component: button (full-width blue button, Open Sans 300 uppercase; grey on hover) === */
.button {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 8px 20px;
  border: 0;
  border-radius: 0;
  background: var(--color-primary);
  color: #ffffff;
  font-family: var(--font-button);
  font-size: 1.1em;
  font-weight: 300;
  line-height: normal;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--duration-gallery) linear;
}
.button:hover, .button:focus { background: var(--color-button-hover); color: #ffffff; }

/* === Component: contact-email (replaces the contact form: address, Send button, phone) === */
.contact-email { max-width: var(--column); margin: 0 auto; text-align: center; }
.contact-email__address, .contact-email__phone { margin: 0 0 18px; }
.contact-email__address a { word-break: break-word; }
.contact-email .button { margin: 0 0 18px; }

/* === Component: error-links (404 page: list of main sections) === */
.error-links { margin: 0 0 18px; }
.error-links li { display: inline-block; margin: 0 10px 10px; }

/* ============ 6. Pages ============ */
/* (none: page backgrounds are set inline as one-off background-image values) */

/* ============ 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) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}