/*
Theme Name: NS Bioproducts
Theme URI:
Author:
Author URI:
Description: Custom child theme of Blockbase for NS Bioproducts.
Template: blockbase
Requires at least: 6.1
Requires PHP: 5.7
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blockbase-nsproducts
*/

html, body {
    max-width: 100%;
    overflow-x: hidden;
}
header.wp-block-template-part {
    position: sticky;
    top: 0;
    z-index: 9999;
}

footer.wp-block-template-part {
    margin-top: 0;
}

/* Blockbase's own _forms.scss styles these same elements (border, radius,
   padding, background, color) from --wp--custom--form--* tokens, but never
   sets a font-size — --wp--custom--form--font-size exists in theme.json's
   custom settings only as a declared value, with nothing in the compiled
   CSS reading it. Add the missing wiring here rather than in theme.json,
   since theme.json can only ever declare the token, not consume it. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea {
    font-size: var(--wp--custom--form--font-size);
    line-height: var(--wp--custom--form--line-height);
}

/* Contact Form 7 renders a bare <input type="submit">, which never picks up
   Blockbase's own button styling (that only targets .wp-element-button /
   .wp-block-button__link — Gutenberg's own button block). Point it at the
   same --wp--custom--button--* tokens by hand so it stays visually in sync
   with every other button on the site instead of drifting on its own. */
input.wpcf7-submit {
    /* Browsers give type=submit its own native widget chrome, which
       silently overrides author padding/sizing unless this is turned off —
       without it, the padding below is ignored and the button shrinks to
       whatever tiny box the platform default renders. */
    appearance: none;
    -webkit-appearance: none;
    display: inline-block;
    cursor: pointer;
    /* Diverges from --wp--custom--button--color--background (primary navy,
       shared by every other button site-wide) — this one's meant to be gold
       per the contact page mockup, without changing that shared token. */
    background-color: var(--wp--preset--color--secondary);
    /* Not --wp--custom--button--color--text: that resolves through
       --wp--custom--color--background -> --wp--preset--color--background,
       and this theme's palette has no "background" slug (only "base"), so
       the chain breaks and the browser falls back to inherited black text. */
    color: var(--wp--preset--color--base);
    border: var(--wp--custom--button--border--width) var(--wp--custom--button--border--style) var(--wp--custom--button--border--color);
    border-radius: var(--wp--custom--button--border--radius);
    font-weight: bold;
    font-size: var(--wp--custom--button--typography--font-size);
    line-height: var(--wp--custom--button--typography--line-height);
    padding-top: calc(var(--wp--custom--button--spacing--padding--top) + var(--wp--custom--button--border--width));
    padding-bottom: calc(var(--wp--custom--button--spacing--padding--bottom) + var(--wp--custom--button--border--width));
    padding-left: calc(var(--wp--custom--button--spacing--padding--left) + var(--wp--custom--button--border--width));
    padding-right: calc(var(--wp--custom--button--spacing--padding--right) + var(--wp--custom--button--border--width));

    &:hover {
        /* The shared hover token is secondary/gold too (it's meant to flip
           *from* primary on every other button) — since this button's base
           is already gold, that would be a no-op. Flip to primary instead. */
        background-color: var(--wp--preset--color--primary);
        color: var(--wp--preset--color--base);
        border-color: var(--wp--custom--button--hover--border--color);
    }

    &.wpcf7-submit {
        padding-top: var(--wp--custom--button--spacing--padding--top);
    padding-right: var(--wp--custom--button--spacing--padding--right);
    padding-bottom: var(--wp--custom--button--spacing--padding--bottom);
    padding-left: var(--wp--custom--button--spacing--padding--left);
    }
}

