/* =====================================================================
   Load-Perfect — Design System
   Built for clarity: large type, high contrast, big touch targets,
   light + dark themes. Sections:
     1) Tokens (light + dark)  2) Reset/base  3) Layout  4) Header
     5) Hero  6) Content sections  7) Buttons  8) Modals
     9) Forms + combobox  10) Footer  11) Utilities  12) Responsive
   ===================================================================== */

/* ----------------------------------------------------------------- */
/* 1. Design tokens                                                  */
/* ----------------------------------------------------------------- */
:root {
    /* Brand (constant across themes) */
    --brand:            #1a3a8f;
    --brand-dark:       #142d70;
    --brand-light:      #2f55c0;
    --accent:           #f5a623;
    --accent-dark:      #d98c0d;
    --on-brand:         #ffffff;

    /* Semantic tokens — LIGHT theme defaults */
    --bg:               #eef1f7;
    --surface:          #ffffff;
    --surface-2:        #f4f6fb;
    --text:             #14213d;
    --text-muted:       #4a5568;
    --heading:          #0f2150;
    --border:           #d4dbe8;
    --link:             #1a3a8f;

    --danger:           #c0392b;
    --danger-bg:        #fdecea;
    --success:          #1e7e45;
    --success-bg:       #e7f6ed;

    --logo-chip:        #ffffff; /* logo always sits on this (contrasts black) */

    /* Type scale (generous, readable) */
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --fs-base: 1.125rem;       /* 18px base */
    --fs-sm:   1rem;
    --fs-lg:   1.25rem;
    --fs-xl:   1.5rem;
    --fs-2xl:  2rem;
    --fs-3xl:  2.5rem;
    --fs-hero: clamp(2.25rem, 6vw, 3.5rem);

    /* Spacing */
    --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem;
    --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem;

    --radius-sm: 8px; --radius: 12px; --radius-lg: 18px;
    --shadow-sm: 0 1px 3px rgba(15,33,80,.10);
    --shadow:    0 8px 24px rgba(15,33,80,.12);
    --shadow-lg: 0 24px 60px rgba(8,15,40,.30);
    --transition: .2s ease;

    --container: 1080px;
    --header-h: 76px;

    color-scheme: light;
}

[data-theme="dark"] {
    --bg:               #0c1426;
    --surface:          #15203a;
    --surface-2:        #1c2944;
    --text:             #eaf0fb;
    --text-muted:       #a7b4cc;
    --heading:          #ffffff;
    --border:           #2c3a59;
    --link:             #8fb0ff;
    --brand:            #3a63d0;   /* lift brand blue for contrast on dark */
    --brand-dark:       #2a4baf;
    --danger-bg:        #3a1d1a;
    --success-bg:       #16321f;
    color-scheme: dark;
}

