/* ==========================================================================
   vsg.css — Virtual SA Group site styles (staffing version, 2026-10-23)

   ONE stylesheet for every page. Sections are in page order:
     1. Brand tokens (colors, widths)
     2. Base elements and accessibility helpers
     3. Header and main menu
     4. Buttons and links
     5. Shared section layout
     6. Home: hero, services, specialties, steps, about, CTA
     7. Careers page
     8. Forms (hire.php, apply.php)
     9. Footer
    10. Responsive breakpoints and motion preferences

   Accessibility rules followed (WCAG 2.2 AA):
     - Body text 1.0625rem (17px) or larger; nothing below 0.9375rem (15px).
     - All text/background pairs meet at least 4.5:1 contrast.
     - Visible 3px focus outline on every interactive element.
     - Touch targets at least 44px tall.
   ========================================================================== */

/* 1. BRAND TOKENS ------------------------------------------------------- */
:root{
  --navy:#06111d;        /* page background */
  --navy-2:#081725;      /* alternate section background */
  --navy-3:#0b2031;      /* cards */
  --navy-4:#10283a;      /* highlighted cards / notices */
  --gold:#d79212;        /* borders and button edges */
  --gold-bright:#f0ad28; /* headings accents and links on navy */
  --line:#8a6218;        /* thin gold dividers */
  --white:#f6f7f8;       /* main text */
  --muted:#c9d2d9;       /* secondary text (≈11:1 on navy) */
  --aqua:#74d8df;        /* parent-company name in footer */
  --focus:#ffbf47;       /* keyboard focus ring */
  --shell:1180px;        /* max content width */
}

/* 2. BASE ELEMENTS ------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--navy)}
body{margin:0;min-width:320px;background:var(--navy);color:var(--white);
  font-family:Arial,Helvetica,sans-serif;font-size:1.0625rem;line-height:1.6}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{line-height:1.15}
p{margin:0 0 .75rem}

/* Keyboard focus: always visible */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--focus);outline-offset:3px}

