/* ======================================================================
   Unified stylesheet (single-file) — BUTTONS RESTORED TO GREEN PRIMARY
   - Replaces previous /assets/style.css
   - Restores green primary buttons as the default .btn look (matching prior)
   - Keeps explicit variants: .btn-ghost, .btn.danger, hero/CTA styles
   - Stronger specificity for inputs/buttons/anchors to avoid accidental white styling
   - After replacing: hard-refresh your browser (Ctrl/Cmd+Shift+R)
   ====================================================================== */

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Poppins:wght@600;700&display=swap');

:root{
  --page-max: 1200px;
  --pad: 28px;

  --bg: #0a0a0a;
  --panel: #111111;
  --card: #1a1a1a;
  --muted: #9fb0b6;
  --text: #e6f3f4;
  --accent: #10b981;
  --accent-600: #0ea66f;
  --glass: rgba(255,255,255,0.03);
  --border: rgba(255,255,255,0.06);

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

  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --font-head: "Poppins", var(--font-ui);
  --base-font: 16px;

  --ease: cubic-bezier(.2,.9,.2,1);

  /* admin sidebar nudge (positive => move sidebar right).
     Adjust this value to nudge the sidebar horizontally. */
  --sidebar-nudge: 12px;
  --admin-side-width: 260px;
}

[data-theme="light"]{
  --bg: #f7fafc;
  --muted: #65707a;
  --text: #091014;
  --accent: #10b981;
  --border: rgba(9,16,20,0.04);
}

/* Reset + base */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: var(--base-font); }
body {
  font-family: var(--font-ui);
  background: radial-gradient(1200px 600px at 10% 10%, rgba(16,185,129,0.02), transparent), var(--bg);
  color: var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height: 1.45;
  min-height: 100vh;
}

/* Global container helpers */
.container, .wrap, .nav-content { max-width: var(--page-max); margin-left: auto; margin-right: auto; padding-left: var(--pad); padding-right: var(--pad); }

/* ============================
   NAVBAR
   ============================ */
header.navbar, .navbar {
  background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
  border-radius: calc(var(--radius-lg) + 2px);
  border: 1px solid var(--border);
  margin: 20px auto;
  width: calc(100% - 40px);
  max-width: var(--page-max);
  box-shadow: 0 10px 30px rgba(2,6,8,0.45);
}
.nav-content { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 20px; min-height:64px; }
.nav-content > * { align-self:center; }

/* Logo (slightly reduced) */
.logo-section { display:flex; align-items:center; gap:10px; }
.logo-img { width:48px; height:48px; border-radius:10px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, rgba(255,255,255,0.02), transparent); }
.logo-img img { max-height:40px; object-fit:contain; display:block; }
.logo-text { font-family:var(--font-head); font-weight:800; font-size:1.0rem; color:var(--text); }

/* Center nav links */
.nav-links { display:flex; gap:18px; align-items:center; justify-content:center; flex:1; margin:0 12px; list-style:none; padding-left:0; }
.nav-links a { color:var(--muted); text-decoration:none; padding:8px 12px; border-radius:10px; font-weight:600; line-height:1; display:inline-flex; align-items:center; }
.nav-links a.active, .nav-links a:hover { color:var(--text); background:var(--glass); }

/* Right actions */
.nav-right { display:flex; gap:10px; align-items:center; justify-content:flex-end; min-width:140px; }
.theme-toggle { width:44px; height:44px; border-radius:10px; background:var(--card); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text); }

/* ============================
   BUTTONS — RESTORED GREEN PRIMARY
   ============================ */

/* Ensure form controls and anchors used as buttons get consistent styles */
button, input[type="button"], input[type="submit"], input[type="reset"], a.btn {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font: inherit;
}

/* Base .btn now uses the green primary by default (restores "usual" behavior) */
.btn, button.btn, a.btn, input.btn, input[type="submit"].btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 18px;
  border-radius:12px;
  cursor:pointer;
  border: 1px solid rgba(0,0,0,0.06);
  transition: transform .12s var(--ease), box-shadow .14s var(--ease), background .12s var(--ease);
  font-weight:700;
  font-size:1rem;
  line-height:1;
  min-height:44px;
  color: #ffffff;
  background-image: linear-gradient(180deg, var(--accent), var(--accent-600));
  background-color: var(--accent);
  box-shadow: 0 18px 48px rgba(16,185,129,0.12);
  text-decoration:none;
  box-sizing:border-box;
}

/* Make sure plain anchors without .btn retain link appearance */
a:not(.btn) { color: inherit; text-decoration: none; }

