/* Simple Calculators Online — shared theme v2
   Playful, alive, responsive from small phones to TVs */

:root{
  --paper:#F6F5F1;
  --paper-raised:#FFFFFF;
  --ink:#1C1B18;
  --ink-soft:#63615A;
  --line:#E4E1D8;
  --accent:#2F7A4F;
  --accent-soft:#E4F0E8;
  --accent-ink:#1E5636;
  --accent-2:#C9762F;
  --accent-2-soft:#FBEADA;
  --radius:16px;
  --radius-sm:10px;
  --shadow: 0 1px 2px rgba(28,27,24,0.06), 0 8px 24px -12px rgba(28,27,24,0.14);
  --shadow-hover: 0 4px 10px rgba(28,27,24,0.08), 0 20px 40px -16px rgba(47,122,79,0.28);
  --display: 'Fraunces', Georgia, serif;
  --body: 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
}

html.dark{
  --paper:#171713;
  --paper-raised:#1F1F1A;
  --ink:#F2F0E9;
  --ink-soft:#A8A498;
  --line:#33322B;
  --accent:#5FBE87;
  --accent-soft:#20301F;
  --accent-ink:#8FDBAA;
  --accent-2:#E0A25E;
  --accent-2-soft:#332417;
  --shadow: 0 1px 2px rgba(0,0,0,0.35), 0 8px 24px -12px rgba(0,0,0,0.55);
  --shadow-hover: 0 4px 12px rgba(0,0,0,0.4), 0 20px 44px -16px rgba(95,190,135,0.3);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  transition:background .2s ease, color .2s ease;
  font-size:16px;
}
a{color:inherit;text-decoration:none;}
h1,h2,h3{font-family:var(--display); font-weight:600; margin:0 0 .4em;}
::selection{background:var(--accent-soft);color:var(--accent-ink);}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* Content links (About, Privacy, Terms, FAQ, guide prose) are green
   and underlined by default so they're identifiable as links at a
   glance, not just on hover — a slightly deeper green on hover. */
.static-page a, .content-section p a, .faq-item p a, .blog-note p a{
  color:var(--accent-ink); text-decoration:underline;
}
.static-page a:hover, .content-section p a:hover, .faq-item p a:hover, .blog-note p a:hover{
  color:var(--accent);
}

/* Cookie consent banner */
.cookie-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:50; max-width:520px; margin:0 auto;
  background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-hover); padding:18px 20px; font-size:13px; color:var(--ink);
}
.cookie-banner p{margin:0 0 12px; font-size:13px; color:var(--ink-soft);}
.cookie-banner .btn-row{margin-top:0;}
.cookie-banner button{font-size:13px; padding:9px 16px;}
.cookie-banner a{color:var(--accent-ink); text-decoration:underline;}
img{max-width:100%;}
.mono{font-family:var(--mono);}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}

/* Layout — fluid across phone -> tablet -> desktop -> TV */
.wrap{max-width:1100px;margin:0 auto;padding:0 20px;}
@media (min-width:1600px){
  .wrap{max-width:1360px;}
  body{font-size:17px;}
}
@media (min-width:2200px){
  .wrap{max-width:1600px;}
  body{font-size:19px;}
}

