/**
 * Theme Name: Sembré
 * Theme URI: https://gravitydesignworks.com/
 * Author: Gravity DesignWorks, Inc.
 * Author URI: https://gravitydesignworks.com/
 * Description: Custom block theme for Sembré Layered Chia Pudding.
 * Version: 0.1.19
 * Requires at least: 6.6
 * Tested up to: 7.1
 * Requires PHP: 7.4
 * License: GNU General Public License v2 or later
 * License URI: https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: sembre
 */

/* =========================================================
   SEMBRÉ GLOBALS
   ========================================================= */

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

/*
 * Compatibility aliases for blocks created while Inspiro was active.
 * These preserve legacy preset slugs without cluttering the new Sembré
 * editor palette. New content should use the named Sembré/Chia/flavor colors
 * defined in theme.json.
 */
:root {
    --wp--preset--color--primary: var(--wp--preset--color--chia-dark);
    --wp--preset--color--secondary: var(--wp--preset--color--dulce-de-leche);
    --wp--preset--color--header-footer: var(--wp--preset--color--chia-dark);
    --wp--preset--color--tertiary: var(--wp--preset--color--chia-gray);
    --wp--preset--color--lightgrey: #d9d9d9;
    --wp--preset--color--foreground: var(--wp--preset--color--chia-dark);
    --wp--preset--color--background: var(--wp--preset--color--white);
    --wp--preset--color--light-background: var(--wp--preset--color--white);
}

.has-primary-color { color: var(--wp--preset--color--primary) !important; }
.has-primary-background-color { background-color: var(--wp--preset--color--primary) !important; }
.has-primary-border-color { border-color: var(--wp--preset--color--primary) !important; }

.has-secondary-color { color: var(--wp--preset--color--secondary) !important; }
.has-secondary-background-color { background-color: var(--wp--preset--color--secondary) !important; }
.has-secondary-border-color { border-color: var(--wp--preset--color--secondary) !important; }

.has-header-footer-color { color: var(--wp--preset--color--header-footer) !important; }
.has-header-footer-background-color { background-color: var(--wp--preset--color--header-footer) !important; }
.has-header-footer-border-color { border-color: var(--wp--preset--color--header-footer) !important; }

.has-tertiary-color { color: var(--wp--preset--color--tertiary) !important; }
.has-tertiary-background-color { background-color: var(--wp--preset--color--tertiary) !important; }
.has-tertiary-border-color { border-color: var(--wp--preset--color--tertiary) !important; }

.has-lightgrey-color { color: var(--wp--preset--color--lightgrey) !important; }
.has-lightgrey-background-color { background-color: var(--wp--preset--color--lightgrey) !important; }
.has-lightgrey-border-color { border-color: var(--wp--preset--color--lightgrey) !important; }

.has-foreground-color { color: var(--wp--preset--color--foreground) !important; }
.has-foreground-background-color { background-color: var(--wp--preset--color--foreground) !important; }
.has-foreground-border-color { border-color: var(--wp--preset--color--foreground) !important; }

.has-background-color { color: var(--wp--preset--color--background) !important; }
.has-background-background-color { background-color: var(--wp--preset--color--background) !important; }
.has-background-border-color { border-color: var(--wp--preset--color--background) !important; }

.has-light-background-color { color: var(--wp--preset--color--light-background) !important; }
.has-light-background-background-color { background-color: var(--wp--preset--color--light-background) !important; }
.has-light-background-border-color { border-color: var(--wp--preset--color--light-background) !important; }

/*
 * WordPress applies the global blockGap to direct children of .wp-site-blocks.
 * That spacing is useful inside Gutenberg content, but at the site-template
 * level it creates visible 20px seams between header → main and main → footer.
 * Reset only those top-level structural transitions. Inner block margins,
 * padding, and blockGap controls remain untouched and fully editable.
 */
.wp-site-blocks > * + * {
    margin-block-start: 0 !important;
}

/* =========================================================
   HEADER
   ========================================================= */

