/*
    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;
}

/* ---------- Sign In icon (small screens) ----------
   The parent theme turns Sign In into an icon-only button at <=1000px: it
   hides .btn__text with !important and shrinks the anchor to a 25px circle.
   The icon markup is in profile-dropdown.php.

   Above that width the icon is hidden and the pill shows its label only, as
   the comp does. At and below it the pill is dropped as well, so the icon
   stands bare in a 44px tap target like its neighbours, the search and menu
   icons. #site-header lifts this to (1,2,0), because the cream pill rules
   above are (0,2,0) and carry !important too. */
.header-user__dropdown .btn-login .jdv-login-icon {
    display: none;
}

@media only screen and (max-width: 1000px) {
    #site-header .header-user__dropdown .btn-login {
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0 !important;
        border: none !important;
        border-radius: 0;
        background: transparent !important;
        box-shadow: none;
    }

    #site-header .header-user__dropdown .btn-login .jdv-login-icon {
        display: inline-flex;
        color: #4C423C;
    }

    #site-header .header-user__dropdown .btn-login .jdv-login-icon svg {
        width: 24px;
        height: 24px;
    }

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

/* ---------- 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"> (line 340), and
      that div is a SIBLING of the link, not a descendant. What sits INSIDE it
      varies by environment - local serves an uploaded <img> SVG, staging does
      not - so nothing here may assume a tag name; see the rotation rule below.
      .jet-dropdown-arrow does exist, but only in the mobile menu markup.
   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,
#site-header .main-navbar .jet-dropdown-arrow {
    transition: transform .2s ease;
}

/* The rotation goes on the __dropdown WRAPPER, never on the icon inside it.

   Targeting the icon directly (`__dropdown img`) worked locally and did
   nothing on staging: the wrapper's contents are whatever the walker was
   handed - an <img>, an inline <svg>, an <i> icon font or a CSS background -
   and staging is not serving an <img>. Rotating the wrapper is agnostic to
   all of them, because whatever it contains turns with it.

   Rotate ONE level only. If a rule here also matched the icon inside the
   wrapper, the two 180deg turns would compose to 360deg and the chevron would
   sit there looking untouched - the same symptom this is fixing. That is why
   `__dropdown img` is gone rather than kept alongside, and why
   .jet-dropdown-arrow (the mobile menu's own arrow, which has no __dropdown
   wrapper around it) is the only other target. */
#site-header .jet-mega-menu-item--hover .jet-mega-menu-item__dropdown,
#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,
    #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 navigation ----------
   At and below JetMenu's dropdown breakpoint (1024px - jet-mega-menu-dropdown-
   breakpoint in its settings; keep the two in sync) the header hands the menu
   to the slide-out panel in template-parts/header/mobile-nav.php, which is what
   the comp specifies. JetMenu's dropdown is hidden outright rather than
   restyled: it had no room for the comp's bar, sub-view or buttons, and it
   carried two structural bugs of its own - an identity transform that broke
   the fixed Explore panel's positioning so its end could not be scrolled to,
   and an Elementor row that crushed the columns to 59px each.

   The header row on phones is therefore: logo, search, (avatar when logged
   in), menu toggle. */
@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 .main-navbar {
        display: none !important;
    }

    /* Start Trial moves into the panel. !important because the anchor carries
       Bootstrap's .d-flex, which is display:flex !important. Sign In stays in
       the header as an icon - see "Sign In icon" below. */
    #site-header .header-user__dropdown .btn-start-trial {
        display: none !important;
    }

    /* Matches the panel's search and close icons. */
    #site-header .jdv-icon-search {
        width: 24px;
        height: 24px;
    }

    /* ---------- horizontal scroll (home page) ----------
       The mobile-only copy of the "save our latest content" section (its
       parent carries elementor-hidden-desktop) is an Elementor grid whose
       column was set to a fixed 800px - grid-template-columns: 800px inside a
       366px box. Every child fills that track, so the heading, paragraph,
       button and images all ran 800px wide and pushed the document to 820px
       on a 426px screen. Capping the children cannot help while the track
       itself is 800px; the track is what has to change.

       The real fix is in Elementor: select that container and set its grid
       columns to 1 (1fr). This override does the same thing and is harmless
       once that is done. It keys off the element's own style class,
       e-680e2ef-0751b9e, which changes if the container is ever deleted and
       rebuilt - re-check this page at 390px if it is.

       .elementor in front lifts it to (0,2,0) over Elementor's own (0,1,0). */
    .elementor .e-680e2ef-0751b9e {
        grid-template-columns: minmax(0, 1fr);
    }

    .elementor .e-680e2ef-0751b9e > * {
        max-width: 100%;
    }

    .elementor .e-680e2ef-0751b9e > img {
        height: auto;
    }
}


/* ---------- 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;
}

/* Quick links come from wp_nav_menu, and the parent theme wraps each title in
   .menu-icon-wrap > .menu-text with room left for an icon these links do not
   have - which indented them against the category links above. The margin
   is the parent's `span.menu-title.menu-text { margin-left:10px !important }`,
   hence the !important here. */
#custom-search-overlay .search-col .menu-text {
    margin-left: 0 !important;
}

/* Phones: the mobile comp. The panel starts right under the header (the
   Customizer pins it at a flat top:80px, which left a strip of page showing)
   and reads top-down: a 32px title, the field, then both link groups stacked
   in one column at 15px. The Customizer's 4.3rem title and 1.3rem links are
   desktop sizes. --jdv-header-bottom comes from assets/js/mega-menu-links.js. */
@media (max-width: 767px) {
    #custom-search-overlay.search-overlay {
        top: var(--jdv-header-bottom, 59px) !important;
        align-items: flex-start;
        overflow-y: auto;
    }

    #custom-search-overlay .container {
        position: relative;
        padding-top: 36px;
        padding-bottom: 48px;
    }

    /* Not in the comp, but the panel needs a visible way out on touch. Kept
       small and level with the title's first line so the layout stays the
       comp's. */
    #custom-search-overlay .close-search-overlay {
        top: 34px;
        right: 4px;
        width: 44px;
        height: 44px;
        padding: 0;
        font-size: 32px;
        line-height: 1;
        z-index: 1;
    }

    #custom-search-overlay .search-main-title {
        font-size: 32px;
        line-height: 1.15;
        margin: 0;
        padding-right: 48px;
    }

    #custom-search-overlay .search-form-wrapper {
        margin: 36px 0 52px;
    }

    #custom-search-overlay .search-input-field,
    #custom-search-overlay .search-input-field:focus {
        font-family: 'IM Fell English', Georgia, serif;
        font-size: 22px;
        line-height: 1.3;
        padding: 6px 40px 8px 0;
    }

    #custom-search-overlay .search-input-field::placeholder {
        color: #4C423C;
        opacity: .85;
    }

    #custom-search-overlay .search-navigation-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    #custom-search-overlay .search-col h3 {
        font-size: 15px;
        font-weight: 600;
        line-height: 1.4;
        margin: 0 0 22px;
    }

    #custom-search-overlay .search-col ul {
        margin: 0;
        padding: 0;
    }

    #custom-search-overlay .search-col ul li {
        margin: 0 0 22px;
        padding: 0;
    }

    #custom-search-overlay .search-col ul li a {
        font-size: 15px;
        line-height: 1.5;
        padding: 0;
        margin: 0;
    }
}