/*
Theme Name:  BTE Plant Sales
Theme URI:   https://bteplantsales.com
Author:      Expressive Design (Midlands) Ltd
Author URI:  https://expressivedesign.co.uk
Description: Bespoke WordPress theme for BTE Plant Sales. Heavy JS transitions via ED Animation Engine.
Version:     1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.1
License:     Proprietary
Text Domain: bte
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */

:root {
    /* --- Colours --- */
    --bte-navy:          #07093a;
    --bte-navy-mid:      #0a0d4a;
    --bte-navy-hex:      #0d1257;
    --bte-navy-light:    #141880;
    --bte-red:           #ff0b35;
    --bte-red-dark:      #cc092a;
    --bte-teal:          #00afff;
    --bte-teal-dark:     #008ccc;
    --bte-white:         #ffffff;
    --bte-off-white:     #f2f2f4;
    --bte-grey-light:    #e8e8ec;
    --bte-grey:          #9a9ab0;
    --bte-black:         #000000;
    --bte-blue:          #1c75d4;
    --bte-blue-dark:     #155bab;

    /* Section-specific bg overrides (set per section) */
    --section-bg:        var(--bte-navy);

    /* --- Typography --- */
    /* Font variables set by ED Site Builder Style Controls.
       Fallback values here are overridden by the plugin's <style> block in <head>.
       Do not hardcode font names here — edit via Site Builder > Style Controls. */
    --font-display:      'Barlow Condensed', sans-serif;
    --font-body:         'Barlow', sans-serif;

    /* Scale */
    --text-xs:    0.75rem;    /* 12px */
    --text-sm:    0.875rem;   /* 14px */
    --text-base:  1rem;       /* 16px */
    --text-md:    1.125rem;   /* 18px */
    --text-lg:    1.375rem;   /* 22px */
    --text-xl:    1.75rem;    /* 28px */
    --text-2xl:   2.25rem;    /* 36px */
    --text-3xl:   3rem;       /* 48px */
    --text-4xl:   4rem;       /* 64px */
    --text-5xl:   5.5rem;     /* 88px */
    --text-hero:  clamp(3rem, 7vw, 7rem);
    --text-bleed: clamp(4rem, 12vw, 12rem);

    /* --- Spacing --- */
    --space-1:   0.25rem;
    --space-2:   0.5rem;
    --space-3:   0.75rem;
    --space-4:   1rem;
    --space-5:   1.25rem;

    /* --- Button shape ---
       Parallelogram via transform: skewX() with a counter-skew on the
       inner content, so padding/border-radius work normally and text
       stays upright. Positive degrees = pointed top-left / bottom-right
       corners (matches Figma). ED Site Builder > Style Controls can
       override --btn-skew-deg live. */
    --btn-skew-deg:        12deg;
    --btn-radius:          6px;
    --btn-pad-v:           13px;
    --btn-pad-h:           40px;
    --space-6:   1.5rem;
    --space-8:   2rem;
    --space-10:  2.5rem;
    --space-12:  3rem;
    --space-16:  4rem;
    --space-20:  5rem;
    --space-24:  6rem;
    --space-32:  8rem;

    /* --- Layout --- */
    --container-max:   1440px;
    --container-wide:  1280px;
    --container-mid:   1080px;
    --container-narrow: 760px;
    --gutter:          clamp(1.25rem, 4vw, 3rem);

    /* --- Borders / Radius --- */
    --radius-sm:  0.5rem;
    --radius-md:  1rem;
    --radius-lg:  1.5rem;
    --radius-xl:  2rem;
    --radius-pill: 100px;

    /* --- Transitions --- */
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.87, 0, 0.13, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast:    180ms;
    --dur-mid:     320ms;
    --dur-slow:    600ms;

    /* --- Z-index layers --- */
    --z-base:      1;
    --z-above:     10;
    --z-nav:       100;
    --z-overlay:   200;
    --z-modal:     300;
    --z-preloader: 9999;

    /* --- Shadows --- */
    --shadow-sm:  0 2px 8px rgba(0,0,0,0.25);
    --shadow-md:  0 8px 32px rgba(0,0,0,0.4);
    --shadow-lg:  0 24px 64px rgba(0,0,0,0.5);
    --glow-red:   0 0 40px rgba(255, 11, 53, 0.35);
    --glow-teal:  0 0 40px rgba(0, 175, 255, 0.3);
}

