/* Site-wide responsive fixes for the Drive / Unlayer page markup.
   build.py links this file last in <head> on every page (with a ?v= content hash). */

/* Nothing inside the page content may widen the page. Slide-in image animations, Bootstrap
   form-row gutters and the homepage services grid made phones scroll sideways.
   `clip` (unlike `hidden`) creates no scroll container, so sticky/fixed elements keep working. */
.body { overflow-x: clip; }

/* /appointments is the one regular page still on Drive's older page theme (styles/customcss-1413):
   moving it to the site theme (1783) left its Firefly form hidden. So its footer gets the site
   footer here instead — the 1783 rules that style footer elements, and resets for the 1413 rules
   that reach into it. The page also links the site footer stylesheet (footer-19d8f847…). */
.body.appointments ~ footer.footer { background-color: #1d1d1d; border-bottom: 0; line-height: 1.5; }
.body.appointments ~ footer.footer a { font-family: 'Open Sans', sans-serif; color: #87181a; }
.body.appointments ~ footer.footer a:hover { color: #183059; }
.body.appointments ~ footer.footer p { color: #000; font-family: 'Open Sans', sans-serif; font-size: 14px !important; line-height: inherit !important; }
.body.appointments ~ footer.footer p[style*="line-height: 140%"] { line-height: 1.4 !important; }
.body.appointments ~ footer.footer p span { line-height: inherit !important; }
.body.appointments ~ footer.footer :is(h1, h2, h3) { color: #183059; font-size: 30px; font-family: 'Montserrat', sans-serif; font-weight: 800; text-transform: none; margin-bottom: 0; }
.body.appointments ~ footer.footer .menu li a { font-weight: bold; text-transform: uppercase; }
.body.appointments ~ footer.footer input[type='button'] { font-family: 'Open Sans', sans-serif; }
.body.appointments ~ footer.footer .u_row { background-color: #fff; }
.body.appointments ~ footer.footer .d-footer-nav ul.menu > li ul.d-sub-menu { border: 1px solid #fff; justify-content: center; background: #fff !important; }
.body.appointments ~ footer.footer .d-vehicle-list-box .d-vehicle-list-heading { font-weight: 600; line-height: 1.2; }
.body.appointments ~ footer.footer .d-vehicle-list-box .d-vehicle-list { margin-top: 15px; }
.body.appointments ~ footer.footer .d-vehicle-list-box .d-vehicle-list li { line-height: 1.5; }
.body.appointments ~ footer.footer .d-vehicle-list-box .d-vehicle-list a { font-size: 14px !important; }
/* Footer CTA buttons: these rules and variables live in the site header stylesheet
   (header-62638ad3…), which this page can't load — its Firefly form stopped appearing with it. */
.body.appointments ~ footer.footer { --theme-color: #87181a; --secondary-color: #183059; --space-md: 12px; }
.body.appointments ~ footer.footer .main-btn input, .body.appointments ~ footer.footer .main-btn a { background: var(--theme-color) !important; border-radius: 0 !important; border: 2px solid #fff !important; color: #fff; padding: 12px 20px !important; text-align: center; display: inline-block; min-width: 175px; }
.body.appointments ~ footer.footer .main-btn input[value], .body.appointments ~ footer.footer .main-btn a { font-weight: bold; font-size: 12px !important; }
.body.appointments ~ footer.footer .main-btn input:hover, .body.appointments ~ footer.footer .main-btn a:hover { background: #fff !important; color: var(--theme-color) !important; border-color: var(--theme-color) !important; }
.body.appointments ~ footer.footer .secondary-btn a { background: var(--secondary-color) !important; color: #fff !important; }
.body.appointments ~ footer.footer .secondary-btn a:hover { background: #fff !important; color: var(--secondary-color) !important; border-color: var(--secondary-color) !important; }
.body.appointments ~ footer.footer .home-sec2-btns { display: flex; justify-content: center; align-items: center; gap: var(--space-md); }
@media (max-width: 768px) { .body.appointments ~ footer.footer .main-btn { width: 100%; display: inline-grid; } }
@media (max-width: 480px) {
  .body.appointments ~ footer.footer .home-sec2-btns { gap: 4px !important; }
  .body.appointments ~ footer.footer .home-sec2-btns .main-btn { flex: 1; }
  .body.appointments ~ footer.footer .home-sec2-btns .main-btn :is(input, a) { font-size: 12px; padding: 10px; }
}

@media (max-width: 767px) {
  /* Drive stacks multi-column rows only at <=480px, so large phones (481-767px) got two
     squeezed columns. Stack them up to 767px; rows marked "no-stack" (icon strips) are left alone. */
  .body .u-row:not(.no-stack) { flex-wrap: wrap; }
  .body .u-row:not(.no-stack) > .u-col { flex: 0 0 100% !important; max-width: 100% !important; }
  /* Four-across rows read better as a 2x2 grid than as four full-width boxes
     (Drive centres these columns with auto side margins, which made each one fill a line). */
  .body .u-row:not(.no-stack):has(> .u-col-25) { column-gap: 10px !important; }
  .body .u-row:not(.no-stack) > .u-col.u-col-25 { flex: 0 0 calc(50% - 5px) !important; max-width: calc(50% - 5px) !important; margin-left: 0 !important; margin-right: 0 !important; }

  /* Photos in image-only columns: once stacked they ran full width, so portrait shots
     (e.g. the homepage brake rotor) filled the screen. Cap the height, crop from the centre. */
  .body .u-row:not(.no-stack) > .u-col:not(:has(p, h1, h2, h3, h4, li, form, input, textarea, button)) img { width: 100%; max-height: 360px; object-fit: cover; }

  /* Drive sets h1-h3 to 30px (some inline up to 36px) at every width; on phones long headings
     wrapped to 5-7 lines, worst inside the two-column sections. */
  .d-wbr .body h1 { font-size: 26px !important; line-height: 1.25 !important; }
  .d-wbr .body h2 { font-size: 23px !important; line-height: 1.3 !important; }
  .d-wbr .body h3 { font-size: 20px !important; line-height: 1.3 !important; }
  .d-wbr .body :is(h1, h2, h3) [style*="font-size"] { font-size: inherit !important; }
  .d-wbr .body .home-hero .hero-copy h1 { font-size: 28px !important; line-height: 1.18 !important; }
  .d-wbr .body .d-progress-sidebar h2 { font-size: 20px !important; } /* job-application sidebar title is already small */

  /* Paired CTA buttons wrap instead of running off the edge. */
  .body .home-sec2-btns { flex-wrap: wrap; }
}

/* Homepage "Our Services" boxes as cards: below 1200px, and on touch screens that can't hover (2026-09-16).
   The boxes show their text only on hover, and below 1200px the longer copy no longer fits a box (on phones it
   ran out past the top). Each box is a card that grows to fit: the photo on top (::before paints the box's own
   background image; the box itself paints brand red), faded into the red by ::after, then the heading and the
   description, always shown. Two columns (one on phones; the fixed 3-column template areas ran off small
   screens). The homepage script's inline title offset (set on mouseenter) is overridden. */
@media (max-width: 1199px), (hover: none) {
  .body .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-areas: none !important; grid-auto-rows: auto !important; }
  .body .services-grid .grid-item {
    --photo-h: 220px;
    grid-area: auto !important; height: auto !important; padding: var(--photo-h) 1rem 1rem;
    background-color: #87181a; background-size: 0 0;
  }
  .body .services-grid .grid-item::before {
    bottom: auto; height: var(--photo-h); opacity: 1; transition: none;
    background: none; background-image: inherit; background-size: cover; background-position: center; background-repeat: no-repeat;
  }
  .body .services-grid .grid-item::after { bottom: auto; height: var(--photo-h); z-index: 2; background: linear-gradient(to top, #87181a 0%, transparent 35%); }
  .body .services-grid :is(.grid-item-title, .grid-item-desc) { position: relative; inset: auto !important; z-index: 3; }
  /* !important: on phones the site-wide ".d-wbr .body h3" rule above sets headings to 20px !important. */
  .body .services-grid .grid-item-title { margin-top: .5rem; font-size: 16px !important; line-height: 1.4 !important; text-shadow: none; }
  .body .services-grid .grid-item-desc { opacity: 1; transform: none; margin: .35rem 0 0; font-size: 14px; line-height: 1.45; }
}
@media (max-width: 767px) {
  .body .services-grid .grid-item { --photo-h: 190px; }
}
@media (max-width: 480px) {
  .body .services-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .body .services-grid .grid-item { --photo-h: 200px; }
}

/* Bryant's badge (assets/images/badge/, cut out of the client's round artwork 2026-09-15): above the banner
   headline on the 13 inner pages that have one (.hero-title), as a seal on the top edge of the dark footer
   (both footer partials), and on the homepage's "A Rare Masterpiece" photo (the <img> is in pages/index.html).
   The light 2px glow keeps the navy ring from disappearing into dark backgrounds. */
.hero-title::before {
  content: ""; display: block; width: 124px; height: 124px; margin: 0 auto 16px;
  background: url("/assets/images/badge/bryant-badge-360.webp") center / contain no-repeat;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, .55)) drop-shadow(0 8px 18px rgba(0, 0, 0, .45));
}
/* Drive pads the banner 200px on top; take the badge's height back off so the banner stays the same size. */
div#banner:has(.hero-title) { padding-top: 60px !important; }
#footer { position: relative; }
/* Homepage "A Rare Masterpiece": centred on the Packard photo's top-left corner, sized to the photo so it
   stays clear of the owner's head; on phones, where the photo stacks under the text, on its top edge. */
#home-sec3 .d-con-custom-image { position: relative; }
#home-sec3 .section-badge {
  position: absolute; top: 0; left: 0; z-index: 2; width: clamp(96px, 26%, 150px); height: auto;
  transform: translate(-54%, -54%);
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, .55)) drop-shadow(0 8px 18px rgba(0, 0, 0, .45));
}
#footer > .footer-badge {
  position: absolute; top: 0; left: 50%; z-index: 3; width: 150px; height: auto;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, .55)) drop-shadow(0 8px 18px rgba(0, 0, 0, .35));
}
@media (max-width: 767px) {
  .hero-title::before { width: 88px; height: 88px; margin-bottom: 12px; }
  div#banner:has(.hero-title) { padding-top: 100px !important; }
  #home-sec3 .section-badge { left: auto; right: 16px; width: 88px; transform: translateY(-50%); }
  #footer > .footer-badge { width: 112px; }
}

/* Header logo (2026-09-16). The logo is a burgundy car on a navy wrench in exactly the site's burgundy and
   navy, so it disappeared into Drive's burgundy nav bar (desktop) and navy top bar (phones and tablets, where
   the logo sits in the top bar). Both bars are white where the logo sits, and the header partials show the
   client's dark-lettered logo (assets/images/unlayer/1681763893932-newlogo.png); the footer keeps the
   white-lettered one on its dark photo. Menu, dropdown arrow and "Call Us" colours follow the white bar. */
#main-nav-bar { background-color: #fff !important; }
#main-nav-bar .d-header-nav ul.menu > li > div > a { color: #183059 !important; }
#main-nav-bar .d-header-nav ul.menu > li > div:is(.selected, :hover) > a { color: #87181a !important; }
#main-nav-bar .d-header-nav ul.menu > li > div > a::after { background-color: #87181a !important; }
#main-nav-bar .d-header-nav ul.menu > li > div .d-dropdown::after { border-top-color: #183059 !important; }
#main-nav-bar .d-header-nav ul.menu > li > div:hover .d-dropdown::after { border-top-color: #87181a !important; }
#main-nav-bar .nav-bar-contact :is(p, a) { color: #183059; }
#main-nav-bar .nav-bar-contact a:hover { color: #87181a; }
#main-nav-bar .nav-bar-contact i { background-color: #87181a; color: #fff; }
/* The site theme already shades the header's lower edge; the older theme (appointments, ad pages) and the 404
   page didn't, so the white bar ran straight into white page content there. */
header.header { box-shadow: 0 3px 15px rgba(0, 0, 0, .15); }
@media (max-width: 991px) {
  #header-top { background-color: #fff !important; }
  /* The two ad landing pages (header-3a9242c8 partial) also show address, hours, ratings and "Call Us" here. */
  #header-top .shop-info-item :is(a, span, i), #header-top .rating, #header-top .nav-bar-contact :is(p, a) { color: #183059; }
  #header-top .nav-bar-contact a:hover { color: #87181a; }
  #header-top .nav-bar-contact i { background-color: #87181a; color: #fff; }
  /* Facebook's wordmark image is white; this filter turns it Facebook blue (#1b74f2). */
  #header-top .platform-logo[alt="Facebook"] { filter: brightness(0) saturate(100%) invert(38%) sepia(66%) saturate(4462%) hue-rotate(205deg) brightness(99%) contrast(92%); }
}