:root {
    /* Brand palette - a single hue, several shades.
       Contrast ratios quoted against white, per WCAG 2.1:
         --brand-green         #8AC342  2.1:1  decorative surfaces only, never text
         --brand-green-dark    #6FA22F  3.0:1  large text / UI borders only
         --brand-green-darker  #4F7A1F  5.1:1  passes AA - use for text and buttons
         --brand-green-deepest #3F6118  7.0:1  passes AAA - hover/active states     */
    --brand-green: #8AC342;
    --brand-green-dark: #6FA22F;
    --brand-green-darker: #4F7A1F;
    --brand-green-deepest: #3F6118;
    --brand-green-tint: #EAF5DC;
    --brand-green-tint-2: #F5FAEE;

    /* Retint Bootstrap's own blue-by-default theme variables so no stray
       blue can appear in focus rings, links or active states. */
    --bs-primary: var(--brand-green-darker);
    --bs-primary-rgb: 79, 122, 31;
    --bs-link-color: var(--brand-green-darker);
    --bs-link-hover-color: var(--brand-green-deepest);
    --bs-link-color-rgb: 79, 122, 31;
    --bs-link-hover-color-rgb: 63, 97, 24;
    --bs-focus-ring-color: rgba(79, 122, 31, 0.35);
}

body {
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --- Brand colour helpers / Bootstrap overrides ------------------------- */

a {
    color: var(--brand-green-darker);
}

a:hover {
    color: var(--brand-green-deepest);
}

/* Brand-coloured text/icons. Never use --brand-green itself for these:
   at 2.1:1 on white it is unreadable for low-vision users. */
.text-brand {
    color: var(--brand-green-darker);
}

.icon-brand {
    color: var(--brand-green-dark); /* 3.0:1 - meets the AA bar for non-text */
}

.page-title {
    font-weight: 600;
    border-bottom: 3px solid var(--brand-green);
    padding-bottom: 0.5rem;
    display: inline-block;
    margin-bottom: 1rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--brand-green-dark);
    box-shadow: 0 0 0 0.25rem rgba(138, 195, 66, 0.25);
}

/* --- Accessibility: visible focus ---------------------------------------
   A keyboard user must always be able to see where they are (WCAG 2.4.7).
   One rule, applied globally, replaces Bootstrap's assorted blue rings. */

:focus-visible {
    outline: 3px solid var(--brand-green-darker);
    outline-offset: 2px;
    box-shadow: none;
}

/* On the green navbar a dark green ring would disappear - go white there. */
.site-nav :focus-visible,
.site-footer :focus-visible {
    outline-color: #fff;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1100;
    padding: 0.75rem 1.25rem;
    background-color: #fff;
    color: var(--brand-green-darker);
    font-weight: 600;
    border-radius: 0 0 0.5rem 0;
    text-decoration: none;
}

.skip-link:focus {
    left: 0;
}

/* main is focusable (tabindex="-1") so the skip link lands somewhere real,
   but it should never show a focus ring when clicked with a mouse. */
#main-content:focus {
    outline: none;
}

/* --- Buttons -------------------------------------------------------------
   White on --brand-green is only 2.1:1, which fails WCAG AA. The darker
   shade of the same hue reaches 5.1:1 while staying on-brand. */

