/* ==========================================================================
   redline-core.css
   The Redline Specialist Cars layer, reproduced 1:1 from the live site.
   Every value here was measured from redlinespecialistcars.co.uk at 375px,
   900px and 1440px. Do not restyle anything in this file — campaign styling
   belongs in giveaway.css so this layer can be re-diffed against the live
   theme later.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts — self-hosted. Redline serves these without an
   Access-Control-Allow-Origin header, so a cross-origin @font-face from the
   amt. subdomain would be blocked. Files are copied into assets/fonts/.
   Family names match the parent theme exactly.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "RocGrotesk-ExtraWideMedium";
  src: url("../fonts/RocGrotesk-ExtraWideLight.woff2") format("woff2"), url("../fonts/RocGrotesk-ExtraWideLight.otf") format("opentype");
  font-weight: 200;
  font-display: swap;
}
@font-face {
  font-family: "RocGrotesk-ExtraWideMedium";
  src: url("../fonts/RocGrotesk-ExtraWide.woff2") format("woff2"), url("../fonts/RocGrotesk-ExtraWide.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "RocGrotesk-ExtraWideMedium";
  src: url("../fonts/RocGrotesk-ExtraWideMedium.woff2") format("woff2"), url("../fonts/RocGrotesk-ExtraWideMedium.otf") format("opentype");
  font-weight: 600;
  font-display: swap;
}

@font-face { font-family: "DM_Sans"; src: url("../fonts/DMSans-Light.woff2") format("woff2"), url("../fonts/DMSans-Light.ttf") format("truetype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "DM_Sans"; src: url("../fonts/DMSans-Regular.woff2") format("woff2"), url("../fonts/DMSans-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM_Sans"; src: url("../fonts/DMSans-Medium.woff2") format("woff2"), url("../fonts/DMSans-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "DM_Sans"; src: url("../fonts/DMSans-SemiBold.woff2") format("woff2"), url("../fonts/DMSans-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "DM_Sans"; src: url("../fonts/DMSans-Bold.woff2") format("woff2"), url("../fonts/DMSans-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

/* Grantley Hall sets its display type in Dashiell Fine (Adobe Fonts, not
   self-hostable). Cormorant Garamond is the closest free match — same
   high-contrast fine serif, and it holds Grantley's very wide tracking.
   Single variable file covers 300–700 for the latin subset. */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/CormorantGaramond-var-latin.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-display: swap;
  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 — Redline's own custom properties, plus Grantley's palette
   -------------------------------------------------------------------------- */
:root {
  /* Redline, verbatim from the live theme's :root */
  --font-display: "RocGrotesk-ExtraWideMedium";
  --font-body: DM_Sans;
  --red: rgb(239 68 68);
  --black: #0c0c09;
  --grey: #707070;

  /* Redline, measured from computed styles */
  --rl-red: #df3435;          /* buttons, all hover states */
  --rl-red-dark: #b30f10;     /* button hover gradient start */
  --rl-red-darker: #b10d0e;   /* button hover gradient end */
  --rl-nav-link: #d1d5db;     /* nav link resting colour */
  --rl-mobile-ink: #1c1c1c;   /* mobile drawer link colour */
  --rl-mobile-rule: #c9c9c9;  /* mobile drawer separators */
  --rl-drawer-edge: #686868;  /* mobile drawer right border */
  --rl-footer-rule: #848080;  /* footer top border */

  /* Grantley Hall, measured from grantleyhall.co.uk */
  --gh-gold: #c29869;
  --gh-gold-dim: rgba(194, 152, 105, 0.35);
  --gh-gold-faint: rgba(194, 152, 105, 0.14);
  --gh-grey: #55575a;
  --gh-grey-light: #88898c;

  --font-deco: "Cormorant Garamond", Georgia, serif;

  /* Success state on the thank-you page */
  --success: #22a45d;
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--black);
  color: #fff;
  font-family: var(--font-body), ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1.9px;      /* Redline sets this site-wide on <body> */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display), sans-serif;
  text-transform: uppercase;
  letter-spacing: 1.9px;
  font-weight: 500;
  margin: 0;
}
h1 { font-size: 2.2rem; line-height: 1.2; }
h2 { font-size: 1.92rem; letter-spacing: normal; }

p { margin: 0 0 1rem; }
img { border-style: none; vertical-align: middle; }
a { color: inherit; }

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

button { font-family: inherit; }

