/*
    Theme Name: StreamTube Child
    Theme URI: https://example.com/streamtube-child/
    Description: StreamTube Child
    Author: Abdulrahman Fani
    Author URI: https://github.com/faniabdo99
    Template: streamtube
    Version: 1.0.1
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Tags: two-column, responsive-layoutText Domain: twentytwentyonechild
*/

/* ---------- Header logo ----------
   The parent theme pins .site-header to a fixed `height: 70px` (border-box)
   while capping .custom-logo at `max-height: 65px`. With the header's own
   vertical padding on top of that there is nowhere near 65px of content box,
   so a tall logo bleeds out of the header in both directions — up into the
   admin bar and down past the bottom border.

   The header keeps its 70px: that number is load-bearing elsewhere in the
   parent stylesheet (`calc(100vh - 70px)` sidebar/player heights, sticky
   offsets). Instead the padding is trimmed to py-2 in the template and the
   logo is capped to what genuinely fits. */
#site-header .custom-logo-wrap,
#site-header .custom-logo-link {
    display: flex;
    align-items: center;
}

#site-header .custom-logo {
    max-height: 50px;
    max-width: 160px;
    width: auto;
    height: auto;
    object-fit: contain;
}

@media (max-width: 575px) {
    #site-header .custom-logo {
        max-height: 40px;
        max-width: 120px;
    }
}

/* ---------- Header search icon ----------
   The magnifier is an inline SVG in template-parts/header/header-1-fullwidth.php,
   not the fontello `.icon-search` glyph it used to be - a font icon's stroke
   weight cannot be thinned, and the design review called the old one too heavy.
   stroke-width lives on the SVG; only the colour is set here, so the dark-mode
   rule below has something to override. */
#site-header .jdv-icon-search {
    color: #4C423C;
    display: block;
}

html[data-theme="dark"] #site-header .jdv-icon-search {
    color: #E8E0D4;
}

/* ---------- Header auth buttons ----------
   The design pairs a plain text "Sign in" with a filled dark "Start trial"
   pill. The parent theme instead styles .btn-login as a solid red pill
   (#A6181C, white text) with a user-circle icon, and ships no second button
   at all - both corrected here and in profile-dropdown.php.

   !important is load-bearing on .btn-login: Customizer > Additional CSS
   carries a verbatim copy of the parent's red rule (custom_css post 5167,
   "Sign in" block). It has identical specificity (0,2,0) to this one but
   WordPress prints Additional CSS in wp_head at priority 101 - after every
   enqueued stylesheet - so on a tie it wins on document order. Deleting those
   lines from Additional CSS is the real cleanup; until then !important is what
   actually decides it. */
.header-user__dropdown {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* "Sign in" - light pill, as in the comp. Only the user-circle icon was wrong
   (removed in profile-dropdown.php); the pill itself always matched, so it
   keeps the parent's shape and the cream palette.

   The padding is set here because the template no longer carries Bootstrap's
   px-lg-3 - that class only padded from the lg breakpoint up, which left the
   pill pinched around the text on tablet once the icon was gone. */
.header-user__dropdown .btn-login {
    background: #F3EBDB !important;
    border: 1px solid #E4D9C4 !important;
    border-radius: 32px;
    box-shadow: 0 1px 2px rgba(76, 66, 60, 0.08);
    padding: 6px 18px;
}

.header-user__dropdown .btn-login:hover,
.header-user__dropdown .btn-login:focus {
    background: #ECE0C8 !important;
    border-color: #D9C9A8 !important;
}

.header-user__dropdown .btn-login .btn__text {
    color: #4C423C !important;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

/* "Start trial" - filled dark pill, the comp's primary action. */
.header-user__dropdown .btn-start-trial {
    background: #4C423C;
    border: 1px solid #4C423C;
    border-radius: 32px;
    padding: 7px 18px;
    transition: background .2s ease, border-color .2s ease;
}

.header-user__dropdown .btn-start-trial .btn__text {
    color: #F4EFE3;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.header-user__dropdown .btn-start-trial:hover,
.header-user__dropdown .btn-start-trial:focus {
    background: #3A322D;
    border-color: #3A322D;
}

/* The navbar runs out of room well before the phone breakpoint once both
   buttons are in it. Sign in is the one that has a modal behind it, so the
   trial pill is what gives way. */
@media (max-width: 575px) {
    .header-user__dropdown .btn-start-trial {
        display: none;
    }
}

/* ---------- Sign-in modal ----------
   streamtube-core builds this form in streamtube_core_the_login_form()
   (includes/function-templates.php) and hardcodes Bootstrap's btn-danger on
   the submit button - bright red, the one palette the site does not use.
   That function offers no filter for the classes, so it is corrected here.

   Scoped to #modal-login so it cannot leak onto any other btn-danger. */
#modal-login .modal-content {
    background: #FDF8EB;
    border: 1px solid #E4D9C4;
    border-radius: 16px;
}

#modal-login .modal-title {
    color: #4C423C;
}

#modal-login .login-form-wrap label {
    color: #4C423C;
    font-size: 14px;
    font-weight: 500;
}