.btn-brand {
    background-color: var(--brand-green-darker);
    border-color: var(--brand-green-darker);
    color: #fff;
    font-weight: 500;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.btn-brand:hover,
.btn-brand:focus {
    background-color: var(--brand-green-deepest);
    border-color: var(--brand-green-deepest);
    color: #fff;
}

/* Feedback: a button should visibly respond to being pressed. */
.btn-brand:active {
    transform: translateY(1px);
}

.btn:disabled,
.btn.disabled {
    cursor: not-allowed;
}

/* --- Navigation ---------------------------------------------------------- */

/* White on --brand-green is only 2.1:1. The darker shade of the same hue
   takes white text to 5.1:1, passing WCAG AA, without leaving the palette. */
.site-nav {
    background-color: var(--brand-green-darker);
}

.navbar .nav-link {
    color: #fff;
    opacity: 0.92;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: #fff;
    opacity: 1;
}

/* Visibility of system status: mark where the user currently is. */
.navbar .nav-link.active {
    color: #fff;
    opacity: 1;
    font-weight: 600;
    box-shadow: inset 0 -3px 0 #fff;
}

/* --- Hero carousel (home + service banner) ------------------------------ */

.hero-carousel {
    height: 70vh;
    min-height: 360px;
    max-height: 640px;
}

.hero-slide {
    height: 70vh;
    min-height: 360px;
    max-height: 640px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Slide imagery lives here rather than in a style="" attribute, so the CSP
   can forbid inline styles outright. */
.hero-slide-bifold {
    background-image: url("/img/Aluplast-Homeowners-BifoldDoors-02.jpg");
}

.hero-slide-house {
    background-image: url("/img/Aluplast-Homeowners-House-01.jpg");
}

.hero-slide-entrance {
    background-image: url("/img/Aluplast-Homeowners-EntranceDoors-01.jpg");
}

.services-banner {
    background-image: url("/img/Aluplast-Homeowners-Conservatories-01.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* services.twig reuses .hero-carousel as a fixed-height banner div rather
   than a Bootstrap carousel - keep that usage from inheriting the
   home-page's viewport-relative height. */
div.hero-carousel:not(.carousel-inner) {
    height: 320px;
    min-height: 0;
    max-height: none;
}

/* --- Home hero overlay ---------------------------------------------------
   Text sits over photography, so it carries its own dark scrim rather than
   relying on whatever happens to be in the image behind it. */

.hero-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0.15) 100%);
    pointer-events: none; /* let carousel controls stay clickable */
    /* Bootstrap's .carousel-fade promotes the active slide to z-index 1 as
       soon as it transitions. Without a higher z-index here the slide covers
       this overlay and the headline vanishes a moment after load. */
    z-index: 2;
}

/* ...and keep the controls above the overlay so they stay visible, not just
   clickable through it. */
#heroCarousel .carousel-control-prev,
#heroCarousel .carousel-control-next,
#heroCarousel .carousel-indicators {
    z-index: 3;
}

.hero-overlay-inner {
    max-width: 40rem;
    pointer-events: auto; /* ...but the buttons in here still work */
    padding-bottom: 2rem;
}

.hero-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #fff;
    opacity: 0.85;
    margin-bottom: 0.5rem;
}

.hero-heading {
    color: #fff;
    font-weight: 700;
    font-size: clamp(1.75rem, 4vw, 3rem);
    line-height: 1.15;
    margin-bottom: 0.75rem;
    text-wrap: balance;
}

.hero-sub {
    color: #fff;
    opacity: 0.92;
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    max-width: 34rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 767.98px) {
    .hero-overlay {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.75) 100%);
        align-items: flex-end;
    }

    .hero-overlay-inner {
        padding-bottom: 3.5rem;
        text-align: center;
    }

    .hero-overlay-inner .d-flex {
        justify-content: center;
    }
}

/* --- Tinted full-width section band --------------------------------------- */

.section-tint {
    background-color: var(--brand-green-tint-2);
}

/* --- Home: product range tiles -------------------------------------------- */

.range-tile {
    position: relative;
    display: block;
    border-radius: 0.75rem;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
}

.range-tile img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.range-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.75) 100%);
}

.range-tile-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 1rem;
    color: #fff;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.range-tile:hover img,
.range-tile:focus-visible img {
    transform: scale(1.06);
}

.range-tile:hover .range-tile-label i,
.range-tile:focus-visible .range-tile-label i {
    transform: translateX(3px);
}

.range-tile-label i {
    transition: transform 0.2s ease;
}

/* --- About page ------------------------------------------------------------ */

.about-lead-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.customer-photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform 0.2s ease;
}

.customer-photo:hover {
    transform: scale(1.04);
}

/* --- Services page: "Our Services" cards -------------------------------- */

.service-card {
    background-color: var(--brand-green-tint-2);
    border-radius: 0.75rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.75rem 1.5rem rgba(79, 122, 31, 0.15);
}

