/* ==========================================================================
   OAKON CUSTOM CSS FOR GUTENBERG BLOCK EDITOR
   Premium German Industrial Style Revamp
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BRAND PALETTE & GUTENBERG PRESET OVERRIDES
   -------------------------------------------------------------------------- */
:root {
    /* Brand Color Design Tokens */
    --oak-graphite-black: #1F2933;
    --oak-industrial-blue: #0B2E4A;
    --oak-metallic-silver: #A7B0BA;
    --oak-champagne-gold: #C89B3C;
    --oak-light-gray: #F5F6F8;

    /* Theme Preset Mapping (Standardizes editor colors if supported) */
    --wp--preset--color--graphite-black: var(--oak-graphite-black);
    --wp--preset--color--industrial-blue: var(--oak-industrial-blue);
    --wp--preset--color--metallic-silver: var(--oak-metallic-silver);
    --wp--preset--color--champagne-gold: var(--oak-champagne-gold);
    --wp--preset--color--light-gray: var(--oak-light-gray);
}

/* Custom Palette Utility Classes (Fallback for non-theme.json environments) */
.has-graphite-black-color { color: var(--oak-graphite-black) !important; }
.has-graphite-black-background-color { background-color: var(--oak-graphite-black) !important; }

.has-industrial-blue-color { color: var(--oak-industrial-blue) !important; }
.has-industrial-blue-background-color { background-color: var(--oak-industrial-blue) !important; }

.has-metallic-silver-color { color: var(--oak-metallic-silver) !important; }
.has-metallic-silver-background-color { background-color: var(--oak-metallic-silver) !important; }

.has-champagne-gold-color { color: var(--oak-champagne-gold) !important; }
.has-champagne-gold-background-color { background-color: var(--oak-champagne-gold) !important; }

.has-light-gray-color { color: var(--oak-light-gray) !important; }
.has-light-gray-background-color { background-color: var(--oak-light-gray) !important; }

/* --------------------------------------------------------------------------
   2. LAYOUT & PRECISION HELPERS (WordPress Block Editor Adaptations)
   -------------------------------------------------------------------------- */

/* Spacing & Padding - Enforces modern, responsive breathing room */
.oak-section-padding {
    padding-block: clamp(4rem, 8vw, 8rem) !important;
    padding-inline: clamp(1.5rem, 5vw, 4rem) !important;
}

.oak-card-padding {
    padding-block: clamp(2rem, 4vw, 3rem) !important;
    padding-inline: clamp(1.5rem, 3vw, 2.5rem) !important;
}

/* Layout Grid - Responsive columns using CSS grid without breaking desktop grid */
.oak-responsive-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) !important;
    gap: 2rem !important;
}

/* Enforce border-box model and reset margin for custom grid items */
.oak-responsive-grid > * {
    margin: 0 !important;
    inline-size: 100% !important;
}

