/* ============================================================
   WILLECO – Elementor Overrides
   Targeted overrides for Elementor widgets to match design system.
   Keep this file lean – prefer Elementor Site Settings where possible.
   ============================================================ */

/* -------------------------------------------------------
   1. Elementor Buttons
   ------------------------------------------------------- */
.willeco-theme .elementor-button {
    font-family: var(--wc-font-body);
    font-weight: var(--wc-btn-weight);
    border-radius: var(--wc-btn-radius);
    padding: var(--wc-btn-pad);
    font-size: 15px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    transition: all var(--wc-duration-fast) var(--wc-ease);
}
.willeco-theme .elementor-button-wrapper .elementor-button {
    background-color: var(--wc-terracotta);
    color: #FFFFFF;
}
.willeco-theme .elementor-button-wrapper .elementor-button:hover {
    background-color: var(--wc-terracotta-hover);
    box-shadow: 0 4px 20px rgba(201, 69, 43, 0.25);
    transform: translateY(-1px);
}

/* -------------------------------------------------------
   2. Elementor Headings
   ------------------------------------------------------- */
.willeco-theme .elementor-heading-title {
    font-family: var(--wc-font-headline);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.01em;
}

/* -------------------------------------------------------
   3. Elementor Containers
   ------------------------------------------------------- */
.willeco-theme .e-con {
    --container-max-width: var(--wc-container-max);
}

/* -------------------------------------------------------
   4. Elementor Section (legacy)
   ------------------------------------------------------- */
.willeco-theme .elementor-section.elementor-section-boxed > .elementor-container {
    max-width: var(--wc-container-max);
}

/* -------------------------------------------------------
   5. Navigation / Menu Widget
   (Main header nav overrides moved to section 14c below)
   ------------------------------------------------------- */

/* -------------------------------------------------------
   6. Elementor Forms
   ------------------------------------------------------- */
.willeco-theme .elementor-form .elementor-field {
    font-family: var(--wc-font-body);
    font-size: 15px;
    padding: 14px 18px;
    border: 1px solid var(--wc-border);
    border-radius: 3px;
    background: var(--wc-surface);
    color: var(--wc-ink);
    transition: border-color var(--wc-duration-fast) var(--wc-ease);
}
.willeco-theme .elementor-form .elementor-field:focus {
    border-color: var(--wc-gold);
    outline: none;
    box-shadow: 0 0 0 3px var(--wc-gold-soft);
}
.willeco-theme .elementor-form .elementor-button {
    border-radius: var(--wc-btn-radius);
}

/* -------------------------------------------------------
   7. Elementor Icon List (Problem bullets)
   ------------------------------------------------------- */
.willeco-theme .elementor-icon-list-items {
    list-style: none;
}
.willeco-theme .elementor-icon-list-item {
    font-size: 17px;
    line-height: 1.65;
}

/* -------------------------------------------------------
   8. Footer Overrides
   ------------------------------------------------------- */
.willeco-theme footer {
    background: var(--wc-ink);
}
.willeco-theme footer .elementor-heading-title {
    font-family: var(--wc-font-body);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--wc-gold);
}
.willeco-theme footer a {
    color: rgba(248, 246, 243, 0.6);
}
.willeco-theme footer a:hover {
    color: var(--wc-paper);
}

/* -------------------------------------------------------
   9. Post / Archive Cards
   ------------------------------------------------------- */
.willeco-theme .elementor-post {
    border: 1px solid var(--wc-border);
    border-radius: 3px;
    overflow: hidden;
    transition: border-color var(--wc-duration-fast) var(--wc-ease),
                box-shadow var(--wc-duration) var(--wc-ease);
}
.willeco-theme .elementor-post:hover {
    border-color: var(--wc-border-strong);
    box-shadow: 0 16px 48px rgba(10, 15, 28, 0.06);
}
.willeco-theme .elementor-post__title a {
    font-family: var(--wc-font-headline);
    font-weight: 400;
    color: var(--wc-ink);
}
.willeco-theme .elementor-post__excerpt p {
    font-size: 16px;
    line-height: 1.65;
}

/* -------------------------------------------------------
   10. 404 Page
   ------------------------------------------------------- */