#modal-login .login-form-wrap .form-control {
    border: 1px solid #E4D9C4;
    border-radius: 10px;
    background: #fff;
    color: #4C423C;
}

#modal-login .login-form-wrap .form-control:focus {
    border-color: #D9C9A8;
    box-shadow: 0 0 0 3px rgba(228, 217, 196, 0.55);
}

#modal-login .login-form-wrap .btn-danger {
    background: #4C423C;
    border-color: #4C423C;
    border-radius: 32px;
    color: #F3EBDB;
    padding: 10px 24px;
    font-weight: 500;
}

#modal-login .login-form-wrap .btn-danger:hover,
#modal-login .login-form-wrap .btn-danger:focus {
    background: #3B332E;
    border-color: #3B332E;
    color: #F3EBDB;
}

#modal-login .login-form-wrap .register,
#modal-login .login-form-wrap .lost-password {
    color: #7A6E64 !important;
}

#modal-login .login-form-wrap .register:hover,
#modal-login .login-form-wrap .lost-password:hover {
    color: #4C423C !important;
}

/* ---------- Header background ----------
   Parent theme paints the sticky header opaque white (#fff), then its
   .backdropblur modifier layers rgba(255,255,255,.7) + a blur on top —
   both read as a distinct white bar against the page. The design has
   the header blend straight into the page, so it's matched here to the
   same cream used site-wide as the Elementor Kit's body background
   (Site Settings > Background, #FDF8EB). #site-header (ID) outranks
   the parent's .site-header/.backdropblur (class) selectors, and the
   !important on border/shadow is needed to beat Bootstrap's
   .border-bottom / .shadow-sm utility classes on the same element. */
#site-header,
#site-header.backdropblur {
    background: #FDF8EB;
    border-bottom: none !important;
    box-shadow: none !important;
}

html[data-theme="dark"] #site-header {
    background: #1b1b1b;
}

/* ---------- Sticky header offset under the admin bar (mobile) ----------
   The parent reserves room for #wpadminbar on the sticky header - `top:32px`,
   widened to `top:46px` for everything up to 768px. WordPress only keeps the
   admin bar fixed down to 601px, though: at 600px and below core switches it
   to `position:absolute`, so it scrolls away with the page instead of pinning
   to the viewport. Below that width the 46px reservation has nothing left to
   clear, so the header hangs 46px down the viewport and page content shows
   through the gap above it - visible only while logged in, which is why it
   read as a logged-in-only navbar bug. .admin-bar #site-header (1,1,0) beats
   the parent's .admin-bar .site-header (0,2,0). */
@media only screen and (max-width: 600px) {
    .admin-bar #site-header,
    .admin-bar #site-header .show-search {
        top: 0;
    }
}