/* Industrial Border & Card Aesthetics */
.oak-card {
    border: 1px solid var(--oak-metallic-silver) !important;
    background-color: #ffffff !important;
    border-radius: 2px !important; /* Sharp, engineered corners (German Industrial style) */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.oak-card:hover {
    border-color: var(--oak-industrial-blue) !important;
    box-shadow: 0 8px 24px rgba(11, 46, 74, 0.08) !important;
}

/* Divider Class */
.oak-divider-thin {
    border-block-end: 1px solid var(--oak-metallic-silver) !important;
    margin-block: 2.5rem !important;
    inline-size: 100% !important;
    height: 0 !important;
}

/* German Accent Heading Bar */
.oak-heading-accent {
    position: relative !important;
    padding-inline-start: 1rem !important;
    border-inline-start: 4px solid var(--oak-industrial-blue) !important;
}

/* --------------------------------------------------------------------------
   3. CTA & BUTTON MICRO-ANIMATIONS (Warm Champagne Gold)
   -------------------------------------------------------------------------- */
.wp-block-button__link.oak-cta-gold {
    background-color: var(--oak-champagne-gold) !important;
    color: var(--oak-graphite-black) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-size: 0.9rem !important;
    padding: 0.9rem 2.2rem !important;
    border-radius: 2px !important; /* Engineered appearance */
    border: 1px solid var(--oak-champagne-gold) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 2px 5px rgba(200, 155, 60, 0.25) !important;
}

.wp-block-button__link.oak-cta-gold:hover,
.wp-block-button__link.oak-cta-gold:focus {
    background-color: transparent !important;
    color: var(--oak-champagne-gold) !important;
    border-color: var(--oak-champagne-gold) !important;
    box-shadow: 0 6px 15px rgba(200, 155, 60, 0.35) !important;
    transform: translateY(-2px) !important;
}

.wp-block-button__link.oak-cta-gold:active {
    transform: translateY(0) !important;
}

/* --------------------------------------------------------------------------
   4. RESPONSIVE TYPOGRAPHY & OVERFLOW PREVENTIONS
   -------------------------------------------------------------------------- */
/* Force all headings to wrap cleanly, only breaking long words if they exceed the container width */
h1, h2, h3, h4, h5, h6, 
.wp-block-heading, 
.wp-block-cover__inner-container h1, 
.wp-block-cover__inner-container h2 {
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    white-space: normal !important;
}

/* Fluid scale down for very large text elements on mobile screens */
@media (max-width: 768px) {
    /* Responsive H1 / Large Hero headings */
    h1, 
    .has-xx-large-font-size, 
    .wp-block-heading.has-xx-large-font-size,
    .wp-block-cover__inner-container h1 {
        font-size: clamp(2rem, 9vw, 3.2rem) !important;
        line-height: 1.15 !important;
        letter-spacing: -0.02em !important;
    }

    h2, 
    .has-x-large-font-size, 
    .wp-block-heading.has-x-large-font-size,
    .wp-block-cover__inner-container h2 {
        font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
        line-height: 1.2 !important;
    }

    /* Adjust padding for mobile to gain container space */
    .oak-section-padding {
        padding-block: clamp(2.5rem, 6vw, 4rem) !important;
        padding-inline: 1rem !important;
    }

    /* Force columns inside covers/groups to wrap and not horizontal scroll */
    .wp-block-columns {
        flex-wrap: wrap !important;
    }
}

/* --------------------------------------------------------------------------
   5. SPECTRA (UAGB) SPECIAL OVERRIDES FOR OAKON BRANDING
   -------------------------------------------------------------------------- */
/* Force OAKON color palette on Spectra Info Boxes */
.wp-block-uagb-info-box .uagb-ifb-title {
    color: var(--oak-graphite-black) !important;
}

/* On dark wrappers (like the hero cover), ensure titles are white */
.eb-wrapper-outer .wp-block-uagb-info-box .uagb-ifb-title,
.uagb-block-o0ctcrhh .uagb-ifb-title {
    color: #ffffff !important;
}

.wp-block-uagb-info-box .uagb-ifb-desc {
    color: var(--oak-graphite-black) !important;
}

/* On dark wrappers, ensure descriptions use Metallic Silver */
.eb-wrapper-outer .wp-block-uagb-info-box .uagb-ifb-desc {
    color: var(--oak-metallic-silver) !important;
}

/* Style the circular icons to OAKON Industrial Blue */
.wp-block-uagb-info-box .uagb-iconbox-icon-wrap {
    background-color: var(--oak-light-gray) !important;
    border: 1px solid var(--oak-metallic-silver) !important;
}

.wp-block-uagb-info-box .uagb-iconbox-icon-wrap svg {
    fill: var(--oak-industrial-blue) !important;
}

/* Force OAKON borders, shadows and colors on Contact Info Cards */
.uagb-block-mg8uhzdg, 
.uagb-block-iaahluiy, 
.uagb-block-fxqztpwx {
    border: 1px solid var(--oak-metallic-silver) !important;
    border-radius: 6px !important; /* Soft, balanced corner like original */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.uagb-block-mg8uhzdg:hover, 
.uagb-block-iaahluiy:hover, 
.uagb-block-fxqztpwx:hover {
    border-color: var(--oak-industrial-blue) !important;
    box-shadow: 0 8px 24px rgba(11, 46, 74, 0.08) !important;
}

/* Force OAKON Champagne Gold on Spectra Form Submit Button */
.wp-block-uagb-forms .uagb-forms-main-submit-button-wrap button.uagb-forms-main-submit-button {
    background-color: var(--oak-champagne-gold) !important;
    color: var(--oak-graphite-black) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    border-radius: 4px !important;
    border: 1px solid var(--oak-champagne-gold) !important;
    box-shadow: 0 2px 5px rgba(200, 155, 60, 0.25) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.wp-block-uagb-forms .uagb-forms-main-submit-button-wrap button.uagb-forms-main-submit-button:hover {
    background-color: transparent !important;
    color: var(--oak-champagne-gold) !important;
    border-color: var(--oak-champagne-gold) !important;
    box-shadow: 0 6px 15px rgba(200, 155, 60, 0.35) !important;
}

/* --------------------------------------------------------------------------
   6. ESSENTIAL BLOCKS (EB) OVERRIDES FOR OAKON BRANDING
   -------------------------------------------------------------------------- */
/* Global Variables for Essential Blocks */
:root {
    --eb-global-primary-color: var(--oak-industrial-blue) !important;
    --eb-global-heading-color: var(--oak-graphite-black) !important;
    --eb-global-text-color: var(--oak-graphite-black) !important;
    --eb-global-background-color: var(--oak-light-gray) !important;
    --eb-global-button-text-color: var(--oak-graphite-black) !important;
}

/* Force OAKON color on EB Advanced Headings */
.eb-advance-heading-wrapper .eb-ah-title span, 
.eb-advance-heading-wrapper .first-title,
.eb-advance-heading-wrapper .second-title,
.eb-advance-heading-wrapper .third-title {
    color: var(--oak-graphite-black) !important;
}

/* For Headings in Dark Hero Sections (specifically scoped to dark backgrounds) */
.eb-wrapper-outer.has-background[style*="background-color:#1f2933"] .eb-ah-title span,
.eb-wrapper-outer.has-background[style*="background-color:#1f2933"] .second-title,
.eb-wrapper-outer.has-background[style*="background-color:#1f2933"] .third-title,
.eb-wrapper-outer[style*="background-color:#1f2933"] .eb-cia-title {
    color: #ffffff !important;
}

.eb-wrapper-outer .eb-parent-wrapper .eb-advance-heading-wrapper .first-title {
    color: var(--oak-champagne-gold) !important; /* Gold subtitle */
}

.eb-wrapper-outer .eb-cia-wrapper .eb-cia-description {
    color: var(--oak-metallic-silver) !important;
}

/* Force OAKON colors on EB Subtitles */
.eb-advance-heading-wrapper .eb-ah-subtitle {
    color: var(--oak-graphite-black) !important;
}

.eb-wrapper-outer .eb-parent-wrapper .eb-advance-heading-wrapper .eb-ah-subtitle {
    color: #ffffff !important;
}

/* Style EB CTA buttons to OAKON Champagne Gold */
.eb-cia-wrapper .eb-cia-button {
    background-color: var(--oak-champagne-gold) !important;
    color: var(--oak-graphite-black) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    border-radius: 4px !important;
    border: 1px solid var(--oak-champagne-gold) !important;
    transition: all 0.25s ease !important;
}

.eb-cia-wrapper .eb-cia-button:hover {
    background-color: transparent !important;
    color: var(--oak-champagne-gold) !important;
    border-color: var(--oak-champagne-gold) !important;
}

/* Style EB Info Box containers as OAKON cards */
.eb-infobox-wrapper {
    border: 1px solid var(--oak-metallic-silver) !important;
    background-color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.3s ease !important;
}

.eb-parent-wrapper:hover .eb-infobox-wrapper {
    border-color: var(--oak-industrial-blue) !important;
    box-shadow: 0 8px 24px rgba(11, 46, 74, 0.08) !important;
}

.eb-infobox-wrapper .title {
    color: var(--oak-graphite-black) !important;
}

.eb-infobox-wrapper .description {
    color: var(--oak-graphite-black) !important;
}

/* Force circular icons to Industrial Blue */
.eb-infobox-wrapper .icon-img-wrapper svg,
.eb-infobox-wrapper .eb-infobox-icon svg {
    fill: var(--oak-industrial-blue) !important;
}

/* --------------------------------------------------------------------------
   7. NATIVE GUTENBERG BLOCKS OVERRIDES FOR OAKON BRANDING
   -------------------------------------------------------------------------- */
/* Remove default theme borders from columns */
.wp-block-columns,
.wp-block-column {
    border: none !important;
    box-shadow: none !important;
}

/* Style cards inside native columns */
.wp-block-column.has-background {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.wp-block-column.has-background:hover {
    box-shadow: 0 12px 32px rgba(11, 46, 74, 0.08) !important;
    transform: translateY(-4px) !important;
}

/* Force OAKON CTA button styling on native buttons */
.wp-block-button.oak-cta-gold .wp-block-button__link {
    background-color: var(--oak-champagne-gold) !important;
    color: var(--oak-graphite-black) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    border: 1px solid var(--oak-champagne-gold) !important;
    border-radius: 4px !important;
    padding: 12px 30px !important;
    box-shadow: 0 2px 5px rgba(200, 155, 60, 0.25) !important;
    transition: all 0.25s ease !important;
}

.wp-block-button.oak-cta-gold .wp-block-button__link:hover {
    background-color: transparent !important;
    color: var(--oak-champagne-gold) !important;
    border-color: var(--oak-champagne-gold) !important;
    box-shadow: 0 6px 15px rgba(200, 155, 60, 0.35) !important;
    transform: translateY(-1px) !important;
}

/* Ensure native image block matches premium styling */
.wp-block-image img {
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
}
.oak-card .wp-block-image img {
    border-radius: 0px !important; /* Keep 3D valve renders floating nicely */
}