/* ----------------------------------------------------------------- */
/* 2. Reset & base                                                   */
/* ----------------------------------------------------------------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
    font-family: var(--font);
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    overflow-x: hidden;               /* prevent off-canvas swipe / horizontal scroll */
    -webkit-font-smoothing: antialiased;
    transition: background var(--transition), color var(--transition);
}
img { max-width: 100%; display: block; }
a { color: var(--link); }
h1,h2,h3,h4 { color: var(--heading); line-height: 1.2; font-weight: 700; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ----------------------------------------------------------------- */
/* 3. Layout                                                         */
/* ----------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--s-5); }
.section { padding-block: var(--s-8); }
.section--tint { background: var(--surface-2); }
.section__head { max-width: 760px; margin: 0 auto var(--s-6); text-align: center; }
.section__head h2 { font-size: var(--fs-2xl); display: inline-flex; align-items: center; gap: var(--s-3); }
.section__head h2 i { color: var(--brand); }
.section__head p { color: var(--text-muted); font-size: var(--fs-lg); margin-top: var(--s-2); }

/* ----------------------------------------------------------------- */
/* 4. Header                                                         */
/* ----------------------------------------------------------------- */
.site-header {
    position: sticky; top: 0; z-index: 50;
    height: var(--header-h);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center;
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.brand { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; }
.brand__logo { background: var(--logo-chip); border-radius: 8px; padding: 5px 9px; display: flex; box-shadow: var(--shadow-sm); }
.brand__logo img { height: 40px; width: auto; }
.brand__name { font-weight: 800; color: var(--heading); font-size: var(--fs-lg); }

/* Theme toggle */
.theme-toggle {
    display: inline-flex; align-items: center; gap: var(--s-2);
    background: var(--surface-2); color: var(--text);
    border: 1px solid var(--border); border-radius: 999px;
    padding: .55rem 1rem; font: inherit; font-size: var(--fs-sm); font-weight: 600;
    cursor: pointer; transition: all var(--transition);
}
.theme-toggle:hover { border-color: var(--brand); }
.theme-toggle .label-dark { display: none; }
[data-theme="dark"] .theme-toggle .label-light { display: none; }
[data-theme="dark"] .theme-toggle .label-dark { display: inline; }

/* ----------------------------------------------------------------- */
/* 5. Hero                                                           */
/* ----------------------------------------------------------------- */
.hero {
    /* Swap the placeholder truck photo here (single source of truth): */
    --hero-image: url("../truck-hero.jpg");
    position: relative;
    background: linear-gradient(135deg, rgba(10,18,40,.80), rgba(20,45,112,.72)), var(--hero-image);
    background-size: cover; background-position: center;
    color: #fff; text-align: center;
    padding-block: clamp(var(--s-7), 10vw, 5.5rem);
}
.hero__actions {
    display: flex; flex-wrap: wrap;
    gap: var(--s-5); justify-content: center;
}

/* Light, even attention glow on the Apply button (triggered from Requirements).
   No scale/offset — a soft ring grows evenly from the button edge and fades,
   so it reads from the center and replays identically on each click. */
@keyframes applyGlow {
    0%   { box-shadow: 0 0 0 0 rgba(245,166,35,.45), var(--shadow); }
    100% { box-shadow: 0 0 0 12px rgba(245,166,35,0), var(--shadow); }
}
.btn--pulse { animation: applyGlow 0.9s ease-out; }

/* ----------------------------------------------------------------- */
/* 6. Content sections                                               */
/* ----------------------------------------------------------------- */
.panel {
    max-width: 820px; margin-inline: auto;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: var(--s-6); box-shadow: var(--shadow-sm);
}
.prose p { color: var(--text); margin-bottom: var(--s-4); font-size: var(--fs-base); }
.prose p:last-child { margin-bottom: 0; }

.req-list { list-style: none; }
.req-list li { position: relative; padding-left: 2.25rem; margin-bottom: var(--s-4); font-size: var(--fs-base); }
.req-list li::before {
    content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; left: 0; top: .15rem; color: var(--success);
}

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); max-width: 820px; margin-inline: auto; }
.contact-card { background: var(--surface); border: 1px solid var(--border); border-left: 5px solid var(--brand); border-radius: var(--radius); padding: var(--s-5); }
.contact-card .role { color: var(--brand); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: var(--fs-sm); }
.contact-card .name { font-size: var(--fs-xl); margin: var(--s-1) 0 var(--s-4); }
.contact-card p { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.contact-card p:last-child { margin-bottom: 0; }
.contact-card i { color: var(--brand); width: 22px; text-align: center; }

/* ----------------------------------------------------------------- */
/* 7. Buttons                                                        */
/* ----------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
    font: inherit; font-weight: 700; line-height: 1; text-align: center; text-decoration: none;
    padding: 1rem 1.75rem; border: 3px solid transparent; border-radius: var(--radius-sm);
    cursor: pointer; transition: all var(--transition); white-space: nowrap;
}
.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn--primary { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.btn--primary:hover:not(:disabled) { background: var(--brand-dark); border-color: var(--brand-dark); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn--accent { background: var(--accent); color: #2a1c00; border-color: var(--accent); }
.btn--accent:hover:not(:disabled) { background: var(--accent-dark); border-color: var(--accent-dark); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn--ghost:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.btn--xl { padding: 1.4rem 2.4rem; font-size: var(--fs-xl); border-radius: var(--radius); min-width: 260px; }
.btn--block { width: 100%; }
.btn i { font-size: 1.1em; }

/* The two big primary actions on the hero */
.hero .btn--xl { box-shadow: var(--shadow); }

/* ----------------------------------------------------------------- */
/* 8. Modals (native <dialog>)                                       */
/* ----------------------------------------------------------------- */
/* The modals are intentionally NOT opened with showModal(): the native
   top layer would sit above the Google reCAPTCHA challenge popup and hide it.
   Instead they open via the [open] attribute as a normal high-z-index overlay
   with a separate backdrop, so the reCAPTCHA challenge (z-index ~2^31) shows
   in front of the form. */
.modal-backdrop { position: fixed; inset: 0; z-index: 1000; background: rgba(6,12,28,.62); backdrop-filter: blur(2px); }
.modal-backdrop[hidden] { display: none; }

dialog.modal { border: none; padding: 0; }
dialog.modal:not([open]) { display: none; }
dialog.modal[open] {
    position: fixed; z-index: 1001;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    margin: 0; width: min(720px, 94vw); max-height: 92vh;
    display: flex; flex-direction: column; overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--surface); color: var(--text);
    box-shadow: var(--shadow-lg);
}
.modal__head {
    position: sticky; top: 0; z-index: 2;
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
    padding: var(--s-5) var(--s-6); background: var(--brand); color: #fff;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.modal__head h2 { color: #fff; font-size: var(--fs-xl); display: flex; align-items: center; gap: var(--s-3); }
.modal__close {
    background: rgba(255,255,255,.18); color: #fff; border: none; cursor: pointer;
    width: 44px; height: 44px; border-radius: 10px; font-size: 1.3rem; line-height: 1;
    display: grid; place-items: center; transition: background var(--transition);
}
.modal__close:hover { background: rgba(255,255,255,.34); }
.modal__body { padding: var(--s-6); overflow-y: auto; flex: 1 1 auto; }
.modal__head { flex: 0 0 auto; }
.modal__intro { color: var(--text-muted); margin-bottom: var(--s-5); font-size: var(--fs-base); }

/* ----------------------------------------------------------------- */
/* 9. Forms                                                          */
/* ----------------------------------------------------------------- */
.form-group-title {
    font-size: var(--fs-lg); color: var(--brand);
    margin: var(--s-6) 0 var(--s-4); padding-bottom: var(--s-2);
    border-bottom: 2px solid var(--border);
}
.form-group-title:first-of-type { margin-top: 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-5); }

