/* ==========================================================================
   Race Coatings — site stylesheet
   --------------------------------------------------------------------------
   A small, dependency-free stylesheet for the 4-page static site.
   Sections:
     1. Fonts
     2. Tokens (colors, sizes)
     3. Base / reset
     4. Page background
     5. Header (red bar, logo, MENU button)
     6. Full-screen menu overlay
     7. Footer
     8. Layout helpers (rows, columns, panels)
     9. Typography (titles, body, lists)
     10. Buttons
     11. Home page
     12. About page
     13. Services page
     14. Contact page
     15. Dot navigation (page anchors)
     16. Responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts
   All fonts are self-hosted, OFL-licensed web fonts (see README).
   - Montserrat  (variable 300–700)  — UI text: menu, buttons, footer, page titles
   - Jura                        — body text (used across the original site)
   - Jockey One                  — home page headline
   - Titan One                   — services section titles
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300 700; /* variable font: covers 300–700 */
  font-display: swap;
  src: url("../assets/fonts/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../assets/fonts/montserrat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Jura";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/jura-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jockey One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/jockey-one-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Titan One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/titan-one-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* colors (taken from the original site) */
  --red: #b50707;          /* header / footer bar, dark contact text */
  --red-bright: #e21c21;   /* buttons, service titles, red accents  */
  --card-dark: #0f0f0f;    /* contact detail card */
  --white: #ffffff;
  --black: #000000;

  /* fonts */
  --font-ui: "Montserrat", "Segoe UI", Arial, sans-serif;
  --font-body: "Jura", "Montserrat", sans-serif;
  --font-hero: "Jockey One", "Montserrat", sans-serif;
  --font-title: "Titan One", "Montserrat", sans-serif;

  /* layout */
  --measure: 980px;        /* content width, as in the original */
  --header-h: 56px;
}

/* --------------------------------------------------------------------------
   3. Base / reset
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font: 400 15px/1.7 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

h1,
h2,
h3,
p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
}

/* --------------------------------------------------------------------------
   4. Page background
   A fixed, dimmed photo behind everything (the original used a fixed
   Wix page-background image with a dark overlay).
   - sub pages: page-bg.jpg at 40%
   - home page: home-bg.jpg at 35%  (set via <body class="bg-home">)
   -------------------------------------------------------------------------- */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url("../assets/img/page-bg.jpg");
  background-position: center;
  background-size: cover;
  opacity: 0.4;
}

body.bg-home::before {
  background-image: url("../assets/img/home-bg.jpg");
  opacity: 0.35;
}

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--red);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
}