.sembre-site-header {
    --sembre-sticky-background: var(--wp--preset--color--chia-dark);
    --sembre-sticky-text: var(--wp--preset--color--white);
    --sembre-sticky-opacity: 96%;
    --sembre-sticky-blur: 8px;
    --sembre-sticky-shadow: 0 4px 18px rgba(0, 0, 0, 0.14);
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--wp--preset--color--chia-dark) 72%, transparent) 0%, transparent 100%);
    transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, backdrop-filter 0.25s ease;
}

.sembre-site-header.is-scrolled {
    background: color-mix(in srgb, var(--sembre-sticky-background) var(--sembre-sticky-opacity), transparent);
    color: var(--sembre-sticky-text);
    box-shadow: var(--sembre-sticky-shadow);
    backdrop-filter: blur(var(--sembre-sticky-blur));
}

/* Sticky colors intentionally override only the visible desktop/header menu
 * and hamburger trigger. The responsive overlay keeps its own Gutenberg
 * overlay background/text settings. */
.sembre-site-header.is-scrolled nav.sembre-primary-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
.sembre-site-header.is-scrolled nav.sembre-primary-nav .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-item__content,
.sembre-site-header.is-scrolled .wp-block-navigation__responsive-container-open {
    color: var(--sembre-sticky-text);
}

.admin-bar .sembre-site-header {
    top: 32px;
}

/* Header height and spacing now live on the Header Layout Group block so
 * Gutenberg's Dimensions panel can edit them directly. */
.sembre-header-inner {
    box-sizing: border-box;
}

/* Independent logo block. Each instance stores its own image and dimensions,
 * so a footer logo no longer changes when the header logo is replaced. */
.wp-block-sembre-logo.sembre-logo {
    display: flex;
    justify-content: var(--sembre-logo-justify, flex-start);
    align-items: center;
    box-sizing: border-box;
}

.wp-block-sembre-logo .sembre-logo-link {
    display: inline-flex;
    line-height: 0;
}

.wp-block-sembre-logo img {
    display: block;
    width: var(--sembre-logo-width, 150px);
    max-width: 100%;
    max-height: var(--sembre-logo-max-height, none);
    height: auto;
    object-fit: contain;
}

.wp-block-sembre-logo .sembre-logo-placeholder {
    display: inline-block;
    padding: 10px 12px;
    border: 1px dashed currentColor;
    line-height: 1.2;
    opacity: 0.7;
}

.sembre-site-header .wp-block-navigation-item__content {
    text-decoration: none;
}

/* Additional Navigation inspector controls are exposed by the theme while
 * keeping the native WordPress Navigation block, named-menu `ref`, submenu,
 * and responsive overlay behavior. */
nav.sembre-primary-nav .wp-block-navigation__container {
    gap: var(--sembre-nav-gap, 24px);
}

nav.sembre-primary-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
nav.sembre-primary-nav .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-item__content {
    padding: var(--sembre-nav-link-py, 6px) var(--sembre-nav-link-px, 0);
    font-size: var(--sembre-nav-font-size, 16px);
    font-weight: var(--sembre-nav-font-weight, 400);
    letter-spacing: var(--sembre-nav-letter-spacing, 0);
    text-transform: var(--sembre-nav-text-transform, none);
    text-underline-offset: var(--sembre-nav-underline-offset, 4px);
    text-decoration-thickness: var(--sembre-nav-underline-thickness, 1px);
    transition: color 0.18s ease, opacity 0.18s ease, text-decoration-color 0.18s ease;
}

nav.sembre-primary-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
nav.sembre-primary-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible,
nav.sembre-primary-nav .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-item__content:hover,
nav.sembre-primary-nav .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-item__content:focus-visible {
    color: var(--sembre-nav-hover-color, currentColor);
    text-decoration-line: var(--sembre-nav-hover-decoration, none);
    text-decoration-thickness: var(--sembre-nav-underline-thickness, 1px);
    text-underline-offset: var(--sembre-nav-underline-offset, 4px);
    opacity: 0.78;
}

nav.sembre-primary-nav .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content,
nav.sembre-primary-nav .wp-block-navigation__container > .current-menu-ancestor > .wp-block-navigation-item__content {
    color: var(--sembre-nav-active-color, currentColor);
}

nav.sembre-primary-nav .wp-block-navigation__responsive-container-open {
    color: var(--sembre-hamburger-color, currentColor);
}