/* ============================================================
   RESET & BASE
   ============================================================ */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: auto; /* ED Animation Engine handles scroll */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 400;
    line-height: 1.6;
    color: var(--bte-white);
    background-color: var(--bte-navy);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Prevent FOUC before JS inits */
body.bte-loading {
    overflow: hidden;
}

img, video, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

ul, ol {
    list-style: none;
}

button {
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1.0;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

.bte-eyebrow {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bte-red);
}

.bte-heading-hero {
    font-size: var(--text-hero);
    font-family: var(--font-display);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 0.95;
    letter-spacing: -0.02em;
}

.bte-heading-bleed {
    font-size: var(--text-bleed);
    font-family: var(--font-display);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 0.9;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.bte-heading-section {
    font-size: clamp(2.5rem, 5vw, 5rem);
    font-family: var(--font-display);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.0;
}

.bte-body-lg {
    font-size: var(--text-lg);
    line-height: 1.65;
}

.bte-body {
    font-size: var(--text-base);
    line-height: 1.7;
}

/* Split-colour heading: e.g. "OUR MANU<span>FACTURERS</span>" */
.bte-heading-split { color: var(--bte-red); }
.bte-heading-split span { color: var(--bte-navy); }
.bte-heading-split--light { color: var(--bte-red); }
.bte-heading-split--light span { color: var(--bte-white); }

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */

.bte-container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.bte-container--wide   { max-width: var(--container-wide); }
.bte-container--mid    { max-width: var(--container-mid); }
.bte-container--narrow { max-width: var(--container-narrow); }

.bte-section {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.bte-section--full-vh {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.bte-section--navy     { background-color: var(--bte-navy); }
.bte-section--red      { background-color: var(--bte-red); }
.bte-section--light    { background-color: var(--bte-off-white); color: var(--bte-navy); }
.bte-section--hex      { background-color: transparent; } /* fixed bg shows through — see main.css .bte-fixed-bg */
.bte-section--blue {
    background-color: var(--bte-blue); /* fallback */
    background-image:
        linear-gradient( rgba(7, 9, 58, 0.78), rgba(7, 9, 58, 0.78) ),
        url('/wp-content/uploads/2026/06/BTE-background-scaled.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Hex pattern overlay — applied via pseudo-element */
.bte-hex-bg::before {
    content: '';
    display: none; /* Hex pattern replaced by BTE background image on parent */
}

.bte-hex-bg > * { position: relative; z-index: 1; }

/* Split layout */
.bte-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
}

.bte-split--60-40 { grid-template-columns: 60fr 40fr; }
.bte-split--40-60 { grid-template-columns: 40fr 60fr; }

/* ============================================================
   BUTTONS
   ============================================================ */

.bte-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--space-3);
    padding:         var(--btn-pad-v, 13px) var(--btn-pad-h, 32px) var(--btn-pad-v, 13px) calc(var(--btn-pad-h, 32px) * 0.7);
    position:        relative;
    font-family:     var(--font-display);
    font-size:       var(--text-sm);
    font-weight:     700;
    letter-spacing:  0.08em;
    text-transform:  uppercase;
    line-height:     1;
    white-space:     nowrap;
    cursor:          pointer;
    text-decoration: none;
    border:          none;
    border-radius:   var(--btn-radius, 6px);
    transition:      filter var(--dur-fast) var(--ease-out);
}

/* Parallelogram — transform-based skew, so padding and border-radius
   both work normally on the (skewed) box. Positive --btn-skew-deg
   gives a pointed top-left corner and a pointed bottom-right corner
   (matches Figma) — the formula negates the variable so the sign in
   Style Controls reads intuitively (positive = this direction).
   Inner content is counter-skewed to stay upright. All outline
   variants get the same skewed treatment as the solid-colour
   buttons — previously outline-teal/outline-white opted out to a
   plain, un-skewed pill shape while outline-red didn't, which is
   what Chris has consistently wanted skewed in practice. */
.bte-btn {
    transform: skewX(calc(var(--btn-skew-deg, 12deg) * -1));
}

/* Colour fills — must come AFTER base so they win */
.bte-btn--red   { background-color: var(--bte-red);  color: var(--bte-white); }
.bte-btn--teal  { background-color: var(--bte-teal); color: var(--bte-navy); }
.bte-btn--navy  { background-color: rgba(7,9,58,0.9); color: var(--bte-white); }

.bte-btn:hover  { filter: brightness(1.15); }
.bte-btn:active { filter: brightness(0.92); }

/* Arrow — counter-skew so it reads upright */
.bte-btn::before {
    content:     '>';
    font-weight: 300;
    font-size:   2.4em;
    /* Tight line-height so the larger glyph doesn't inflate the
       button's own height — a flex row's height follows the tallest
       line-box among its items, and line-height:1 at this font-size
       was stretching the whole button to match. This lets the glyph
       render larger while its line box stays close to the button's
       normal text height. */
    line-height: 0.5;
    flex-shrink: 0;
    font-style:  normal;
    display:     inline-block;
}

@media (prefers-reduced-motion: reduce) {
    .bte-btn::before {
        animation: none !important;
    }
}

/* Inner span — counter-skew cancels the parent's skew exactly */
.bte-btn__inner {
    display:    inline-block;
    font-style: normal;
}

/* Continuous attention-drawing nudge on the arrow only — using
   transform:translateX() rather than margin, since margin affects
   the flex layout: this button is inline-flex with an auto width,
   so animating the arrow's margin was actually growing/shrinking the
   whole button's width every cycle to accommodate it (the "pulse"),
   not just moving the arrow in place. transform doesn't participate
   in layout sizing at all, so the button's footprint stays fixed
   while only the arrow visually slides. The skew is baked into the
   same keyframes as the nudge, since transform isn't additive across
   separate rules — every variant is now skewed, so every variant
   uses this same treatment. */
.bte-btn__inner,
.bte-btn::before {
    transform: skewX(var(--btn-skew-deg, 12deg));
    display: inline-block;
}

.bte-btn::before {
    animation: bte-btn-arrow-nudge-skewed 1.4s ease-in-out infinite;
}

@keyframes bte-btn-arrow-nudge-skewed {
    0%, 100% { transform: skewX(var(--btn-skew-deg, 12deg)) translateX(0); }
    50%      { transform: skewX(var(--btn-skew-deg, 12deg)) translateX(6px); }
}

/* Outline variants — same skewed parallelogram shape and border-
   radius as the solid-colour buttons, just transparent with a
   coloured border instead of a fill. */
.bte-btn--outline-teal,
.bte-btn--outline-white {
    border-radius: var(--btn-radius, 6px);
    background:    transparent;
}

.bte-btn--outline-teal  {
    color:  var(--bte-teal);
    border: 1.5px solid var(--bte-teal);
}
.bte-btn--outline-white {
    color:  var(--bte-white);
    border: 1.5px solid rgba(255,255,255,0.5);
}

.bte-btn--outline-teal:hover {
    background-color: var(--bte-teal);
    color:            var(--bte-navy);
    box-shadow:       var(--glow-teal);
}
.bte-btn--outline-white:hover {
    background-color: var(--bte-white);
    color:            var(--bte-navy);
}

/* Variants */
.bte-btn--red {
    background-color: var(--bte-red);
    color: var(--bte-white);
}
.bte-btn--red:hover { background-color: var(--bte-red-dark); box-shadow: var(--glow-red); }

.bte-btn--teal {
    background-color: var(--bte-teal);
    color: var(--bte-navy);
}
.bte-btn--teal:hover { background-color: var(--bte-teal-dark); box-shadow: var(--glow-teal); }

.bte-btn--navy {
    background-color: var(--bte-navy);
    color: var(--bte-white);
}
.bte-btn--navy:hover { background-color: var(--bte-navy-light); }

.bte-btn--outline-teal {
    background-color: transparent;
    color: var(--bte-teal);
    border: 2px solid var(--bte-teal);
}
.bte-btn--outline-teal:hover {
    background-color: var(--bte-teal);
    color: var(--bte-navy);
    box-shadow: var(--glow-teal);
}

.bte-btn--outline-white {
    background-color: transparent;
    color: var(--bte-white);
    border: 2px solid var(--bte-white);
}
.bte-btn--outline-white:hover {
    background-color: var(--bte-white);
    color: var(--bte-navy);
}

/* Outline-red — deliberately NOT added to the outline-teal/white
   skew exclusion above, so it automatically gets the same skewed
   parallelogram shape as the solid button variants, plus the arrow
   nudge animation, rather than the plain pill shape its siblings use.
   Chris has consistently wanted outline buttons skewed in practice
   each time one's come up today. */
.bte-btn--outline-red {
    background-color: transparent;
    color: var(--bte-red);
    border: 2px solid var(--bte-red);
    border-radius: var(--btn-radius, 6px);
}
.bte-btn--outline-red:hover {
    background-color: var(--bte-red);
    color: var(--bte-white);
    box-shadow: var(--glow-red);
}

/* Nav arrow buttons — this was the original, pre-consolidation definition
   (3rem, dashed, 70% opacity). The single shared style for every carousel/
   nav arrow button on the site now lives in assets/css/main.css as the
   canonical .bte-arrow-btn — this leftover copy was still loading and
   contributing a stray opacity:0.7 (main.css never set opacity, so this
   was silently dimming every arrow button and adding an unintended hover
   scale). Removed so main.css is the one and only source of truth. */

/* ============================================================
   SCROLL INDICATOR
   ============================================================ */

.bte-scroll-indicator {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-display);
    font-size: var(--text-xs);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    opacity: 0.7;
    color: var(--bte-white);
}

.bte-scroll-indicator__circle {
    position: relative;
    width: 2.25rem;
    height: 2.25rem;
    /* 2026-07-24 — the indicator is a row flex (circle + label). With the
       default flex-shrink:1 the circle's width got squeezed by the label
       when space was tight (narrow mobile), rendering it as an oval.
       flex-shrink:0 + aspect-ratio:1 keep it a true circle everywhere. */
    flex: 0 0 auto;
    aspect-ratio: 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: bte-bounce 2s ease-in-out infinite;
}

.bte-scroll-indicator__circle::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px dashed currentColor;
    animation: bte-rotate 6s linear infinite;
}