/* ---------- Search results: card titles ----------
   The size does not come from the theme at all: .post-title's own 1rem is
   struck out by the Elementor Kit's global heading rule,

     .elementor-kit-8 h2 { font-family:"IM Fell English"; font-size:45px }

   which outranks it (0,1,1) vs (0,1,0). Every result title is an <h2>, so
   the kit hands each card a 45px display heading. In a four-across grid the
   2-line clamp bites after three or four words, which is why every card
   reads "How Trauma Lives in You...".

   Two things have to be true for an override to land. It must beat the kit
   at (0,1,1), and it must match the real markup: results render as
   .post-grid > .post-meta .post-meta__title, NOT the .post-list this rule
   first assumed - a wrong guess taken from the theme's search.php, while
   the page is actually built by streamtube-core's own search template.
   `body.search` (0,2,1) clears the kit and also clears .post-grid
   .post-meta__title (0,2,0), which sets the competing clamp and
   line-height.

   Sized to sit with .jdv-card__title on Explore (Cormorant Garamond,
   19px/1.18). rem here is against the theme's 15px root, set from the
   `root_size` option - so 1.15rem is ~17px, not ~18. */
body.search .post-title,
body.search .post-meta__title {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    font-size: 1.15rem;
    line-height: 1.25;
}

body.search .post-title a,
body.search .post-meta__title a {
    font-weight: 500;
    color: #463D30;
    -webkit-line-clamp: 3;
}

/* ---------- Icon font collision: fontello vs icomoon ----------
   JetGridBuilder ships assets/icons/icomoon/icomoon.css, which squats on
   the generic `.icon-*` namespace the theme's fontello set already owns:

     icomoon    [class^="icon-"] { font-family:'icomoon' !important }  <- element
                .icon-search:before { content: "\e903" }
     fontello   [class*=" icon-"]:before { font-family:"fontello" }    <- ::before
                .icon-search:before { content: '\e802' }

   The two `.icon-search:before` rules tie at (0,1,1), so the file that
   loads later wins the codepoint - icomoon's \e903 - while the ::before
   still takes its font-family from fontello's rule, since a declaration
   set directly on the pseudo-element beats the 'icomoon' it would other-
   wise inherit from the span. Font and codepoint end up coming from
   different sets, and fontello has nothing at \e903, so the glyph paints
   blank. The span keeps its box, which is why the button still hovered and
   still opened the overlay with nothing drawn in it.

   Exactly these eight class names exist in both sets. Every other theme
   icon is fontello-only and has always rendered - hence icon-user-circle
   next to "Sign In" being fine while the magnifier was not. Pin both
   halves back to fontello across the overlap; fontello carries an
   equivalent glyph for all eight, so JetGridBuilder's own grids stay
   legible if they use them. */
.icon-check:before,
.icon-search:before,
.icon-sort:before,
.icon-star:before,
.icon-star-empty:before,
.icon-star-half:before,
.icon-tags:before,
.icon-trash:before {
    font-family: "fontello" !important;
}

.icon-check:before      { content: '\e842' !important; }
.icon-search:before     { content: '\e802' !important; }
.icon-sort:before       { content: '\f0dc' !important; }
.icon-star:before       { content: '\e805' !important; }
.icon-star-empty:before { content: '\e806' !important; }
.icon-star-half:before  { content: '\e807' !important; }
.icon-tags:before       { content: '\e81f' !important; }
.icon-trash:before      { content: '\f1f8' !important; }

/* ---------- Navbar link underlines ----------
   Scoped to the whole nav wrapper (not just .main-menu/.nav-link)
   because both the Bootstrap navwalker markup and JetMenu's own
   .jet-mega-menu markup live inside #site-header .main-navbar - force
   every state off so neither system's underline can surface. */
#site-header .main-navbar a,
#site-header .main-navbar a:hover,
#site-header .main-navbar a:focus,
#site-header .main-navbar a:visited,
#site-header .main-navbar a:active {
    text-decoration: none !important;
}

