/* ==========================================================================
   SATA - South Auckland Taxi Association
   Brand overrides on top of the base theme (loaded after style.css)
   ========================================================================== */

/* --- Brand accent: SATA gold (matches the logo swoosh #FECD08) --- */
:root {
    --theme-color: #FECD08;
    --yellow-color: #FECD08;
    /* Darker gold for TEXT/icons on white or light backgrounds only.
       #FECD08 fails contrast as foreground text on white; buttons/badges
       that use gold as a solid background keep --theme-color as-is. */
    --theme-color-text: #8C6900;
}

/* Plain text links (phone numbers, inline links) default to the bright
   gold via the base theme's `a { color: var(--theme-color) }` rule, which
   is very hard to read on white. Use the darker gold instead. */
a {
    color: var(--theme-color-text);
}

/* Section eyebrow labels ("BOOK A RIDE", "GET A QUOTE", etc.) */
.sub-title,
.title-area .sub-title {
    color: var(--theme-color-text);
}

/* Icons inside the booking/contact form fields (white background) */
.contact-form .form-group > i {
    color: var(--theme-color-text);
}

/* Keep the logo nicely sized in the header */
.header-logo img,
.mobile-logo img {
    max-height: 64px;
    width: auto;
}
.header-logo img {
    margin-top: 15px;
}

/* ==========================================================================
   Compact header - reduce the tall top utility bar and nav-link padding
   ========================================================================== */
.header-layout2 .menu-top {
    padding: 10px 0;
}
.header-layout2 .main-menu > ul > li > a {
    padding: 22px 0;
}
@media (max-width: 575.98px) {
    .header-logo img { max-height: 58px; }
    .mobile-logo img { max-height: 68px; }
}

/* White logo in the (dark) footer */
.footer-logo img {
    max-height: 56px;
    width: auto;
}

/* --- Contact info cards (Contact page) --- */
.contact-info-card {
    background: var(--white-color, #fff);
    border: 1px solid var(--border-color, #f2f2f2);
    border-radius: 12px;
    padding: 30px 20px;
    height: 100%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: transform .3s ease, box-shadow .3s ease;
}
.contact-info-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.10);
}
.contact-info-card .about-feature_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--theme-color);
    color: #1b233a;
    font-size: 24px;
}

/* Reusable circular feature icon (About / Community / Help pages) */
/* Icon sits on a solid --theme-color (gold) box (see style.css .about-feature_icon
   background-color) - it must NOT also be --theme-color or the glyph disappears
   into its own background. Use the dark title color instead. */
.about-feature_icon {
    color: var(--title-color);
    font-size: 28px;
    margin-left: auto;
    margin-right: auto;
}
/* Cards that aren't text-centered (e.g. About page's "Why Choose SATA" -
   Experienced, Safe and Community-Focused) should keep the icon left-aligned
   with the heading/paragraph below it, not centered. */
.service-grid:not(.text-center) .about-feature_icon {
    margin-left: 0;
    margin-right: auto;
}

/* Reusable icon/title/text cards (Join, Support, Careers, Community, About,
   Home service grid). Titles wrap to different numbers of lines depending on
   length ("Priority Bookings" vs "Dedicated Account Management"), which pushes
   the paragraph text below to different vertical positions in the same row.
   Reserve space for 3 lines (the longest case at the narrowest column width)
   so every card's body text starts at the same height. */
.service-grid_title {
    min-height: 4.2em;
}

/* Home counter row: two tiles are short words ("Auckland-Wide", "Accessible")
   instead of numbers. Without this they inherit the 60px/48px number size and
   blow out to 3x the width of the numeric tiles, making the row look badly
   unbalanced. min-height on the shared base class keeps the label ("Serving
   Auckland" etc.) starting at the same height under every tile regardless of
   which font-size its number/word ends up using. */
.counter-card_number {
    min-height: 84px;
}
.counter-card_number--text {
    font-size: 28px;
    line-height: 1.3;
}
@media (max-width: 1199px) {
    .counter-card_number {
        min-height: 67px;
    }
    .counter-card_number--text {
        font-size: 24px;
    }
}

