/* Wa-Vi Solutions — Global Styles */
:root{
  --navy:#0F1C2E;
  --slate:#2E4A6F;
  --teal:#1F6F78;
  --steel:#E6EBF0;
  --gray:#6B7280;
  --white:#FFFFFF;

  --max:1100px;
  --radius:12px;

  --shadow:0 10px 24px rgba(15,28,46,.08);
  --shadow2:0 6px 16px rgba(15,28,46,.10);

  --h1: clamp(2.1rem, 4vw, 3.1rem);
  --h2: clamp(1.6rem, 2.4vw, 2.1rem);
  --h3: 1.2rem;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--navy);
  background:var(--white);
  line-height:1.55;
}
img{max-width:100%; height:auto}
a{color:inherit}
p{margin:0 0 1rem}
ul{margin:0; padding-left:1.2rem}
li{margin:.25rem 0}
small{color:var(--gray)}
code,kbd,pre{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}

.container{
  max-width:var(--max);
  margin:0 auto;
  padding:4rem 1.25rem;
}
.container--tight{
  max-width:820px;
  margin:0 auto;
  padding:3.25rem 1.25rem;
}
.section{
  border-top:1px solid var(--steel);
}
.section--soft{
  background:linear-gradient(180deg, rgba(230,235,240,.55), rgba(255,255,255,0));
  border-top:1px solid rgba(230,235,240,.7);
}
.stack > * + *{margin-top:1rem}
.stack-lg > * + *{margin-top:1.5rem}

