/* =============================================================================
   HOLIDAY TIMES — CUSTOM THEME STYLES
   -----------------------------------------------------------------------------
   Properly structured replacement for the old inline <style> patch.
   Loaded via wp_enqueue_style() in functions.php (see holiday_times_enqueue_assets).

   Contents:
     1. Brand variables
     2. Header & footer chrome (navy bars, readable text)
     3. Buttons & search form
     4. Lead form section — "Holiday Times - The Travel Experts" (#callToActionPanel)
     5. Footer partner-logo visibility fix
     6. Header "Destinations" dropdown visibility fix
     7. Logo sizing
   ============================================================================= */


/* -----------------------------------------------------------------------------
   0. Prevent horizontal page overflow on mobile
   -----------------------------------------------------------------------------
   The theme doesn't consistently constrain element widths on small screens
   (several fixed-width elements can run wider than the viewport), which lets
   the page scroll sideways. That's also what was making the floating
   WhatsApp/call buttons look like they sat outside the page — they're
   correctly pinned to the viewport, but a horizontally-scrolling page around
   them reads as broken. This keeps everything contained without changing
   any element's own layout.
   ----------------------------------------------------------------------------- */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* -----------------------------------------------------------------------------
   0b. Fix the sitewide gap above the header
   -----------------------------------------------------------------------------
   Deep in the theme's own CSS bundle there's a leftover, unqualified
   "header{margin:40px 0 20px;border-bottom:1px solid #eee}" rule — almost
   certainly meant for some old blog-post-style header, not the site's main
   navigation. Because it targets the bare <header> tag with no class, it
   silently applies to the real site header everywhere this template is
   used, pushing it down 40px and revealing the page's grey background in
   the gap above it. A class-qualified override here beats it.
   ----------------------------------------------------------------------------- */
header.d2-new-header {
    margin: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}


/* -----------------------------------------------------------------------------
   1. Brand variables
   ----------------------------------------------------------------------------- */
:root {
    --ht-navy: #0d2149;
    --ht-navy-dark: #081633;
    --ht-gold: #c9a24d;
    --ht-gold-light: #e2c179;
    --ht-sky: #1b6fc4;
}


/* -----------------------------------------------------------------------------
   2. Header & footer chrome
   Brand chrome only: header + footer bars. Content sections keep their
   original theme backgrounds so nothing disappears behind navy.
   ----------------------------------------------------------------------------- */
.header-main,
.d2-header,
.top-nav,
.top-nav-section-new,
#above-footer,
footer,
.footer-top {
    background-color: var(--ht-navy) !important;
}

/* Readable text inside the navy bars only (.header-main / .d2-header is the
   actual sticky nav bar). Deliberately NOT scoped to the outer <header>
   tag — that outer tag also wraps the hero banner + lead-collecting search
   form + trust badges, which sit on a WHITE background. An earlier version
   of this rule targeted the whole <header>, which forced white text onto
   that white search-form area and made it unreadable/invisible. */
.header-main h1, .header-main h2, .header-main h3, .header-main h4,
.header-main p, .header-main span, .header-main li, .header-main a,
.d2-header h1, .d2-header h2, .d2-header h3, .d2-header h4,
.d2-header p, .d2-header span, .d2-header li, .d2-header a,
.top-nav a, .top-nav span,
.top-nav-section-new a, .top-nav-section-new span,
#above-footer h1, #above-footer h2, #above-footer h3, #above-footer h4,
#above-footer h5, #above-footer p, #above-footer li, #above-footer span,
#above-footer a, #above-footer div, #above-footer strong, #above-footer b,
footer h1, footer h2, footer h3, footer h4, footer h5, footer p, footer li,
footer span, footer a, footer div, footer strong, footer b, footer small,
.footer-top h1, .footer-top h2, .footer-top h3, .footer-top h4,
.footer-top p, .footer-top li, .footer-top span, .footer-top a {
    color: #fff !important;
}

/* The hero banner + lead-collecting search form + trust badges live inside
   <header> but are NOT part of the navy chrome — force them back to normal
   readable colours regardless of what the outer <header> does. */
#search-banner-cont,
#search-banner-cont *,
.header-trust-mob,
.header-trust-mob * {
    color: initial;
}