/* Primary explicit (for compatibility) */
.btn-primary, button.btn-primary, a.btn-primary, input[type="submit"].btn-primary {
  /* identical to .btn — included for clarity and specificity */
  background-image: linear-gradient(180deg, var(--accent), var(--accent-600));
  color:#fff;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 18px 48px rgba(16,185,129,0.12);
}

/* Hover / focus for green buttons */
.btn:hover, .btn-primary:hover, button.btn:hover, a.btn:hover, input[type="submit"].btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 28px 72px rgba(16,185,129,0.14);
}
.btn:focus, button:focus, a.btn:focus, input[type="submit"].btn:focus {
  outline: 3px solid rgba(16,185,129,0.12);
  outline-offset: 3px;
}

/* Ghost / outline variant */
.btn-ghost, a.btn-ghost, button.btn-ghost, input.btn-ghost {
  background: transparent;
  color: var(--muted);
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: none;
}
.btn-ghost:hover { background: rgba(255,255,255,0.02); color: var(--text); }

/* Small variant */
.btn.small, button.small, a.btn.small {
  padding:8px 10px;
  min-height:36px;
  font-size:.92rem;
  border-radius:10px;
}

/* Danger variant */
.btn.danger, .danger, button.danger, a.danger {
  background-image: linear-gradient(180deg, #d9534f, #c23b3b);
  color: #fff;
  border-color: rgba(0,0,0,0.06);
  box-shadow: 0 12px 36px rgba(217,83,79,0.12);
}

/* Hero / CTA buttons keep larger/richer style */
.btn-hero, .btn-cta, .btn-cta-large, .position-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-decoration:none;
  cursor:pointer;
  border-radius: var(--radius-lg);
  transition: transform .12s var(--ease), box-shadow .14s var(--ease);
}
.btn-hero.primary, .btn-cta, .btn-cta-large {
  background-image: linear-gradient(135deg, var(--accent), var(--accent-600));
  color:#fff;
  box-shadow: var(--shadow-md);
}
.btn-hero.secondary {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
}

/* Ensure inputs styled as buttons inherit the green look when .btn class applied */
input[type="submit"].btn, input[type="button"].btn {
  cursor: pointer;
  color: #fff;
  background-image: linear-gradient(180deg, var(--accent), var(--accent-600));
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 18px 48px rgba(16,185,129,0.12);
}

/* Ensure admin-scoped .btn use consistent base too */
.admin-wrap .btn, .admin-wrap a.btn {
  background-image: linear-gradient(180deg, var(--accent), var(--accent-600));
  color: #fff;
  border: 1px solid rgba(0,0,0,0.06);
}

/* ============================
   HERO
   ============================ */
.hero { width:100%; margin:0; padding:160px 18px 180px; display:flex; align-items:center; justify-content:center; text-align:center; background: radial-gradient(900px 360px at 14% 12%, rgba(16,185,129,0.03), transparent 8%), radial-gradient(700px 320px at 84% 88%, rgba(81,102,255,0.02), transparent 6%), linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.00)); }
.hero-inner { max-width:1040px; margin:0 auto; display:flex; flex-direction:column; gap:36px; align-items:center; justify-content:center; }
.hero h1 { font-family:var(--font-head); font-weight:800; font-size:72px; line-height:1.02; margin:0; color:var(--text); letter-spacing:-1px; }
.hero-sub { color:var(--muted); font-size:1.2rem; max-width:820px; margin:0 auto; margin-top:6px; text-align:center; }
.hero-ctas { display:flex; gap:18px; margin-top:12px; align-items:center; justify-content:center; flex-wrap:wrap; }

/* ============================
   MAIN PAGE: INFO CARDS & GRID
   ============================ */
.content { max-width:1200px; margin:96px auto 56px; padding:0 var(--pad); box-sizing:border-box; }
.section-header { text-align:center; margin-bottom:32px; }
.section-title { font-family:var(--font-head); font-size:1.6rem; font-weight:800; margin-bottom:6px; }
.section-subtitle { color:var(--muted); }

/* Center the grid and increase gaps for balance */
.info-grid { max-width:1080px; margin:0 auto; display:grid; grid-template-columns: repeat(3, 1fr); gap:28px; align-items:stretch; }

/* Card styling */
.info-card { background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent); border-radius:16px; padding:22px; border:1px solid rgba(255,255,255,0.035); display:flex; flex-direction:column; gap:14px; transition: transform .16s var(--ease), box-shadow .16s var(--ease); min-height:340px; }
.info-card:hover { transform: translateY(-6px); box-shadow:0 40px 100px rgba(0,0,0,0.55); }