/* ---------- Open menu item: chevron + underline ----------
   None of this is reachable from the JetMenu settings screen: the primary
   menu is printed by wp_nav_menu() in header-1-fullwidth.php, not by the
   JetMenu Elementor widget, so there is no widget style tab to set it in.

   Three details of JetMenu's markup decide the selectors below, and all three
   differ from what its own source suggests - they were read off the rendered
   page (includes/render/walkers/mega-menu-walker.php is the authority):

   1. The chevron is NOT <i class="jet-dropdown-arrow">. On a mega item the
      walker prints <div class="jet-mega-menu-item__dropdown"> wrapping an
      uploaded <img> SVG (walker line 340), and that div is a SIBLING of the
      link, not a descendant. .jet-dropdown-arrow does exist, but only in the
      mobile menu markup - it is kept below so both render paths flip.
   2. .jet-mega-menu-item__link sits inside .jet-mega-menu-item__inner, so it
      is a grandchild of the <li>. A child combinator matches nothing.
   3. The walker prefixes any class containing "menu-item" with "jet-mega-"
      (modify_menu_item_classes, line 571), so WordPress's current-menu-item
      arrives as .jet-mega-current-menu-item. Ancestors get JetMenu's own
      .jet-mega-menu-item--current instead. Plain .current-menu-item never
      appears on this menu.

   The open item carries --hover, added by the public script. */
#site-header .main-navbar .jet-mega-menu-item__dropdown img,
#site-header .main-navbar .jet-dropdown-arrow {
    transition: transform .2s ease;
}

#site-header .jet-mega-menu-item--hover .jet-mega-menu-item__dropdown img,
#site-header .jet-mega-menu-item--hover .jet-dropdown-arrow {
    transform: rotate(180deg);
}

#site-header .jet-mega-menu-item--hover .jet-mega-menu-item__link,
#site-header .jet-mega-current-menu-item .jet-mega-menu-item__link,
#site-header .jet-mega-menu-item--current .jet-mega-menu-item__link {
    color: #A4201D !important;
}

/* Keep the chevron on the same line as the label.
   __inner holds the link and the chevron as siblings. JetMenu lays it out as
   a flex row, but that only holds while its public.css wins; where something
   later in the cascade resets the display, the chevron - a block-level div -
   drops onto its own line under the word. Pinning the row here makes that
   impossible regardless of load order.

   No `gap`: JetMenu already spaces the chevron with a margin, and adding one
   here would double it. */
#site-header .jet-mega-menu-item__inner {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    position: relative;
}

/* The stroke spans the label AND the chevron, as in the comp.
   It is drawn as a pseudo-element on __inner rather than a border, because
   __inner is the full-height nav target: a real border would land at the
   bottom of that box, well clear of the word, and padding to correct it would
   resize the item. Absolute positioning keeps it off the layout entirely.

   Anchored to the text's centre line (top: 50%) and pushed down in em, so it
   tracks the nav font-size instead of being pinned to one pixel value.

   0.83em is measured off the comp rather than guessed: there the stroke sits
   ~0.58em under the baseline, and the baseline is ~0.35em under the centre
   line this is anchored to. Raise it to drop the stroke, lower it to tuck it
   up under the word.

   border-bottom, not text-decoration: the rule further up forces
   `text-decoration: none !important` on every link in this nav, so an
   underline set that way is silently dropped. */
#site-header .jet-mega-menu-item--hover .jet-mega-menu-item__inner::after,
#site-header .jet-mega-current-menu-item .jet-mega-menu-item__inner::after,
#site-header .jet-mega-menu-item--current .jet-mega-menu-item__inner::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    margin-top: 0.83em;
    border-bottom: 1.5px solid #A4201D;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    #site-header .main-navbar .jet-mega-menu-item__dropdown img,
    #site-header .main-navbar .jet-dropdown-arrow {
        transition: none;
    }
}

