/*
 * site.css: the only stylesheet for golden-cod.co.uk.
 *
 * Sections, in order:
 *   1. Tokens        colours, fonts, spacing, motion (custom properties)
 *   2. Fonts         @font-face for self-hosted Montserrat (Open Sans kept as the fallback the theme named)
 *   3. Base          reset and element defaults (the theme's reset + typography)
 *   4. Layout        page frame (1000px column inside a 20px gutter) and page sections
 *   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 app4masonry theme; media queries can't use custom properties):
 *   ≤ 768px   mobile layout: "MENU" bar opening a side menu from the right, tiles re-flow, smaller headings, body 14px
 *   ≤ 428px   testimonial row stacks to one column
 *   desktop   anything wider; the content column stops growing at 1000px
 *
 * The original sized tiles with jQuery (sizes()): big image height = width × 0.7, the stack of three
 * beside it shares that height, paired tiles match their neighbour. Here that's CSS grid
 * (rows stretch) + aspect-ratio 10 / 7 + container query units.
 */

/* ============ 1. Tokens ============ */
:root {
  /* Colours (theme customiser + additional CSS on the original) */
  --color-gold: #dcb846;         /* panels, buttons, mobile menu hover */
  --color-blue: #253a95;         /* nav bar, info bar, MENU button, links */
  --color-panel-grey: #cecece;   /* contact panel */
  --color-placeholder: #eeeeee;  /* tile background before an image loads */
  --color-text: #ffffff;         /* body text is white on coloured panels */
  --color-muted: #999999;        /* copyright line */
  --color-link: #253a95;
  --color-link-hover: #aaaaaa;
  --color-bg: #ffffff;
  --color-field-text: #333333;

  /* Typography */
  --font-body: "Montserrat", "Open Sans", sans-serif;
  --text-base: 16px;
  --text-base-mobile: 14px;
  --leading: 1.5;

  /* Spacing and shape */
  --gap: 12px;                   /* gap between every tile, row and bar */
  --gutter: 20px;                /* page side padding */
  --frame: 1000px;               /* max width of header, content and footer */
  --panel-padding: 30px;

  /* Motion (match the original's timings) */
  --duration: 200ms;             /* nav hover, buttons: "all .2s linear" */
  --ease: linear;
  --duration-menu: 300ms;        /* side menu slide-in */
  --menu-width: min(80vw, 320px);
  --ease-menu: cubic-bezier(0.45, 0, 0.55, 1); /* close to jQuery "swing" */
}

/* ============ 2. Fonts ============ */
/* Self-hosted Google Fonts (variable woff2, latin). Montserrat is used at 300 (button), 400 and 700. */
@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%; scroll-behavior: smooth; }
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 { max-width: 100%; height: auto; }
h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--color-text); font-weight: 700; line-height: 1.25; }
h1 { font-size: 46px; margin-bottom: 12px; }
h2 { font-size: 35px; margin-bottom: 9px; }
h3 { font-size: 28px; margin-bottom: 9px; }
p { margin: 0 0 18px; font-size: var(--text-base); line-height: var(--leading); }
ul { margin: 0; padding: 0; list-style: none; }
li { margin: 0; }
blockquote, figure { margin: 0; }
i, em { font-style: italic; }
a { color: var(--color-link); text-decoration: none; }
a:hover, a:focus { color: var(--color-link-hover); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 2px; }

@media (max-width: 768px) {
  body, p { font-size: var(--text-base-mobile); line-height: 1.5; }
  h1 { font-size: 32px; line-height: 1.3; }
  h2 { font-size: 28px; line-height: 1.3; }
  h3 { font-size: 21px; line-height: 1.3; }
}

/* ============ 4. Layout ============ */
/* .page-frame = the theme's .container (20px side padding); header, main and footer are 1000px columns. */
.page-frame { padding: 0 var(--gutter); }
.site-header, .site-main, .site-footer { max-width: var(--frame); margin-inline: auto; }

/* A row of tiles; every row is 12px from the next. container-type lets tiles size from the row width (cqw). */
.page-section { position: relative; margin-bottom: var(--gap); container-type: inline-size; }

/* ============ 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-blue); }
.skip-link:focus { left: 16px; }

/* === Component: site-header (centred logo, blue nav bar; MENU bar + side menu from the right ≤ 768px) === */
.site-header { position: relative; margin-bottom: var(--gap); }
.site-header__logo { display: block; width: 50%; max-width: 250px; margin: 30px auto; }
.site-header__logo img { display: block; width: 100%; height: auto; }

