/* ================================================================
   Impreza Child — Raycin Dark
   Matches the Stats Site & Vehicles Site colour palette exactly.
   All overrides target confirmed Impreza class names.
   ================================================================ */

/* ------------------------------------------------------------------
   1. CSS Variables
------------------------------------------------------------------ */
:root {
  --bg:      #0d0f18;
  --card:    #12141c;
  --border:  #252836;
  --gold:    #f6c90e;
  --gold-lt: #ffd94a;
  --gold-dim: rgba(246,201,14,.12);
  --text:    #eef0f5;
  --muted:   #8892a4;
  --link:    #8892a4;
  --green:   #3fb950;
  --red:     #f85149;
  --input:   #1e2130;
  --shadow:  0 4px 20px rgba(0,0,0,.5);
  --radius:  10px;
  --trans:   .2s ease;
}

/* ------------------------------------------------------------------
   2. Body & Page Canvas
------------------------------------------------------------------ */
body,
.l-body,
.l-canvas,
#page,
.site {
  background-color: var(--bg) !important;
  color: var(--text) !important;
}

/* Note: we do NOT override .l-section inline background styles here —
   pages use intentional gradient overlays (e.g. hero sections) that
   must be preserved. Impreza sections without inline styles get
   dark bg via the .l-section rule below. */

/* ------------------------------------------------------------------
   3. Typography
------------------------------------------------------------------ */
/* Headings: clean white/light + smaller (gold reserved for small accent
   labels/badges only). Sizes trimmed so Impreza defaults aren't oversized. */
h1, h2, h3, h4, h5, h6,
.w-text-h, .entry-title, .page-title,
.us-post-title {
  color: var(--text) !important;
}
h1, .entry-title, .page-title, .us-post-title { font-size: clamp(1.7rem, 3.4vw, 2.2rem) !important; line-height: 1.18 !important; }
h2 { font-size: clamp(1.45rem, 2.6vw, 1.8rem) !important; line-height: 1.2 !important; }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem) !important; line-height: 1.25 !important; }
h4 { font-size: 1.15rem !important; }
h5 { font-size: 1rem !important; }
h6 { font-size: .9rem !important; }

p, li, td, th, label, span,
.w-text-value {
  color: var(--text);
}

/* Links: gold by default, but NO !important so that pages with
   intentional custom link colours (e.g. .gta-button #00e5ff,
   .rr-wrap orange) can override with their own class selectors. */
a {
  color: var(--link);
  transition: color var(--trans);
}
a:hover {
  color: var(--gold);
  text-decoration: none;
}

/* Plain unclassed inline links inside content — muted, hover reveals gold */
.entry-content a:not([class]),
.vc_column_text a:not([class]),
.wpb_text_column a:not([class]) {
  color: var(--link) !important;
}
.entry-content a:not([class]):hover,
.vc_column_text a:not([class]):hover,
.wpb_text_column a:not([class]):hover {
  color: var(--gold) !important;
}

/* Impreza's pink/purple accent colour — replace everywhere with gold */
.color_primary,
[class*="color_primary"] {
  color: var(--gold) !important;
}
.bg_primary,
[class*="bg_primary"] {
  background-color: var(--gold) !important;
  color: #0d0f18 !important;
}

/* ------------------------------------------------------------------
   4. Header & Subheader
------------------------------------------------------------------ */
.l-header,
.l-header-sticky,
.l-header-sticky_content {
  background-color: var(--card) !important;
  border-bottom: 2px solid var(--border) !important;
  box-shadow: 0 4px 32px rgba(0,0,0,.7) !important;
  transition: background-color .25s ease, box-shadow .25s ease !important;
}

/* Sticky header gets slightly more opaque + tighter shadow */
.l-header.sticky {
  background-color: rgba(18,20,28,.96) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,.85) !important;
  border-bottom-color: var(--gold) !important;
}

.l-subheader,
.l-subheader-h {
  background-color: transparent !important;
}

/* Bottom subheader row (vehicles button bar) */
.l-subheader.at_bottom {
  background-color: rgba(13,15,24,.6) !important;
  border-top: 1px solid var(--border) !important;
}

