/*!
 * Skhillz Learning System - shared brand chrome
 *
 * One header, one footer, one logo, one palette, on every page.
 *
 * Before this file existed the site carried three different logos (and eight
 * pages with none), nine header structures, seven footer structures, and four
 * typeface combinations. This is the home page's chrome, which is also the
 * chrome in the brand guideline, lifted out so there is exactly one copy.
 *
 * Every class is prefixed sls- and every rule is scoped to .sls-header or
 * .sls-footer, so this file cannot reach into any page's own content styles.
 * Page bodies may differ. The frame around them does not.
 *
 * Edit the site's header or footer here and nowhere else.
 */

/* ---- Brand palette, from the Skhillz Learning System brand guideline ---- */
:root {
  --navy:   #071F55;
  --blue:   #176CEB;
  --aqua:   #4DD8FF;
  --purple: #7B61FF;
  --teal:   #00C9A7;
  --gold:   #FFC857;
  --coral:  #FF6B6B;
  --orange: #FF9E2C;
  --gray:   #6B7280;
  --mist:   #F5F7FA;
  --white:  #FFFFFF;
  --ink:    #14213D;
  --muted:  #5C6B87;
  --line:   #DDE6F2;
  --shadow: 0 20px 55px rgba(7, 31, 85, .12);

  --sls-gutter: 60px;
  --sls-content-max: 1320px;
  --sbw: calc(100vw - 100%);
}

/* ---- Defensive reset ---------------------------------------------------
 * 29 pages still carry their own element-level `header { }` and `footer { }`
 * rules from before this file existed. Two of them used position:fixed with
 * inset:0 0 auto 0, which would drag the new header out of place.
 *
 * A class beats an element on specificity, so anything set below wins. The
 * danger is the properties this file does NOT set, which would leak through
 * from the page. So the chrome pins them explicitly and the result is the same
 * on every page whatever that page's stylesheet says.
 * --------------------------------------------------------------------- */
.sls-header, .sls-footer {
  position: static;
  inset: auto;
  top: auto; right: auto; bottom: auto; left: auto;
  float: none;
  display: block;
  width: auto;
  max-width: none;
  min-width: 0;
  height: auto;
  min-height: 0;
  max-height: none;
  margin-block: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  opacity: 1;
  visibility: visible;
  text-align: left;
  letter-spacing: normal;
  line-height: 1.6;
  backdrop-filter: none;

  margin-inline: calc(50% - 50vw + var(--sbw, 0px) / 2);
  font-family: Montserrat, "Segoe UI", Helvetica, Arial, sans-serif;
  box-sizing: border-box;
}
.sls-header *, .sls-footer * { box-sizing: border-box; }

.sls-inner {
  width: 100%;
  max-width: var(--sls-content-max);
  margin-inline: auto;
  padding-inline: var(--sls-gutter);
}
.sls-inner.sls-nav { max-width: none; }

.sls-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;
}

/* ---- Buttons ----------------------------------------------------------- */
.sls-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 13px 22px; border-radius: 14px;
  border: 2px solid transparent; text-decoration: none; font-weight: 800;
  font-size: .92rem; cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}
