/* ============================================================
   FORTUNE 500 UPGRADE — International Plywood & Lumber
   Fonts: Cabinet Grotesk (display) + Satoshi (body)
   Colors: Navy #1B3A6B | Orange #E8590C
   Built: 2026-06 by Senior Dev Team
   ============================================================ */

@import url("https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@300,400,500,600,700,800,900&f[]=satoshi@300,400,500,600,700&display=swap");

/* ===== DESIGN TOKENS ===== */
:root {
  --dp-navy: #1B3A6B;
  --dp-navy-dark: #132B52;
  --dp-navy-light: #234A88;
  --dp-orange: #E8590C;
  --dp-orange-hover: #C94A08;
  --dp-orange-active: #A83C06;
  --dp-white: #FFFFFF;
  --dp-off-white: #F7F6F3;
  --dp-gray-50: #F9F8F6;
  --dp-gray-100: #F1EFEB;
  --dp-gray-200: #E3E0DB;
  --dp-gray-300: #C8C5BF;
  --dp-gray-500: #7A7875;
  --dp-gray-700: #3D3B38;
  --dp-gray-900: #1A1917;
  --dp-text: #1A1917;
  --dp-text-muted: #5A5855;
  --dp-text-light: #8A8885;
  --font-display: "Cabinet Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Satoshi", "Inter", "Helvetica Neue", Arial, sans-serif;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --shadow-sm: 0 1px 3px rgba(27,58,107,.06), 0 1px 2px rgba(27,58,107,.04);
  --shadow-md: 0 4px 16px rgba(27,58,107,.08), 0 2px 6px rgba(27,58,107,.05);
  --shadow-lg: 0 12px 40px rgba(27,58,107,.12), 0 4px 12px rgba(27,58,107,.07);
  --shadow-xl: 0 24px 64px rgba(27,58,107,.14), 0 8px 20px rgba(27,58,107,.08);
  --transition: 200ms cubic-bezier(0.16,1,0.3,1);
  --transition-slow: 400ms cubic-bezier(0.16,1,0.3,1);
}

/* ===== BASE TYPOGRAPHY ===== */
body, .site, .entry-content, .entry-content p, .entry-content li {
  font-family: var(--font-body) !important;
  color: var(--dp-text);
}
h1, h2, h3, h4, h5, h6,
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6,
.wp-block-heading, .kadence-heading {
  font-family: var(--font-display) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em;
  color: var(--dp-navy);
}
body, p, li, td, input, select, textarea, button, .entry-content p {
  font-family: var(--font-body) !important;
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
}

/* ===== HEADER ===== */
.site-header, .site-header-wrap, .site-header-inner-wrap,
.site-main-header-wrap, .site-header-row-container, .site-header-row-container-inner {
  background-color: #ffffff !important;
}
.site-header {
  border-bottom: 1px solid rgba(27,58,107,.08) !important;
  box-shadow: 0 2px 16px rgba(27,58,107,.06) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 9998 !important;
  transition: box-shadow var(--transition) !important;
}
.custom-logo-link img.custom-logo, .brand img.custom-logo {
  max-width: 190px !important;
  height: auto !important;
  transition: opacity var(--transition) !important;
}
.custom-logo-link:hover img.custom-logo { opacity: .88; }
.site-title, .site-tagline { display: none !important; }

/* ===== NAVIGATION ===== */
.main-navigation .primary-menu-container > ul,
.header-navigation .header-menu-container > ul {
  flex-wrap: nowrap !important;
  align-items: center !important;
}
.main-navigation .primary-menu-container > ul > li.menu-item > a {
  font-family: var(--font-body) !important;
  color: #1B3A6B !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.055em !important;
  padding: 5px 5px !important;
  white-space: nowrap !important;
  transition: color var(--transition) !important;
  position: relative;
  display: inline-flex !important;
  align-items: center;
}
.main-navigation .primary-menu-container > ul > li.menu-item > a::after {
  content: "";
  position: absolute;
  bottom: 0; left: 7px; right: 7px;
  height: 2px;
  background: var(--dp-orange);
  transform: scaleX(0);
  transition: transform var(--transition);
  border-radius: 1px;
}
.main-navigation .primary-menu-container > ul > li.menu-item > a:hover::after,
.main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a::after {
  transform: scaleX(1);
}
.main-navigation .primary-menu-container > ul > li.menu-item > a:hover {
  color: var(--dp-orange) !important;
}

/* ===== DROPDOWNS ===== */
.main-navigation .primary-menu-container ul ul {
  background-color: #ffffff !important;
  border-top: 3px solid var(--dp-orange) !important;
  box-shadow: var(--shadow-lg) !important;
  border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
  min-width: 280px !important;
  padding: 8px 0 !important;
}
.main-navigation .primary-menu-container ul ul li a {
  font-family: var(--font-body) !important;
  color: var(--dp-gray-700) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  padding: 9px 18px !important;
  transition: all var(--transition) !important;
  border-left: 3px solid transparent !important;
  white-space: nowrap !important;
}
.main-navigation .primary-menu-container ul ul li a:hover {
  color: var(--dp-orange) !important;
  background: #FFF5F1 !important;
  border-left-color: var(--dp-orange) !important;
}
#primary-menu .sub-menu { max-height: 90vh !important; overflow-y: auto !important; }

/* ===== GET A QUOTE BUTTON ===== */
li.get-a-quote-btn > a {
  font-family: var(--font-body) !important;
  background: linear-gradient(135deg, var(--dp-orange), var(--dp-orange-hover)) !important;
  color: #ffffff !important;
  border-radius: var(--radius-sm) !important;
  padding: 8px 16px !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-left: 8px !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 8px rgba(232,89,12,.30) !important;
  transition: all var(--transition) !important;
}
li.get-a-quote-btn > a:hover {
  background: linear-gradient(135deg, var(--dp-orange-hover), var(--dp-orange-active)) !important;
  box-shadow: 0 4px 16px rgba(232,89,12,.40) !important;
  transform: translateY(-1px) !important;
}
li.get-a-quote-btn > a::after { display: none !important; }

/* ===== HEADER LAYOUT ===== */
.site-main-header-inner-wrap { flex-wrap: nowrap !important; align-items: center !important; }
.site-header-main-section-left { flex-shrink: 0 !important; min-width: 220px !important; overflow: visible !important; }
.site-header-row-container-inner { overflow: visible !important; }
.custom-logo-link { overflow: visible !important; display: flex !important; align-items: center !important; }
.site-mobile-header-wrap { background-color: #ffffff !important; }

/* ===== FORMS — CF7 ===== */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="url"],
.wpcf7-form select,
.wpcf7-form textarea {
  font-family: var(--font-body) !important;
  border: 1.5px solid var(--dp-gray-200) !important;
  border-radius: var(--radius-md) !important;
  padding: 10px 14px !important;
  font-size: 15px !important;
  color: var(--dp-text) !important;
  background: #ffffff !important;
  transition: border-color var(--transition), box-shadow var(--transition) !important;
  width: 100% !important;
}
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
  outline: none !important;
  border-color: var(--dp-navy) !important;
  box-shadow: 0 0 0 3px rgba(27,58,107,.10) !important;
}
.wpcf7-form label {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  color: var(--dp-navy) !important;
  margin-bottom: 4px !important;
  display: block !important;
}
.wpcf7-form input[type="submit"] {
  font-family: var(--font-display) !important;
  background: linear-gradient(135deg, var(--dp-orange), var(--dp-orange-hover)) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  padding: 14px 28px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
  cursor: pointer !important;
  width: 100% !important;
  box-shadow: 0 4px 16px rgba(232,89,12,.35) !important;
  transition: all var(--transition) !important;
}
.wpcf7-form input[type="submit"]:hover {
  background: linear-gradient(135deg, var(--dp-orange-hover), var(--dp-orange-active)) !important;
  box-shadow: 0 6px 24px rgba(232,89,12,.45) !important;
  transform: translateY(-1px) !important;
}

/* ===== TABLES ===== */
.entry-content table, .wp-block-table table {
  border-collapse: collapse !important;
  width: 100% !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-md) !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
}
.entry-content table th, .wp-block-table table th {
  background: var(--dp-navy) !important;
  color: #ffffff !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  padding: 13px 16px !important;
  text-align: left !important;
  letter-spacing: 0.03em !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
}
.entry-content table td, .wp-block-table table td {
  padding: 11px 16px !important;
  border-bottom: 1px solid var(--dp-gray-100) !important;
  color: var(--dp-text) !important;
  vertical-align: top !important;
}
.entry-content table tr:last-child td, .wp-block-table table tr:last-child td {
  border-bottom: none !important;
}
.entry-content table tr:nth-child(even) td, .wp-block-table table tr:nth-child(even) td {
  background: var(--dp-gray-50) !important;
}
.entry-content table tr:hover td, .wp-block-table table tr:hover td {
  background: rgba(27,58,107,.03) !important;
}