/* ------------------------------------------------------------------
   4b. COMPACT HEADER (gtaboom-style slim bar)
   Impreza's us_header (post 29) sets the middle row to ~154px tall via
   inline CSS (.l-subheader.at_middle{line-height:154px;height:154px}) and
   --header-height:204px. We override to a slim ~64px bar (56px sticky).
   Stats sidebar reads header height live via JS offsetHeight, so it adapts.
------------------------------------------------------------------ */
:root,
.l-header {
  --header-height: 64px !important;
}
.l-subheader.at_middle,
.l-subheader.at_middle .l-subheader-h {
  line-height: 64px !important;
  height: 64px !important;
  min-height: 64px !important;
}
.l-header.sticky .l-subheader.at_middle,
.l-header.sticky .l-subheader.at_middle .l-subheader-h {
  line-height: 56px !important;
  height: 56px !important;
  min-height: 56px !important;
}
/* Trim default subheader padding so the slim bar isn't padded back out */
.l-subheader-h {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* Hide the redundant bottom row (single "Vehicles Database" button now
   duplicated by the "Vehicles" menu item) — gtaboom uses ONE slim bar. */
.l-header .l-subheader.at_bottom {
  display: none !important;
}
@media (max-width: 900px) {
  :root, .l-header { --header-height: 56px !important; }
  .l-subheader.at_middle,
  .l-subheader.at_middle .l-subheader-h {
    line-height: 56px !important;
    height: 56px !important;
    min-height: 56px !important;
  }
}

/* Logo image — fix sizing for the 300×70 horizontal wordmark SVG.
   Impreza compiled CSS sets heights with !important, so we must too.
   Target: .ush_image_2 (class set by Impreza on this specific image element). */

/* Logo sizing — use .l-header .ush_image_2 (2 classes = higher specificity than
   Impreza's .ush_image_2 single-class rule). When both have !important,
   specificity decides — so our 2-class selector always wins. */
@media (min-width: 1381px) {
  .l-header .ush_image_2         { height: 34px !important; width: auto !important; }
  .l-header.sticky .ush_image_2  { height: 28px !important; width: auto !important; }
}
@media (min-width: 1025px) and (max-width: 1380px) {
  .l-header .ush_image_2         { height: 32px !important; width: auto !important; }
  .l-header.sticky .ush_image_2  { height: 28px !important; width: auto !important; }
}
@media (min-width: 601px) and (max-width: 1024px) {
  .l-header .ush_image_2         { height: 30px !important; width: auto !important; }
  .l-header.sticky .ush_image_2  { height: 26px !important; width: auto !important; }
}
@media (max-width: 600px) {
  .l-header .ush_image_2         { height: 28px !important; width: auto !important; }
}

/* Logo link — no underline, no focus ring */
.ush_image_2 a,
.ush_image_2 .w-image-h {
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  outline: none !important;
}

/* Mobile text fallback ("Raycin") — style to match the brand */
.ush_text_2 .w-text-h,
.ush_text_2 .w-text-value {
  font-family: 'Segoe UI', system-ui, sans-serif !important;
  font-size: 1.6rem !important;
  font-weight: 900 !important;
  font-style: italic !important;
  color: var(--gold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  text-decoration: none !important;
}

/* Logo text colour (fallback for other logo elements) */
.l-subheader .w-logo a,
.l-subheader .w-logo,
.l-subheader .site-name,
.w-logo-title {
  color: var(--gold) !important;
}

/* Vehicles button in bottom bar — make it more refined */
.ush_btn_1.us-btn-style_8 {
  font-size: 0.75rem !important;
  letter-spacing: 0.06em !important;
  padding: 7px 16px !important;
  text-transform: uppercase !important;
}

/* ------------------------------------------------------------------
   5. Navigation
------------------------------------------------------------------ */

/* --- Login-aware header items ---
   WordPress adds `logged-in` to <body>; toggle membership links off it.
   rh-when-logged-out: Join + Log in (guests). rh-when-logged-in: My Account + Log out (members). */
body.logged-in .menu-item.rh-when-logged-out { display: none !important; }
body:not(.logged-in) .menu-item.rh-when-logged-in { display: none !important; }
/* "Crew" menu item shows only to Crew members (body.rh-crew set by raycin-crew). */
body:not(.rh-crew) .menu-item.rh-when-crew { display: none !important; }

/* --- Base link state --- */
.w-nav .w-nav-anchor,
.w-nav-list > li > a,
.ush_menu_1 .w-nav-item > a:not(.w-btn),
.menu-item > a:not(.w-btn) {
  color: var(--text) !important;
  background-color: transparent !important;
  transition: color .18s ease, background-color .18s ease, box-shadow .18s ease !important;
}

/* --- Hover — top-level --- */
.w-nav .w-nav-anchor:hover,
.w-nav-list > li:hover > a:not(.w-btn),
.ush_menu_1 .w-nav-item.level_1:hover > a:not(.w-btn),
.ush_menu_1 .w-nav-item.level_1.opened > a:not(.w-btn) {
  color: var(--gold) !important;
  background-color: var(--gold-dim) !important;
  /* Gold underline indicator */
  box-shadow: inset 0 -3px 0 var(--gold) !important;
}

/* --- Active / current page — top-level --- */
.w-nav-list > li.current-menu-item > a:not(.w-btn),
.w-nav-list > li.current_page_item > a:not(.w-btn),
.w-nav-list > li.current-menu-ancestor > a:not(.w-btn),
.w-nav-list > li.current-page-ancestor > a:not(.w-btn),
.ush_menu_1 .w-nav-item.level_1.current-menu-item > a:not(.w-btn),
.ush_menu_1 .w-nav-item.level_1.current-menu-ancestor > a:not(.w-btn),
.ush_menu_1 .w-nav-item.level_1.current-page-ancestor > a:not(.w-btn) {
  color: var(--gold) !important;
  background-color: rgba(246,201,14,.08) !important;
  /* Solid gold bottom border — clear "you are here" marker */
  box-shadow: inset 0 -3px 0 var(--gold) !important;
  font-weight: 700 !important;
}

/* --- Desktop dropdown panel --- */
.w-dropdown-list,
.w-dropdown,
.w-nav-list .sub-menu,
.w-nav-list .children {
  background-color: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-top: 2px solid var(--gold) !important;   /* gold accent top edge */
  box-shadow: 0 8px 24px rgba(0,0,0,.55) !important;
  border-radius: 0 0 8px 8px !important;
}

/* --- Dropdown links --- */
.w-dropdown .w-nav-anchor,
.w-dropdown-list .w-nav-anchor,
.w-nav-list .sub-menu a,
.w-nav-list .children a,
.ush_menu_1 .w-nav-item:not(.level_1) > a:not(.w-btn) {
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
  background-color: transparent !important;
  transition: color .15s ease, background-color .15s ease, padding-left .15s ease !important;
}

/* Last dropdown item — remove bottom border */
.w-nav-list .sub-menu li:last-child a,
.w-nav-list .children li:last-child a {
  border-bottom: none !important;
}

/* --- Dropdown hover --- */
.w-dropdown .w-nav-anchor:hover,
.w-dropdown-list .w-nav-anchor:hover,
.w-nav-list .sub-menu a:hover,
.w-nav-list .children a:hover,
.ush_menu_1 .w-nav-item:not(.level_1):hover > a:not(.w-btn),
.ush_menu_1 .w-nav-item:not(.level_1).current-menu-item > a:not(.w-btn) {
  color: var(--gold) !important;
  background-color: var(--gold-dim) !important;
  padding-left: 1.5em !important;   /* subtle slide-right */
}

/* --- Mobile nav panel --- */
.w-nav.type_mobile .w-nav-list,
.w-nav-mobile {
  background-color: var(--card) !important;
  border-top: 2px solid var(--gold) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.6) !important;
}

/* Mobile active item */
.w-nav.type_mobile .w-nav-item.current-menu-item > .w-nav-anchor,
.w-nav.type_mobile .w-nav-item.current-menu-ancestor > .w-nav-anchor {
  color: var(--gold) !important;
  border-left: 3px solid var(--gold) !important;
}

/* --- Hamburger bars → gold --- */
.w-nav-button span,
.w-nav-button:before,
.w-nav-button:after {
  background-color: var(--gold) !important;
}

/* --- Dropdown arrow (chevron) --- */
.w-nav-arrow {
  color: var(--muted) !important;
  transition: color .18s ease !important;
}
.w-nav-item:hover > .w-nav-arrow,
.w-nav-item.opened > .w-nav-arrow {
  color: var(--gold) !important;
}

/* ------------------------------------------------------------------
   6. Page Sections & Content Area
------------------------------------------------------------------ */
.l-section,
.l-main,
.l-content {
  background-color: var(--bg) !important;
  color: var(--text) !important;
}

/* Impreza alternating section colours */
.l-section.color_custom,
.l-section.color_light,
.l-section.color_secondary {
  background-color: var(--card) !important;
}

/* Dividers / separators */
hr,
.w-separator {
  border-color: var(--border) !important;
}

/* ------------------------------------------------------------------
   7. Sidebar
------------------------------------------------------------------ */
.l-sidebar {
  background-color: transparent !important;
}

/* ------------------------------------------------------------------
   8. Footer
------------------------------------------------------------------ */
.l-footer,
.l-section.color_footer-top,
.l-section.color_footer-bottom,
.l-footer .l-section {
  background-color: var(--card) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--muted) !important;
}

