/* ==========================================================================
   Vivid Language Solutions - "one screen" landing variant
   Loaded AFTER vivid-2026.css. Compresses header + hero + services + courses
   so the whole landing page fits in a single viewport with no scrolling.

   Sizing is tied to vh (via clamp) rather than fixed px, so the layout
   scales down on shorter screens instead of overflowing. Below ~660px of
   viewport height everything hits its clamp floor and the page scrolls
   normally again - that is intentional, squeezing further is unreadable.
   ========================================================================== */

/* ---------- SINGLE-ROW HEADER ----------
   Already one row now, so this just scales it with viewport height.

   Deliberately gated to >=992px. These selectors are more specific than the
   plain `.vls-brand img` rules in vivid-2026.css, so if they ran on phones
   they would beat every mobile size there (the logo got stuck at 220px and
   pushed the contact block off-screen). Single-screen compression is a
   desktop concern anyway - phones scroll. */
@media (min-width:992px){
  .onescreen .vls-topbar-inner{min-height:clamp(48px,7vh,78px);}
  .onescreen .vls-brand img{width:clamp(215px,29vh,300px);}
  .onescreen .vls-nav > ul > li > a{
    padding-top:clamp(10px,2.4vh,28px);
    padding-bottom:clamp(10px,2.4vh,28px);
    font-size:clamp(12.5px,1.5vh,15px);
  }
}
/* Contact sizing is scoped to >=1301px, i.e. only where the phone+email pair
   sits in a row beside a full-width nav. Between 992 and 1300 the base tiers
   in vivid-2026.css shrink it to clear the nav, and these rules - being
   (0,2,0) against their (0,1,0) - would silently override them and push the
   block off the right edge. Size phone and email separately: a blanket rule
   on `a` would wipe out the deliberately-large phone number. */
@media (min-width:1301px){
  /* Floors raised so the number stays big on short laptop screens too - on a
     1366x768 the vh term lands around 16px, and the whole point of this change
     is that customers spot the phone number. The extra few px of header height
     costs nothing against the one-screen fit (re-measured, still fits). */
  /* The email now matches the phone exactly - same clamp, not a smaller one.
     This file is loaded AFTER vivid-2026.css on the home page only, so leaving
     the old smaller clamp here meant the home page was the ONE page where the
     two did not match, which is the opposite of what was asked for. If the
     phone clamp is ever retuned, retune the email with it. */
  .onescreen .vls-c-phone{font-size:clamp(21px,2.45vh,25px);}
  .onescreen .vls-c-phone i{font-size:clamp(17.5px,2.05vh,21px);}
  .onescreen .vls-c-email{font-size:clamp(21px,2.45vh,25px);}
  .onescreen .vls-c-email i{font-size:clamp(17.5px,2.05vh,21px);}
}
/* Same trap for the nav: the clamp above floors at 12.5px, which is WIDER
   than the 11.6px the base stylesheet drops to in the tight 992-1099 band,
   so the onescreen page overflowed at 992 while index-new.php was fine.
   Hand the band back to the base sizing. */
@media (min-width:992px) and (max-width:1099px){
  .onescreen .vls-nav > ul > li > a{
    font-size:11.6px;
    padding-left:5px; padding-right:5px;
  }
}