/* ===== CONTENT LINKS ===== */
.entry-content a {
  color: var(--dp-orange) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: color var(--transition) !important;
}
.entry-content a:hover {
  color: var(--dp-orange-hover) !important;
  text-decoration: underline !important;
}
.entry-content ul li strong, .entry-content ol li strong {
  color: var(--dp-navy);
  font-weight: 600;
}

/* ===== FOOTER ===== */
.site-footer, .site-footer-wrap {
  background-color: var(--dp-navy) !important;
  color: rgba(255,255,255,.80) !important;
}
.site-footer a { color: rgba(255,255,255,.75) !important; transition: color var(--transition) !important; }
.site-footer a:hover { color: var(--dp-orange) !important; }
.site-footer * { font-family: var(--font-body) !important; }
.footer-html { font-size: 13px !important; color: rgba(255,255,255,.6) !important; }

/* ===== BREADCRUMBS ===== */
.kadence-breadcrumbs, .breadcrumb-trail, .breadcrumbs {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  color: var(--dp-text-light) !important;
}
.kadence-breadcrumbs a { color: var(--dp-orange) !important; }

/* ===== MOBILE NAV ===== */
.site-mobile-header-wrap { background: #fff !important; }
.kadence-mobile-nav ul li a, .mobile-navigation ul li a {
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--dp-navy) !important;
  padding: 12px 20px !important;
  border-bottom: 1px solid var(--dp-gray-100) !important;
}
.kadence-mobile-nav ul li a:hover, .mobile-navigation ul li a:hover {
  color: var(--dp-orange) !important;
  background: #FFF5F1 !important;
}

/* ===== ACCESSIBILITY ===== */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--dp-navy) !important;
  outline-offset: 3px !important;
  border-radius: var(--radius-sm) !important;
}
::selection { background: rgba(27,58,107,.15); color: var(--dp-navy); }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  h1 { font-size: clamp(1.6rem, 5vw, 2.4rem) !important; }
  h2 { font-size: clamp(1.3rem, 4vw, 2rem) !important; }
  h3 { font-size: clamp(1.1rem, 3.5vw, 1.5rem) !important; }
}
@media (max-width: 480px) {
  .entry-content table { display: block !important; overflow-x: auto !important; font-size: 13px !important; }
}
/* ===== HERO CTA BUTTONS — text color fix ===== */
.dp-btn-primary,
.dp-btn-primary:visited,
a.dp-btn-primary {
  color: #ffffff !important;
  background-color: var(--dp-orange) !important;
  text-decoration: none !important;
}
.dp-btn-outline,
a.dp-btn-outline {
  color: #ffffff !important;
  background: transparent !important;
  text-decoration: none !important;
  border: 2px solid rgba(255,255,255,0.75) !important;
}
.dp-btn-outline:hover, a.dp-btn-outline:hover {
  border-color: #fff !important;
  color: #fff !important;
}

/* ===== HERO H1 TEXT ===== */
.dp-hero-h1 {
  color: #FFFFFF !important;
  font-family: var(--font-display) !important;
}
.dp-hero-sub {
  color: rgba(203,216,240,.90) !important;
  font-family: var(--font-body) !important;
}

/* ===== FORM CARD HEADINGS ===== */
.dp-form-card h3 {
  color: var(--dp-navy) !important;
  font-family: var(--font-display) !important;
}

/* ===== PRODUCTS SECTION LINK FIX ===== */
.dp-product-card a.learn-more,
.dp-products-grid a.learn-more {
  color: var(--dp-orange) !important;
  text-decoration: none !important;
}

/* ===== WHY SECTION ===== */
.dp-why-list li {
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  color: var(--dp-text) !important;
}

/* ===== ENSURE CTA SECTION TEXT WHITE ===== */
.dp-cta-section h2,
.dp-cta-section p,
[style*="background: linear-gradient(135deg, #1B3A6B"] h2,
[style*="background-color: #1B3A6B"] h2 {
  color: #ffffff !important;
}

/* ===== FOOTER DARK NAV LINK FIX ===== */
.site-footer .site-footer-row-container,
.site-footer .site-footer-wrap-inner {
  background-color: var(--dp-navy) !important;
}