.l-footer a,
.l-footer .w-nav-anchor {
  color: var(--muted) !important;
}

.l-footer a:hover,
.l-footer .w-nav-anchor:hover {
  color: var(--gold) !important;
}

.l-footer h1, .l-footer h2, .l-footer h3,
.l-footer h4, .l-footer h5, .l-footer h6 {
  color: var(--text) !important;
}

/* ------------------------------------------------------------------
   9. Widgets
------------------------------------------------------------------ */
.widget,
.w-widget,
.sidebar .widget {
  background-color: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  color: var(--text) !important;
  padding: 20px !important;
  margin-bottom: 16px;
}

.widget-title,
.widgettitle,
.widget .widget-title {
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
  padding-bottom: 10px !important;
  margin-bottom: 14px !important;
}

.widget ul li {
  border-bottom: 1px solid var(--border) !important;
}

.widget ul li a {
  color: var(--text) !important;
}
.widget ul li a:hover {
  color: var(--gold) !important;
}

/* ------------------------------------------------------------------
   10. Grid Items / Cards (Impreza Grid, Post Grid)
------------------------------------------------------------------ */
.w-grid-item,
.w-grid-item-h,
.us-post-list__item,
.us-post {
  background-color: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans) !important;
}

.w-grid-item:hover,
.w-grid-item-h:hover,
.us-post-list__item:hover,
.us-post:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow) !important;
  border-color: var(--gold) !important;
}

