/* ===========================
   BLOOM.INFIVE - FULL STYLES
   (Light + Lux Dark + Nav Fix)
=========================== */

/* ---------- Theme Tokens ---------- */
:root{
  /* Light theme (your original warm palette) */
  --bg:#f3d9a9;
  --bg2:#f7e6c4;
  --ink:#111;
  --muted:#3a3a3a;
  --card:#fff;
  --stroke:#111;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --max:1040px;

  /* Nav */
  --nav-bg: color-mix(in srgb, var(--bg) 92%, white 8%);
  --nav-border: rgba(0,0,0,.08);
  --nav-link: #111;
  --nav-link-hover: #000;

  /* Controls */
  --control-bg: rgba(255,255,255,.65);
  --control-border: rgba(0,0,0,.18);

  /* Elevated */
  --elev-1: rgba(0,0,0,.06);
  --elev-2: rgba(0,0,0,.10);

  /* Fancy background */
  --bg-glow-1: rgba(255, 220, 140, .35);
  --bg-glow-2: rgba(255, 180, 120, .18);
}

[data-theme="dark"]{
  /* Lux dark theme */
  --bg:#0a0a0b;
  --bg2:#101012;
  --ink:#f2f2f2;
  --muted:#b8b8b8;
  --card:#151517;
  --stroke:#eaeaea;
  --shadow:0 20px 60px rgba(0,0,0,.65);

  --nav-bg: rgba(0,0,0,.78);
  --nav-border: rgba(255,255,255,.10);
  --nav-link: #fff;
  --nav-link-hover: #fff;

  --control-bg: rgba(255,255,255,.08);
  --control-border: rgba(255,255,255,.18);

  --elev-1: rgba(255,255,255,.08);
  --elev-2: rgba(255,255,255,.14);

  --bg-glow-1: rgba(255, 210, 120, .14);
  --bg-glow-2: rgba(255, 170, 120, .08);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 700px at 18% -15%, var(--bg-glow-1), transparent 45%),
    radial-gradient(900px 600px at 90% 0%, var(--bg-glow-2), transparent 55%),
    var(--bg);
}

a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}

.container{width:min(var(--max), calc(100% - 32px)); margin:0 auto;}
.muted{color:var(--muted); line-height:1.7;}

/* ---------- Header / Nav ---------- */
.header{
  position:sticky; top:0;
  background: var(--nav-bg);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--nav-border);
  z-index:100;
}

.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  gap:16px;
}

.brand{
  /* Brand + sticker */
  display:flex;
  align-items:center;
  gap:10px;
  line-height:1;
  font-weight:800;
  letter-spacing:.6px;
  color: var(--nav-link);
  text-decoration:none;
}
.brand:hover{ text-decoration:none; }
.brand:hover .brandText{ text-decoration:underline; }
.brandText{ display:inline-block; }

/* Brand flower image */
.brandSticker{
  flex:0 0 auto;
  width:26px;
  height:26px;
  transform: translateY(1px);
  display:block;
  filter:none;
}

.navRight{
  display:flex;
  align-items:center;
  gap:14px;
}

/* Desktop nav links row */
.navLinks{
  display:flex;
  align-items:center;
  gap:18px;
}

/* IMPORTANT: make ALL top-level nav links look identical */
.navLinks > a{
  font-weight:800;
  color: var(--nav-link);
}
.navLinks > a:hover{
  color: var(--nav-link-hover);
  text-decoration:underline;
}

/* Dropdown wrapper */
.dropdown{position:relative;}

/* Dropdown buttons (Blog/Amazon) must match <a> links */
.dropBtn{
  border:0;
  background:transparent;
  font: inherit;
  font-weight:800;
  color: var(--nav-link);
  cursor:pointer;
  padding:10px 10px;
  border-radius:12px;
}
.dropBtn:hover{
  color: var(--nav-link-hover);
  text-decoration:underline;
}

/* Dropdown menu */
.dropMenu{
  display:none;
  position:absolute;
  right:0;
  top:44px;
  min-width: 260px;
  background: var(--card);
  border: 1px solid var(--elev-2);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 10px;
}

/* Hover open on desktop */
@media (min-width: 761px){
  .dropdown:hover .dropMenu{display:block;}
}

/* Mobile uses .open class */
.dropdown.open .dropMenu{display:block;}

.dropMenu a{
  display:block;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight:400;              /* dropdown items NOT bold */
  color: var(--ink);
}
.dropMenu a:hover{
  background: var(--elev-1);
  text-decoration:none;
}

.dropDivider{
  height:1px;
  background: var(--elev-2);
  margin: 8px 6px;
}

/* Theme toggle */
.themeBtn{
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid var(--control-border);
  background: var(--control-bg);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
}

/* Hamburger button (mobile only) */
.menuBtn{
  display:none;
  width:44px;height:44px;
  border:1px solid var(--control-border);
  border-radius:14px;
  background: var(--control-bg);
  cursor:pointer;
}
.menuBtn span{
  display:block;
  height:2px;
  background: var(--nav-link);
  margin:6px 10px;
}