/* ===== TRUST BAR ITEMS ===== */
.dp-trust-title { color: #ffffff !important; font-family: var(--font-display) !important; }
.dp-trust-sub { color: rgba(168,191,223,.85) !important; font-family: var(--font-body) !important; }
.dp-trust-icon { color: #ffffff !important; }


/* ===== DROPDOWN NAV HOVER FIX =====
   Root cause: Kadence inline-generated CSS uses .header-navigation .header-menu-container
   selector with --global-palette3 (#1A202C near-black) for sub-menu background
   and --global-palette4 (#2D3748 charcoal) for hover background.
   Both appear after custom CSS in the <head>, winning by load order.
   Fix: target both selector paths with !important to override in all cases.
   ===================================== */

/* Sub-menu panel background — override Kadence's dark #1A202C */
.header-navigation .header-menu-container ul ul.sub-menu,
.header-navigation .header-menu-container ul ul.submenu,
.main-navigation .primary-menu-container ul ul.sub-menu,
.main-navigation .primary-menu-container ul ul.submenu,
.main-navigation .primary-menu-container ul ul {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-top: 3px solid var(--dp-orange) !important;
  box-shadow: 0 8px 32px rgba(27,58,107,0.14) !important;
}

/* Sub-menu item base text color */
.header-navigation .header-menu-container ul ul li.menu-item > a,
.main-navigation .primary-menu-container ul ul li.menu-item > a,
.main-navigation .primary-menu-container ul ul li > a {
  color: #2C2C2C !important;
  background: #ffffff !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  border-left: 3px solid transparent !important;
  transition: color 0.18s ease, background 0.18s ease, border-left-color 0.18s ease !important;
}

/* Sub-menu hover — override Kadence's dark charcoal (#2D3748) hover */
.header-navigation .header-menu-container ul ul li.menu-item > a:hover,
.header-navigation .header-menu-container ul ul li.menu-item > a:focus,
.main-navigation .primary-menu-container ul ul li.menu-item > a:hover,
.main-navigation .primary-menu-container ul ul li.menu-item > a:focus,
.main-navigation .primary-menu-container ul ul li > a:hover,
.main-navigation .primary-menu-container ul ul li > a:focus {
  color: var(--dp-orange) !important;
  background: #FFF5F1 !important;
  border-left-color: var(--dp-orange) !important;
}

/* Current active item in sub-menu — uniform white, no highlight tint */
/* Covers all Kadence selector paths including short path from header.min.css */
.header-navigation ul ul li.current-menu-item > a,
.header-navigation ul ul li.current-page-ancestor > a,
.header-navigation ul ul li.current-menu-ancestor > a,
.header-navigation .header-menu-container ul ul li.menu-item.current-menu-item > a,
.header-navigation .header-menu-container ul ul li.menu-item.current-page-ancestor > a,
.header-navigation .header-menu-container ul ul li.menu-item.current-menu-ancestor > a,
.main-navigation ul ul li.current-menu-item > a,
.main-navigation ul ul li.current-page-ancestor > a,
.main-navigation ul ul li.current-menu-ancestor > a,
.main-navigation .primary-menu-container ul ul li.menu-item.current-menu-item > a,
.main-navigation .primary-menu-container ul ul li.menu-item.current-page-ancestor > a,
.main-navigation .primary-menu-container ul ul li.menu-item.current-menu-ancestor > a,
nav#site-navigation ul ul li.current-menu-item > a,
nav#site-navigation ul ul li.current-page-ancestor > a {
  color: #2C2C2C !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-left-color: transparent !important;
}

/* ===== GLOBAL BUTTON TEXT FIX =====
   Root cause: Kadence inline-generated CSS sets `a { color: var(--global-palette4) }`
   (#2D3748 charcoal) which overrides any un-important button color rules.
   Fix: use maximum body-scoped specificity + !important on all orange/CTA buttons.
   ======================================= */

/* Orange CTA buttons — all contexts */
body a.orange-btn,
body .orange-btn,
body a.orange-btn:link,
body a.orange-btn:visited,
.entry-content a.orange-btn,
.wp-block-group a.orange-btn,
section a.orange-btn,
div a.orange-btn {
  color: #ffffff !important;
  text-decoration: none !important;
  background: linear-gradient(135deg, #E8590C 0%, #C94A08 100%) !important;
  border: none !important;
  display: inline-block !important;
  padding: 14px 32px !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  font-family: var(--font-display) !important;
  letter-spacing: 0.4px !important;
  cursor: pointer !important;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
  box-shadow: 0 4px 14px rgba(232, 89, 12, 0.35) !important;
}

body a.orange-btn:hover,
body a.orange-btn:focus,
.entry-content a.orange-btn:hover,
section a.orange-btn:hover {
  color: #ffffff !important;
  background: linear-gradient(135deg, #C94A08 0%, #A83906 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(232, 89, 12, 0.45) !important;
  text-decoration: none !important;
}

/* GET A QUOTE nav button */
body .get-a-quote-btn,
body a.get-a-quote-btn,
.header-navigation a.get-a-quote-btn,
.main-navigation a.get-a-quote-btn {
  color: #ffffff !important;
  text-decoration: none !important;
}

body .get-a-quote-btn:hover,
body a.get-a-quote-btn:hover {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Navy/secondary buttons */
body a.navy-btn,
body .navy-btn,
body a.navy-btn:link,
body a.navy-btn:visited {
  color: #ffffff !important;
  text-decoration: none !important;
  background-color: #1B3A6B !important;
}

body a.navy-btn:hover,
body a.navy-btn:focus {
  color: #ffffff !important;
  background-color: #152e57 !important;
  text-decoration: none !important;
}

/* White outline buttons on dark backgrounds */
body a.outline-btn,
body .outline-btn,
body a.outline-btn:link,
body a.outline-btn:visited {
  color: #ffffff !important;
  text-decoration: none !important;
  border: 2px solid #ffffff !important;
  background: transparent !important;
}

body a.outline-btn:hover,
body a.outline-btn:focus {
  color: #1B3A6B !important;
  background: #ffffff !important;
  text-decoration: none !important;
}

/* ===== PRODUCT PAGE CUSTOM BUTTON TEXT FIX =====
   Each product page has its own custom button class (osb-btn-primary, mdf-btn-primary, etc.)
   Kadence's `a { color }` override wins unless we add !important here globally.
   ============================================== */

/* OSB Page */
body a.osb-btn-primary,
body .osb-btn-primary:link,
body .osb-btn-primary:visited {
  color: #ffffff !important;
  text-decoration: none !important;
}
body a.osb-btn-phone {
  color: rgba(255,255,255,0.90) !important;
  text-decoration: none !important;
}

/* MDF Page */
body a.mdf-btn-primary,
body .mdf-btn-primary:link,
body .mdf-btn-primary:visited {
  color: #ffffff !important;
  text-decoration: none !important;
}
body a.mdf-btn-phone {
  color: rgba(255,255,255,0.90) !important;
  text-decoration: none !important;
}

/* Fire Retardant Page */
body a.frt-btn-primary,
body .frt-btn-primary:link,
body .frt-btn-primary:visited {
  color: #ffffff !important;
  text-decoration: none !important;
}
body a.frt-btn-ghost,
body .frt-btn-ghost:link,
body .frt-btn-ghost:visited {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Hardwood Page */
body a.btn-primary,
body .btn-primary:link,
body .btn-primary:visited {
  color: #ffffff !important;
  text-decoration: none !important;
}
body a.btn-outline,
body .btn-outline:link,
body .btn-outline:visited {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Pressure Treated Page */
body a.pt-btn-primary,
body .pt-btn-primary:link,
body .pt-btn-primary:visited,
body a.pt-btn-cta,
body .pt-btn-cta:link,
body .pt-btn-cta:visited,
body a.pt-btn-lg,
body .pt-btn-lg:link,
body .pt-btn-lg:visited {
  color: #ffffff !important;
  text-decoration: none !important;
}
body a.pt-btn-outline,
body .pt-btn-outline:link,
body .pt-btn-outline:visited {
  color: #1B3A6B !important;
  text-decoration: none !important;
}
body a.pt-btn-outline:hover {
  color: #ffffff !important;
}

/* CDX Page */
body a.cdx-btn--orange,
body .cdx-btn--orange:link,
body .cdx-btn--orange:visited {
  color: #ffffff !important;
  text-decoration: none !important;
}
body a.cdx-btn--outline,
body .cdx-btn--outline:link,
body .cdx-btn--outline:visited {
  color: #ffffff !important;
  text-decoration: none !important;
}
body .cdx-btn__phone {
  color: rgba(255,255,255,0.90) !important;
  text-decoration: none !important;
}

/* Catch-all for any page-specific btn class pattern */
body [class$="-btn-primary"],
body [class*="-btn-primary"]:link,
body [class*="-btn-primary"]:visited {
  color: #ffffff !important;
  text-decoration: none !important;
}
body [class$="-btn-ghost"],
body [class*="-btn-ghost"]:link,
body [class*="-btn-ghost"]:visited {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* ===== PRODUCT PAGE HERO HEADING COLOR FIX =====
   Kadence sets h1/h2/h3 { color: var(--global-palette1) } (navy) globally.
   Product page hero headings need white text — override with !important.
   ============================================== */

/* Pressure Treated Page */
body .pt-hero-heading,
body .pt-hero h1,
body .pt-hero h2 {
  color: #ffffff !important;
}
body .pt-hero-accent {
  color: var(--dp-orange) !important;
}
body .pt-hero-sub {
  color: rgba(255,255,255,0.88) !important;
}

/* OSB Hero heading */
body .osb-hero h1,
body .osb-hero h2,
body .osb-hero-h1 {
  color: #ffffff !important;
}
body .osb-hero p,
body .osb-hero-sub {
  color: rgba(255,255,255,0.88) !important;
}

/* CDX Hero heading */
body .cdx-hero h1,
body .cdx-hero h2,
body .cdx-hero-h1 {
  color: #ffffff !important;
}

/* MDF Hero heading */
body .mdf-hero h1,
body .mdf-hero h2,
body .mdf-hero-h1 {
  color: #ffffff !important;
}

/* Fire Retardant Hero heading */
body .frt-hero h1,
body .frt-hero h2 {
  color: #ffffff !important;
}

/* Hardwood Hero heading */
body .hw-hero h1,
body .hw-hero h2,
body [class*="hardwood"] h1,
body [class*="hardwood"] h2 {
  color: #ffffff !important;
}

/* Generic pattern: any hero section heading should be white */
body [class*="-hero"] h1,
body [class*="-hero"] h2,
body [class*="hero-heading"],
body [class*="hero-h1"],
body [class*="hero-h2"] {
  color: #ffffff !important;
}

/* ===== HARDWOOD LUMBER PAGE — CONTENT CONTAINER FIX =====
   Page ID 80 uses content-width-fullwidth template (Kadence body class).
   Content touches left edge with 0px padding. Add proper max-width + centering.
   ======================================================== */

.page-id-80 .entry-content,
.page-id-80 .single-content {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  .page-id-80 .entry-content,
  .page-id-80 .single-content {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ===== FULLWIDTH PLAIN-HTML PAGES — GLOBAL CONTENT CONTAINER FIX =====
   All pages use Kadence's content-width-fullwidth template which removes
   max-width constraints. Pages with plain HTML content (no internal
   section/container structure) end up flush against both edges.
   
   Fix: apply max-width + centered padding to .entry-content on ALL
   page-id-XX pages that have the fullwidth body class, EXCEPT pages
   that have their own internal layout system (CDX, OSB, MDF, etc. use
   custom <section> wrappers that are already handled).
   
   Excluded (have own containers): 8 (cdx), 57 (frt), 58 (hardwood-plywood),
   59 (pt), 67 (trade-rewards), 7 (trade-accounts), 79 (osb), 81 (mdf)
   ===================================================================== */

/* Plain HTML product/service pages — IDs without internal containers */
.page-id-83 .entry-content,   /* wood-veneers-miami */
.page-id-80 .entry-content,   /* hardwood-lumber-miami (already fixed) */
.page-id-88 .entry-content,   /* marine-plywood-miami */
.page-id-87 .entry-content,   /* cabinet-grade-birch-plywood-miami */
.page-id-86 .entry-content,   /* mdo-plywood-miami */
.page-id-85 .entry-content,   /* baltic-birch-plywood-miami */
.page-id-78 .entry-content,   /* broward-county-plywood-delivery */
.page-id-73 .entry-content,   /* cabinet-shop-wholesale-plywood */
.page-id-72 .entry-content,   /* contractor-plywood-account */
.page-id-71 .entry-content,   /* concrete-form-plywood-miami */
.page-id-70 .entry-content,   /* marine-plywood-contractor-account */
.page-id-69 .entry-content,   /* event-construction-lumber-miami */
.page-id-68 .entry-content,   /* hurricane-restoration-plywood-miami */
.page-id-66 .entry-content,   /* veneer-layout-service-miami */
.page-id-65 .entry-content,   /* plywood-lumber-doral-fl */
.page-id-64 .entry-content,   /* plywood-lumber-hialeah-fl */
.page-id-63 .entry-content,   /* plywood-lumber-miami-beach-fl */
.page-id-62 .entry-content,   /* plywood-lumber-fort-lauderdale-fl */
.page-id-61 .entry-content,   /* plywood-lumber-coral-gables-fl */
.page-id-60 .entry-content    /* plywood-lumber-homestead-fl */
{
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(20px, 4vw, 60px) !important;
  padding-right: clamp(20px, 4vw, 60px) !important;
  box-sizing: border-box !important;
}

/* Additional plain-HTML fullwidth pages missing from first batch */
.page-id-84 .entry-content    /* service-area */
{
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(20px, 4vw, 60px) !important;
  padding-right: clamp(20px, 4vw, 60px) !important;
  box-sizing: border-box !important;
}


/* ===================================================================
   PRODUCTS PAGE (ID:151) — CONTAINER FIX + SHORTCODE ARTIFACT HIDE
   The page uses Kadence fullwidth template, content is flush to edges.
   Old shortcode plugin [columns]/[one_half] renders as literal text.
   =================================================================== */

.page-id-151 .entry-content {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(20px, 4vw, 60px) !important;
  padding-right: clamp(20px, 4vw, 60px) !important;
  box-sizing: border-box !important;
}

/* Hide raw shortcode artifacts — [columns], [one_half], etc. rendered as text */
.page-id-151 .products_cont,
.page-id-151 .gray_bg_products {
  display: block;
  overflow: hidden;
}

/* Hide shortcode bracket text nodes that appear as visible text */
.page-id-151 .entry-content > p:empty {
  display: none;
}


/* ===================================================================
   CONTACT US PAGE (ID:143) — CONTAINER FIX
   Kadence fullwidth template, content flush to 0px left edge.
   The Kadence row layout block (.kb-row-layout-wrap) needs a container.
   =================================================================== */

.page-id-143 .entry-content {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(20px, 4vw, 60px) !important;
  padding-right: clamp(20px, 4vw, 60px) !important;
  padding-top: 40px !important;
  padding-bottom: 60px !important;
  box-sizing: border-box !important;
}


/* ===================================================================
   ABOUT US PAGE (ID:149) — FULL PAGE STYLES
   All au-* classes need CSS. Page uses fullwidth/unboxed Kadence template.
   Design: Navy #1B3A6B / Orange #E8590C. Fonts: Cabinet Grotesk + Satoshi.
   =================================================================== */

/* ---- HERO ---- */
.au-hero {
  position: relative;
  width: 100%;
  min-height: 600px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.au-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.au-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, rgba(27,58,107,0.92) 0%, rgba(27,58,107,0.65) 50%, rgba(10,20,45,0.35) 100%);
  z-index: 1;
}

.au-hero-content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 60px clamp(24px, 6vw, 120px) 70px;
  color: #fff;
}

.au-eyebrow {
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #E8590C;
  margin-bottom: 14px;
}

.au-hero-content h1 {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 900;
  color: #fff !important;
  line-height: 1.08;
  margin: 0 0 20px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

.au-hero-content p {
  font-size: 1.1em;
  color: rgba(255,255,255,0.88);
  line-height: 1.65;
  max-width: 600px;
  margin: 0 0 28px;
}

.au-hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.au-btn-primary {
  display: inline-block;
  background: #E8590C;
  color: #fff !important;
  font-weight: 700;
  font-size: 1em;
  padding: 14px 32px;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.2s;
}
.au-btn-primary:hover { background: #C94A08; color: #fff !important; }

.au-btn-ghost {
  display: inline-block;
  background: transparent;
  color: #fff !important;
  font-weight: 700;
  font-size: 1em;
  padding: 14px 32px;
  border-radius: 6px;
  border: 2px solid rgba(255,255,255,0.7);
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}
.au-btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.1); color: #fff !important; }

.au-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.au-badges span {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  font-size: 0.82em;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 20px;
}

/* ---- STATS BAR ---- */
.au-stats {
  background: #1B3A6B;
  display: flex;
  justify-content: center;
  gap: 0;
}

.au-stat {
  flex: 1;
  max-width: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 20px;
  border-right: 1px solid rgba(255,255,255,0.12);
  text-align: center;
}
.au-stat:last-child { border-right: none; }

.au-stat-num {
  font-size: 2.4rem;
  font-weight: 900;
  color: #E8590C;
  line-height: 1;
  margin-bottom: 8px;
}

.au-stat-label {
  font-size: 0.82em;
  font-weight: 600;
  color: rgba(255,255,255,0.78);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ---- OUR STORY ---- */
.au-story {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px clamp(24px, 6vw, 120px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.au-section-eyebrow {
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #E8590C;
  margin-bottom: 12px;
}

.au-story-text h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 900;
  color: #1B3A6B;
  line-height: 1.12;
  margin: 0 0 24px;
}

.au-story-text p {
  font-size: 1em;
  line-height: 1.7;
  color: #2D3748;
  margin-bottom: 16px;
}

.au-story-img img {
  width: 100%;
  border-radius: 10px;
  display: block;
}

.au-story-img-caption {
  font-size: 0.82em;
  color: #6B7280;
  margin-top: 10px;
  text-align: center;
}

/* ---- TIMELINE ---- */
.au-timeline-section {
  background: #F4F6FA;
  padding: 80px clamp(24px, 6vw, 120px);
}

.au-timeline-section > .au-section-eyebrow,
.au-timeline-section > h2 {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.au-timeline-section > h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 900;
  color: #1B3A6B;
  margin-bottom: 48px;
}

.au-timeline {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
}

.au-tl-item {
  background: #fff;
  border-radius: 10px;
  padding: 28px 24px;
  border-left: 4px solid #E8590C;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.au-tl-marker {
  margin-bottom: 12px;
}

.au-tl-year {
  font-size: 0.78em;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #E8590C;
  background: rgba(232,89,12,0.1);
  padding: 3px 10px;
  border-radius: 4px;
}

.au-tl-body h3 {
  font-size: 1.05em;
  font-weight: 800;
  color: #1B3A6B;
  margin: 0 0 8px;
}

.au-tl-body p {
  font-size: 0.9em;
  line-height: 1.6;
  color: #4B5563;
  margin: 0;
}

/* ---- WHY US ---- */
.au-why {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px clamp(24px, 6vw, 120px);
}

.au-why h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 900;
  color: #1B3A6B;
  margin-bottom: 48px;
}

.au-why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}

.au-why-item {
  background: #F4F6FA;
  border-radius: 10px;
  padding: 28px 24px;
}

.au-why-icon {
  font-size: 2rem;
  margin-bottom: 12px;
}

.au-why-item h3 {
  font-size: 1.05em;
  font-weight: 800;
  color: #1B3A6B;
  margin: 0 0 10px;
}

.au-why-item p {
  font-size: 0.92em;
  line-height: 1.6;
  color: #4B5563;
  margin: 0;
}

/* ---- WHO WE SERVE ---- */
.au-serve {
  background: #1B3A6B;
  padding: 80px clamp(24px, 6vw, 120px);
}

.au-serve-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.au-serve h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 900;
  color: #fff;
  margin-bottom: 24px;
}

.au-serve p {
  color: rgba(255,255,255,0.82);
  line-height: 1.7;
  margin-bottom: 16px;
}

.au-serve ul {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
}

.au-serve ul li {
  color: rgba(255,255,255,0.88);
  padding: 6px 0;
  padding-left: 20px;
  position: relative;
  font-size: 0.95em;
}

.au-serve ul li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #E8590C;
  font-weight: 700;
}

/* ---- COMMITMENTS BAR ---- */
.au-commitments {
  background: #0D2444;
  padding: 32px clamp(24px, 6vw, 120px);
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

.au-commitments-label {
  font-size: 0.78em;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #E8590C;
  white-space: nowrap;
}

.au-commitments-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  flex: 1;
}

.au-commitment-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.85);
  font-size: 0.88em;
  font-weight: 600;
}

.au-commit-check {
  color: #E8590C;
  font-weight: 900;
}

/* ---- FINAL CTA ---- */
.au-cta {
  background: linear-gradient(135deg, #1B3A6B 0%, #0D2444 100%);
  padding: 80px clamp(24px, 6vw, 120px);
  text-align: center;
}

.au-cta-inner {
  max-width: 700px;
  margin: 0 auto;
}

.au-cta h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 900;
  color: #fff;
  margin-bottom: 16px;
}

.au-cta p {
  color: rgba(255,255,255,0.82);
  font-size: 1.05em;
  line-height: 1.65;
  margin-bottom: 32px;
}

.au-cta-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.au-cta-hours {
  font-size: 0.85em;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.5px;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 1024px) {
  .au-story {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 60px clamp(20px, 5vw, 60px);
  }
  .au-serve-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .au-stat { max-width: none; }
}

@media (max-width: 768px) {
  .au-hero { min-height: 500px; }
  .au-hero-content { padding: 40px 24px 50px; }
  .au-hero-content h1 { font-size: 1.9rem; }
  .au-stats { flex-wrap: wrap; }
  .au-stat { flex: 0 0 50%; padding: 24px 16px; }
  .au-timeline-section { padding: 60px 24px; }
  .au-timeline { grid-template-columns: 1fr; }
  .au-commitments { flex-direction: column; gap: 16px; padding: 28px 24px; }
  .au-cta { padding: 60px 24px; }
  .au-why { padding: 60px 24px; }
  .au-serve { padding: 60px 24px; }
}

@media (max-width: 480px) {
  .au-stat { flex: 0 0 100%; }
  .au-hero-actions { flex-direction: column; }
  .au-btn-primary, .au-btn-ghost { text-align: center; }
}


/* ===================================================================
   AREAS WE SERVE CARD — FULL-WIDTH BLEED ON PRODUCT PAGES
   The "Areas We Serve" section at the bottom of product pages should
   expand to full viewport width, breaking out of the 1100px container.
   Targets the styled div block (background #F5F5F5, orange top border)
   on all product pages that have the container fix applied.
   Uses negative-margin bleed to escape the constrained entry-content.
   =================================================================== */

.page-id-80 .entry-content > div[style*="F5F5F5"],
.page-id-83 .entry-content > div[style*="F5F5F5"],
.page-id-85 .entry-content > div[style*="F5F5F5"],
.page-id-86 .entry-content > div[style*="F5F5F5"],
.page-id-87 .entry-content > div[style*="F5F5F5"],
.page-id-88 .entry-content > div[style*="F5F5F5"],
.page-id-82 .entry-content > div[style*="F5F5F5"] {
  margin-left: calc(-1 * clamp(20px, 4vw, 60px)) !important;
  margin-right: calc(-1 * clamp(20px, 4vw, 60px)) !important;
  border-radius: 0 !important;
  padding-left: clamp(24px, 5vw, 80px) !important;
  padding-right: clamp(24px, 5vw, 80px) !important;
}

/* ===================================================================
   PT LUMBER — Quote Form Section Background Fix (ID:59)
   The #pt-quote section has transparent background, causing it to
   visually "bleed" into the gray section above (#pt-area).
   Adding white background creates a clean visual break.
   =================================================================== */
.page-id-59 #pt-quote {
  background: #ffffff !important;
}

/* ===================================================================
   PT LUMBER — Area/Contact section clean separation
   Light separator to delineate the contact info from quote form.
   =================================================================== */
.page-id-59 #pt-area {
  border-bottom: 1px solid #e5e2dc;
}

/* ===================================================================
   DOMESTIC HARDWOOD (ID:58) — Layout fixes
   1. Why section: ensure proper dark background (currently transparent)
   2. Section padding consistency
   =================================================================== */
.page-id-58 .why-section {
  background: var(--navy-dark, #0F2444) !important;
}

/* === FIX: Remove Kadence content-area margin that creates white gap on custom-hero pages === */
.content-area { margin-top: 0 !important; margin-bottom: 0 !important; }
.entry-content-wrap,
.entry-content-wrap.hentry,
.single-entry .entry-content-wrap { padding: 0 !important; }
.entry.single-entry { box-shadow: none !important; }


/* === FIX: Eliminate sub-pixel seam between sticky nav bottom and dark hero sections === */
.entry-content.single-content { margin-top: -2px; }


/* ================================================================
   MOBILE DRAWER — Fortune 500 polish v2 (June 2026)
   ================================================================ */

/* === Drawer panel background === */
.drawer-inner,
#mobile-drawer .drawer-inner {
  background-color: #ffffff !important;
  color: #1B3A6B !important;
  width: 100vw !important;
  max-width: 100vw !important;
  min-width: 100vw !important;
  left: 0 !important;
  right: 0 !important;
  box-sizing: border-box !important;
}

/* === Drawer header row — navy bar with brand name + close === */
#mobile-drawer .drawer-header {
  background-color: #1B3A6B !important;
  padding: 0 20px !important;
  min-height: 58px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 3px solid #E8590C !important;
}
/* Brand name — single line, truncates cleanly */
#mobile-drawer .drawer-header::before {
  content: 'INTL PLYWOOD & LUMBER';
  font-family: 'Barlow Condensed', 'Arial Black', sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
/* Close button — large tap target, visible on navy */
#mobile-drawer .drawer-header .drawer-toggle,
#mobile-drawer .drawer-header .menu-toggle-close {
  color: #ffffff !important;
  background: rgba(255,255,255,0.15) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* === Top-level nav link rows === */
#mobile-drawer .mobile-navigation ul li > a,
.mobile-navigation ul li > a {
  color: #1B3A6B !important;
  background: #ffffff !important;
  font-family: 'Barlow Condensed', 'Arial Black', sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: 15px 20px !important;
  border-bottom: 1px solid #e8edf5 !important;
  display: flex !important;
  align-items: center !important;
  line-height: 1.2 !important;
}
/* Rows that have a dropdown — the wrapper */
#mobile-drawer .mobile-navigation ul li.menu-item-has-children > .drawer-nav-drop-wrap,
.mobile-navigation ul li.menu-item-has-children > .drawer-nav-drop-wrap {
  display: flex !important;
  align-items: stretch !important;
  border-bottom: 1px solid #e8edf5 !important;
  background: #ffffff !important;
}
/* The link text inside dropdown rows */
#mobile-drawer .mobile-navigation ul li.menu-item-has-children > .drawer-nav-drop-wrap > a,
.mobile-navigation ul li.menu-item-has-children > .drawer-nav-drop-wrap > a {
  color: #1B3A6B !important;
  font-family: 'Barlow Condensed', 'Arial Black', sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: 15px 20px !important;
  flex: 1 !important;
  border-bottom: none !important;
  background: transparent !important;
}

/* Hover state — orange accent, subtle bg */
#mobile-drawer .mobile-navigation ul li > a:hover,
.mobile-navigation ul li > a:hover,
#mobile-drawer .mobile-navigation ul li.menu-item-has-children > .drawer-nav-drop-wrap > a:hover {
  color: #E8590C !important;
  background: #fff8f5 !important;
}