.willeco-theme .apx-404 {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--wc-section-pad) 28px;
    background: var(--wc-paper);
}
.willeco-theme .apx-404 h1 {
    font-size: 140px;
    font-style: italic;
    color: var(--wc-terracotta);
    line-height: 1;
    margin-bottom: 16px;
}
@media (max-width: 767px) {
    .willeco-theme .apx-404 h1 { font-size: 80px; }
}

/* -------------------------------------------------------
   11. Dark Section Elementor Overrides
   ------------------------------------------------------- */
.willeco-theme [data-settings*="dark"] .elementor-heading-title,
.willeco-theme .e-con[style*="background-color: var(--wc-ink)"] .elementor-heading-title,
.willeco-theme .apx-section--dark .elementor-heading-title,
.willeco-theme .apx-section--blue .elementor-heading-title {
    color: var(--wc-paper);
}

/* -------------------------------------------------------
   12. Image Treatment
   ------------------------------------------------------- */
.willeco-theme .elementor-image img {
    border-radius: 3px;
}

/* -------------------------------------------------------
   13. Product Page – Full-Width Section Breakout
   Sections inside a single Elementor text-editor widget
   need to break out of the boxed container to go edge-to-edge.
   ------------------------------------------------------- */
.willeco-theme .elementor-widget-text-editor > .elementor-widget-container > .apx-hero,
.willeco-theme .elementor-widget-text-editor > .elementor-widget-container > .apx-section,
.willeco-theme .elementor-widget-shortcode .elementor-shortcode > .apx-hero,
.willeco-theme .elementor-widget-shortcode .elementor-shortcode > .apx-section {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Keep inner content constrained via apx-container (already max-width: 1120px) */

/* Ensure pills display inline next to each other, not stacked */
.apx-hero__ctas,
.apx-cta-group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 32px;
}