@keyframes bte-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes bte-bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(5px); }
}

/* Global scroll-to-continue — fixed to the viewport for the whole
   site (see footer.php), replacing the old per-section indicators.
   No background/pill — just resets default button styling so the
   plain arrow-in-circle + text shows through as-is. High z-index —
   sits above pinned/sliding sections and their own temporary
   high-z-index transitions. */
.bte-global-scroll {
    position: fixed;
    left: 50%;
    bottom: var(--space-6);
    transform: translateX(-50%);
    z-index: 100;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: opacity var(--dur-fast) var(--ease-out);
}

.bte-global-scroll .bte-scroll-indicator {
    pointer-events: none;
}

/* Switches to dark when currently sitting over a light-background
   section (see bte-core.js, which toggles this based on which
   .bte-section is behind the indicator's fixed position) — white
   text is invisible against those sections' off-white background. */
.bte-global-scroll.is-on-light .bte-scroll-indicator {
    color: var(--bte-navy);
}

@media (max-width: 1023px) {
    .bte-global-scroll {
        bottom: var(--space-4);
    }
}

/* ============================================================
   VERTICAL LABELS (rotated edge labels)
   ============================================================ */

.bte-vertical-label {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    transform-origin: center center;
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    white-space: nowrap;
    background-color: var(--bte-red);
    color: var(--bte-white);
    padding: var(--space-2) var(--space-4);
    z-index: var(--z-above);
}