.site-header__inner {
  max-width: calc(var(--measure) + 40px);
  margin: 0 auto;
  padding: 6px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.site-logo img {
  width: 160px;
  height: 42px;
  object-fit: contain;
}

/* White outline style, as on the original site */
.menu-btn {
  background: transparent;
  border: 1px solid var(--white);
  color: var(--white);
  font: 600 12px/1.4 var(--font-ui);
  letter-spacing: 0.14em;
  padding: 10px 22px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.menu-btn:hover,
.menu-btn:focus-visible {
  background: rgba(255, 255, 255, 0.18);
}

.menu-btn:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

/* Plain link list shown instead of MENU when JavaScript is disabled. */
.header-fallback {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 18px;
}

.header-fallback a {
  font: 600 11px/1.6 var(--font-ui);
  letter-spacing: 0.14em;
  text-decoration: none;
  opacity: 0.9;
}

.header-fallback a:hover,
.header-fallback a[aria-current="page"] {
  opacity: 1;
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   6. Full-screen menu overlay
   Markup lives in every page (see <div class="site-menu">); js/menu.js
   only toggles the .open class and handles Esc / focus / scroll-lock.
   -------------------------------------------------------------------------- */

.site-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 36px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.site-menu.open {
  opacity: 1;
  visibility: visible;
}

/* page photo + darkening shade */
.site-menu__backdrop {
  position: absolute;
  inset: 0;
  background-image: url("../assets/img/home-bg.jpg");
  background-position: center;
  background-size: cover;
}

.site-menu__backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.55);
}

.site-menu__close {
  position: absolute;
  top: 18px;
  right: 22px;
  z-index: 2;
  width: 48px;
  height: 48px;
  padding: 9px;
  background: transparent;
  border: 0;
  color: var(--white);
  cursor: pointer;
  opacity: 0.85;
}

.site-menu__close:hover,
.site-menu__close:focus-visible {
  opacity: 1;
}

.site-menu__logo {
  position: relative;
  z-index: 1;
  display: inline-block;
  text-decoration: none;
}

.site-menu__logo img {
  width: min(389px, 72vw);
}

.site-menu__nav {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.site-menu__nav a {
  display: block;
  padding: 14px 26px;
  font: 600 22px/1.4 var(--font-ui);
  letter-spacing: 0.14em;
  text-decoration: none;
  opacity: 0.9;
}

.site-menu__nav a:hover,
.site-menu__nav a:focus-visible,
.site-menu__nav a[aria-current="page"] {
  opacity: 1;
  text-decoration: underline;
}

.site-menu__social {
  position: relative;
  z-index: 1;
  color: var(--white);
  opacity: 0.9;
}

.site-menu__social:hover,
.site-menu__social:focus-visible {
  opacity: 1;
}

/* JS adds this class to <body> while the menu is open */
body.menu-open {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   7. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  position: sticky;
  bottom: 0;
  z-index: 50;
  background: var(--red);
  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.7);
}

.site-footer p {
  max-width: calc(var(--measure) + 40px);
  margin: 0 auto;
  padding: 11px 20px;
  text-align: center;
  font: 400 12px/1.4 var(--font-ui);
  color: var(--black);
}

.site-footer a {
  color: var(--black);
}

/* --------------------------------------------------------------------------
   8. Layout helpers
   -------------------------------------------------------------------------- */

.site-main {
  max-width: calc(var(--measure) + 40px);
  margin: 0 auto;
  padding: 0 20px 48px;
}

.row {
  display: flex;
  align-items: stretch;
}

.col-narrow {
  flex: 0 0 324px;
  max-width: 324px;
}

.col-wide {
  flex: 1 1 auto;
  min-width: 0;
}

/*
 * Photo panels.
 * .panel--dim  : photo barely visible (80% black overlay), text on top
 * .panel--photo: photo at full strength
 * Set the image with --panel-img (or use a modifier class below).
 */
.panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.panel--dim {
  background-color: var(--black);
  background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), var(--panel-img, none);
  background-position: center;
  background-size: cover;
}

.panel--dim > * {
  position: relative;
}

.panel--photo {
  background-color: #414141;
  background-image: var(--panel-img, none);
  background-position: center;
  background-size: cover;
}

/*
 * Panel background images.
 * The --panel-img values live here (not in the HTML) because relative
 * URLs inside CSS variables resolve against the stylesheet that
 * *consumes* the variable, not the element it is set on — inline
 * `style="--panel-img: url('assets/...')"` would 404. Keeping them here
 * also keeps asset paths in one place and lets the site work when
 * opened straight from disk (file://).
 */
.panel--home-bg      { --panel-img: url("../assets/img/home-bg.jpg"); }
.panel--about-shop   { --panel-img: url("../assets/img/about-shop.jpg"); }
.panel--about-info   { --panel-img: url("../assets/img/about-info.jpg"); }
.panel--ceramic      { --panel-img: url("../assets/img/ceramic-detail.jpg"); }
.panel--powder       { --panel-img: url("../assets/img/powder-detail.jpg"); }
.panel--thermal      { --panel-img: url("../assets/img/thermal-detail.jpg"); }
.panel--engine       { --panel-img: url("../assets/img/engine-detail.jpg"); }
.panel--closeup      { --panel-img: url("../assets/img/parts-closeup.jpg"); }
.panel--contact-shop { --panel-img: url("../assets/img/contact-shop.jpg"); }

/* --------------------------------------------------------------------------
   9. Typography
   -------------------------------------------------------------------------- */

/* Page titles ("about us", "our services", "CONTACT US", "HOURS").
   Original used Avenida (a commercial Wix font) — replaced with Montserrat. */
.site-title {
  font: 500 50px/1.4 var(--font-ui);
  letter-spacing: 0.15em;
  text-align: center;
  color: #fffffe;
}

