/**
 * D&D Auto Recycling - Design System
 * Dark/Industrial theme with green accent
 * Compatible with Divi 4 and Divi 5
 */

/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
    /* Colors - Primary */
    --color-primary: #00C853;
    --color-primary-dark: #00A844;
    --color-primary-light: #69F0AE;
    --color-primary-rgb: 0, 200, 83;

    /* Colors - Background */
    --color-bg-dark: #1A1A1A;
    --color-bg-card: #2A2A2A;
    --color-bg-elevated: #333333;
    --color-bg-overlay: rgba(0, 0, 0, 0.7);

    /* Colors - Text */
    --color-text-primary: #F5F5F5;
    --color-text-secondary: #B0B0B0;
    --color-text-heading: #FFFFFF;
    --color-text-on-primary: #1A1A1A;

    /* Colors - Semantic */
    --color-border: #444444;
    --color-warning: #FF9800;
    --color-error: #F44336;
    --color-success: #00C853;

    /* Typography */
    --font-heading: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-body: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-size-base: 1rem;
    --font-size-sm: 0.875rem;
    --font-size-lg: 1.125rem;
    --font-size-h1: 2.441rem;
    --font-size-h2: 1.953rem;
    --font-size-h3: 1.563rem;
    --font-size-h4: 1.25rem;
    --line-height-base: 1.6;
    --line-height-heading: 1.2;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-section: 5rem;

    /* Layout */
    --container-max: 1200px;
    --container-narrow: 800px;
    --border-radius: 8px;
    --border-radius-sm: 4px;
    --border-radius-lg: 12px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   Base / Reset Overrides
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body,
#page-container,
body.et_divi_theme,
body.et-db,
body.et-tb {
    background-color: #1A1A1A !important;
    color: #F5F5F5 !important;
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Visually hide breadcrumbs but keep in DOM for SEO schema */
.dd-breadcrumbs {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
}

/* Ensure page content has bottom padding before footer */
.entry-content, .et_pb_post_content, #main-content .container {
    padding-bottom: var(--space-2xl);
}

/* Force dark on all devices including mobile */
html, body {
    background-color: #1A1A1A !important;
}
#page-container,
.et_pb_section,
.et-l--body,
#main-content,
#et-main-area {
    background-color: #1A1A1A !important;
}

/* Sticky footer */
div#page-container {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
}
/* Account for WP admin bar when logged in */
.admin-bar div#page-container {
    min-height: calc(100vh - 32px) !important;
    min-height: calc(100dvh - 32px) !important;
}
@media (max-width: 782px) {
    .admin-bar div#page-container {
        min-height: calc(100vh - 46px) !important;
        min-height: calc(100dvh - 46px) !important;
    }
}
div#et-main-area {
    flex: 1 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
}
div#main-content {
    flex: 1 0 auto !important;
}
footer#main-footer, div#main-footer {
    flex-shrink: 0 !important;
    margin-top: auto !important;
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.et_pb_module_header,
.et_pb_slide_description .et_pb_slide_title {
    font-family: var(--font-heading);
    color: var(--color-text-heading);
    line-height: var(--line-height-heading);
    font-weight: 700;
}

h1, .dd-h1 { font-size: var(--font-size-h1); }
h2, .dd-h2 { font-size: var(--font-size-h2); }
h3, .dd-h3 { font-size: var(--font-size-h3); }
h4, .dd-h4 { font-size: var(--font-size-h4); }

p, li, td, th, label, input, textarea, select {
    color: var(--color-text-primary);
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover,
a:focus {
    color: var(--color-primary-light);
    text-decoration: underline;
}

/* ==========================================================================
   Divi Overrides - Global (Divi 4 + Divi 5)
   ========================================================================== */

/* Main container - Divi 4 IDs + Divi 5 semantic elements */
#main-content,
.et_pb_section,
[data-type="section"] {
    background-color: var(--color-bg-dark);
}

/* Dark card sections */
.dd-section-card,
.et_pb_section.dd-section-card,
section.dd-section-card {
    background-color: var(--color-bg-card);
    border-radius: var(--border-radius);
    padding: var(--space-2xl);
}

/* Elevated sections */
.dd-section-elevated,
.et_pb_section.dd-section-elevated,
section.dd-section-elevated {
    background-color: var(--color-bg-elevated);
}

/* Container width - Divi 4 + Divi 5 row containers */
.et_pb_row,
[data-type="row"] {
    max-width: var(--container-max);
}

/* ==========================================================================
   Header — Standalone (no Divi dependency)
   ========================================================================== */

#main-header {
    background-color: var(--color-bg-elevated);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    position: sticky;
    top: 0;
    z-index: 99999;
}
.admin-bar #main-header {
    top: 32px;
}
@media (max-width: 782px) {
    .admin-bar #main-header { top: 46px; }
}
@media (max-width: 980px) {
    #main-header {
        position: relative !important;
        position: static !important;
        -webkit-sticky: none;
        top: auto !important;
    }
}

