/* ==========================================================================
   Languages page - vividls.com/languages.php
   Loaded AFTER vivid-2026.css, which supplies the palette, .vls-section,
   .vls-heading and the .vls-btn styles this file leans on.
   ========================================================================== */

/* ---------- HERO ----------
   The dotted world map is assets/images/call-bg.png, the same asset the footer
   uses. It sits UNDER a navy gradient rather than on top of flat navy, so the
   text stays readable no matter how tall the hero gets on a phone. */
.vlang-hero{
  position:relative;
  background:#0d2149;
  padding:86px 0 74px;
  text-align:center;
  overflow:hidden;
}
/* world-map-dots.png is the footer's call-bg.png with its alpha normalised and
   the dots repainted white. The original tops out at alpha 26/255, which makes
   it invisible anywhere except the exact navy the footer uses - it read as a
   plain blue block here. Now visibility is controlled by this opacity alone. */
.vlang-hero:before{
  content:"";
  position:absolute; inset:0;
  background:url(../images/world-map-dots.png) center center / cover no-repeat;
  opacity:.24;
}
/* Only a gentle darkening behind the middle, where the heading and the search
   box sit. Any heavier and it washes the map back out. */
.vlang-hero:after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(ellipse 62% 70% at center, rgba(13,33,73,.72) 0%, rgba(13,33,73,.30) 62%, rgba(13,33,73,0) 100%);
}
.vlang-hero .container{position:relative; z-index:2;}

.vlang-eyebrow{
  color:#f5a06a; font-size:13px; font-weight:700;
  letter-spacing:2.4px; text-transform:uppercase; margin:0 0 14px;
}
.vlang-hero h1{
  color:#fff; font-size:46px; font-weight:800;
  line-height:1.18; margin:0 0 16px;
}
.vlang-sub{
  color:#c6d1e4; font-size:17px; line-height:1.6;
  max-width:660px; margin:0 auto 34px;
}
/* This line now carries the email address and phone number. Without these two
   rules the browser paints them default link-blue on a navy hero - unreadable,
   and nothing else on this page is blue. Orange is the accent used everywhere
   else, and the underline is what tells somebody they are tappable. */
.vlang-sub a{color:#f97316; text-decoration:underline; text-underline-offset:3px;}
.vlang-sub a:hover,
.vlang-sub a:focus{color:#fff; text-decoration:underline;}

/* ---------- SEARCH BOX ----------
   The whole point of the page. Deliberately big. */
.vlang-searchwrap{
  position:relative;
  max-width:560px; margin:0 auto 30px;
}
.vlang-searchwrap i.fa-search{
  position:absolute; left:22px; top:50%; transform:translateY(-50%);
  color:#8a97b0; font-size:17px; pointer-events:none;
}
#vlangSearch{
  width:100%; height:62px;
  padding:0 52px 0 52px;
  border:2px solid transparent; border-radius:34px;
  background:#fff; color:#0d2149;
  font-size:17px; font-family:inherit;
  box-shadow:0 12px 34px rgba(0,0,0,.28);
  outline:none;
  transition:border-color .2s ease;
}
#vlangSearch::placeholder{color:#94a1b8;}
#vlangSearch:focus{border-color:#e87121;}
#vlangClear{
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  width:30px; height:30px; line-height:28px;
  border:0; border-radius:50%;
  background:#eef1f6; color:#5b6b86;
  font-size:20px; cursor:pointer;
  display:none;                      /* JS shows it once there is a term */
}
#vlangClear:hover{background:#e87121; color:#fff;}