.service-icon {
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--brand-green-tint);
    color: var(--brand-green-darker);
    font-size: 2.5rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.service-card:hover .service-icon {
    background-color: var(--brand-green-darker);
    color: #fff;
}

.service-icon-sm {
    width: 4rem;
    height: 4rem;
    font-size: 1.75rem;
}

.cta-banner {
    background: linear-gradient(135deg, var(--brand-green-tint-2), var(--brand-green-tint));
    border-radius: 1rem;
}

/* --- Services page: Products pill tabs ----------------------------------- */

.product-tabs .nav-link {
    color: var(--brand-green-darker);
    border-radius: 2rem;
    padding: 0.6rem 1.25rem;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
    background-color: var(--brand-green-tint-2);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.product-tabs .nav-link:hover {
    background-color: var(--brand-green-tint);
    color: var(--brand-green-deepest);
}

.product-tabs .nav-link.active {
    background-color: var(--brand-green-darker);
    color: #fff;
}

.product-tab-content {
    background-color: var(--brand-green-tint-2);
    border-radius: 1rem;
    padding: 2rem;
}

.product-tab-img {
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
    width: 100%;
    object-fit: cover;
}

.spec-list li {
    margin-bottom: 0.5rem;
}

/* --- Gallery -------------------------------------------------------------- */

.project-card {
    border-radius: 0.75rem;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.project-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.12);
}

.project-card .card-img-top {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* --- Admin tables / previews ---------------------------------------------- */

.admin-thumb-col {
    width: 96px;
}

.admin-thumb {
    width: 72px;
    height: 54px;
    object-fit: cover;
}

.admin-preview-img {
    max-height: 160px;
}

/* --- Forms: inline validation feedback ------------------------------------ */

.field-error {
    color: #B3261E; /* 5.9:1 on white - passes AA */
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.form-control[aria-invalid="true"] {
    border-color: #B3261E;
}

.form-control[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 0.25rem rgba(179, 38, 30, 0.2);
}

/* --- Footer --------------------------------------------------------------- */

.site-footer {
    font-size: 0.875rem;
}

.site-footer .footer-brand {
    font-weight: 600;
}

.site-footer .footer-sep {
    margin: 0 0.5rem;
    opacity: 0.5;
}

.site-footer .footer-link {
    color: #dee2e6;
    text-decoration: none;
}

.site-footer .footer-link:hover,
.site-footer .footer-link:focus {
    color: #fff;
    text-decoration: underline;
}

.site-footer .footer-legal {
    font-size: 0.8125rem;
    opacity: 0.75;
}

.site-footer .accreditation-logo {
    background-color: #fff;
    border-radius: 0.5rem;
    padding: 0.5rem 0.85rem;
    display: inline-flex;
    align-items: center;
    line-height: 0;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* These are links now, so they need to look and behave like it. */
.site-footer .accreditation-logo:hover,
.site-footer .accreditation-logo:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 0.4rem 0.9rem rgba(0, 0, 0, 0.35);
}

@media (prefers-reduced-motion: reduce) {
    .site-footer .accreditation-logo {
        transition: none;
    }

    .site-footer .accreditation-logo:hover,
    .site-footer .accreditation-logo:focus-visible {
        transform: none;
    }
}

@media (max-width: 575.98px) {
    .site-footer .footer-accreditations {
        margin-left: 0 !important;
    }
}

/* --- Scroll-reveal -------------------------------------------------------- */

/* Scoped to .has-js (set by js/enhance.js in <head>) so that content is only
   ever hidden when JavaScript is actually available to reveal it again. With
   JS blocked, missing or broken, none of this applies and every section is
   simply visible. */
.has-js .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.has-js .reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Respect a user's OS-level "reduce motion" preference (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
    .has-js .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .service-card,
    .project-card,
    .btn-brand,
    .product-tabs .nav-link,
    .service-icon,
    .range-tile img,
    .range-tile-label i,
    .customer-photo {
        transition: none;
    }

    .service-card:hover,
    .project-card:hover,
    .customer-photo:hover {
        transform: none;
    }

    .range-tile:hover img,
    .range-tile:focus-visible img {
        transform: none;
    }
}