/**
 * ==========================================================================
 * ARIZONA DUI PROCESS — V4 RED/YELLOW/BLACK THEME OVERRIDE
 * (matches the staging site at 37j.531.myftpupload.com)
 * ==========================================================================
 * Drop-in CSS for the existing WordPress site at phoenixduiexperts.com.
 *
 * INSTALL:
 *   WP Admin → Appearance → Customize → Additional CSS → paste this file.
 * OR (preferred for a lasting install):
 *   Child theme → style.css → paste this file → upload.
 *
 * PALETTE: Red #CC0000 / Bright Red #E51C23 / Gold #F5C518 / Black #0A0A1A
 * TYPE:    Bebas Neue (display) + Oswald (heading) + Inter (body)
 * ==========================================================================
 */

/* ---------- 1. Google Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

/* ---------- 2. Design Tokens ---------- */
:root {
  --red: #CC0000;
  --red-bright: #E51C23;
  --red-dark: #990000;
  --black: #0A0A1A;
  --charcoal: #15151E;
  --dark: #1D2327;
  --dark-mid: #2C3338;
  --white: #FFFFFF;
  --off-white: #F0F0F1;
  --text-gray: #B8B8BE;
  --text-muted: #8A8A94;
  --border: #2A2A34;
  --card-bg: #16161F;
  --gold: #F5C518;
  --gold-light: #FFD700;
  --gold-dark: #C9A012;
  --font-display: 'Bebas Neue', 'Impact', sans-serif;
  --font-heading: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---------- 3. Body + typography ---------- */
body,
body.elementor-default,
body.elementor-page {
  background: var(--black) !important;
  color: var(--off-white) !important;
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  -webkit-font-smoothing: antialiased;
}

h1, .entry-title, .page-title,
.elementor-widget-heading .elementor-heading-title.elementor-size-xxl,
.elementor-widget-heading .elementor-heading-title.elementor-size-xl {
  font-family: var(--font-display) !important;
  color: var(--white) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px;
  font-weight: 400 !important;
  line-height: 1 !important;
  font-size: clamp(38px, 5vw, 64px) !important;
}

h2, h3, h4, h5, h6,
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--font-heading) !important;
  color: var(--white) !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px;
  line-height: 1.2 !important;
}
h2 { font-size: clamp(28px, 3.5vw, 44px) !important; }
h3 { font-size: clamp(20px, 2vw, 26px) !important; }

p, li, .elementor-widget-text-editor p {
  color: var(--off-white) !important;
  font-size: 16px;
  line-height: 1.7;
}