.vlang-herostats{
  display:flex; justify-content:center; flex-wrap:wrap; gap:14px 40px;
  color:#c6d1e4; font-size:14px;
}
.vlang-herostats strong{color:#fff; font-size:19px; font-weight:800; margin-right:6px;}

/* ---------- MOST REQUESTED ---------- */
.vlang-topgrid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.vlang-topcard{
  display:flex; flex-direction:column;
  padding:20px 20px 18px;
  background:#fff; border:1px solid #e4e9f2; border-radius:12px;
  text-decoration:none;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.vlang-topcard:hover{
  transform:translateY(-4px);
  border-color:#e87121;
  box-shadow:0 14px 30px rgba(13,33,73,.12);
  text-decoration:none;
}
.vlang-topname{color:#0d2149; font-size:17px; font-weight:700; line-height:1.3;}
.vlang-topnote{color:#7a879c; font-size:12.5px; margin:6px 0 14px;}
.vlang-toplink{color:#e87121; font-size:13px; font-weight:700; margin-top:auto;}
.vlang-toplink i{margin-left:5px;}

/* ---------- A-Z BAR ---------- */
.vlang-azbar{
  display:flex; flex-wrap:wrap; justify-content:center; gap:6px;
  margin:0 0 22px;
}
.vlang-az{
  min-width:34px; height:34px; padding:0 8px;
  border:1px solid #dfe5ef; border-radius:8px;
  background:#fff; color:#0d2149;
  font-size:13.5px; font-weight:700; font-family:inherit;
  cursor:pointer;
  transition:all .18s ease;
}
.vlang-az:hover{border-color:#e87121; color:#e87121;}
.vlang-az.is-on{background:#0d2149; border-color:#0d2149; color:#fff;}
/* letters no language starts with - shown but dead, so the bar keeps its shape */
.vlang-az.is-off{opacity:.32; cursor:default;}
.vlang-az.is-off:hover{border-color:#dfe5ef; color:#0d2149;}

.vlang-count{
  text-align:center; color:#7a879c; font-size:13.5px;
  margin:0 0 22px;
}

/* ---------- THE LIST ----------
   auto-fill rather than a fixed column count: the tiles stay a readable width
   at every screen size instead of stretching to fill four columns on a 1920. */
.vlang-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(215px, 1fr));
  gap:10px;
}
.vlang-item{
  display:block;
  padding:13px 16px;
  background:#fff; border:1px solid #e4e9f2; border-radius:9px;
  color:#33415c; font-size:14.5px; line-height:1.35;
  text-decoration:none;
  transition:all .18s ease;
}
.vlang-item:hover{
  background:#0d2149; border-color:#0d2149; color:#fff;
  text-decoration:none;
}
.vlang-item.is-hidden{display:none;}

/* shown by JS only when a search matches nothing */
.vlang-empty{
  display:none;
  text-align:center; color:#5b6b86; font-size:15.5px;
  margin:34px 0 0;
}
.vlang-empty a{color:#e87121; font-weight:700;}

/* ---------- CLOSING CTA ---------- */
.vlang-cta{
  background:#0d2149;
  padding:64px 0;
  text-align:center;
}
.vlang-cta h2{color:#fff; font-size:30px; font-weight:800; margin:0 0 12px;}
.vlang-cta p{color:#c6d1e4; font-size:16px; margin:0 0 28px;}
.vlang-ctabtns{display:flex; justify-content:center; flex-wrap:wrap; gap:14px;}
.vlang-cta .vls-btn-ghost i{margin-right:7px;}

/* ---------- RESPONSIVE ----------
   Only the grid track counts change. Everything else is already fluid. */
@media (max-width:1199px){
  .vlang-topgrid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:991px){
  .vlang-hero{padding:66px 0 58px;}
  .vlang-hero h1{font-size:36px;}
  .vlang-topgrid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:767px){
  .vlang-hero h1{font-size:29px;}
  /* the line break in the heading only helps on a wide screen */
  .vlang-br{display:none;}
  .vlang-sub{font-size:15.5px;}
  #vlangSearch{height:56px; font-size:16px;}   /* 16px min or iOS zooms the page */
  .vlang-herostats{gap:10px 22px; font-size:13px;}
  .vlang-herostats strong{font-size:17px;}
  .vlang-grid{grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px;}
  .vlang-item{padding:11px 13px; font-size:13.5px;}
  .vlang-cta h2{font-size:23px;}
  .vlang-ctabtns{flex-direction:column; align-items:stretch;}
}
@media (max-width:479px){
  .vlang-topgrid{grid-template-columns:1fr;}
  .vlang-grid{grid-template-columns:repeat(2,1fr);}
  .vlang-az{min-width:30px; height:30px; font-size:12.5px;}
}