.bte-vertical-label--navy {
    background-color: var(--bte-navy);
    color: var(--bte-white);
}

/* ============================================================
   CARDS
   ============================================================ */

.bte-card {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background-color: var(--bte-navy-mid);
}

.bte-card--bordered {
    border: 1.5px dashed var(--bte-teal);
    box-shadow: 0 0 0 0 var(--bte-teal);
    transition: box-shadow var(--dur-mid) var(--ease-out);
}
.bte-card--bordered:hover,
.bte-card--bordered.is-active {
    box-shadow: var(--glow-teal);
}

.bte-card__image {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
}

.bte-card__body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-6);
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
}

.bte-card__title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 800;
    text-transform: uppercase;
    color: var(--bte-white);
    line-height: 1.1;
    margin-bottom: var(--space-4);
}

/* ============================================================
   PROGRESS BAR (hero slider)
   ============================================================ */

.bte-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: rgba(255,255,255,0.15);
    z-index: var(--z-above);
}

.bte-progress-bar__fill {
    height: 100%;
    background-color: var(--bte-red);
    transition: width linear;
    width: 0%;
}

/* ============================================================
   FORM ELEMENTS
   ============================================================ */

.bte-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.bte-field__label {
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bte-white);
    opacity: 0.8;
}

.bte-field__input,
.bte-field__textarea {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.25);
    color: var(--bte-white);
    padding: var(--space-3) 0;
    font-size: var(--text-base);
    outline: none;
    transition: border-color var(--dur-fast) var(--ease-out);
    width: 100%;
}

