/* ==========================================================================
   Site-level additions (rebuild): breadcrumb hero, enquiry form states, small utilities.
   Loaded after the legacy sheets and before any page specific @push('styles').
   ========================================================================== */

/* --- Breadcrumb hero (<x-page-hero>) ------------------------------------
   Compact navy banner: sky-blue glow + dotted grid on the left, the artwork as a soft masked panel on the right.
   Markup: .banner-optimized.page-hero > .page-hero__art + .page-hero__pattern + .container.page-hero__inner
   (breadcrumb pill, optional .page-hero__eyebrow, h1.hero-title, optional .page-hero__subtitle). */
.banner-optimized {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: clamp(220px, 22vw, 300px);
    padding: clamp(40px, 5vw, 64px) 0;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    justify-content: flex-start;
    text-align: left;
    color: #ffffff;
    background-color: #09212b;
    background-image:
        radial-gradient(55% 90% at 0% 0%, rgba(51, 189, 255, 0.22) 0%, rgba(51, 189, 255, 0) 70%),
        linear-gradient(115deg, #09212b 0%, #0c2a37 50%, #0f3646 100%);
}

/* Sky glow behind the artwork. */
.banner-optimized::before {
    content: "";
    position: absolute;
    inset: auto;
    z-index: -1;
    width: 520px;
    height: 520px;
    right: -120px;
    top: -260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(51, 189, 255, 0.28) 0%, rgba(51, 189, 255, 0) 65%);
    pointer-events: none;
}

/* Gradient hairline along the bottom edge. */
.banner-optimized::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(51, 189, 255, 0) 0%, rgba(51, 189, 255, 0.6) 50%, rgba(51, 189, 255, 0) 100%);
}

.page-hero__art {
    position: absolute;
    z-index: -2;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(64%, 980px);
    background-image: url('../img/banner-img.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.5;
    filter: saturate(0.85);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.45) 35%, #000 80%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.45) 35%, #000 80%);
}

/* Alternate artwork (About, Contact): blueprint style, lighter and more visible. */
.banner-optimized--panoramic .page-hero__art {
    opacity: 0.75;
    filter: none;
}

.page-hero__pattern {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1.4px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.4) 40%, transparent 70%);
    mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.4) 40%, transparent 70%);
    pointer-events: none;
}

.page-hero__inner {
    position: relative;
}

.banner-optimized .hero-title {
    font-family: "DM Serif Display", serif;
    font-weight: 400;
    font-size: clamp(2rem, 4.2vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: 0.2px;
    color: #ffffff;
    margin: 16px 0 0;
    max-width: 820px;
    text-shadow: none;
    text-wrap: balance;
}

.banner-optimized nav:first-child + .hero-title,
.banner-optimized .hero-title:first-child {
    margin-top: 0;
}

.banner-optimized nav + .hero-title {
    margin-top: 18px;
}

.page-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0 0;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #33BDFF;
}

.page-hero__eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

.page-hero__eyebrow + .hero-title {
    margin-top: 10px;
}

.page-hero__subtitle {
    margin: 14px 0 0;
    max-width: 640px;
    font-size: clamp(1rem, 1.25vw, 1.125rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
}

.banner-optimized .breadcrumbs-custom {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 4px;
    padding: 6px 14px;
    margin: 0;
    list-style: none;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.banner-optimized .breadcrumb-item {
    display: flex;
    align-items: center;
    padding: 0;
}

.banner-optimized .breadcrumb-link {
    color: rgba(255, 255, 255, 0.78);
    text-transform: uppercase;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-decoration: none;
    transition: color 0.2s ease;
}

.banner-optimized a.breadcrumb-link:hover,
.banner-optimized a.breadcrumb-link:focus-visible {
    color: #ffffff;
}

.banner-optimized .breadcrumb-sep {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.35);
    margin: 0 8px;
    font-size: 0.95rem;
}

.banner-optimized .breadcrumb-active {
    color: #33BDFF;
}

@media (max-width: 767.98px) {
    .page-hero__art {
        width: 100%;
        opacity: 0.28;
        -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, #000 100%);
        mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, #000 100%);
    }

    .banner-optimized--panoramic .page-hero__art {
        opacity: 0.4;
    }

    .banner-optimized::before {
        width: 320px;
        height: 320px;
        top: -160px;
        right: -120px;
    }
}

/* --- Enquiry form (<x-enquiry-form>) ------------------------------------ */
.enquiry-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0;
}

.enquiry-error {
    display: block;
    margin-top: 6px;
    color: #d93025;
    font-size: 0.85rem;
    line-height: 1.3;
}

.enquiry-form .form-control-modern.is-invalid,
.enquiry-form .form-control.is-invalid {
    border-color: #d93025;
}

.enquiry-form .form-control-modern[readonly] {
    background-color: #f8f9fa;
    cursor: not-allowed;
}

.enquiry-form select.form-control-modern {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 44px;
    text-overflow: ellipsis;
}

.enquiry-form .select-arrow {
    pointer-events: none;
}

/* --- Small utilities ----------------------------------------------------- */
/* Heading element demoted from h1 that still has to look like the old h1 (counters on the landing pages). */
.as-h1 {
    font-size: var(--h1);
    margin-top: 0;
}

.vf-info-list__text a {
    color: inherit;
    text-decoration: none;
}

/* --- Error pages (resources/views/errors) ------------------------------- */
.error-page {
    background: linear-gradient(135deg, #e0f7fa 0%, #e1f5fe 100%);
    min-height: 55vh;
    display: flex;
    align-items: center;
}

.error-page__code {
    font-family: "DM Serif Display", serif;
    font-size: clamp(4rem, 14vw, 8rem);
    line-height: 1;
    margin: 0 0 0.5rem;
    color: #33BDFF;
}

.error-page__title {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    margin: 0 0 1rem;
}

.error-page__text {
    color: #4e4e4e;
    font-size: 1.05rem;
    margin-bottom: 2rem;
}

.error-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

/* --- Home: the "Earn your wings" block has no section wrapper; give it the same rhythm as its neighbours --- */
.home-wings {
    padding-top: clamp(30px, 4vw, 60px);
    padding-bottom: clamp(60px, 7vw, 100px);
}