.w-grid-item .w-post-elm,
.w-grid-item p,
.us-post p {
  color: var(--text) !important;
}

/* Post meta (date, category labels) */
.w-post-elm.type_meta,
.entry-meta,
.posted-on,
.byline {
  color: var(--muted) !important;
  font-size: 12px;
}

/* Post excerpt */
.w-post-elm.type_excerpt,
.entry-summary {
  color: var(--muted) !important;
}

/* ------------------------------------------------------------------
   11. Buttons
------------------------------------------------------------------ */

/* Buttons — let Impreza's per-style CSS (us-btn-style_1 … us-btn-style_N) win.
   Only apply dark-theme defaults to buttons that have NO Impreza style class.
   :not([class*="us-btn-style_"]) targets unstyled/plain buttons only. */

.w-btn:not([class*="us-btn-style_"]),
input[type="submit"],
button[type="submit"] {
  background-color: var(--gold) !important;
  color: #0d0f18 !important;
  border: 2px solid var(--gold) !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  transition: background var(--trans), box-shadow var(--trans), transform var(--trans) !important;
}

.w-btn:not([class*="us-btn-style_"]):hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  background-color: var(--gold-lt) !important;
  border-color: var(--gold-lt) !important;
  box-shadow: 0 0 18px rgba(246,201,14,.4) !important;
  transform: translateY(-1px) !important;
  color: #0d0f18 !important;
}

/* Impreza's theme.css sets .w-btn { color:#fff!important } globally.
   We must explicitly override each gold button style in dark.css (loaded
   last at priority 9999) so text renders correctly regardless of load order.
   Both the <a> anchor AND the inner .w-btn-label span are targeted. */

/* Gold Solid (9) — dark text on gold background */
.us-btn-style_9,
.us-btn-style_9:hover,
.us-btn-style_9 .w-btn-label {
  color: #0d0f18 !important;
}

/* Gold Outline (10) — gold text on transparent background */
.us-btn-style_10,
.us-btn-style_10:hover,
.us-btn-style_10 .w-btn-label {
  color: #f6c90e !important;
}

/* Gold Glow (11) — dark text on gold glow background */
.us-btn-style_11,
.us-btn-style_11:hover,
.us-btn-style_11 .w-btn-label {
  color: #0d0f18 !important;
}

/* Dark Gold Border (12) — gold text on dark fill, gold border.
   Also fixes missing unit suffixes from Impreza's compiler. */
.us-btn-style_12 {
  color: #f6c90e !important;
  background: #1c1f2e !important;
  border: 2px solid #f6c90e !important;
  border-radius: 8px !important;
  font-size: 1rem !important;
  padding: 0.6em 1.6em !important;
  box-shadow: none !important;
}
.us-btn-style_12 .w-btn-label {
  color: #f6c90e !important;
}
.us-btn-style_12:hover {
  color: #ffd94a !important;
  background: #1e2438 !important;
  border-color: #f6c90e !important;
  box-shadow: 0 0 14px rgba(246,201,14,0.28) !important;
}
.us-btn-style_12:hover .w-btn-label {
  color: #ffd94a !important;
}

/* Impreza styled buttons — only add hover lift; let compiled CSS control colours */
.w-btn[class*="us-btn-style_"]:hover {
  transform: translateY(-1px) !important;
  transition: background var(--trans), box-shadow var(--trans), transform var(--trans) !important;
}

/* Outlined / ghost variant (non-Impreza) */
.w-btn.style_outlined,
.btn-outline,
.btn-secondary {
  background-color: transparent !important;
  color: var(--gold) !important;
  border: 2px solid var(--gold) !important;
}