.bte-field__input:focus,
.bte-field__textarea:focus {
    border-bottom-color: var(--bte-teal);
}

.bte-field__textarea {
    resize: vertical;
    min-height: 100px;
}

.bte-field__input::placeholder,
.bte-field__textarea::placeholder {
    color: rgba(255,255,255,0.3);
}

/* Checkbox */
.bte-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    cursor: pointer;
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.7);
}

.bte-checkbox input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--bte-teal);
    flex-shrink: 0;
    margin-top: 2px;
}

/* ============================================================
   BRAND LOGO TILES
   ============================================================ */

.bte-brand-logo {
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4) var(--space-6);
    transition: transform var(--dur-fast) var(--ease-spring);
}
.bte-brand-logo:hover { transform: scale(1.04); }
.bte-brand-logo img   { max-height: 60px; width: auto; object-fit: contain; }

/* ============================================================
   NEWS ARTICLE CARDS
   ============================================================ */

.bte-article-card {
    border-left: 1px solid rgba(255,255,255,0.1);
    padding-left: var(--space-6);
}

.bte-article-card__date {
    font-size: var(--text-sm);
    color: var(--bte-red);
    letter-spacing: 0.05em;
    margin-bottom: var(--space-3);
}

.bte-article-card__title {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    font-weight: 500;
    line-height: 1.45;
    color: var(--bte-navy);
    margin-bottom: var(--space-4);
}

.bte-section--light .bte-article-card__title { color: var(--bte-navy); }

.bte-article-card__image {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    border-radius: var(--radius-md);
    margin-top: var(--space-4);
}

/* ============================================================
   TESTIMONIAL
   ============================================================ */

.bte-testimonial__quote {
    font-family: var(--font-body);
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 400;
    line-height: 1.5;
    color: var(--bte-white);
}

.bte-testimonial__author {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bte-white);
    margin-top: var(--space-6);
}