#search-banner-cont h1, #search-banner-cont h2, #search-banner-cont h3,
#search-banner-cont label, #search-banner-cont .cust-label {
    color: var(--ht-navy) !important;
}

footer a:hover, footer a:focus,
#above-footer a:hover, #above-footer a:focus,
.footer-top a:hover, .footer-top a:focus {
    color: var(--ht-gold) !important;
}

footer .chat-header-new, footer .footer-head, footer h3, footer h4,
#above-footer .chat-header-new {
    color: var(--ht-gold-light) !important;
}

footer hr, #above-footer hr {
    border-color: rgba(255, 255, 255, .25) !important;
}

/* Keep light cards inside the footer readable on their own background */
footer .white-bg, footer .white-bg *,
footer .grey-bg, footer .grey-bg *,
#above-footer .white-bg, #above-footer .white-bg * {
    color: var(--ht-navy) !important;
}

.purple-light, .purple, .text-purple {
    color: var(--ht-navy) !important;
}

a:hover, a:focus {
    color: var(--ht-gold);
}


/* -----------------------------------------------------------------------------
   3. Buttons & search form
   ----------------------------------------------------------------------------- */
.newSearchIndicator .nav-tabs > li.active > label {
    background-color: var(--ht-navy) !important;
    color: #fff !important;
}

.btn-primary, .trans-cta, #search_button, #search_button_mob {
    background-color: var(--ht-gold) !important;
    border-color: var(--ht-gold) !important;
    color: var(--ht-navy) !important;
    font-weight: 700 !important;
}

.btn-primary:hover, .trans-cta:hover,
#search_button:hover, #search_button_mob:hover {
    background-color: var(--ht-gold-light) !important;
    color: var(--ht-navy) !important;
}

.holiday-times-quote-message {
    background: var(--ht-gold);
    color: var(--ht-navy);
    padding: 10px 14px;
    border-radius: 6px;
    font-weight: 700;
    margin: 10px 0;
}

.holiday-times-floating-call {
    background: var(--ht-navy) !important;
}

/* -----------------------------------------------------------------------------
   Lead-collecting quote form (#searchyform) — the actual form that submits to
   admin-post.php and emails you a lead.
   -----------------------------------------------------------------------------
   IMPORTANT: #search-banner-cont is built as `display:flex; flex-direction:
   column`, and the theme's own CSS uses flex `order` on its children
   (search form, banner, breadcrumbs) to control the visual stacking order
   at different screen widths — most visibly on mobile, where the search
   form is ordered *above* the banner image. A previous fix forced this
   container to `display:block`, which silently disables every one of those
   `order` rules: elements then fall back to plain source order instead,
   which is exactly why the form ended up stacking in the wrong place on
   mobile, and (combined with an unrelated height override) collapsed
   entirely on desktop.

   The theme's own fixed-pixel layout (490px banner, 685px container,
   -500px overlap, per-breakpoint order values) is a complete, self
   contained system — it does not need JavaScript and does not need us to
   override its display/position/height/margin. The only thing genuinely
   worth guaranteeing here is that nothing hides it outright.
   ----------------------------------------------------------------------------- */
#search-banner-cont,
#SearchForm-at-top,
#searchyform,
#SearchForm {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Desktop-specific: the theme positions #SearchForm-at-top with
   `position:relative; margin-top:-500px`, which only lands correctly if
   the banner carousel above it has actually rendered at its expected
   height. That carousel depends on a large third-party JS bundle
   successfully initialising; if it doesn't, the carousel's own library
   default (display:none) leaves it at zero height, and the -500px margin
   drags the form up out of view instead of over the banner. Mobile avoids
   this because the theme positions it with `position:absolute` and a fixed
   `top` value there instead, which doesn't depend on a sibling's real
   height. Matching that same resilient approach on desktop fixes it
   regardless of whether the carousel renders. */
@media (min-width: 768px) {
    #search-banner-cont.bb-search,
    #search-banner-cont.homepage-sf {
        position: relative !important;
    }

    #SearchForm-at-top {
        position: absolute !important;
        top: 24px !important;
        left: 50% !important;
        transform: translateX(-50%);
        margin-top: 0 !important;
        width: fit-content;
        max-width: 95%;
        z-index: 20;
    }
}