.w-btn.style_outlined:hover,
.btn-outline:hover {
  background-color: var(--gold-dim) !important;
  color: var(--gold-lt) !important;
}

/* ------------------------------------------------------------------
   12. Forms & Inputs
------------------------------------------------------------------ */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="date"],
textarea,
select,
.w-form-row input,
.w-form-row textarea,
.w-form-row select {
  background-color: var(--input) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--muted) !important;
  opacity: 1;
}

input:focus,
textarea:focus,
select:focus,
.w-form-row input:focus,
.w-form-row textarea:focus,
.w-form-row select:focus {
  outline: none !important;
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(246,201,14,.15) !important;
}

/* Labels */
.w-form-row label,
label {
  color: var(--text) !important;
}

/* Checkboxes / radios */
.w-form-checkbox input:checked + span,
.w-form-radio input:checked + span {
  border-color: var(--gold) !important;
  background-color: var(--gold) !important;
}

/* ------------------------------------------------------------------
   13. Tables
------------------------------------------------------------------ */
table {
  background-color: var(--card) !important;
  border-collapse: collapse;
  width: 100%;
}

thead th,
table th {
  background-color: var(--bg) !important;
  color: var(--gold) !important;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 2px solid var(--border) !important;
  padding: 10px 12px;
}

table td {
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 10px 12px;
}

table tbody tr:hover td {
  background-color: rgba(246,201,14,.05) !important;
}

/* Medal rows (used by Race Stats / Track Manager leaderboards) */
.row-gold   td { background-color: rgba(246,201,14,.10) !important; }
.row-silver td { background-color: rgba(180,180,180,.08) !important; }
.row-bronze td { background-color: rgba(205,127,50,.08) !important; }

/* ------------------------------------------------------------------
   14. Badges / Pills
------------------------------------------------------------------ */
.badge,
.w-label {
  display: inline-block;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
}
.badge-gold   { background: rgba(246,201,14,.15); color: var(--gold); }
.badge-green  { background: rgba(63,185,80,.15);  color: var(--green); }
.badge-red    { background: rgba(248,81,73,.15);   color: var(--red); }
.badge-muted  { background: rgba(136,146,164,.15); color: var(--muted); }

/* ------------------------------------------------------------------
   15. Impreza-specific UI widgets
------------------------------------------------------------------ */

/* Tabs */
.w-tabs-list,
.w-tabs-item {
  background-color: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
}

.w-tabs-item.active,
.w-tabs-item:hover {
  background-color: var(--gold-dim) !important;
  color: var(--gold) !important;
  border-color: var(--gold) !important;
}

/* Accordion */
.w-accordion-item-title {
  background-color: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

.w-accordion-item-title:hover,
.w-accordion-item.active .w-accordion-item-title {
  color: var(--gold) !important;
  border-color: var(--gold) !important;
}

.w-accordion-item-content {
  background-color: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-top: none !important;
  color: var(--text) !important;
}

/* Iconboxes — icon stays gold (small accent); title goes light */
.w-iconbox-icon {
  color: var(--gold) !important;
}
.w-iconbox-title {
  color: var(--text) !important;
}

.w-iconbox {
  background-color: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
}

/* Testimonials */
.w-testimonial {
  background-color: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  color: var(--text) !important;
}

/* Counter */
.w-counter-number {
  color: var(--gold) !important;
}

/* Pricing tables */
.w-pricing-item {
  background-color: var(--card) !important;
  border: 1px solid var(--border) !important;
}

.w-pricing-item.featured {
  border-color: var(--gold) !important;
}

/* ------------------------------------------------------------------
   16. WP Core elements
------------------------------------------------------------------ */

/* Blockquotes */
blockquote {
  border-left: 4px solid var(--gold) !important;
  background-color: var(--card) !important;
  color: var(--muted) !important;
  padding: 16px 20px !important;
  border-radius: 0 var(--radius) var(--radius) 0 !important;
}

/* Code */
code, pre {
  background-color: var(--card) !important;
  color: var(--gold) !important;
  border: 1px solid var(--border) !important;
  border-radius: 4px !important;
}

/* Pagination */
.page-numbers,
.nav-links a,
.w-paginator a {
  background-color: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
}

.page-numbers.current,
.page-numbers:hover,
.nav-links a:hover,
.w-paginator a:hover {
  background-color: var(--gold) !important;
  color: #0d0f18 !important;
  border-color: var(--gold) !important;
}

/* Search form */
.search-form input[type="search"] {
  background-color: var(--input) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

/* Comments */
.comment-list .comment-body,
#comments .comment-body {
  background-color: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 16px !important;
}

.comment-author cite,
.comment-meta a {
  color: var(--gold) !important;
}

.comment-content {
  color: var(--text) !important;
}

/* Admin bar (when logged in) */
#wpadminbar {
  background-color: #0a0b10 !important;
}