.sls-btn:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(7, 31, 85, .18); }
.sls-btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.sls-btn-primary { background: linear-gradient(135deg, var(--blue), #4B72F2); color: #fff; }
.sls-btn-outline { background: #fff; border-color: #BFD1F6; color: var(--navy); }

/* ---- Header ------------------------------------------------------------ */
.sls-header {
  position: sticky; top: 0; z-index: 80;
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
.sls-nav {
  min-height: 86px; display: flex; align-items: center;
  justify-content: space-between; gap: 22px;
}
.sls-brand-logo { width: min(275px, 42vw); height: auto; display: block; }
.sls-nav-links {
  display: flex; align-items: center; gap: 24px;
  font-size: .9rem; font-weight: 750; color: #18346C;
}
.sls-nav-links a { text-decoration: none; position: relative; color: inherit; }
.sls-nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -7px;
  height: 3px; border-radius: 4px;
  background: linear-gradient(90deg, var(--blue), var(--aqua));
  transition: right .25s ease;
}
.sls-nav-links a:hover::after,
.sls-nav-links a:focus-visible::after { right: 0; }
.sls-nav-links a[aria-current="page"]::after { right: 0; }
.sls-nav-actions { display: flex; gap: 10px; align-items: center; }

/* ---- Footer ------------------------------------------------------------ */
.sls-footer {
  background: #fff; color: var(--ink);
  border-top: 1px solid var(--line); padding-top: 54px;
}
.sls-footer-main {
  display: grid;
  grid-template-columns: minmax(250px, 1.45fr) repeat(4, minmax(120px, 1fr));
  gap: 30px; padding-bottom: 30px; border-bottom: 1px solid var(--line);
}
.sls-footer-logo { width: 235px; height: auto; margin-bottom: 14px; display: block; }
.sls-footer-about { color: #435A7F; max-width: 340px; font-size: .92rem; line-height: 1.6; }
.sls-signup { display: grid; grid-template-columns: 1fr auto; max-width: 365px; margin-top: 15px; }
.sls-signup input {
  min-width: 0; padding: 13px; font: inherit; font-size: .9rem;
  border: 1px solid var(--line); border-radius: 10px 0 0 10px;
}
.sls-signup button {
  border: 0; background: var(--orange); color: #4D3300; font-weight: 900;
  border-radius: 0 10px 10px 0; padding: 0 18px; min-height: 48px; cursor: pointer;
}
.sls-fcol h3, .sls-footer-tier2 h3 { font-size: .95rem; color: var(--navy); margin: 0 0 4px; }
.sls-fcol a { display: block; text-decoration: none; color: #294776; margin: 9px 0; font-size: .9rem; }
.sls-fcol a:hover { color: var(--blue); text-decoration: underline; }
.sls-footer-tier2 { display: grid; grid-template-columns: .82fr 1.1fr 1.65fr; gap: 30px; padding: 28px 0 30px; }
/* Real marks now, so no coloured circle behind them and no per-position
   background: the artwork carries each platform's own color. */
.sls-socials { display: flex; gap: 12px; margin-top: 12px; align-items: center; }
.sls-socials a { display: block; line-height: 0; border-radius: 50%; }
.sls-socials a:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.sls-socials img { width: 42px; height: 42px; display: block; }
.sls-socials a:hover img { opacity: .82; }
.sls-contact { display: grid; gap: 8px; margin-top: 11px; color: #334E7B; font-size: .9rem; }
.sls-contact a { text-decoration: none; color: inherit; }
.sls-contact a:hover { color: var(--blue); text-decoration: underline; }

/* Tracy's badge artwork carries its own shape and wording, so the grid only has
   to size the four consistently. By height, because the four files are
   different widths once their transparent margins are trimmed. */
.sls-trust-grid { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 10px; }
.sls-trust-grid img { height: 74px; width: auto; display: block; }

.sls-footer-bottom { background: var(--navy); color: #fff; }
/* A column rather than a centred row: this band holds a paragraph block now,
   not one line of copyright. The padding underneath is the point. Without it
   the last disclosure sits flush against the bottom of the window. */
.sls-footer-bottom .sls-inner {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 10px; font-size: .72rem; padding-block: 22px 34px;
}
/* The badges carry their own wording, so the row only has to size them
   consistently. Height, not width, because the four are different widths. */
.sls-compliance-pills { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.sls-compliance-pills img { height: 56px; width: auto; display: block; }
@media (max-width: 760px) { .sls-compliance-pills img { height: 46px; } }
/* The bottom band is disclosures now, not a second copy of the navigation
   that sits directly above it. Small, quiet, and readable: a disclosure
   nobody can read is not a disclosure. */
.sls-disclosures { display: grid; gap: 5px; max-width: 108ch; }
.sls-disclosures p { margin: 0; color: #B9CBE8; font-size: .72rem; line-height: 1.45; }
.sls-disclosures p:first-child { color: #DCEBFF; }

/* ---- Responsive, matching the home page's steps ------------------------ */
@media (max-width: 1120px) {
  :root { --sls-gutter: 34px; }
  .sls-nav-links { display: none; }
  .sls-footer-main { grid-template-columns: 1.4fr 1fr 1fr; }
  .sls-footer-tier2 { grid-template-columns: 1fr 1fr; }
  .sls-footer-tier2 > div:last-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  :root { --sls-gutter: 20px; }
  .sls-nav { min-height: 78px; }
  .sls-brand-logo { width: 210px; }
  .sls-nav-actions .sls-btn-outline { display: none; }
  .sls-footer-main { grid-template-columns: 1fr 1fr; }
  .sls-footer-main > div:first-child { grid-column: 1 / -1; }
  .sls-footer-tier2 { grid-template-columns: 1fr; }
  .sls-footer-tier2 > div:last-child { grid-column: auto; }
  .sls-trust-grid img { height: 62px; }
}
@media (max-width: 520px) {
  :root { --sls-gutter: 14px; }
  .sls-brand-logo { width: 185px; }
  .sls-nav-actions .sls-btn { padding: 10px 13px; min-height: 44px; }
  .sls-footer-main { grid-template-columns: 1fr; }
  .sls-footer-main > div:first-child { grid-column: auto; }
  .sls-footer-bottom .sls-inner { padding-block: 18px 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .sls-btn, .sls-nav-links a::after { transition: none !important; }
  .sls-btn:hover { transform: none; }
}