a, .elementor a, .entry-content a {
  color: var(--gold) !important;
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover, .elementor a:hover { color: var(--red-bright) !important; }
::selection { background: var(--red); color: var(--white); }

blockquote {
  border-left: 4px solid var(--red) !important;
  background: var(--card-bg);
  padding: 20px 28px !important;
  margin: 32px 0 !important;
  font-family: var(--font-heading);
  font-size: 20px;
  font-style: italic;
  color: var(--off-white);
}

/* ---------- 4. Header / masthead ---------- */
header.site-header,
header#masthead,
.elementor-location-header {
  background: var(--charcoal) !important;
  border-bottom: 3px solid var(--red) !important;
}

.site-title a, .custom-logo-link,
.elementor-location-header .elementor-widget-theme-site-title a {
  color: var(--white) !important;
  font-family: var(--font-display) !important;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.main-navigation a,
.elementor-nav-menu a,
nav.primary a {
  color: var(--off-white) !important;
  font-family: var(--font-heading) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  transition: color 0.2s ease;
}
.main-navigation a:hover,
.elementor-nav-menu a:hover,
.current-menu-item > a {
  color: var(--red-bright) !important;
}

.elementor-menu-toggle { color: var(--red) !important; }

/* ---------- 5. Hero / banner ---------- */
.elementor-section.elementor-section-stretched.hero,
.page-hero,
.hero-section {
  background:
    linear-gradient(rgba(10,10,26,0.75), rgba(10,10,26,0.9)) !important;
  padding: 90px 20px !important;
  border-bottom: 3px solid var(--red);
}

.hero h1 .red, .red-accent { color: var(--red-bright) !important; }
.hero h1 .gold, .gold-accent { color: var(--gold) !important; }

/* ---------- 6. Buttons — Elementor, Gutenberg, WooCommerce ---------- */
.elementor-button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
button[type="submit"],
input[type="submit"],
.cta-btn, .btn-primary {
  background: var(--red) !important;
  color: var(--white) !important;
  border: 2px solid var(--red-bright) !important;
  border-radius: 0 !important;
  padding: 14px 28px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  font-family: var(--font-heading) !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 4px 14px rgba(204,0,0,0.3);
}

.elementor-button:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.btn-primary:hover {
  transform: translateY(-2px);
  background: var(--red-bright) !important;
  border-color: var(--gold) !important;
  color: var(--white) !important;
  box-shadow: 0 8px 24px rgba(229,28,35,0.45);
}

/* Gold variant — secondary "call" button */
.btn-gold,
.elementor-button.elementor-button-gold,
.wp-block-button.is-style-fill .wp-block-button__link.has-gold-background-color {
  background: var(--gold) !important;
  color: var(--black) !important;
  border-color: var(--gold-light) !important;
  box-shadow: 0 4px 14px rgba(245,197,24,0.35) !important;
}
.btn-gold:hover { background: var(--gold-light) !important; color: var(--black) !important; }

/* Ghost variant */
.elementor-button.elementor-button-ghost,
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--white) !important;
  border: 2px solid var(--gold) !important;
}

/* ---------- 7. Cards (Elementor widgets, posts, pages) ---------- */
.elementor-widget-icon-box,
.elementor-widget-image-box,
.wp-block-group.is-style-card,
article.type-post,
article.type-page,
.card, .resource-card {
  background: var(--card-bg) !important;
  border: 1px solid var(--border) !important;
  border-top: 3px solid var(--red) !important;
  border-radius: 0 !important;
  color: var(--off-white) !important;
  padding: 24px !important;
  transition: all 0.25s ease;
}
article.type-post:hover,
article.type-page:hover,
.elementor-widget-icon-box:hover {
  border-top-color: var(--gold) !important;
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}

.elementor-icon-box-title,
.elementor-image-box-title,
article h2 a, article h3 a {
  color: var(--white) !important;
  font-family: var(--font-heading) !important;
  text-transform: uppercase;
}
.elementor-icon-box-description,
.elementor-image-box-description,
article .entry-summary { color: var(--text-gray) !important; }

/* Resource card images — ensure images display above content */
.resource-card .media,
.elementor-widget-image-box .elementor-image-box-img {
  overflow: hidden;
}
.resource-card .media img,
.elementor-widget-image-box img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.resource-card:hover .media img,
.elementor-widget-image-box:hover img { transform: scale(1.06); }

/* ---------- 8. [network_cta] shortcode ---------- */
.network-cta,
.network-cta-legal,
.network-cta-education {
  background: var(--card-bg);
  border: 2px solid var(--red);
  border-top: 5px solid var(--red);
  padding: 40px 32px !important;
  margin: 48px 0 !important;
  color: var(--off-white) !important;
  box-shadow: var(--shadow-md);
}
.network-cta-education { border-color: var(--gold); border-top-color: var(--gold); }
.network-cta h2, .network-cta h3,
.network-cta-legal h2, .network-cta-legal h3,
.network-cta-education h2, .network-cta-education h3 {
  font-family: var(--font-display) !important;
  color: var(--white) !important;
  text-transform: uppercase !important;
  margin-bottom: 14px !important;
  letter-spacing: 1px;
}
.network-cta a.phone,
.network-cta-legal a.phone {
  font-family: var(--font-display) !important;
  color: var(--red-bright) !important;
  font-size: 36px !important;
  letter-spacing: 1px;
  display: inline-block;
}
.network-cta-education a.phone { color: var(--gold) !important; }