/* Header / nav */
header.site-header{
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:30;
  background:var(--paper);
  backdrop-filter:saturate(180%) blur(6px);
}
.header-inner{
  max-width:1100px;margin:0 auto;padding:14px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
@media (min-width:1600px){ .header-inner{max-width:1360px;} }
@media (min-width:2200px){ .header-inner{max-width:1600px;} }

.brand{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:600;font-size:1.1rem;flex-shrink:0;}
.brand .mark{
  width:32px;height:32px;border-radius:9px;background:var(--accent);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-weight:700;font-size:.95rem;
  transition:transform .3s var(--ease-bounce);
}
.brand:hover .mark{transform:rotate(-8deg) scale(1.08);}

nav.main-nav{display:flex; align-items:center; gap:2px; flex:1; justify-content:center;}
nav.main-nav a{
  padding:8px 12px; border-radius:999px; font-size:.88rem; color:var(--ink-soft);
  white-space:nowrap; transition:background .15s ease, color .15s ease;
}
nav.main-nav a:hover{background:var(--accent-soft); color:var(--accent-ink);}

.header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.toggle-btn{
  border:1px solid var(--line);background:var(--paper-raised);
  color:var(--ink);border-radius:999px;padding:7px 13px;
  font-family:var(--body);font-size:.82rem;cursor:pointer;
  display:flex;align-items:center;gap:6px;
  transition:border-color .15s ease, transform .15s ease;
}
.toggle-btn:hover{border-color:var(--accent); transform:translateY(-1px);}
.toggle-btn:active{transform:translateY(0) scale(.96);}

.menu-btn{
  display:none; border:1px solid var(--line); background:var(--paper-raised);
  border-radius:10px; width:38px; height:38px; cursor:pointer;
  align-items:center; justify-content:center; font-size:1.1rem; color:var(--ink);
}

.mobile-nav{
  display:none; flex-direction:column; gap:2px;
  border-bottom:1px solid var(--line); background:var(--paper);
  padding:10px 20px 16px;
}
.mobile-nav.open{display:flex;}
.mobile-nav a{padding:10px 8px; border-radius:10px; font-size:.95rem; color:var(--ink);}
.mobile-nav a:hover{background:var(--accent-soft); color:var(--accent-ink);}

@media (max-width:840px){
  nav.main-nav{display:none;}
  .menu-btn{display:flex;}
}

/* Home hero */
.hero{padding:52px 0 32px;}
@keyframes riseIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
.hero .eyebrow, .hero h1, .hero p.lede{animation:riseIn .5s ease both;}
.hero h1{animation-delay:.05s;}
.hero p.lede{animation-delay:.1s;}
.eyebrow{color:var(--accent-ink);background:var(--accent-soft);display:inline-block;
  padding:5px 12px;border-radius:999px;font-size:.82rem;margin-bottom:16px;}
.hero h1{font-size:clamp(1.8rem, 4.2vw, 3rem); max-width:17ch; letter-spacing:-.01em;}
.hero p.lede{color:var(--ink-soft); font-size:clamp(.98rem,1.6vw,1.12rem); max-width:56ch; margin:12px 0 0;}

/* Category sections */
.category{margin:38px 0;}
.category h2{font-size:clamp(1.1rem,1.6vw,1.3rem); color:var(--ink); display:flex; align-items:center; gap:8px; scroll-margin-top:80px;}
.category .cat-sub{color:var(--ink-soft); font-size:.92rem; margin:0 0 16px;}
.grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:14px;
}
@media (min-width:1600px){ .grid{grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:18px;} }
@media (max-width:420px){ .grid{grid-template-columns:1fr 1fr; gap:10px;} }

.card{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; display:block; position:relative; overflow:hidden;
  transition:transform .28s var(--ease-bounce), border-color .2s ease, box-shadow .28s ease;
}
.card:hover{
  border-color:var(--accent);
  transform:translateY(-5px) rotate(-0.6deg) scale(1.015);
  box-shadow:var(--shadow-hover);
}
.card:nth-child(even):hover{transform:translateY(-5px) rotate(0.6deg) scale(1.015);}
.card:active{transform:translateY(-2px) scale(.99);}
.card .icon{font-size:1.6rem; display:block; margin-bottom:10px; transition:transform .3s var(--ease-bounce);}
.card:hover .icon{transform:scale(1.25) rotate(-6deg);}
.card h3{font-size:1rem; margin:0 0 4px;}
.card p{margin:0; font-size:.87rem; color:var(--ink-soft);}

/* Tool page */
.tool-header{padding:32px 0 6px;}
.breadcrumb{font-size:.83rem; color:var(--ink-soft); margin-bottom:12px; overflow-wrap:anywhere;}
.breadcrumb a{color:var(--ink-soft); text-decoration:underline;}
.breadcrumb a:hover{color:var(--accent-ink);}
.tool-header h1{font-size:clamp(1.5rem,3.6vw,2.3rem);}
.tool-header .tagline{color:var(--ink-soft); font-size:1rem; max-width:60ch;}

.panel{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; margin:18px 0; box-shadow:var(--shadow);
  transition:box-shadow .2s ease;
}
.panel:focus-within{box-shadow:var(--shadow-hover);}
label{display:block; font-size:.85rem; color:var(--ink-soft); margin-bottom:6px;}
input[type=text], input[type=number], input[type=date], input[type=time], input[type=datetime-local], input[type=search], select, textarea{
  width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--paper); color:var(--ink); font-family:var(--body); font-size:1rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