.dd-header-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 70px;
}

/* Logo */
.dd-header-logo {
    flex-shrink: 0;
}
.dd-header-logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
}
.dd-logo-img {
    max-height: 50px;
    width: auto;
    height: 50px;
}
.dd-logo-text {
    font-size: 20px;
    font-weight: 800;
    color: var(--color-primary);
}

/* Nav menu — desktop: horizontal, mobile: hidden until toggled */
.dd-nav-menu,
ul.dd-nav-menu,
ul#dd-menu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    gap: var(--space-xs);
}
.dd-nav-menu li {
    list-style: none !important;
}
.dd-nav-menu li a {
    color: var(--color-text-primary);
    font-weight: 500;
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 8px 14px;
    text-decoration: none;
    transition: color var(--transition-fast);
    display: block;
}
.dd-nav-menu li a:hover,
.dd-nav-menu li.current-menu-item a {
    color: var(--color-primary);
}
.dd-nav-menu li.current-menu-item a {
    border-bottom: 2px solid var(--color-primary);
}

/* Mobile menu toggle — hamburger icon */
.dd-menu-toggle {
    display: none;
    background: none !important;
    border: none !important;
    cursor: pointer;
    padding: 10px !important;
    flex-direction: column;
    gap: 6px;
    box-shadow: none !important;
    min-height: auto !important;
    min-width: auto !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
    border-radius: 4px !important;
}
.dd-menu-toggle:hover {
    background: rgba(255,255,255,0.1) !important;
}
.dd-menu-toggle span {
    display: block;
    width: 26px;
    height: 3px;
    background-color: #00C853 !important;
    border-radius: 2px;
    transition: all 0.3s;
}

/* Mobile nav */
@media (max-width: 980px) {
    .dd-menu-toggle {
        display: flex;
        z-index: 100;
    }
    .dd-nav-menu,
    ul.dd-nav-menu,
    #dd-menu {
        display: none !important;
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        background: var(--color-bg-elevated);
        flex-direction: column;
        padding: var(--space-md);
        border-top: 2px solid var(--color-primary);
        box-shadow: var(--shadow-lg);
        z-index: 99999;
        list-style: none;
        margin: 0;
    }
    .dd-nav-menu.dd-menu-open,
    ul.dd-nav-menu.dd-menu-open,
    #dd-menu.dd-menu-open {
        display: flex !important;
    }
    .dd-nav-menu li {
        list-style: none;
    }
    .dd-nav-menu li a {
        padding: 12px var(--space-md);
        font-size: var(--font-size-base);
        border-bottom: 1px solid var(--color-border);
    }
    .dd-nav-menu li:last-child a {
        border-bottom: none;
    }
}

/* Logo - Divi 4 + Divi 5 image module in header */
.logo_container img,
#logo,
header .et_pb_image img,
header [data-type="image"] img {
    max-height: 50px;
    width: auto;
}

/* Navigation - Divi 4 + Divi 5 menu module + semantic <nav> */
#top-menu li a,
.et_mobile_menu li a,
nav[data-type="section"] a,
[data-type="menu"] a {
    color: var(--color-text-primary) !important;
    font-weight: 500;
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color var(--transition-fast);
}

#top-menu li a:hover,
#top-menu li.current-menu-item a,
.et_mobile_menu li a:hover,
nav[data-type="section"] a:hover,
[data-type="menu"] .current-menu-item a {
    color: var(--color-primary) !important;
}

#top-menu li.current-menu-item a,
[data-type="menu"] .current-menu-item a {
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: 2px;
}