/* Photo frame: smaller at bottom, framed with padding */
.card-media { width:100%; height:160px; border-radius:14px; padding:8px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.008)); border: 1px solid rgba(255,255,255,0.03); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.card-media img, .card-media svg { width:100%; height:100%; object-fit:cover; border-radius:8px; display:block; }

.info-card h3 { font-family:var(--font-head); font-size:1.15rem; margin:0; }
.info-card p { color:var(--muted); line-height:1.6; margin:0; font-size:1rem; }

/* responsive cards */
@media (max-width:1100px) { .info-grid { grid-template-columns: repeat(2, 1fr); } .card-media { height:140px; } }
@media (max-width:760px) { .info-grid { grid-template-columns: 1fr; max-width:640px; padding:0 14px; } .card-media { height:120px; } }

/* ============================
   APPLY FORM: tiled inputs
   ============================ */
.form-page { display:flex; align-items:flex-start; justify-content:center; padding:28px 16px 80px; }
.form-card-centered { width:100%; max-width:960px; border-radius:16px; padding:36px; background: transparent; border:1px solid rgba(255,255,255,0.02); box-shadow: 0 18px 60px rgba(0,0,0,0.6); }
.question-card { background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent); border-radius:12px; padding:20px; margin-bottom:18px; border:1px solid rgba(255,255,255,0.03); }
.question-card:focus-within { border-color: var(--accent); box-shadow: 0 20px 48px rgba(16,185,129,0.05); transform: translateY(-4px); }

.field-title { display:block; font-weight:800; font-size:1.05rem; color:var(--text); margin-bottom:8px; }
.field-sub { color:var(--muted); font-size:0.98rem; margin-bottom:10px; }

.clean-input, input[type="text"], input[type="email"], select, textarea {
  width:100%;
  padding:16px 18px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.05);
  background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
  color:var(--text);
  font-size:1.05rem;
  box-shadow: inset 0 6px 20px rgba(0,0,0,0.55);
  transition: border-color .12s var(--ease), box-shadow .12s var(--ease), transform .08s var(--ease);
  box-sizing:border-box;
}
textarea { min-height:200px; line-height:1.6; }

.clean-input:focus, input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 20px 48px rgba(16,185,129,0.06);
  transform: translateY(-2px);
}

.form-actions { display:flex; gap:14px; align-items:center; margin-top:18px; flex-wrap:wrap; }
.form-actions .btn-primary { min-width:240px; padding:14px 22px; font-size:1.05rem; }

/* ============================
   ADMIN: scoped styles (active when body.admin-page present)
   - Forces left-column sidebar, allows nudging via --sidebar-nudge
   - Centers sidebar internal items visually
   - Provides admin-panel framed look for form pages
   ============================ */

/* Default admin container */
.admin-wrap { max-width: var(--page-max); margin: 28px auto; padding: 0 20px; box-sizing:border-box; }
.admin-layout, .admin-body { display:flex; gap:26px; align-items:flex-start; width:100%; box-sizing:border-box; }

/* Sidebar (left) - default layout */
.sidebar, .admin-left {
  order: 0;
  width: var(--admin-side-width);
  min-width: 220px;
  max-width: 320px;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
  border-radius:12px;
  padding:18px;
  border:1px solid var(--border);
  flex-shrink:0;
  position: sticky;
  top:18px;
  height: max-content;
  text-align:left;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap: 16px;
  margin-left: var(--sidebar-nudge); /* nudge the sidebar right */
}

/* Sidebar header if present */
.sidebar .sidebar-header, .admin-left .sidebar-header { 
  width:100%; 
  margin-bottom:12px; 
  display:flex; 
  flex-direction:column; 
  align-items:center; 
  gap:8px;
}

/* Sidebar menu items */
.sidebar .menu, .admin-left .menu { 
  display:flex; 
  flex-direction:column; 
  gap:10px; 
  width:100%; 
}
.sidebar .menu a, .admin-left .menu a {
  display:flex; 
  align-items:center; 
  gap:10px; 
  padding:10px 14px; 
  border-radius:10px; 
  color:var(--text); 
  text-decoration:none; 
  background:transparent; 
  border:1px solid transparent; 
  font-weight:700; 
  width: 100%; 
  justify-content:flex-start; 
  box-sizing:border-box;
}
.sidebar .menu a i, .admin-left .menu a i { 
  width:20px; 
  text-align:center; 
  color:var(--accent); 
  display:inline-block; 
}
.sidebar .menu a .label, .admin-left .menu a .label { 
  display:inline-block; 
  text-align:left; 
}