/* ---------- 9. Forms ---------- */
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="search"], input[type="url"],
input[type="number"], textarea, select,
.elementor-field, .gfield_input, .woocommerce form .form-row input {
  background: var(--card-bg) !important;
  border: 1px solid var(--border) !important;
  color: var(--off-white) !important;
  border-radius: 0 !important;
  padding: 12px 14px !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--red) !important;
  outline: 2px solid rgba(204,0,0,0.35);
  outline-offset: 1px;
}
label { color: var(--off-white) !important; font-family: var(--font-heading); text-transform: uppercase; font-size: 12px; letter-spacing: 1px; }
::placeholder { color: var(--text-muted) !important; opacity: 1; }

/* ---------- 10. Tables ---------- */
table {
  width: 100%; border-collapse: collapse; margin: 28px 0;
  background: var(--card-bg);
  border: 1px solid var(--border);
}
th {
  background: var(--red);
  color: var(--white) !important;
  font-family: var(--font-heading) !important;
  font-weight: 600;
  text-transform: uppercase;
  text-align: left;
  padding: 14px 18px;
  border-bottom: 2px solid var(--gold);
  font-size: 13px;
  letter-spacing: 1.5px;
}
td {
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
  color: var(--off-white) !important;
  font-size: 15px;
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(204,0,0,0.08); }