.site-title--sm {
  font-size: 36px;
}

/* Body text (Jura, as in the original) */
.prose p {
  margin: 0 0 1em;
}

/* Bullet lists. The original wrote the dashes as text; we use real lists. */
.list li {
  position: relative;
  padding-left: 1.3em;
}

.list li::before {
  content: "-";
  position: absolute;
  left: 0;
}

.list--red {
  color: var(--red-bright);
}

/* --------------------------------------------------------------------------
   10. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  background: var(--red-bright);
  border: 1px solid transparent;
  color: var(--white);
  font: 600 12px/1.4 var(--font-ui);
  letter-spacing: 0.14em;
  padding: 12px 26px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.btn:hover,
.btn:focus-visible {
  background: #c8151b;
}

/* --------------------------------------------------------------------------
   11. Home page
   -------------------------------------------------------------------------- */

.home-hero {
  padding: 103px 0 60px;
  text-align: center;
}

.home-hero__wordmark {
  width: min(777px, 100%);
  margin: 0 auto 34px;
}

.home-hero__tagline {
  font: 400 38px/1.4 var(--font-hero);
  text-shadow: 0 5px 0 rgba(0, 0, 0, 0.3);
}

.home-hero__intro {
  max-width: 640px;
  margin: 30px auto 0;
  font: 400 15px/1.7 var(--font-body);
  color: var(--white);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}

/* --------------------------------------------------------------------------
   12. About page
   -------------------------------------------------------------------------- */

.about-intro {
  min-height: 726px;
}

.about-intro .col-narrow {
  padding: 55px 0 24px;
}

.about-intro .btn {
  margin-top: 6px;
}

/* "about us" section: dimmed photo, then title */
.about-info {
  margin-top: 56px;
}

.about-info .panel--photo {
  aspect-ratio: 980 / 725; /* original photo proportions */
  min-height: 260px;
  background-color: #414141;
  background-image: linear-gradient(rgba(65, 65, 65, 0.55), rgba(65, 65, 65, 0.55)), var(--panel-img, none);
  background-position: center;
  background-size: cover;
}

.about-info .site-title {
  margin-top: 40px;
}

/* --------------------------------------------------------------------------
   13. Services page
   -------------------------------------------------------------------------- */

/* hero photo with "our services" title + section links */
.services-hero {
  position: relative;
  min-height: 560px;
  padding: 170px 20px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  text-align: center;
  background-image: url("../assets/img/services-hero.jpg");
  background-position: center;
  background-size: cover;
}

.services-hero .site-title {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.services-hero__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
}

.services-hero__links a {
  display: inline-block;
  padding: 6px 10px;
  font: 600 13px/1.4 var(--font-ui);
  letter-spacing: 0.14em;
  text-decoration: none;
}

.services-hero__links a:hover,
.services-hero__links a:focus-visible {
  color: var(--red-bright);
  text-decoration: underline;
}

/* one service = narrow portrait photo + wide photo with overlaid title
   and intro, then more text below the photo */
.service {
  margin-top: 64px;
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.service__portrait {
  min-height: 673px;
}

.service__portrait,
.service__image {
  background-position: center;
  background-size: cover;
}

.service__image {
  position: relative;
  isolation: isolate;
  min-height: 673px;
  overflow: hidden;
}

.service__title {
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  text-align: center;
  font: 400 52px/1.1 var(--font-title);
  letter-spacing: -0.05em;
  color: var(--red-bright);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.65);
}

.service__intro {
  position: absolute;
  top: 205px;
  left: 6%;
  right: 6%;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}

.service__body {
  padding: 26px 6% 0;
}

.service__body p {
  margin: 0 0 1em;
}

/* --------------------------------------------------------------------------
   14. Contact page
   -------------------------------------------------------------------------- */

.contact-grid {
  min-height: 610px;
}

.contact-grid .panel {
  flex: 1 1 50%;
  min-width: 0;
}

.contact-left {
  display: flex;
  flex-direction: column;
}

.contact-left .site-title {
  margin: 88px 0 30px;
}

.contact-left .btn {
  margin-bottom: 13px;
}