#wpadminbar a,
#wpadminbar .ab-item {
  color: var(--muted) !important;
}

#wpadminbar a:hover,
#wpadminbar .ab-item:hover {
  color: var(--gold) !important;
  background-color: var(--card) !important;
}

/* ------------------------------------------------------------------
   17. Breadcrumbs (Rank Math)
------------------------------------------------------------------ */
.rank-math-breadcrumb,
.breadcrumbs,
.us-breadcrumbs {
  background-color: transparent !important;
  color: var(--muted) !important;
  font-size: 13px;
}

.rank-math-breadcrumb a,
.breadcrumbs a,
.us-breadcrumbs a {
  color: var(--muted) !important;
}

.rank-math-breadcrumb a:hover,
.breadcrumbs a:hover,
.us-breadcrumbs a:hover {
  color: var(--gold) !important;
}

.rank-math-breadcrumb .separator,
.breadcrumbs .separator {
  color: var(--border) !important;
}

/* ------------------------------------------------------------------
   18. WP Admin Dark Mode (admin pages when logged in)
      Targets the admin bar only — not the full WP admin
------------------------------------------------------------------ */
#wpadminbar #wp-admin-bar-root-default .ab-icon:before,
#wpadminbar #wp-admin-bar-root-default .ab-icon:after {
  color: var(--muted) !important;
}

/* ------------------------------------------------------------------
   19. Impreza Notice / Message Box (.w-message)
      Used by [us_message] shortcode — homepage rebranding notice
------------------------------------------------------------------ */
.w-message {
  background-color: var(--card) !important;
  border: 1px solid var(--gold) !important;
  border-left: 4px solid var(--gold) !important;
  color: var(--text) !important;
  border-radius: 8px !important;
}

.w-message p,
.w-message span,
.w-message a {
  color: var(--text) !important;
}

.w-message a:hover {
  color: var(--gold) !important;
}

.w-message-close,
.w-message .w-message-close {
  color: var(--muted) !important;
  opacity: 1 !important;
}

.w-message-close:hover,
.w-message .w-message-close:hover {
  color: var(--gold) !important;
}

/* ------------------------------------------------------------------
   20. Font — Match Stats & Vehicles Apps
      Segoe UI system stack, 14px body, 1.6 line-height
------------------------------------------------------------------ */

/* Body text, form elements — 14px */
body,
.l-body,
p, li, td, th, label,
input, textarea, select, button,
.w-form-row,
.wpb_text_column, .vc_column_text {
  font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, Roboto, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* Impreza buttons — font-family only, let Impreza control size */
.w-btn {
  font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, Roboto, sans-serif !important;
}

/* Headings — font-family only; pixel sizes remain from Impreza (44/36/25px) */
h1, h2, h3, h4, h5, h6,
.w-text-h,
.entry-title,
.page-title,
.us_page_title {
  font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, Roboto, sans-serif !important;
  line-height: 1.2 !important;
}

/* ---- Top-level nav links — bold, tight, dominant ---- */
.ush_menu_1.type_desktop .w-nav-item.level_1 > .w-nav-anchor,
.w-nav-list.level_1 > li > .w-nav-anchor {
  font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, Roboto, sans-serif !important;
  font-size: 0.82rem !important;       /* slightly smaller so all 10 items fit */
  font-weight: 700 !important;          /* heavy — no more thin look */
  letter-spacing: 0.10em !important;    /* tight upper-case spacing */
  text-transform: uppercase !important;
}

/* ---- Dropdown links — slightly lighter, readable ---- */
.ush_menu_1 .w-nav-item:not(.level_1) > .w-nav-anchor,
.w-nav-list .sub-menu .w-nav-anchor,
.w-dropdown-list .w-nav-anchor {
  font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, Roboto, sans-serif !important;
  font-size: 0.80rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;      /* sentence case in dropdowns — easier to read */
}

/* ---- Mobile nav ---- */
.w-nav.type_mobile .w-nav-anchor {
  font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, Roboto, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
}

/* ---- Footer nav ---- */
.l-footer .w-nav-anchor {
  font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, Roboto, sans-serif !important;
  font-weight: 500 !important;
}

/* ============================================================
   LEFT SIDEBAR NAVIGATION DRAWER
   rh-sidenav-* namespace — added with section pages feature
   ============================================================ */

/* ── Toggle tab — fixed left edge, always visible ─────────── */
#rh-sidenav-toggle {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: var(--card);
  border: 1px solid var(--border);
  border-left: none;
  border-radius: 0 6px 6px 0;
  padding: 14px 9px;
  cursor: pointer;
  z-index: 100001;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: background var(--trans), border-color var(--trans);
}
#rh-sidenav-toggle span {
  display: block;
  width: 19px;
  height: 2px;
  background: var(--muted);
  border-radius: 2px;
  transition: background var(--trans), transform var(--trans), opacity var(--trans);
}
#rh-sidenav-toggle:hover span { background: var(--gold); }
body.rh-sidenav-open #rh-sidenav-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
  background: var(--gold);
}
body.rh-sidenav-open #rh-sidenav-toggle span:nth-child(2) {
  opacity: 0;
}
body.rh-sidenav-open #rh-sidenav-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
  background: var(--gold);
}

