/* ============================================================================
   Yamate — shared "premium" layer for the SEO pages (tools, guides, trades).
   Loaded AFTER each page's inline <style>, so it overrides the plain defaults
   with a consistent high-end design system. Plain CSS, no framework.
   Research basis: warm layered shadows, fluid type, 8pt rhythm, real buttons.
   ============================================================================ */

:root{
  --ym-ink:#2d2823; --ym-ink-soft:#5c554c; --ym-line:#e7ddcf;
  --ym-terra:#c2693f; --ym-terra-d:#a8542f; --ym-gold:#b08842;
  --ym-cream:#f7f2ea; --ym-shadow:28deg 35% 22%;        /* WARM shadow hue, not grey */
  --ym-e1:0 1px 2px hsl(var(--ym-shadow)/.06), 0 2px 4px hsl(var(--ym-shadow)/.05);
  --ym-e2:0 1px 2px hsl(var(--ym-shadow)/.05), 0 4px 8px hsl(var(--ym-shadow)/.06), 0 8px 16px hsl(var(--ym-shadow)/.05);
  --ym-e3:0 2px 4px hsl(var(--ym-shadow)/.05), 0 10px 20px hsl(var(--ym-shadow)/.08), 0 18px 34px hsl(var(--ym-shadow)/.06);
}

/* ---- Body & subtle warm depth ------------------------------------------- */
body{
  color:var(--ym-ink);
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);   /* 16 -> ~17px fluid */
  line-height:1.65;
  background:radial-gradient(80% 50% at 50% -5%, #fdf8f0 0%, var(--ym-cream) 60%) no-repeat, var(--ym-cream);
  text-rendering:optimizeLegibility;
}
::selection{background:hsl(28 60% 55% / .25); color:var(--ym-ink);}

/* ---- Typography: confident scale, tight headings ------------------------ */
h1{font-size:clamp(1.95rem,1.5rem + 2vw,2.75rem) !important; line-height:1.12 !important; letter-spacing:-.022em; text-wrap:balance;}
h2{line-height:1.18 !important; letter-spacing:-.015em; text-wrap:balance;}
h3{line-height:1.25 !important; letter-spacing:-.01em;}
article p, .content p, .lede{text-wrap:pretty;}

/* ---- Byline / freshness (E-E-A-T trust signal) -------------------------- */
.byline{color:var(--ym-ink-soft); font-size:.83em; margin:-2px 0 18px; display:flex; align-items:center; gap:7px;}
.byline b{color:var(--ym-ink); font-weight:700;}
a{text-underline-offset:3px; text-decoration-thickness:1px;}

/* ---- Cards / panels / calculators: warm layered shadow + hover lift ----- */
.calc, .panel, .card, .lcard, #invoice{
  box-shadow:var(--ym-e2) !important;
  border-color:var(--ym-line) !important;
}
.lcard{transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
.lcard:hover{transform:translateY(-3px); box-shadow:var(--ym-e3) !important; border-color:var(--ym-terra) !important;}

/* ---- The "answer" / result boxes become the visual anchor --------------- */
.answer{box-shadow:var(--ym-e1); background:linear-gradient(180deg,#fffdfa,#fdf8f1) !important;}
.out .big{background:linear-gradient(180deg,#eef4ec,#e6efe3) !important;}
.out .big b{letter-spacing:-.02em;}

/* ---- Buttons / CTAs: gradient + layered shadow + tactile states --------- */
.cta, .btn:not(.ghost):not(.btn-secondary), .printbtn{
  background:linear-gradient(180deg,#d07a4f 0%, var(--ym-terra) 100%) !important;
  box-shadow:0 1px 2px hsl(var(--ym-shadow)/.20), 0 6px 16px hsl(var(--ym-shadow)/.20), inset 0 1px 0 hsl(0 0% 100% / .18) !important;
  border:0 !important;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease !important;
}
.cta:hover, .btn:not(.ghost):not(.btn-secondary):hover, .printbtn:hover{
  background:linear-gradient(180deg,#c2693f 0%, var(--ym-terra-d) 100%) !important;
  box-shadow:0 2px 5px hsl(var(--ym-shadow)/.24), 0 12px 26px hsl(var(--ym-shadow)/.24), inset 0 1px 0 hsl(0 0% 100% / .18) !important;
  transform:translateY(-1px); text-decoration:none;
}
.cta:active, .btn:active, .printbtn:active{transform:translateY(1px) scale(.99);}

/* ---- Inputs: clearer focus --------------------------------------------- */
input:focus, textarea:focus, select:focus{box-shadow:0 0 0 3px hsl(28 60% 55% / .18);}

/* ---- Tables: kill the spreadsheet look --------------------------------- */
table{border:1px solid var(--ym-line) !important; border-radius:11px; overflow:hidden; box-shadow:var(--ym-e1);}
thead th, table tr:first-child th{
  text-transform:uppercase; letter-spacing:.04em; font-size:.8em; color:var(--ym-ink-soft);
}
tbody tr:nth-child(even) td, table tr:nth-child(even) td{background:#faf5ee;}

/* ---- Pills / tool links: subtle lift ----------------------------------- */
.tools a{transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;}
.tools a:hover{transform:translateY(-1px); box-shadow:var(--ym-e1); border-color:var(--ym-terra); text-decoration:none;}

/* ---- Accessibility: real focus ring + reduced motion -------------------- */
:focus-visible{outline:2px solid var(--ym-terra); outline-offset:3px; border-radius:5px;}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important;}
}

/* ---- Sticky mobile CTA (injected by pages.js) -------------------------- */
.ym-sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:hsl(36 40% 97% / .94); backdrop-filter:saturate(140%) blur(8px);
  border-top:1px solid var(--ym-line); box-shadow:0 -3px 14px hsl(var(--ym-shadow)/.10);
  display:flex;
}
.ym-sticky a{
  flex:1; text-align:center; color:#fff; font-weight:800; font-size:15px;
  padding:13px; border-radius:11px; text-decoration:none;
  background:linear-gradient(180deg,#d07a4f,var(--ym-terra));
  box-shadow:0 2px 10px hsl(var(--ym-shadow)/.22), inset 0 1px 0 hsl(0 0% 100% / .18);
}
.ym-sticky small{display:block; font-weight:600; font-size:11px; opacity:.92; margin-top:1px;}
body.ym-haspad{padding-bottom:84px;}
@media (min-width:760px){ .ym-sticky{display:none !important;} body.ym-haspad{padding-bottom:0;} }

/* ---- Print: never carry the screen chrome onto a printed/saved PDF ------ */
@media print{
  .ym-sticky{display:none !important;}
  #invoice{box-shadow:none !important; border:none !important;}
  body{background:#fff !important;}
}

/* ---- Gentle reveal on scroll (progressive enhancement; content visible if JS off) */
@media (prefers-reduced-motion: no-preference){
  .ym-reveal{opacity:0; transform:translateY(10px); animation:ym-rise .55s ease forwards;}
  @keyframes ym-rise{to{opacity:1; transform:none;}}
}