/* -----------------------------------------------------------------------------
   4. Lead form section — "Holiday Times - The Travel Experts"
   -----------------------------------------------------------------------------
   The markup for #callToActionPanel uses Bootstrap 4/5 grid & utility
   classes (col-12, d-flex, m-b-xl, mt-4, card, shadow, btn-dark, when-closed,
   etc.) that do not exist anywhere in this theme's Bootstrap-3-based
   stylesheet, so the section rendered unstyled and effectively invisible.
   This block defines everything that section actually needs, scoped to
   #callToActionPanel so it cannot affect anything else on the site.
   ----------------------------------------------------------------------------- */

#callToActionPanel {
    display: block;
    visibility: visible;
    opacity: 1;
    background: #fff;
    padding: 48px 20px;
}

#callToActionPanel .section-heading {
    color: var(--ht-navy);
    font-weight: 800;
    font-size: 26px;
    text-align: center;
    margin: 0 0 32px;
}

#callToActionPanel .app-book-with-us {
    max-width: 1140px;
    margin: 0 auto;
}

/* Two-column layout: image + copy */
#callToActionPanel .row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 32px;
    margin: 0;
}

#callToActionPanel .row > [class*="col-"] {
    flex: 1 1 320px;
    min-width: 280px;
    max-width: 100%;
    padding: 0;
}

#callToActionPanel .has-object-fit {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

#callToActionPanel .has-object-fit img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: cover;
}

#callToActionPanel p {
    color: #333;
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 14px;
}

/* "Phone lines open" info card */
#callToActionPanel .when-closed {
    display: flex;
    flex-direction: column;
    background: #f7f7f9;
    border: 1px solid #e6e6ea;
    border-radius: 10px;
    padding: 20px;
    margin-top: 20px;
}

#callToActionPanel .when-closed h5 {
    text-align: center;
    margin: 0 0 12px;
    color: var(--ht-navy);
}

#callToActionPanel .when-closed .align-self-center {
    align-self: center;
    text-align: center;
}

#callToActionPanel .when-closed p {
    margin: 2px 0;
    font-size: 14px;
}

#callToActionPanel .when-closed h6 {
    text-align: center;
    margin: 10px 0 0;
    font-size: 13px;
    font-weight: normal;
}

#callToActionPanel .when-closed h6 a {
    color: var(--ht-gold);
    text-decoration: underline;
}

/* Buttons */
#callToActionPanel .btn {
    text-decoration: none;
    cursor: pointer;
}

#callToActionPanel .btn-dark {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    background: var(--ht-navy);
    color: #fff;
    border-radius: 8px;
    padding: 16px 20px;
    margin-top: 18px;
    white-space: normal;
    transition: background-color .2s ease;
}

/* The button's text sits in a plain, unclassed <div> next to the arrow
   icon. Flex items default to min-width:auto, which stops that text from
   shrinking or wrapping to fit — it just overflows and gets visually
   clipped by the button's rounded corners instead (the "Submit an Enq..."
   cutoff on mobile). min-width:0 lets it shrink and wrap properly; the
   icon gets flex-shrink:0 so it always stays full-size instead of being
   squeezed. */
#callToActionPanel .btn-dark > div {
    min-width: 0;
    white-space: normal;
}

#callToActionPanel .btn-dark > i {
    flex-shrink: 0;
}

#callToActionPanel .btn-dark:hover {
    background: var(--ht-navy-dark);
}

#callToActionPanel .btn-dark .blurb-heading {
    color: #fff;
    margin: 0;
    font-size: 17px;
    white-space: normal;
    overflow-wrap: break-word;
}

#callToActionPanel .btn-dark .blurb-text {
    color: rgba(255, 255, 255, .85);
    margin: 4px 0 0;
    font-size: 13px;
    white-space: normal;
    overflow-wrap: break-word;
}

#callToActionPanel .btn-outline-dark {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border: 2px solid var(--ht-navy);
    color: var(--ht-navy);
    background: #fff;
    border-radius: 8px;
    padding: 12px 18px;
    margin: 18px auto 0;
    max-width: 420px;
    text-align: center;
    white-space: normal;
    transition: background-color .2s ease, color .2s ease;
}