@media (min-width:992px){
/* ======================================================================
   EVERYTHING BELOW IS DESKTOP-ONLY, ON PURPOSE.
   These rules squeeze the hero, sections and cards with vh-based clamps so
   the landing page fits one desktop screen. They used to apply at every
   width, which meant a phone - where the page scrolls anyway and there is
   nothing to fit - got the SAME compression: ~9px of section padding and
   floor-value type. That is what made the site feel cramped on a phone.
   Below 992px this whole block is off and vivid-2026.css's normal mobile
   spacing takes over. Do not un-gate it.
   ====================================================================== */

/* ---------- HERO ---------- */
.onescreen .vls-hero-inner{padding:clamp(10px,1.9vh,32px) 0 0;}
.onescreen .vls-hero-eyebrow{
  font-size:clamp(10px,1.15vh,14px);
  margin:0 0 clamp(4px,.7vh,12px);
  letter-spacing:1.4px;
}
.onescreen .vls-hero h1{
  font-size:clamp(21px,3.1vh,42px);
  line-height:1.1;
  margin:0 0 clamp(6px,1vh,16px);
  max-width:620px;
}
.onescreen .vls-hero p.vls-hero-sub{
  font-size:clamp(12px,1.4vh,16px);
  line-height:1.4;
  margin:0 0 clamp(9px,1.5vh,22px);
  max-width:500px;
}
.onescreen .vls-hero-buttons{
  gap:clamp(7px,1vh,14px);
  margin-bottom:clamp(9px,1.5vh,24px);
}
.onescreen .vls-btn{
  padding:clamp(7px,1.1vh,13px) clamp(14px,1.7vw,26px);
  font-size:clamp(12.5px,1.35vh,15px);
}
/* appointment card scales with viewport height like everything else */
.onescreen .vls-hero-main{gap:clamp(18px,2.2vw,40px);}
.onescreen .vls-appt-card{
  flex-basis:clamp(250px,25vw,340px);
  padding:clamp(12px,2vh,28px) clamp(14px,1.4vw,26px);
  margin-top:0;
  border-radius:9px;
}
.onescreen .vls-appt-icon{
  width:clamp(32px,4.3vh,54px); height:clamp(32px,4.3vh,54px);
  font-size:clamp(14px,1.9vh,23px);
  margin-bottom:clamp(6px,1.2vh,16px);
}
.onescreen .vls-appt-title{
  font-size:clamp(14px,2vh,23px);
  line-height:1.2;
  margin-bottom:clamp(4px,.9vh,12px);
}
.onescreen .vls-appt-text{
  font-size:clamp(11px,1.3vh,15px);
  line-height:1.4;
  margin-bottom:clamp(6px,1.2vh,18px);
}
.onescreen .vls-appt-link{font-size:clamp(12px,1.45vh,15.5px);}

.onescreen .vls-stats{padding:clamp(4px,.8vh,13px) 0 clamp(6px,1vh,16px);}
.onescreen .vls-stat{padding:0 clamp(14px,1.7vw,32px); gap:clamp(8px,.8vw,14px);}
.onescreen .vls-stat i{font-size:clamp(16px,2.1vh,26px);}
.onescreen .vls-stat-num{font-size:clamp(15px,1.95vh,23px);}
.onescreen .vls-stat-lbl{font-size:clamp(9.5px,1.1vh,12px);}

/* ---------- SECTIONS ---------- */
.onescreen .vls-section{padding:clamp(9px,1.5vh,24px) 0;}
.onescreen .vls-heading{margin-bottom:clamp(6px,1vh,16px);}
.onescreen .vls-heading h2{font-size:clamp(16px,2.2vh,27px);}

/* ---------- SERVICE PHOTO CARDS ---------- */
/* index.php carries body.onescreen, so this block styles the REAL homepage -
   the class is a density modifier, not a one-viewport mode (the page is ~4000px
   tall). The width therefore has to track the main stylesheet's four-across
   layout, and the cards need a gap between the two rows where before there was
   only ever one row. */
.onescreen .vls-svc-col{width:25%; margin-bottom:clamp(12px,1.8vh,22px);}
@media (max-width:991px){ .onescreen .vls-svc-col{width:50%;} }
@media (max-width:767px){ .onescreen .vls-svc-col{width:100%;} }
.onescreen .vls-svc-photo{height:clamp(64px,10.5vh,132px);}
.onescreen .vls-svc-badge{
  width:clamp(26px,3.4vh,38px);
  height:clamp(26px,3.4vh,38px);
  bottom:clamp(-19px,-1.7vh,-13px);
  font-size:clamp(11px,1.4vh,15px);
}
.onescreen .vls-svc-body{
  padding:clamp(16px,2.6vh,28px) clamp(8px,.7vw,14px) clamp(8px,1.2vh,20px);
}
.onescreen .vls-svc h3{
  font-size:clamp(12px,1.45vh,15px);
  line-height:1.24;
  margin:0 0 clamp(4px,.75vh,9px);
}
.onescreen .vls-svc p{
  font-size:clamp(10.5px,1.2vh,12.5px);
  line-height:1.38;
  margin:0;
}
/* the whole card is the link in this variant, so the separate
   "Learn More" row is redundant vertical space - hide it */
.onescreen .vls-svc .vls-more{display:none;}
.onescreen a.vls-svc-link{text-decoration:none; display:flex; width:100%;}
.onescreen a.vls-svc-link:hover{text-decoration:none;}

/* ---------- COURSES BAND ---------- */
.onescreen .vls-course-photo{display:none;}
.onescreen .vls-course-copy{width:34%; padding:clamp(9px,1.35vh,19px) clamp(14px,1.4vw,24px);}
.onescreen .vls-course-feats{width:38%; padding:clamp(9px,1.35vh,19px) 10px; gap:4px;}
.onescreen .vls-course-card{width:28%; padding:clamp(9px,1.35vh,19px) clamp(13px,1.3vw,22px);}
.onescreen .vls-course-eyebrow{font-size:clamp(10px,1.3vh,13px); margin:0 0 clamp(4px,.8vh,10px);}
.onescreen .vls-course-copy h2{
  font-size:clamp(15px,2vh,23px);
  line-height:1.18;
  margin:0 0 clamp(4px,.7vh,10px);
}
.onescreen .vls-course-copy > p{
  font-size:clamp(11px,1.3vh,14px);
  line-height:1.35;
  margin:0 0 clamp(5px,.9vh,13px);
}
/* two columns halves the tallest block in the courses band */
.onescreen .vls-course-copy .vls-check{column-count:2; column-gap:16px;}
.onescreen .vls-course-copy .vls-check li{break-inside:avoid;}
.onescreen .vls-check{margin:0 0 clamp(7px,1.2vh,17px);}
.onescreen .vls-check li{
  font-size:clamp(10.5px,1.2vh,13px);
  line-height:1.32;
  padding:0 0 clamp(2px,.45vh,6px) 20px;
}
.onescreen .vls-feat-icon{
  width:clamp(32px,3.7vh,46px);
  height:clamp(32px,3.7vh,46px);
  margin:0 auto clamp(4px,.8vh,10px);
  font-size:clamp(12px,1.55vh,17px);
}
.onescreen .vls-feat h4{font-size:clamp(10.5px,1.2vh,13px); line-height:1.2; margin:0 0 clamp(2px,.5vh,6px);}
.onescreen .vls-feat p{font-size:clamp(9.5px,1.05vh,11.5px); line-height:1.32;}
.onescreen .vls-course-card h3{font-size:clamp(13px,1.7vh,19px); line-height:1.2; margin:0 0 3px;}
.onescreen .vls-course-card .vls-course-hours{
  font-size:clamp(10px,1.15vh,12.5px);
  margin:0 0 clamp(5px,.9vh,13px);
}
.onescreen .vls-course-card .vls-btn{padding:clamp(6px,1vh,11px) 12px;}

/* ---------- Progressive trim for shorter laptops ---------- */
@media (max-height:900px){
  .onescreen .vls-hero-inner{padding-top:clamp(8px,1.4vh,20px);}
  .onescreen .vls-hero p.vls-hero-sub{margin-bottom:clamp(7px,1.1vh,16px);}
  .onescreen .vls-hero-buttons{margin-bottom:clamp(7px,1.1vh,16px);}
  .onescreen .vls-stats{padding:clamp(3px,.6vh,9px) 0 clamp(4px,.7vh,10px);}
  .onescreen .vls-section{padding:clamp(7px,1.1vh,16px) 0;}
  .onescreen .vls-heading{margin-bottom:clamp(5px,.8vh,11px);}
  .onescreen .vls-svc-body{padding:clamp(14px,2.3vh,22px) clamp(6px,.55vw,11px) clamp(6px,.9vh,13px);}
  .onescreen .vls-course-copy,
  .onescreen .vls-course-feats,
  .onescreen .vls-course-card{padding-top:clamp(7px,1.1vh,15px); padding-bottom:clamp(7px,1.1vh,15px);}
  .onescreen .vls-check{margin-bottom:clamp(5px,.9vh,12px);}
}
@media (max-height:720px){
  .onescreen .vls-hero-inner{padding-top:clamp(6px,1.1vh,14px);}
  .onescreen .vls-section{padding:clamp(6px,.95vh,13px) 0;}
  .onescreen .vls-hero p.vls-hero-sub{display:none;}   /* h1 + stats carry it */
}

/* 1366x768 laptops land here (~640px of usable viewport). Trim the last
   few blocks rather than giving up on the single-screen fit. */
@media (max-height:660px){
  .onescreen .vls-hero-inner{padding-top:6px;}
  .onescreen .vls-hero h1{font-size:clamp(19px,2.9vh,26px);}
  .onescreen .vls-hero-buttons{margin-bottom:clamp(6px,.9vh,11px);}
  .onescreen .vls-stat i{font-size:clamp(14px,1.9vh,18px);}
  .onescreen .vls-section{padding:clamp(5px,.8vh,10px) 0;}
  .onescreen .vls-heading{margin-bottom:clamp(4px,.7vh,8px);}
  .onescreen .vls-svc-photo{height:clamp(58px,9.2vh,74px);}
  .onescreen .vls-svc-body{padding:clamp(13px,2.1vh,17px) 6px clamp(5px,.8vh,9px);}
  .onescreen .vls-svc p{font-size:clamp(10px,1.15vh,11.5px); line-height:1.32;}
  .onescreen .vls-course-copy,
  .onescreen .vls-course-feats,
  .onescreen .vls-course-card{padding-top:clamp(6px,.95vh,11px); padding-bottom:clamp(6px,.95vh,11px);}
  .onescreen .vls-course-feats .vls-feat p{display:none;}   /* icon + label is enough this small */
  /* the appointment card is the tallest thing in the hero at this size -
     drop its blurb and shrink the icon, the title + link still carry it */
  .onescreen .vls-appt-text{display:none;}
  .onescreen .vls-appt-icon{
    width:clamp(28px,3.6vh,34px); height:clamp(28px,3.6vh,34px);
    font-size:clamp(13px,1.7vh,15px);
    margin-bottom:clamp(5px,.9vh,8px);
  }
  .onescreen .vls-appt-title{margin-bottom:clamp(4px,.8vh,8px);}
  .onescreen .vls-appt-card{padding:clamp(11px,1.7vh,15px) clamp(13px,1.3vw,18px);}
}
/* Short AND narrow (1280x720 laptops): the service blurbs wrap to an extra
   line at this width, which ate the last few pixels of headroom. */
@media (max-height:660px) and (max-width:1366px){
  .onescreen .vls-svc-body{padding-top:clamp(12px,1.9vh,15px); padding-bottom:4px;}
  .onescreen .vls-svc p{font-size:9.8px; line-height:1.28;}
  .onescreen .vls-svc h3{margin-bottom:2px;}
  .onescreen .vls-section{padding:clamp(4px,.6vh,8px) 0;}
}

/* Short screens: stop compressing, let it scroll like a normal page. */
@media (max-height:585px){
  .onescreen .vls-svc .vls-more{display:inline-flex;}
  .onescreen .vls-course-photo{display:block;}
  .onescreen .vls-hero p.vls-hero-sub{display:block;}
}
}  /* end desktop-only one-screen compression */

@media (max-width:991px){
  /* hero stacks into a column here, where flex-basis would set HEIGHT and
     lock the card to a fixed 250px with dead space under the text */
  .onescreen .vls-appt-card{flex-basis:auto;}
  /* the course photo is worth showing on a phone - it breaks up a long
     run of text blocks, which is exactly what made this feel cramped */
  .onescreen .vls-course-photo{display:block;}
  .onescreen .vls-course-copy,
  .onescreen .vls-course-feats,
  .onescreen .vls-course-card{width:100%;}
}