/* ---------- Hero ---------- */
.hero{padding:56px 0 28px;}
.heroInner{text-align:center;}
.kicker{font-size:18px;margin:0 0 18px; color: var(--muted);}

.heroTitle{
  font-family:"Playfair Display", serif;
  font-weight:700;
  line-height:1.02;
  font-size: clamp(42px, 6vw, 88px);
  margin:0;
  letter-spacing:-.2px;
}

.heroSub{
  margin:18px auto 26px;
  max-width:680px;
  font-size:18px;
  color: var(--muted);
}

.heroCtas{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

/* ---------- Sections / Headings ---------- */
.section{padding:56px 0;}
.section.alt{background:var(--bg2);}

h2{
  font-family:"Playfair Display", serif;
  font-weight:700;
  margin:0 0 10px;
}

/* ---------- Cards / Buttons ---------- */
.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
  border:1px solid var(--elev-2);
}

.cards2{display:grid; grid-template-columns: repeat(2, 1fr); gap:14px;}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 22px;
  border-radius:14px;
  border:2px solid color-mix(in srgb, var(--stroke) 70%, transparent);
  font-weight:800;
  cursor:pointer;
  background: transparent;
  color: var(--ink);
  font: inherit;
}
.btn.primary{
  background: color-mix(in srgb, var(--card) 92%, transparent);
}
.btn.ghost{
  border-color: color-mix(in srgb, var(--stroke) 35%, transparent);
}
.btn.small{
  padding:10px 14px;
  border-width:1.5px;
  font-size:14px;
}

/* ---------- Footer ---------- */
.footer{
  border-top: 1px solid var(--nav-border);
  padding: 24px 0;
  margin-top: 80px;
}

.footerInner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.footerLinks{
  display:flex;
  gap:16px;
}

.footerLinks a{
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  font-weight:600;
}

.footerLinks a:hover{
  text-decoration: underline;
}

/* ---------- About layout ---------- */
.grid2{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap: 26px;
  align-items:flex-start;
}

.authorPhotoWrap{
  display:flex;
  justify-content:center;
}

.authorPhoto{
  width: 100%;
  max-width: 260px;
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  object-fit: cover;
}

/* ---------- Lists ---------- */
.list{
  display:grid;
  gap: 10px;
}

.listItem{
  display:flex;
  justify-content:space-between;
  background: var(--card);
  padding: 14px 16px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border:1px solid var(--elev-2);
}

/* ---------- Blog index ---------- */
.blogGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.postCard{
  background: var(--card);
  padding: 18px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border:1px solid var(--elev-2);
}

.metaRow{
  display:flex;
  gap: 8px;
  align-items:center;
  flex-wrap:wrap;
}

.tag{
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid var(--elev-2);
  background: color-mix(in srgb, var(--card) 70%, transparent);
  font-size: 13px;
}

/* ---------- Forms ---------- */
.form{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
}

input, textarea, select{
  min-width: 260px;
  padding: 14px;
  border-radius: 14px;
  border: 1.5px solid var(--control-border);
  background: color-mix(in srgb, var(--card) 85%, transparent);
  color: var(--ink);
  outline: none;
}

textarea{min-width: min(700px, 100%);}

/* ---------- Accessibility ---------- */
.srOnly{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* ---------- Mobile ---------- */
@media (max-width: 920px){
  .blogGrid{grid-template-columns: 1fr;}
}

@media (max-width: 760px){
  .grid2{grid-template-columns: 1fr;}
  .authorPhoto{max-width: 220px; margin-bottom: 18px;}

  .menuBtn{display:block;}

  /* Mobile menu panel */
  .navLinks{
    display:none;
    position:absolute;
    right:16px;
    top:64px;
    background: var(--card);
    padding:18px;
    border-radius:20px;
    box-shadow:var(--shadow);
    flex-direction:column;
    align-items:center;        /* CENTER */
    justify-content:center;
    min-width: 280px;
    gap:16px;
    text-align:center;
    border: 1px solid var(--elev-2);
  }

  .navLinks.open{display:flex;}

  /* Top-level links in mobile */
  .navLinks > a{
    font-size:20px;
    font-weight:900;
    color: var(--ink);
    text-decoration:none;
  }

  /* Dropdown button in mobile */
  .dropBtn{
    font-size:20px;
    font-weight:900;
    color: var(--ink);
    text-decoration:none;
  }

  /* Mobile dropdown menu becomes inline */
  .dropMenu{
    position: static;
    display:none;
    min-width: unset;
    box-shadow:none;
    border:none;
    padding: 6px 0 0;
    background: transparent;
  }
  .dropdown.open .dropMenu{display:block;}

  .dropMenu a{
    font-size:18px;
    padding: 10px 8px;
    text-align:center;
    color: var(--ink);
    font-weight:500;
  }

  .themeBtn{
    margin-left: 2px;
  }
}

@media (max-width: 640px){
  .cards2, .blogGrid{grid-template-columns:1fr;}
}