/*
Theme Name: Lightly
Theme URI: https://lightly.travel
Author: UH Services
Description: Family travel guide theme — travel light with little ones. Guide-first reading experience, luggage-tag category system, three content silos (Fly / Gear / Trips).
Version: 1.2.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: lightly
*/

:root{
  --cloud:#EFF2F1; --paper:#FFFFFF; --ink:#33413E; --soft:#5C6B67;
  --line:#D9E0DD; --rose:#A9556D; --rose-deep:#8E4459; --rose-tint:#F4E3E8;
  --fern:#54795D; --fern-tint:#E3EDE4; --sky:#4E7699; --sky-tint:#DEE9F0;
  --sun:#E9B44C;
  --measure:70ch; --radius:14px;
  --ff-display:"Fraunces",Georgia,serif; --ff-body:"Mulish",-apple-system,Segoe UI,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cloud);color:var(--ink);font-family:var(--ff-body);font-size:17px;line-height:1.65}
img{max-width:100%;height:auto;display:block}
a{color:var(--rose-deep);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--rose)}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px;border-radius:4px}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}

h1,h2,h3,.brand{font-family:var(--ff-display);font-weight:560;line-height:1.15;letter-spacing:-.01em}
h1{font-size:clamp(1.9rem,4.2vw,3rem);margin:.2em 0 .35em}
h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin:1.6em 0 .5em}
h3{font-size:1.18rem;margin:1.4em 0 .4em}

/* header */
.site-head{background:var(--paper);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:26px;min-height:74px;flex-wrap:wrap}
.brand{font-size:1.5rem;color:var(--ink);text-decoration:none;display:flex;align-items:baseline;gap:8px}
.brand em{font-style:normal;color:var(--rose);font-size:.62em;font-family:var(--ff-body);font-weight:600}
.brand .custom-logo{max-height:44px;width:auto}
.nav-main{margin-left:auto}
.nav-main ul{list-style:none;display:flex;gap:4px;margin:0;padding:0;flex-wrap:wrap}
.nav-main a{display:block;padding:9px 13px;border-radius:999px;text-decoration:none;color:var(--ink);font-weight:600;font-size:.95rem}
.nav-main li.current-menu-item>a,.nav-main a:hover{background:var(--cloud);color:var(--rose-deep)}

/* luggage-tag chip — the signature */
.tag-chip{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.82rem;color:var(--ink);
  background:var(--sun);padding:6px 14px 6px 22px;border-radius:4px 999px 999px 4px;text-decoration:none;
  clip-path:polygon(0 50%,12px 0,100% 0,100% 100%,12px 100%);position:relative;line-height:1}
.tag-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--paper);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.28);position:absolute;left:9px;top:50%;transform:translateY(-50%)}
.tag-fly{background:var(--sky-tint);color:var(--sky)}
.tag-gear{background:var(--fern-tint);color:var(--fern)}
.tag-trips{background:var(--rose-tint);color:var(--rose-deep)}

/* hero */
.hero{padding:58px 0 46px}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
.hero h1{margin-top:.4em}
.hero .lede{font-size:1.13rem;color:var(--soft);max-width:34em}
.promises{list-style:none;margin:26px 0 0;padding:0;display:flex;gap:10px;flex-wrap:wrap}
.promises li{background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:8px 15px;font-weight:600;font-size:.9rem}
.promises li b{color:var(--rose-deep);font-weight:800}
@media (prefers-reduced-motion:no-preference){
  .hero .wrap>*{animation:rise .6s ease both}
  .hero .wrap>:last-child{animation-delay:.12s}
  @keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}