/* ---------- Explore mega panel: clear the logo ----------
   The panel's top edge used to cut across the bottom of the logo lockup, so
   the Arabic subtitle under "JDV" was sliced off whenever the panel opened.

   The cause is not JetMenu. JetMenu positions the panel correctly, with
   `position: absolute; top: 100%` against the menu item. Elementor's generated
   stylesheet for the panel template, post-9405.css, then overrides it with

       body:not(.wp-admin):not(.login) .jet-mega-menu-mega-container {
           top: auto; position: fixed;
       }

   `position: fixed` with `top: auto` keeps the element at its *static*
   position - where it would have sat in normal flow, i.e. directly under the
   menu item - but now measured against the viewport. The menu item is
   vertically centred in the header, so its bottom edge is well above the
   header's own: 47.5px against 62.5px at the default logo size. That ~15px is
   what ate the lockup, and it grows as the logo does.

   Nudging with margin-top only papered over it - it left ~1px of clearance and
   still clipped once the logo rendered at its full height. The panel is
   anchored to the header's real bottom edge instead. --jdv-header-bottom is
   written by assets/js/mega-menu-links.js from the header's live
   getBoundingClientRect().bottom, so it tracks the admin bar, the breakpoint
   and any future logo size without a magic number here. The fallback only
   applies if that script fails to run.

   Scoped to --layout-horizontal: in the mobile dropdown state JetMenu stacks
   the panel inside an accordion, where pinning it to the header would lay it
   over the menu items. That state keeps Elementor's positioning.

   !important is required, and specificity is not enough on its own: Elementor
   writes that rule as `top: auto !important`, so the ID selector here loses to
   it however specific it gets. The declaration is what has to be outranked,
   not the selector. */
#site-header .jet-mega-menu--layout-horizontal .jet-mega-menu-mega-container {
    top: var(--jdv-header-bottom, 65px) !important;
    margin-top: 0 !important;
}

/* ---------- Mobile / tablet primary navigation ----------
   JetMenu owns the primary menu and renders its own toggle. Its mobile
   breakpoint is set in JetMenu settings (currently 1400) — keep the value
   below in sync with it. #site-header is sticky, so it is the containing
   block for the absolutely positioned panel. */
@media (max-width: 1024px) {

    /* keep everything on one row: Bootstrap gives .navbar-collapse
       flex-basis:100% below the expand breakpoint, which forces a wrap */
    #site-header .container-header > .d-flex {
        flex-wrap: nowrap;
    }

    #site-header .navbar-collapse {
        flex-basis: auto;
        flex-grow: 0;
        width: auto;
    }

    /* push the JetMenu toggle to the far right, after the user icons.
       Below 991px the parent theme turns .navbar-boxed into a full-width
       absolute bar (position:absolute; top:70px; left:0; width:100%;
       background:#fff) — that is what drops the toggle onto its own row,
       so every one of those declarations has to be undone, not just
       position. width in particular still feeds flex-basis:auto. */
    #site-header .main-navbar {
        order: 3;
        margin-left: 8px;
        position: static;
        top: auto;
        left: auto;
        width: auto;
        background: transparent;
        padding: 0;
        flex: 0 0 auto;
    }

    html[data-theme="dark"] #site-header .main-navbar {
        background: transparent;
    }

    #site-header .header-user {
        order: 2;
    }

    /* avoid the horizontal menu flashing before JetMenu switches to dropdown */
    #site-header .jet-mega-menu:not(.jet-mega-menu--inited) .jet-mega-menu-container {
        display: none;
    }

    /* let the panel anchor to the header, not to the menu wrapper */
    #site-header .navbar-collapse,
    #site-header .jet-mega-menu {
        position: static;
    }

    /* Neither padding nor box-shadow may live on the container itself.
       JetMenu collapses this element with `max-height:0; overflow:hidden`
       and only expands it once its JS adds .jet-mega-menu--dropdown-open,
       but max-height cannot squeeze either one out: under border-box a box
       still occupies its padding once height floors at 0, and a shadow is
       painted from the border box even at zero height. Together they left a
       ~24px cream strip with a soft shadow hanging under the header on
       mobile while the menu was shut. The padding moves onto the list -
       which overflow:hidden genuinely clips - and the shadow is applied
       only in the open state. */
    #site-header .jet-mega-menu-container {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
        background: #FDF8F0;
        padding: 0;
        z-index: 1000;
    }

    #site-header .jet-mega-menu--dropdown-open .jet-mega-menu-container {
        box-shadow: 0 12px 32px rgba(0, 0, 0, .10);
    }

    #site-header .jet-mega-menu-list {
        width: 100%;
        flex-direction: column;
        padding: 8px 24px 16px;
    }

    #site-header .jet-mega-menu-item__link {
        padding: 14px 0;
        font-size: 16px;
    }
}