.site-nav { background-color: var(--color-blue); padding: 0 10px; text-align: center; }
.site-nav__list li { display: inline-block; }
.site-nav__list a {
  display: block;
  padding: 10px;
  font-size: 12px;
  line-height: 1.5;
  text-transform: uppercase;
  color: #ffffff;
  transition: color var(--duration) var(--ease), background-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.site-nav__list a:hover,
.site-nav__list a:focus {
  color: #ffffff;
  box-shadow: inset 0 3px 0 0 #ffffff, inset 0 -3px 0 0 #ffffff;
}
.site-nav__list a:focus-visible { outline: none; }

.nav-toggle { display: none; }

@media (max-width: 768px) {
  .site-header__logo { width: 60%; margin: 30px auto; }

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

  /* Side menu: a panel that slides in from the right over a dimmed page.
     Scoped to html.js so that without JavaScript the list simply shows open under the MENU bar. */
  html.js .site-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1001;
    width: var(--menu-width);
    padding: 56px 0 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
    text-align: left;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.25);
    transform: translateX(100%);
    visibility: hidden;
  }
  html.js .site-nav.is-open {
    transform: translateX(0);
    visibility: visible;
  }
  /* Slide only while the menu is being opened or closed (site.js sets html.nav-animating for the
     length of the slide). Otherwise resizing the window into mobile width would play the
     slide-out once, because the panel moves from its desktop place to off-screen. */
  html.nav-animating .site-nav { transition: transform var(--duration-menu) var(--ease-menu), visibility 0s linear var(--duration-menu); }
  html.nav-animating .site-nav.is-open { transition: transform var(--duration-menu) var(--ease-menu), visibility 0s; }
  .nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
  }
  html.nav-animating .nav-backdrop { transition: opacity var(--duration-menu) var(--ease-menu); }
  .nav-backdrop.is-visible { opacity: 1; }
  html.nav-open { overflow: hidden; }   /* the page behind doesn't scroll while the menu is open */

  /* Close (×) button, top right of the panel; 44px tap target. */
  .site-nav__close {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: #ffffff;
    cursor: pointer;
  }
  .site-nav__close:focus-visible { outline: 2px solid var(--color-gold); outline-offset: -2px; }
  html:not(.js) .site-nav__close { display: none; }

  .site-nav__list { font-size: 0.875em; }
  .site-nav__list li { display: block; border-bottom: 1px solid rgba(255, 255, 255, 0.6); }
  .site-nav__list li:first-child { border-top: 1px solid rgba(255, 255, 255, 0.6); }
  /* 44px tall items for the tap-target rule; labels in their original case. */
  .site-nav__list a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 20px;
    font-size: inherit;
    text-transform: none;
  }
  .site-nav__list a:hover,
  .site-nav__list a:focus { background-color: var(--color-gold); box-shadow: none; }

  /* Without JavaScript the menu can't toggle: show the list open. */
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .site-nav { text-align: center; }
}