.bte-testimonial__author span {
    color: var(--bte-red);
    margin-left: var(--space-2);
}

/* ============================================================
   AFTERSALES MENU LINKS
   ============================================================ */

.bte-aftersales-menu {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.bte-aftersales-menu__item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 800;
    text-transform: uppercase;
    color: var(--bte-navy);
    transition: gap var(--dur-fast) var(--ease-out), color var(--dur-fast);
    cursor: pointer;
}

.bte-aftersales-menu__item:hover { gap: var(--space-6); color: var(--bte-navy-mid); }

.bte-aftersales-menu__item svg {
    flex-shrink: 0;
    color: var(--bte-navy);
}

/* ============================================================
   DEPOT CONTACT BLOCK
   ============================================================ */

.bte-depot {
    padding-bottom: var(--space-8);
    border-bottom: 1px dashed rgba(255,255,255,0.15);
}

.bte-depot:last-child { border-bottom: none; }

.bte-depot__name {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 800;
    text-transform: uppercase;
    color: var(--bte-red);
    margin-bottom: var(--space-4);
}

.bte-depot__address {
    font-size: var(--text-sm);
    line-height: 1.7;
    color: rgba(255,255,255,0.8);
    margin-bottom: var(--space-5);
}

.bte-depot__address a { color: var(--bte-teal); }
.bte-depot__address a:hover { text-decoration: underline; }

.bte-depot__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* ============================================================
   ANIMATION HELPERS (for ED Animation Engine hooks)
   ============================================================ */

/* Elements marked for entrance animation */
[data-bte-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity var(--dur-slow) var(--ease-out),
        transform var(--dur-slow) var(--ease-out);
}

[data-bte-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

[data-bte-reveal="left"] {
    transform: translateX(-40px);
}
[data-bte-reveal="left"].is-visible {
    transform: translateX(0);
}

[data-bte-reveal="right"] {
    transform: translateX(40px);
}
[data-bte-reveal="right"].is-visible {
    transform: translateX(0);
}

[data-bte-reveal="scale"] {
    transform: scale(0.92);
}
[data-bte-reveal="scale"].is-visible {
    transform: scale(1);
}

/* Stagger delay helpers */
[data-bte-delay="1"] { transition-delay: 100ms; }
[data-bte-delay="2"] { transition-delay: 200ms; }
[data-bte-delay="3"] { transition-delay: 300ms; }
[data-bte-delay="4"] { transition-delay: 400ms; }
[data-bte-delay="5"] { transition-delay: 500ms; }
[data-bte-delay="6"] { transition-delay: 600ms; }

/* Parallax container */
[data-bte-parallax] {
    will-change: transform;
}

/* Marquee */
.bte-marquee-track {
    display: flex;
    width: max-content;
    will-change: transform;
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

:focus-visible {
    outline: 2px solid var(--bte-teal);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

@media (max-width: 1024px) {
    .bte-split {
        grid-template-columns: 1fr;
    }
    .bte-split--60-40,
    .bte-split--40-60 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    :root {
        --text-hero:  clamp(2.5rem, 10vw, 4.5rem);
        --text-bleed: clamp(3rem, 14vw, 6rem);
        --gutter: 1.25rem;
    }

    .bte-btn {
        padding: 0.8em 1.5em;
        font-size: var(--text-xs);
    }
}

@media (max-width: 480px) {
    :root {
        --gutter: 1rem;
    }
}

/* ============================================================
   ADMIN BAR COMPATIBILITY
   When logged in, WP admin bar is 32px (desktop) / 46px (mobile)
   Our fixed header needs to shift down to clear it
   ============================================================ */

.admin-bar .bte-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .bte-header {
        top: 46px;
    }
}

/* Also push utility bar content down on mobile */
@media screen and (max-width: 600px) {
    .admin-bar .bte-header {
        top: 0; /* WP moves admin bar off screen on very small screens */
    }
}
