/* =========================================================
   LITTLE STAR 2026 BRANDING: shared styles
   For apply.php, forms-info.php and any inner page.
   Load AFTER existing site CSS. Add class "ls-2026" to <body>.
   ========================================================= */
.ls-2026{
  --ls-yellow:#FBAB1F;
  --ls-cream:#FBECD4;
  --ls-twilight:#5454A4;
  --ls-light-blue:#42C7F2;
  --ls-pale-blue:#DFF4FC;
  --ls-tomato:#F2633E;
  --ls-white:#FFFFFF;
  --ls-ink:#33335F;
  --ls-font-head:"Arcanite Slab","Roboto Slab",Georgia,serif;
  --ls-font-sub:"Bouba Round","Fredoka","Arial Rounded MT Bold",system-ui,sans-serif;
  --ls-font-body:"proxima-nova","Proxima Nova","Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-family:var(--ls-font-body);
  color:var(--ls-ink);
}
/* Fonts: add to <head> unless the Adobe kit is loaded
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@800&family=Fredoka:wght@600&family=Figtree:wght@400;600;700&display=swap" rel="stylesheet"> */

.ls-2026 h1,.ls-2026 h2{font-family:var(--ls-font-head);font-weight:800;color:var(--ls-twilight);line-height:1.1}
.ls-2026 h3,.ls-2026 h4,.ls-2026 h5,.ls-2026 legend{font-family:var(--ls-font-sub);font-weight:600;color:var(--ls-twilight)}
.ls-2026 a{color:var(--ls-twilight)}
.ls-2026 a:hover{color:var(--ls-tomato)}
.ls-2026 :focus-visible{outline:3px solid var(--ls-light-blue);outline-offset:3px}

/* Rounded-end brand line under headings */
.ls-2026 .ls-line{display:block;width:72px;height:8px;border-radius:999px;background:var(--ls-light-blue);margin:0 0 1.25rem}

/* ---------- Inner-page banner (replaces old page header image/bar) ---------- */
.ls-page-hero{background:var(--ls-twilight);color:var(--ls-white);position:relative;padding:3.5rem 0 5rem;text-align:center}
.ls-page-hero h1{color:var(--ls-white);font-size:clamp(2.2rem,5vw,3.5rem);margin:0}
.ls-page-hero p{font-family:var(--ls-font-sub);color:var(--ls-yellow);font-size:1.25rem;margin:.5rem auto 0;max-width:40ch}
.ls-page-hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:60px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C240,95 520,0 820,35 C1080,65 1260,20 1440,30 L1440,90 L0,90 Z' fill='%23FBAB1F'/%3E%3Cpath d='M0,58 C260,100 540,25 840,55 C1100,80 1280,45 1440,52 L1440,90 L0,90 Z' fill='%23FFFFFF'/%3E%3C/svg%3E") center bottom/100% 100% no-repeat}

/* ---------- Buttons (apply both to existing .btn classes and new markup) ---------- */
.ls-2026 .ls-btn,
.ls-2026 .btn-primary,
.ls-2026 button[type="submit"],
.ls-2026 input[type="submit"]{
  display:inline-block;font-family:var(--ls-font-sub);font-weight:600;font-size:1.1rem;
  background:var(--ls-yellow);color:var(--ls-twilight);border:0;border-radius:999px;
  padding:.8em 2.2em;cursor:pointer;text-decoration:none;box-shadow:none;
  transition:background-color .15s ease,transform .15s ease}
.ls-2026 .ls-btn:hover,
.ls-2026 .btn-primary:hover,
.ls-2026 button[type="submit"]:hover,
.ls-2026 input[type="submit"]:hover{background:#ffbb42;color:var(--ls-twilight);transform:translateY(-2px)}
.ls-2026 .ls-btn--twilight{background:var(--ls-twilight);color:var(--ls-white)}

/* ---------- Forms (apply.php) ---------- */
.ls-2026 form{max-width:860px;margin:0 auto}
.ls-2026 fieldset{border:0;background:var(--ls-cream);border-radius:28px;padding:1.75rem 2rem;margin:0 0 1.75rem}
.ls-2026 legend{float:left;width:100%;font-size:1.4rem;margin-bottom:1rem;padding:0}
.ls-2026 legend + *{clear:both}
.ls-2026 label{font-family:var(--ls-font-sub);font-weight:600;color:var(--ls-twilight);display:inline-block;margin-bottom:.35rem}
.ls-2026 input[type="text"],.ls-2026 input[type="email"],.ls-2026 input[type="tel"],
.ls-2026 input[type="date"],.ls-2026 input[type="number"],.ls-2026 select,.ls-2026 textarea,
.ls-2026 .form-control{
  width:100%;font:inherit;color:var(--ls-ink);background:var(--ls-white);
  border:2px solid #EBDDC4;border-radius:14px;padding:.75rem 1rem;box-shadow:none;height:auto}
.ls-2026 input:focus,.ls-2026 select:focus,.ls-2026 textarea:focus,.ls-2026 .form-control:focus{
  border-color:var(--ls-light-blue);outline:none;box-shadow:0 0 0 3px rgba(66,199,242,.25)}
.ls-2026 select{appearance:none;padding-right:2.5rem;
  background:var(--ls-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235454A4' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") right 1rem center/12px no-repeat}
.ls-2026 input[type="checkbox"],.ls-2026 input[type="radio"]{accent-color:var(--ls-twilight);width:1.15em;height:1.15em;vertical-align:-.15em;margin-right:.4em}
.ls-2026 input[type="file"]{font:inherit}
.ls-2026 input[type="file"]::file-selector-button{font-family:var(--ls-font-sub);font-weight:600;background:var(--ls-twilight);color:var(--ls-white);border:0;border-radius:999px;padding:.5em 1.25em;margin-right:1rem;cursor:pointer}
.ls-2026 .has-error .form-control,.ls-2026 .is-invalid{border-color:var(--ls-tomato)}
.ls-2026 .help-block,.ls-2026 .invalid-feedback,.ls-2026 .error{color:var(--ls-tomato);font-size:.92rem}
.ls-2026 .alert-success{background:var(--ls-pale-blue);color:var(--ls-twilight);border:0;border-radius:16px}

/* ---------- Text pages (oorah.php) ---------- */
.ls-2026 .ls-prose{max-width:760px;margin:3rem auto;padding:0 1.25rem;font-size:1.0625rem;line-height:1.7}
.ls-2026 .ls-prose p{margin:0 0 1.1em}
.ls-2026 .ls-prose img{max-width:100%;height:auto;display:block;margin:1.5rem auto}
.ls-2026 .ls-prose .ls-btn{margin-top:1rem}

/* ---------- Forms & Info list (forms-info.php) ---------- */
.ls-doc-list{list-style:none;margin:2rem auto;padding:0;max-width:860px;display:grid;gap:1rem}
.ls-doc-list li a{display:flex;align-items:center;gap:1rem;background:var(--ls-cream);border-radius:20px;
  padding:1.1rem 1.4rem;text-decoration:none;font-family:var(--ls-font-sub);font-weight:600;color:var(--ls-twilight)}
.ls-doc-list li a::before{content:"";flex:0 0 44px;height:44px;border-radius:50%;
  background:var(--ls-yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v11m0 0l-4.5-4.5M12 15l4.5-4.5M5 20h14' stroke='%235454A4' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px no-repeat}
.ls-doc-list li a:hover{background:var(--ls-pale-blue);color:var(--ls-twilight)}