/* Light, playful theme */

/* Tokens */
:root{
  --bg: #faf9f6;
  --panel: #ffffff;
  --panel-2: #ffffff;
  --text: #202534;
  --muted: #6b7280;
  --primary: #5b7cfa;
  --primary-600: #4766f0;
  --accent: #7a5af8;
  --danger: #ef4444;
  --ring: 0 0 0 3px rgba(91,124,250,.25);
  --radius: 16px;
  --shadow: 0 10px 24px rgba(28,38,72,.08);
  --hairline: rgba(28,38,72,.10);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(800px 400px at -10% -10%, #eaf0ff 0%, transparent 60%),
    radial-gradient(700px 360px at 110% 0%, #e8e5ff 0%, transparent 60%),
    var(--bg);
  font: 16px/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing: antialiased;
}

/* containers */
.container{width:100%;max-width:980px;margin:0 auto;padding:0 16px}

/* ===================== Header ===================== */
.site-header{
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,.85);
  border-bottom: 1px solid var(--hairline);
  box-shadow: 0 4px 18px rgba(28,38,72,.06);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  height:68px;
}
.brand{
  display:inline-flex; gap:.35rem; align-items:center;
  font-weight:900; font-size:20px; letter-spacing:.2px;
  text-decoration:none; color:var(--text);
}
.brand .dot{color:var(--accent)}
.nav-links{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:12px;
}
.nav-links li{list-style:none}
.nav-links a{
  display:inline-block;
  padding:8px 10px;
  border-radius:10px;
  text-decoration:none;
  color:var(--text);
  opacity:.9;
  transition: background .15s ease, color .15s ease, transform .05s ease;
}
.nav-links a:hover{
  background: rgba(91,124,250,.12);
  color: var(--primary-600);
  opacity:1;
}
.nav-links a:active{ transform: translateY(1px); }
.nav .sep{width:1px; height:22px; background: var(--hairline); margin:0 8px}

/* Buttons shared */
.btn{appearance:none; border:1px solid transparent; border-radius:12px; padding:10px 14px; cursor:pointer; font-weight:700; transition: transform .04s ease, box-shadow .12s ease, background .12s ease}
.btn:focus{box-shadow: var(--ring); outline:none}
.btn:active{transform: translateY(1px)}
.btn-primary{background:var(--primary); color:#fff}
.btn-primary:hover{background:var(--primary-600)}
.btn-secondary{background: var(--panel); color: var(--text); border:1px solid var(--hairline)}
.btn-secondary:hover{border-color: rgba(28,38,72,.22)}

/* Content spacing */
.content{padding:28px 0 64px}
.content > .hero-bleed:first-child{
  margin-top:-28px; /* pull hero up to touch the header */
}

/* ===== Full-bleed HERO (blue sky + clouds) ===== */
.hero-bleed{
  position: relative;
  left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;
  width: 100vw;
  overflow: hidden;
  background: #a7c7ff; /* sky */
}
.clouds{
  position: absolute; inset: 0; z-index: 1;
  bottom: -12px; /* let clouds hang past bottom to avoid showing the edge */
}
.cloud{
  position: absolute; top: 0; left: 0;
  width: 200%; height: 100%;
  background-repeat: repeat-x;
  background-size: 1400px 320px;
  opacity: 1;
}
.layer-a{
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='1400' height='320'>\
  <path d='M0 210 Q160 140 320 210 T640 210 T960 210 T1400 210 V320 H0 Z' fill=\"white\"/>\
</svg>");
  animation: move-left 80s linear infinite;
  opacity: .95;
}
.layer-b{
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='1400' height='320'>\
  <path d='M0 240 Q220 170 440 240 T880 240 T1400 240 V320 H0 Z' fill=\"white\"/>\
</svg>");
  animation: move-right 120s linear infinite;
  opacity: .9;
}
.hero-slab{
  position: relative; z-index: 2;
  padding: 56px 16px 64px;
  text-align: center;
}
.hero-title{
  margin: 0 0 20px;
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.1; letter-spacing: .2px; color: #2a2f3e;
}

/* Animations */
@keyframes move-left   { from{background-position: 0 0} to{background-position: -1400px 0} }
@keyframes move-right  { from{background-position: 0 0} to{background-position:  1400px 0} }

/* Pill search */
.search-pill{
  display:flex; justify-content:center; gap:10px;
  max-width: 760px; margin: 0 auto;
  background:#fff; border:1px solid var(--hairline);
  border-radius: 999px; padding:10px;
  box-shadow: 0 18px 40px rgba(28,38,72,.10);
}
.pill-input{
  flex:1; min-width:0; border:none; outline:none;
  background: transparent; color: var(--text);
  font-size: 16px; padding: 12px 14px;
}
.pill-button{
  appearance:none; border:0; outline:none; cursor:pointer;
  background: var(--primary); color:#fff; /* white text */
  font-weight:700; border-radius: 999px; padding: 12px 18px;
}
.pill-button:hover{background: var(--primary-600)}
.pill-button:focus{box-shadow: var(--ring)}