/* Active page — orange left border */
#mobile-drawer .mobile-navigation ul li.current-menu-item > a,
.mobile-navigation ul li.current-menu-item > a {
  color: #E8590C !important;
  border-left: 3px solid #E8590C !important;
  padding-left: 17px !important;
  background: #fff8f5 !important;
}

/* === Chevron toggle button — vertically centered, right-aligned === */
#mobile-drawer .drawer-sub-toggle,
.mobile-navigation .drawer-sub-toggle,
.mobile-navigation .drawer-nav-drop-wrap > button,
.mobile-navigation .drawer-nav-drop-wrap button.drawer-sub-toggle {
  color: #1B3A6B !important;
  background: #f5f7fa !important;
  border: none !important;
  border-left: 1px solid #e8edf5 !important;
  min-width: 52px !important;
  min-height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: background 0.15s ease !important;
}
#mobile-drawer .drawer-sub-toggle:hover,
.mobile-navigation .drawer-sub-toggle:hover {
  color: #E8590C !important;
  background: #fff0eb !important;
}

/* === Sub-menu items (expanded dropdowns) === */
#mobile-drawer .mobile-navigation ul ul li > a,
.mobile-navigation ul ul li > a {
  color: #374151 !important;
  background: #f5f7fa !important;
  font-family: 'Inter', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  padding: 11px 20px 11px 36px !important;
  border-bottom: 1px solid #e8edf5 !important;
  line-height: 1.3 !important;
}
#mobile-drawer .mobile-navigation ul ul li > a:hover,
.mobile-navigation ul ul li > a:hover {
  color: #E8590C !important;
  background: #fff0eb !important;
}

