/* Shared site-wide styles: header, footer, navigation, homepage layout,
   related-tools grid, and utility-page content. Each tool page keeps its
   own existing calculator styles inline and links to this file only for
   the shared chrome below. */

:root{
  --cream:#F5F1E6;
  --paper:#FBF9F2;
  --ink:#2A2620;
  --ink-soft:#7A7160;
  --forest:#1F4D3F;
  --forest-dark:#153229;
  --gold:#AE8A3E;
  --line:#E3DBC7;
  --radius:10px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Public Sans', system-ui, -apple-system, sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.site-logo span{font-family:'Newsreader', Georgia, serif;}
a{color:var(--forest-dark);}
p{margin:0 0 14px;}

.wrap{max-width:1080px;margin:0 auto;padding:0 24px;}

/* ---------- Header ---------- */
.site-header{border-bottom:1px solid var(--line);background:var(--paper);}
.site-header-inner{
  max-width:1080px;margin:0 auto;padding:20px 24px;
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
}
.site-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);}
.site-logo svg{flex-shrink:0;}
.site-logo span{font-size:1.15rem;font-weight:600;color:var(--ink);}
.site-nav{display:flex;gap:28px;flex-wrap:wrap;}
.site-nav a{color:var(--ink-soft);text-decoration:none;font-size:0.95rem;}
.site-nav a:hover{color:var(--forest-dark);}
.site-nav a:focus-visible,.site-logo:focus-visible{outline:2px solid var(--forest-dark);outline-offset:3px;}

/* ---------- Footer ---------- */
.site-footer-main{border-top:1px solid var(--line);background:var(--paper);margin-top:64px;}
.footer-inner{
  max-width:1080px;margin:0 auto;padding:48px 24px 32px;
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;
}
@media (max-width:760px){.footer-inner{grid-template-columns:1fr 1fr;}}
@media (max-width:480px){.footer-inner{grid-template-columns:1fr;}}
.footer-col h3{font-size:0.85rem;font-weight:600;color:var(--ink);margin:0 0 12px;font-family:'Public Sans',sans-serif;}
.footer-col p{font-size:0.88rem;color:var(--ink-soft);max-width:32ch;}
.footer-col a{display:block;font-size:0.88rem;color:var(--ink-soft);text-decoration:none;margin-bottom:9px;}
.footer-col a:hover{color:var(--forest-dark);}
.footer-brand{display:flex;align-items:center;gap:9px;margin-bottom:12px;}
.footer-brand span{font-size:1.05rem;font-weight:600;color:var(--ink);font-family:'Newsreader',serif;}
.footer-bottom{border-top:1px solid var(--line);padding:18px 24px;text-align:center;}
.footer-bottom p{font-size:0.82rem;color:var(--ink-soft);margin:0;}

/* ---------- Related tools (bottom of each tool page) ---------- */
.related-tools{max-width:1080px;margin:0 auto;padding:0 24px;}
.related-tools h2{font-size:1.3rem;font-weight:600;margin:0 0 6px;}
.related-tools .hint{margin-bottom:18px;}
.tool-chip-grid{display:flex;flex-wrap:wrap;gap:10px;}
.tool-chip{
  display:inline-block;padding:10px 16px;border:1px solid var(--line);border-radius:999px;
  background:var(--paper);color:var(--ink);text-decoration:none;font-size:0.9rem;
}
.tool-chip:hover{border-color:var(--forest);color:var(--forest-dark);}
.tool-chip:focus-visible{outline:2px solid var(--forest-dark);outline-offset:2px;}

/* ---------- Homepage ---------- */
.hero{padding:56px 0 8px;max-width:70ch;}
.hero h1{font-size:2.6rem;font-weight:600;margin:0 0 18px;line-height:1.15;}
.hero p{font-size:1.1rem;color:var(--ink-soft);max-width:66ch;}
.hero p.lede{font-size:1.15rem;color:var(--ink);}

.tool-section{padding:40px 0 8px;}
.tool-section h2{font-size:1.6rem;font-weight:600;margin:0 0 8px;}
.tool-section > .wrap > p{color:var(--ink-soft);max-width:62ch;margin:0 0 28px;}

.tool-card-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));gap:16px;margin-bottom:8px;}
.tool-card{
  display:block;padding:22px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper);text-decoration:none;color:var(--ink);
}
.tool-card:hover{border-color:var(--forest);}
.tool-card:focus-visible{outline:2px solid var(--forest-dark);outline-offset:2px;}
.tool-card h3{font-size:1.15rem;font-weight:600;margin:0 0 8px;color:var(--ink);}
.tool-card p{font-size:0.92rem;color:var(--ink-soft);margin:0;}

.homepage-content{padding:48px 0;max-width:70ch;}
.homepage-content h2{font-size:1.4rem;font-weight:600;margin:0 0 14px;}
.homepage-content p{color:var(--ink);}

/* ---------- Utility content pages (About, Privacy, Terms, Contact) ---------- */
.content-page{padding:48px 0 24px;max-width:70ch;}
.content-page h1{font-size:2rem;font-weight:600;margin:0 0 18px;}
.content-page h2{font-size:1.3rem;font-weight:600;margin:32px 0 12px;}
.content-page h2:first-of-type{margin-top:8px;}
.content-page p{color:var(--ink);}
.content-page .updated-note{font-size:0.85rem;color:var(--ink-soft);margin-bottom:28px;}
.content-page ul{padding-left:20px;color:var(--ink);}
.content-page li{margin-bottom:8px;}

.contact-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:24px 28px;margin:24px 0;max-width:52ch;}
.contact-card p{margin:0 0 8px;}
.contact-card a{color:var(--forest-dark);}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--forest-dark);outline-offset:2px;}

