/*
Theme Name: Zeffir Child — Bassar Production
Theme URI: https://bassarproduction.com
Description: Child theme for Bassar Production. Adds the video hero, the anchored category sections, the scroll-aware transparent header, and the orange (#fd4302) accent palette.
Author: Bassar Production
Template: zeffir
Version: 1.0.0
License: GNU General Public License v2.0 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zeffir-child
*/

/* -------------------------------------------------------------------------
   1. Accent palette — orange #fd4302 = hsl(15.5, 98.4%, 50%)
   Kirki only emits --color-primary, but main.css hardcodes the whole ramp
   (darker / dark / light / lighter + their h/s/l parts), so the full ramp is
   restated here. This file loads after main.css, so these win.
   ---------------------------------------------------------------------- */
:root,
[data-theme="light"],
body {
    --color-primary-darker: hsl(15.5, 98.4%, 40%);
    --color-primary-darker-h: 15.5;
    --color-primary-darker-s: 98.4%;
    --color-primary-darker-l: 40%;

    --color-primary-dark: hsl(15.5, 98.4%, 46%);
    --color-primary-dark-h: 15.5;
    --color-primary-dark-s: 98.4%;
    --color-primary-dark-l: 46%;

    --color-primary: #fd4302;
    --color-primary-h: 15.5;
    --color-primary-s: 98.4%;
    --color-primary-l: 50%;

    --color-primary-light: hsl(15.5, 98.4%, 77%);
    --color-primary-light-h: 15.5;
    --color-primary-light-s: 98.4%;
    --color-primary-light-l: 77%;

    --color-primary-lighter: hsl(15.5, 98.4%, 92%);
    --color-primary-lighter-h: 15.5;
    --color-primary-lighter-s: 98.4%;
    --color-primary-lighter-l: 92%;

    /* Plain-RGB companion for rgba() mixes in the custom sections. */
    --bp-accent-rgb: 253, 67, 2;
}

[data-theme="dark"] {
    --color-primary-darker: hsl(15.5, 80%, 42%);
    --color-primary-darker-h: 15.5;
    --color-primary-darker-s: 80%;
    --color-primary-darker-l: 42%;

    --color-primary-dark: hsl(15.5, 90%, 50%);
    --color-primary-dark-h: 15.5;
    --color-primary-dark-s: 90%;
    --color-primary-dark-l: 50%;

    --color-primary: hsl(15.5, 95%, 58%);
    --color-primary-h: 15.5;
    --color-primary-s: 95%;
    --color-primary-l: 58%;

    --color-primary-light: hsl(15.5, 95%, 68%);
    --color-primary-light-h: 15.5;
    --color-primary-light-s: 95%;
    --color-primary-light-l: 68%;

    --color-primary-lighter: hsl(15.5, 95%, 78%);
    --color-primary-lighter-h: 15.5;
    --color-primary-lighter-s: 95%;
    --color-primary-lighter-l: 78%;

    --bp-accent-rgb: 255, 106, 51;
}

/* -------------------------------------------------------------------------
   2. Cart removal safety net.
   template-parts/menu/widgets/cart.php is overridden to render nothing; this
   covers any cart markup the parent prints from another template.
   ---------------------------------------------------------------------- */
.main-header__cart,
.main-header--widgets .main-header__cart {
    display: none !important;
}

/* -------------------------------------------------------------------------
   3. "Contact us" header link (rendered by the extra-widgets override).
   Text only — no fill, no border. It picks up the header's own text colour at
   rest and goes accent on hover, focus and press.
   ---------------------------------------------------------------------- */
.bp-contact-btn {
    /* Resting colour, swapped per header variant below. */
    --bp-contact-color: var(--menu-color-text, currentColor);

    display: inline-flex;
    align-items: center;
    gap: 7px;
    /* Padding is hit area only — there is no visible box. */
    padding: 10px 2px;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--bp-contact-color);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.22s ease;
}

/* Transparent header over the showreel and the slider: white at rest. */
.ms-nb--white .bp-contact-btn {
    --bp-contact-color: #fff;
}

.bp-contact-btn:hover,
.bp-contact-btn:focus-visible,
.bp-contact-btn:active {
    color: var(--color-primary);
    background: none;
}

.bp-contact-btn__arrow {
    transition: transform 0.22s ease;
}

.bp-contact-btn:hover .bp-contact-btn__arrow,
.bp-contact-btn:focus-visible .bp-contact-btn__arrow {
    transform: translateX(3px);
}

/* Keep the pill on the same row as the other header widgets. */
.main-header--widgets .ms-hw-inner {
    align-items: center;
}

.header-extra-widgets {
    display: flex;
    align-items: center;
}

/* On small screens the pill would crowd the burger — shrink, then drop it.
   The mobile menu carries its own full-width Contact button instead. */
@media only screen and (max-width: 1200px) {
    .bp-contact-btn {
        padding: 10px 16px;
        font-size: 0.75rem;
    }
}

@media only screen and (max-width: 1023px) {
    .header-extra-widgets .bp-contact-btn {
        display: none;
    }
}

