/* ==========================================================================
   Landing Banner — PPC quote funnel
   Replaces the Tailwind utilities the source Blade template relied on. This
   theme loads neither Tailwind nor Bootstrap, so everything is scoped to
   .icaal-lb and written out longhand.

   Colours follow the Elementor kit through its global-colour custom
   properties, so the banner tracks whatever the "Theme Options" colour tool in
   functions.php writes into the kit. The hex values are only fallbacks for
   when Elementor isn't rendering the page.
   ========================================================================== */

.icaal-lb {
    --lb-primary: var(--e-global-color-primary, #11859b);
    --lb-primary-dark: #0d6a7c;
    --lb-primary-dark: color-mix(in srgb, var(--lb-primary) 82%, #000);
    --lb-on-primary: #fff;
    --lb-text: var(--e-global-color-text, #333);
    --lb-card: #fff;
    --lb-page: #f7f7f7;
    --lb-field-bg: #f1f0ef;
    --lb-field-border: #e2e2e2;
    --lb-danger: #c60000;
    --lb-radius: 4px;
    /* Pull the banner up under a transparent/overlapping header. Set per
       instance with [icaal-landing-banner offset="139px"]; 0 by default so the
       block doesn't fight an Elementor header it knows nothing about. */
    --lb-offset: 0px;

    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    margin: calc(var(--lb-offset) * -1) 0 0;
    padding: calc(var(--lb-offset) + 1rem) 0 1rem;
    background: var(--lb-page);
    color: var(--lb-text);
    overflow: hidden;
}

.icaal-lb *,
.icaal-lb *::before,
.icaal-lb *::after {
    box-sizing: border-box;
}

.icaal-lb .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --- Background ---------------------------------------------------------- */

.icaal-lb .lb-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.icaal-lb .lb-tint {
    position: absolute;
    inset: 0;
}


/* --- Shell --------------------------------------------------------------- */

.icaal-lb .lb-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 1rem;
}

.icaal-lb .lb-copy,
.icaal-lb .lb-form-col {
    flex: 0 0 100%;
    max-width: 100%;
}

.icaal-lb .lb-form-col {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 1024px) {
    .icaal-lb .lb-inner {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 2rem;
    }

    .icaal-lb .lb-copy,
    .icaal-lb .lb-form-col {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* --- Headline copy ------------------------------------------------------- */

.icaal-lb .lb-title {
    margin: 0 0 1rem;
    color: var(--lb-primary);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 500;
    line-height: 1.15;
    text-align: center;
}

.icaal-lb .lb-subtitle {
    margin: 0;
    font-size: clamp(1.25rem, 3vw, 1.875rem);
    font-weight: 400;
    line-height: 1.3;
    text-align: center;
}

.icaal-lb .lb-bullets {
    margin: 0;
    padding: 1rem 0;
    list-style: none;
}

.icaal-lb .lb-bullet {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .25rem 0;
    list-style: none;
}

.icaal-lb .lb-bullet-icon {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    color: var(--lb-primary);
}

.icaal-lb .lb-bullet-text {
    font-size: 1.125rem;
    font-weight: 500;
}

@media (min-width: 1024px) {
    .icaal-lb .lb-title,
    .icaal-lb .lb-subtitle {
        text-align: left;
    }

    .icaal-lb .lb-bullet-text {
        font-size: 1.25rem;
    }
}

/* Over a photograph the copy inverts, as it did in the original block. */
.icaal-lb--on-image .lb-title,
.icaal-lb--on-image .lb-subtitle,
.icaal-lb--on-image .lb-bullet-text,
.icaal-lb--on-image .lb-bullet-icon {
    color: #fff;
}

/* --- Card ---------------------------------------------------------------- */

.icaal-lb .lb-card {
    width: 600px;
    max-width: 100%;
    margin: 2rem 0;
    background: var(--lb-card);
    color: var(--lb-text);
}

/* --- Progress legend ----------------------------------------------------- */

.icaal-lb .lb-legend {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 1rem 1rem 0;
}

.icaal-lb .lb-progress {
    position: relative;
    flex: 1 1 auto;
    height: 20px;
    overflow: hidden;
    background: #f5f5f5;
    border-radius: var(--lb-radius);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}

.icaal-lb .lb-progress-fill {
    height: 100%;
    background-color: var(--lb-primary);
    background-image: linear-gradient(45deg,
            rgba(255, 255, 255, .25) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, .25) 50%,
            rgba(255, 255, 255, .25) 75%,
            transparent 75%,
            transparent);
    background-size: 40px 40px;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
    transition: width .6s ease;
    animation: lb-progress-stripes 1s linear infinite;
}

@keyframes lb-progress-stripes {
    from { background-position: 40px 0; }
    to   { background-position: 0 0; }
}

.icaal-lb .lb-stepcount {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .5rem;
}

.icaal-lb .lb-stepcount-label {
    color: var(--lb-primary);
    font-size: 1.125rem;
}

.icaal-lb .lb-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    height: 2.75rem;
    background: var(--lb-primary);
    color: var(--lb-on-primary);
    font-size: 1.25rem;
    font-weight: 600;
}

/* --- Panes --------------------------------------------------------------- */
/* Panes are hidden with an inline display:none from PHP rather than a class,
   so jQuery's fadeIn() restores the flex value declared here instead of
   falling back to the element's browser-default display. */

.icaal-lb .lb-pane {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0 1rem 1rem;
}

.icaal-lb .lb-question {
    width: 100%;
    padding: 1rem;
    background: var(--lb-primary);
    color: var(--lb-on-primary);
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.25;
}

.icaal-lb .lb-question > :last-child {
    margin-bottom: 0;
}

/* --- Answer options ------------------------------------------------------ */

.icaal-lb .lb-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    align-content: center;
    width: 100%;
    min-height: 330px;
    padding: .5rem 0;
}

.icaal-lb .lb-option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 150px;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: var(--lb-primary);
    cursor: pointer;
    font: inherit;
    color: #fff;
}

