/**
 * HaveCN - Hyva Child Theme Custom Styles
 * Primary color: #c12725
 */

/* Primary color override */
.text-primary {
    color: #c12725;
}

.bg-primary {
    background-color: #c12725;
}

.border-primary {
    border-color: #c12725;
}

/* Focus ring with primary */
.focus\:ring-primary:focus {
    --tw-ring-color: #c12725;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw, 0 0 transparent);
}

.focus\:border-primary:focus {
    border-color: #c12725 !important;
}

.hover\:bg-primary:hover {
    background-color: #c12725;
}

.hover\:bg-primary\/90:hover {
    background-color: rgba(193, 39, 37, 0.9);
}

.hover\:text-primary:hover {
    color: #c12725;
}

/* Button primary */
.btn-primary {
    background-color: #c12725;
    color: white;
}
.btn-primary:hover {
    background-color: #a81f1e;
}

/* Footer specific */
.footer-main {
    background-color: #0f172a;
    color: #94a3b8;
}

.footer-copyright {
    background-color: #0a1120;
    border-top: 1px solid #1e293b;
}

/* Newsletter subscribe button */
.subscribe-btn {
    background-color: #2563eb;
    color: white;
}
.subscribe-btn:hover {
    background-color: #1d4ed8;
}

/* Homepage hero banner */
.hero-banner img {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================================
 * havecn Design System — Color Tokens (Target theme)
 * Used by hero section and new footer
 * ============================================================ */
:root {
    --color-on-surface-variant: #5a6061;
    --color-secondary:          #ac3525;
    --color-secondary-dim:      #9b291b;
    --color-on-secondary:       #fff7f6;
    --color-surface:            #f9f9f9;
    --color-surface-container-low:     #f2f4f4;
    --color-surface-container-lowest:  #ffffff;
    --color-surface-container:         #ebeeef;
    --color-inverse-surface:    #0c0f0f;
    --color-inverse-primary:    #ffffff;
    --color-outline-variant:    #adb3b4;
    --color-on-surface:         #2d3435;
    --color-outline:            #757c7d;
}

/* ============================================================
 * Hero Section — "Curated Style for the Modern Minimalist"
 * CMS Homepage block styles
 * ============================================================ */
.havecn-hero {
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-surface, #f9f9f9);
    padding: 3rem 1.5rem;
    text-align: center;
}

.havecn-hero__inner {
    max-width: 56rem;
    margin: 0 auto;
}

.havecn-hero__title {
    font-family: 'Manrope', sans-serif;
    font-size:clamp(2.5rem, 3vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: var(--color-on-surface, #2d3435);
    margin-bottom: 1.5rem;
}

.havecn-hero__subtitle {
    font-size: 1.125rem;
    color: var(--color-on-surface-variant, #5a6061);
    max-width: 42rem;
    margin: 0 auto 2.5rem;
    line-height: 1.7;
}

.havecn-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.havecn-hero__btn-primary {
    background-color: var(--color-secondary, #ac3525);
    color: var(--color-on-secondary, #fff7f6);
    padding: 1rem 2.5rem;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(172, 53, 37, 0.3);
    transition: background-color 0.25s ease, transform 0.15s ease;
    text-decoration: none;
    display: inline-block;
}
.havecn-hero__btn-primary:hover {
    background-color: var(--color-secondary-dim, #9b291b);
    transform: translateY(-1px);
}

.havecn-hero__btn-secondary {
    background-color: transparent;
    color: var(--color-on-surface, #2d3435);
    padding: 1rem 2.5rem;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 0.95rem;
    border: 1.5px solid var(--color-outline-variant, #adb3b4);
    cursor: pointer;
    transition: background-color 0.25s ease;
    text-decoration: none;
    display: inline-block;
}
.havecn-hero__btn-secondary:hover {
    background-color: var(--color-surface-container-low, #f2f4f4);
}

/* ============================================================
 * New Footer (havecn Target design)
 * ============================================================ */

/* Footer background */
.havecn-footer {
    background-color: #f2f4f4;
    padding-top: 4rem;
    padding-bottom: 2rem;
}

/* Footer column headings */
.havecn-footer__col-heading {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #111827;
    margin-bottom: 2rem;
}

/* Footer links */
.havecn-footer__link {
    display: block;
    font-size: 0.875rem;
    color: #4b5563;
    transition: color 0.2s ease;
    margin-bottom: 1rem;
    text-decoration: none;
}
.havecn-footer__link:hover {
    color: #ac3525;
}

/* Footer social icon buttons */
.havecn-footer__social-btn {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    border: 1px solid rgba(173, 179, 180, 0.4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #4b5563;
    transition: color 0.25s ease, border-color 0.25s ease;
    text-decoration: none;
}
.havecn-footer__social-btn:hover {
    color: #ac3525;
    border-color: #ac3525;
}
.havecn-footer__social-btn svg {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

/* Newsletter input group */
.havecn-footer__newsletter-wrap {
    position: relative;
    border-radius: 9999px;
    transition: box-shadow 0.2s ease;
}
.havecn-footer__newsletter-wrap:focus-within {
    box-shadow: 0 0 0 2px #adb3b4;
}
.havecn-footer__newsletter-input {
    width: 100%;
    background-color: #ffffff;
    border: none;
    border-radius: 9999px;
    padding: 1rem 4.5rem 1rem 1.5rem;
    font-size: 0.875rem;
    color: #2d3435;
    outline: none;
}
.havecn-footer__newsletter-input::placeholder {
    color: #adb3b4;
}
.havecn-footer__newsletter-btn {
    position: absolute;
    right: 0.25rem;
    top: 0.25rem;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background-color: #0c0f0f;
    color: #ffffff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}
.havecn-footer__newsletter-btn:hover {
    background-color: #ac3525;
}
.havecn-footer__newsletter-btn svg {
    width: 1.1rem;
    height: 1.1rem;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Bottom bar */
.havecn-footer__bottom {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(173, 179, 180, 0.25);
}

/* Currency / Language switcher (footer bottom bar) */
.havecn-footer__switcher {
    position: relative;
    display: inline-block;
}
.havecn-footer__switcher-btn {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #2d3435;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s ease;
}
.havecn-footer__switcher-btn:hover {
    color: #ac3525;
}
.havecn-footer__switcher-btn svg {
    width: 1rem;
    height: 1rem;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.2s ease;
}
.havecn-footer__switcher-btn.open svg {
    transform: rotate(180deg);
}
.havecn-footer__dropdown {
    position: absolute;
    bottom: calc(100% + 0.5rem);
    left: 0;
    min-width: 15rem;
    background: #ffffff;
    border: 1px solid rgba(173, 179, 180, 0.4);
    border-radius: 0.5rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    z-index: 50;
    overflow: hidden;
}
.havecn-footer__dropdown a,
.havecn-footer__dropdown button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.6rem 1rem;
    font-size: 0.8125rem;
    color: #2d3435;
    background: none;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
    text-decoration: none;
}
.havecn-footer__dropdown a:hover,
.havecn-footer__dropdown button:hover {
    background-color: #f2f4f4;
    color: #ac3525;
}

/* ============================================================
 * Navigation — MageWorx swatches.css overrides .hidden
 * with display:block !important, breaking the menu visibility.
 * Force it back to flex on large screens.
 * ============================================================ */
.navigation.hidden {
    display: flex !important;
}

/* ============================================================
 * Gallery fullscreen arrows — color override
 * text-[#c12725] JIT fallback for non-Tailwind environments
 * ============================================================ */
.text-\[\#c12725\] {
    color: #c12725 !important;
}

/* ============================================================
 * Cloudflare Turnstile / reCAPTCHA spacing
 * ============================================================ */
.g-recaptcha {
    margin-top: 0.9375rem;
	margin-bottom: 0.9375rem;
}

/* ============================================================
 * CLS Prevention
 * ============================================================ */

/* Hide Alpine.js x-cloak elements until Alpine initializes
 * Prevents FOUC (Flash of Unstyled Content) which causes layout shift */
[x-cloak] {
    display: none !important;
}

/* Desktop navigation menu — explicit font sizing to prevent CLS.
 * text-md is unreliable across Tailwind versions; define it here.
 * Match Manrope metrics in fallback to minimize FOUT reflow. */
.navigation .level-0 {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.875rem;       /* 14px — consistent with Tailwind text-sm */
    font-weight: 500;
    line-height: 1.5;
}

/* Mobile menu items */
.mobile-menu-items {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.9375rem;      /* 15px */
    font-weight: 500;
    line-height: 1.5;
}

/* ============================================================
 * Kinetic — Shared heading classes (used by CMS homepage & grid widget)
 * Defined here as fallback so they work even outside inline <style> blocks.
 * ============================================================ */
.kinetic-heading-lg {
    font-family: 'Manrope', sans-serif;
    font-size: 1.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: #ffffff;
}

@media (min-width: 768px) {
    .kinetic-heading-lg {
        font-size: 2.25rem;
    }
}

.kinetic-heading-xl {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.04em;
    line-height: 0.95;
    color: #ffffff;
}