/* iSonic overrides - 30/07/26
 *
 * Loaded after yootheme-child/css/custom.css and versioned by filemtime, so
 * changes here are never held behind a stale browser cache. See functions.php.
 */

/* ------------------------------------------------------------------ FORMS */

/* Gravity Forms fields are filled rgba(255,255,255,0.72) but custom.css also
   sets `color: #fff !important` on them, so typed text was invisible and a
   <select> - which has no placeholder to fall back on - rendered as an empty
   white box. */
.ginput_container input,
.ginput_container textarea,
.ginput_container select {
    color: var(--crocBlue) !important;
}

/* The native dropdown list is drawn by the browser using the select's own
   colours. The translucent white fill resolves to nothing usable for the
   popup, so the options were white-on-white once opened. Give the option rows
   an explicit opaque pair. */
.ginput_container select option {
    color: var(--crocBlue);
    background-color: #fff;
}

/* A select shows its selected value, not a placeholder, so it must not inherit
   the italic placeholder treatment custom.css applies to the empty state. */
.ginput_container select {
    font-style: normal;
}

/* --------------------------------------------------------- NAV DROPDOWN */

/* The Shop submenu items were #FFFFFF on the white dropdown panel, so the six
   category links were invisible. This is set as @navbar-dropdown-nav-item-color
   in the Customizer too, but that only reaches the front end after a Customizer
   save recompiles the LESS, so it is repeated here as plain CSS. */
.uk-navbar-dropdown-nav > li > a {
    color: var(--crocBlue);
}
.uk-navbar-dropdown-nav > li > a:hover,
.uk-navbar-dropdown-nav > li > a:focus,
.uk-navbar-dropdown-nav > li.uk-active > a {
    color: var(--crocRed);
}

/* ------------------------------------------------------- MOBILE HEADER */

/* THE MOBILE NAVBAR DISAPPEARING.
   custom.css pulls the banner up under the glass navbar with
   `.banner.uk-section-default, .sub-banner { margin-top: -50px }`.
   On desktop the visible toolbar above the header has height and stops that
   negative margin collapsing out of the page wrapper. Below the `m` breakpoint
   the toolbar is uk-visible@m (display:none, zero height), so nothing
   interrupts the collapse: the -50px escapes <main> and .tm-page and shifts
   the entire page up 50px, carrying the absolutely-positioned overlay header
   with it. Logo, hamburger and all sat at y:-50 - above the viewport.
   On mobile there is no glass navbar to tuck under, so the pull is not wanted. */
@media (max-width: 959px) {
    .banner.uk-section-default,
    .sub-banner {
        margin-top: 0 !important;
    }
}

/* ------------------------------------------------- MOBILE GLASS NAVBAR */

/* custom.css gives the DESKTOP navbar a frosted-glass treatment
   (`.tm-header .uk-navbar-container`) but the mobile header is a separate
   element - `.tm-header-mobile` - so on phones the bar was fully transparent
   with square corners and no blur, sitting flush to the screen edges. Same
   treatment here, at 10px insets rather than desktop's 20px because the screen
   is 375px not 1440px. The 32px radius clamps to half the 50px bar height, so
   the mobile bar reads as a floating pill.
   Values are kept identical to the desktop rule on purpose - if that one is
   retuned, retune this alongside it. */
@media (max-width: 959px) {
    .tm-header-mobile .uk-navbar-container {
        background: rgba(255, 255, 255, 0.72) !important;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        border: 1px solid rgba(255, 255, 255, 0.55);
        border-radius: 32px;
        box-shadow: 0 18px 45px rgba(12, 47, 89, 0.14);
        margin: 10px;
    }

    /* The header is an absolutely positioned overlay, so the banner has to make
       its own room for the bar now that the bar floats. The padding goes on the
       banner's inner `.uk-section` - the element carrying the background image
       and `uk-section-large-top` - not on the section itself: padding on the
       section would open a white strip above the photo instead of letting the
       photo run to the top edge underneath the floating bar. */
    .banner > .uk-section,
    .sub-banner > .uk-section {
        padding-top: 100px;
    }
}

/* ---------------------------------------------------- MOBILE TYPE SCALE */

/* Only h1 and h2 have a `-m` desktop step in the Customizer, so h3/h4 and the
   heading-* utilities rendered at their full desktop size on a 375px screen:
   the decorative watermark headings measured 80px and section titles 45-55px.
   Desktop is untouched. */
@media (max-width: 959px) {
    .uk-heading-xlarge {
        font-size: 46px;
    }
    .uk-heading-large {
        font-size: 40px;
    }
    h1, .uk-h1 {
        font-size: 38px;
    }
    h2, .uk-h2 {
        font-size: 32px;
    }
    h4, .uk-h4 {
        font-size: 26px;
    }
}
@media (max-width: 639px) {
    .uk-heading-xlarge {
        font-size: 34px;
    }
    .uk-heading-large {
        font-size: 32px;
    }
    h1, .uk-h1 {
        font-size: 32px;
    }
    h2, .uk-h2 {
        font-size: 27px;
    }
    h3, .uk-h3 {
        font-size: 28px;
    }
}

/* The homepage stat cards are staggered with translateX at desktop. custom.css
   resets that under 480px; between 481 and 680px the group still sat off
   centre. Centre the group rather than adding more per-card offsets. */
@media (max-width: 680px) {
    .banner .stats-grid {
        margin-left: auto;
        margin-right: auto;
    }
}

/* The testimonial card is pulled 150px left to lap the photo beside it. That
   only makes sense while the two are side by side; custom.css zeroes it under
   960px, but the card also keeps the desktop top/bottom margins that assume
   the overlap. Tighten them once the columns stack. */
@media (max-width: 959px) {
    .testimonial-row .uk-tile-muted {
        margin-top: 0;
        margin-bottom: 0;
    }
}

/* The paired photos in the "why choose text" / "who we are" / "our clients"
   sections lap each other by 30px, set as position_left on the gallery. That
   reads as intended at desktop, where the two sit in quarter-width columns and
   the overlap is a small proportion of each. Below the small breakpoint the
   columns are halves of a phone screen - about 173px each - so the same 30px
   covers a sixth of the neighbouring photo and pushes the gallery outside its
   own column box. The offset is an inline style from the builder prop and has
   no responsive variant, so it has to come off here. */
@media (max-width: 639px) {
    .uk-section .uk-panel > .round[style*="left"] {
        left: 0 !important;
    }
}

/* The navy enquiry panel gave the form only 275px of a 375px screen: 30px of
   container padding, a 20px grid gutter, 20px of .blue-row padding and 15px
   each side of tile padding all stack up. Reclaim about 40px on phones - the
   fields were noticeably narrower than the text beside them. */
@media (max-width: 639px) {
    .blue-row {
        padding-right: 0;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .blue-row .uk-tile {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* ------------------------------------------------------ ARTICLE TEMPLATE */

/* House 2em radius on the article's featured image, matching the news cards
   and every other pale panel on the site. */
.post-hero img {
    border-radius: 2em;
}

/* The article meta line (date, category) under the title. */
.post-meta {
    font-size: 15px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.post-meta a {
    color: inherit;
}

/* The recent-posts list in the article sidebar: divider list, no cards, to
   match the reference structure without inventing a new card style. */
.post-aside .uk-list > li {
    padding-top: 12px;
    padding-bottom: 12px;
}