/* ---- Modern home-page sections (About / Contact / Sakai) + new footer ----
   Scoped under .modern-* so nothing here can leak into or be overridden by
   the captured WP theme CSS. Loaded last (wp-999b) — wins over everything. */

/* ==================================================================
   Header: part of normal document flow, not a fixed overlay.
   The captured theme pins `header{position:fixed}` and then every page
   compensates with its own padding-top hack to stop content sliding
   underneath it (#secondary-banner's padding-top:160px, .sb-hero's
   padding-top:176px, and one-off inline paddingTop on pages that forgot
   to add the hack). That's backwards — fix the header once here instead
   of compensating on every page. With the header back in flow, all of
   those compensating paddings are removed elsewhere in this stylesheet.
   ================================================================== */
header {
  position: static !important;
  top: auto !important;
}

/* The theme's header .container is a fixed 1100px, auto-centered, plus its
   own internal padding, plus Bootstrap's .row -15px gutter compensation,
   plus nav.navbar's own 16px padding — several layers stacking up to a big
   empty-looking gutter on both sides. Go full-width (no auto-centering
   margin at all) and collapse every one of those inner offsets down to a
   single, small, fixed edge inset. */

/* Toolbar and logo/nav row share the same centered max-width "track" (also
   matched pixel-for-pixel to StickyNavClone.tsx's `mx-auto max-w-[1270px]
   px-4 lg:px-6` wrapper) so nothing drifts out of alignment at in-between
   viewport widths (laptops) the way an independent fixed px inset did.
   Toolbar gets a touch more edge padding than the nav row so its content
   reads as slightly inset from the logo/links below it. */
body header .toolbar .container,
body header .bottom-header .container {
  width: 100% !important;
  max-width: 1270px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}