/* === GET A QUOTE CTA — pinned block above sticky bar === */
#mobile-drawer .mobile-navigation .get-a-quote-btn > a,
#mobile-drawer li.get-a-quote-btn > a,
.mobile-navigation .get-a-quote-btn > a {
  background: #E8590C !important;
  color: #ffffff !important;
  font-family: 'Barlow Condensed', 'Arial Black', sans-serif !important;
  font-weight: 800 !important;
  font-size: 17px !important;
  letter-spacing: 0.06em !important;
  text-align: center !important;
  display: block !important;
  margin: 20px 20px 8px !important;
  padding: 16px 20px !important;
  border-radius: 6px !important;
  border-bottom: none !important;
  text-transform: uppercase !important;
  box-shadow: 0 4px 14px rgba(232,89,12,0.35) !important;
}
#mobile-drawer .mobile-navigation .get-a-quote-btn > a:hover,
.mobile-navigation .get-a-quote-btn > a:hover {
  background: #C94A08 !important;
  color: #ffffff !important;
}

/* === Overlay darkens page behind drawer === */
.drawer-overlay {
  background: rgba(12, 28, 60, 0.65) !important;
  backdrop-filter: blur(2px) !important;
}

/* === Closed-state hamburger — navy on white === */
@media (max-width: 1024px) {
  .menu-toggle-open {
    color: #1B3A6B !important;
    background: transparent !important;
    border: none !important;
    padding: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* Header bar height on mobile */
  .site-main-header-inner-wrap {
    min-height: 64px !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  /* Logo sizing */
  .custom-logo-link img.custom-logo {
    max-height: 48px !important;
    width: auto !important;
    max-width: 160px !important;
  }
}

/* ================================================================
   MOBILE RESPONSIVE — Fortune 500 polish
   ================================================================ */

/* === Mobile header: keep logo + hamburger properly spaced === */
@media (max-width: 768px) {
  .site-main-header-inner-wrap {
    padding: 10px 16px !important;
    min-height: 64px !important;
  }
  .custom-logo-link img.custom-logo {
    max-width: 140px !important;
  }
  .menu-toggle-open {
    color: #1B3A6B !important;
    font-size: 22px !important;
  }

  /* === Hero sections — mobile padding === */
  .pt-hero, .pp-hero, .terms-hero {
    padding: 48px 20px 40px !important;
  }
  .pt-hero h1, .pp-hero h1, .terms-hero h1 {
    font-size: clamp(2rem, 8vw, 2.8rem) !important;
  }

  /* === Stat cards — 2 column on mobile === */
  .dp-stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  /* === Page body padding on mobile === */
  .pp-wrap, .terms-wrap {
    padding: 32px 16px 56px !important;
  }

  /* === TOC — single column on mobile (already set, reinforcing) === */
  .pp-toc ol, .terms-toc ol {
    grid-template-columns: 1fr !important;
  }

  /* === Service area buttons — wrap nicely === */
  .pt-service-buttons, .service-area-buttons {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* === Contact/quote cards — full width === */
  .pp-contact-card, .terms-contact-card {
    padding: 24px 20px !important;
  }
  .pp-contact-card a.pp-btn,
  .terms-contact-card a.terms-btn {
    display: block !important;
    margin: 6px 0 !important;
    text-align: center !important;
  }

  /* === Tables — horizontal scroll on mobile === */
  .pt-page table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* === Typography scale tightening on small screens === */
  body {
    font-size: 15px !important;
  }
  h1 { font-size: clamp(1.8rem, 7vw, 2.4rem) !important; }
  h2 { font-size: clamp(1.3rem, 5vw, 1.8rem) !important; }
  h3 { font-size: clamp(1.1rem, 4vw, 1.4rem) !important; }

  /* === Sticky CTA bar — ensure above everything === */
  .dp-sticky-cta {
    z-index: 99999 !important;
    height: 58px !important;
  }
  .dp-sticky-cta a {
    font-size: 13px !important;
    gap: 6px !important;
  }
  .dp-sticky-cta svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* === Footer responsive === */
  .dp-rich-footer .dp-footer-inner {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px 20px !important;
  }
}

/* === Extra small screens (iPhone SE, 375px) === */
@media (max-width: 400px) {
  .custom-logo-link img.custom-logo {
    max-width: 120px !important;
  }
  .dp-rich-footer .dp-footer-inner {
    grid-template-columns: 1fr !important;
  }
}


/* ================================================================
   MOBILE DRAWER — Full-width & sticky CTA clearance fix
   June 2026: Drawer was leaving ~15% left gap; GET A QUOTE button
   was overlapping the 58px sticky bottom CTA bar.
   ================================================================ */

/* Ensure drawer scrollable content clears the sticky CTA bar */
.drawer-inner .drawer-content,
.drawer-inner > .drawer-nav,
.drawer-inner > nav,
.drawer-inner .mobile-navigation {
  padding-bottom: 80px !important;
  overflow-y: auto !important;
}

/* Also push the entire drawer-inner scroll area to clear sticky bar */
@media (max-width: 768px) {
  .drawer-inner {
    padding-bottom: 72px !important;
    overflow-y: auto !important;
    height: 100% !important;
    max-height: 100dvh !important;
  }
}

/* ================================================================
   HOMEPAGE HERO QUOTE FORM — compact grid using CF7 <p> tags
   .hp-qf-grid — inside .dp-form-card white card on hero right
   ================================================================ */
.dp-form-card .wpcf7-form p { margin: 0 !important; }
.hp-qf-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.hp-qf-half {
  flex: 1 1 calc(50% - 5px);
  min-width: 120px;
  margin: 0 !important;
}
.hp-qf-full,
.hp-qf-submit-row {
  flex: 1 1 100%;
  margin: 0 !important;
}
.hp-qf-label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: #374151 !important;
  font-family: 'Inter', sans-serif !important;
  margin-bottom: 0 !important;
  line-height: 1.4;
}
.hp-qf-req { color: #E8590C; }
/* CF7 inputs inside hero card */
.dp-form-card .wpcf7-form input[type="text"],
.dp-form-card .wpcf7-form input[type="email"],
.dp-form-card .wpcf7-form input[type="tel"],
.dp-form-card .wpcf7-form textarea {
  width: 100% !important;
  padding: 8px 10px !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 5px !important;
  font-size: 13px !important;
  font-family: 'Inter', sans-serif !important;
  color: #1F2937 !important;
  background: #FAFBFC !important;
  box-sizing: border-box !important;
  margin-top: 4px !important;
  transition: border-color 0.18s !important;
}
.dp-form-card .wpcf7-form input:focus,
.dp-form-card .wpcf7-form textarea:focus {
  outline: none !important;
  border-color: #1B3A6B !important;
  box-shadow: 0 0 0 3px rgba(27,58,107,0.10) !important;
  background: #fff !important;
}
.dp-form-card .wpcf7-form textarea { min-height: 68px !important; resize: vertical !important; }
.dp-form-card .wpcf7-form input[type="submit"],
.dp-form-card .wpcf7-form .wpcf7-submit {
  width: 100% !important;
  background: #E8590C !important;
  color: #fff !important;
  border: none !important;
  padding: 13px 20px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  font-family: 'Barlow Condensed', Arial Black, sans-serif !important;
  letter-spacing: 0.04em !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
  margin-top: 2px !important;
}
.dp-form-card .wpcf7-form input[type="submit"]:hover,
.dp-form-card .wpcf7-form .wpcf7-submit:hover { background: #C94A08 !important; }
.dp-form-card .wpcf7-response-output {
  border-radius: 5px !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
  margin-top: 8px !important;
}


/* ====================================================================
   GLOBAL HERO WHITE TEXT OVERRIDE — June 2026
   Root cause: Kadence generates inline CSS that sets
     h1, h2, h3 { color: var(--global-palette1) }  (navy #1B3A6B)
   This fires AFTER our stylesheet and wins by load order.
   Fix: Target every known dark-hero class with body-scoped selectors
   + !important to guarantee white text on dark backgrounds.
   All 60+ pages covered by pattern matching on class names.
   ==================================================================== */

/* === GLOBAL HERO WHITE TEXT OVERRIDE === */

/* 1. Attribute selector catch-all — any element whose class contains
      "hero", "banner", "-hdr", "page-hero", etc. */
body [class*="-hero"] h1,
body [class*="-hero"] h2,
body [class*="-hero"] h3,
body [class*="-hero"] p,
body [class*="-hero"] span,
body [class*="-hero"] li,
body [class*="hero-"] h1,
body [class*="hero-"] h2,
body [class*="hero-"] h3,
body [class*="hero-"] p,
body [class*="hero__"] h1,
body [class*="hero__"] h2,
body [class*="hero__"] h3,
body [class*="hero__"] p,
body .hero h1,
body .hero h2,
body .hero h3,
body .hero p,
body /* duplicate .page-hero rule removed — see PAGE-HERO COMPREHENSIVE FIX below */

/* 2. Named hero classes — every prefix pattern found sitewide */
/* Cabinet shop */
body .cab-hero h1, body .cab-hero h2, body .cab-hero h3,
body .cab-hero p, body .cab-hero span, body .cab-hero .cab-eyebrow,
body .cab-hero .cab-lead, body .cab-hero .cab-sub { color: #ffffff !important; }
body .cab-hero .cab-eyebrow { color: #E8590C !important; }

/* Marine builders */
body .mar-hero h1, body .mar-hero h2, body .mar-hero h3,
body .mar-hero p, body .mar-hero span, body .mar-hero .mar-eyebrow,
body .mar-hero .mar-lead, body .mar-hero .mar-sub { color: #ffffff !important; }
body .mar-hero .mar-eyebrow { color: #E8590C !important; }

/* Millwork */
body .mwk-hero h1, body .mwk-hero h2, body .mwk-hero h3,
body .mwk-hero p, body .mwk-hero span, body .mwk-hero-inner h1,
body .mwk-hero-inner h2, body .mwk-hero-inner p { color: #ffffff !important; }

/* TV/Film */
body .tvf-hero h1, body .tvf-hero h2, body .tvf-hero h3,
body .tvf-hero p, body .tvf-hero span, body .tvf-hero-inner h1,
body .tvf-hero-inner h2, body .tvf-hero-inner p { color: #ffffff !important; }

/* Geo / city pages */
body .geo-hero h1, body .geo-hero h2, body .geo-hero h3,
body .geo-hero p, body .geo-hero span { color: #ffffff !important; }
body .city-hero h1, body .city-hero h2, body .city-hero h3,
body .city-hero p, body .city-hero span { color: #ffffff !important; }

/* EP / event page hero */
body .ep-hero h1, body .ep-hero h2, body .ep-hero h3,
body .ep-hero p, body .ep-hero span,
body .ep-hero__h1, body .ep-hero__subtitle,
body .ep-hero__eyebrow { color: #ffffff !important; }
body .ep-hero__eyebrow { color: #E8590C !important; }

/* LS hero */
body .ls-hero h1, body .ls-hero h2, body .ls-hero p,
body .ls-hero span { color: #ffffff !important; }

/* Blog / resource hero */
body .res-hero h1, body .res-hero h2, body .res-hero p { color: #ffffff !important; }

/* 3. Dark inline-style containers — any div/section with a dark inline bg */
/* Targets elements styled with inline navy/dark background */
body [style*="#1B3A6B"] h1,
body [style*="#1B3A6B"] h2,
body [style*="#1B3A6B"] h3,
body [style*="#1B3A6B"] p,
body [style*="#122850"] h1,
body [style*="#122850"] h2,
body [style*="#122850"] h3,
body [style*="#122850"] p,
body [style*="#0e2140"] h1,
body [style*="#0e2140"] h2,
body [style*="#0e2140"] h3,
body [style*="#0e2140"] p,
body [style*="#15305a"] h1,
body [style*="#15305a"] h2,
body [style*="#15305a"] h3,
body [style*="#15305a"] p,
body [style*="1b3a6b"] h1,
body [style*="1b3a6b"] h2,
body [style*="1b3a6b"] h3,
body [style*="1b3a6b"] p,
body [style*="background-color:#1B"] h1,
body [style*="background-color:#1B"] h2,
body [style*="background-color: #1B"] h1,
body [style*="background-color: #1B"] h2 {
  color: #ffffff !important;
}

/* 4. Linear-gradient dark backgrounds — hero sections using CSS backgrounds */
body [style*="linear-gradient"] h1,
body [style*="linear-gradient"] h2,
body [style*="linear-gradient"] h3 {
  color: #ffffff !important;
}

/* 5. Eyebrow / accent overrides — keep orange on dark backgrounds */
body [class*="-hero"] .eyebrow,
body [class*="-hero"] [class*="-eyebrow"],
body [class*="-hero"] [class*="section-label"],
body [class*="-hero"] [class*="-label"],
body .cab-eyebrow, body .mar-eyebrow,
body .geo-eyebrow, body .mwk-eyebrow { color: #E8590C !important; }

/* 6. Button text safety — buttons inside hero must be white */
body [class*="-hero"] a[class*="-btn"],
body [class*="-hero"] .btn,
body [class*="-hero"] a[href] { color: #ffffff !important; }
/* But orange buttons stay orange-bg with white text */
body [class*="-hero"] a[class*="btn-primary"],
body [class*="-hero"] a[class*="btn-org"],
body [class*="-hero"] a[class*="orange"] { 
  background-color: #E8590C !important; 
  color: #ffffff !important; 
}
/* Outline/ghost buttons */
body [class*="-hero"] a[class*="btn-outline"],
body [class*="-hero"] a[class*="btn-ghost"],
body [class*="-hero"] a[class*="btn-wh"] {
  background: transparent !important;
  border-color: rgba(255,255,255,0.7) !important;
  color: #ffffff !important;
}


/* ====================================================================
   PAGE-HERO COMPREHENSIVE FIX — June 2026
   Force white text on all .page-hero children; fix button flex layout.
   ==================================================================== */

/* === PAGE-HERO COMPREHENSIVE FIX === */

/* All text in dark hero = white */
body .page-hero h1,
body .page-hero h2,
body .page-hero h3,
body .page-hero p,
body .page-hero span,
body .page-hero li { color: #ffffff !important; }

/* Orange primary button */
body .page-hero .orange-btn {
  background: #E8590C !important;
  color: #ffffff !important;
  text-decoration: none !important;
}
body .page-hero .orange-btn:hover {
  background: #C94A08 !important;
  color: #ffffff !important;
}

/* Ghost / outline second button */
body .page-hero a[style*="rgba(255,255,255"],
body .page-hero a[style*="border:2px solid"],
body .page-hero a[style*="border: 2px solid"],
body .page-hero .btn-outline,
body .page-hero .outline-btn {
  background: transparent !important;
  border: 2px solid rgba(255,255,255,0.80) !important;
  color: #ffffff !important;
}

/* Hero button flex row */
body .page-hero .hero-btns {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  justify-content: center !important;
  margin-top: 4px !important;
}

@media (max-width: 600px) {
  body .page-hero .hero-btns { flex-direction: column; align-items: center; }
  body .page-hero .hero-btns a {
    display: block !important;
    width: 100% !important;
    max-width: 320px !important;
    text-align: center !important;
  }
}

/* ====================================================================
   CARD & CONTENT BLOCK COLOR RESCUE — June 2026
   Global [class*="-hero"] h2 rule catches .page-hero and bleeds white
   onto child cards (.tier-card, .product-card, .callout-box etc.)
   These overrides restore correct dark text on light-bg content blocks.
   ==================================================================== */

/* Tier cards (trade-rewards page) */
body .tier-card h2,
body .tier-card h3,
body .tier-card p,
body .tier-card li,
body .tier-card .spend { color: inherit !important; }
body .tier-card.tier-bronze h2,
body .tier-card.tier-silver h2,
body .tier-card.tier-gold h2 { color: #1B3A6B !important; }
body .tier-card ul li { color: #1F2937 !important; }
body .tier-card .spend { color: #888888 !important; }

/* Product cards (cabinet shop, contractor pages) */
body .product-card h3 { color: #1B3A6B !important; }
body .product-card p { color: #1F2937 !important; }

/* Callout boxes */
body .callout-box h3 { color: #E8590C !important; }
body .callout-box p { color: #1F2937 !important; }

/* Pricing / spec tables */
body .pricing-table td { color: #1F2937 !important; }
body .pricing-table th { color: #ffffff !important; }

/* Species / feature cards */
body .species-card h3,
body .feature-card h3,
body .spec-card h3 { color: #1B3A6B !important; }
body .species-card p,
body .feature-card p,
body .spec-card p { color: #1F2937 !important; }

/* ====================================================================
   TIER CARD H2 — EXEMPT FROM SCROLL ANIMATION
   MU-plugin IntersectionObserver targets h2 elements inside scrollable
   containers. Tier card h2 names (Bronze/Silver/Gold) are small and
   would be invisible until scroll. Force them visible immediately.
   ==================================================================== */
body .tier-card h2 {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  color: #1B3A6B !important;
}

/* ====================================================================
   SCROLL ANIMATION EXEMPTIONS — TABLES & SECTION ELEMENTS
   MU-plugin IntersectionObserver targets h2 and table elements.
   Pricing/calculator tables must be immediately visible (not animated).
   ==================================================================== */
body .pricing-table,
body .pricing-table th,
body .pricing-table td,
body .pricing-table tr {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}
/* Section h2 headings with explicit navy color (page body, not heroes) */
body h2[style*="color:#1B3A6B"],
body h2[style*="color: #1B3A6B"] {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
/* Stat-box and callout-box — always visible */
body .stat-box,
body .callout-box,
body .callout-box h3,
body .callout-box p {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* ====================================================================
   PAGE-HERO — EXEMPT FROM SCROLL ANIMATION (trade-rewards & all pages)
   MU-plugin IntersectionObserver targets h1 elements in fade-in cycle.
   .page-hero h1 and .page-hero p were rendering opacity:0 on load,
   collapsing the hero to a thin dark strip. Force full visibility.
   ==================================================================== */
body .page-hero,
body .page-hero h1,
body .page-hero h2,
body .page-hero p,
body .hero-btns,
body .page-hero .hero-btns,
body .page-hero .hero-btns a {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  visibility: visible !important;
}

/* ====================================================================
   STAT-BOX — WHITE TEXT FIX
   .stat-box sits on navy background. The <p> tag inside inherits dark
   body text. Force white on all stat-box text elements.
   ==================================================================== */
body .stat-box p,
body .stat-box span,
body .stat-box .stat-label,
body .stat-box .stat-value {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* ====================================================================
   CF7 SUBMIT BUTTON — BRAND ORANGE OVERRIDE
   Kadence global palette overrides .wpcf7-submit background with a
   washed-out tint. Force solid brand orange with maximum specificity.
   Applies to trade-account (ID 74) credit application form.
   ==================================================================== */
body .wpcf7-submit,
body input[type="submit"].wpcf7-submit,
body .cf7-credit-app input[type="submit"],
body .cf7-credit-app .wpcf7-submit,
body .wpcf7 input[type="submit"],
body .wpcf7-form input[type="submit"] {
  background: #E8590C !important;
  background-color: #E8590C !important;
  color: #ffffff !important;
  border: none !important;
  opacity: 1 !important;
}
body .wpcf7-submit:hover,
body input[type="submit"].wpcf7-submit:hover,
body .wpcf7 input[type="submit"]:hover,
body .wpcf7-form input[type="submit"]:hover {
  background: #C94A08 !important;
  background-color: #C94A08 !important;
  color: #ffffff !important;
}


/* === GLOBAL COLOR SCHEME STANDARDIZATION — International Plywood ===
   Applied sitewide to enforce consistent brand colors across all product pages.
   Navy: #1B3A6B | Orange: #E8590C | Body text: #374151 | Muted: #6B7280
   ================================================================== */

/* ---- SECTION EYEBROW LABELS (small uppercase text above h2) ---- */
/* Standardize ALL section labels to brand orange */
.frt-section-label,
.cdx-section-label,
.mdf-section-label,
.osb-section-label,
.dp-section-label,
.vn-section-label,
.hw-section-label,
[class*="section-label"],
[class*="section_label"] {
  color: #E8590C !important;
}

/* Specific eyebrow patterns used across pages */
/* OSB: "PRODUCT OVERVIEW", "APPLICATIONS" labels */
.osb-label,
.cdx-label {
  color: #E8590C !important;
}

/* ---- CARD HEADINGS — standardize to navy across all card types ---- */
/* All card h3/h4 headings should be navy #1B3A6B */
.frt-spec-card h3,
.frt-spec-val,
.mdf-grade-card h3,
.mdf-grade-title,
.cdx-app-card h3,
.cdx-use-card h3,
.osb-app-card h3,
.spec-card h3,
.spec-card h4,
[class*="-card"] h3,
[class*="-card"] h4 {
  color: #1B3A6B !important;
}

/* ---- CARD BODY TEXT — standardize to charcoal #374151 ---- */
.frt-spec-label,
.mdf-grade-desc,
[class*="-card"] p,
[class*="-card"] li {
  color: #374151 !important;
}

/* ---- CARD BACKGROUNDS — all light-bg cards should be white or #F5F5F5 ---- */
/* Keep existing card backgrounds, just ensure text is readable */
.frt-spec-card,
.mdf-grade-card,
.cdx-app-card,
[class*="-card"]:not([class*="dark"]):not([class*="navy"]):not([class*="blue"]) {
  /* Don't override bg — each page controls its own card bg */
}

/* ---- MDF DIMENSION CARDS — headings navy ---- */
.mdf-dim-card h3,
.mdf-dim-title,
.mdf-dim-card .mdf-dim-size {
  color: #1B3A6B !important;
}

/* ---- CITY HERO h2 — these sit on dark navy background, must be white ---- */
/* The .city-hero div has background:#1B3A6B — all h2 inside must be white */
.city-hero h2,
.city-hero > h2,
div.city-hero h2 {
  color: #ffffff !important;
}

/* ---- CITY CARD SECTION HEADERS — outside hero, on light bg ---- */
/* h2s that come AFTER .city-hero (outside the div) should be navy */
/* These are handled by page-level CSS already */

/* ---- SPECIES CARD HEADERS (domestic hardwood) ---- */
/* Keep the wood-tone gradient — it's intentional design for that page */
/* But standardize the badge/label color to orange */
.species-badge {
  background: rgba(232, 89, 12, 0.85) !important;
  color: #ffffff !important;
}
.species-badge--domestic {
  background: rgba(232, 89, 12, 0.85) !important;
}
.species-badge--imported {
  background: rgba(27, 58, 107, 0.85) !important;
}

/* ---- VENEER PAGE COLORS ---- */
.vn-section-label,
.vn-eyebrow {
  color: #E8590C !important;
}
.vn-card__title {
  color: #1B3A6B !important;
}
.vn-spec-label {
  color: #6B7280 !important;
}
.vn-spec-val {
  color: #1B3A6B !important;
}

/* ---- SECTION DIVIDER LABELS (inline HTML eyebrows) ---- */
/* These appear as: <p style="...letter-spacing...uppercase..."> above h2s */
/* Catch-all for any uppercase label that should be orange */
.entry-content p[style*="letter-spacing"][style*="uppercase"],
.entry-content p[style*="letter-spacing"][style*="E8590C"] {
  color: #E8590C !important;
}

/* === END GLOBAL COLOR SCHEME STANDARDIZATION === */

<!-- wp:html -->
<style>

/* ── FORKLIFT DELIVERY — FEATURED CARD KADENCE OVERRIDE (ID 52) ── */
body .fkd-price-card--featured .fkd-price-card__name,
body .fkd-price-card--featured h3 {
  color: #ffffff !important;
}
body .fkd-price-card--featured .fkd-price-card__zone {
  color: #ffffff !important;
  opacity: 1 !important;
}
body .fkd-price-card--featured p,
body .fkd-price-card--featured li,
body .fkd-price-card--featured .fkd-price-card__desc,
body .fkd-price-card--featured .fkd-price-card__price-note {
  color: #ffffff !important;
}
body .fkd-price-card--featured .fkd-price-card__markets li {
  color: #ffffff !important;
}

</style>
<!-- /wp:html -->
/* ===== WP SITE BLOCKS OVERFLOW FIX =====
   WordPress core sets .wp-site-blocks { overflow: clip } which clips
   the absolutely-positioned nav dropdown when it extends below the viewport.
   Override to visible so the sub-menu always paints over page content.
   Applied: June 2026
   ========================================= */
.wp-site-blocks {
  overflow: visible !important;
}


/* ===== HIDE KADENCE TITLE BAR — NEW CITY & PRODUCT PAGES ===== */
/* Pages 532-539 have custom heroes in post content — suppress Kadence entry-hero */
.page-id-532 .entry-hero,
.page-id-533 .entry-hero,
.page-id-534 .entry-hero,
.page-id-535 .entry-hero,
.page-id-536 .entry-hero,
.page-id-537 .entry-hero,
.page-id-538 .entry-hero,
.page-id-539 .entry-hero {
  display: none !important;
}
.page-id-540 .entry-hero {
  display: none !important;
}
.page-id-541 .entry-hero { display: none !important; }
.page-id-78 .entry-hero { display: none !important; }


/* ============================================================
   CSS/UX SQUAD FIXES — F-11, F-17, F-18, F-19
   Applied: June 2026
   ============================================================ */

/* F-11: CDX table mobile scroll fix */
.cdx-specs-table { width: 100% !important; overflow-x: auto !important; display: block !important; }
@media (max-width: 768px) {
  .cdx-specs-table { overflow-x: scroll !important; -webkit-overflow-scrolling: touch !important; }
  table.cdx-specs-table, .cdx-page table { max-width: 100% !important; overflow-x: auto !important; display: block !important; }
}

/* F-17: Hamburger touch target WCAG 2.5.5 */
.mobile-toggle, .menu-toggle, button.menu-toggle, .mobile-menu-toggle,
[class*="hamburger"], [class*="mobile-toggle"], .kadence-menu-toggle,
header .toggle-button { min-width: 44px !important; min-height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }

/* F-18: Checkbox touch target fix */
.wpcf7 input[type="checkbox"], .wpcf7 input[type="radio"] { width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; cursor: pointer !important; }

/* F-19: Section eyebrow label contrast fix */
.dp-section-label, .section-label, .eyebrow-label, .sec-label,
span[style*="color:#E8590C"], span[style*="color: #E8590C"],
.sec--light .label, .sec--white .label { font-size: 14px !important; font-weight: 700 !important; }


/* ── BUG-015: CF7 Quote Form Row Layout — sitewide ──
   Form 518 .cf7-row/.cf7-row-2/.cf7-row-3 classes need flex layout.
   Collapses to single-column at ≤680px mobile.
   Previously only in page ID 74; now global via static CSS file.
   Added: 2026-06-16
   ── */
.cf7-quote-form .cf7-row { display: flex; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.cf7-quote-form .cf7-row-1 .cf7-field { flex: 1 1 100%; min-width: 0; }
.cf7-quote-form .cf7-row-2 .cf7-field { flex: 1 1 calc(50% - 10px); min-width: 0; }
.cf7-quote-form .cf7-row-3 .cf7-field { flex: 1 1 calc(33% - 14px); min-width: 0; }
@media (max-width: 680px) {
  .cf7-quote-form .cf7-row-2 .cf7-field,
  .cf7-quote-form .cf7-row-3 .cf7-field { flex: 1 1 100%; min-width: 0; }
}
.cf7-quote-form .cf7-field { min-width: 0; }
.cf7-quote-form .wpcf7-form-control-wrap { display: block; min-width: 0; }
.cf7-quote-form input[type='text'],
.cf7-quote-form input[type='email'],
.cf7-quote-form input[type='tel'],
.cf7-quote-form select,
.cf7-quote-form textarea { width: 100%; box-sizing: border-box; min-width: 0; }


/* ── BUG-010: Phone tel: links — WCAG 2.5.5 44px touch target sitewide ──
   Inline tel: links in page content sections were < 44px tall on mobile.
   Scoped to content areas only; sticky CTA/header/footer excluded by selector.
   Added: 2026-06-16
   ── */
@media (max-width: 1024px) {
  .entry-content a[href^=tel:],
  .cdx-page a[href^=tel:]:not(.cdx-btn),
  .sec--white a[href^=tel:],
  .sec--light a[href^=tel:],
  .form-sec a[href^=tel:],
  .hub-sec a[href^=tel:],
  .dp-contact-card a[href^=tel:],
  .biz-info a[href^=tel:],
  .cdx-biz-info a[href^=tel:],
  .pt-page a[href^=tel:],
  .mdf-page a[href^=tel:],
  .hw-page a[href^=tel:],
  .city-page a[href^=tel:] {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
    display: inline-flex !important;
    align-items: center;
  }
}