/* ==========================================================================
   Vivid Language Solutions - 2026 homepage refresh
   Scoped styles for the new hero / services / courses sections.
   Kept in its own file so the existing style.css stays untouched.
   ========================================================================== */

:root{
  --vls-navy:#0d2149;
  --vls-navy-deep:#0a1a3a;
  --vls-orange:#e8620c;
  --vls-orange-soft:#fdeee2;
  --vls-text:#3d4a5c;
  --vls-border:#e6eaf0;
}

/* ---------- SINGLE-ROW HEADER ----------
   Replaces the stock orange topbar + separate nav row. One row: brand,
   nav, phone, CTA. Email/address/social stay in the footer. */
.vls-topbar{
  background:#fff;
  border-bottom:1px solid var(--vls-border);
  box-shadow:0 2px 10px rgba(13,33,73,.06);
  position:relative;
  z-index:50;
}
.vls-topbar .container-fluid{padding-left:26px; padding-right:26px;}
.vls-topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:78px;
}
.vls-brand{display:block; flex:0 0 auto; line-height:0;}
/* the wordmark is a 925px-wide PNG rendered down, so it stays sharp */
.vls-brand img{width:300px; max-width:100%; height:auto; display:block;}

.vls-nav{flex:1 1 auto; display:flex; justify-content:center;}
.vls-nav > ul{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; flex-wrap:nowrap;
}
.vls-nav > ul > li{position:relative;}
.vls-nav > ul > li > a{
  display:block;
  padding:28px 13px;
  color:var(--vls-navy);
  font-size:15px;
  font-weight:600;
  white-space:nowrap;
  text-decoration:none;
  transition:color .2s ease;
}
.vls-nav > ul > li > a:hover,
.vls-nav > ul > li:hover > a{color:var(--vls-orange); text-decoration:none;}
.vls-nav li.has-sub > a:after{
  content:"\f107";
  font-family:FontAwesome;
  margin-left:6px;
  font-size:12px;
  opacity:.65;
}
.vls-sub{
  list-style:none; margin:0; padding:8px 0;
  position:absolute; top:100%; left:0;
  min-width:212px;
  background:#fff;
  border:1px solid var(--vls-border);
  border-radius:0 0 5px 5px;
  box-shadow:0 12px 28px rgba(13,33,73,.14);
  opacity:0; visibility:hidden;
  transform:translateY(8px);
  transition:all .2s ease;
  z-index:60;
}
.vls-nav li:hover > .vls-sub{opacity:1; visibility:visible; transform:translateY(0);}
.vls-sub li a{
  display:block;
  padding:9px 18px;
  color:var(--vls-text);
  font-size:14px;
  text-decoration:none;
}
.vls-sub li a:hover{background:#f4f8fd; color:var(--vls-orange); text-decoration:none;}

.vls-topbar-right{display:flex; align-items:center; gap:16px; flex:0 0 auto;}
/* Phone LEFT of email, side by side. The phone used to be deliberately larger
   than the email; Aug 2026 the client asked for them to match, so every size
   below is now written as a PAIR - if you change the phone, change the email in
   the same breakpoint or they drift apart again. The wider gap is what shifts
   the phone leftwards, which is the other half of the same request. */
.vls-topbar-contact{display:flex; flex-direction:row; align-items:center; gap:28px;}
/* NB: no font-size here on purpose. `.vls-topbar-contact a` is (0,1,1) and
   would out-specify the plain `.vls-c-phone` / `.vls-c-email` class rules
   below, so the phone could never be made bigger. Sizes live on the classes. */
.vls-topbar-contact a{
  display:flex; align-items:center; gap:8px;
  color:var(--vls-navy); font-weight:700;
  text-decoration:none; white-space:nowrap; line-height:1.25;
}
.vls-topbar-contact a i{color:var(--vls-orange); text-align:center;}
.vls-topbar-contact a:hover{color:var(--vls-orange); text-decoration:none;}
/* Sizes went up a tier across every band once "Register As Interpreter" came
   out of the nav - that was the widest item in it and freed ~150px, which the
   client asked to spend on making the phone number easier to spot. */
.vls-c-phone{font-size:25px; letter-spacing:.2px;}
.vls-c-phone i{font-size:21px;}
/* Same size as the phone, and no colour override - it used to be #5b6b86,
   which made it read as secondary text next to the number. */
.vls-c-email{font-size:25px; letter-spacing:.2px;}
.vls-c-email i{font-size:21px;}

/* nav has 7 items + the contact block - tighten before anything wraps.
   The old orange "Request Or Schedule An Appointment" button lived here too;
   removing it freed enough room to keep email + phone visible at every width. */
@media (max-width:1500px){
  .vls-brand img{width:262px;}
  .vls-nav > ul > li > a{padding:26px 10px; font-size:14px;}
  .vls-topbar-contact{gap:14px;}
  .vls-c-phone{font-size:23px;} .vls-c-phone i{font-size:19px;}
  .vls-c-email{font-size:23px;} .vls-c-email i{font-size:19px;}
}
/* Side by side stops fitting next to the nav here, so the pair stacks again -
   but phone FIRST and still the bigger of the two. */
@media (max-width:1300px){
  .vls-brand img{width:232px;}
  .vls-nav > ul > li > a{padding:24px 8px; font-size:13px;}
  .vls-topbar-contact{flex-direction:column; align-items:flex-end; gap:2px;}
  .vls-c-phone{font-size:21px;} .vls-c-phone i{font-size:17px;}
  .vls-c-email{font-size:21px;} .vls-c-email i{font-size:17px;}
}
@media (max-width:1199px){
  .vls-topbar .container-fluid{padding-left:14px; padding-right:14px;}
  .vls-brand img{width:200px;}
  .vls-nav > ul > li > a{padding:22px 6px; font-size:12.3px;}
  .vls-nav li.has-sub > a:after{margin-left:4px;}
  .vls-c-phone{font-size:18px;} .vls-c-phone i{font-size:15px;}
  .vls-c-email{font-size:18px;} .vls-c-email i{font-size:15px;}
}
/* 992-1099 is the tightest desktop band: the whole nav AND the contact pair,
   on a screen barely wider than a tablet. Everything gets one last trim. */
@media (max-width:1099px){
  .vls-brand img{width:178px;}
  .vls-nav > ul > li > a{padding:20px 5px; font-size:11.6px;}
  .vls-c-phone{font-size:16px;} .vls-c-phone i{font-size:13.5px;}
  .vls-c-email{font-size:16px;} .vls-c-email i{font-size:13.5px;}
}
/* Below 992px the theme's own mobile menu takes over the navigation, so drop
   the desktop nav but keep the brand + email + phone as a slim bar.
   NOTE: 991px must match the theme's d-lg-none breakpoint - anything higher
   leaves a band with no navigation at all. */
@media (max-width:991px){
  .vls-topbar-inner{min-height:0; padding:10px 0; gap:12px;}
  .vls-nav{display:none;}
  .vls-brand img{width:190px;}
  /* nav is gone here, so the room comes back - phone beside the email again */
  .vls-topbar-contact{display:flex; flex-direction:row; align-items:center; gap:14px;}
  .vls-c-phone{font-size:18px;} .vls-c-phone i{font-size:15px;}
  .vls-c-email{font-size:18px;} .vls-c-email i{font-size:15px;}
}
@media (max-width:767px){
  /* side by side no longer clears the logo - stack, phone on top and bigger */
  .vls-topbar-contact{flex-direction:column; align-items:flex-end; gap:2px;}
  .vls-c-phone{font-size:16px;} .vls-c-email{font-size:16px;}
}
@media (max-width:600px){
  /* everything must fit 320-600px without pushing the page sideways */
  .vls-topbar-inner{gap:8px;}
  .vls-topbar-right{gap:8px;}
  .vls-brand img{width:132px;}
  .vls-topbar-contact a{gap:5px;}
  .vls-topbar-contact a i{width:auto;}
  .vls-c-phone{font-size:14.5px;} .vls-c-phone i{font-size:13px;}
  .vls-c-email{font-size:14.5px;} .vls-c-email i{font-size:13px;}
}
/* iPhone-SE class widths. The email/phone text now fits here because the
   header CTA is gone - keep it, the client wants the email on show. */
@media (max-width:374px){
  .vls-brand img{width:112px;}
  .vls-topbar-contact a{gap:4px;}
  .vls-c-phone{font-size:13px;} .vls-c-phone i{font-size:12px;}
  .vls-c-email{font-size:13px;} .vls-c-email i{font-size:12px;}
}

/* ---------- HERO ---------- */
.vls-hero{
  position:relative;
  background:var(--vls-navy);
  background-image:url(../../images/slider/slider1.jpg);
  background-size:cover;
  background-position:center right;
  padding:0;
  overflow:hidden;
}
.vls-hero:before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(100deg, var(--vls-navy-deep) 0%, rgba(13,33,73,.96) 42%, rgba(13,33,73,.55) 66%, rgba(13,33,73,.15) 100%);
}
.vls-hero .container{position:relative; z-index:2;}
.vls-hero-inner{padding:80px 0 0;}
.vls-hero-eyebrow{
  color:var(--vls-orange);
  font-size:15px;
  font-weight:700;
  letter-spacing:1.6px;
  text-transform:uppercase;
  margin:0 0 18px;
}
.vls-hero h1{
  color:#fff;
  font-size:52px;
  line-height:1.14;
  font-weight:800;
  margin:0 0 22px;
  max-width:640px;
}
.vls-hero p.vls-hero-sub{
  color:#d6ddea;
  font-size:17px;
  line-height:1.65;
  max-width:520px;
  margin:0 0 34px;
}
.vls-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 30px;
  border-radius:5px;
  font-size:16px;
  font-weight:700;
  text-decoration:none;
  transition:all .25s ease;
  border:2px solid transparent;
}
.vls-btn i{font-size:14px;}
.vls-btn-primary{background:var(--vls-orange); color:#fff; border-color:var(--vls-orange);}
.vls-btn-primary:hover{background:#cf560a; border-color:#cf560a; color:#fff; text-decoration:none;}
.vls-btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.55);}
.vls-btn-ghost:hover{background:#fff; color:var(--vls-navy); border-color:#fff; text-decoration:none;}
.vls-hero-buttons{display:flex; flex-wrap:wrap; gap:16px; margin-bottom:56px;}

/* hero copy on the left, appointment card on the right */
.vls-hero-main{display:flex; align-items:center; gap:40px;}
.vls-hero-copy{flex:1 1 auto; min-width:0;}
.vls-appt-card{
  flex:0 0 340px;
  display:block;
  background:var(--vls-orange);
  border-radius:10px;
  padding:28px 26px;
  margin-top:6px;
  color:#fff;
  text-decoration:none;
  box-shadow:0 16px 40px rgba(0,0,0,.28);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.vls-appt-card:hover{
  background:#f06f18;
  transform:translateY(-4px);
  box-shadow:0 22px 50px rgba(0,0,0,.34);
  color:#fff; text-decoration:none;
}
.vls-appt-icon{
  width:54px; height:54px;
  border-radius:50%;
  background:rgba(255,255,255,.22);
  display:flex; align-items:center; justify-content:center;
  font-size:23px; color:#fff;
  margin-bottom:16px;
}
.vls-appt-title{
  display:block;
  font-size:23px; font-weight:800; line-height:1.25;
  margin-bottom:12px;
}
.vls-appt-text{
  display:block;
  font-size:15px; line-height:1.55;
  color:rgba(255,255,255,.95);
  margin-bottom:18px;
}
.vls-appt-link{
  display:inline-flex; align-items:center; gap:9px;
  font-size:15.5px; font-weight:800;
  transition:gap .25s ease;
}
.vls-appt-card:hover .vls-appt-link{gap:14px;}

/* stats strip */
.vls-stats{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0;
  padding:26px 0 34px;
}
.vls-stat{
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 34px;
  border-right:1px solid rgba(255,255,255,.18);
}
.vls-stat:first-child{padding-left:0;}
.vls-stat:last-child{border-right:0;}
.vls-stat i{font-size:30px; color:var(--vls-orange); line-height:1;}
.vls-stat-num{color:#fff; font-size:26px; font-weight:800; line-height:1.1;}
.vls-stat-lbl{color:#b9c4d6; font-size:13px; line-height:1.3;}

/* ---------- SECTION HEADING ---------- */
.vls-section{padding:78px 0;}
/* the 6-up service grid and the courses band need more room than the
   default bootstrap .container (1170px), so widen just these sections */
.vls-section .container{max-width:1340px; width:100%;}
.vls-section-alt{background:#fbfcfe;}
.vls-heading{text-align:center; margin-bottom:46px;}
.vls-heading h2{
  display:inline-block;
  position:relative;
  color:var(--vls-navy);
  font-size:30px;
  font-weight:800;
  letter-spacing:1.5px;
  text-transform:uppercase;
  margin:0;
  padding:0 26px;
}
.vls-heading h2:before,
.vls-heading h2:after{
  content:"";
  position:absolute;
  top:50%;
  width:46px;
  height:2px;
  background:var(--vls-navy);
}
.vls-heading h2:before{left:-42px;}
.vls-heading h2:after{right:-42px;}
.vls-heading p{color:var(--vls-text); margin:16px auto 0; max-width:660px; font-size:16px;}

/* ---------- SERVICE CARDS ---------- */
.vls-svc-grid{display:flex; flex-wrap:wrap; margin:0 -12px;}
/* Eight tiles in two rows of four (Aug 2026, client request). Was 16.666%,
   which put all six of the old set on a single row. */
.vls-svc-col{width:25%; padding:0 10px; margin-bottom:24px; display:flex;}
/* whole card is one link; keep it looking like a card, not a link */
.vls-svc-link{display:flex; width:100%; text-decoration:none;}
.vls-svc-link:hover,.vls-svc-link:focus{text-decoration:none;}
.vls-svc{
  background:#fff;
  border:1px solid var(--vls-border);
  border-radius:6px;
  padding:0;
  overflow:hidden;
  width:100%;
  display:flex;
  flex-direction:column;
  height:100%;
  text-align:center;
  transition:box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.vls-svc:hover{
  box-shadow:0 14px 34px rgba(13,33,73,.12);
  transform:translateY(-4px);
  border-color:#d5deec;
}

/* photo band. A navy scrim over every photo keeps the set visually
   consistent even though the source images differ in style. */
.vls-svc-photo{
  position:relative;
  height:132px;
  background-size:cover;
  background-position:center;
  background-color:var(--vls-navy);
}
.vls-svc-photo:before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(13,33,73,.10) 0%, rgba(13,33,73,.30) 60%, rgba(13,33,73,.52) 100%);
  transition:opacity .25s ease;
}
.vls-svc-link:hover .vls-svc-photo:before{opacity:.75;}
/* icon badge straddles the photo/body edge */
.vls-svc-badge{
  position:absolute;
  left:50%; bottom:-19px;
  transform:translateX(-50%);
  width:38px; height:38px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:15px;
  border:2px solid #fff;
  z-index:2;
}
.vls-svc-badge.tone-orange{background:var(--vls-orange); color:#fff;}
.vls-svc-badge.tone-navy{background:var(--vls-navy); color:#fff;}
.vls-svc-body{
  padding:28px 14px 20px;
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
}
.vls-svc h3{
  color:var(--vls-navy);
  font-size:16px;
  font-weight:700;
  line-height:1.32;
  margin:0 0 11px;
}
.vls-svc p{color:var(--vls-text); font-size:13.5px; line-height:1.55; margin:0 0 18px;}
.vls-svc .vls-more{
  font-size:13.5px; font-weight:700; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  margin-top:auto;
}
.vls-svc .vls-more.tone-orange{color:var(--vls-orange);}
.vls-svc .vls-more.tone-navy{color:var(--vls-navy);}
.vls-svc-link:hover .vls-more{text-decoration:none; gap:11px;}

/* ---------- COURSES ---------- */
.vls-course-wrap{
  background:#f4f8fd;
  border:1px solid #e2eaf5;
  border-radius:8px;
  overflow:hidden;
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
}
.vls-course-photo{
  width:19%;
  background-image:url(../../images/interpreting-services.jpg);
  background-size:cover;
  background-position:center;
  min-height:300px;
}
.vls-course-copy{width:29%; padding:38px 28px;}
.vls-course-feats{width:28%; padding:38px 14px; display:flex; align-items:center; justify-content:center; gap:6px;}
.vls-course-card{width:24%; background:var(--vls-navy); padding:32px 24px; color:#fff;}
.vls-course-eyebrow{color:var(--vls-orange); font-size:13px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; margin:0 0 10px;}
.vls-course-copy h2{color:var(--vls-navy); font-size:26px; font-weight:800; line-height:1.25; margin:0 0 14px;}
.vls-course-copy > p{color:var(--vls-text); font-size:15px; line-height:1.6; margin:0 0 18px;}
.vls-check{list-style:none; padding:0; margin:0 0 24px;}
.vls-check li{
  color:var(--vls-text); font-size:14.5px; line-height:1.5;
  padding:0 0 9px 26px; position:relative;
}
.vls-check li:before{
  content:"\f00c";
  font-family:FontAwesome;
  position:absolute; left:0; top:1px;
  color:var(--vls-orange); font-size:13px;
}
.vls-feat{text-align:center; padding:0 6px; flex:1 1 0; min-width:0;}
.vls-feat-icon{
  width:56px; height:56px; margin:0 auto 13px;
  border:1px solid #cfdcee; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; color:var(--vls-navy); background:#fff;
}
.vls-feat h4{color:var(--vls-navy); font-size:14px; font-weight:700; line-height:1.3; margin:0 0 8px;}
.vls-feat p{color:var(--vls-text); font-size:12.5px; line-height:1.5; margin:0;}
.vls-course-card h3{color:#fff; font-size:21px; font-weight:800; line-height:1.3; margin:0 0 6px;}
.vls-course-card .vls-course-hours{color:#aebbd2; font-size:14px; margin:0 0 18px;}
.vls-course-card .vls-check li{color:#dbe3f0;}
.vls-course-card .vls-check li:before{color:var(--vls-orange);}
.vls-course-card .vls-btn{width:100%; justify-content:center; padding:13px 18px; font-size:15px;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1199px){
  .vls-hero h1{font-size:44px;}
  /* four across still fits here - at 1199px each card is ~270px wide, which is
     wider than the six-across cards used to be on a full desktop. */
  .vls-stat{padding:0 24px;}
}
@media (max-width:1199px){
  .vls-appt-card{flex-basis:290px; padding:22px 20px;}
  .vls-appt-title{font-size:20px;}
  .vls-hero-main{gap:26px;}
}
@media (max-width:991px){
  /* card drops below the copy rather than squeezing it.
     flex:0 0 auto matters - with `1 1 auto` the card stretches to fill the
     column and gains a big empty gap under its text. */
  /* two across on tablets: four would be 170px a card, too narrow for the
     titles to stay on two lines. */
  .vls-svc-col{width:50%;}
  .vls-hero-main{flex-direction:column; align-items:stretch; gap:22px;}
  .vls-appt-card{flex:0 0 auto; width:100%; max-width:420px;}
  .vls-hero{background-position:center;}
  .vls-hero:before{background:linear-gradient(180deg, rgba(10,26,58,.94) 0%, rgba(10,26,58,.88) 100%);}
  .vls-hero-inner{padding:64px 0 0;}
  .vls-hero h1{font-size:36px;}
  .vls-stats{padding:20px 0 30px;}
  .vls-stat{width:50%; padding:14px 18px; border-right:0;}
  .vls-course-photo{width:100%; min-height:220px;}
  .vls-course-copy,
  .vls-course-feats,
  .vls-course-card{width:100%;}
  .vls-course-feats{flex-wrap:wrap; gap:24px; padding:30px 24px;}
  .vls-feat{flex:0 0 30%;}
}
@media (max-width:767px){
  .vls-hero h1{font-size:30px;}
  .vls-hero p.vls-hero-sub{font-size:15.5px;}
  .vls-hero-buttons{gap:12px; margin-bottom:34px;}
  .vls-btn{padding:13px 22px; font-size:15px;}
  .vls-section{padding:52px 0;}
  .vls-svc-col{width:100%;}
  .vls-heading h2{font-size:23px; padding:0;}
  .vls-heading h2:before,.vls-heading h2:after{display:none;}
  .vls-feat{flex:0 0 100%;}
}
@media (max-width:479px){
  .vls-stat{width:100%;}
}

/* ---------- PHONE BREATHING ROOM ----------
   Client: "site feels so cramped from a phone". The theme ships 15px of
   side padding, so on a 390px screen body copy runs almost edge to edge.
   This lifts it for EVERY section on the homepage - the new 2026 blocks
   and the theme's own About / Courses / features / footer alike - since
   they all sit inside a .container. Only pages that load this stylesheet
   are affected. */
@media (max-width:767px){
  .container,
  .container-fluid{padding-left:22px; padding-right:22px;}
  /* Bootstrap rows use -15px side margins; without matching them the extra
     container padding would double up on every gutter and squeeze columns. */
  .row{margin-left:-15px; margin-right:-15px;}

  /* vertical rhythm: stacked cards need real separation, not a hairline */
  .vls-svc-col{margin-bottom:26px;}
  .vls-svc-col:last-child{margin-bottom:0;}
  .vls-section{padding:46px 0;}
  .vls-heading{margin-bottom:26px;}
  .vls-course-copy,
  .vls-course-card{padding:30px 24px;}
  .vls-course-photo{min-height:190px;}
}
@media (max-width:374px){
  .container,
  .container-fluid{padding-left:18px; padding-right:18px;}
}