/* ── Dark overlay ─────────────────────────────────────────── */
#rh-sidenav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 100000;
}
body.rh-sidenav-open #rh-sidenav-overlay {
  opacity: 1;
  pointer-events: auto;
}

/* ── Sidebar drawer ───────────────────────────────────────── */
#rh-sidenav {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 264px;
  background: var(--card);
  border-right: 1px solid var(--border);
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  z-index: 100001;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
body.rh-sidenav-open #rh-sidenav {
  transform: translateX(0);
}

/* ── Sidebar header ───────────────────────────────────────── */
.rh-sidenav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: rgba(246, 201, 14, 0.04);
  flex-shrink: 0;
}
.rh-sidenav-logo {
  color: var(--gold);
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  font-family: 'Segoe UI', system-ui, sans-serif;
}
#rh-sidenav-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  transition: color var(--trans);
}
#rh-sidenav-close:hover { color: var(--gold); }

/* ── Section groups ───────────────────────────────────────── */
.rh-sidenav-section {
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border);
}
.rh-sidenav-section:last-child { border-bottom: none; }

.rh-sidenav-heading {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 0.3rem 1.25rem 0.5rem;
  margin: 0;
}

/* ── Links ────────────────────────────────────────────────── */
#rh-sidenav a {
  display: block;
  padding: 0.42rem 1.25rem;
  color: var(--text);
  font-size: 0.84rem;
  text-decoration: none;
  transition: color var(--trans), background var(--trans), border-color var(--trans);
  border-left: 2px solid transparent;
}
#rh-sidenav a:hover {
  color: var(--gold);
  background: var(--gold-dim);
  border-left-color: rgba(246, 201, 14, 0.4);
}
#rh-sidenav a.rh-sidenav-active {
  color: var(--gold);
  background: var(--gold-dim);
  border-left-color: var(--gold);
  font-weight: 600;
}

