/* ============================================================
   PBP Learning — Base Stylesheet
   Warm ivory palette · Nunito font · Split-border cards
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
  --bg:          #F7F3EE;
  --card:        #FFFFFF;
  --card2:       #F0EBE3;
  --border:      #E0D8D0;

  --amber:       #C46B1A;
  --amber-dark:  #5C3108;
  --amber-light: #FDE8C8;

  --terra:       #B85C35;
  --terra-dark:  #4A1F0E;
  --terra-light: #FADDD0;

  --sage:        #8DB89A;
  --sage-dark:   #2A4A30;
  --sage-light:  #E8F4EC;

  --navy:        #1e5175;
  --green:       #3a8c1a;
  --cream:       #FEF2D7;

  --text:        #1A1A1E;
  --muted:       #7A7570;
  --white:       #FFFFFF;

  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;

  --shadow-sm:   0 1px 3px rgba(0,0,0,0.06);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.08);
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Base ──────────────────────────────────────────────────── */
html { font-size: 16px; }

body {
  font-family: 'Nunito', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--amber);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

/* ── Typography ────────────────────────────────────────────── */
h1 { font-size: 2rem;   font-weight: 800; line-height: 1.2; }
h2 { font-size: 1.5rem; font-weight: 800; line-height: 1.3; }
h3 { font-size: 1.2rem; font-weight: 700; line-height: 1.4; }
h4 { font-size: 1rem;   font-weight: 700; }
p  { line-height: 1.7; color: var(--muted); }

.section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* ── Layout ────────────────────────────────────────────────── */
.page-wrap {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-body {
  flex: 1;
  padding: 16px;
}

/* ── Top Nav ───────────────────────────────────────────────── */
.top-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: var(--card);
  border-bottom: 0.5px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-logo {
  font-size: 18px;
  font-weight: 800;
  color: var(--green);
  -webkit-text-stroke: 1px var(--navy);
  paint-order: stroke fill;
}

.points-badge {
  background: var(--amber);
  color: #fff;
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ── Bottom Nav ────────────────────────────────────────────── */
.bottom-nav {
  display: flex;
  background: var(--card);
  border-top: 0.5px solid var(--border);
  position: sticky;
  bottom: 0;
}

.bottom-nav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: .03em;
  transition: color .15s;
}

.bottom-nav a.active,
.bottom-nav a:hover {
  color: var(--amber);
}

.bottom-nav a i {
  font-size: 20px;
}

/* ── Cards ─────────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
}

/* Split-border card — tier colors */
.split-card {
  padding: 3px;
  border-radius: var(--radius-lg);
}
.split-card .card {
  border: none;
  border-radius: calc(var(--radius-lg) - 3px);
  padding: 13px;
}

.split-card-sage  { background: linear-gradient(to bottom, var(--sage)  50%, var(--sage-dark)); }
.split-card-terra { background: linear-gradient(to bottom, var(--terra) 50%, var(--terra-dark)); }
.split-card-amber { background: linear-gradient(to bottom, var(--amber) 50%, var(--amber-dark)); }

/* ── Tier Badges ───────────────────────────────────────────── */
.tier-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  margin-bottom: 6px;
}
.tier-badge-sage  { background: var(--sage-light);  color: var(--sage-dark); }
.tier-badge-terra { background: var(--terra-light); color: var(--terra-dark); }
.tier-badge-amber { background: var(--amber-light); color: var(--amber-dark); }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 15px;
  border: none;
  border-radius: var(--radius-md);
  padding: 12px 24px;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
  text-decoration: none;
}
.btn:hover  { opacity: .9; }
.btn:active { transform: scale(.97); }

.btn-primary { background: var(--amber);    color: #fff; }
.btn-sage    { background: var(--sage);     color: #fff; }
.btn-outline { background: transparent; border: 1.5px solid var(--border); color: var(--text); }
.btn-full    { width: 100%; }
.btn-lg      { padding: 14px 32px; font-size: 17px; border-radius: var(--radius-xl); }

/* ── Form Elements ─────────────────────────────────────────── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea {
  width: 100%;
  background: var(--bg);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: 14px;
  font-family: 'Nunito', sans-serif;
  color: var(--text);
  transition: border-color .15s;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--amber);
}

textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.7;
}

input::placeholder,
textarea::placeholder { color: var(--muted); }

/* ── Progress Bar ──────────────────────────────────────────── */
.progress-bar {
  height: 6px;
  background: var(--bg);
  border-radius: 3px;
  overflow: hidden;
  border: 0.5px solid var(--border);
}
.progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .4s ease;
}

/* ── Streak Banner ─────────────────────────────────────────── */
.streak-bar {
  background: var(--amber-light);
  border: 0.5px solid #E8C8A0;
  border-radius: var(--radius-md);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.streak-text {
  font-size: 13px;
  font-weight: 700;
  color: var(--amber-dark);
}

/* ── Published Badge ───────────────────────────────────────── */
.published-badge {
  display: inline-block;
  background: var(--sage-light);
  color: var(--sage-dark);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
}

/* ── Alert / Flash Messages ────────────────────────────────── */
.alert {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
}
.alert-error   { background: #FDE8E8; color: #8B1A1A; border: 0.5px solid #F5C0C0; }
.alert-success { background: var(--sage-light); color: var(--sage-dark); border: 0.5px solid var(--sage); }

/* ── Utilities ─────────────────────────────────────────────── */
.text-muted   { color: var(--muted); }
.text-amber   { color: var(--amber); }
.text-center  { text-align: center; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.flex   { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.w-full { width: 100%; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 480px) {
  .page-wrap { max-width: 100%; }
  h1 { font-size: 1.7rem; }
}