/* cards */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.card a.cover{display:block;aspect-ratio:16/9;background:var(--sky-tint)}
.card a.cover img{width:100%;height:100%;object-fit:cover}
.card .pad{padding:18px 20px 20px;display:flex;flex-direction:column;gap:9px;flex:1}
.card h3{margin:0;font-size:1.12rem}
.card h3 a{color:var(--ink);text-decoration:none}
.card h3 a:hover{color:var(--rose-deep)}
.card p{margin:0;color:var(--soft);font-size:.94rem}
.card .meta{margin-top:auto;color:var(--soft);font-size:.82rem}
.card--feature{box-shadow:0 18px 40px -22px rgba(51,65,62,.35)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

/* silo sections */
.silo{padding:38px 0}
.silo-head{display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.silo-head h2{margin:0}
.silo-head .all{margin-left:auto;font-weight:700;font-size:.92rem}
.silo+.silo{border-top:1px solid var(--line)}

/* article */
.crumbs{font-size:.85rem;color:var(--soft);margin:26px 0 6px}
.crumbs a{color:var(--soft)}
.entry-head{max-width:var(--measure)}
.entry-meta{color:var(--soft);font-size:.9rem;display:flex;gap:14px;flex-wrap:wrap;margin:6px 0 22px}
.entry-hero{border-radius:var(--radius);overflow:hidden;margin:6px 0 26px;max-width:860px}
.prose{max-width:var(--measure);font-size:1.06rem}
.prose p{margin:0 0 1.15em}
.prose h2{padding-top:.4em;border-top:1px solid var(--line)}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1.2em}
.prose li{margin:.35em 0}
.prose blockquote{margin:1.4em 0;padding:14px 20px;background:var(--paper);border-left:4px solid var(--sun);border-radius:0 10px 10px 0;color:var(--soft)}
.prose img{border-radius:12px}
.prose table{border-collapse:collapse;width:100%;font-size:.95rem;margin:1.2em 0}
.prose th,.prose td{border:1px solid var(--line);padding:9px 12px;text-align:left;background:var(--paper)}
.prose th{background:var(--fern-tint)}
.wp-block-button__link,.btn{background:var(--rose-deep);color:#fff;border-radius:999px;padding:11px 22px;font-weight:700;text-decoration:none;display:inline-block}
.wp-block-button__link:hover,.btn:hover{background:var(--rose);color:#fff}

/* author box */
.authorbox{max-width:var(--measure);margin:38px 0;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;display:flex;gap:18px;align-items:flex-start}
.authorbox img{border-radius:50%;width:64px;height:64px}
.authorbox h3{margin:.1em 0 .3em;font-size:1.05rem}
.authorbox p{margin:0;color:var(--soft);font-size:.93rem}

/* related */
.related{max-width:980px;margin:14px 0 50px}
.related h2{font-size:1.3rem}

/* archive */
.archive-head{padding:44px 0 8px;max-width:var(--measure)}
.archive-head p{color:var(--soft)}
.archive-list{padding:22px 0 56px}

/* footer */
.site-foot{background:var(--ink);color:#DCE5E2;margin-top:64px}
.site-foot .wrap{padding:40px 22px;display:grid;grid-template-columns:1.2fr 1fr;gap:30px}
.site-foot .brand{color:#fff}
.site-foot .brand em{color:var(--sun)}
.site-foot p{color:#B6C3BF;font-size:.93rem;max-width:38em}
.site-foot ul{list-style:none;margin:0;padding:0;display:flex;gap:16px;flex-wrap:wrap}
.site-foot a{color:#DCE5E2}
.site-foot .fineprint{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.14);padding-top:16px;font-size:.82rem;color:#9FB0AB}

@media(max-width:860px){
  .hero .wrap{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr 1fr}
  .site-foot .wrap{grid-template-columns:1fr}
}
@media(max-width:600px){
  .grid{grid-template-columns:1fr}
  body{font-size:16px}
}

/* ============ v1.1 — modern pass ============ */
/* sticky glass header */
.site-head{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:box-shadow .25s}
.site-head.is-stuck{box-shadow:0 8px 28px -18px rgba(51,65,62,.35)}
.nav-search input{border:1px solid var(--line);border-radius:999px;padding:8px 16px;font:inherit;font-size:.9rem;background:var(--cloud);width:150px;transition:width .25s}
.nav-search input:focus{width:200px;outline:none;border-color:var(--sky)}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:10px;padding:10px;cursor:pointer}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--ink);margin:4px 0;border-radius:2px;transition:transform .2s,opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* hero: soft sky wash + floating card */
.hero{position:relative;overflow:hidden;padding:72px 0 58px}
.hero::before{content:"";position:absolute;inset:0;background:
 radial-gradient(560px 300px at 12% 0%,var(--sky-tint) 0%,transparent 65%),
 radial-gradient(480px 280px at 95% 90%,var(--rose-tint) 0%,transparent 62%),
 radial-gradient(420px 240px at 70% 8%,var(--fern-tint) 0%,transparent 60%);pointer-events:none}
.hero .wrap{position:relative}
.hero .card--feature{transform:rotate(.6deg);transition:transform .3s ease,box-shadow .3s ease}
.hero .card--feature:hover{transform:rotate(0) translateY(-4px);box-shadow:0 26px 50px -24px rgba(51,65,62,.45)}
.promises li{box-shadow:0 4px 14px -10px rgba(51,65,62,.35)}

/* cards: image lift, radius hierarchy */
.card{transition:transform .22s ease,box-shadow .22s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 20px 40px -24px rgba(51,65,62,.4)}
.card a.cover{overflow:hidden}
.card a.cover img{transition:transform .5s ease}
.card:hover a.cover img{transform:scale(1.045)}
.card--feature{border-radius:18px}

/* reading progress + back-to-top */
.read-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;background:transparent;pointer-events:none}
.read-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--rose),var(--sun))}
.to-top{position:fixed;right:22px;bottom:22px;z-index:55;width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;
 background:var(--ink);color:#fff;font-size:1.1rem;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .25s,transform .25s;box-shadow:0 10px 24px -12px rgba(51,65,62,.5)}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--rose-deep)}

/* TOC */
.toc{max-width:var(--measure);background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--sun);border-radius:12px;padding:16px 20px;margin:0 0 28px}
.toc strong{font-family:var(--ff-display);font-size:1.02rem}
.toc ul{list-style:none;margin:10px 0 0;padding:0;columns:2;column-gap:28px}
.toc li{margin:.3em 0;break-inside:avoid}
.toc a{color:var(--soft);text-decoration:none;font-size:.93rem}
.toc a:hover{color:var(--rose-deep);text-decoration:underline}

/* archive band per silo */
.archive-head{position:relative}
.category-fly-with-baby .archive-head{--band:var(--sky-tint)} .category-gear .archive-head{--band:var(--fern-tint)} .category-trips .archive-head{--band:var(--rose-tint)}
.archive-head::before{content:"";position:absolute;left:-100vw;right:-100vw;top:0;bottom:-8px;background:var(--band,transparent);z-index:-1;border-bottom:1px solid var(--line)}

/* prose polish */
.prose h2{scroll-margin-top:90px}
.prose>p:first-of-type{font-size:1.14rem;color:#41504C}
.prose a{font-weight:600}
.prose h3{scroll-margin-top:90px}
.entry-hero img{width:100%}

/* footer refresh */
.site-foot{background:linear-gradient(160deg,#2C3835 0%,#33413E 70%)}
.site-foot .wrap{padding:48px 22px}

@media(max-width:860px){
  .nav-toggle{display:block}
  .nav-main{display:none;width:100%;padding:8px 0 14px}
  .nav-main.is-open{display:block}
  .nav-main ul{flex-direction:column;gap:2px}
  .nav-search{margin-top:8px}
  .nav-search input{width:100%}
  .nav-search input:focus{width:100%}
  .toc ul{columns:1}
  .hero{padding:44px 0 36px}
}
@media (prefers-reduced-motion:reduce){
  .card,.card a.cover img,.hero .card--feature,.to-top{transition:none}
}

/* v1.1.1 — header alignment fix: menu + search on one row */
.nav-main{display:flex;align-items:center;gap:16px}
.nav-main ul{flex-wrap:nowrap}
.nav-search{margin:0}
@media(max-width:1000px){
  .nav-search input{width:120px}
}
@media(max-width:860px){
  .nav-main{display:none}
  .nav-main.is-open{display:flex;flex-direction:column;align-items:stretch;gap:6px}
  .nav-main.is-open ul{flex-direction:column;flex-wrap:wrap}
}


/* v1.2 — hero photo panel (Customizer > Header Image) */
.hero-side{position:relative}
.hero-photo{position:absolute;inset:-26px -26px 26px 26px;background-size:cover;background-position:center;border-radius:22px;opacity:.9;z-index:-1;box-shadow:0 24px 50px -28px rgba(51,65,62,.5)}
.hero-photo::after{content:"";position:absolute;inset:0;border-radius:22px;background:linear-gradient(155deg,rgba(239,242,241,.15),rgba(180,99,122,.12))}
@media(max-width:860px){.hero-photo{inset:-14px -8px 14px 8px}}