#callToActionPanel .btn-outline-dark:hover {
    background: var(--ht-navy);
    color: #fff;
}

#callToActionPanel .btn-outline-dark span {
    flex-shrink: 0;
}

#callToActionPanel .btn-outline-dark p {
    margin: 0;
    padding: 0;
    min-width: 0;
    white-space: normal;
    overflow-wrap: break-word;
}

#callToActionPanel .virtualCons-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    cursor: pointer;
}

#callToActionPanel .virtualCons-trigger img {
    width: 90px;
    flex-shrink: 0;
    border-radius: 8px;
}

#callToActionPanel .virtualCons-trigger p {
    margin: 0;
    min-width: 0;
    color: #333;
    text-decoration: underline;
    overflow-wrap: break-word;
}

#callToActionPanel .text-center {
    text-align: center;
}

#callToActionPanel .text-danger {
    color: var(--ht-navy) !important;
}

/* This card wraps a completely empty <section> with no content — leaving
   it visible just adds an unstyled blank box under the two-column layout. */
#callToActionPanel > .app-book-with-us > .card {
    display: none;
}

/* Mobile alignment pass: tighter padding, full-width buttons, and the
   buttons' internal text/icon centred rather than space-between (which
   looks unbalanced once the panel is this narrow). */
@media (max-width: 767px) {
    #callToActionPanel {
        padding: 32px 16px;
    }

    #callToActionPanel .app-book-with-us {
        padding: 0 4px;
    }

    #callToActionPanel .btn-dark,
    #callToActionPanel .btn-outline-dark {
        width: 100%;
        padding: 14px 16px;
    }

    #callToActionPanel .btn-dark .blurb-heading {
        font-size: 16px;
    }

    #callToActionPanel .virtualCons-trigger {
        width: 100%;
    }

    #callToActionPanel .virtualCons-trigger img {
        width: 64px;
    }
}

@media (max-width: 767px) {
    #callToActionPanel .has-object-fit img {
        min-height: 220px;
    }
    #callToActionPanel .row {
        gap: 20px;
    }
}


/* -----------------------------------------------------------------------------
   5. Footer partner-logo visibility fix
   -----------------------------------------------------------------------------
   "D2 Footer.webp" (the Specialist Holiday Group brand collection) is dark
   charcoal artwork on a transparent background, so it disappears against
   the navy footer. The footer colour cannot change, so the artwork itself
   is recoloured to white with a CSS filter — no source image edit needed.
   ----------------------------------------------------------------------------- */
.shg-footer-img img {
    filter: brightness(0) invert(1);
    opacity: .92;
}

/* ATOL / Consumer Protection trust badges: these were never loading at all
   (the markup only set a lazy-load "data-original" attribute with no
   fallback "src", and the JS library that promotes it was missing — fixed
   in the HTML). They're multi-colour logos, so instead of inverting them
   we give them a small white card so they stay legible and true to their
   real colours on the navy footer. */
.footer--container.images img.lazy {
    background: #fff;
    border-radius: 8px;
    padding: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}


/* -----------------------------------------------------------------------------
   6. Header "Destinations" dropdown visibility fix
   -----------------------------------------------------------------------------
   .nav-dropdown sets color:#fff at the container level (for a different
   header variant). The destination list items (.dest-head-title,
   .dest-sub-title) have no default colour of their own for the standard
   header, so they inherit that white text on the dropdown's white
   background and vanish — only becoming readable while the cursor is
   directly over an individual link (which triggers its own :hover rule).
   Giving them a permanent default colour fixes this for every item.
   ----------------------------------------------------------------------------- */
.nav-dropdown .dest-head-title,
.nav-dropdown .dest-sub-title {
    color: var(--ht-navy) !important;
}

.nav-dropdown .dest-head-title:hover,
.nav-dropdown .dest-sub-title:hover {
    color: var(--ht-gold) !important;
}