/* Hover/active */
.sidebar .menu a:hover, .admin-left .menu a:hover { background: rgba(255,255,255,0.02); transform: translateY(-2px); }
.sidebar .menu a.active, .admin-left .menu a.active { background: linear-gradient(90deg, rgba(16,185,129,0.06), transparent); border:1px solid rgba(16,185,129,0.04); }

/* Main area */
.main-area, .admin-right { flex:1 1 auto; min-width:0; display:block; }
.main-area .admin-section, .admin-right .admin-section { max-width:980px; margin:0 auto; padding:8px 0; }

/* Admin "panel" topbar (framed) for admin pages */
.admin-topbar, .admin-top {
  width: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.04);
  padding: 14px;
  margin-bottom: 18px;
  box-sizing: border-box;
}

/* Admin form framed tiles (input "tiles" like the image) */
.admin-form .input-tile, .admin-right .input-tile {
  background: var(--card);
  border: 2px solid rgba(255,255,255,0.95);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
  min-height: 46px;
  display:flex;
  align-items:center;
}

/* inner input visuals inside the framed tile */
.admin-form .input-tile input,
.admin-form .input-tile textarea,
.admin-right .input-tile input,
.admin-right .input-tile textarea {
  background: transparent;
  border: none;
  outline: none;
  width:100%;
  color: var(--text);
  font-size: 1.02rem;
  padding: 6px 8px;
}

/* Primary green button style for admin (rounded) */
.btn-primary-green, .admin .btn-primary-green, .btn-primary-green {
  background: linear-gradient(180deg, var(--accent), var(--accent-600));
  color:#fff;
  border: 2px solid rgba(255,255,255,0.06);
  padding: 10px 18px;
  border-radius: 12px;
  font-weight:800;
  cursor:pointer;
  box-shadow: 0 8px 30px rgba(16,185,129,0.12);
}

/* Helper boxes in left panel */
.admin-left .small-box, .sidebar .small-box { width:100%; height:100%; background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent); border-radius: 10px; display:flex; align-items:center; justify-content:center; color:var(--muted); }

/* ============================
   Scoped admin-grid override for pages that set body.admin-page
   (ensures the left column stays left and right content stays right)
   ============================ */
body.admin-page .admin-body,
body.admin-page .admin-layout {
  display: grid !important;
  grid-template-columns: var(--admin-side-width) 1fr !important;
  gap: 28px !important;
  align-items: start;
  width: 100%;
  box-sizing: border-box;
  direction: ltr !important;
}
body.admin-page .sidebar,
body.admin-page .admin-left {
  grid-column: 1 / 2 !important;
  order: 0 !important;
  width: var(--admin-side-width) !important;
  margin-left: var(--sidebar-nudge) !important;
  position: sticky !important;
  top: 18px !important;
  z-index: 2;
}
body.admin-page .admin-right,
body.admin-page .main-area {
  grid-column: 2 / 3 !important;
  order: 1 !important;
  width:100% !important;
}

/* On small screens revert to stacked layout for body.admin-page */
@media (max-width:980px) {
  body.admin-page .admin-body,
  body.admin-page .admin-layout {
    display:flex !important;
    flex-direction:column !important;
    gap:16px !important;
  }
  body.admin-page .sidebar,
  body.admin-page .admin-left {
    margin-left: 0 !important;
    width:100% !important;
    position: relative !important;
    top: auto !important;
    align-items: center !important;
  }
  body.admin-page .admin-right,
  body.admin-page .main-area { width:100% !important; }
}

/* ============================
   Tables and misc admin helpers
   ============================ */
.table { width:100%; border-collapse:collapse; }
.table thead th { padding:12px 10px; color:var(--muted); font-weight:700; border-bottom:1px solid rgba(255,255,255,0.03); text-align:left; }
.table tbody td { padding:12px 10px; color:var(--text); border-bottom:1px solid rgba(255,255,255,0.03); vertical-align:middle; }

/* ============================
   Utilities & responsive
   ============================ */
.muted { color:var(--muted); }
.hidden { display:none!important; }
.center { display:flex; align-items:center; justify-content:center; }

:focus { outline: 3px solid rgba(16,185,129,0.08); outline-offset: 3px; }

@media (max-width:760px) {
  .nav-links { display:none; }
  header.navbar { margin:14px 12px; width:calc(100% - 24px); }
  .nav-content { gap:8px; padding:10px; min-height:56px; }
  .hero { padding:64px 18px 80px; }
  .hero h1 { font-size:34px; }
  .info-grid { grid-template-columns: 1fr; max-width:640px; margin:0 auto; padding:0 14px; }
  .card-media { height:120px; }
  .form-card-centered { padding:22px; }
  .question-card { padding:14px; }
}

/* End of style.css */