:root{
  /* Outdoor palette */
  --bg:#f3f6f3;            /* light sage */
  --card:#ffffff;
  --text:#0f1720;          /* deep blue-black */
  --muted:#5a6b73;         /* slate */
  --line:#dfe6e1;          /* soft line */

  --accent:#2e7d5b;        /* forest green */
  --accent-dark:#1f5f45;   /* deep forest */
  --accent-2:#7a5c3a;      /* bunker bronze */
  --accent-3:#2b5d8a;      /* radio blue */

  --radius:16px;
  --shadow:0 12px 28px rgba(15,23,32,.12);
  --w:1060px;
}
*{ box-sizing:border-box; }
html, body{ min-height:100%; }
body{
  margin:0;
  font:16px/1.55 system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    linear-gradient(180deg, rgba(243,246,243,.82), rgba(243,246,243,.82)),
    url("/assets/img/hero.png") center / cover no-repeat fixed;
}
.wrap{ max-width:var(--w); margin:0 auto; padding:18px; }

/* HEADER */
.top{
  position:sticky; top:0; z-index:10;
  background:rgba(247,248,246,.88);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
}
.brand__name{
  font-weight:900; letter-spacing:.5px;
  text-decoration:none; color:var(--text);
}
.brand__tag{ font-size:13px; color:var(--muted); }

.nav{ display:flex; gap:12px; flex-wrap:wrap; }
.nav a{
  text-decoration:none; color:var(--text);
  padding:8px 10px; border-radius:12px;
}
.nav a:hover{ background:rgba(47,125,74,.10); }

/* LANG */
.lang{ display:flex; gap:6px; }
.lang a{
  font-size:13px; padding:6px 8px;
  border-radius:999px; border:1px solid var(--line);
  text-decoration:none; color:var(--muted); background:#fff;
}
.lang a.is-active{
  color:var(--accent);
  border-color:rgba(47,125,74,.45);
}

/* HERO */
.hero{ padding:22px 0; }
.hero__card{
  position:relative;
  padding:26px;
  border-radius:var(--radius);
  background:rgba(255,255,255,.78);
  backdrop-filter: blur(4px);
  box-shadow:var(--shadow);
  border:1px solid var(--line);
}
.hero__card h1{ margin:0 0 6px; }
.hero__card p{ margin:0 0 16px; max-width:60ch; color:var(--muted); }

/* BUTTONS */
.btn{
  display:inline-block; padding:10px 14px; border-radius:14px;
  background:var(--accent); color:#fff; text-decoration:none;
  border:1px solid rgba(0,0,0,.05);
}
.btn:hover{ background:var(--accent-dark); }
.btn--ghost{
  background:transparent; color:var(--accent);
  border:1px solid rgba(47,125,74,.45);
}
.btn--ghost:hover{ background:rgba(47,125,74,.10); }

/* GRID / CARDS */
.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:14px;
  padding:10px 0 26px;
}
.card{
  grid-column:span 4;
  padding:16px;
  border-radius:var(--radius);
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);
  box-shadow:0 6px 18px rgba(16,20,24,.08);
}
.card h2{ margin:0 0 8px; font-size:18px; }
.card p, .card li{ color:var(--muted); }
.list{ padding-left:18px; margin:8px 0 0; }

/* PROGRAM LAYOUT */
.page h1{ margin:18px 0 10px; }
.program-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:14px;
}
.program-badge{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(47,125,74,.35);
  color:var(--accent);
  background:rgba(47,125,74,.08);
  font-weight:700;
  white-space:nowrap;
}
.program-card a{ color:var(--accent); text-decoration:none; }
.program-card a:hover{ text-decoration:underline; }

/* FOOTER */
.footer{
  border-top:1px solid var(--line);
  color:var(--muted);
  padding-top:18px;
}

/* FORMS */
form{ display:grid; gap:12px; }
input, textarea{
  width:100%; padding:10px 12px;
  border-radius:12px; border:1px solid var(--line);
  font:inherit;
}
textarea{ resize:vertical; }

/* RESPONSIVE */
@media (max-width:900px){
  .card{ grid-column:span 12; }
  body{ background-attachment: scroll; background-position: center 35%; }
}

