/* MATJARI theme-owned storefront colour contract. */

/*
 * MATJARI storefront all-pages colour contract.
 * Keeps content, archives, search, errors and product journeys in the same
 * saved light/dark mode as the homepage.
 */

html[data-matjari-theme="light"] {
    --mtj-content-bg: var(--mtj-store-light-bg, #f7f7f8);
    --mtj-content-surface: var(--mtj-store-light-surface, #ffffff);
    --mtj-content-surface-2: #f6f1f3;
    --mtj-content-text: var(--mtj-store-light-text, #171717);
    --mtj-content-muted: var(--mtj-store-light-muted, #64748b);
    --mtj-content-border: var(--mtj-store-light-border, #e5e7eb);
    --mtj-content-accent: var(--mtj-store-light-primary, #c8102e);
    --mtj-content-shadow: rgba(17,24,39,.09);
}

html[data-matjari-theme="dark"] {
    --mtj-content-bg: var(--mtj-store-bg, #04131c);
    --mtj-content-surface: var(--mtj-store-surface, #08202d);
    --mtj-content-surface-2: var(--mtj-store-surface-alt, #0b3442);
    --mtj-content-text: var(--mtj-store-text, #f8fbff);
    --mtj-content-muted: var(--mtj-store-muted, #a8c0cc);
    --mtj-content-border: var(--mtj-store-border, #1a5368);
    --mtj-content-accent: var(--mtj-store-accent, #ff9f1c);
    --mtj-content-shadow: rgba(0,0,0,.36);
}

html[data-matjari-theme] body,
html[data-matjari-theme] .mtj-site,
html[data-matjari-theme] .mtj-main,
html[data-matjari-theme] .mtj-page,
html[data-matjari-theme] .mtj-single,
html[data-matjari-theme] .mtj-page-section,
html[data-matjari-theme] .mtj-page-content,
html[data-matjari-theme] .mtj-content-narrow {
    background-color: var(--mtj-content-bg);
    color: var(--mtj-content-text);
    border-color: var(--mtj-content-border);
}

html[data-matjari-theme] .mtj-page-header {
    background: linear-gradient(135deg, var(--mtj-content-surface), var(--mtj-content-surface-2));
    color: var(--mtj-content-text);
    border-bottom: 1px solid var(--mtj-content-border);
}

html[data-matjari-theme="dark"] .mtj-page-header {
    background:
        radial-gradient(circle at 82% 20%, var(--mtj-store-glow), transparent 34%),
        linear-gradient(135deg, var(--mtj-store-hero-1), var(--mtj-store-hero-2));
}

html[data-matjari-theme] :is(.mtj-card,.mtj-empty) {
    background-color: var(--mtj-content-surface);
    color: var(--mtj-content-text);
    border-color: var(--mtj-content-border);
    box-shadow: 0 14px 38px var(--mtj-content-shadow);
}

html[data-matjari-theme] :is(.mtj-page-content,.mtj-content-narrow,.mtj-card,.mtj-empty) :is(h1,h2,h3,h4,h5,h6,strong,b) {
    color: var(--mtj-content-text);
}

html[data-matjari-theme] :is(.mtj-page-content,.mtj-content-narrow,.mtj-card,.mtj-empty) :is(p,li,small,figcaption,.wp-block-post-excerpt) {
    color: var(--mtj-content-muted);
}

html[data-matjari-theme] :is(.mtj-page-content,.mtj-content-narrow,.mtj-card,.mtj-empty) a:not(.wp-element-button):not(.mtj-button) {
    color: var(--mtj-content-accent);
}

html[data-matjari-theme] :is(.mtj-page-content,.mtj-content-narrow) :is(
    table,
    .wp-block-table,
    blockquote,
    pre,
    code,
    .wp-block-code,
    .wp-block-preformatted,
    .wp-block-pullquote,
    .wp-block-search,
    .wp-block-comments,
    .comment-body,
    .navigation,
    .pagination
) {
    background-color: var(--mtj-content-surface);
    color: var(--mtj-content-text);
    border-color: var(--mtj-content-border);
}

html[data-matjari-theme] :is(.mtj-page-content,.mtj-content-narrow) :is(table,.wp-block-table table) :is(th,td) {
    color: var(--mtj-content-text);
    border-color: var(--mtj-content-border);
}

html[data-matjari-theme] :is(.mtj-page-content,.mtj-content-narrow) :is(input:not([type="submit"]):not([type="button"]),select,textarea) {
    background-color: var(--mtj-content-surface);
    color: var(--mtj-content-text);
    border: 1px solid var(--mtj-content-border);
}

html[data-matjari-theme] :is(.mtj-page-content,.mtj-content-narrow) :is(input,textarea)::placeholder {
    color: var(--mtj-content-muted);
    opacity: 1;
}

html[data-matjari-theme] :is(.mtj-page-content,.mtj-content-narrow) :is(hr,.wp-block-separator) {
    border-color: var(--mtj-content-border);
}

html[data-matjari-theme] :is(.nav-links,.page-numbers) {
    color: var(--mtj-content-text);
    border-color: var(--mtj-content-border);
}

html[data-matjari-theme] .page-numbers.current {
    background-color: var(--mtj-content-accent);
    color: #111827;
}

@media (max-width: 680px) {
    html[data-matjari-theme] .mtj-page-header {
        padding: 40px 0;
    }

    html[data-matjari-theme] .mtj-page-content > *:not(.matjari-page-rendered):not(.alignfull) {
        width: min(100% - 20px, var(--mtj-container));
    }
}

@media (prefers-reduced-motion: reduce) {
    html[data-matjari-theme] body,
    html[data-matjari-theme] body * {
        scroll-behavior: auto;
    }
}


/*
 * MATJARI storefront all-pages light contract ().
 * Removes navy/black islands from daylight mode and introduces clear,
 * colourful, high-contrast commerce surfaces.
 */

html[data-matjari-theme="light"] {
    --mtj-content-bg: #f6f8fb;
    --mtj-content-surface: #ffffff;
    --mtj-content-surface-2: #eef4fb;
    --mtj-content-text: #172033;
    --mtj-content-muted: #5b6474;
    --mtj-content-border: #d5deea;
    --mtj-content-accent: #b31632;
    --mtj-content-blue: #245fbd;
    --mtj-content-violet: #6d4bd3;
    --mtj-content-cyan: #087f9e;
    --mtj-content-green: #147a52;
    --mtj-content-amber: #8a5a00;
    --mtj-content-shadow: rgba(37,55,84,.10);
    color-scheme: light;
}

html[data-matjari-theme="light"] :is(body,.mtj-site,.mtj-main,.mtj-page,.mtj-single,.mtj-page-section,.mtj-page-content,.mtj-content-narrow) {
    background-color: var(--mtj-content-bg);
    color: var(--mtj-content-text);
}

html[data-matjari-theme="light"] .mtj-page-header {
    background:
        radial-gradient(circle at 88% 12%, rgba(109,75,211,.08), transparent 30%),
        radial-gradient(circle at 12% 0%, rgba(8,127,158,.08), transparent 27%),
        linear-gradient(135deg, #ffffff, #eef5fd);
    color: var(--mtj-content-text);
    border-color: var(--mtj-content-border);
}

html[data-matjari-theme="light"] :is(.mtj-card,.mtj-empty) {
    background: #ffffff;
    color: var(--mtj-content-text);
    border-color: var(--mtj-content-border);
    box-shadow: 0 14px 34px var(--mtj-content-shadow);
}

/* The footer remains part of daylight mode instead of becoming a navy island. */
html[data-matjari-theme="light"] .mtj-footer {
    background:
        radial-gradient(circle at 8% 0%, rgba(8,127,158,.08), transparent 28%),
        linear-gradient(135deg, #edf5fd, #f7effb);
    color: var(--mtj-content-text);
    border-top: 1px solid var(--mtj-content-border);
}

html[data-matjari-theme="light"] .mtj-footer :is(h1,h2,h3,h4,strong,b,a) {
    color: var(--mtj-content-text);
}

html[data-matjari-theme="light"] .mtj-footer :is(p,small,span) {
    color: var(--mtj-content-muted);
}

/*
 * MATJARI storefront colour-mode bridge ().
 * Unifies classic templates, Gutenberg content and Builder Pro internal pages
 * with the explicit data-matjari-theme switch. Saved per-block custom colours
 * still win because this file supplies inherited defaults rather than replacing
 * block-level custom properties.
 */

html[data-matjari-theme="light"] {
    color-scheme: light;
}

html[data-matjari-theme="dark"] {
    color-scheme: dark;
}

html[data-matjari-theme] body.matjari-global-storefront-skin,
html[data-matjari-theme] body.matjari-global-storefront-skin :where(
    .mtj-site,
    .mtj-main,
    .site-main,
    main,
    .mtj-page,
    .mtj-single,
    .mtj-page-section,
    .mtj-page-content,
    .mtj-content-narrow,
    .mtj-builder-pro-page-runtime,
    .matjari-page-rendered
) {
    background-color: var(--mtj-store-bg, var(--mtj-content-bg));
    color: var(--mtj-store-text, var(--mtj-content-text));
    border-color: var(--mtj-store-border, var(--mtj-content-border));
}

/* Inner pages use the same unified dark background contract. */
html[data-matjari-theme="dark"] body.matjari-global-storefront-skin :where(
    .mtj-main,
    .site-main,
    main,
    .mtj-page-content,
    .mtj-content-narrow,
    .mtj-builder-pro-page-runtime
) {
    background-color: var(--mtj-store-bg, #04131c);
    color: var(--mtj-store-text, #f8fbff);
}

html[data-matjari-theme] .mtj-page-content > .mtj-builder-pro-page-runtime,
html[data-matjari-theme] .mtj-builder-pro-page-runtime > .mtjbp-document {
    width: 100%;
    max-width: none;
    background: var(--mtj-store-bg, var(--mtj-content-bg));
}

/* --------------------------------------------------------------------------
 * Gutenberg and classic WordPress content
 * ----------------------------------------------------------------------- */

html[data-matjari-theme] :where(.mtj-page-content, .mtj-content-narrow) :where(
    .wp-block-group,
    .wp-block-columns,
    .wp-block-column,
    .wp-block-media-text,
    .wp-block-query,
    .wp-block-post-template > li,
    .wp-block-latest-posts > li,
    .wp-block-comments,
    .comment-body,
    details,
    dialog
) {
    color: inherit;
    border-color: var(--mtj-content-border);
}

html[data-matjari-theme="dark"] :where(.mtj-page-content, .mtj-content-narrow) :where(
    .has-matjari-white-background-color,
    .has-matjari-light-background-color,
    .has-white-background-color,
    .has-base-background-color
) {
    background-color: var(--mtj-content-surface);
}

html[data-matjari-theme="dark"] :where(.mtj-page-content, .mtj-content-narrow) :where(
    .has-matjari-black-color,
    .has-black-color,
    .has-contrast-color
) {
    color: var(--mtj-content-text);
}

html[data-matjari-theme="dark"] :where(.mtj-page-content, .mtj-content-narrow) :where(
    .wp-block-search__input,
    .wp-block-post-comments-form input:not([type="submit"]),
    .wp-block-post-comments-form textarea,
    .comment-form input:not([type="submit"]),
    .comment-form textarea,
    select
) {
    background: var(--mtj-content-surface);
    color: var(--mtj-content-text);
    border-color: var(--mtj-content-border);
}

html[data-matjari-theme="dark"] :where(.mtj-page-content, .mtj-content-narrow) :where(
    .wp-block-table.is-style-stripes tbody tr:nth-child(odd),
    table tbody tr:nth-child(odd)
) {
    background-color: color-mix(in srgb, var(--mtj-content-surface-2) 72%, transparent);
}

html[data-matjari-theme="dark"] :where(.mtj-page-content, .mtj-content-narrow) :where(
    .wp-block-button__link:not(.has-background),
    .wp-block-search__button,
    .wp-block-post-comments-form input[type="submit"],
    .comment-form input[type="submit"]
) {
    background-color: var(--mtj-store-primary);
    color: var(--mtj-store-on-primary);
    border-color: transparent;
}

html[data-matjari-theme="dark"] :where(.mtj-page-content, .mtj-content-narrow) :where(
    .wp-block-button.is-style-outline .wp-block-button__link,
    .is-style-outline > .wp-block-button__link
) {
    background: transparent;
    color: var(--mtj-content-accent);
    border-color: currentColor;
}


@media (prefers-reduced-motion: reduce) {
    html[data-matjari-theme] *,
    html[data-matjari-theme] *::before,
    html[data-matjari-theme] *::after {
        transition: none;
        animation: none;
    }
}