@media (min-width: 769px) {
  .site-nav__close,
  .nav-backdrop { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html.nav-animating .site-nav,
  html.nav-animating .site-nav.is-open,
  html.nav-animating .nav-backdrop { transition: none; }
}

/* === Component: site-footer (blue info bar, store badges, copyright + credit) === */
.site-footer { margin-bottom: 20px; }
.site-footer__info {
  margin-bottom: 30px;
  padding: 8px 10px;
  background-color: var(--color-blue);
  color: #ffffff;
  text-align: center;
}
.app-stores { text-align: center; line-height: 1.5; }
.app-stores a { display: inline-block; max-width: 45%; }
.app-stores img { display: inline-block; vertical-align: baseline; width: 150px; max-width: 100%; height: auto; margin-bottom: 20px; }
.site-footer__copyright { margin: 0; text-align: center; color: var(--color-muted); font-size: 0.8em; }
.site-footer__credit,
.site-footer__credit:hover,
.site-footer__credit:focus { color: var(--color-muted); text-decoration: none; }

/* === Component: tile (cover image or coloured block; no hover effects on the original) === */
.tile { position: relative; display: block; overflow: hidden; background-color: var(--color-placeholder); }
.tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.tile--gold { background-color: var(--color-gold); color: var(--color-text); }
.tile--blue { background-color: var(--color-blue); color: var(--color-text); }

/* === Component: tile-hero (row: stack of three tiles + large linked image, home and contact) ===
 * Desktop: 25% stack | 75% − 12px big tile; big tile is width × 0.7 tall and the stack shares its height.
 * ≤ 768px: the stack becomes two tiles side by side (third hidden) above the full-width big tile. */
.tile-hero { display: grid; grid-template-columns: 25% 1fr; gap: var(--gap); }
.tile-hero__stack { display: grid; grid-template-rows: repeat(3, 1fr); gap: var(--gap); }
.tile-hero__main { aspect-ratio: 10 / 7; }
@media (max-width: 768px) {
  .tile-hero { grid-template-columns: 1fr; }
  .tile-hero__stack { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .tile-hero__stack > .tile { aspect-ratio: 10 / 7; }
  .tile-hero__stack > .tile:nth-child(3) { display: none; }
}

/* === Component: welcome-tile (gold tile, uppercase "Welcome to" + h1, bottom-left; text scales with tile width) === */
.welcome-tile { container-type: inline-size; text-transform: uppercase; font-weight: 700; }
.welcome-tile__inner { position: absolute; left: 4%; right: 4%; bottom: 6%; font-size: 15px; font-size: 6cqw; line-height: 1.5; }
.welcome-tile h1 { margin: 0; font-size: 2em; line-height: 1; color: #ffffff; }

/* === Component: tile-pair (two equal halves; heights match) === */
.tile-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.tile-pair__badge { padding: var(--panel-padding); text-align: center; }
.tile-pair__badge > img { position: static; display: inline-block; vertical-align: baseline; width: auto; max-width: 100%; height: auto; object-fit: initial; }
@media (max-width: 768px) {
  .tile-pair { grid-template-columns: 1fr; grid-auto-rows: 1fr; }
}

/* === Component: tile-trio (three equal thirds; home: image | testimonial | image, about: three images) === */
.tile-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.tile-trio--images > .tile { height: 24cqw; }  /* original: padding 12% 0 of the row width */
@media (max-width: 768px) {
  .tile-trio { grid-template-columns: 1fr 1fr; }
  .tile-trio > :first-child { display: none; }
  .tile-trio--images > .tile { height: 32cqw; }  /* original: padding 16% 0 */
}
@media (max-width: 428px) {
  .tile-trio:not(.tile-trio--images) { grid-template-columns: 1fr; grid-auto-rows: 1fr; }
}

/* === Component: testimonial (gold third with quote and right-aligned italic name) === */
.testimonial { padding: var(--panel-padding); }
.testimonial__quote { margin: 0; }
.testimonial__cite { margin-top: 1em; text-align: right; font-style: italic; }
@media (max-width: 768px) {
  .testimonial { padding: 20px; }
}

/* === Component: content-panel (gold .entry-content box, centred text) === */
.content-panel { padding: var(--panel-padding); background-color: var(--color-gold); overflow: hidden; text-align: center; }
.content-panel p:last-child { margin-bottom: 0; }

/* === Component: contact-panel (row: three stacked images + grey panel; replaces the CF7 form row) === */
.contact-row { display: grid; grid-template-columns: 25% 1fr; gap: var(--gap); }
.contact-row__stack { display: grid; grid-template-rows: repeat(3, auto); gap: var(--gap); }
.contact-row__stack > .tile { aspect-ratio: 10 / 7; }
.contact-row__panel { display: flex; flex-direction: column; justify-content: center;  /* phone only until the email is switched on (pending: Azure form endpoint) */ padding: 20px; background-color: var(--color-panel-grey); }
@media (max-width: 768px) {
  .contact-row { grid-template-columns: 1fr; }
  .contact-row__stack { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .contact-row__stack > .tile { aspect-ratio: auto; height: 32vw; }  /* original: body width × 0.32 */
  .contact-row__stack > .tile:nth-child(3) { display: none; }
}

/* === Component: button (gold, full width, uppercase light text; blue on hover) === */
.button {
  display: block;
  width: 100%;
  padding: 15px 20px;
  border: 0;
  border-radius: 0;
  background: var(--color-gold);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 1.1em;
  font-weight: 300;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
}
.button:hover, .button:focus { background: var(--color-blue); color: #ffffff; }

/* === Component: contact-email (replaces the CF7 form: visible address, mailto "Send" button, phone) === */
.contact-email { width: 100%; max-width: 100%; text-align: center; }
.contact-email__address,
.contact-email__phone {
  margin: 0 0 20px;
  padding: 15px;
  background: #ffffff;
  color: var(--color-field-text);
  font-size: 1em;
  word-break: break-word;
}
.contact-email__address a,
.contact-email__phone a { color: var(--color-field-text); }
.contact-email__address a:hover,
.contact-email__phone a:hover { color: var(--color-blue); }
.contact-email .button { margin-bottom: 20px; }
.contact-email > :last-child { margin-bottom: 0; }

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

/* === Page: /404.html (added by redirects-seo) === */
.not-found__link, .not-found__link:visited { color: #ffffff; text-decoration: underline; }
.not-found__link:hover, .not-found__link:focus { color: var(--color-blue); }

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