.h1{font-size:var(--h1); line-height:1.1; letter-spacing:-0.02em; margin:0 0 .8rem}
.h2{font-size:var(--h2); line-height:1.2; margin:0 0 .75rem}
.h3{font-size:var(--h3); margin:0 0 .5rem}
.lead{font-size:1.1rem; color:#17263c}
.muted{color:var(--gray)}
.kicker{color:var(--teal); font-weight:650; letter-spacing:.02em; text-transform:uppercase; font-size:.85rem}
.hr{height:1px; background:var(--steel); margin:2rem 0}

.grid{display:grid; gap:1.25rem}
.grid-2{grid-template-columns:repeat(2, minmax(0, 1fr))}
.grid-3{grid-template-columns:repeat(3, minmax(0, 1fr))}
@media (max-width: 860px){
  .grid-2,.grid-3{grid-template-columns:1fr}
}

.card{
  border:1px solid var(--steel);
  border-radius:var(--radius);
  padding:1.25rem;
  background:var(--white);
  box-shadow: none;
}
.card--shadow{box-shadow:var(--shadow)}
.card--teal{
  border-color: rgba(31,111,120,.35);
  background: linear-gradient(180deg, rgba(31,111,120,.06), rgba(255,255,255,0));
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  border:1px solid var(--steel);
  padding:.25rem .6rem;
  border-radius:999px;
  font-size:.85rem;
  color:#20324e;
  background:#fff;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.8rem 1.1rem;
  border-radius:10px;
  border:1px solid transparent;
  text-decoration:none;
  font-weight:650;
  cursor:pointer;
  transition:.15s ease;
}
.btn-primary{background:var(--teal); color:#fff}
.btn-primary:hover{filter:brightness(1.03); transform:translateY(-1px)}
.btn-secondary{
  background:#fff;
  border-color:rgba(46,74,111,.25);
  color:var(--navy);
}
.btn-secondary:hover{border-color:rgba(46,74,111,.45); transform:translateY(-1px)}
.btn-ghost{
  background:transparent;
  border-color:transparent;
  color:var(--slate);
  text-decoration:underline;
  text-underline-offset:3px;
}
.btn:focus{outline:3px solid rgba(31,111,120,.28); outline-offset:2px}

.header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(230,235,240,.85);
}
.header__inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0.5rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.brand{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;     /* ✓ Already correct - keeps everything centered */
  gap:.55rem;
  text-decoration:none;
  flex-shrink:0;
}
.brand__mark{
  font-weight:800;
  letter-spacing:-0.03em;
}
.brand img{
  max-height: 80px;       /* ✓ Keep this */
  width: auto;            /* ✓ Keep this */
  /* REMOVE: max-height: none; */  /* ✗ Delete this line! */
  object-fit: contain;    /* ✓ Keep this */
  padding: 0;
  flex-shrink:0;
}
.brand__name{
  font-size:.75rem;
  font-weight:500;
  color:var(--gray);
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
  border-left:1.5px solid rgba(107,114,128,.35);
  padding-left:.65rem;
  line-height:1.3;
}
.brand__sub{
  color:var(--gray);
  font-weight:600;
  font-size:.92rem;
}
.nav{
  display:flex;
  gap:.5rem;
  align-items:center;
  flex-wrap:nowrap;
  flex-shrink:1;
  min-width:0;
}
.nav a {
  text-decoration: none;
  color: #1d2c45;
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0.25rem 0.45rem;
  border-radius: 8px;
  transition: background 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.nav a:hover {
  background: rgba(230, 235, 240, 0.55);
}

.nav a[aria-current="page"] {
  background: rgba(31, 111, 120, 0.10);
  color: var(--teal);
}

/* Button-like links inside nav */
.nav a.btn {
  margin-left: 0.5rem;
}

.nav a.btn-primary {
  padding: 0.4rem 0.8rem;
}
.hero{
  padding:4.5rem 0 3.25rem;
}
.hero__grid{
  display:grid;
  gap:2rem;
  grid-template-columns: 1.3fr .7fr;
  align-items:start;
}
@media (max-width: 900px){
  .hero__grid{grid-template-columns:1fr}
}
.hero__panel{
  border:1px solid var(--steel);
  border-radius:var(--radius);
  padding:1.1rem;
  background:#fff;
  box-shadow:var(--shadow);
}
.list-check{list-style:none; padding-left:0; margin:0}
.list-check li{display:flex; gap:.6rem; margin:.55rem 0}
.list-check li::before{content:"✓"; color:var(--teal); font-weight:800}
.pills{display:flex; flex-wrap:wrap; gap:.5rem}

.cta-band{
  border-radius:var(--radius);
  padding:1.5rem;
  background:linear-gradient(135deg, rgba(15,28,46,.98), rgba(46,74,111,.95));
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
@media (max-width: 860px){
  .cta-band{flex-direction:column; align-items:flex-start}
}

.footer{
  background:var(--navy);
  color:#fff;
  margin-top:0;
}
.footer__inner{
  max-width:var(--max);
  margin:0 auto;
  padding:3rem 1.25rem;
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:2rem;
}
@media (max-width: 860px){
  .footer__inner{grid-template-columns:1fr}
}
.footer a{color:#fff; text-decoration:none}
.footer a:hover{text-decoration:underline}
.footer__small{opacity:.85}

.form{
  display:grid;
  gap:.9rem;
  max-width:640px;
}
.field{display:grid; gap:.35rem}
label{font-weight:650}
input, textarea, select{
  border:1px solid rgba(46,74,111,.22);
  border-radius:10px;
  padding:.75rem .8rem;
  font-size:1rem;
  width:100%;
}
textarea{min-height:150px; resize:vertical}
input:focus, textarea:focus, select:focus{
  outline:3px solid rgba(31,111,120,.22);
  outline-offset:2px;
}
.help{font-size:.9rem; color:var(--gray)}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.hidden{display:none}
.mt-2{margin-top:.5rem}
#challenge-other-wrap{display:grid}
/* ================================
   Training Library Chooser (prominent)
   ================================ */
   #libraryChooser{
    margin-top: 1.25rem;
    padding: 1rem;
    border: 1px solid var(--steel);
    border-radius: 14px;
    background: rgba(230,235,240,.35);
  }
  
  /* Make the two options feel like primary tiles */
  #libraryChooser .wv-cat-pills{
    gap: .75rem;
    margin-bottom: .5rem;
  }
  
  #libraryChooser .wv-cat-pill{
    padding: .7rem 1.05rem;           /* bigger click target */
    font-size: .95rem;               /* larger text */
    font-weight: 700;
    border-radius: 12px;             /* less “pill”, more “button” */
    border: 1px solid rgba(15,28,46,.15);
    background: #fff;
    box-shadow: 0 10px 24px rgba(15,28,46,.08); /* prominent */
  }
  
  /* Count badge */
  #libraryChooser .wv-cat-pill-count{
    opacity: 1;
    font-weight: 700;
    padding: .15rem .45rem;
    border-radius: 999px;
    background: rgba(46,74,111,.10);
    color: var(--navy);
  }
  
  /* Hover/focus states */
  #libraryChooser .wv-cat-pill:hover{
    transform: translateY(-1px);
    border-color: rgba(31,111,120,.55);
    box-shadow: 0 12px 28px rgba(15,28,46,.12);
  }
  
  #libraryChooser .wv-cat-pill:focus-visible{
    outline: 3px solid rgba(31,111,120,.35);
    outline-offset: 2px;
  }
  
  /* Make the helper line breathe */
  #libraryChooser .muted{
    margin-top: .35rem;
    font-size: .95rem;
  }
  
  /* Optional: a little extra padding inside the header card too */
  .card.card--shadow:has(#libraryChooser){
    padding: 1.25rem;
  }
  @media (min-width: 720px){
    #libraryChooser .wv-cat-pills{
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
    #libraryChooser .wv-cat-pill{
      justify-content: center;
    }
  }
  /* Persistent active state for chooser */
.wv-chooser-pill--active{
  background: rgba(31,111,120,.10) !important;
  border-color: rgba(31,111,120,.55) !important;
  color: var(--teal) !important;
}

/* Optional: hide helper text after a choice is made */
#libraryChooser.is-chosen .wv-chooser-help{ display:none; }