/* Mobile menu - Divi 4 + Divi 5 */
.et_mobile_menu,
[data-type="menu"] .et_mobile_menu {
    background-color: var(--color-bg-elevated);
    border-top: 2px solid var(--color-primary);
}

.mobile_menu_bar::before {
    color: var(--color-text-primary) !important;
}

/* Dropdown - Divi 4 + Divi 5 */
#top-menu li ul.sub-menu,
[data-type="menu"] ul.sub-menu {
    background-color: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-lg);
}

#top-menu li ul.sub-menu li a,
[data-type="menu"] ul.sub-menu li a {
    font-size: var(--font-size-sm);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

/* Divi 4 .et_pb_button + Divi 5 [data-type="button"] */
.et_pb_button,
[data-type="button"] a,
.dd-btn {
    background-color: var(--color-primary) !important;
    color: var(--color-text-on-primary) !important;
    border: 2px solid var(--color-primary) !important;
    border-radius: var(--border-radius) !important;
    font-weight: 700;
    font-size: var(--font-size-base);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.75rem 1.75rem !important;
    transition: all var(--transition-base);
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    text-align: center;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Buttons inside paragraphs or after text need space above */
p + .dd-btn, p + a.dd-btn,
ul + .dd-btn, ol + .dd-btn,
div + .dd-btn {
    margin-top: var(--space-md);
}

.et_pb_button:hover,
[data-type="button"] a:hover,
.dd-btn:hover {
    background-color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Outline button variant */
.et_pb_button.dd-btn-outline,
[data-type="button"].dd-btn-outline a,
.dd-btn-outline {
    background-color: transparent !important;
    color: var(--color-text-primary) !important;
    border: 2px solid var(--color-text-primary) !important;
}

.et_pb_button.dd-btn-outline:hover,
[data-type="button"].dd-btn-outline a:hover,
.dd-btn-outline:hover {
    background-color: var(--color-text-primary) !important;
    color: var(--color-bg-dark) !important;
}

/* Large button */
.dd-btn-lg {
    padding: 1rem 2.5rem !important;
    font-size: var(--font-size-lg);
}

/* ==========================================================================
   Hero Section
   ========================================================================== */

.dd-hero {
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.dd-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.6) 0%,
        rgba(0, 0, 0, 0.8) 100%
    );
    z-index: 1;
}

.dd-hero .et_pb_row,
.dd-hero-content {
    position: relative;
    z-index: 2;
}

.dd-hero h1 {
    font-size: clamp(1.75rem, 4vw, 3rem);
    margin-bottom: var(--space-md);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.dd-hero p {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    max-width: 600px;
    margin: 0 auto var(--space-xl);
}

.dd-hero-phone {
    display: inline-block;
    font-size: var(--font-size-h3);
    font-weight: 700;
    color: var(--color-primary);
    margin-top: var(--space-lg);
}

.dd-hero-phone a {
    color: var(--color-primary);
}

.dd-hero-phone a:hover {
    color: var(--color-primary-light);
    text-decoration: none;
}

/* ==========================================================================
   Cards
   ========================================================================== */

.dd-card {
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--space-xl);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.dd-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.dd-card h3 {
    margin-bottom: var(--space-md);
}

/* Divi blurb module as card - Divi 4 + Divi 5 */
.et_pb_blurb.dd-card .et_pb_blurb_container,
[data-type="blurb"].dd-card .et_pb_blurb_container {
    padding: var(--space-lg);
}

.et_pb_blurb.dd-card .et-pb-icon,
[data-type="blurb"].dd-card .et-pb-icon {
    color: var(--color-primary) !important;
    font-size: 48px !important;
}

/* ==========================================================================
   Value Props / Stats Section
   ========================================================================== */

.dd-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-xl);
    text-align: center;
}

.dd-stat-number {
    font-size: var(--font-size-h1);
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: var(--space-sm);
}

.dd-stat-label {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Number counter modules - Divi 4 + Divi 5 */
.et_pb_number_counter .percent p,
[data-type="number-counter"] .percent p {
    color: var(--color-primary) !important;
}

.et_pb_number_counter h3,
[data-type="number-counter"] h3 {
    color: var(--color-text-secondary) !important;
}

/* ==========================================================================
   CTA Banner
   ========================================================================== */

.dd-cta-banner,
.et_pb_section.dd-cta-banner {
    background-color: var(--color-primary) !important;
    text-align: center;
    padding: var(--space-2xl) var(--space-md);
}

.dd-cta-banner h2,
.dd-cta-banner p {
    color: var(--color-text-on-primary);
}

.dd-cta-banner .et_pb_button,
.dd-cta-banner [data-type="button"] a {
    background-color: var(--color-bg-dark) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-bg-dark) !important;
}