/* ---------- Sticky header: glass pill on scroll ---------- */
.site-header{
  position:sticky; top:0; z-index:200;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  transition:background-color 0.35s ease, border-color 0.35s ease;
}
.site-header-inner{
  transition:max-width 0.4s cubic-bezier(.4,0,.2,1), padding 0.4s cubic-bezier(.4,0,.2,1),
             margin-top 0.4s cubic-bezier(.4,0,.2,1), border-radius 0.4s ease,
             background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
  border:1px solid transparent;
}
.site-header.is-scrolled{background:transparent; border-bottom-color:transparent;}
.site-header.is-scrolled .site-header-inner{
  max-width:840px;
  margin-top:12px;
  padding:10px 22px;
  background:rgba(251,249,244,0.8);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-radius:999px;
  border-color:rgba(227,219,199,0.75);
  box-shadow:0 10px 34px rgba(21,50,41,0.12);
}
@media (prefers-reduced-motion: reduce){
  .site-header-inner{transition:none;}
}

/* ---------- Desktop dropdown megamenu ---------- */
.nav-dropdown{position:relative;}
.nav-dropdown-trigger{
  display:inline-flex; align-items:center; gap:4px;
  color:var(--ink-soft); text-decoration:none; font-size:0.95rem;
  background:none; border:none; font-family:inherit; cursor:pointer; padding:0;
}
.nav-dropdown-trigger:hover{color:var(--forest-dark);}
.nav-caret{transition:transform 0.2s ease;}
.nav-dropdown:hover .nav-caret{transform:rotate(180deg);}

.nav-dropdown-panel{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  padding-top:14px;
  width:280px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 0.2s ease, visibility 0.2s ease;
}
.nav-dropdown:hover .nav-dropdown-panel,
.nav-dropdown-panel:hover{opacity:1; visibility:visible; pointer-events:auto;}
.nav-dropdown-panel-inner{
  background:var(--paper); border:1px solid var(--line); border-radius:14px;
  padding:10px; box-shadow:0 16px 40px rgba(21,50,41,0.14);
  display:flex; flex-direction:column; gap:2px;
}
.nav-dropdown-panel a{
  padding:9px 12px; border-radius:8px; font-size:0.9rem; color:var(--ink);
  text-decoration:none; white-space:nowrap;
}
.nav-dropdown-panel a:hover{background:var(--cream); color:var(--forest-dark);}

/* ---------- Mobile / tablet off-canvas nav ---------- */
.mobile-nav-toggle{
  display:none; background:none; border:none; cursor:pointer; padding:8px;
  color:var(--ink); align-items:center; justify-content:center;
}
.mobile-nav-overlay{
  position:fixed; inset:0; background:rgba(21,38,32,0.45);
  opacity:0; visibility:hidden; transition:opacity 0.3s ease, visibility 0.3s ease;
  z-index:299;
}
.mobile-nav-overlay.is-open{opacity:1; visibility:visible;}
.mobile-nav-panel{
  position:fixed; top:0; right:0; height:100vh; width:min(320px, 85vw);
  background:var(--paper); z-index:300;
  transform:translateX(100%); transition:transform 0.35s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
  box-shadow:-12px 0 40px rgba(21,50,41,0.18);
}
.mobile-nav-panel.is-open{transform:translateX(0);}
.mobile-nav-header{
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 20px; border-bottom:1px solid var(--line); flex-shrink:0;
}
.mobile-nav-close{background:none; border:none; cursor:pointer; padding:6px; color:var(--ink);}
.mobile-nav-links{padding:12px; overflow-y:auto; flex:1;}
.mobile-nav-links > a{
  display:block; padding:13px 12px; color:var(--ink); text-decoration:none;
  font-size:1rem; border-bottom:1px solid var(--line);
}
.mobile-nav-group{border-bottom:1px solid var(--line);}
.mobile-nav-group-row{width:100%; display:flex; align-items:stretch;}
.mobile-nav-group-link{
  flex:1; padding:13px 12px; color:var(--ink); text-decoration:none; font-size:1rem;
}
.mobile-nav-group-trigger{
  background:none; border:none; cursor:pointer; padding:13px 14px;
  color:var(--ink-soft); display:flex; align-items:center; justify-content:center;
}
.mobile-nav-group-trigger svg{transition:transform 0.25s ease; flex-shrink:0;}
.mobile-nav-group.is-open .mobile-nav-group-trigger svg{transform:rotate(180deg);}
.mobile-nav-group-panel{max-height:0; overflow:hidden; transition:max-height 0.3s ease;}
.mobile-nav-group.is-open .mobile-nav-group-panel{max-height:420px;}
.mobile-nav-group-panel a{
  display:block; padding:11px 12px 11px 22px; color:var(--ink-soft);
  text-decoration:none; font-size:0.92rem;
}
.mobile-nav-group-panel a:hover{color:var(--forest-dark);}
body.nav-open{overflow:hidden;}

@media (max-width:900px){
  .site-nav{display:none;}
  .mobile-nav-toggle{display:flex;}
}

/* ---------- Footer: better small-screen organization ---------- */
.footer-inner{gap:32px 24px;}
@media (max-width:760px){
  .footer-inner{grid-template-columns:1fr 1fr; gap:32px 20px;}
  .footer-col:first-child{grid-column:1 / -1; margin-bottom:4px;}
}
@media (max-width:480px){
  .footer-inner{grid-template-columns:1fr; gap:28px;}
  .footer-col:first-child{grid-column:auto; margin-bottom:0;}
}

/* ---------- Tool card icons ---------- */
.tool-card-icon{
  width:38px; height:38px; border-radius:10px; background:var(--cream);
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;
  color:var(--forest);
}
.tool-card-icon svg{width:20px; height:20px;}