/* DreamHomeGarden — Premium Editorial Finish v22
   Purpose: visual polish only. Preserves existing content, URLs, components,
   monetization, Designer, Tools, AI Home, Supabase and article templates. */
:root{
  --dhg-ivory:#f8f5ee;
  --dhg-paper:#fffdf9;
  --dhg-ink:#1e251f;
  --dhg-muted:#60685d;
  --dhg-green:#245b2a;
  --dhg-green-2:#3d7d42;
  --dhg-sage:#e8efe5;
  --dhg-gold:#b58a4a;
  --dhg-line:#e3dfd4;
  --dhg-shadow:0 18px 55px rgba(28,38,29,.10);
  --dhg-shadow-soft:0 10px 30px rgba(28,38,29,.07);
  --dhg-radius:24px;
}

html:not([data-theme="dark"]) body{background:linear-gradient(180deg,#fbf9f4 0%,#f7f3eb 100%)}
body{overflow-x:hidden;text-rendering:optimizeLegibility}

/* ===== Header ===== */
.site-header{
  background:rgba(251,249,244,.88)!important;
  border-bottom:1px solid rgba(47,62,47,.10)!important;
  box-shadow:0 8px 30px rgba(29,43,31,.06)!important;
  backdrop-filter:blur(18px) saturate(135%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(135%)!important;
}
.header-inner{min-height:78px!important;padding:12px 20px!important}
.logo{gap:12px!important;font-size:1.17rem!important;letter-spacing:-.025em!important}
.logo .logo-mark{width:42px!important;height:42px!important;border-radius:12px!important;filter:drop-shadow(0 5px 10px rgba(36,91,42,.20))!important}
.logo-word{font-weight:700!important}
.logo-sub{margin-top:2px!important;font-size:.56rem!important;letter-spacing:.18em!important}
.header-actions{gap:7px!important}
.header-actions .icon-btn{
  width:40px!important;height:40px!important;border-radius:13px!important;
  border:1px solid rgba(38,59,40,.12)!important;
  background:rgba(255,255,255,.70)!important;
  box-shadow:0 6px 18px rgba(32,45,33,.06)!important;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease!important;
}
.header-actions .icon-btn:hover,.header-actions .icon-btn:focus-visible{transform:translateY(-1px);box-shadow:0 10px 24px rgba(32,45,33,.10)!important}
.header-actions .nav-toggle{
  display:none;
  background:var(--dhg-green)!important;color:#fff!important;border-color:var(--dhg-green)!important;
  box-shadow:0 10px 24px rgba(36,91,42,.20)!important;
}
.header-actions .nav-toggle[aria-expanded="true"]{background:#fff!important;color:var(--dhg-green)!important;transform:none!important}
.header-actions .nav-toggle svg{transition:transform .18s ease}
.header-actions .nav-toggle[aria-expanded="true"] svg{transform:rotate(90deg)}

/* Desktop nav */
.main-nav{gap:4px!important}
.main-nav>a,.main-nav>.nav-search-link,.nav-categories>summary{
  border-radius:999px!important;
  padding:.65rem .85rem!important;
  font-size:.82rem!important;
  font-weight:700!important;
  letter-spacing:.005em!important;
  color:#465146!important;
  transition:background .18s ease,color .18s ease,transform .18s ease!important;
}
.main-nav>a:hover,.main-nav>.nav-search-link:hover,.nav-categories>summary:hover,
.main-nav>a:focus-visible,.main-nav>.nav-search-link:focus-visible,.nav-categories>summary:focus-visible{
  background:#eef3ea!important;color:var(--dhg-green)!important;transform:translateY(-1px)
}
.main-nav>a[aria-current="page"]{background:#e7f0e4!important;color:var(--dhg-green)!important}
.main-nav .nav-ai-tech,.main-nav .nav-designer,.main-nav .nav-tools{
  position:relative;font-weight:800!important;color:#203122!important;
}
.main-nav .nav-ai-tech{background:linear-gradient(180deg,#eef6eb,#e7f0e4)!important;border:1px solid #d8e7d4!important}
.main-nav .nav-designer{background:linear-gradient(180deg,#f4f0e6,#eee8da)!important;border:1px solid #e6decc!important}
.main-nav .nav-tools{background:linear-gradient(180deg,#f1f5ee,#ebf0e8)!important;border:1px solid #dce6d9!important}

/* ===== Mobile navigation ===== */
@media (max-width:980px){
  .site-header{z-index:10000!important}
  .header-inner{min-height:66px!important;padding:9px 12px!important}
  .logo{max-width:calc(100% - 132px)!important;font-size:1.04rem!important;gap:9px!important}
  .logo .logo-mark{width:36px!important;height:36px!important;border-radius:10px!important}
  .logo-sub{font-size:.49rem!important;letter-spacing:.14em!important}
  .header-actions .header-search,.header-actions .random-btn,.header-actions .theme-toggle{display:none!important}
  .header-actions .nav-toggle{display:inline-flex!important}
  .main-nav{
    width:min(380px,92vw)!important;
    padding:0 16px calc(22px + env(safe-area-inset-bottom))!important;
    background:rgba(250,248,243,.985)!important;
    border-left:1px solid rgba(46,61,47,.10)!important;
    box-shadow:-24px 0 70px rgba(25,35,26,.20)!important;
    z-index:10002!important;
  }
  [data-theme="dark"] .main-nav{background:rgba(21,27,21,.985)!important}
  .main-nav>a,.main-nav>.nav-search-link,.main-nav>.nav-categories>summary{
    min-height:58px!important;padding:0 15px!important;border-bottom:1px solid rgba(55,71,55,.11)!important;
    border-radius:13px!important;font-size:.96rem!important;font-weight:750!important;
  }
  .main-nav>a::after,.main-nav>.nav-search-link::after{content:"→";margin-left:auto;opacity:.45;transition:transform .18s ease,opacity .18s ease}
  .main-nav>a:hover::after,.main-nav>a:focus-visible::after,.main-nav>.nav-search-link:hover::after{transform:translateX(3px);opacity:.85}
  .main-nav>a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--dhg-green)!important}
  .main-nav .nav-ai-tech,.main-nav .nav-designer,.main-nav .nav-tools{
    margin:8px 0 0!important;min-height:74px!important;padding:11px 14px!important;border-radius:18px!important;
    box-shadow:0 8px 22px rgba(32,44,33,.06)!important;border-width:1px!important;
  }
  .main-nav .nav-ai-tech::before,.main-nav .nav-designer::before,.main-nav .nav-tools::before{
    content:"";width:36px;height:36px;border-radius:11px;margin-right:10px;flex:0 0 36px;
    display:block;background:#dcebd8;box-shadow:inset 0 1px rgba(255,255,255,.75)
  }
  .main-nav .nav-ai-tech::before{background:radial-gradient(circle at 32% 30%,#fff 0 10%,transparent 12%),linear-gradient(145deg,#2f7136,#87b37d)}
  .main-nav .nav-designer::before{background:linear-gradient(145deg,#63533b,#b69a6c)}
  .main-nav .nav-tools::before{background:linear-gradient(145deg,#486947,#98b38e)}
  .main-nav .nav-ai-tech,.main-nav .nav-designer,.main-nav .nav-tools{display:flex!important;align-items:center!important}
  .main-nav .nav-ai-tech::after,.main-nav .nav-designer::after,.main-nav .nav-tools::after{content:"↗";font-size:1.05rem;margin-left:auto;opacity:.5}

  .dhg-mobile-nav-head{
    position:sticky!important;top:0!important;z-index:5!important;height:auto!important;min-height:82px!important;
    display:flex!important;align-items:center!important;gap:12px!important;margin:0!important;
    padding:14px 2px!important;background:rgba(250,248,243,.98)!important;border-bottom:1px solid rgba(55,71,55,.11)!important;
  }
  [data-theme="dark"] .dhg-mobile-nav-head{background:rgba(21,27,21,.98)!important}
  .dhg-mobile-nav-head span{font-family:var(--font-display)!important;font-weight:700!important;font-size:1.08rem!important;line-height:1.04!important;letter-spacing:-.02em!important}
  .dhg-mobile-nav-head span::after{content:"HOME & GARDEN EDITORIAL";display:block;margin-top:5px;font:700 .53rem/1.2 Inter,sans-serif;letter-spacing:.16em;color:var(--dhg-muted)}
  .dhg-mobile-nav-close{width:42px!important;height:42px!important;flex:0 0 42px!important;border-radius:13px!important;background:#fff!important;color:var(--dhg-ink)!important;border:1px solid var(--dhg-line)!important;box-shadow:0 7px 18px rgba(24,38,27,.08)!important;font-size:23px!important}
  [data-theme="dark"] .dhg-mobile-nav-close{background:#263026!important;color:#fff!important;border-color:#39473a!important}
  .nav-scrim{z-index:9990!important;background:rgba(17,23,18,.44)!important;backdrop-filter:blur(8px) saturate(85%)!important}
  body.dhg-nav-open{overflow:hidden!important;touch-action:auto!important}
}

/* ===== Hero: editorial, not template-like ===== */
.hero{padding:58px 0 42px!important;position:relative}
.hero::before{content:"";position:absolute;left:-10vw;right:-10vw;top:-120px;height:340px;background:radial-gradient(circle at 34% 30%,rgba(203,218,188,.36),transparent 52%),radial-gradient(circle at 78% 42%,rgba(223,205,163,.22),transparent 48%);pointer-events:none}
.hero-grid{position:relative;z-index:1;gap:48px!important}
.hero-copy{padding-right:8px}
.hero-copy .eyebrow{font-size:.68rem!important;letter-spacing:.18em!important;color:var(--dhg-green)!important;margin-bottom:15px!important}
.hero-copy h1{font-size:clamp(2.65rem,5.2vw,4.75rem)!important;letter-spacing:-.045em!important;line-height:1.01!important;max-width:12ch!important}
.hero-copy p.lede{font-size:1.05rem!important;line-height:1.72!important;color:var(--dhg-muted)!important;max-width:52ch!important;margin-top:20px!important}
.dhg-brand-note{max-width:52ch!important;font-size:.88rem!important;line-height:1.65!important;color:#73796f!important;border-left:3px solid #d9e5d5!important;padding-left:14px!important;margin-top:15px!important}
.hero-actions{gap:10px!important;margin-top:24px!important}
.hero-actions .btn{min-height:48px!important;padding:0 18px!important;border-radius:14px!important;font-size:.88rem!important}
.hero-media{border-radius:30px!important;box-shadow:0 24px 70px rgba(30,40,31,.15)!important;aspect-ratio:1.05/1!important;border:1px solid rgba(47,62,47,.12)!important;background:#dfe6db!important;isolation:isolate}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,29,20,.03) 18%,rgba(16,24,17,.03) 55%,rgba(16,24,17,.34) 100%);pointer-events:none;z-index:4}
.hero-media img{transform:scale(1.015)!important;transition:transform .8s ease!important}
.hero-media:hover img{transform:scale(1.035)!important}
.dhg-cinematic-scene{z-index:3!important;opacity:.72!important}
.dhg-motion-canvas{opacity:.35!important}
.dhg-light-shaft{opacity:.11!important}
.dhg-light-glow{opacity:.52!important}
.dhg-living-label{bottom:18px!important;left:18px!important;background:rgba(24,34,25,.52)!important;border:1px solid rgba(255,255,255,.25)!important;box-shadow:0 9px 26px rgba(18,27,19,.22)!important}
.dhg-random-hero-hint{right:18px!important;bottom:18px!important;z-index:8!important;padding:8px 11px!important;border:1px solid rgba(255,255,255,.22)!important;border-radius:999px!important;background:rgba(24,34,25,.36)!important;backdrop-filter:blur(8px);color:#fff!important;font:700 .61rem/1 Inter,sans-serif!important;letter-spacing:.08em!important;text-transform:uppercase!important}

/* ===== Signature tools ===== */
.dhg-signature-section{padding:24px 0 12px!important}
.dhg-signature-shell{padding:24px;border-radius:30px;background:linear-gradient(140deg,#f0f5ec,#f8f2e8);border:1px solid #dfe6da;box-shadow:var(--dhg-shadow-soft)}
.dhg-signature-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px}
.dhg-signature-kicker{display:block;margin-bottom:5px;color:var(--dhg-green);font:800 .63rem/1 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase}
.dhg-signature-head h2{margin:0;font-size:clamp(1.55rem,3vw,2.1rem)!important;letter-spacing:-.02em}
.dhg-signature-head p{margin:.45rem 0 0;color:var(--dhg-muted);max-width:52ch;font-size:.88rem}
.dhg-signature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.dhg-signature-card{position:relative;min-height:148px;padding:18px;border-radius:20px;background:rgba(255,255,255,.72);border:1px solid rgba(72,93,74,.12);box-shadow:0 10px 28px rgba(29,43,31,.06);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;overflow:hidden}
.dhg-signature-card::after{content:"";position:absolute;width:120px;height:120px;right:-40px;bottom:-55px;border-radius:50%;background:rgba(103,139,104,.10);filter:blur(8px)}
.dhg-signature-card:hover,.dhg-signature-card:focus-visible{transform:translateY(-3px);box-shadow:0 16px 36px rgba(29,43,31,.10);border-color:rgba(57,96,61,.22)}
.dhg-signature-icon{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(145deg,#2d6b33,#6d946b);color:#fff;box-shadow:0 8px 18px rgba(36,91,42,.18);margin-bottom:16px}
.dhg-signature-icon svg{width:22px;height:22px}
.dhg-signature-card h3{margin:0;font-size:1.16rem!important}
.dhg-signature-card p{margin:7px 0 0;color:var(--dhg-muted);font-size:.78rem;line-height:1.45}
.dhg-signature-card .dhg-signature-link{position:absolute;right:15px;top:15px;color:var(--dhg-green);font-weight:800}

/* ===== Content hierarchy ===== */
.section{padding:56px 0!important}
.section-head{margin-bottom:24px!important;padding-bottom:15px!important;border-bottom:1px solid rgba(60,74,61,.12)!important}
.section-head h2{letter-spacing:-.02em!important}
.chip-row{gap:8px!important;margin-bottom:8px!important}
.chip{padding:.55rem .9rem!important;border-radius:999px!important;background:rgba(255,255,255,.70)!important;border-color:rgba(62,78,63,.12)!important;font-size:.75rem!important}
.chip:hover,.chip.active{background:#edf3ea!important;border-color:#bdd0b8!important}
.grid{gap:20px!important}
.card{border-radius:22px!important;border-color:rgba(58,73,59,.12)!important;box-shadow:0 10px 30px rgba(29,41,31,.06)!important}
.card:hover{transform:translateY(-4px)!important;box-shadow:0 18px 42px rgba(29,41,31,.10)!important}
.card-media{aspect-ratio:16/10!important;background:#e7ece2!important}
.card-media img{transition:transform .6s ease!important}
.card:hover .card-media img{transform:scale(1.035)!important}
.card-body{padding:17px 18px 20px!important}
.card-cat{font-size:.62rem!important;letter-spacing:.14em!important;color:var(--dhg-green)!important}
.card h3{letter-spacing:-.015em!important}
.card p.excerpt{line-height:1.55!important}
.section.tinted{background:rgba(232,239,229,.45)!important}

/* ===== Footer ===== */
.site-footer{margin-top:58px!important;padding:58px 0 25px!important;background:#172018!important;border-top:0!important;color:#f2f4ee!important}
.site-footer h4{color:#d9e4d5!important;letter-spacing:.14em!important}
.site-footer a,.site-footer p,.footer-bottom{color:#bac5b9!important}
.site-footer a:hover{color:#fff!important}
.footer-bottom{border-top-color:rgba(255,255,255,.10)!important}

/* ===== Dark mode ===== */
html[data-theme="dark"] body{background:linear-gradient(180deg,#111611,#0f140f)}
html[data-theme="dark"] .site-header{background:rgba(16,22,17,.88)!important;border-bottom-color:rgba(194,215,193,.10)!important}
html[data-theme="dark"] .header-actions .icon-btn{background:rgba(30,38,30,.82)!important;border-color:rgba(194,215,193,.14)!important;color:#f4f6ef!important}
html[data-theme="dark"] .main-nav{background:rgba(20,27,21,.985)!important}
html[data-theme="dark"] .hero::before{opacity:.5}
html[data-theme="dark"] .dhg-brand-note{border-color:#304630!important;color:#aab6a8!important}
html[data-theme="dark"] .dhg-signature-shell{background:linear-gradient(140deg,#18221a,#23221a);border-color:#2d3b2e}
html[data-theme="dark"] .dhg-signature-card{background:rgba(30,39,31,.78);border-color:#334134}
html[data-theme="dark"] .dhg-signature-card p{color:#aeb7ac}
html[data-theme="dark"] .chip{background:rgba(29,37,29,.76)!important;border-color:#354336!important;color:#d3dbcf!important}
html[data-theme="dark"] .card{background:#1a211b!important;border-color:#303c31!important;box-shadow:0 12px 30px rgba(0,0,0,.22)!important}
html[data-theme="dark"] .section.tinted{background:rgba(18,27,19,.76)!important}

/* ===== Responsive ===== */
@media(max-width:980px){
  .hero{padding:34px 0 28px!important}
  .hero-grid{grid-template-columns:1fr!important;gap:22px!important}
  .hero-copy h1{font-size:clamp(2.45rem,11vw,3.7rem)!important;max-width:13ch!important}
  .hero-copy p.lede{font-size:1rem!important}
  .hero-media{aspect-ratio:1.08/1!important;border-radius:24px!important;box-shadow:0 18px 48px rgba(28,38,29,.13)!important}
  .dhg-signature-shell{padding:18px;border-radius:24px}
  .dhg-signature-grid{grid-template-columns:1fr!important}
  .dhg-signature-card{min-height:118px;padding:16px 16px 16px 74px}
  .dhg-signature-icon{position:absolute;left:16px;top:16px;margin:0}
  .dhg-signature-card h3{font-size:1.05rem!important;padding-right:25px}
  .dhg-signature-head{align-items:flex-start;flex-direction:column;gap:3px}
  .section{padding:45px 0!important}
  .grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:560px){
  .container{padding-left:14px!important;padding-right:14px!important}
  .hero-copy h1{font-size:clamp(2.25rem,12vw,3.15rem)!important}
  .hero-actions{display:grid!important;grid-template-columns:1fr!important}
  .hero-actions .btn{justify-content:center!important}
  .hero-media{aspect-ratio:4/4.65!important}
  .grid.cols-3,.grid.cols-4{grid-template-columns:1fr!important}
  .section-head{align-items:flex-start!important;flex-direction:column!important;gap:8px!important}
  .section-head .see-all{align-self:flex-start!important}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}