.contact-left .btn--address {
  margin-left: 56px;
}

/* the PDF button sits lower down the panel, as in the original */
.contact-left .btn--pdf {
  margin-top: auto;
  margin-left: 69px;
  margin-bottom: 40px;
}

.contact-right {
  background-color: var(--red-bright);
}

.contact-right__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-card {
  position: relative;
  margin: 88px 0 0 73px;
  background: var(--card-dark);
  padding: 26px 34px 30px;
  font-size: 15px;
}

.contact-card .detail {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  color: var(--red);
  font-size: 15px;
  letter-spacing: 0.03em;
}

.contact-card .detail svg {
  flex: 0 0 auto;
  color: var(--red);
}

.contact-card .detail a {
  color: var(--red);
  text-decoration: none;
}

.contact-card .detail a:hover,
.contact-card .detail a:focus-visible {
  text-decoration: underline;
}

.contact-card hr {
  border: 0;
  border-top: 1px solid #333;
  margin: 0 0 18px;
}

.contact-card .site-title {
  margin: 26px 0 14px;
  font-size: 36px;
}

.contact-card .hours {
  color: var(--red);
  text-align: center;
  font-size: 15px;
}

.contact-card .hours p {
  margin: 0;
}

/* --------------------------------------------------------------------------
   15. Dot navigation (page anchors on About / Services)
   -------------------------------------------------------------------------- */

.dot-nav {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dot-nav a {
  position: relative;
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
}

.dot-nav a::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: transparent;
  transition: background-color 0.2s ease;
}

.dot-nav a:hover::before,
.dot-nav a:focus-visible::before {
  background: var(--white);
}

.dot-nav a:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 4px;
}

.dot-nav__label {
  position: absolute;
  right: 26px;
  top: 50%;
  transform: translate(6px, -50%);
  padding: 6px 10px;
  background: rgba(15, 15, 15, 0.92);
  font: 600 11px/1 var(--font-ui);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.dot-nav a:hover .dot-nav__label,
.dot-nav a:focus-visible .dot-nav__label {
  opacity: 1;
  transform: translate(0, -50%);
}

/* --------------------------------------------------------------------------
   16. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  /* avoid the dot nav overlapping content */
  .dot-nav {
    display: none;
  }
}

@media (max-width: 900px) {
  .row {
    flex-direction: column;
  }

  .col-narrow,
  .contact-grid .panel {
    flex: 1 1 auto;
    max-width: none;
  }

  .about-intro {
    min-height: 0;
  }

  .about-intro .col-narrow {
    min-height: 520px;
  }

  .about-intro .col-wide,
  .service__portrait {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  /* Title and intro no longer overlay the photo (the box is a fixed
     4:3 image on mobile and would clip the text); they sit on a plain
     dark card below it instead. */
  .service__image {
    min-height: 0;
    aspect-ratio: auto;
    background-image: none;
    background-color: var(--black);
    padding: 28px 20px 32px;
  }

  .service__title {
    position: static;
    margin: 0 0 18px;
    font-size: 36px;
  }

  .service__intro {
    position: static;
    padding: 0;
  }

  .service__body {
    padding: 0 20px;
  }

  .service__main {
    min-width: 0;
  }

  .services-hero {
    min-height: 0;
    padding: 96px 20px 40px;
  }

  .site-title {
    font-size: 34px;
  }

  .site-title--sm {
    font-size: 28px;
  }

  .contact-left .site-title {
    margin-top: 56px;
  }

  .contact-left .btn--address {
    margin-left: 20px;
  }

  .contact-left .btn--pdf {
    margin-left: 20px;
    margin-bottom: 28px;
  }

  .contact-card {
    margin: 48px 20px 28px;
    padding: 22px 24px 26px;
  }

  .contact-right {
    min-height: 480px;
  }

  .home-hero {
    padding: 64px 0 48px;
  }

  .home-hero__tagline {
    font-size: 26px;
  }

  .site-menu__nav a {
    font-size: 18px;
    padding: 10px 18px;
  }

  .site-logo img {
    width: 132px;
    height: auto;
  }
}

/* Respect users who prefer no smooth scrolling */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .site-menu,
  .dot-nav__label {
    transition: none;
  }
}