/* ==========================================================================
   Components — Layout (header / footer / floating actions / home overrides)
   Extracted from inline blade styles. Loaded after responsive.css.
   Selectors are intentionally specific to avoid leaking into unrelated nodes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HEADER MOBILE — toggle button reset
   -------------------------------------------------------------------------- */
#btn-mobile_menu {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   HEADER MOBILE-SIDEBAR — close button reset
   -------------------------------------------------------------------------- */
.et-popup-wrapper .et-close-popup {
    background: none;
    border: 0;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   HEADER DESKTOP — account column padding
   -------------------------------------------------------------------------- */
.header-account-col {
    padding-inline-start: 30px;
}

/* --------------------------------------------------------------------------
   FOOTER MAP — embedded iframe reset
   -------------------------------------------------------------------------- */
.map-embed {
    border: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* --------------------------------------------------------------------------
   HOME OVERRIDES — absolute header on homepage only
   -------------------------------------------------------------------------- */
body.page-home .header-bottom-wrapper {
    position: absolute;
}

/* --------------------------------------------------------------------------
   FOOTER COPYRIGHT (legacy variant — used where <x-copyright variant=...>
   is rendered with .copyright class)
   -------------------------------------------------------------------------- */
footer .copyright {
    text-align: center;
    padding: 15px 0;
    font-size: 14px;
    color: #595959; /* AA on white ≈5.93:1 (was #888 = 3.54:1) */
}

footer .copyright p {
    margin: 0;
    line-height: 1.6;
}

footer .copyright a {
    color: #12ca93;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s ease-in-out;
    position: relative;
}

footer .copyright a:hover {
    text-decoration: none;
    color: #12ca93;
    text-shadow: 0 0 4px rgba(18, 202, 147, 0.3), 0 0 7px rgba(18, 202, 147, 0.3), 0 0 10px rgba(18, 202, 147, 0.3);
}

/* --------------------------------------------------------------------------
   HEADER — adaptive logo + transition zone (600-991px)
   -------------------------------------------------------------------------- */
.et_b_header-logo img,
.header-main-wrapper .et_b_header-logo-img {
    width: clamp(100px, 12vw, 200px);
    height: auto;
    max-width: 100%;
}
@media (min-width: 600px) and (max-width: 991.98px) {
    .header-top-wrapper { padding-block: var(--space-2xs); }
    .mobile-header-wrapper .header-main { padding-inline: var(--container-pad); }
    #menu-secondary-menu { gap: var(--space-2xs); flex-wrap: wrap; row-gap: var(--space-xs); }
}

/* Mobile menu popup — full-screen on tiny, capped sidebar on tablets */
#mobile-menu-popup {
    width: min(380px, 100vw);
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

/* --------------------------------------------------------------------------
   FOOTER — adaptive padding/spacing
   -------------------------------------------------------------------------- */
footer.container-fluid,
footer {
    padding-block: var(--space-xl);
}
footer > .row { row-gap: var(--space-md); }
footer .footer-logo {
    max-width: clamp(120px, 18vw, 200px);
    height: auto;
    margin-inline: auto;
}
footer .list-unstyled li + li { margin-top: var(--space-2xs); }
footer .ratio.ratio-16x9 { max-width: 100%; }

/* Smooth 600-767 transition: 2-col instead of single-col cramping */
@media (min-width: 600px) and (max-width: 767.98px) {
    footer .col-md-6 { flex: 0 0 50%; max-width: 50%; }
}

/* On wide viewports keep map col tighter so it doesn't stretch oddly */
@media (min-width: 1700px) {
    footer .col-lg-3 { padding-inline: var(--space-lg); }
}

/* --------------------------------------------------------------------------
   A11Y CONTRAST — WCAG 2.1 AA via brand tokens (responsive.css :root)
   Single source of truth: --brand-green-cta, --brand-green-hover, --text-muted-aa.
   -------------------------------------------------------------------------- */

/* Header top: white text on accessible green bg */
.header-top-wrapper,
.header-top { background-color: var(--brand-green-cta) !important; }

.header-top-wrapper a,
.header-top-wrapper .nav-link,
.header-top-wrapper .contact-info {
    color: #fff !important;
    font-weight: 500;
}
.header-top-wrapper a:hover,
.header-top-wrapper a:focus-visible { color: #f0f7e3 !important; }
.header-top-wrapper .dropdown-menu .dropdown-item { color: var(--text-strong) !important; }

/* Muted text — was #888 (3.54:1), now WCAG-AA */
.product-categories .list-group-item a,
.products-page-cats,
.products-page-cats a,
time.entry-date,
.meta-post time,
.meta-post .entry-date,
.post-meta time { color: var(--text-muted-aa) !important; }

/* All primary CTA buttons — :is() collapses 6+ selectors into one rule */
:is(.btn-primary, .btn.bg-success, .add_to_cart_button, .ajax_add_to_cart, .button.btn-checkout, .contact form .btn) {
    background-color: var(--brand-green-cta) !important;
    border-color: var(--brand-green-cta) !important;
    color: #fff !important;
    font-weight: 600;
}
:is(.btn-primary, .btn.bg-success, .add_to_cart_button, .ajax_add_to_cart, .button.btn-checkout, .contact form .btn):hover {
    background-color: var(--brand-green-hover) !important;
    border-color: var(--brand-green-hover) !important;
    color: #fff !important;
}