.icaal-lb .lb-option-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease-out;
}

.icaal-lb .lb-option:hover .lb-option-img {
    transform: scale(1.04);
}

.icaal-lb .lb-option:active .lb-option-img {
    transform: scale(.98);
}

.icaal-lb .lb-option-tint {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .25);
    pointer-events: none;
}

.icaal-lb .lb-option-label {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: inherit;
    padding: .5rem;
    background: rgba(0, 0, 0, .2);
    color: #fff;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
    pointer-events: none;
}

.icaal-lb .lb-option:focus-visible {
    outline: 3px solid var(--lb-primary);
    outline-offset: 2px;
}

.icaal-lb .lb-option.is-active .lb-option-tint {
    background: rgba(0, 0, 0, .55);
    box-shadow: inset 0 0 0 3px var(--lb-primary);
}

@media (min-width: 1024px) {
    .icaal-lb .lb-option-label {
        font-size: 1.5rem;
    }
}

/* --- Postcode step ------------------------------------------------------- */

.icaal-lb .lb-postcode-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 330px;
    text-align: center;
}

.icaal-lb .lb-postcode-intro {
    max-width: 34ch;
    margin: 1rem 0 0;
    font-size: 1.125rem;
}

.icaal-lb .lb-postcode-input {
    width: 100%;
    max-width: 250px;
    margin: 2rem 0;
    padding: .75rem;
    border: 1px solid var(--lb-field-border);
    border-radius: var(--lb-radius);
    background: var(--lb-field-bg);
    font: inherit;
    font-size: 1.125rem;
    text-align: center;
    text-transform: uppercase;
}