/* -------------------------------------------------------------------------
   4. Header corrections.
   ---------------------------------------------------------------------- */

/* The pill link inherited the body face; the site's own display face is
   Neometric Alt, which is what every other header word is set in. */
.bp-contact-btn {
    font-family: "Neometric Alt", "Open Sans", sans-serif;
}

/* The dark/light switch is not part of this build. */
.toggle-switch,
.main-header__switch,
.ms-hw-inner .toggle-switch {
    display: none !important;
}

/* -------------------------------------------------------------------------
   5. Primary menu: thirteen categories plus a contact link.

   The parent theme sizes the menu for a handful of items. At 16px with the
   stock spacing the row measures ~1800px, so it overflows a 1440 viewport and
   the "button" menu style clips it. Tightening type and gaps brings it inside
   the page, and it is allowed to wrap rather than overflow if a longer label
   is ever added.
   ---------------------------------------------------------------------- */
.navbar-nav {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 2px;
}

@media only screen and (min-width: 1024px) {
    .navbar-nav > li.menu-item > a {
        font-size: 0.875rem;
        letter-spacing: -0.005em;
    }

    .navbar-nav > li.menu-item {
        margin-left: 0;
        margin-right: 0;
        padding-left: 9px;
        padding-right: 9px;
    }
}

@media only screen and (min-width: 1024px) and (max-width: 1439px) {
    .navbar-nav > li.menu-item > a {
        font-size: 0.8125rem;
    }

    .navbar-nav > li.menu-item {
        padding-left: 7px;
        padding-right: 7px;
    }
}

/* The pill background has to grow with a wrapped menu instead of clipping it. */
.main-header--button .navbar-nav,
.main-header__nav--button .navbar-nav {
    max-width: 100%;
    overflow: visible;
}

/* Hover pill ("button" header, desktop): the list wraps to two rows, but the
   parent pins the pill at 48px, so the second row hung outside it. The first
   row is set level with the toggle dots; bassar-header.js measures the list
   into --bp-menu-open-h and the pill grows down to it while open. A matching
   negative margin keeps the pill's layout box at 48px, so the header bar
   itself never changes height. Row two opens just behind the width animation
   and closes without a delay. */
@media only screen and (min-width: 1024px) {
    .main-header.button .navbar__menu-content:not(.is-mobile) {
        height: 48px;
        margin-bottom: 0;
        overflow: hidden;
        transition: height 0.4s cubic-bezier(0.76, 0, 0.24, 1),
                    margin-bottom 0.4s cubic-bezier(0.76, 0, 0.24, 1);
    }

    .main-header.button .navbar__menu-content.bp-menu-expanded:not(.is-mobile) {
        height: var(--bp-menu-open-h, 48px);
        margin-bottom: calc(48px - var(--bp-menu-open-h, 48px));
        border-radius: 24px;
        transition-delay: 0.15s;
    }

    .main-header.button .navbar__menu-content:not(.is-mobile) .navbar__menu__content {
        height: auto;
        min-height: 48px;
        align-items: flex-start;
    }

    .main-header.button .navbar__menu-content:not(.is-mobile) #primary-menu-button {
        justify-content: flex-start;
        align-content: flex-start;
        row-gap: 0;
        padding-top: 6px;
        padding-bottom: 6px;
        /* the list box starts ~12px left of the clipped pill edge */
        padding-left: 30px;
        /* clear the toggle dots, which sit over the right end of row one */
        padding-right: 64px;
    }
}

/* -------------------------------------------------------------------------
   6. Sticky header: keep the logo optically centred.

   In the scrolled state the parent drops the header's vertical padding but
   leaves the logo on its original baseline, so it reads as stuck to the top
   edge. Centre the row and give the logo its own breathing room.
   ---------------------------------------------------------------------- */
.main-header__layout .ms-hw-inner,
.main-header__layout .main-header__wrapper {
    align-items: center;
}

.main-header__logo {
    display: flex;
    align-items: center;
    padding-top: 6px;
    padding-bottom: 6px;
}

.main-header__logo img {
    display: block;
}

/* -------------------------------------------------------------------------
   7. Mobile menu.

   Thirteen categories at the parent's display size runs off the screen and
   pushes the contact button out of reach, so the list is set smaller and
   tighter below 1024px.
   ---------------------------------------------------------------------- */
@media only screen and (max-width: 1023px) {
    .navbar-nav > li.menu-item > a,
    .navbar-nav > li.menu-item > a .word,
    .navbar-nav > li.menu-item > a .word span {
        font-size: 1.25rem !important;
        line-height: 1.25 !important;
        letter-spacing: -0.01em;
    }

    .navbar-nav > li.menu-item {
        padding-top: 3px;
        padding-bottom: 3px;
    }
}

@media only screen and (max-width: 480px) {
    .navbar-nav > li.menu-item > a,
    .navbar-nav > li.menu-item > a .word,
    .navbar-nav > li.menu-item > a .word span {
        font-size: 1.0625rem !important;
    }
}