.wpcf7 {
    .wpcf7-form {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    .field-label {
        display: none;
    }
    .wpcf7-response-output,
    .wpcf7-not-valid-tip {
        font-size: var(--wp--custom--form--font-size);
    }
    .form-row {
        max-width: 100%;
        display: flex;
        flex-direction: row;
        gap: 15px;

        /* flex-basis alone isn't enough: with shrink disabled (or even at
           its default 1), a flex item still won't shrink below its content's
           min-content size unless min-width is reset — and <input size="40">
           has a fairly wide intrinsic min-size. Without this, whichever
           field has the widest native input balloons past its share and
           squeezes the other column. */
        & > * {
            flex: 1 1 0;
            min-width: 0;
        }

        .wpcf7-form-control-wrap {
            display: block;
            width: 100%;
        }

        input,
        textarea {
            width: 100%;
            max-width: 100%;
        }
    }
}

.wp-block-accordion-item {
    /* Core hides the panel with display:none on [inert], which can't be
       transitioned. Switch to a CSS-grid height animation instead: the item
       becomes the grid, its row for the panel animates between 0fr and 1fr,
       and the panel clips its own content while that row is collapsing. */
    display: grid;
    grid-template-rows: auto 0fr;
    margin-top: 0;

    .wp-block-accordion-heading {
        border-bottom: 1px solid #ccc;
    }
    /* An open item's own card (background + shadow, below) already reads as
       a visual break, so the divider above it — belonging to the *previous*
       item's heading — is redundant and clashes with the rounded corners.
       :has() lets us select that previous item directly, which a plain
       sibling combinator can't do (they only look forward). */
    &:has(+ .wp-block-accordion-item.is-open) .wp-block-accordion-heading {
        border-bottom-color: transparent;
    }
    .wp-block-accordion-heading__toggle-icon {
        align-items: center;
        display: flex;
        height: 1.4em;
        justify-content: center;
        width: 1.4em;
        border: 1px solid #333;
        border-radius: 999px;

        /* The "+" glyph's own font metrics never land dead-center inside the
           circle (its ink isn't symmetric within its line box), so flexbox
           can only center the invisible text box around it, not the visible
           mark itself. Hide the glyph and draw the plus as two bars instead —
           geometry-based centering instead of font-metric-based. The is-open
           rule below hides the vertical bar to turn this into a minus (and
           cancels core's own 45deg rotation, which otherwise turns the
           now-single bar diagonal instead of leaving it as a flat "-").
           font-size:0 would also shrink the box itself (height/width below
           are in em, relative to this same element), so the glyph is instead
           pushed out of view with text-indent, which doesn't touch sizing. */
        position: relative;
        overflow: hidden;
        text-indent: 200%;
        white-space: nowrap;

        &::before, &::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 10px;
            height: 2px;
            background: currentColor;
            transform: translate(-50%, -50%);
        }
        &::after {
            transform: translate(-50%, -50%) rotate(90deg);
        }
    }
    &.is-open {
            grid-template-rows: auto 1fr;
            box-shadow: var(--wp--preset--shadow--deep);
            background: #fff;

            .wp-block-accordion-heading .wp-block-accordion-heading__toggle {
                padding-bottom: 0 !important;
            }

            .wp-block-accordion-heading {
                border-bottom-color: transparent;
                padding-bottom: 0 !important;
            }

            .wp-block-accordion-heading__toggle-icon {
                transform: none !important;

                &::after {
                    opacity: 0;
                }
            }
    }
    .wp-block-accordion-panel {
        overflow: hidden;
        min-height: 0;
        margin-top: 15px;

        /* The block editor sets fixed inline padding on this element, and
           margin-top above adds further space of its own — neither shrinks
           with the grid row above (margin especially: it's outside the
           box entirely, so overflow:hidden can't touch it either). Left
           alone they leave a visible gap even at grid-template-rows: 0fr.
           Zero both out while closed. */
        &[inert], &[aria-hidden="true"] {
            display: block;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            margin-top: 0 !important;
        }
    }
}

@media (prefers-reduced-motion: no-preference) {
    .wp-block-accordion-item {
        transition: grid-template-rows 0.3s ease-out;
    }
    .wp-block-accordion-panel {
        transition: padding 0.3s ease-out, margin 0.3s ease-out;
    }
    .wp-block-accordion-heading {
        transition: border-color 0.3s ease-out;
    }
    .wp-block-accordion-heading__toggle-icon::after {
        transition: opacity 0.2s ease-in-out;
    }
}

@media (max-width: 599px) {
    .wp-site-blocks .site-header .wp-block-site-logo {
        flex-basis: 100%;
        margin-bottom: 0.5rem !important;
        margin-top: 0.5rem !important;
        text-align: left;

        display: flex;
        justify-content: start;

      
    }

    .site-footer-container .wp-block-group {
        justify-content: center;
        gap: 0.5rem;
    }

    .wp-block-cover.factory-background {
        padding-bottom: 140px !important;
        .wp-block-cover__image-background {
            width: 190vw !important;
            transform: translateX(-40px) !important;
        }
    }
}

.wp-block-cover.offset-background {
    & > .wp-block-cover__image-background {
        @media (min-width: 768px) {
            transform: translateX(-25vw);
            border-radius: 0 30px 30px 0;

        }
    }
}
@media (max-width: 768px) {
    .mm-image-markers__frame {
        border-radius: 3vw !important;
    }
}

.wp-block-navigation__overlay-container {
    margin-top: 130px;
    border-radius: 15px !important;
    box-shadow: var(--wp--preset--shadow--deep);
overflow: hidden;
margin-left: -5px !important;
    margin-right: -5px !important;

& > .wp-block-group {
    min-height: 250px !important;
    
    }
}

.wp-block-navigation__responsive-container-close svg, .wp-block-navigation__responsive-container-open svg {
    fill: currentColor;
    display: block;
    height: 32px;
    pointer-events: none;
    width: 32px;
}