/* --- Simple checklist (Join page) --- */
.checklist ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.checklist li {
    position: relative;
    padding: 6px 0 6px 0;
    font-weight: 500;
    color: var(--title-color, #1b1b1b);
}
.checklist li i {
    color: var(--theme-color);
    margin-right: 10px;
}

/* Mailing-list checkbox row on the enquiry form */
.form-check {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}
.form-check input {
    width: 18px;
    height: 18px;
    accent-color: var(--theme-color);
}

/* ==========================================================================
   Sticky "Book Now" button - visible on every page and device
   ========================================================================== */
.sata-book-now {
    position: fixed;
    right: 20px;
    bottom: 24px;
    z-index: 1050;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 32px;
    background: var(--theme-color);
    color: #1b233a;
    font-weight: 700;
    font-size: 19px;
    line-height: 1;
    border-radius: 50px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.sata-book-now:hover,
.sata-book-now:focus {
    color: #1b233a;
    background: #ffd83a;
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.30);
}
.sata-book-now i {
    font-size: 22px;
}

/* Gentle attention pulse */
@keyframes sataPulse {
    0%   { box-shadow: 0 8px 24px rgba(0,0,0,.25), 0 0 0 0 rgba(254,205,8,.55); }
    70%  { box-shadow: 0 8px 24px rgba(0,0,0,.25), 0 0 0 16px rgba(254,205,8,0); }
    100% { box-shadow: 0 8px 24px rgba(0,0,0,.25), 0 0 0 0 rgba(254,205,8,0); }
}
.sata-book-now {
    animation: sataPulse 2.5s infinite;
}

/* Mobile: keep it thumb-reachable and compact */
@media (max-width: 575.98px) {
    .sata-book-now {
        right: 16px;
        bottom: 18px;
        padding: 15px 24px;
        font-size: 17px;
    }
}

/* ==========================================================================
   Left-side floating actions - Call Us + WhatsApp (opposite Book Now)
   ========================================================================== */
.sata-fab-left {
    position: fixed;
    left: 20px;
    bottom: 24px;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}
.sata-call-us {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 32px;
    background: #1faa59;
    color: #fff;
    font-weight: 700;
    font-size: 19px;
    line-height: 1;
    border-radius: 50px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.sata-call-us:hover,
.sata-call-us:focus {
    color: #fff;
    background: #18904c;
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.30);
}
.sata-call-us i { font-size: 20px; }

.sata-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    font-size: 30px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease;
}
.sata-whatsapp:hover,
.sata-whatsapp:focus {
    color: #fff;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.30);
}

@media (max-width: 575.98px) {
    .sata-fab-left {
        left: 16px;
        bottom: 18px;
        gap: 10px;
    }
    .sata-call-us {
        padding: 15px 22px;
        font-size: 16px;
    }
    .sata-whatsapp {
        width: 52px;
        height: 52px;
        font-size: 27px;
    }
}

/* ==========================================================================
   Header main nav - hover state (black + bold, instead of the theme's
   default white-on-hover which is invisible against the light header)
   ========================================================================== */
.header-layout2 .main-menu > ul > li > a:hover {
    color: var(--title-color);
    font-weight: 700;
}

/* ==========================================================================
   Inner-page banner (breadcrumb) - dark overlay so white title/breadcrumb
   text stays readable over whatever background photo is used
   ========================================================================== */
.breadcumb-wrapper {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.breadcumb-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(27, 27, 27, 0.6);
    z-index: 1;
}
.breadcumb-wrapper .container {
    position: relative;
    z-index: 2;
}

/* ==========================================================================
   Home "SATA Services" section - real fleet photo background (data-bg-src)
   with a dark overlay so the white heading / subtitle stay readable
   regardless of which part of the photo lands behind the text
   ========================================================================== */
#service-sec {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
#service-sec::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(20, 20, 20, 0.72);
    z-index: 1;
}
#service-sec .container {
    position: relative;
    z-index: 2;
}

/* ==========================================================================
   Mobile breathing room - top utility bar items were touching each other
   (theme removes their spacing/border below 992px), and the hero content
   loses its left padding when it centers below 767px, leaving text/buttons
   flush against the screen edge.
   ========================================================================== */
@media (max-width: 991.98px) {
    .header-layout2 .header-link {
        margin-right: 14px;
    }
}
@media (max-width: 767px) {
    .hero-style1 {
        padding-left: 18px;
        padding-right: 18px;
    }
    .header-layout2 .header-link:last-child {
        margin-top: 10px;
    }
}

/* Hero should be full-bleed - force this to 0 here (rather than relying only
   on the removal in style.css) since style.css has no cache-busting query
   string and can get stuck cached on a browser/host after publish. */
.hero-1 {
    padding-right: 0 !important;
}