textarea{min-height:120px; resize:vertical;}
input:focus, select:focus, textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.row{display:grid; grid-template-columns:repeat(auto-fit, minmax(130px,1fr)); gap:12px; margin-bottom:14px;}
.field{margin-bottom:0;}
.btn-row{display:flex; gap:10px; margin-top:6px; flex-wrap:wrap;}
button{
  background:var(--accent); color:#fff; border:none; border-radius:var(--radius-sm);
  padding:12px 22px; font-family:var(--body); font-weight:600; font-size:.95rem; cursor:pointer;
  transition:transform .15s var(--ease-bounce), filter .15s ease, box-shadow .15s ease;
}
button:hover{filter:brightness(1.08); transform:translateY(-1px); box-shadow:0 6px 16px -6px var(--accent);}
button:active{transform:translateY(0) scale(.97);}
button.secondary{background:transparent; color:var(--accent-ink); border:1px solid var(--accent);}
.result-box{
  background:var(--accent-soft); border-radius:var(--radius-sm); padding:14px 16px;
  font-family:var(--mono); color:var(--accent-ink); min-height:1.4em; font-size:1.05rem;
  word-break:break-word; transition:transform .15s ease, background .15s ease;
}
.result-box:hover{transform:scale(1.01);}
.result-box:active{transform:scale(.99);}
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(130px,1fr)); gap:10px; margin-top:14px;}
@keyframes statPop{ from{opacity:0; transform:translateY(6px) scale(.97);} to{opacity:1; transform:translateY(0) scale(1);} }
.stat{background:var(--accent-soft); border-radius:var(--radius-sm); padding:14px; text-align:center; transition:transform .2s var(--ease-bounce); animation:statPop .3s var(--ease-bounce) both;}
.stat:hover{transform:translateY(-2px);}
.stat-value{font-family:var(--mono); font-size:1.25rem; color:var(--accent-ink); font-weight:600;}
.stat-label{font-size:.76rem; color:var(--ink-soft); margin-top:4px;}

/* Sound toggle dims slightly when muted, so the two toggle buttons read distinctly */
#sound-toggle[aria-pressed="false"]{opacity:.72;}
#sound-toggle[aria-pressed="true"]{opacity:1; border-color:var(--accent);}

/* Blog note section — a slightly distinct card so it reads as "extra reading" not another FAQ */
.blog-note{background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; box-shadow:var(--shadow);}
.blog-note h2{margin-bottom:.5em;}

@media (max-width:420px){
  .stat-grid{grid-template-columns:1fr 1fr;}
}

/* Content sections on tool pages */
.content-section{margin:32px 0;}
.content-section h2{font-size:1.2rem;}
.content-section p, .content-section li{color:var(--ink-soft); font-size:.97rem;}
.tips-list{padding-left:1.2em; margin:0;}
.tips-list li{margin-bottom:6px;}
.faq-item{border-top:1px solid var(--line); padding:14px 0;}
.faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-item h3{font-size:1rem; color:var(--ink); margin-bottom:6px;}
.faq-item p{margin:0;}

.related{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px;}
.related a{
  border:1px solid var(--line); border-radius:999px; padding:8px 15px;
  font-size:.87rem; background:var(--paper-raised);
  transition:transform .2s var(--ease-bounce), border-color .15s ease;
}
.related a:hover{border-color:var(--accent); color:var(--accent-ink); transform:translateY(-2px) scale(1.03);}

/* Ad slot: unused now — Auto Ads places ads automatically, no manual container needed */

