/*
 * Holdenim design guardrails.
 * Shared layout and typography constraints for front-end components.
 * This layer is intentionally opt-in/scoped to Holdenim components and must not
 * reset header/footer containers globally.
 */

body.hdn-design-guardrails {
    --hdn-color-indigo: #0f172a;
    --hdn-color-ivory: #f6f2ea;
    --hdn-color-gold: #b08d57;
    --hdn-color-leather: #8e4b2a;
    --hdn-color-muted: #526078;
    --hdn-canvas-max: 1440px;
    --hdn-canvas-gutter: clamp(1rem, 5vw, 4.5rem);
    --hdn-reading-max: 64ch;
    --hdn-section-gap: clamp(2.75rem, 6vw, 6rem);
    --hdn-footer-air: clamp(3rem, 6vw, 5rem);
    --hdn-focus-ring: 2px solid var(--hdn-color-gold);
    --hdn-shadow-soft: 0 28px 80px rgba(15, 23, 42, 0.12);
    --hdn-title-xl: clamp(3rem, 8vw, 8.5rem);
    --hdn-title-lg: clamp(2.45rem, 5.6vw, 6.2rem);
    --hdn-title-md: clamp(1.9rem, 3.4vw, 3.6rem);
    --hdn-text-base: clamp(1rem, 1.08vw, 1.12rem);
    --hdn-site-canvas-bg: var(--hdn-color-ivory);
    background-color: var(--hdn-site-canvas-bg);
}

body.hdn-design-guardrails:is(.hdn-marketing-page, .hdn-editorial-page, .hdn-support-page, .hdn-legal-page, .hdn-journal-page) {
    --hdn-site-canvas-bg: var(--hdn-story-bg, #f4efe5);
}

body.hdn-design-guardrails.hdn-guide-page {
    --hdn-site-canvas-bg: var(--hdn-story-bg, #f4efe5);
}

body.hdn-design-guardrails:is(.collection-page, .page-template-page-collection, .hdn-shorts-page, .page-template-page-shorts) {
    --hdn-site-canvas-bg: #f4f1e9;
}

body.hdn-design-guardrails:is(.hdn-woo-v2, .woocommerce, .woocommerce-page) {
    --hdn-site-canvas-bg: var(--hld-ivory-100, var(--hdn-color-ivory));
}

body.hdn-design-guardrails :where(#wrapper.site, #inner-wrap, #content.site, #content.site-content, .site-content, .content-area, .content-container.site-container) {
    background-color: var(--hdn-site-canvas-bg) !important;
}

body.hdn-design-guardrails :where(#primary.site-main, #main.site-main) {
    background-color: var(--hdn-site-canvas-bg);
}

body.hdn-design-guardrails :where(.hdn-canvas, .hdn-marketing-section, .hdn-marketing-final, .hdn-personalisation-widget) {
    width: min(var(--hdn-canvas-max), calc(100% - (var(--hdn-canvas-gutter) * 2)));
    margin-inline: auto;
}

body.hdn-design-guardrails main :where(h1, h2, h3, h4, h5, h6, p, li, a, button, label),
body.hdn-design-guardrails :where(.hdn-personalisation-widget, .woocommerce) :where(h1, h2, h3, h4, p, li, a, button, label) {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

body.hdn-design-guardrails :where(.hdn-marketing-shell, .hdn-personalisation-widget, .hdn-configurator, .woocommerce, .hdn-collection, .hdn-shorts, .hdn-accessories) :where(h1, h2, h3, h4) {
    max-width: min(100%, 18ch);
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    text-wrap: balance;
}

body.hdn-design-guardrails :where(.hdn-marketing-shell, .hdn-personalisation-widget, .hdn-configurator, .woocommerce, .hdn-collection, .hdn-shorts, .hdn-accessories) :where(p, li) {
    max-width: var(--hdn-reading-max);
}

body.hdn-design-guardrails main :where(code, pre, .sku, .product_meta, .hdn-technical-string) {
    overflow-wrap: anywhere;
    word-break: break-word;
}

body.hdn-design-guardrails :where(.hdn-media-frame, .hdn-marketing-media, .woocommerce-product-gallery__image, .woocommerce ul.products li.product a img) {
    overflow: hidden;
}

body.hdn-design-guardrails :where(.hdn-media-frame, .hdn-marketing-media) > img,
body.hdn-design-guardrails :where(.woocommerce-product-gallery__image img, .woocommerce ul.products li.product a img) {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.hdn-design-guardrails .hdn-process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

body.hdn-design-guardrails :where(.hdn-bottom-cta, .hdn-marketing-final, .hdn-personalisation-widget:not(.hdn-personalisation-widget--summary)) {
    margin-bottom: var(--hdn-footer-air);
}

body.hdn-design-guardrails :where(a, button, input, select, textarea, summary):focus-visible {
    outline: var(--hdn-focus-ring);
    outline-offset: 3px;
}

body.hdn-design-guardrails :where(.hdn-story-section, .hdn-marketing-section) {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(1.5rem, 4vw, 4.5rem);
    align-items: center;
}

@media (max-width: 1180px) {
    body.hdn-design-guardrails {
        --hdn-canvas-gutter: clamp(0.9rem, 4vw, 2rem);
        --hdn-footer-air: clamp(3rem, 5vw, 4rem);
        --hdn-title-xl: clamp(3rem, 11vw, 6.4rem);
        --hdn-title-lg: clamp(2.3rem, 8vw, 5rem);
    }

    body.hdn-design-guardrails :where(.hdn-story-section, .hdn-marketing-section) {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    body.hdn-design-guardrails {
        --hdn-canvas-gutter: 1rem;
        --hdn-section-gap: clamp(2rem, 8vw, 3.2rem);
        --hdn-footer-air: 3rem;
        --hdn-title-xl: clamp(2.8rem, 17vw, 5.2rem);
        --hdn-title-lg: clamp(2.25rem, 12vw, 4.1rem);
        --hdn-title-md: clamp(1.75rem, 8vw, 2.8rem);
    }

    body.hdn-design-guardrails main :where(
        .hdn-canvas,
        .hdn-marketing-section,
        .hdn-marketing-final,
        .hdn-personalisation-widget,
        .hdn-universe-unavailable,
        .hdn-editorial-hero,
        .hdn-legal-hero,
        .hdn-legal-nav,
        .hdn-legal-content-wrap
    ) {
        width: calc(100vw - 2rem);
        max-width: calc(100vw - 2rem);
        min-width: 0;
        box-sizing: border-box;
    }

    body.hdn-design-guardrails main :where(
        .hdn-configurator-page,
        .hdn-configurator-layout,
        .hdn-configurator-summary,
        .hdn-configurator-content,
        .hdn-personalisation-widget,
        .woocommerce,
        .products,
        .product
    ) > * {
        min-width: 0;
    }

    body.hdn-design-guardrails main :where(
        .hdn-configurator-page button,
        .hdn-configurator-page .btn-outline,
        .hdn-personalisation-widget__button,
        .hdn-universe-unavailable__cta,
        .hdn-legal-link,
        .woocommerce a.button,
        .woocommerce button.button,
        .woocommerce input.button
    ) {
        min-height: 44px;
    }
}