/*
Theme Name: Logistics
Theme URI: https://example.com
Author: Ola
Author URI: https://example.com
Description: A freight and 3PL theme for trucking companies and freight brokerages. Full truckload, LTL, flatbed, expedited, brokerage and managed transportation.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: logistics
Tags: logistics, freight, trucking, business, responsive
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
    /* Brand */
    --navy:        #0E2A47;
    --navy-deep:   #081B2E;
    --steel:       #1B3A5C;
    --orange:      #F26522;   /* Safety orange - CTAs only */
    --orange-dark: #D4521A;
    --amber:       #FFB020;

    /* Semantic */
    --color-primary:   var(--navy);
    --color-accent:    var(--orange);
    --color-dark:      var(--navy-deep);

    /* Neutrals */
    --white:      #FFFFFF;
    --gray-50:    #F7F9FB;
    --gray-100:   #EDF1F5;
    --gray-200:   #DCE3EB;
    --gray-300:   #C2CCD8;
    --gray-500:   #6B7A8C;
    --gray-700:   #3D4A5A;
    --gray-900:   #1A2230;

    /* Feedback */
    --success:    #1E7A4C;
    --success-bg: #E7F4ED;
    --error:      #B32318;
    --error-bg:   #FDECEA;

    /* Typography */
    --font-heading: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --text-xs:   0.8125rem;
    --text-sm:   0.9375rem;
    --text-base: 1.0625rem;
    --text-lg:   1.25rem;
    --text-xl:   1.5rem;
    --text-2xl:  2rem;
    --text-3xl:  2.75rem;
    --text-4xl:  3.75rem;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-24: 6rem;

    /* Structure */
    --container:    1200px;
    --container-sm: 820px;
    --radius:       6px;
    --radius-lg:    12px;

    --shadow-sm: 0 1px 2px rgba(14, 42, 71, 0.08);
    --shadow:    0 4px 16px rgba(14, 42, 71, 0.10);
    --shadow-lg: 0 12px 40px rgba(14, 42, 71, 0.16);

    --transition: 180ms ease;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.65;
    color: var(--gray-700);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
}

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

/* ==========================================================================
   Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.1;
    color: var(--navy);
    margin: 0 0 var(--space-4);
    letter-spacing: -0.01em;
    text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 5vw, var(--text-4xl)); }
h2 { font-size: clamp(1.875rem, 3.5vw, var(--text-3xl)); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p {
    margin: 0 0 var(--space-4);
    text-wrap: pretty;
}

a {
    color: var(--steel);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover {
    color: var(--orange);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--amber);
    outline-offset: 2px;
    border-radius: 2px;
}

ul, ol {
    margin: 0 0 var(--space-4);
    padding-left: var(--space-6);
}

.lead {
    font-size: var(--text-lg);
    color: var(--gray-700);
    line-height: 1.6;
}

.eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: var(--space-3);
}

.text-center { text-align: center; }

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

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    padding: var(--space-3) var(--space-6);
    background: var(--navy);
    color: var(--white);
    font-weight: 600;
}

.skip-link:focus {
    left: var(--space-4);
    top: var(--space-4);
    color: var(--white);
}

/* Honeypot - hidden from humans, present for bots. */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}