/* ====== LPA Planner – Base Theme ====== */

/* Brand tokens — change these and the whole site updates */
:root{
  --brand-bg: #ffffff;
  --brand-text: #111315;
  --brand-muted: #667085;

  /* Choose one accent that matches your logo */
  --brand-accent: #2c5e6b;   /* muted teal-blue (adjust anytime) */
  --brand-accent-2: #e6f0f2; /* light tint for hero/sections */

  --radius: 14px;
  --shadow: 0 6px 24px rgba(16,24,40,0.08);
  --maxw: 860px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
}


/* Reset-ish */
*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0; background:var(--brand-bg); color:var(--brand-text);
  font-family:var(--font); line-height:1.6;
}
img{ max-width:100%; height:auto; display:block; }

/* Layout helpers */
.container{ max-width:var(--maxw); margin:0 auto; padding: var(--space-4) var(--space-2); }
.section{ padding: var(--space-2) 0; }
.card{
  background:#fff; border-radius:var(--radius); box-shadow:var(--shadow);
  padding:var(--space-3); border:1px solid #eef1f3;
}

/* Header / Nav */
.header{
  background: linear-gradient(180deg, var(--brand-accent) 0%, #254e59 100%);
  color:#fff;
}
.header .container{ padding-top: var(--space-3); padding-bottom: var(--space-3); }
.brand{
  display:flex; align-items:center; gap:.75rem; text-decoration:none; color:#fff;
}
.brand-logo{
  width:36px; height:36px; border-radius:10px; background:#fff1; display:grid; place-items:center;
  border:1px solid #ffffff26;
}
.brand-title{ font-weight:700; letter-spacing:.2px; font-size: 1.7rem;}
.nav{
  margin-top: var(--space-2); display:flex; gap:1rem; flex-wrap:wrap;
}
.nav a{
  color:#eaf3f6; text-decoration:none; padding:.25rem .5rem; border-radius:8px;
}
.nav a:hover{ background:#ffffff1a; }

/* Typography */
h1,h2,h3{ line-height:1.25; margin: 0 0 .5rem 0; }
h1{ font-size: clamp(1.75rem, 2.5vw, 2.25rem); }
h2{ font-size: clamp(1.25rem, 2vw, 1.5rem); margin-top: var(--space-3); }
.muted{ color:var(--brand-muted); }

/* Buttons & links */
.button{
  display:inline-block; background:var(--brand-accent); color:#fff; text-decoration:none;
  padding:.7rem 1rem; border-radius:10px; box-shadow: var(--shadow); font-weight:600;
}
.button:hover{ filter:brightness(1.05); }
.btn-ghost{
  display:inline-block; color:var(--brand-accent); text-decoration:none; padding:.5rem .75rem;
  border-radius:10px; border:1px solid var(--brand-accent);
}
a{ color:var(--brand-accent); }

/* Grids */
.list{
  display:grid; gap:1rem;
}
@media (min-width:720px){
  .list.cols-3{ grid-template-columns: repeat(3, 1fr); }
  .list.cols-2{ grid-template-columns: repeat(2, 1fr); }
}

/* Footer */
.footer{
  padding: var(--space-3) 0; color:var(--brand-muted); border-top:1px solid #eef1f3;
  background:#fafcfd;
}
.footer a{ color:inherit; text-decoration:underline; }

/* Ensure the header logo pops over the dark gradient */
.header .brand-logo{
  background: #fff;          /* solid white behind the logo */
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 0 0 1px #ffffff40, 0 3px 10px rgba(0,0,0,.12);
  display: grid;
  place-items: center;
}

/* Make the image fit the box neatly */
.header .brand-logo img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ====== Homepage spacing tighten ====== */

/* Reduce the big gap after the hero */
.home .hero .container {
  padding-bottom: 0.75rem;   /* was 2rem */
}

/* Sections on the homepage: much tighter vertical rhythm */
.home .section {
  padding: 0.5rem 0;         /* was 1.5rem top/bottom */
}

/* Reduce the internal container padding for sections only on home */
.home .section > .container {
  padding-top: 1rem;         /* was 2rem */
  padding-bottom: 1rem;      /* was 2rem */
}

/* Headings on home: trim the default large top margin */
.home h2 {
  margin-top: 0.5rem;        /* was var(--space-3) = 1.5rem */
}

/* ====== Form field readability ====== */

input[type="text"],
input[type="email"],
textarea {
  font-size: 1rem;           /* matches base paragraph size (~16px) */
  line-height: 1.4;
  padding: 0.5rem;
  font-family: var(--font);
  color: var(--brand-text);
  border: 1px solid #ccd1d4;
  border-radius: 8px;
}

textarea#summary {
  font-size: 1.05rem;        /* slightly larger for long-form content */
}