.dd-cta-banner .et_pb_button:hover,
.dd-cta-banner [data-type="button"] a:hover {
    background-color: var(--color-bg-elevated) !important;
    border-color: var(--color-bg-elevated) !important;
}

/* ==========================================================================
   Surcharge Notice
   ========================================================================== */

.dd-surcharge-notice {
    background-color: rgba(255, 152, 0, 0.1);
    border: 1px solid var(--color-warning);
    border-left: 4px solid var(--color-warning);
    border-radius: var(--border-radius-sm);
    padding: var(--space-md) var(--space-lg);
    color: var(--color-warning);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-2xl);
}

.dd-surcharge-notice strong {
    color: var(--color-warning);
}

/* ==========================================================================
   Forms
   ========================================================================== */

/* Forms - Divi 4 + Divi 5 contact form module */
.et_pb_contact_form_container,
[data-type="contact-form"],
.wpcf7 {
    background-color: var(--color-bg-card);
    border-radius: var(--border-radius);
    padding: var(--space-xl);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
textarea,
select,
.et_pb_contact_form input,
.et_pb_contact_form textarea,
.et_pb_contact_form select,
[data-type="contact-form"] input,
[data-type="contact-form"] textarea,
[data-type="contact-form"] select {
    background-color: var(--color-bg-elevated) !important;
    color: var(--color-text-primary) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--border-radius-sm) !important;
    padding: 0.75rem 1rem !important;
    font-size: var(--font-size-base);
    transition: border-color var(--transition-fast);
    width: 100%;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--color-primary) !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.2);
}

label {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-bottom: var(--space-xs);
    display: block;
}

::placeholder {
    color: #777 !important;
}

/* ==========================================================================
   Testimonials
   ========================================================================== */

/* Testimonials - Divi 4 + Divi 5 */
.et_pb_testimonial,
[data-type="testimonial"] {
    background-color: var(--color-bg-card) !important;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
}

.et_pb_testimonial_description p,
[data-type="testimonial"] p {
    color: var(--color-text-primary) !important;
}

.et_pb_testimonial_author,
[data-type="testimonial"] .et_pb_testimonial_author {
    color: var(--color-primary) !important;
    font-weight: 700;
}

.et_pb_testimonial_meta,
[data-type="testimonial"] .et_pb_testimonial_meta {
    color: var(--color-text-secondary) !important;
}

/* ==========================================================================
   Footer — Standalone
   ========================================================================== */

#main-footer {
    background-color: var(--color-bg-elevated);
    border-top: 3px solid var(--color-primary);
    flex-shrink: 0;
    margin-top: auto;
}

.dd-footer-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-lg) var(--space-md);
    text-align: center;
}

.dd-footer-content p {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin: 0 0 var(--space-sm);
}

.dd-footer-content a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}
.dd-footer-content a:hover {
    color: var(--color-primary-light);
}

.dd-footer-links {
    font-size: 12px !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 16px;
}
.dd-footer-links a {
    color: var(--color-text-secondary) !important;
    font-weight: 400 !important;
    white-space: nowrap;
}
.dd-footer-links a:hover {
    color: var(--color-primary) !important;
}
@media (max-width: 600px) {
    .dd-footer-links {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 12px;
    }
    .dd-footer-links a {
        font-size: 12px !important;
    }
}

/* iOS: Prevent auto-zoom on input focus (requires 16px minimum) */
@media screen and (max-width: 980px) {
    input[type="text"], input[type="email"], input[type="tel"],
    input[type="number"], input[type="search"], input[type="url"],
    input[type="password"], textarea, select {
        font-size: 16px !important;
    }
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

.dd-breadcrumbs {
    padding: var(--space-md) 0;
    font-size: var(--font-size-sm);
}

.dd-breadcrumbs ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.dd-breadcrumbs li {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-text-secondary);
}

.dd-breadcrumbs li::after {
    content: '/';
    color: var(--color-border);
}

.dd-breadcrumbs li:last-child::after {
    content: '';
}