/* Site search */
.search-toggle{position:relative;}
.search-panel{
  position:absolute; top:calc(100% + 8px); right:20px; width:340px; max-width:calc(100vw - 40px);
  background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-hover); padding:12px; z-index:40; display:none;
}
.search-panel.open{display:block;}
.search-panel input[type=search]{width:100%;}
.search-results{margin-top:8px; max-height:360px; overflow-y:auto;}
.search-results:not([hidden]){display:block;}
.search-result{
  display:flex; align-items:center; gap:10px; padding:9px 8px; border-radius:var(--radius-sm);
  transition:background .12s ease;
}
.search-result:hover, .search-result.active{background:var(--accent-soft);}
.search-result-icon{font-size:1.2rem; flex-shrink:0;}
.search-result-text{display:flex; flex-direction:column; min-width:0;}
.search-result-name{font-size:.92rem; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.search-result-cat{font-size:.74rem; color:var(--ink-soft);}
.search-empty{padding:12px 8px; color:var(--ink-soft); font-size:.88rem;}
.mobile-nav .nav-search-mobile{margin:4px 0 12px;}
.mobile-nav .nav-search-mobile input[type=search]{width:100%;}
.mobile-nav .search-results{position:static; max-height:none;}

/* Footer */
footer{border-top:1px solid var(--line); margin-top:56px; padding:26px 0 40px;}
footer .wrap{display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; align-items:center;}
footer p{color:var(--ink-soft); font-size:.85rem; margin:0;}
footer nav a{color:var(--ink-soft); font-size:.85rem; margin-right:16px; transition:color .15s ease;}
footer nav a:hover{color:var(--accent-ink);}

/* Static content pages */
.static-page{padding:44px 0 56px;}
.static-page h1{font-size:clamp(1.6rem,3vw,2rem);}
.static-page h2{font-size:1.15rem; margin-top:1.6em;}
.static-page p, .static-page li{color:var(--ink-soft);}

/* Small phones */
@media (max-width:400px){
  .wrap{padding:0 14px;}
  .header-inner{padding:12px 14px;}
  .brand{font-size:1rem;}
}

/* Print — keep the calculator and its result, drop chrome */
@media print{
  header.site-header, footer, .mobile-nav, .menu-btn,
  .breadcrumb, .related, nav.main-nav, .toggle-btn{ display:none !important; }
  body{background:#fff; color:#000;}
  .panel{box-shadow:none; border:1px solid #ccc;}
  .result-box{background:#f0f0f0; color:#000;}
  a{color:#000; text-decoration:underline;}
}

/* ---------------------------------------------------------------
   Extra screen-size coverage: tablets, short/landscape phones,
   and very large / TV-class displays.
--------------------------------------------------------------- */

/* Comfortable tap targets on touch devices (phones + tablets) */
@media (pointer:coarse){
  button, .toggle-btn, .menu-btn, input, select,
  nav.main-nav a, .mobile-nav a, .card, .related a{
    min-height:44px;
  }
  input, select, textarea{ font-size:16px; } /* prevents iOS auto-zoom on focus */
}

/* Tablet range — keep the full category nav legible before it collapses to the hamburger at 840px */
@media (min-width:841px) and (max-width:1100px){
  nav.main-nav{gap:0;}
  nav.main-nav a{padding:8px 9px; font-size:.82rem;}
}

/* Mobile header: brand + search/sound/theme/menu no longer fit on one row
   once search was added, so let the row wrap instead of overflowing. */
@media (max-width:840px){
  .header-inner{flex-wrap:wrap; row-gap:8px;}
  .header-actions{margin-left:auto;}
}
/* Below ~480px even a wrapped row is tight — shrink the two text-labeled
   toggles down to icon-only so search + sound + theme + menu all fit. */
@media (max-width:480px){
  .toggle-btn{padding:7px 9px; font-size:.78rem;}
  #sound-toggle .btn-label, #theme-toggle .btn-label{display:none;}
  .search-panel{right:0; left:0; width:auto; margin:0 20px;}
}

/* Small tablets / large phones in portrait */
@media (min-width:421px) and (max-width:700px){
  .grid{grid-template-columns:repeat(auto-fill, minmax(190px,1fr));}
  .row{grid-template-columns:repeat(auto-fit, minmax(115px,1fr));}
}

/* Short viewports (landscape phones) — trim vertical chrome so tools stay reachable */
@media (max-height:480px) and (orientation:landscape){
  .hero{padding:24px 0 18px;}
  .tool-header{padding:18px 0 4px;}
  header.site-header{position:static;}
}

/* Very large displays / TVs — cap line length and bump readability further than the 2200px step */
@media (min-width:3000px){
  .wrap{max-width:1800px;}
  body{font-size:22px;}
  .hero h1{font-size:clamp(2.4rem, 3vw, 4rem);}
}

/* Foldables / ultra-narrow phones */
@media (max-width:320px){
  .grid{grid-template-columns:1fr;}
  .row{grid-template-columns:1fr;}
  .stat-grid{grid-template-columns:1fr;}
  .hero h1{font-size:1.5rem;}
}