.field { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-4); }
.field--full { grid-column: 1 / -1; }
/* In a 2-column row, grid stretches both cells to equal height. Push the input
   to the bottom of the cell so inputs line up even when one field has a hint
   line and the other doesn't. */
.field > .input,
.field > .textarea,
.field > .combobox,
.field > .dropzone { margin-top: auto; }
.field > label { font-weight: 700; font-size: var(--fs-base); color: var(--heading); }
.field .req { color: var(--danger); }
.field .hint { font-size: var(--fs-sm); color: var(--text-muted); }

.input, .textarea, select.input {
    width: 100%; font: inherit; font-size: var(--fs-base); color: var(--text);
    background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-sm);
    padding: .8rem 1rem; transition: border-color var(--transition), box-shadow var(--transition);
}
.input::placeholder, .textarea::placeholder { color: var(--text-muted); opacity: .7; }
.input:focus, .textarea:focus, select.input:focus {
    outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(47,85,192,.22);
}
.textarea { resize: vertical; min-height: 120px; }

/* Validation states + messages */
.field-error { color: var(--danger); font-size: var(--fs-sm); font-weight: 600; display: none; align-items: center; gap: var(--s-2); }
.field.is-invalid .field-error { display: flex; }
.field.is-invalid .input,
.field.is-invalid .textarea,
.field.is-invalid select.input,
.field.is-invalid .combobox__input,
.field.is-invalid .dropzone { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(192,57,43,.18); }
.field.is-valid .input,
.field.is-valid .combobox__input { border-color: var(--success); }