/* Pill links need display:inline-block when inside text-editor */
.elementor-widget-container .apx-pill--primary,
.elementor-widget-container .apx-pill--ghost,
.elementor-widget-container .apx-pill--accent {
    display: inline-block;
    font-family: var(--wc-font-body);
    font-size: 15px;
    font-weight: var(--wc-btn-weight);
    padding: var(--wc-btn-pad);
    border-radius: var(--wc-btn-radius);
    text-decoration: none;
    transition: all var(--wc-duration-fast) var(--wc-ease);
    cursor: pointer;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.elementor-widget-container .apx-pill--primary {
    background: var(--wc-terracotta);
    color: #FFF;
}
.elementor-widget-container .apx-pill--primary:hover {
    background: var(--wc-terracotta-hover);
    box-shadow: 0 4px 20px rgba(201, 69, 43, 0.25);
    color: #FFF;
    transform: translateY(-1px);
}
.elementor-widget-container .apx-pill--ghost {
    background: transparent;
    color: var(--wc-paper);
    border: 1px solid rgba(248, 246, 243, 0.25);
}
.elementor-widget-container .apx-pill--ghost:hover {
    background: rgba(248, 246, 243, 0.08);
    border-color: rgba(248, 246, 243, 0.5);
    color: #FFF;
}
.elementor-widget-container .apx-pill--accent {
    background: var(--wc-terracotta);
    color: #FFF;
}
.elementor-widget-container .apx-pill--accent:hover {
    background: var(--wc-terracotta-hover);
    color: #FFF;
    transform: translateY(-1px);
}

/* Ghost pill in light sections needs dark text */
.apx-section--white .apx-pill--ghost,
.apx-section--light .apx-pill--ghost,
.apx-section--warm .apx-pill--ghost {
    color: var(--wc-ink);
    border-color: var(--wc-border-strong);
}
.apx-section--white .apx-pill--ghost:hover,
.apx-section--light .apx-pill--ghost:hover,
.apx-section--warm .apx-pill--ghost:hover {
    background: rgba(10, 15, 28, 0.04);
    color: var(--wc-ink);
}

/* Hide the duplicate page title from Hello Elementor */
.willeco-theme .page-content > .elementor > .elementor-section:only-child .elementor-widget-text-editor .apx-hero h1 ~ .entry-title,
.willeco-theme main > .page-header {
    display: none;
}

/* -------------------------------------------------------
   14. Header – Sticky + Visual Polish
   ------------------------------------------------------- */

/* Sticky positioning */
.willeco-theme header.elementor-location-header {
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Force design-system background over Elementor inline color */
.willeco-theme header.elementor-location-header .elementor-section {
    background-color: var(--wc-ink) !important;
    border-bottom: 1px solid rgba(248, 246, 243, 0);
    transition: border-color var(--wc-duration-fast) var(--wc-ease),
                box-shadow var(--wc-duration-fast) var(--wc-ease);
}

/* Scroll state — subtle border + shadow */
.willeco-theme header.elementor-location-header.is-scrolled .elementor-section {
    border-bottom-color: rgba(248, 246, 243, 0.06);
    box-shadow: 0 1px 24px rgba(10, 15, 28, 0.35);
}

/* -------------------------------------------------------
   14b. Header – Logo (CSS text replacement)
   ------------------------------------------------------- */
.willeco-theme header.elementor-location-header .elementor-widget-theme-site-logo img {
    display: none !important;
}

.willeco-theme header.elementor-location-header .elementor-widget-theme-site-logo .elementor-widget-container a {
    display: flex;
    align-items: center;
    height: 40px;
}

.willeco-theme header.elementor-location-header .elementor-widget-theme-site-logo .elementor-widget-container a::after {
    content: "W&Co";
    font-family: var(--wc-font-headline);
    font-size: 28px;
    font-weight: 400;
    font-style: italic;
    color: var(--wc-paper);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* -------------------------------------------------------
   14c. Header – Navigation Links
   Override Elementor's global color vars that make text invisible on dark bg.
   Elementor uses: .elementor-widget-nav-menu .elementor-nav-menu .elementor-item
   We need higher specificity + !important to beat that.
   ------------------------------------------------------- */
.willeco-theme .elementor-widget-nav-menu .elementor-nav-menu .elementor-item,
.willeco-theme .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item {
    font-family: var(--wc-font-headline) !important;
    font-weight: 400 !important;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(248, 246, 243, 0.75) !important;
    fill: rgba(248, 246, 243, 0.75) !important;
    transition: color var(--wc-duration-fast) var(--wc-ease);
}

.willeco-theme .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
.willeco-theme .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus,
.willeco-theme .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted,
.willeco-theme .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active {
    color: var(--wc-paper) !important;
    fill: var(--wc-paper) !important;
    opacity: 1;
}

/* Override Elementor pointer/underline color */
.willeco-theme .elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item::before,
.willeco-theme .elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item::after {
    background-color: var(--wc-terracotta) !important;
}

/* Dropdown submenu items */
.willeco-theme .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item,
.willeco-theme .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-sub-item {
    font-family: var(--wc-font-body) !important;
    font-weight: 400 !important;
    color: rgba(248, 246, 243, 0.7) !important;
}

.willeco-theme .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item:hover,
.willeco-theme .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-sub-item:hover {
    color: var(--wc-paper) !important;
    background: rgba(248, 246, 243, 0.04);
}

/* -------------------------------------------------------
   14d. Header – CTA Button (column 3)
   ------------------------------------------------------- */
.willeco-theme header.elementor-location-header .elementor-button-wrapper .elementor-button {
    background-color: var(--wc-terracotta) !important;
    font-family: var(--wc-font-body);
    font-size: 13px;
    padding: 12px 28px;
    border-radius: var(--wc-btn-radius);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    transition: background var(--wc-duration-fast) var(--wc-ease),
                box-shadow var(--wc-duration-fast) var(--wc-ease),
                transform var(--wc-duration-fast) var(--wc-ease);
}

.willeco-theme header.elementor-location-header .elementor-button-wrapper .elementor-button:hover {
    background-color: var(--wc-terracotta-hover) !important;
    box-shadow: 0 4px 16px rgba(201, 69, 43, 0.3);
    transform: translateY(-1px);
}

/* -------------------------------------------------------
   14e. Header – Desktop Dropdown Submenu
   ------------------------------------------------------- */
.willeco-theme header .elementor-nav-menu--main .sub-menu.elementor-nav-menu--dropdown {
    background: var(--wc-ink) !important;
    border: 1px solid rgba(248, 246, 243, 0.08);
    border-radius: 0 0 6px 6px;
    box-shadow: 0 8px 32px rgba(10, 15, 28, 0.4);
    padding: 8px 0;
}

/* -------------------------------------------------------
   14f. Header – Mobile: logo + burger side by side
   ------------------------------------------------------- */
@media (max-width: 1024px) {

    /* Force header row into a single flex line — no column stacking */
    .willeco-theme header.elementor-location-header .elementor-container {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }

    /* Logo column: shrink to fit content only */
    .willeco-theme header.elementor-location-header .elementor-column:first-child {
        width: auto !important;
        max-width: none !important;
        flex: 0 0 auto !important;
    }

    /* Nav column (burger): fill remaining space, push toggle right */
    .willeco-theme header.elementor-location-header .elementor-column:nth-child(2) {
        width: auto !important;
        flex: 1 1 auto !important;
        max-width: none !important;
    }

    /* Widget wraps inside header columns: no extra padding */
    .willeco-theme header.elementor-location-header .elementor-widget-wrap {
        padding: 0 !important;
    }

    /* Burger toggle: align to right of its column */
    .willeco-theme header .elementor-nav-menu--toggle {
        display: flex;
        justify-content: flex-end;
    }

    /* Compact header height on mobile */
    .willeco-theme header.elementor-location-header .elementor-section {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
}

@media (max-width: 767px) {

    /* Tighter side padding on mobile */
    .willeco-theme header.elementor-location-header .elementor-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Mobile dropdown menu panel */
    .willeco-theme header .elementor-nav-menu--dropdown {
        background: var(--wc-ink);
        border: 1px solid rgba(248, 246, 243, 0.06);
        border-radius: 0 0 6px 6px;
    }

    .willeco-theme header .elementor-nav-menu--dropdown a {
        color: var(--wc-paper);
        padding: 14px 24px;
        font-size: 15px;
        border-bottom: 1px solid rgba(248, 246, 243, 0.04);
    }

    /* BOOK MØDE — prominent CTA in mobile menu */
    .willeco-theme header .elementor-nav-menu--dropdown li:last-child a {
        background: var(--wc-terracotta);
        color: #FFFFFF;
        text-align: center;
        border-radius: var(--wc-btn-radius);
        margin: 12px 16px;
        padding: 14px 24px;
        font-weight: 600;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    .willeco-theme header .elementor-nav-menu--dropdown li:last-child a:hover {
        background: var(--wc-terracotta-hover);
    }
}

/* Hamburger icon color — all breakpoints */
.willeco-theme header .elementor-menu-toggle {
    color: var(--wc-paper) !important;
}

/* -------------------------------------------------------
   15. Full-width — edge-to-edge layout
   ------------------------------------------------------- */

/* Body background matches design — no white leakthrough */
body.willeco-theme {
    background-color: var(--wc-ink);
}

/* Never clip stretched sections — overflow must be visible on html/body */
html { overflow-x: unset; }
body.willeco-theme { overflow-x: unset; }

/* Full-width section containers: no side padding, truly edge-to-edge */
.willeco-theme .elementor-section-full_width > .elementor-container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Shortcode breakout sections — use margin technique, needs visible overflow */
.willeco-theme .elementor-widget-shortcode .elementor-shortcode > .apx-hero,
.willeco-theme .elementor-widget-shortcode .elementor-shortcode > .apx-section {
    position: static !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Instead: make the shortcode widget itself full-width within its column */
.willeco-theme .elementor-widget-shortcode {
    width: 100% !important;
}
.willeco-theme .elementor-widget-shortcode .elementor-widget-container {
    padding: 0 !important;
}

/* Empty spacer sections in header — zero height */
.willeco-theme header.elementor-location-header .elementor-section:not(:first-child) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
}

@media (max-width: 767px) {
    /* Custom section/hero content padding on mobile */
    .apx-container {
        padding-left: 16px;
        padding-right: 16px;
    }
}