/* Keep one continuous leather backdrop behind all visible logo headers. */
:is(.g11-header, .gsc1-header, .gsv1-header, .gsr-site-header,
    .gsr-ffv2-site-header, .gsr-tp__site-header,
    .gsr-affiliate-hub__brandbar),
header:has(img[src*="gulfshore-rides-wide-logo-3d.jpg"]) {
    background-color: #071011 !important;
    background-image: url("/wp-content/uploads/2026/09/gulfshore-header-leather-3d.jpg") !important;
    background-size: auto 100% !important;
    background-repeat: repeat-x !important;
    background-position: center center !important;
}

/* Pure black in the logo image blends into the leather without a visible box. */
header img[src*="gulfshore-rides-wide-logo-3d.jpg"],
.gsr-affiliate-hub__brandbar img[src*="gulfshore-rides-wide-logo-3d.jpg"],
footer img[src*="gulfshore-rides-wide-logo-3d.jpg"] {
    mix-blend-mode: screen !important;
}

/* Use more of the available header space while keeping navigation clear. */
@media (min-width: 861px) {
    header img[src*="gulfshore-rides-wide-logo-3d.jpg"],
    .gsr-affiliate-hub__brandbar img[src*="gulfshore-rides-wide-logo-3d.jpg"] {
        width: 280px !important;
        max-width: 280px !important;
        max-height: 120px !important;
        height: auto !important;
    }
}

@media (max-width: 860px) {
    header img[src*="gulfshore-rides-wide-logo-3d.jpg"] {
        width: 240px !important;
        max-width: calc(100vw - 36px) !important;
        max-height: 105px !important;
        height: auto !important;
    }

    .gsr-affiliate-hub__brandbar img[src*="gulfshore-rides-wide-logo-3d.jpg"] {
        width: 210px !important;
        max-width: calc(100vw - 36px) !important;
        max-height: 95px !important;
        height: auto !important;
    }

    .gsr-pl__site-header img[src*="gulfshore-rides-wide-logo-3d.jpg"] {
        max-width: calc(100vw - 120px) !important;
    }
}

/* Center the footer mark within its full-width mobile brand column. */
@media (max-width: 600px) {
    :is(.g11-footer__brand, .gsc1-footer__brand, .gsv1-footer__brand,
        .gsr-pl__footer-brand) > a:first-child {
        display: block !important;
        width: fit-content !important;
        max-width: 100% !important;
        margin-inline: auto !important;
    }
    :is(.g11-footer__brand, .gsc1-footer__brand, .gsv1-footer__brand,
        .gsr-pl__footer-brand) > a > img[src*="gulfshore-rides-wide-logo-3d.jpg"] {
        display: block !important;
        max-width: 100% !important;
    }
}

/* Polished silver lettering for public page and section headings. */
main :is(h1, h2, h3, h4, h5, h6) {
    color: #dce5e8 !important;
    background-image: linear-gradient(180deg,
        #ffffff 0%, #e7f0f2 13%, #8a989f 29%,
        #faffff 40%, #9faeb5 52%, #ffffff 62%,
        #7c8b92 81%, #e9f3f5 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: 0.25px rgba(231, 244, 247, 0.45);
    filter: drop-shadow(0 1px 0 #3b484f)
            drop-shadow(0 2px 0 #1e292f)
            drop-shadow(0 4px 4px rgba(0, 0, 0, 0.6));
}

/* Inline emphasis inside a heading should receive the same silver finish. */
main :is(h1, h2, h3, h4, h5, h6) :is(em, strong, span) {
    color: inherit !important;
    background-image: inherit !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

main :is(h3, h4, h5, h6) {
    -webkit-text-stroke: 0.1px rgba(231, 244, 247, 0.3);
    filter: drop-shadow(0 1px 0 #27343b)
            drop-shadow(0 2px 2px rgba(0, 0, 0, 0.55));
}

@media (forced-colors: active) {
    main :is(h1, h2, h3, h4, h5, h6),
    main :is(h1, h2, h3, h4, h5, h6) :is(em, strong, span) {
        color: CanvasText !important;
        background-image: none !important;
        -webkit-text-fill-color: CanvasText !important;
        -webkit-text-stroke: 0 !important;
        filter: none !important;
    }
}

/* Give the navigation and contact text beside the logo the same chrome finish. */
header:has(img[src*="gulfshore-rides-wide-logo-3d.jpg"]) a:not(:has(img)) {
    color: #e5edef !important;
    background-image: linear-gradient(180deg,
        #ffffff 0%, #dce8ec 22%, #89999f 39%,
        #ffffff 51%, #a7b6bb 68%, #eaf4f6 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: 0.12px rgba(238, 249, 251, 0.45);
    filter: drop-shadow(0 1px 0 #26343a)
            drop-shadow(0 2px 2px rgba(0, 0, 0, 0.7));
}

header:has(img[src*="gulfshore-rides-wide-logo-3d.jpg"]) a:not(:has(img)):is([aria-current="page"], :hover, :focus-visible) {
    text-decoration-line: underline !important;
    text-decoration-color: #ff9a61 !important;
    text-underline-offset: 4px;
}

@media (forced-colors: active) {
    header:has(img[src*="gulfshore-rides-wide-logo-3d.jpg"]) a:not(:has(img)) {
        color: LinkText !important;
        background-image: none !important;
        -webkit-text-fill-color: LinkText !important;
        -webkit-text-stroke: 0 !important;
        filter: none !important;
    }
}

/* Make the chrome header labels a little easier to read. */
header:has(img[src*="gulfshore-rides-wide-logo-3d.jpg"]) a:not(:has(img)) {
    font-size: 16px !important;
}

/* Keep these two destinations easy to spot in every header layout. */
header:has(img[src*="gulfshore-rides-wide-logo-3d.jpg"]) a:not(:has(img))[href*="/fare-finder/"] {
    text-decoration-line: none !important;
    border-bottom: 2px solid #38f47f !important;
}

header:has(img[src*="gulfshore-rides-wide-logo-3d.jpg"]) a:not(:has(img))[href*="/travel-essentials/"] {
    text-decoration-line: none !important;
    border-bottom: 2px solid #ff8a3d !important;
}

/* Keep the orange rule under the words in the right-hand grid. */
:is(.g11-header__right, .gsc1-header__right, .gsv1-header__right) > a[href*="/travel-essentials/"] {
    width: max-content !important;
    justify-self: center !important;
}

@media (forced-colors: active) {
    header:has(img[src*="gulfshore-rides-wide-logo-3d.jpg"]) a:not(:has(img)):is([href*="/fare-finder/"], [href*="/travel-essentials/"]) {
        border-bottom-color: LinkText !important;
    }
}

/* Reveal more of the vehicle and airport while retaining a dark text area. */
.g11-hero .g11-hero__media::after {
    background:
        linear-gradient(90deg,
            rgba(7, 16, 17, .90) 0%,
            rgba(7, 16, 17, .72) 39%,
            rgba(7, 16, 17, .18) 70%,
            rgba(7, 16, 17, .31) 100%),
        linear-gradient(180deg,
            rgba(7, 16, 17, .10),
            rgba(7, 16, 17, .40)) !important;
}

@media (max-width: 760px) {
    .g11-hero .g11-hero__media::after {
        background:
            linear-gradient(90deg,
                rgba(7, 16, 17, .86),
                rgba(7, 16, 17, .61) 70%,
                rgba(7, 16, 17, .43)),
            linear-gradient(180deg,
                rgba(7, 16, 17, .14),
                rgba(7, 16, 17, .54)) !important;
    }
}