.dd-breadcrumbs a {
    color: var(--color-text-secondary);
}

.dd-breadcrumbs a:hover {
    color: var(--color-primary);
}

.dd-breadcrumbs [aria-current="page"] {
    color: var(--color-text-primary);
    font-weight: 600;
}

/* ==========================================================================
   FAQ Accordion
   ========================================================================== */

.dd-faq-item {
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    margin-bottom: var(--space-md);
    overflow: hidden;
}

.dd-faq-item summary {
    padding: var(--space-lg);
    font-weight: 600;
    font-size: var(--font-size-lg);
    color: var(--color-text-heading);
    cursor: pointer;
    transition: background-color var(--transition-fast);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dd-faq-item summary::-webkit-details-marker {
    display: none;
}

.dd-faq-item summary::after {
    content: '+';
    font-size: 1.5rem;
    color: var(--color-primary);
    font-weight: 300;
    flex-shrink: 0;
    margin-left: var(--space-md);
    transition: transform var(--transition-base);
}

.dd-faq-item[open] summary::after {
    content: '−';
}

.dd-faq-item summary:hover {
    background-color: var(--color-bg-elevated);
}

.dd-faq-item .dd-faq-answer {
    padding: 0 var(--space-lg) var(--space-lg);
    color: var(--color-text-secondary);
    line-height: var(--line-height-base);
}

/* ==========================================================================
   Location / Map Section
   ========================================================================== */

.dd-map-container {
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.dd-map-container iframe {
    display: block;
    width: 100%;
    height: 350px;
    border: 0;
}

.dd-contact-info {
    background-color: var(--color-bg-card);
    border-radius: var(--border-radius);
    padding: var(--space-xl);
}

.dd-contact-info dt {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-xs);
}

.dd-contact-info dd {
    color: var(--color-text-primary);
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-lg);
    margin-left: 0;
}

.dd-phone-link {
    color: var(--color-primary);
    font-size: var(--font-size-h3);
    font-weight: 700;
}

.dd-phone-link:hover {
    color: var(--color-primary-light);
}

/* ==========================================================================
   Page Header (Inner Pages)
   ========================================================================== */

.dd-page-header {
    background-color: var(--color-bg-elevated);
    padding: var(--space-2xl) var(--space-md);
    text-align: center;
    border-bottom: 1px solid var(--color-border);
}

.dd-page-header h1 {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, var(--font-size-h1));
}

.dd-page-header p {
    color: var(--color-text-secondary);
    margin-top: var(--space-sm);
    max-width: var(--container-narrow);
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.dd-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-md);
}

.dd-container-narrow {
    max-width: var(--container-narrow);
    margin: 0 auto;
    padding: 0 var(--space-md);
}

.dd-section-padding {
    padding: var(--space-section) 0;
}

.dd-text-center { text-align: center; }
.dd-text-primary { color: var(--color-primary); }
.dd-text-secondary { color: var(--color-text-secondary); }

.dd-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-xl);
}

.dd-grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-xl);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 980px) {
    :root {
        --font-size-h1: 1.953rem;
        --font-size-h2: 1.563rem;
        --font-size-h3: 1.25rem;
        --space-section: 3rem;
    }

    .dd-hero {
        min-height: 400px;
    }
}

@media (max-width: 767px) {
    :root {
        --font-size-h1: 1.563rem;
        --font-size-h2: 1.25rem;
        --space-section: 2.5rem;
    }

    .dd-hero {
        min-height: 350px;
    }

    .dd-grid-2,
    .dd-grid-3 {
        grid-template-columns: 1fr;
    }

    .et_pb_button,
    [data-type="button"] a,
    .dd-btn {
        display: block;
        text-align: center;
        width: 100%;
    }
}

/* ==========================================================================
   Blog Posts - Full Width, No Sidebar, No Comments
   ========================================================================== */

/* Kill the sidebar on blog posts and pages */
#sidebar, .et_pb_widget_area, .et_right_sidebar #left-area,
.et_left_sidebar #left-area {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
}
#sidebar {
    display: none !important;
}
.et_right_sidebar #sidebar, .et_left_sidebar #sidebar {
    display: none !important;
}

/* Full width content area */
.et_right_sidebar #left-area, .et_left_sidebar #left-area,
#left-area {
    width: 100% !important;
    padding-right: 0 !important;
}

