/* ==========================================================================
   0) DESIGN TOKENS (colors, sizing, fonts)
   ========================================================================== */
:root{
  /* Brand gradient (used for CTAs) */
  --brand-1:#6c63ff; --brand-2:#48c6ef;

  /* Header/nav gradient (comes from global theme, with safe fallbacks) */
  --ui-1: var(--ui-1, #7b8fff);
  --ui-2: var(--ui-2, #84d3fa);

  /* Text + surfaces */
  --text-on-dark:#fff;
  --text-muted:rgba(255,255,255,.85);
  --glass-bg:rgba(255,255,255,.10);
  --glass-border:rgba(255,255,255,.30);

  /* Buttons */
  --btn-login-1:#1b5e20;  --btn-login-2:#2e7d32;
  --btn-signup-1:#0d47a1; --btn-signup-2:#1565c0;
  --btn-logout-1:#EA4335; --btn-logout-2:#f35649;

  /* Radii, shadows */
  --radius-sm:6px; --radius-md:8px; --radius-lg:12px;
  --shadow-1:0 2px 4px rgba(0,0,0,.20);
  --shadow-2:0 6px 12px rgba(0,0,0,.25);

  /* Mobile safe area */
  --safe-top:env(safe-area-inset-top, 0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);

  /* JS sets this when the drawer opens so the header doesn't shake */
  --scrollbar:0px;
}

/* ==========================================================================
   1) GLOBAL LAYOUT
   ========================================================================== */
*,
*::before,
*::after{ box-sizing:border-box; }

html, body{ height:100%; }

body{
  margin:0;
  font-family:Arial, sans-serif;
  color:var(--text-on-dark);
  display:flex;
  flex-direction:column;

  /* Respect global background (defined in global.css) */
  background: var(--bg, linear-gradient(120deg,#6a85ff 0%, #82e0ff 100%)) fixed no-repeat;
  background-size:cover;
}

/* Prevent header “shake” when mobile drawer toggles */
body.nav-open{
  overflow:hidden;
  padding-right:var(--scrollbar);   /* width of hidden scrollbar set by JS */
}

/* Transparent tables, common */
table{ width:100%; table-layout:fixed; background:transparent!important; }
td, tr{ background:transparent!important; }

/* Optional content wrapper */
main{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 16px;
  text-align:center;
}

/* ==========================================================================
   2) HEADER / NAVBAR
   ========================================================================== */
header.site-header{
  position:relative;
  z-index:101;
  box-shadow:var(--shadow-1);
  background: linear-gradient(120deg, var(--ui-1,#7b8fff) 0%, var(--ui-2,#84d3fa) 100%);
}

.site-header.minimal{
  display:grid;
  grid-template-columns:1fr auto; /* brand | nav/hamburger */
  align-items:center;
  gap:12px;
  padding:10px 16px;
}

/* Brand (logo + name or slogan) */
.logo-wrapper{ display:flex; align-items:center; gap:10px; }
.brand-link{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--text-on-dark); }

.site-logo{ width: clamp(48px, 10vw, 72px); height:auto; display:block; }
.brand-mark{ width: clamp(40px, 8vw, 56px); height:auto; object-fit:contain; filter:drop-shadow(0 0 6px rgba(0,0,0,.15)); }

.brand-name{
  font-family:'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-weight:700; letter-spacing:.2px;
  font-size: clamp(18px, 3.5vw, 26px);
  line-height:1; white-space:nowrap; color:var(--text-on-dark);
}

/* Slogan next to the logo */
.brand-slogan{
  font-family:'Playfair Display','Merriweather',serif;
  font-weight:600;
  font-size:clamp(15px, 1.6vw, 20px);
  line-height:1.1; letter-spacing:.2px;
  color:#fff; white-space:nowrap;
  text-shadow:0 1px 8px rgba(0,0,0,.18);
}

/* ==========================================================================
   3) DESKTOP NAV
   ========================================================================== */
.main-nav{ justify-self:end; position:relative; }

.nav-list{
  list-style:none; display:flex; align-items:center;
  gap:clamp(8px, 2vw, 18px); margin:0; padding:0;
}
.nav-list li{ position:relative; }

.nav-list li a{
  display:inline-flex; align-items:center; gap:.4rem;
  text-decoration:none; color:var(--text-on-dark);
  font-weight:600; font-family:'Poppins', sans-serif;
  font-size:clamp(12px, 1.4vw, 16px);
  padding:.6rem 1rem; border-radius:var(--radius-sm);
  transition:background .3s, color .3s, transform .2s;
}
.nav-list li a:hover{ background:rgba(255,255,255,.15); }

/* Theme button lives inline as a normal nav item */
.nav-theme #themeBtn{
  position:static;
  width:36px; height:36px;
  display:inline-grid; place-items:center;
  border:1px solid rgba(255,255,255,.25);
  border-radius:10px;
  background:rgba(255,255,255,.10);
  color:#fff;
}

/* Hamburger */
.menu-toggle{
  display:none; font-size:24px; background:none; border:none; cursor:pointer; color:var(--text-on-dark);
}

/* Submenu (hover on desktop) */
.submenu{
  display:none; position:absolute; top:100%; left:0;
  background:#1e2a4a; border-radius:var(--radius-lg); box-shadow:var(--shadow-2);
  padding:.5rem 0; min-width:200px; z-index:9999;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .3s ease, transform .3s ease;
}
.has-submenu:hover .submenu{ display:block; opacity:1; visibility:visible; transform:translateY(0); }
.submenu li a{
  color:#fff; font-family:'Poppins',sans-serif; font-size:.95rem;
  padding:.6rem 1.2rem; display:flex; align-items:center; gap:.5rem;
  text-decoration:none; transition:background .3s ease, padding-left .3s;
}
.submenu li a:hover{ background:#4b6cb7; padding-left:1.6rem; color:#fff; }

/* ==========================================================================
   4) BUTTONS (login / signup / logout) — glossy
   ========================================================================== */
.button.login,
.button.signup,
.button.logout{
  color:#fff!important; padding:8px 18px; border-radius:var(--radius-md);
  font-weight:600; font-family:'Poppins',sans-serif; text-decoration:none;
  display:inline-flex; align-items:center; gap:6px;
  transition:transform .25s ease, background .25s ease;
}
.button.login{  background:linear-gradient(120deg,var(--btn-login-1),  var(--btn-login-2)); }
.button.signup{ background:linear-gradient(120deg,var(--btn-signup-1), var(--btn-signup-2)); }
.button.logout{ background:linear-gradient(120deg,var(--btn-logout-1), var(--btn-logout-2)); }
.button.login:hover,
.button.signup:hover,
.button.logout:hover{ transform:scale(1.05); filter:brightness(1.02); }

/* ==========================================================================
   5) FORMS (generic)
   ========================================================================== */
input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="number"], select, textarea{
  width:80%; padding:.75rem; margin:.5rem 0; border-radius:var(--radius-sm);
  border:1px solid #ccc; font-size:1rem; transition:border-color .3s, box-shadow .3s;
}
input:focus, select:focus, textarea:focus{
  border-color:var(--brand-1); outline:none; box-shadow:0 0 0 4px rgba(108,99,255,.2);
}
button{
  width:50%; padding:.75rem; background:var(--brand-1); color:#fff; border:none;
  border-radius:var(--radius-sm); font-size:1rem; cursor:pointer; margin-top:1rem;
  transition:background .3s, transform .3s;
}
button:hover{ background:linear-gradient(to right,var(--brand-1),var(--brand-2)); transform:scale(1.05); }

/* ==========================================================================
   6) RESPONSIVE (≤ 768px)
   ========================================================================== */
@media (max-width: 768px){
  .menu-toggle{ display:block; justify-self:end; }

  /* Header safe-area padding */
  header.site-header{ position:sticky; top:0; }
  header.site-header::before{
    content:""; position:absolute; left:0; right:0;
    top:calc(-1 * var(--safe-top)); height:var(--safe-top); background:inherit; z-index:-1;
  }
  header.site-header{ padding-top: calc(10px + var(--safe-top)); }

  /* Stack rows: logo first, hamburger second */
  .site-header.minimal{
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto; row-gap:6px;
  }
  .brand, .brand-link, .logo-wrapper{ order:0; justify-self:start!important; }
  .menu-toggle{
    order:1!important; justify-self:start!important; align-self:start!important;
    margin-left:2px; width:36px; height:36px; display:inline-flex;
    align-items:center; justify-content:center; padding:0; border-radius:8px;
  }

  /* Left glossy drawer */
  .main-nav{
    position:fixed!important; left:12px; top:calc(var(--safe-top) + 64px)!important;
    width:min(72vw,320px)!important; max-height:min(78svh,520px)!important; height:auto!important;
    padding:14px 12px 16px!important; border-radius:18px!important;
    border:1px solid rgba(255,255,255,.16)!important;
    background:rgba(255,255,255,.08)!important;
    -webkit-backdrop-filter:blur(16px) saturate(140%)!important;
    backdrop-filter:blur(16px) saturate(140%)!important;
    box-shadow:0 18px 40px rgba(0,0,0,.35)!important;
    overflow-y:auto!important; display:block!important;
    transform:translateX(-120%)!important; transition:transform .25s ease!important; z-index:1000;
  }
  .main-nav.active{ transform:translateX(0)!important; }

  /* Drawer list */
  .nav-list{ flex-direction:column!important; align-items:stretch!important; gap:6px!important; width:100%; }
  .nav-list li{ padding:0!important; text-align:left!important; }
  .nav-list li a{
    justify-content:flex-start!important; padding:12px 14px!important; border-radius:12px!important;
    font-size:15px!important; color:#f5f7ff!important; text-shadow:none!important;
  }
  .nav-list li a:hover{ background:rgba(255,255,255,.12)!important; transform:none!important; }

  /* Keep palette button compact on mobile too */
  .nav-theme #themeBtn{ width:36px; height:36px; }
}

/* ==========================================================================
   7) SMALL TWEAKS
   ========================================================================== */

/* Keep header above overlays */
.site-header{ z-index:3000; }

/* Ensure slogan is always readable over gradients */
.brand-slogan{
  color:#fff!important; -webkit-text-fill-color:#fff!important; opacity:1!important;
  text-shadow:0 1px 6px rgba(0,0,0,.25);
}

/* If a hero uses gradient-clip text elsewhere, give a solid fallback here */
.slogan-wrapper h1{
  -webkit-text-fill-color:initial; color:#eef4ff;
}