/* Searchable combobox (state selector) */
.combobox { position: relative; }
.combobox__input { padding-right: 2.5rem; }
.combobox::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; font-size: .9rem; }
.combobox__list {
    position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px);
    background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-sm);
    max-height: 260px; overflow-y: auto; box-shadow: var(--shadow); list-style: none; padding: 4px;
}
.combobox__list[hidden] { display: none; }
.combobox__option { padding: .65rem .85rem; border-radius: 6px; cursor: pointer; font-size: var(--fs-base); }
.combobox__option:hover, .combobox__option.is-active { background: var(--brand); color: #fff; }
.combobox__empty { padding: .65rem .85rem; color: var(--text-muted); }

/* File dropzone */
.dropzone {
    position: relative; border: 2px dashed var(--brand); border-radius: var(--radius);
    background: var(--surface-2); padding: var(--s-5) var(--s-4); text-align: center; cursor: pointer;
    transition: all var(--transition);
}
.dropzone:hover, .dropzone.is-dragover { background: var(--surface); border-style: solid; }
.dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone i.dz-icon { font-size: 2rem; color: var(--brand); margin-bottom: var(--s-2); }
.dropzone .dz-title { font-weight: 700; }
.dropzone .dz-sub { font-size: var(--fs-sm); color: var(--text-muted); }
.file-list { margin-top: var(--s-3); text-align: left; }
.file-row { display: flex; align-items: flex-start; gap: var(--s-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .5rem .75rem; margin-top: var(--s-2); font-size: var(--fs-sm); }
.file-row i { color: var(--brand); flex: 0 0 auto; margin-top: 3px; }
.file-row .name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.file-row .size { flex: 0 0 auto; color: var(--text-muted); white-space: nowrap; margin-left: var(--s-2); }
.file-row .remove { flex: 0 0 auto; background: none; border: none; color: var(--danger); cursor: pointer; font-size: 1.2rem; line-height: 1; padding: 0 .25rem; }

/* honeypot (hidden from humans) */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Form-level alert banner */
.form-alert { display: none; gap: var(--s-3); padding: var(--s-4); border-radius: var(--radius-sm); margin-bottom: var(--s-5); font-size: var(--fs-base); align-items: flex-start; }
.form-alert.is-visible { display: flex; }
.form-alert--success { background: var(--success-bg); color: var(--success); border: 1px solid var(--success); }
.form-alert--error { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger); }
.form-alert i { font-size: 1.3rem; margin-top: 1px; }

/* ----------------------------------------------------------------- */
/* 10. Footer                                                        */
/* ----------------------------------------------------------------- */
.site-footer { background: var(--brand-dark); color: rgba(255,255,255,.85); padding-block: var(--s-6); text-align: center; }
.site-footer a { color: #fff; }
.site-footer .brand__logo { display: inline-flex; margin: 0 auto var(--s-4); }

/* ----------------------------------------------------------------- */
/* 11. Utilities                                                     */
/* ----------------------------------------------------------------- */
.hidden { display: none !important; }
.text-center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------------- */
/* 12. Responsive                                                    */
/* ----------------------------------------------------------------- */
@media (max-width: 720px) {
    :root {
        --fs-base: 1rem;        /* 16px — smaller, less cramped on phones */
        --fs-sm:   0.9375rem;
        --fs-lg:   1.0625rem;
        --fs-xl:   1.2rem;
        --fs-2xl:  1.4rem;
        --fs-3xl:  1.6rem;
    }
    body { line-height: 1.55; }
    .form-grid { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; }
    .hero__actions { flex-direction: column; align-items: stretch; }
    .hero .btn--xl { min-width: 0; width: 100%; padding: 1.1rem 1.5rem; }
    .section { padding-block: var(--s-6); }            /* tighter vertical rhythm */
    .section__head { margin-bottom: var(--s-5); }
    .panel { padding: var(--s-4); }                    /* About/Requirements take less room */
    .prose p { margin-bottom: var(--s-3); }
    .req-list li { margin-bottom: var(--s-3); padding-left: 1.9rem; }
    .contact-card { padding: var(--s-4); }
    .modal__body { padding: var(--s-5); }
    .modal__head { padding: var(--s-4) var(--s-5); }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; transition: none !important; animation: none !important; } }