/* ---------- Search overlay ----------
   The panel's base styling does not live in this theme at all: it is in
   Customizer > Additional CSS (custom_css post 5167, its "Search pop up"
   block). WordPress prints that inline in wp_head at priority 101 - after
   every enqueued stylesheet - so on a specificity tie it wins on document
   order. Every rule below therefore carries #custom-search-overlay to beat
   it on specificity instead, and repeats !important only where that block
   uses it. Moving those declarations out of the Customizer and into this
   section is the real cleanup; until then this is what decides the result. */

/* Panel background. The design gives the overlay its own cream, a shade
   deeper than the page/header cream (#FDF8EB) so the panel reads as a
   surface laid over the page rather than the page with its content
   swapped out. Additional CSS sets #custom-search-overlay (1,0,0) with
   !important; adding the class takes this rule to (1,1,0). */
#custom-search-overlay.search-overlay {
    background-color: #F5EDDA !important;
}

/* One line, not two. The design has a single rule under the heading - it
   is the input's own underline, with the magnifier sitting on its right
   end. Additional CSS gives .search-main-title a border-bottom as well, so
   the panel drew the line twice, once under the heading and once under the
   field: that stacked pair is what reads as the search field being
   "replicated". The heading's copy goes; the field's stays. */
#custom-search-overlay .search-main-title {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 12px;
}

/* The field paints itself white the moment the overlay opens, which is the
   second half of the same report. assets/js/custom.js focuses the input
   500ms after the fade-in, and the parent theme carries

     input[type="search"]:focus { background-color:#fff !important }   (0,1,1)

   which outranks the `background: transparent !important` Additional CSS
   puts on .search-input-field (0,1,0). So the field is never seen in its
   unfocused state - it is always a white rectangle sitting on the cream
   panel, which looks like a second, boxed field under the line. The :focus
   state has to be named explicitly here for the same reason.

   padding-right keeps typed text clear of the submit button, which is
   absolutely positioned over the right end of the line. */
#custom-search-overlay .search-input-field,
#custom-search-overlay .search-input-field:focus {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid #4C423C !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    color: #4C423C;
    padding: 10px 48px 10px 0;
}

/* Chrome draws its own ✕ clear button inside a search input as soon as the
   field has a value - a second glyph immediately beside the magnifier. */
#custom-search-overlay .search-input-field::-webkit-search-cancel-button,
#custom-search-overlay .search-input-field::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

/* The magnifier is an inline SVG now (see header-1-fullwidth.php), not the
   fontello glyph, so its stroke weight can be set. The button carried a
   font-size to size that glyph and a text line-height around it; with an
   SVG inside, both only push the icon off the line it should sit on. */
#custom-search-overlay .search-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 0;
    color: #4C423C;
    cursor: pointer;
}

/* Text links take the site's link style: underlined at rest, underline
   removed on hover. Additional CSS has it exactly the other way round and
   draws it with a border-bottom rather than text-decoration, so both
   halves are undone - left in place, the border would sit below the
   underline as a second line under every link. */
#custom-search-overlay .search-col ul li a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    border-bottom: none;
}

#custom-search-overlay .search-col ul li a:hover,
#custom-search-overlay .search-col ul li a:focus {
    text-decoration: none;
    border-bottom: none;
}