/* ------------------------------------------------------------------
   rh- link overrides — prevent Impreza link colour bleeding through
------------------------------------------------------------------ */
body a.rh-btn,
body a.rh-btn:visited {
  color: #eef0f5;
  text-decoration: none;
}
body a.rh-btn:hover {
  color: #8892a4;
  text-decoration: none;
}
body a.rh-qnav__cta,
body a.rh-qnav__cta:visited { color: #8892a4; text-decoration: none; }
body a.rh-qnav__cta:hover   { color: #eef0f5; text-decoration: none; }
body a.rh-view-all,
body a.rh-view-all:visited  { color: #8892a4; text-decoration: none; }
body a.rh-view-all:hover    { color: #8892a4; text-decoration: none; }

/* ==================================================================
   Homepage CYAN accents (#37b7c7) — match the native Vehicles/Stats apps.
   Theme chrome stays gold; these are scoped to the homepage (body.home)
   plus the global .gta-button. Added 2026-05-22 polish pass. Reversible:
   delete this block to revert to the gold accent.
   ================================================================== */
:root {
  --cyan:     #37b7c7;
  --cyan-dim: #2b8d99;
  --cyan-lt:  #7fd9e4;
}

/* GTA-style "Connect"-type button -> app cyan (its old source post is now retired) */
.gta-button {
  display: inline-block;
  padding: 10px 20px;
  background: transparent;
  color: var(--cyan) !important;
  border: 1px solid var(--cyan) !important;
  border-radius: 8px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: all .2s;
}
.gta-button:hover {
  background: rgba(55,183,199,.10) !important;
  color: var(--cyan-lt) !important;
  box-shadow: 0 0 10px rgba(55,183,199,.35) !important;
  text-decoration: none;
}

/* Homepage CTA buttons -> cyan fill (overrides the gold accent on the home page only) */
body.home .w-btn[class*="us-btn-style_"] {
  background-color: var(--cyan) !important;
  border-color: var(--cyan) !important;
  color: #06222a !important;
}
body.home .w-btn[class*="us-btn-style_"]:hover {
  background-color: var(--cyan-dim) !important;
  border-color: var(--cyan-dim) !important;
  color: #06222a !important;
}
body.home .w-btn[class*="us-btn-style_"] .w-btn-label { color: #06222a !important; }

/* Homepage heading emphasis + link hovers -> cyan */
body.home h1 strong,
body.home h2 strong,
body.home h3 strong { color: var(--cyan) !important; }
body.home a:not(.w-btn):hover { color: var(--cyan) !important; }

/* ============================================================
   gtaboom-style header dropdowns — target Impreza's REAL submenu
   panels (.w-nav-list.level_2/3), which the generic .sub-menu rules
   above don't catch. Clean dark card + gold edge + tidy items. 2026-05-23
   ============================================================ */
.ush_menu_1.type_desktop .w-nav-list.level_2,
.ush_menu_1.type_desktop .w-nav-list.level_3{
  background: #14161f !important;
  border: 1px solid var(--border) !important;
  border-top: 1px solid var(--border) !important;   /* no heavy gold bar — clean panel */
  border-radius: 10px !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.6) !important;
  padding: .4rem !important;
  min-width: 230px !important;
}
.ush_menu_1.type_desktop .w-nav-list.level_2 .w-nav-anchor,
.ush_menu_1.type_desktop .w-nav-list.level_3 .w-nav-anchor{
  font-size: .8rem !important;
  font-weight: 500 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;                   /* Title Case, not UPPERCASE */
  color: var(--muted) !important;
  padding: .5rem .85rem !important;
  border-bottom: none !important;                    /* remove separator lines */
  border-radius: 7px !important;
  white-space: nowrap !important;
  background: transparent !important;
}
/* hover row: subtle — gold text + faint wash, rounded, no slide */
.no-touch .ush_menu_1.type_desktop .w-nav-list.level_2 .w-nav-item:hover > .w-nav-anchor,
.no-touch .ush_menu_1.type_desktop .w-nav-list.level_3 .w-nav-item:hover > .w-nav-anchor{
  color: var(--gold) !important;
  background-color: rgba(246,201,14,.07) !important;
  padding-left: .85rem !important;                   /* override the slide-in from base nav rules */
}
/* Multi-column "mega" dropdown for long menus (6+ items) — gtaboom-style,
   pure CSS (column-count keeps display:block so Impreza's visibility/opacity/
   transform show-hide still works). :has() auto-detects the long menus. */
.ush_menu_1.type_desktop .w-nav-list.level_2:has(> :nth-child(6)){
  column-count: 2 !important;
  column-gap: .5rem !important;
  min-width: 460px !important;
}
.ush_menu_1.type_desktop .w-nav-list.level_2:has(> :nth-child(6)) > .menu-item,
.ush_menu_1.type_desktop .w-nav-list.level_2:has(> :nth-child(6)) > .w-nav-item{
  break-inside: avoid !important;
}
/* keep nested level_3 panels single-column */
.ush_menu_1.type_desktop .w-nav-list.level_3{ column-count: 1 !important; }

/* the search toggle sits inline like a menu item */
.ush_menu_1 .rh-search-item .rh-search-open{ font-size: 1.05em !important; }

/* ------------------------------------------------------------------
   GLOBAL GUARD — kill Impreza's gold/teal submit-button skin inside
   Raycin design areas (#rh). Any submit button that isn't already a
   styled component defaults to the dark pill, so that loud gold button
   can never reappear. Excludes buttons that own their styling:
   our .re-/.rc-/.rcs- pills, ARMember (.arm_button), Formidable
   (.frm_button_submit), and Impreza widgets (.w-btn / us-btn-style_).
------------------------------------------------------------------ */
#rh button[type="submit"]:not(.re-btn):not(.rc-btn):not(.rcs-btn):not(.arm_button):not(.frm_button_submit):not(.w-btn):not([class*="us-btn-style_"]),
#rh input[type="submit"]:not(.re-btn):not(.rc-btn):not(.rcs-btn):not(.arm_button):not(.frm_button_submit):not(.w-btn):not([class*="us-btn-style_"]) {
  background: #1c1f2e !important;
  color: #eef0f5 !important;
  border: 1px solid #303448 !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-shadow: none !important;
  padding: .6rem 1.3rem !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.35) !important;
  cursor: pointer;
  transition: all .2s ease;
}
#rh button[type="submit"]:not(.re-btn):not(.rc-btn):not(.rcs-btn):not(.arm_button):not(.frm_button_submit):not(.w-btn):not([class*="us-btn-style_"]):hover,
#rh input[type="submit"]:not(.re-btn):not(.rc-btn):not(.rcs-btn):not(.arm_button):not(.frm_button_submit):not(.w-btn):not([class*="us-btn-style_"]):hover {
  background: #232741 !important;
  border-color: rgba(246,201,14,.5) !important;
  color: #eef0f5 !important;
}