/* Hide comments section completely */
#comment-wrap, #respond, .comment-form, .comments_disabled,
#commentform, .et_pb_comments_module {
    display: none !important;
}

/* Blog post styling */
.single-post .entry-content {
    max-width: 800px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.7;
}
.single-post .entry-content h2 {
    margin-top: var(--space-2xl);
    color: var(--color-primary);
}
.single-post .entry-content h3 {
    margin-top: var(--space-xl);
}
.single-post .entry-content ul, .single-post .entry-content ol {
    padding-left: var(--space-lg);
    margin-bottom: var(--space-lg);
}
.single-post .entry-content li {
    margin-bottom: var(--space-sm);
}
.single-post .entry-content a {
    color: var(--color-primary);
    font-weight: 600;
}
.single-post .entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-lg) 0;
}
.single-post .entry-content table th,
.single-post .entry-content table td {
    padding: 10px;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}

/* Blog listing page — card design */
.dd-blog-card {
    display: block;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--space-xl);
    margin-bottom: var(--space-lg);
    text-decoration: none;
    transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}
.dd-blog-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    text-decoration: none;
}
.dd-blog-card h2 {
    color: var(--color-text-heading);
    font-size: var(--font-size-h3);
    margin: var(--space-sm) 0 var(--space-md);
    transition: color var(--transition-fast);
}
.dd-blog-card:hover h2 {
    color: var(--color-primary);
}
.dd-blog-meta {
    display: flex;
    gap: var(--space-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}
.dd-blog-card p {
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    line-height: 1.6;
    margin: 0 0 var(--space-md);
}
.dd-blog-read {
    color: var(--color-primary);
    font-weight: 600;
    font-size: var(--font-size-sm);
    transition: color var(--transition-fast);
}
.dd-blog-card:hover .dd-blog-read {
    color: var(--color-primary-light);
}

/* Hide Divi's default blog layout if it shows */
.blog .et_pb_post, .archive .et_pb_post { display: none; }

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
    body,
    #page-container {
        background: #fff;
        color: #000;
    }

    h1, h2, h3, h4 {
        color: #000;
    }

    .dd-hero::before,
    #main-header,
    #main-footer,
    .dd-cta-banner {
        display: none;
    }

    a {
        color: #000;
        text-decoration: underline;
    }

    a[href]::after {
        content: ' (' attr(href) ')';
        font-size: 0.8em;
    }
}

/* ==========================================================================
   Divi 5 Specific Enhancements
   ========================================================================== */

/*
 * Divi 5 Design Variables Bridge
 * Maps our CSS custom properties to Divi 5's variable system naming.
 * If Divi 5 Design Variables are configured in the admin, they will
 * cascade properly. Our :root vars act as fallbacks.
 */

/* Divi 5 semantic element defaults */
header[data-type="section"],
nav[data-type="section"],
footer[data-type="section"],
section[data-type="section"],
article[data-type="section"],
aside[data-type="section"] {
    color: var(--color-text-primary);
}

/* Divi 5 module wrapper styling */
[data-type="text"] {
    color: var(--color-text-primary);
}

[data-type="text"] h1,
[data-type="text"] h2,
[data-type="text"] h3,
[data-type="text"] h4 {
    color: var(--color-text-heading);
}

[data-type="text"] a {
    color: var(--color-primary);
}

/* Divi 5 image module */
[data-type="image"] {
    border-radius: var(--border-radius);
    overflow: hidden;
}

/* Divi 5 divider module */
[data-type="divider"] hr {
    border-color: var(--color-border);
}

/* Divi 5 toggle/accordion module */
[data-type="toggle"] {
    background-color: var(--color-bg-card);
    border-color: var(--color-border);
}

[data-type="toggle"] .et_pb_toggle_title {
    color: var(--color-text-heading);
}

[data-type="toggle"] .et_pb_toggle_content {
    color: var(--color-text-secondary);
}

/* Divi 5 tabs module */
[data-type="tabs"] .et_pb_tab_active a {
    color: var(--color-primary) !important;
    border-bottom-color: var(--color-primary) !important;
}

/* Divi 5 Visual Builder - prevent style interference while editing */
.et-fb-root-ancestor body,
.et-fb-root-ancestor #page-container {
    background-color: var(--color-bg-dark);
    color: var(--color-text-primary);
}