/* -----------------------------------------------------------------------------
   7. Logo — white backing chip, native sizing
   -----------------------------------------------------------------------------
   The logo artwork (holiday-times-logo.png) is a wide lockup (914×204px,
   ~4.5:1) with navy/gold text, so it needs a light backing to read against
   the navy header — that part was correct. But forcing a fixed height
   directly on the <img> fought the theme's own responsive logo system,
   which sizes the *container* (.header-logo / #hcm-logo) per breakpoint and
   lets the image scale to fit — forcing height:62px on this particular
   image made it render far wider than that container expects, causing the
   cropped/oversized look. Styling the container instead of the image fixes
   this at every screen size.
   ----------------------------------------------------------------------------- */
/* -----------------------------------------------------------------------------
   7. Logo — circular badge
   -----------------------------------------------------------------------------
   The original artwork (holiday-times-logo.png) is a wide lockup (914×204,
   ~4.5:1): a landmarks icon on the left, "HOLIDAY TIMES TRAVEL" text on the
   right, with a lot of empty space between them. Squeezed into a compact
   header, that wide format never looked right at any size. The template now
   uses a separate, pre-cropped square image of just the icon
   (holiday-times-icon-square.png) so it can be shown as a clean circular
   badge — a standard, professional treatment for a header logo — instead of
   a stretched or oddly-cropped wordmark.
   ----------------------------------------------------------------------------- */
.header-logo,
#hcm-logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.header-logo img,
.footer-logo img,
#hcm-logo a img {
    display: block;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    object-fit: cover;
    aspect-ratio: 1 / 1;
}

.header-logo img {
    width: 64px;
    height: 64px;
}

/* Mobile logo: the theme's own native rule is "#hcm-logo a img" (an ID
   plus two element selectors), which is MORE specific than a plain
   "#hcm-logo img" rule — so a lower-specificity override here would
   silently lose and the logo would render at the theme's native 200px
   width regardless of what's set here, badly overflowing the mobile
   header's fixed ~45-55px height. Matching that exact selector (ID +
   two elements) is what actually wins the cascade. */
#hcm-logo a img {
    width: 38px !important;
    height: 38px !important;
}

@media (max-width: 767px) {
    .header-logo img {
        width: 52px;
        height: 52px;
    }
}


/* -----------------------------------------------------------------------------
   8. Cosmetic "Flight & Hotel" / "Hotel Only" tab bar
   -----------------------------------------------------------------------------
   Purely visual — a small, self-contained radio+label toggle, completely
   separate from the theme's own tab system (which broke the form layout
   when it was tried). Both tabs show the same form; this only changes
   which label looks "active".
   ----------------------------------------------------------------------------- */
.ht-cosmetic-tabs {
    display: flex;
    width: fit-content;
    margin: 0;
}

.ht-cosmetic-tabs input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.ht-cosmetic-tabs label {
    margin: 0 0 -1px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    color: #fff;
    background: var(--ht-navy);
    border-radius: 10px 10px 0 0;
    transition: background-color .15s ease, color .15s ease;
}

/* Higher-specificity + !important is needed here specifically to beat an
   earlier rule (#search-banner-cont label{color:var(--ht-navy)!important})
   that forces navy text on every <label> in this area for dropdown
   legibility elsewhere. Without this, that rule was forcing navy text onto
   the inactive tab too — invisible against its own navy background. */
#SearchForm-at-top .ht-cosmetic-tabs label {
    color: #fff !important;
}

.ht-cosmetic-tabs label:first-of-type {
    margin-right: 2px;
}

.ht-cosmetic-tabs input[type="radio"]:checked + label {
    background: #fff;
    color: var(--ht-navy);
}

#SearchForm-at-top .ht-cosmetic-tabs input[type="radio"]:checked + label {
    color: var(--ht-navy) !important;
}

/* The theme's own CSS gives #SearchForm (class "newSearch") a native
   30px top margin, plus an extra 20px top padding on mobile — that's the
   actual gap between the tabs and the fields. Zeroing it out here closes
   it, without touching the theme's own rule (which other pages may still
   rely on). */
#SearchForm-at-top form,
#SearchForm-at-top #SearchForm {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

@media (max-width: 767px) {
    .ht-cosmetic-tabs label {
        padding: 8px 16px;
        font-size: 13px;
    }
}