/* Cards / Results */
.card{
  background: var(--panel); border:1px solid var(--hairline);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding:24px; margin:0 16px 20px;
}
.card h1,.card h2,.card h3{margin-top:0}
.results-grid{display:grid; gap:14px; grid-template-columns: 1fr; padding: 24px 0}
@media (min-width:720px){ .results-grid{grid-template-columns: 1fr 1fr} }
.result-card{
  background: var(--panel-2); border:1px solid var(--hairline);
  border-radius: 14px; padding:16px; box-shadow: 0 6px 18px rgba(28,38,72,.06)
}
.result-card h3{margin:0 0 6px; font-size:18px}
.result-card a{color:var(--primary); text-decoration:none}
.result-card a:hover{text-decoration:underline}
.muted{color:var(--muted)}
.img-responsive{max-width:100%; height:auto; border-radius:12px}

/* ===== Quick links (About) ===== */
.quick-links{
  display:grid;
  gap:12px;
  margin-top:14px;
}

@media (min-width:720px){
  .quick-links{
    grid-template-columns: repeat(3, 1fr);
  }
}

.quick-link{
  display:block;
  text-decoration:none;
  padding:16px;
  border-radius:14px;
  border:1px solid var(--hairline);
  background: linear-gradient(180deg, #ffffff, #fbfbff);
  box-shadow: 0 6px 18px rgba(28,38,72,.06);
  transition: transform .05s ease, box-shadow .12s ease, border-color .12s ease;
  color: var(--text);
}

.quick-link:hover{
  border-color: rgba(91,124,250,.35);
  box-shadow: 0 10px 24px rgba(28,38,72,.10);
}

.quick-link:active{
  transform: translateY(1px);
}

.ql-title{
  font-weight:800;
  font-size:16px;
  line-height:1.2;
  color: var(--primary-600);
}

.ql-sub{
  margin-top:6px;
  font-size:14px;
}

/* Forms */
.form{display:grid; gap:12px}
.form label{display:grid; gap:6px}
.form label span{color:var(--muted); font-size:14px}
.form .input{background:#fff}
.form-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:6px}
.alert{padding:12px 14px; border-radius:12px; margin:6px 0 14px; border:1px solid transparent}
.alert-error{background: #fee2e2; border-color: #fecaca; color:#991b1b}

/* ===================== Footer ===================== */
.site-footer{
  border-top:1px solid var(--hairline);
  background: linear-gradient(180deg, #ffffffcc, #f7f6f2);
  backdrop-filter: blur(6px);
  padding:18px 0;
}
.site-footer .container{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; color:var(--muted);
}
/* Works whether you use .footer-inner/.footer-links or not */
.footer-inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.footer-left{ display:flex; align-items:center; gap:10px; }
.footer-brand{ font-weight:800; letter-spacing:.2px; }

.footer-links,
.site-footer ul{ list-style:none; margin:0; padding:0; display:flex; gap:14px; }
.footer-links a,
.site-footer a{ color:var(--text); text-decoration:none; opacity:.85; padding:6px 8px; border-radius:8px }
.footer-links a:hover,
.site-footer a:hover{ opacity:1; background: rgba(91,124,250,.10) }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .layer-a, .layer-b { animation: none; }
}

/* --------- Defensive helpers --------- */
/* Make plain anchors in the header look polished if class is missing */
.nav a.nav-link { /* no-op; documented */ }
.nav a:not(.btn):not(.nav-link){
  display:inline-block; padding:8px 10px; border-radius:10px;
  text-decoration:none; color:var(--text); opacity:.9;
  transition:background .15s ease, color .15s ease, transform .05s ease;
}
.nav a:not(.btn):not(.nav-link):hover{
  background: rgba(91,124,250,.12); color: var(--primary-600); opacity:1;
}

/* Form hardening: even without class="input" */
.card input[type="text"],
.card input[type="email"],
.card input[type="password"],
.form input[type="text"],
.form input[type="email"],
.form input[type="password"]{
  width:100%;
  background:#fff;
  border:1px solid var(--hairline);
  color:var(--text);
  padding:12px 14px;
  border-radius:12px;
  outline:none;
  box-shadow: 0 3px 10px rgba(28,38,72,.04) inset, 0 0 0 0 rgba(0,0,0,0);
}
.card input:focus,
.form input:focus{
  border-color: rgba(91,124,250,.45);
  box-shadow: var(--ring), 0 3px 10px rgba(28,38,72,.06) inset;
}

a.btn-primary,
button.btn-primary {
  color: #fff !important;
}