:focus-visible { outline: 2px solid var(--rl-red); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   4. Grid + utilities
   The live theme loads all of Bootstrap 5 (~200KB) but the header and footer
   markup only touch the handful of classes below. These reproduce Bootstrap's
   computed output for exactly those classes, at the theme's own breakpoints.
   -------------------------------------------------------------------------- */
.container {
  width: 95%;
  max-width: 1600px;
  padding-right: 12px;
  padding-left: 12px;
  margin-right: auto;
  margin-left: auto;
}
@media (max-width: 991px) { .container { max-width: 100%; } }
@media only screen and (max-width: 767px) {
  .header-section .container { width: 100%; max-width: 100%; }
}

/* The header's height comes from an explicit height on its container, not from
   its content. Without this the bar sits ~29px higher than the live site. */
.header-section .container { height: 124px; }
@media (max-width: 991px) { .header-section .container { height: 80px; } }

/* Bootstrap's row carries a negative gutter that pulls the columns 12px
   outward. Omitting it shifted every column right and made the logo overlap
   the first menu item by more than it does on the live site. */
.row { display: flex; flex-wrap: wrap; margin-right: -12px; margin-left: -12px; }
.row > * { flex-shrink: 0; width: 100%; max-width: 100%; padding-right: 12px; padding-left: 12px; }

.col-md-1, .col-md-3, .col-md-10, .col-md-12 { flex: 0 0 auto; width: 100%; }
@media (min-width: 768px) {
  .col-md-1  { flex: 0 0 auto; width: 8.33333333%; }
  .col-md-3  { flex: 0 0 auto; width: 25%; }
  .col-md-10 { flex: 0 0 auto; width: 83.33333333%; }
  .col-md-12 { flex: 0 0 auto; width: 100%; }
}

.d-flex { display: flex !important; }
.d-none { display: none !important; }
.d-block { display: block !important; }
.flex-column { flex-direction: column !important; }
.align-items-center { align-items: center !important; }
.justify-content-center { justify-content: center !important; }
.text-center { text-align: center !important; }
.text-uppercase { text-transform: uppercase !important; }
.position-relative { position: relative !important; }
.w-100 { width: 100% !important; }
.gap-3 { gap: 1rem !important; }
.m-0 { margin: 0 !important; }
.z-1 { z-index: 1 !important; }
.text-white { color: #fff !important; }
.text-light { color: #f8f9fa !important; }
.pe-0 { padding-right: 0 !important; }
.fw-semibold { font-weight: 600 !important; }
.grotesk { font-family: var(--font-display), sans-serif; }

/* Redline's font-size scale */
.fs-2  { font-size: 1.5rem !important; }
.fs-5  { font-size: 1rem !important; }
.fs-8  { font-size: 0.5rem !important; }
.fs-11 { font-size: clamp(1.5rem, 2.75vw, 2.75rem) !important; }
.fs-13 { font-size: 0.8125rem !important; }
.fs-15 { font-size: clamp(1.3rem, 2.4vw, 2.4rem) !important; }

/* Redline's spacing scale */
.mt-0 { margin-top: 0 !important; }
.mt-24 { margin-top: 24px !important; }
.mt-30 { margin-top: 30px !important; }
.mt-40 { margin-top: 40px !important; }
.mt-104 { margin-top: 104px !important; }
.mt-135 { margin-top: 135px !important; }
.mt-150 { margin-top: 150px !important; }
.mt-160 { margin-top: 160px !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-27 { margin-bottom: 27px !important; }
.mb-40 { margin-bottom: 40px !important; }
.pt-20 { padding-top: 20px !important; }
.pt-27 { padding-top: 27px !important; }
.pt-43 { padding-top: 43px !important; }
.pt-50 { padding-top: 50px !important; }
.pt-60 { padding-top: 60px !important; }
.pb-40 { padding-bottom: 40px !important; }

@media (max-width: 500px) {
  .footer-section.mt-160 { margin-top: 110px !important; }
}

/* --------------------------------------------------------------------------
   5. Header / navigation — 1:1
   -------------------------------------------------------------------------- */
.header-section {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 6666;
  background: transparent;
}

.navbar { transition: 0.5s linear; }

.navbar.desktop-nav {
  display: flex;
  align-items: center;
  border-radius: 0;
  padding: 15px;              /* 14px 7px is the <=767px override, below */
}
.navbar.desktop-nav > .container { display: flex; align-items: center; }

.header-logo a img { max-width: 90px; height: auto; }

/* SVG stand-ins for the theme's Font Awesome 6 Pro glyphs. FA Pro is a
   licensed kit whose webfonts also lack CORS headers, so the four glyphs the
   header uses are inlined as SVG instead. Sized to match FA's rendered box. */
.rl-icon { display: inline-block; width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.5; vertical-align: -0.125em; }

.search-btn { text-align: right; }
.search-btn button {
  background: none;
  border: none;
  color: var(--rl-nav-link);
  padding: 12px 0 12px 32px;
  cursor: pointer;
  transition: color 0.3s;
}
.search-btn button:hover { color: var(--rl-red); }

/* Off-canvas plumbing is display:none until the mobile breakpoint */
.mobile-menu-checkbox,
.mobile-menu-overlay,
.mobile-menu-close { display: none; }

.menu-view-div-row { display: none !important; }
.menu-view-div-row .toggle i,
.menu-view-div-row .toggle .rl-icon { font-weight: 300; }

/* ---- Desktop: 992px and up ---- */
@media (min-width: 992px) {
  label.toggle { display: none; }
  .menu-bar { width: 100%; text-align: center; }

  .nav_area > ul > li { display: inline-block; position: relative; padding-left: 44px; }
  .nav_area > ul > li:first-child { padding-left: 0; }

  .nav_area ul li a {
    color: var(--rl-nav-link);
    font-size: 11px;
    display: inline-block;
    text-decoration: none;
    letter-spacing: 1px;
    font-family: var(--font-display), sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    transition: color 0.3s;
  }
}
@media (min-width: 992px) and (max-width: 1200px) {
  .nav_area > ul > li { padding-left: 22px; }
}

.nav_area ul li a:hover { color: var(--rl-red); }

/* ---- Tablet + mobile: up to 991px ---- */
@media (max-width: 991px) {
  .menu-bar { position: static; background: transparent; }

  .menu-bar ul.menu {
    position: fixed;
    width: 261px;
    text-align: left;
    background: #fff;
    padding: 20px 0;
    z-index: 9999;
    top: 0;
    left: -100%;
    height: 100%;
    transition: 0.4s;
    border-right: 1px solid var(--rl-drawer-edge);
  }

  nav.nav_area ul li {
    display: block;
    position: relative;
    border: 0;
    border-bottom: 1px solid var(--rl-mobile-rule);
  }

  .nav_area ul li a {
    font-size: 11px;
    color: var(--rl-mobile-ink);
    padding: 0 14px;
    display: inline-block;
    width: 100%;
    letter-spacing: 0;
    font-family: var(--font-display), sans-serif;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 45px !important;
  }

  .menu-view-div-row .toggle {
    color: #fff;
    cursor: pointer;
    font-size: 28px;
    margin: 0;
    text-align: center;
    position: relative;
    display: inline-block;
  }

  #mobile-menu-toggle:checked ~ ul.menu { left: 0; overflow-y: auto; padding-bottom: 30px; padding-top: 55px; }

  #mobile-menu-toggle:checked ~ .mobile-menu-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 33;
    background-color: rgba(0, 0, 0, 0.5);
  }

  .mobile-menu-close {
    position: fixed;
    top: 0;
    left: -100%;
    width: 261px;
    height: 55px;
    background: #fff;
    z-index: 10000;
    display: block;
    text-align: right;
    padding: 14px 18px;
    font-size: 24px;
    color: #000;
    cursor: pointer;
    border-right: 1px solid var(--rl-drawer-edge);
    border-bottom: 1px solid var(--rl-mobile-rule);
    transition: 0.4s;
  }
  #mobile-menu-toggle:checked ~ .mobile-menu-close { left: 0; }

  .desktop-view-search-btn { display: none; }
  .menu-view-div-row { display: block !important; }
  .header-logo { display: none; }
  .col-md-10.menu-div10 { padding: 0; }
  .menu-view-div-row::after { content: ""; display: table; clear: both; }
  .menu-view-div-row .menu-view-col-1 { max-width: 20%; float: left; flex: 1 1 20%; width: 20%; }
  .menu-view-div-row .menu-view-col-2 { max-width: 60%; float: left; width: 60%; }
  .menu-view-div-row .menu-view-col-1 .search-btn { text-align: right; }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .menu-view-logo { max-width: 75px; margin: 0 auto; }
}
@media only screen and (max-width: 767px) {
  .menu-view-logo { max-width: 60px; margin: 0 auto; }
  .navbar.desktop-nav { padding: 14px 7px; }
  .menu-view-div-row .menu-view-col-1 .search-btn { text-align: right; margin-top: 5px; }
  .search-btn button { font-size: 19px; padding-top: 2px !important; }
}
.menu-view-logo img { width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   6. Search modal — mirrors the theme's #searchModal
   -------------------------------------------------------------------------- */
.rl-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-content: center;
  background: rgba(12, 12, 9, 0.92);
  backdrop-filter: blur(6px);
}
.rl-modal[open], .rl-modal.is-open { display: grid; }

.search-bar {
  padding: 5px;
  margin: 0 auto;
  max-width: 630px;
  width: 90%;
  position: relative;
  display: flex;
  background: #131313;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.search-bar .rl-icon.search-glass { position: absolute; top: 14px; left: 16px; width: 18px; height: 18px; color: var(--rl-nav-link); }
.search-bar input {
  padding: 5px 20px 5px 45px;
  flex: 1 1 0%;
  background: transparent;
  border: 0;
  color: #fff;
  font-family: var(--font-body);
  outline: 0;
}
.search-bar input::placeholder {
  text-transform: uppercase;
  font-size: 0.6rem;
  letter-spacing: 2px;
  font-family: var(--font-display), sans-serif !important;
  color: rgba(255, 255, 255, 0.55);
}
.search-bar button {
  padding: 6px 20px 3px;
  letter-spacing: 3px;
  height: 100%;
  font-size: 0.5rem !important;
  background: var(--rl-red);
  color: #fff;
  border: 0;
  border-radius: 100px;
  font-family: var(--font-display), sans-serif;
  text-transform: uppercase;
  cursor: pointer;
}
.rl-modal-close {
  position: absolute;
  top: 24px;
  right: 24px;
  background: none;
  border: 0;
  color: var(--rl-nav-link);
  font-size: 28px;
  cursor: pointer;
  line-height: 1;
}
.rl-modal-close:hover { color: var(--rl-red); }

/* --------------------------------------------------------------------------
   7. Red pill button — reproduces the theme's radial-fill hover exactly
   -------------------------------------------------------------------------- */
.rl-btn {
  /* inline-flex, not inline-block: with a min-height taller than the content
     an inline-block leaves the surplus at the bottom, so the label sits high.
     Centring in both axes makes the label sit true whatever the height, and
     handles the submit button wrapping to two lines on a narrow screen. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: none;
  height: 39px;
  padding: 0 1.5rem;
  border-radius: 100px;
  background: var(--rl-red);
  color: #fff;
  font-size: 11px;
  font-family: var(--font-display), sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 3.2px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: 0.3s;
  cursor: pointer;
}
.rl-btn::after {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-image: linear-gradient(to right, var(--rl-red) 30%, var(--rl-red));
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  transform: translate(-50%, -50%) scale(0);
  transition: 0.5s;
}
.rl-btn:hover::after {
  transform: translate(-50%, -50%) scale(5);
  background-image: linear-gradient(to right, var(--rl-red-dark) 30%, var(--rl-red-darker));
}

/* --------------------------------------------------------------------------
   8. Hero base — the theme's .home-hero
   -------------------------------------------------------------------------- */
.home-hero {
  position: relative;
  height: 100vh;
  padding-top: 78px !important;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  overflow: hidden;
}
.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 0;
}
.home-hero.short { height: 70vh; max-height: 620px; padding-top: 0 !important; }
.home-hero.short::after { background-color: rgba(0, 0, 0, 0.6); }
.home-hero.short h1 { max-width: 700px; }

/* --------------------------------------------------------------------------
   9. Footer — 1:1
   -------------------------------------------------------------------------- */
.footer-section {
  border-top: 1px solid var(--rl-footer-rule);
  padding-top: 98px;
  margin-top: 71px;
  position: relative;
}
.footer-logo {
  position: absolute;
  top: -43px;
  max-width: 130px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.footer-logo img { width: 100%; height: auto; }

h6.footer-title {
  font-size: 15px;
  color: #fff;
  margin-bottom: 11px;
  text-transform: uppercase;
  font-family: var(--font-display), sans-serif;
  font-weight: 500;
  letter-spacing: 1.9px;
}

.list-menu, .footer-section .menu { margin-bottom: 10px; }
.list-menu a, .footer-section .menu li a {
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.3s;
}
.list-menu a:hover, .footer-section .menu li a:hover { color: var(--rl-red); }
.footer-section .menu li { margin-bottom: 2px; }
.footer-section .mb-1.break { font-size: 0.9rem !important; letter-spacing: 0.05rem; word-break: break-word; }

.social-icon {
  width: 32px;
  height: 32px;
  background: #fff;
  color: #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: 0.3s;
}
.social-icon:hover { background: #e02424; color: #fff; }
.social-icon .rl-icon { width: 15px; height: 15px; }

.footer-text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-text ul.menu li { display: inline-block; margin-right: 18px; }
.footer-text ul.menu li a { font-size: 13px; }

.footer-legals {
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0.04rem;
  color: var(--gh-grey-light);
  padding: 28px 0 40px;
  max-width: 1100px;
  margin: 0 auto;
}

@media only screen and (max-width: 767px) {
  .footer-section .col-md-3 { max-width: 50%; margin-bottom: 20px; }
  h6.footer-title { font-size: 11px; }
  .footer-section p.mb-1 { font-size: 9px; }
  .footer-section { padding-top: 64px; }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer-section p.mb-1 { font-size: 11px; }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .footer-section p.mb-1 { font-size: 14px; }
}
@media (max-width: 500px) {
  .footer-logo { top: -29px; max-width: 85px; }
}