/* "Skip to main content" link: hidden until focused */
.skip-link{position:absolute;left:1rem;top:-6rem;z-index:9999;background:#fff;color:#000;padding:.75rem 1rem;font-weight:800}
.skip-link:focus{top:1rem}

/* Text read by screen readers only */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* Centered content container */
.shell{width:min(var(--shell),calc(100% - 32px));margin-inline:auto}

/* Small gold label above headings */
.eyebrow{margin:0 0 .5rem;color:var(--gold-bright);font-weight:900;font-size:.95rem;text-transform:uppercase;letter-spacing:.1em}
.lead{font-size:1.15rem;color:#e8eef2}

/* 3. HEADER AND MAIN MENU ------------------------------------------------- */
.site-header{background:linear-gradient(180deg,#071522,#05101a);border-bottom:1px solid var(--line)}
.header-row{min-height:84px;display:flex;align-items:center;gap:1.5rem;padding:8px 0}
.brand-lockup{display:block;flex:0 0 auto;text-decoration:none}
.brand-lockup img{width:auto;max-height:96px;max-width:min(340px,100%)}
.primary-nav{margin-left:auto}
.primary-nav ul{list-style:none;display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:.25rem 1.25rem;margin:0;padding:0}
.primary-nav a{display:flex;align-items:center;min-height:44px;padding:0 .15rem;text-decoration:none;font-weight:800;font-size:1rem;
  border-bottom:3px solid transparent;white-space:nowrap}
.primary-nav a:hover,.primary-nav a[aria-current="page"]{color:var(--gold-bright);border-bottom-color:var(--gold-bright)}
.primary-nav .nav-cta{padding:0 1rem;border:2px solid var(--gold);border-radius:5px;background:linear-gradient(180deg,#efb43d,#d99719);color:#111}
.primary-nav .nav-cta:hover,.primary-nav .nav-cta[aria-current="page"]{color:#111;border-bottom-color:var(--gold);filter:brightness(1.08)}

/* 4. BUTTONS AND LINKS -------------------------------------------------- */
.button-row{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.4rem}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.6rem 1.25rem;
  border:2px solid var(--gold);border-radius:5px;background:linear-gradient(180deg,#efb43d,#d99719);color:#111;
  text-decoration:none;font-weight:900;font-size:1.05rem;cursor:pointer;font-family:inherit}
.button.secondary{background:#071522;color:var(--gold-bright)}
.button:hover{filter:brightness(1.08)}
.text-link{display:inline-block;margin-top:.25rem;color:var(--gold-bright);font-weight:800;text-underline-offset:3px}
.text-link::after{content:" →"}

/* 5. SHARED SECTION LAYOUT ---------------------------------------------- */
.section{padding:3rem 0;background:var(--navy)}
.section.alt{background:var(--navy-2);border-block:1px solid #18324a}
.section-head{max-width:780px;margin:0 auto 1.75rem;text-align:center}
.section-head h2{margin:0 0 .6rem;font-size:clamp(1.75rem,2.4vw,2.35rem)}
.section-head p{color:var(--muted);font-size:1.1rem;margin:0}

/* 6. HOME ---------------------------------------------------------------- */

/* Hero: text left, photo right */
.hero{border-bottom:1px solid var(--line);background:linear-gradient(90deg,#06111d 0%,#0b2031 100%)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:2rem;align-items:center;padding:3rem 0}
.hero-copy h1{margin:0 0 1rem;font-size:clamp(2.2rem,4vw,3.4rem);text-transform:uppercase;letter-spacing:.01em}
.hero-copy h1 span{display:block;color:var(--gold-bright)}
.hero-image{border:1px solid var(--line);border-radius:6px;overflow:hidden}
.hero-image img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:70% center}

/* Services: two cards */
.service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
.service-card{padding:1.6rem;border:1px solid var(--line);border-top:4px solid var(--gold-bright);border-radius:6px;background:var(--navy-3)}
.service-card h3{margin:0 0 .6rem;font-size:1.5rem;color:var(--gold-bright)}
.service-card p{color:var(--muted)}

/* Specialties: card grid (also used on careers page) */
.specialty-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.specialty{padding:1.3rem;border:1px solid #2a4560;border-radius:6px;background:var(--navy-3)}
.specialty h3{margin:0 0 .45rem;font-size:1.2rem;color:var(--gold-bright);text-transform:uppercase;letter-spacing:.03em}
.specialty p{margin:0;color:var(--muted)}

/* Steps: numbered row */
.step-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;counter-reset:none}
.step-list.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.step{padding:1.3rem;border:1px solid #2a4560;border-radius:6px;background:var(--navy-3)}
.step-number{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-bottom:.75rem;
  border-radius:50%;background:var(--gold-bright);color:#111;font-weight:900;font-size:1.25rem}
.step h3{margin:0 0 .45rem;font-size:1.2rem}
.step p{margin:0;color:var(--muted)}

/* About band: text left, photo right */
.mission-band{border-block:1px solid var(--line);background:linear-gradient(90deg,#07131f,#0b2031 50%,#07131f)}
.mission-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center;padding:3rem 0}
.mission-copy h2{margin:0 0 .75rem;font-size:clamp(1.75rem,2.4vw,2.35rem)}
.mission-copy p{color:var(--muted)}
.check-list{list-style:none;padding:0;margin:1rem 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem 1rem}
.check-list li{position:relative;padding-left:1.7rem}
.check-list li::before{content:"✓";position:absolute;left:0;color:var(--gold-bright);font-weight:900}
.mission-image{border:1px solid var(--line);border-radius:6px;overflow:hidden}
.mission-image img{width:100%;aspect-ratio:3/2;object-fit:cover}

/* Two-way call to action */
.cta-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
.cta-card{padding:1.75rem;border:1px solid var(--line);border-radius:6px;background:var(--navy-4);text-align:center}
.cta-card h2,.cta-card h3{margin:0 0 .5rem;font-size:1.5rem;color:var(--gold-bright)}
.cta-card p{color:#e8eef2}
.cta-card.wide{max-width:820px;margin-inline:auto}

/* 7. CAREERS PAGE ------------------------------------------------------- */
.careers-hero{border-bottom:1px solid var(--line);background:linear-gradient(110deg,#071522,#0a1e2e)}
.careers-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:2rem;align-items:center;padding:3rem 0}
.careers-copy h1{margin:0 0 1rem;font-size:clamp(2.2rem,4vw,3.2rem)}
.priority{margin:1rem 0 0;padding:.8rem 1rem;border-left:5px solid var(--gold-bright);background:var(--navy-4);font-weight:800}
.careers-photo{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#02080d}
.careers-photo img{width:100%}
.branches-panel{border:1px solid var(--line);border-radius:6px;background:#071522;padding:1.5rem}
.branches-heading{margin:0 0 1rem;text-align:center;font-size:clamp(1.35rem,2vw,1.75rem);text-transform:uppercase;letter-spacing:.03em}
.branches-panel img{width:min(820px,100%);margin:auto}
.branch-note{text-align:center;color:var(--muted);margin:1rem auto 0;max-width:820px}

/* 8. FORMS -------------------------------------------------------------- */
.form-page{padding:2.5rem 0 3.5rem}
.form-shell{width:min(940px,calc(100% - 32px));margin-inline:auto}
.form-intro h1{margin:.15rem 0 .75rem;font-size:clamp(2rem,3.4vw,2.8rem)}
.form-intro p{color:var(--muted)}
.form-notice{margin:1rem 0 1.25rem;padding:1rem 1.15rem;border-left:5px solid var(--gold-bright);background:var(--navy-4)}
.form-notice strong{display:block;margin-bottom:.25rem;color:#fff}
.required-key{color:var(--muted);margin:0 0 1rem}
.application-form{border:1px solid var(--line);border-radius:6px;background:var(--navy-2);padding:1.5rem}
.application-form > fieldset{margin:0 0 1.4rem;padding:1.25rem;border:1px solid #37516a;border-radius:4px;background:var(--navy-3)}
.application-form > fieldset > legend{padding:0 .45rem;color:var(--gold-bright);font-size:1.2rem;font-weight:900}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem 1.25rem}
.form-grid .full{grid-column:1/-1}
.field label,.field-label{display:block;margin-bottom:.4rem;color:#f4f6f7;font-weight:800}
.required::after{content:" *";color:var(--gold-bright)}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:.65rem .8rem;border:2px solid #71869a;border-radius:4px;
  background:#fff;color:#101820;font:inherit;font-size:1.0625rem}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--focus);outline-offset:2px;border-color:#111}
.help{display:block;margin-top:.35rem;color:#c3cfd8;font-size:.95rem}

/* Checkbox groups (inner fieldset with its own legend) */
.choice-set{margin:0;padding:0;border:0;min-width:0}
.choice-set > legend{padding:0;margin-bottom:.5rem}
.baseline-note{margin:0 0 .75rem;padding:.6rem .8rem;border-left:4px solid var(--gold-bright);background:var(--navy-4);color:#fff;font-weight:800}
.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem 1rem}
.choice{display:flex;gap:.65rem;align-items:flex-start;min-height:44px;padding-top:.35rem;font-weight:400!important;cursor:pointer}
.choice input{width:1.5rem;height:1.5rem;min-height:0;margin-top:.15rem;flex:0 0 auto;accent-color:var(--gold)}
.file-box{padding:1rem;border:2px dashed #7890a4;border-radius:4px;background:#071522}
.file-box input{background:#fff}
.form-actions{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.privacy-note{color:var(--muted);font-size:.95rem}
/* Per-field errors (FormErrors.php): message under the label + thick yellow border */
.field-error{display:block;margin:.1rem 0 .45rem;color:#ffd27a;font-weight:800;font-size:1rem}
.field [aria-invalid="true"]{border:3px solid var(--focus)}
.error-summary a{color:#ffd27a;font-weight:800;text-underline-offset:3px}
.error-summary{margin:0 0 1.4rem;padding:1rem 1.15rem;border:3px solid var(--focus);border-radius:4px;background:#251b06;color:#fff}
.error-summary h2{margin:0 0 .5rem;font-size:1.25rem}
.error-summary ul{margin:.4rem 0 0}
.success-box{padding:1.75rem;border:1px solid var(--gold);border-radius:6px;background:var(--navy-3)}
.success-box h1{font-size:2.2rem;margin:.25rem 0 .75rem}
.success-box a:not(.button){color:var(--gold-bright)}
/* Honeypot: off-screen field that only bots fill in */
.hp-field{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}

/* 9. FOOTER ------------------------------------------------------------- */
.site-footer{background:#06111d;border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:1.2fr .7fr 1fr;gap:2rem;align-items:start;padding:2rem 0}
.footer-corporate{display:grid;grid-template-columns:72px minmax(0,1fr);gap:.9rem;align-items:center}
.footer-corporate img{width:68px;height:auto}
.footer-corporate p{margin:0}
.trade-name{font-size:.95rem;text-transform:uppercase;letter-spacing:.08em;color:#e6ebee}
.corp-name{margin:.2rem 0 .3rem!important;color:var(--aqua);font-size:1.2rem;font-weight:800}
.corp-name a{display:inline-flex;align-items:center;min-height:32px;text-decoration:none}
.corp-name a:hover{text-decoration:underline}
.copyright{color:var(--muted);font-size:.95rem}
.footer-heading{margin:0 0 .6rem;color:var(--gold-bright);font-size:1.05rem;text-transform:uppercase;letter-spacing:.05em}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li a,.contact-line a{display:inline-flex;align-items:center;min-height:36px}
.site-footer a:hover{text-decoration:underline}
.contact-line{margin:0;color:var(--muted)}
.contact-line a{color:var(--white);text-underline-offset:3px;word-break:break-word}
.footer-slogan{margin-top:.8rem;color:#e1e6e9;text-transform:uppercase;letter-spacing:.12em;font-size:.95rem}

/* 10. RESPONSIVE -------------------------------------------------------- */
@media (max-width:1100px){
  .header-row{flex-direction:column;align-items:flex-start;gap:.5rem;padding:12px 0}
  .primary-nav{margin-left:0;width:100%}
  .primary-nav ul{justify-content:flex-start}
  .step-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .hero-grid,.careers-grid,.mission-grid{grid-template-columns:1fr}
  .specialty-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-corporate{grid-column:1/-1}
}
@media (max-width:640px){
  .service-grid,.specialty-grid,.step-list,.step-list.three,.cta-pair,.check-list,.form-grid,.choice-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .application-form{padding:1rem}
  .application-form > fieldset{padding:1rem}
  .section{padding:2.25rem 0}
  .button-row .button{width:100%}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}