/* ---------- 11. Yoast breadcrumbs ---------- */
.yoast-breadcrumb,
.elementor-widget-breadcrumbs {
  font-family: var(--font-heading);
  font-size: 12px !important;
  color: var(--text-gray) !important;
  padding: 12px 0 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.yoast-breadcrumb a { color: var(--gold) !important; }
.yoast-breadcrumb .breadcrumb_last { color: var(--off-white) !important; }

/* ---------- 12. Footer ---------- */
footer.site-footer,
footer#colophon,
.elementor-location-footer {
  background: var(--black) !important;
  border-top: 3px solid var(--red);
  color: var(--text-gray) !important;
  padding: 50px 20px 30px !important;
}
footer a { color: var(--gold) !important; font-family: var(--font-heading); text-transform: uppercase; font-size: 12px; letter-spacing: 1px; }
footer p, footer li, footer .site-info { color: var(--text-gray) !important; font-size: 13px; }

/* ---------- 13. Alert/update bar ---------- */
.wp-block-cover.legal-update,
.legal-update-bar,
.alert-bar {
  background: linear-gradient(90deg, var(--red) 0%, var(--red-bright) 50%, var(--red) 100%) !important;
  border-bottom: 2px solid var(--gold) !important;
  color: var(--white) !important;
  padding: 12px 20px !important;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.alert-bar strong { color: var(--gold); }
.alert-bar a { color: var(--gold); text-decoration: underline; }

/* ---------- 14. Statute chip ---------- */
code, .statute-chip {
  background: rgba(245,197,24,0.12);
  color: var(--gold);
  padding: 2px 8px;
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: 13px;
  border: 1px solid rgba(245,197,24,0.3);
}

/* ---------- 15. WooCommerce (NHTSA shop) ---------- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: var(--card-bg) !important;
  border: 1px solid var(--border) !important;
  border-top: 3px solid var(--red) !important;
  padding: 20px !important;
}
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
  color: var(--white) !important;
  font-family: var(--font-heading) !important;
  text-transform: uppercase;
}
.woocommerce ul.products li.product .price {
  color: var(--gold) !important;
  font-family: var(--font-display) !important;
  font-size: 26px !important;
  letter-spacing: 1px;
}

/* ---------- 16. Accessibility ---------- */
:focus-visible { outline: 2px solid var(--gold) !important; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- 17. Print ---------- */
@media print {
  body { background: #fff !important; color: #000 !important; }
  h1, h2, h3, p, li { color: #000 !important; }
  a { color: #000 !important; text-decoration: underline; }
  header, footer, .network, nav, .alert-bar { display: none !important; }
}

/* ---------- 18. Responsive ---------- */
.elementor-container { max-width: 1220px !important; }
.elementor-section { padding-top: 60px; padding-bottom: 60px; }

@media (max-width: 768px) {
  h1, .entry-title { font-size: 42px !important; }
  h2 { font-size: 28px !important; }
  .elementor-button, .wp-block-button__link { width: 100%; text-align: center; }
  .network-cta, .network-cta-legal, .network-cta-education { padding: 28px 20px !important; }
}

/* == END V4 RED/YELLOW/BLACK THEME OVERRIDE =============================== */

/* ============================================================
   DUIINFO PORTAL CTA MODULE  —  styles
   Paste at the END of theme.css on both sites.
   Uses existing CSS vars (--red, --black, --white, --gold, --font-*).
   ============================================================ */

.duiinfo-portal {
  background: linear-gradient(180deg, #0A0A1A 0%, #1A1A1A 100%);
  color: var(--off-white, #F0F0F1);
  padding: clamp(40px, 6vw, 80px) 20px;
  border-top: 4px solid var(--red, #CC0000);
  border-bottom: 4px solid var(--red, #CC0000);
}
.duiinfo-portal__inner { max-width: 1180px; margin: 0 auto; }

.duiinfo-portal__eyebrow {
  display: inline-block;
  font-family: var(--font-display, 'Bebas Neue'), sans-serif;
  font-size: 14px;
  letter-spacing: 4px;
  color: var(--gold, #F5C518);
  margin-bottom: 12px;
}
.duiinfo-portal__heading {
  font-family: var(--font-heading, 'Oswald'), sans-serif;
  font-size: clamp(26px, 3.5vw, 40px);
  line-height: 1.15;
  color: var(--white, #fff);
  margin: 0 0 14px;
  max-width: 820px;
}
.duiinfo-portal__sub {
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.6;
  color: #C8C8CC;
  max-width: 760px;
  margin: 0 0 22px;
}
.duiinfo-portal__primary {
  display: inline-block;
  background: var(--red, #CC0000);
  color: var(--white, #fff);
  font-family: var(--font-heading, 'Oswald'), sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 14px;
  padding: 14px 26px;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
}
.duiinfo-portal__primary:hover {
  background: var(--red-bright, #E51C23);
  transform: translateY(-1px);
}

.duiinfo-portal__grid {
  list-style: none;
  padding: 0;
  margin: 34px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.duiinfo-portal__grid a {
  display: block;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 18px 18px 16px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--off-white, #F0F0F1);
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.duiinfo-portal__grid a:hover {
  background: rgba(204,0,0,0.10);
  border-color: var(--red, #CC0000);
  transform: translateY(-2px);
}
.duiinfo-portal__icon {
  display: block;
  font-size: 26px;
  margin-bottom: 8px;
}
.duiinfo-portal__label {
  display: block;
  font-family: var(--font-heading, 'Oswald'), sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--white, #fff);
  margin-bottom: 4px;
  text-transform: none;
}
.duiinfo-portal__desc {
  display: block;
  font-size: 13.5px;
  color: #B8B8BC;
  line-height: 1.45;
}

.duiinfo-portal__foot {
  margin-top: 30px;
  font-size: 13px;
  color: #9A9AA0;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 18px;
}
.duiinfo-portal__foot a {
  color: var(--off-white, #F0F0F1);
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.25);
}
.duiinfo-portal__foot a:hover { color: var(--red-bright, #E51C23); }

@media (max-width: 600px) {
  .duiinfo-portal__grid { grid-template-columns: 1fr; }
  .duiinfo-portal__primary { width: 100%; text-align: center; }
}