@media (min-width: 1024px) {
  body header .toolbar .container,
  body header .bottom-header .container {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}
body header .toolbar .container {
  padding-left: 24px !important;
  padding-right: 24px !important;
}
@media (min-width: 1024px) {
  body header .toolbar .container {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

body header .bottom-header .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body header .bottom-header nav.navbar {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Tailwind ships a `.collapse` utility (table-row visibility, unrelated to
   Bootstrap) that collides with Bootstrap's `.navbar-collapse.collapse`
   class name here: tailwind.css defines it as
   `@layer utilities { .collapse { visibility: collapse !important } }`,
   which — being inherited — blanks out the entire nav (and everything
   under it) at every viewport width. Higher specificity alone can't beat
   it: per the CSS cascade-layers spec, an !important declaration inside
   ANY named layer outranks an unlayered !important declaration outright,
   regardless of specificity. So this override has to live in a layer too
   — and since this stylesheet loads before tailwind.css, a layer named
   here is registered earlier in the document's global layer order, and
   for !important declarations the earliest-declared layer wins. */
@layer overrides {
  body header .bottom-header .navbar-collapse.collapse {
    visibility: visible !important;
  }
}

/* Logo: stretched to fill the full height of the header bar (the row's
   height is set by the nav links' own 25px/25px padding — see
   autoptimize_single_354686bf8b5e66dd02c47531ff3b6f2c.css — so the flex
   chain below tracks that instead of hardcoding a guessed pixel height).
   Desktop-only (min-width matches Bootstrap's navbar-expand-lg breakpoint,
   where the nav switches from the collapsed hamburger menu to the full
   horizontal bar) — forcing display:flex/stretch here at mobile widths
   fought the collapsed-menu layout and broke the toggle. */
@media (min-width: 992px) {
  /* The markup never carries Bootstrap's `navbar-expand-*` class, so none
     of Bootstrap 4's built-in "auto-show the collapse on desktop" media
     queries ever match — .navbar-collapse stays at its base
     `.collapse{display:none}` and only the mobile hamburger toggle (which
     adds .show) can reveal it. Force it open here, and swap in the
     desktop link list explicitly since wp-inline.css's
     .fullsize_menu/.mobile_dropdown_menu swap is also mobile-only
     (@media max-width:768px), leaving both duplicate menus visible
     without this. */
  body header .bottom-header .navbar-collapse.collapse {
    display: flex !important;
  }
  body header .bottom-header .navbar-navigation .fullsize_menu {
    /* Bootstrap 4's base .navbar-nav is `flex-direction:column` — only the
       navbar-expand-* media queries (never matched, see above) flip it to
       row. Without this it renders, just stacked vertically instead of as
       a horizontal bar. */
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
  }
  body header .bottom-header .navbar-navigation .mobile_dropdown_menu {
    display: none !important;
  }
  body header .bottom-header nav.navbar-default {
    align-items: stretch !important;
  }
  body header .bottom-header .navbar-header {
    display: flex !important;
    align-items: stretch !important;
  }
  body header .bottom-header .navbar-brand {
    display: flex !important;
    align-items: stretch !important;
    height: auto !important;
    padding: 0 !important;
  }
  body header .bottom-header .navbar-brand .logo {
    display: flex !important;
    align-items: stretch !important;
  }
  body header .bottom-header .navbar-brand .main_logo {
    height: auto !important;
    width: auto !important;
    max-height: none !important;
    align-self: stretch !important;
    object-fit: contain;
  }
}

/* ==================================================================
   Sticky nav on scroll: Header.tsx renders a separate always-in-DOM
   fixed bar (StickyNavClone.tsx, pure Tailwind, no CSS needed here)
   that's translated off-screen until scrolled past the halfway point of
   the homepage hero. The real .bottom-header stays untouched in normal
   flow the whole time — deliberately NOT `position: sticky` on the real
   nav; in this app that silently behaves like `position: static` for
   reasons that didn't reproduce in a minimal page (every ancestor
   checked clean — overflow, transform, filter, contain, isolation — and
   it persisted across dev and production builds). The clone-bar pattern
   sidesteps it entirely and is a common, robust approach regardless.
   ================================================================== */

/* ==================================================================
   Body font: Geist (matched to dawood.ae's rebrand, loaded via next/font
   in the root layout as --font-geist). Applies everywhere by default; h1
   and the nav are explicitly restored to the theme's bold Open Sans below
   — those two stay untouched, everything else reads in the cleaner Geist.
   ================================================================== */
:root {
  --font-shadcn: var(--font-geist), ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
html {
  /* Sitewide type scale, dialed down a notch — every rem-based font-size
     (Tailwind utilities and the theme's own rem values alike) shrinks with
     it. Hero (h1) and nav keep their own explicit sizes untouched below. */
  font-size: 93.75%; /* 15px */
}
body {
  font-family: var(--font-shadcn) !important;
}
h1,
.main-heading,
header .nav-link,
header .navbar-nav > li > a,
header .menu-main-menu-container ul li a,
header .mobile-menu-main-menu-container ul li a,
.f-nav a {
  font-family: 'Open Sans', sans-serif, Arial !important;
}

/* wp-inline.css sets font-family directly on h2–h6 and a long list of body
   text elements (paragraphs, list items, table cells, etc.) — those beat
   the inherited value from `body` above regardless of !important, since a
   rule matched directly on the element always wins over inheritance. Mirror
   each of those selectors verbatim (same specificity, loaded later here)
   so they flip to Geist too. h1 and every nav selector are deliberately
   left out — they keep Open Sans from the block above. */
h2, .page-content h2, .wp_page .page-content h2,
h3, .page-content h3, .side-content .financing_calculator h3, .side-content .list h3,
h4, .page-content h4,
h5, .page-content h5, .detail-service .details h5,
h6, .page-content h6,
table, ul, li, .theme_font, .textwidget, .recent-vehicles p, .post-entry table,
.icon_address p, .list_faq ul li a, .list-info p, .blog-list span, .blog-content strong,
.post-entry, .pricing_table .category_pricing ul li, .inventory-heading em,
body ul.shortcode.type-checkboxes li, .about-us p, .blog-container p, .blog-post p,
.address ul li strong, .address ul li span {
  font-family: var(--font-shadcn) !important;
}

/* ==================================================================
   Sitewide button + field modernization.
   The captured theme's `.gradient_button` (glossy gray/red gradients,
   heavy shadows, 9px asymmetric radii) and default form controls read as
   dated next to the new sections above. Rather than touch every
   component that already uses these classes (ListingCard, ContentPage,
   listing detail nav, stock-list filters, admin-adjacent public pages),
   override them here — same "later file wins" pattern the rest of this
   stylesheet stack already relies on. Sized to shadcn/ui's default
   button scale (h-9 / 6px radius / font-medium).
   ================================================================== */
.gradient_button,
.btn-inventory,
.submit_contact_form,
.form_contact input[type="submit"],
.wpcf7-form input[type="submit"],
.side-content form input[type="submit"],
input[type="submit"],
input[type="button"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px !important;
  padding: 0 16px !important;
  background: #c7081b !important;
  background-image: none !important;
  color: #fff !important;
  border: 1px solid #c7081b !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-family: var(--font-shadcn) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: normal !important;
  letter-spacing: 0 !important;
  text-indent: 0 !important;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s, opacity .15s;
}
.gradient_button:hover,
.btn-inventory:hover,
.submit_contact_form:hover,
.form_contact input[type="submit"]:hover,
.wpcf7-form input[type="submit"]:hover,
.side-content form input[type="submit"]:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background: #a30716 !important;
  border-color: #a30716 !important;
  color: #fff !important;
}
.gradient_button.transparent {
  background: transparent !important;
  color: #c7081b !important;
  border: 1.5px solid #c7081b !important;
  opacity: 1 !important;
}
.gradient_button.transparent:hover {
  background: #c7081b !important;
  color: #fff !important;
}
/* small contextual buttons (ListingCard "View Details", tab links) stay
   compact instead of inheriting the 38px default height */
.gradient_button.view-details,
.gradient_button.view-video {
  height: 28px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  border-radius: 6px !important;
}
.single-listing-tabs .nav-tabs > li > a {
  border-radius: 7px 7px 0 0 !important;
  background: #f4f4f5 !important;
  color: #3f3f46 !important;
  border: 1px solid #e4e4e7 !important;
  height: auto !important;
  padding: 10px 18px !important;
}
.single-listing-tabs .nav-tabs > li > a.active {
  background: #fff !important;
  color: #c7081b !important;
}

/* form fields sitewide: shadcn/ui Input scale (h-9 / 6px radius) */
.css-dropdowns,
select.css-dropdowns,
.ts-wrapper .ts-control,
.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
select {
  border-radius: 6px !important;
  border-color: #d4d4d8 !important;
  font-family: var(--font-shadcn) !important;
  font-size: 13.5px !important;
}
.ts-wrapper.single .ts-control { min-height: 36px !important; }

.modern-section { padding: 64px 0; }
.modern-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

/* ---- About ---- */
.modern-about { background: #fff; }
.modern-about-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}
.modern-about-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #c7081b;
  margin-bottom: 12px;
}
.modern-about h2 {
  font-size: 34px;
  line-height: 1.2;
  font-weight: 800;
  color: #18181b;
  margin: 0 0 18px;
}
.modern-about p {
  font-size: 16px;
  line-height: 1.75;
  color: #52525b;
  margin: 0 0 28px;
}
.modern-stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}
.modern-stat { text-align: left; }
.modern-stat-num { font-size: 30px; font-weight: 800; color: #c7081b; line-height: 1; }
.modern-stat-label { font-size: 13px; color: #71717a; margin-top: 6px; }
.modern-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 18px;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .15s, color .15s, border-color .15s;
}
.modern-btn-primary { background: #c7081b; color: #fff; }
.modern-btn-primary:hover { background: #9e0615; color: #fff; }
.modern-about-media {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .35);
}
.modern-about-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .modern-about-grid { grid-template-columns: 1fr; }
  .modern-about-media { order: -1; }
}

/* ---- Sakai partner card ---- */
.modern-sakai { background: #f4f4f5; }
.modern-sakai-card {
  background: #fff;
  border-radius: 18px;
  padding: 44px;
  display: grid;
  grid-template-columns: 200px 1fr auto;
  align-items: center;
  gap: 36px;
  box-shadow: 0 12px 32px -18px rgba(0, 0, 0, .25);
}
.modern-sakai-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  border: 1px solid #e4e4e7;
  border-radius: 12px;
}
.modern-sakai-logo img { max-width: 100%; height: auto; display: block; }
.modern-sakai-body h3 {
  font-size: 21px;
  font-weight: 800;
  color: #18181b;
  margin: 0 0 8px;
}
.modern-sakai-body p { font-size: 15px; line-height: 1.7; color: #52525b; margin: 0; }
.modern-btn-outline {
  border: 1.5px solid #c7081b;
  color: #c7081b;
  background: transparent;
  white-space: nowrap;
}
.modern-btn-outline:hover { background: #c7081b; color: #fff; }

@media (max-width: 800px) {
  .modern-sakai-card { grid-template-columns: 1fr; text-align: center; }
  .modern-sakai-logo { justify-self: center; }
}

/* ---- Contact CTA band ---- */
.modern-contact-cta {
  background: linear-gradient(155deg, #1c1c1f 0%, #18181b 55%, #0f0f11 100%);
  color: #fff;
}
.modern-contact-inner { text-align: center; }
.modern-contact-cta h2 { font-size: 30px; font-weight: 800; margin: 0 0 12px; }
.modern-contact-cta p {
  font-size: 16px;
  color: rgba(255, 255, 255, .72);
  max-width: 560px;
  margin: 0 auto 32px;
  line-height: 1.7;
}
.modern-contact-methods {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.modern-contact-method {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  transition: background-color .15s, border-color .15s;
}
.modern-contact-method:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .4); }
.modern-contact-method.modern-contact-method-primary { background: #c7081b; border-color: #c7081b; }
.modern-contact-method.modern-contact-method-primary:hover { background: #9e0615; }

/* ---- Footer ---- */
.modern-footer { background: #18181b; color: rgba(255, 255, 255, .72); }
.modern-footer-top { padding: 60px 0 40px; }
.modern-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
}
.modern-footer-brand img { height: 44px; width: auto; margin-bottom: 16px; }
.modern-footer-brand p { font-size: 14.5px; line-height: 1.7; color: rgba(255, 255, 255, .6); margin: 0 0 18px; max-width: 320px; }
.modern-footer-social { display: flex; gap: 10px; }
.modern-footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  text-decoration: none;
  transition: background-color .15s;
}
.modern-footer-social a:hover { background: #c7081b; }
.modern-footer h4 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 18px;
}
.modern-footer ul { list-style: none; margin: 0; padding: 0; }
.modern-footer li { margin-bottom: 11px; }
.modern-footer a { color: rgba(255, 255, 255, .68); text-decoration: none; font-size: 14.5px; }
.modern-footer a:hover { color: #fff; }
.modern-footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: rgba(255, 255, 255, .68);
  font-size: 14.5px;
  line-height: 1.6;
}
.modern-footer-contact i { color: #c7081b; margin-top: 3px; flex-shrink: 0; width: 14px; }
.modern-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, .5);
}
.modern-footer-bottom a { color: rgba(255, 255, 255, .5); }
.modern-footer-bottom a:hover { color: #fff; }
.modern-footer-legal { display: flex; gap: 20px; }

@media (max-width: 900px) {
  .modern-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .modern-footer-grid { grid-template-columns: 1fr; }
  .modern-footer-bottom { flex-direction: column; text-align: center; }
}

/* ---- Contact page section (info + map / form), styled after dawood.ae ---- */
.modern-contact-page { background: #fff; }
.modern-contact-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 56px;
  align-items: start;
}
.modern-contact-page h1,
.modern-contact-page h2 {
  font-size: 34px;
  font-weight: 800;
  color: #18181b;
  margin: 0 0 28px;
}
.modern-contact-items { list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.modern-contact-item { display: flex; align-items: flex-start; gap: 14px; }
.modern-contact-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fbe9eb;
  color: #c7081b;
  flex-shrink: 0;
  font-size: 16px;
}
.modern-contact-item h4 { font-size: 15px; font-weight: 700; color: #18181b; margin: 0 0 4px; }
.modern-contact-item p, .modern-contact-item a { font-size: 14.5px; color: #52525b; margin: 0; line-height: 1.6; text-decoration: none; }
.modern-contact-item a:hover { color: #c7081b; }
.modern-contact-map {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #e4e4e7;
}
.modern-contact-map iframe { display: block; width: 100%; }

/* modern form fields (ContactForm, InventorySearch, MachineInquiryForm) */
.modern-form-field { margin-bottom: 20px; }
.modern-form-field label { display: block; font-size: 13.5px; font-weight: 500; color: #18181b; margin-bottom: 7px; }
.modern-form-field input,
.modern-form-field textarea,
.modern-form-field select {
  width: 100%;
  box-sizing: border-box;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #d4d4d8;
  border-radius: 6px;
  font-size: 13.5px;
  font-family: inherit;
  color: #18181b;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.modern-form-field textarea { height: auto; padding: 10px 12px; min-height: 120px; }
.modern-form-field input:focus,
.modern-form-field textarea:focus,
.modern-form-field select:focus {
  outline: none;
  border-color: #c7081b;
  box-shadow: 0 0 0 3px rgba(199, 8, 27, .12);
}

/* Search Our Inventory (home page) */
.modern-search { background: #f4f4f5; }
.modern-search-card {
  background: #fff;
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 12px 32px -18px rgba(0, 0, 0, .2);
}
.modern-search-heading { text-align: center; margin-bottom: 32px; }
.modern-search-heading h2 { font-size: 28px; font-weight: 800; color: #18181b; margin: 0 0 8px; }
.modern-search-heading p { font-size: 15px; color: #71717a; margin: 0; }
.modern-search-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px 20px;
  margin-bottom: 24px;
}
.modern-search form > .modern-btn { display: flex; margin: 0 auto; min-width: 200px; }
@media (max-width: 900px) {
  .modern-search-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .modern-search-card { padding: 28px 20px; }
  .modern-search-grid { grid-template-columns: 1fr; }
}
.modern-form-submit {
  width: 100%;
  height: 36px;
  padding: 0 18px;
  border: none;
  border-radius: 6px;
  background: #18181b;
  color: #fff;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .15s;
}
.modern-form-submit:hover { background: #c7081b; }
.modern-form-submit:disabled { opacity: .6; cursor: default; }
.modern-form-result { margin-bottom: 18px; padding: 12px 16px; border-radius: 8px; background: #f4f4f5; color: #3f3f46; font-size: 14px; }

@media (max-width: 900px) {
  .modern-contact-grid { grid-template-columns: 1fr; }
}

/* #secondary-banner's padding-top:160px (theme CSS) existed to compensate
   for the fixed header (.sb-hero's own padding is fixed at the source in
   site-forms.css). Header is static now — drop the compensation. */
body #secondary-banner { padding-top: 40px !important; }