nav.sembre-primary-nav .wp-block-navigation__responsive-container-open svg {
    width: var(--sembre-hamburger-size, 28px);
    height: var(--sembre-hamburger-size, 28px);
}

/* Desktop dropdown presentation. Keep it out of the mobile overlay so the
 * responsive menu can remain a simple nested list rather than a floating box. */
@media (min-width: 783px) {
    nav.sembre-primary-nav .wp-block-navigation__submenu-container {
        min-width: var(--sembre-submenu-min-width, 220px);
        padding: var(--sembre-submenu-container-padding, 6px);
        box-sizing: border-box;
        background: var(--sembre-submenu-background, #fff);
        color: var(--sembre-submenu-text-color, #3c3e3f);
        border: var(--sembre-submenu-border-width, 0) solid var(--sembre-submenu-border-color, #7a7e7f);
        border-radius: var(--sembre-submenu-radius, 0);
        box-shadow: var(--sembre-submenu-shadow, 0 10px 28px rgba(0, 0, 0, 0.14));
        overflow: visible;
    }

    nav.sembre-primary-nav .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container {
        top: calc(100% + var(--sembre-submenu-offset, 8px));
    }

    /* Transparent hover bridge keeps an intentionally offset dropdown from
     * closing while the pointer crosses the visual gap below its parent. */
    nav.sembre-primary-nav .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container::before {
        content: "";
        position: absolute;
        right: 0;
        bottom: 100%;
        left: 0;
        height: var(--sembre-submenu-offset, 8px);
    }

    nav.sembre-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item {
        position: relative;
        width: 100%;
    }

    nav.sembre-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
        width: 100%;
        box-sizing: border-box;
        padding: var(--sembre-submenu-link-py, 12px) var(--sembre-submenu-link-px, 18px);
        color: var(--sembre-submenu-text-color, #3c3e3f);
        background: transparent;
        font-size: var(--sembre-submenu-font-size, 15px);
        font-weight: var(--sembre-submenu-font-weight, 500);
        letter-spacing: var(--sembre-submenu-letter-spacing, 0);
        line-height: 1.35;
        text-transform: var(--sembre-submenu-text-transform, none);
        text-decoration-line: var(--sembre-submenu-text-decoration, none);
        white-space: nowrap;
        opacity: 1;
        transition: background-color 0.18s ease, color 0.18s ease;
    }

    nav.sembre-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
    nav.sembre-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
        color: var(--sembre-submenu-hover-text-color, #fff);
        background: var(--sembre-submenu-hover-background, #3a3c3e);
        text-decoration-line: var(--sembre-submenu-text-decoration, none);
        opacity: 1;
    }

    nav.sembre-primary-nav .wp-block-navigation__submenu-container > .wp-block-navigation-item + .wp-block-navigation-item::before {
        content: "";
        display: var(--sembre-submenu-divider-display, none);
        position: absolute;
        z-index: 1;
        top: 0;
        right: var(--sembre-submenu-link-px, 18px);
        left: var(--sembre-submenu-link-px, 18px);
        border-top: 1px solid color-mix(in srgb, var(--sembre-submenu-text-color, #3c3e3f) 18%, transparent);
        pointer-events: none;
    }
}

@media (max-width: 782px) {
    .admin-bar .sembre-site-header {
        top: 46px;
    }

    .wp-block-sembre-logo img {
        width: var(--sembre-logo-mobile-width, var(--sembre-logo-width, 132px));
    }

    /* Force the saved Mobile Menu palette onto WordPress' responsive overlay.
     * Core can emit its own text/background utility classes here, so the theme
     * values intentionally win inside the open overlay. */
    nav.sembre-primary-nav .wp-block-navigation__responsive-container.is-menu-open {
        background: var(--sembre-mobile-background, #fff) !important;
        color: var(--sembre-mobile-text-color, #000) !important;
    }

    nav.sembre-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
        padding: var(--sembre-mobile-padding-y, 32px) var(--sembre-mobile-padding-x, 28px);
        box-sizing: border-box;
    }

    nav.sembre-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
        padding: 0;
    }

    nav.sembre-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
        gap: var(--sembre-mobile-item-gap, 18px);
        align-items: flex-start !important;
        width: 100%;
    }

    nav.sembre-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
    nav.sembre-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label,
    nav.sembre-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
        color: var(--sembre-mobile-text-color, #000) !important;
    }

    nav.sembre-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
        padding: 0;
        font-size: var(--sembre-mobile-font-size, 20px);
        font-weight: var(--sembre-mobile-font-weight, 600);
        line-height: 1.25;
        opacity: 1;
    }

    /* A submenu parent is a flex item in core Navigation, unlike a normal link.
     * Reset its alignment so Products does not center itself and its children. */
    nav.sembre-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu,
    nav.sembre-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container,
    nav.sembre-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
        align-items: flex-start !important;
        justify-content: flex-start !important;
        text-align: left !important;
    }

    nav.sembre-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu {
        width: 100%;
    }

    nav.sembre-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
        position: static;
        min-width: 0;
        width: 100%;
        padding: calc(var(--sembre-mobile-item-gap, 18px) / 2) 0 0 var(--sembre-mobile-submenu-indent, 18px);
        margin: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        color: inherit;
    }

    nav.sembre-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
        color: var(--sembre-mobile-text-color, #000) !important;
        background: transparent;
        font-size: var(--sembre-mobile-submenu-font-size, 17px);
        font-weight: inherit;
    }

    /* Keep the close control visible when a light overlay is selected. */
    nav.sembre-primary-nav .wp-block-navigation__responsive-container-close {
        color: var(--sembre-mobile-text-color, #000) !important;
    }

    nav.sembre-primary-nav .wp-block-navigation__responsive-container-close svg,
    nav.sembre-primary-nav .wp-block-navigation__responsive-container-close svg path {
        fill: currentColor !important;
    }

    /* header.js clones the current header logo into the open mobile overlay. */
    .sembre-mobile-menu-logo {
        display: block;
        width: var(--sembre-logo-mobile-width, 132px);
        max-width: 55vw;
        height: auto;
        margin: 0 0 28px;
        object-fit: contain;
    }
}

/* =========================================================
   PRODUCT CONTENT COMPONENTS
   ========================================================= */

/* Equal-height desktop dividers used between product callout columns. */
.sembre-product-divider {
    flex-basis: 1px !important;
    min-width: 1px !important;
    padding: 0 !important;
    margin: 0 20px !important;
    align-self: stretch;
}

@media (max-width: 782px) {
    /* Rotate the desktop divider treatment into a full-width horizontal rule. */
    .sembre-product-divider {
        position: relative;
        flex-basis: 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        height: 2px !important;
        min-height: 2px !important;
        margin: 20px 0 !important;
        padding: 0 !important;
    }

    .sembre-product-divider > * {
        display: none !important;
    }

    .sembre-product-divider::after {
        content: "";
        display: block;
        width: 100%;
        height: 2px;
        background: linear-gradient(90deg, #c68a1b, #f6d879, #b97814, #f5d77b, #c68a1b);
    }

    /* Product hero mobile crop/typography. These are intentionally scoped to
     * .sembre-product-hero so ordinary Cover blocks remain untouched. */
    .wp-block-cover.sembre-product-hero {
        height: 320px !important;
        min-height: 320px !important;
        padding: 0 16px !important;
        overflow: hidden;
    }

    .sembre-product-hero .wp-block-cover__image-background {
        object-position: 72% 60% !important;
        transform: translateY(50px);
    }

    .sembre-product-hero .wp-block-columns {
        margin-top: 0 !important;
        width: 100%;
        height: 100%;
        align-items: center !important;
    }

    .sembre-product-hero .wp-block-column:first-child {
        flex-basis: 58% !important;
    }

    .sembre-product-hero .wp-block-column:last-child {
        flex-basis: 42% !important;
    }

    .sembre-product-hero .wp-block-column:first-child > p:first-child {
        font-size: 11px !important;
        line-height: 1.1 !important;
    }

    .sembre-product-hero h1 {
        font-size: 32px !important;
        line-height: 0.88 !important;
    }

    .sembre-product-hero .wp-block-column:first-child > p:last-child {
        max-width: 150px;
        font-size: 12px !important;
        line-height: 1.25 !important;
    }
}

/* =========================================================
   ARTICLE / BLOG SHELLS
   ========================================================= */

.sembre-reading-shell {
    padding-top: 135px;
    padding-bottom: 80px;
}

.sembre-reading-shell .wp-block-post-title {
    margin-top: 0;
}

.sembre-post-featured-image img {
    width: 100%;
    height: auto;
}

/* =========================================================
   FOOTER
   ========================================================= */

.sembre-site-footer a {
    color: inherit;
}

.sembre-site-footer a:hover,
.sembre-site-footer a:focus-visible {
    opacity: 0.82;
}

.sembre-footer-map iframe {
    display: block;
    width: 100%;
    border: 0;
}

.sembre-footer-bottom {
    border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 28%, transparent);
}

/* =========================================================
   SMALL BLOCK-SYSTEM CLEANUPS
   ========================================================= */

.wp-block-image img {
    max-width: 100%;
}

.wp-block-group.is-layout-grid > * {
    min-width: 0;
}

/* Gutenberg's grid already equalizes row height. This keeps direct card
 * children able to consume that row height without stretching inner content. */
.wp-block-group.is-layout-grid > .wp-block-group,
.wp-block-group.is-layout-grid > .wp-block-column {
    height: 100%;
    box-sizing: border-box;
}



/* =========================================================
   SEMBRÉ TEXT TREATMENTS
   ========================================================= */

.has-sembre-gold-text {
    background-image: var(--wp--preset--gradient--sembre-gold) !important;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
}

.has-sembre-gold-text a {
    background-image: inherit;
    background-size: inherit;
    background-repeat: inherit;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
}

.has-sembre-text-rotation {
    transform: rotate(var(--sembre-text-rotation, 0deg));
    transform-origin: center center;
}

/* Editor preview: the Gutenberg BlockList wrapper is separate from the actual
 * RichText element, so apply the gradient to editable text descendants while
 * the custom preview class lives on that wrapper. */
.editor-styles-wrapper .sembre-gold-text-preview .block-editor-rich-text__editable,
.editor-styles-wrapper .sembre-gold-text-preview .wp-block-site-title,
.editor-styles-wrapper .sembre-gold-text-preview .wp-block-post-title {
    background-image: var(--wp--preset--gradient--sembre-gold) !important;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
}


/* =========================================================
   SEMBRÉ GOLD DIVIDER
   ========================================================= */

.wp-block-sembre-gold-divider,
.sembre-gold-divider {
    display: flex;
    box-sizing: border-box;
    justify-content: var(--sembre-divider-justify, center);
}

.sembre-gold-divider.is-horizontal {
    width: 100%;
}

/*
 * True viewport bleed for the custom divider.
 *
 * Do not rely on Gutenberg's root-padding variables here. Depending on where a
 * dynamic block is rendered, WordPress can leave the block inside the padded
 * constrained layout even when alignfull is selected. Center the wrapper on
 * the viewport instead, then size it to 100vw. This makes "Full width" mean
 * actual browser-edge to browser-edge while remaining independent of the
 * theme's current root padding value.
 */
.sembre-gold-divider.is-horizontal.is-full-bleed,
.sembre-gold-divider.is-horizontal.alignfull {
    position: relative;
    left: 50%;
    width: 100vw;
    max-width: none !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
}

.sembre-gold-divider.is-horizontal .sembre-gold-divider__svg,
.sembre-gold-divider.is-horizontal .sembre-gold-divider__preview {
    display: block;
    width: var(--sembre-divider-length, 100%);
    height: var(--sembre-divider-thickness, 2px);
    flex: 0 0 auto;
}

.sembre-gold-divider.is-vertical {
    width: 100%;
}

.sembre-gold-divider.is-vertical .sembre-gold-divider__svg,
.sembre-gold-divider.is-vertical .sembre-gold-divider__preview {
    display: block;
    width: var(--sembre-divider-thickness, 2px);
    height: var(--sembre-divider-length, 160px);
    max-height: 100%;
    flex: 0 0 auto;
}

.sembre-gold-divider.has-rounded-ends .sembre-gold-divider__svg,
.sembre-gold-divider.has-rounded-ends .sembre-gold-divider__preview {
    border-radius: 999px;
    overflow: hidden;
}