.icaal-lb .lb-btn {
    display: inline-block;
    padding: .75rem 1.5rem;
    border: 0;
    border-radius: var(--lb-radius);
    background: var(--lb-primary);
    color: var(--lb-on-primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s ease;
}

.icaal-lb .lb-btn:hover,
.icaal-lb .lb-btn:focus-visible {
    background: var(--lb-primary-dark);
}

.icaal-lb .lb-postcode-error {
    display: block;
    margin: 1.5rem 0 0;
    padding: .5rem 1rem;
    border: 1px solid var(--lb-danger);
    background: rgba(198, 0, 0, .08);
    color: var(--lb-danger);
}

.icaal-lb .lb-postcode-waiting {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 330px;
}

.icaal-lb .lb-spinner {
    width: 56px;
    height: 56px;
    border: 5px solid rgba(0, 0, 0, .1);
    border-top-color: var(--lb-primary);
    border-radius: 50%;
    animation: lb-spin .8s linear infinite;
}

@keyframes lb-spin {
    to { transform: rotate(360deg); }
}

/* --- Details form -------------------------------------------------------- */

.icaal-lb .lb-form-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    margin: 1.5rem 0 0;
}

.icaal-lb .lb-form-intro {
    width: 100%;
    margin: 0 0 1.5rem;
    padding: 0 1rem;
    text-align: center;
}

.icaal-lb .lb-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 .75rem;
    width: 100%;
    padding: 0 1rem;
}

@media (min-width: 768px) {
    .icaal-lb .lb-fields {
        grid-template-columns: 1fr 1fr;
    }

    .icaal-lb .lb-field--full {
        grid-column: 1 / -1;
    }
}

.icaal-lb .lb-field label {
    display: block;
    margin-bottom: .25rem;
    font-size: .95rem;
}

/* Beats `.icaal-contact-form input` from style.css, which this form also
   matches, so the funnel's fields keep their own look. */
.icaal-lb .lb-field input,
.icaal-lb .lb-field textarea {
    display: block;
    width: 100%;
    margin-bottom: .75rem;
    padding: .625rem;
    border: 1px solid var(--lb-field-border);
    border-radius: var(--lb-radius);
    background: var(--lb-field-bg);
    font: inherit;
    color: inherit;
}

.icaal-lb .lb-field textarea {
    resize: vertical;
}

.icaal-lb .lb-field input.is-invalid,
.icaal-lb .lb-field textarea.is-invalid {
    border-color: var(--lb-danger);
}

.icaal-lb .response {
    width: 100%;
    padding: 0 1rem;
}

.icaal-lb .response:empty {
    display: none;
}

.icaal-lb .lb-form-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: .5rem 1rem 0;
    text-align: center;
}

.icaal-lb .lb-submit {
    width: 100%;
    margin-bottom: 1rem;
    padding: .75rem 2rem;
    border: 0;
    border-radius: var(--lb-radius);
    background: var(--lb-primary);
    color: var(--lb-on-primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s ease;
}

.icaal-lb .lb-submit:hover,
.icaal-lb .lb-submit:focus-visible {
    background: var(--lb-primary-dark);
}

.icaal-lb .lb-submit.btn-loading {
    opacity: .6;
    cursor: progress;
}

@media (min-width: 1024px) {
    .icaal-lb .lb-submit {
        width: auto;
    }
}

.icaal-lb .lb-privacy {
    text-decoration: underline;
}

.icaal-lb .lb-dataprotected {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-top: .5rem;
    color: #6c757d;
}

.icaal-lb .lb-dataprotected svg {
    width: 1rem;
    height: 1rem;
}

/* --- Thank you ----------------------------------------------------------- */

.icaal-lb .lb-pane--thankyou {
    flex-direction: column;
}

.icaal-lb .lb-thankyou-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 330px;
    padding: 2rem;
    font-size: 1.25rem;
    text-align: center;
}

/* --- Motion preferences -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .icaal-lb .lb-progress-fill {
        animation: none;
        transition: none;
    }

    .icaal-lb .lb-option-img {
        transition: none;
    }

    .icaal-lb .lb-option:hover .lb-option-img,
    .icaal-lb .lb-option:active .lb-option-img {
        transform: none;
    }
}