/* ============================================================
   Sabi Logistics — Layout System (single source of truth)
   ============================================================ */

:root {
    /* Containers */
    --container: min(94%, 1440px);
    --container-large: min(96%, 1600px);
    --container-narrow: min(94%, 900px);
    --section-space: clamp(80px, 8vw, 140px);
    --section-space-sm: clamp(64px, 7vw, 110px);

    /* Legacy aliases */
    --sabi-container-wide: var(--container);
    --sabi-space-section: var(--section-space);
    --sabi-space-section-sm: var(--section-space-sm);
    --sabi-gap-grid: clamp(1.25rem, 2.5vw, 2.125rem);

    /* Typography scale */
    --sabi-h1: clamp(42px, 7vw, 92px);
    --sabi-h2: clamp(34px, 5vw, 72px);
    --sabi-h3: clamp(22px, 2.8vw, 36px);
    --sabi-body: clamp(15px, 1.15vw, 18px);
    --sabi-lead: clamp(16px, 1.2vw, 19px);

    --sabi-label-size: 0.6875rem;
    --sabi-label-tracking: 0.16em;
    --sabi-hover-y: -3px;
    --sabi-duration: 0.4s;
    --sabi-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Overflow guard --- */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

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

/* --- Global containers --- */
.container {
    width: var(--container);
    max-width: 100%;
    margin-inline: auto;
}

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

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

/* All theme section wrappers → unified width */
.header-container,
.hero-container,
.about-container,
.services-top,
.services-grid,
.process-container,
.industries-container,
.testimonials-container,
.cta-container,
.footer-container,
.why-section__inner,
.about-page-container,
.about-story-container,
.mission-vision-container,
.about-why-container,
.services-page-container,
.services-grid-container,
.services-support-container,
.contact-page-container,
.contact-main-container,
.contact-map-container,
.quote-page-container,
.quote-form-container,
.site-announcement__inner {
    width: var(--container);
    max-width: 100%;
    margin-inline: auto;
}

.about-bottom-container,
.services-bottom-container,
.quote-bottom-container {
    width: var(--container-narrow);
    max-width: 100%;
    margin-inline: auto;
}

/* --- Global typography --- */
h1,
.hero-heading,
.about-page-content h1,
.services-page-content h1,
.contact-page-content h1,
.quote-page-content h1 {
    font-size: var(--sabi-h1);
    line-height: 1.1;
    letter-spacing: -0.03em;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

h2,
.services-top h2,
.industries-top h2,
.testimonials-top h2,
.footer-heading h2,
.why-section__heading,
.about-content-card h2,
.cta-content h2,
.about-story-content h2,
.about-why-top h2,
.about-bottom-container h2,
.services-grid-top h2,
.services-support-content h2,
.services-bottom-container h2,
.quote-bottom-container h2 {
    font-size: var(--sabi-h2);
    line-height: 1.12;
    letter-spacing: -0.03em;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

h3 {
    font-size: var(--sabi-h3);
    line-height: 1.2;
}

p,
.services-top p,
.industries-top p,
.testimonials-top p,
.why-section__desc,
.about-content-card p,
.hero-desc {
    font-size: var(--sabi-body);
    line-height: 1.7;
}

body {
    font-size: var(--sabi-body);
    line-height: 1.65;
}

/* --- Section rhythm (homepage + inner sections) --- */
.services-section,
.process-section,
.industries-section,
.testimonials-section,
.cta-section,
.about-story-section,
.mission-vision-section,
.about-why-section,
.services-grid-section,
.services-support-section,
.contact-main-section,
.quote-form-section {
    padding-block: var(--section-space);
}

/* About + hero use custom overlap spacing — see about-section.css / hero.css */
.about-section,
.hero-section {
    padding-block: 0;
}

/* --- Buttons — touch-friendly baseline --- */
.btn,
.primary-btn,
.secondary-btn,
.hero-primary-btn,
.hero-secondary-btn,
.about-btn,
.cta-btn,
.why-section__cta,
.about-page-btn,
.services-page-btn,
.quote-btn,
.hotline-btn,
.mobile-quote-btn,
.mobile-drawer__cta,
.sabi-form-submit,
.contact-submit-btn,
.quote-submit-btn {
    min-height: 56px;
    font-size: clamp(0.9375rem, 1vw, 1rem);
    padding-inline: clamp(1.125rem, 2.5vw, 1.75rem);
    color: inherit;
}

.hero-primary-btn,
.quote-btn,
.mobile-drawer__cta,
.sabi-form-submit,
.contact-submit-btn,
.quote-submit-btn {
    color: #fff !important;
    -webkit-text-fill-color: #fff;
}

/* --- Anchor scroll offset --- */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

section[id],
[id="about-sabi-logistics"],
[id="mission"],
[id="services-grid"] {
    scroll-margin-top: calc(var(--header-h, 96px) + 16px);
}

#primary > section {
    scroll-margin-top: calc(var(--header-h, 96px) + 12px);
}

a:focus-visible,
button:focus-visible {
    outline: 2px solid rgba(255, 107, 0, 0.75);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .testimonial-track {
        animation: none !important;
    }
}

/* Forms — security & feedback */
.sabi-hp {
    position: absolute;
    left: -9999px;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.sabi-form-notice {
    margin-top: 1rem;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.sabi-form-notice--success { color: #6ee7a0; }
.sabi-form-notice--error { color: #fca5a5; }
.sabi-form-notice--info { color: rgba(255, 255, 255, 0.75); }

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

/* Nav active states */
.mobile-drawer__nav .current-menu-item > .mobile-drawer__item-row > a,
.mobile-drawer__nav .current-menu-ancestor > .mobile-drawer__item-row > a {
    color: #ff6b00;
}

.main-menu .current-menu-item > a::after,
.main-menu .current-menu-ancestor > a::after {
    transform: scaleX(1);
}

/* --- Default grid columns (desktop) --- */
.services-grid,
.services-grid-wrap {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sabi-gap-grid);
}

.industries-grid-wrap {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sabi-gap-grid);
}

.footer-main {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 3rem);
}

.about-why-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sabi-gap-grid);
}

.process-wrap {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sabi-gap-grid);
}

/* Decorative overflow containment */
.hero-section,
.about-section,
.services-section,
.industries-section,
.testimonials-section,
.cta-section,
.site-header,
#primary,
.site-footer {
    overflow-x: clip;
    max-width: 100%;
}

.about-glow,
.industries-glow,
.services-glow,
.footer-glow,
.cta-glow,
.testimonials-glow,
.why-section__glow,
.hero-glow,
.hero-motion,
.hero-motion__mesh {
    max-width: 100vw;
    pointer-events: none;
}