/* DARK MODE */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f1418;
    --card:#121a20;
    --text:#e9eef2;
    --muted:#a6b3bc;
    --line:#22303a;
  }
  body{
    background:
      linear-gradient(180deg, rgba(14,20,25,.82), rgba(14,20,25,.82)),
      url("/assets/img/hero.png") center / cover no-repeat fixed;
  }
  .top{ background:rgba(15,20,24,.85); border-bottom-color:var(--line); }
  .nav a{ color:var(--text); }
  .nav a:hover{ background:rgba(47,125,74,.18); }
  .lang a{ background:#0f1418; color:var(--muted); border-color:var(--line); }
  .card{ background:rgba(18,26,32,.92); border-color:var(--line); }
  input, textarea{ background:#0f1418; color:var(--text); border-color:var(--line); }
  .footer{ border-top-color:var(--line); }
  @media (max-width:900px){
    body{ background-attachment: scroll; background-position: center 35%; }
  }
}


/* ===== HOME PROGRAM TILES ===== */
.program-tile h2 a{
  color:var(--accent);
  text-decoration:none;
  font-size:20px;
  letter-spacing:.5px;
}
.program-tile h2 a:hover{
  text-decoration:underline;
}
.program-tile:hover{
  box-shadow:0 10px 26px rgba(16,20,24,.14);
  transform:translateY(-2px);
}


/* ===== BRAND (TOP LEFT) – bigger ===== */
.brand__name{
  font-size:22px;
  line-height:1.05;
}
.brand__tag{
  font-size:14px;
  font-weight:650;
  letter-spacing:.2px;
  margin-top:2px;
}
@media (max-width:900px){
  .brand__name{ font-size:20px; }
  .brand__tag{ font-size:13px; }
}


/* ===== HEADER HEIGHT & BRAND VISIBILITY ===== */
.top{
  padding:8px 0;              /* more vertical space */
}
.topbar{
  align-items:flex-start;     /* brand sits visually higher */
}

.brand{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.brand__name{
  font-size:24px;             /* a bit larger */
}

.brand__tag{
  font-size:15px;
  opacity:.95;
}

/* Nav vertically centered relative to brand block */
.nav{
  margin-top:6px;
}

@media (max-width:900px){
  .top{ padding:6px 0; }
  .brand__name{ font-size:22px; }
  .brand__tag{ font-size:14px; }
  .nav{ margin-top:4px; }
}


/* ===== HEADER ALIGNMENT (brand + nav left, language pinned right) ===== */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:nowrap;
}
.top-left{
  display:flex;
  align-items:center;
  gap:18px;
  min-width:0;
}
.brand{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.nav{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:0;
}
.lang{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}

/* Slightly smaller nav on narrow screens and allow wrapping */
@media (max-width:900px){
  .topbar{ flex-wrap:wrap; }
  .top-left{ width:100%; }
  .lang{ margin-left:0; }
}


/* ===== ACTIVE NAV ITEM ===== */
.nav a.is-active{
  background:rgba(47,125,74,.14);
  border:1px solid rgba(47,125,74,.35);
  font-weight:750;
}

/* ===== ADMIN UI (simple) ===== */
.admin-wrap{ max-width:900px; margin:0 auto; }
.admin-row{ display:flex; gap:10px; flex-wrap:wrap; }
.admin-row > *{ flex:1; min-width:220px; }
.table{ width:100%; border-collapse:collapse; }
.table th,.table td{ border-bottom:1px solid var(--line); padding:10px 8px; vertical-align:top; text-align:left; }
.small{ font-size:13px; color:var(--muted); }
.badge{ display:inline-block; padding:4px 8px; border-radius:999px; border:1px solid rgba(47,125,74,.35); background:rgba(47,125,74,.08); color:var(--accent); font-weight:700; font-size:12px; }
.actions{ display:flex; gap:8px; flex-wrap:wrap; }
.btn--danger{ background:#b42318; }
.btn--danger:hover{ background:#8f1c13; }
.btn--mini{ padding:8px 10px; border-radius:12px; font-size:14px; }
input[type="file"]{ padding:8px; background:rgba(255,255,255,.65); }
@media (prefers-color-scheme: dark){
  .nav a.is-active{ background:rgba(47,125,74,.22); border-color:rgba(47,125,74,.45); }
  input[type="file"]{ background:rgba(18,26,32,.65); }
}


/* ===== COLOR ACCENTS ===== */
.brand__name{ color:var(--accent-3); }
.nav a:hover{ background:rgba(46,125,91,.12); }
.nav a.is-active{
  background:rgba(46,125,91,.18);
  border:1px solid rgba(46,125,91,.45);
}
.program-badge{
  border-color:rgba(122,92,58,.45);
  color:var(--accent-2);
  background:rgba(122,92,58,.10);
}
.program-tile h2 a{ color:var(--accent-3); }
.btn{ background:var(--accent); }
.btn:hover{ background:var(--accent-dark); }

/* Dark mode tuned to palette */
@media (prefers-color-scheme: dark){
  .brand__name{ color:#7fb3ff; }
  .program-badge{
    border-color:rgba(167,137,95,.45);
    color:#d2b48c;
    background:rgba(167,137,95,.14);
  }
}


/* ===== ADMIN MENU ITEM ===== */
.nav a.admin-nav{
  font-weight:800;
  color:var(--accent-3);
  border:1px dashed rgba(46,125,91,.45);
}
.nav a.admin-nav:hover{
  background:rgba(46,125,91,.18);
}