/* =========================================================
Thai Budget Planner — SHARED SITE CHROME
One source of truth for the header bar, page shell and
brand buttons so every page matches the landing page.
Linked from on every page:
as the logo — strip the UA chrome */
button.site-logo{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;text-align:left}
.site-logo-img{width:2.75rem;height:2.75rem;border-radius:1rem;object-fit:cover;object-position:top;flex-shrink:0;box-shadow:0 8px 22px -12px rgba(7,25,42,.55)}
.site-logo-text{min-width:0;line-height:1.15}
.site-logo-word{display:block;font-family:Fraunces,Georgia,serif;font-size:1.15rem;font-weight:900;color:#0f766e}
html.dark .site-logo-word{color:#5eead4}
.site-logo-sub{display:block;font-size:.625rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--brand-coral)}
@media(min-width:640px){.site-logo-sub{font-size:.6875rem}}
.site-nav{display:none;align-items:center;gap:1.75rem;font-size:.875rem;font-weight:700;color:rgb(var(--ink-rgb) / .65)}
@media(min-width:1024px){.site-nav{display:flex}}
.site-nav a{transition:color .2s}
.site-nav a:hover{color:#0f766e}
html.dark .site-nav a:hover{color:#5eead4}
.site-nav a[aria-current="page"]{color:var(--brand-coral)}
.site-actions{display:flex;align-items:center;gap:.5rem}
/* ---------- Brand buttons ---------- */
.site-btn-primary{
display:inline-flex;align-items:center;justify-content:center;gap:.65rem;
border-radius:999px;padding:.95rem 1.45rem;
background:linear-gradient(135deg,var(--brand-coral),#ff8a3d);color:#fff;font-weight:900;
box-shadow:0 14px 32px -16px rgba(255,107,53,.85);transition:transform .2s,box-shadow .2s;
}
.site-btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 38px -14px rgba(255,107,53,.9)}
.site-btn-secondary{
display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
border-radius:999px;padding:.9rem 1.35rem;
border:1px solid var(--field-border);background:var(--surface);color:rgb(var(--ink-rgb));
font-weight:850;transition:transform .2s,border-color .2s,color .2s;
}
.site-btn-secondary:hover{transform:translateY(-2px);border-color:var(--brand-mint);color:#0f766e}
html.dark .site-btn-secondary:hover{color:#5eead4}
.site-btn-sm{padding:.625rem 1rem;font-size:.78rem;white-space:nowrap}
@media(min-width:640px){.site-btn-sm{padding:.625rem 1.15rem;font-size:.82rem}}
.site-btn-primary:focus-visible,.site-btn-secondary:focus-visible,.site-nav a:focus-visible,.site-logo:focus-visible{outline:3px solid var(--brand-mint);outline-offset:3px}
/* ---------- Estimator wizard strip (progress + Back/Next) ---------- */
.site-wizard-strip{padding-bottom:.65rem}
.site-progress{display:flex;gap:.375rem;margin-bottom:.65rem}
.site-wizard-nav{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
/* Currency picker in the header */
.site-currency{
padding:.6rem .7rem;border-radius:999px;border:1px solid var(--field-border);
background:var(--surface);color:rgb(var(--ink-rgb));
font-size:.78rem;font-weight:900;line-height:1;
}
.site-currency:focus-visible{outline:3px solid var(--brand-mint);outline-offset:2px}
/* ---------- 404 page layout (plain CSS, no utility dependencies) ---------- */
.site-404-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center}
@media(min-width:1024px){.site-404-grid{grid-template-columns:minmax(0,1.05fr) minmax(300px,.85fr)}}
.site-404-code{font-family:Fraunces,Georgia,serif;font-weight:900;line-height:.9;font-size:clamp(4.5rem,12vw,8rem);color:#0f766e;margin:.25rem 0 .5rem}
html.dark .site-404-code{color:#5eead4}
.site-card-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:640px){.site-card-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.site-card-grid{grid-template-columns:repeat(4,1fr)}}
.site-quickcard{display:block;padding:1.25rem;border-radius:1rem;transition:transform .2s}
.site-quickcard:hover{transform:translateY(-4px)}
.site-quickcard .qi{font-size:1.5rem;margin-bottom:.5rem}
.site-quickcard .qt{font-weight:900;color:#0f766e;margin-bottom:.25rem}
html.dark .site-quickcard .qt{color:#5eead4}
.site-quickcard .qd{font-size:.875rem;color:rgb(var(--ink-rgb) / .65);line-height:1.5}
.site-checklist{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;margin-top:1.75rem;font-size:.75rem;font-weight:800;color:rgb(var(--ink-rgb) / .55)}
.site-actions-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
/* ---------- Page heading band under the header ---------- */
.site-page-head{padding:2.5rem 0 1.25rem}
.site-kicker{font-size:.72rem;letter-spacing:.19em;text-transform:uppercase;font-weight:900;color:var(--brand-coral)}
.site-title{font-family:Fraunces,Georgia,serif;font-weight:900;letter-spacing:-.035em;line-height:1.02;font-size:clamp(2rem,4.5vw,2.9rem);margin-top:.4rem}
/* Brand lockup must never wrap — it reads as three lines of nonsense if it does. */
.site-logo-word,.site-logo-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site-hide-sm{display:inline}
/* Tailwind-independent fallbacks for the two calculator controls in the bar.
The header is identical on every page now, so it must still fit a phone
even if the Tailwind CDN fails and .hidden / .sm:block never arrive. */
.site-currency{display:none}
@media(min-width:640px){.site-currency{display:inline-block}}
.site-hide-md{display:none}
@media(min-width:768px){.site-hide-md{display:inline}}
@media(max-width:640px){
.site-shell,.site-prose-shell{width:min(100% - 1.15rem,1180px)}
.site-header-inner{gap:.4rem}
.site-logo{gap:.5rem}
.site-logo-img{width:2.35rem;height:2.35rem;border-radius:.8rem}
.site-logo-word{font-size:.95rem}
.site-logo-sub{font-size:.5rem;letter-spacing:.09em}
.site-actions{gap:.35rem}
.site-btn-sm{padding:.5rem .7rem;font-size:.7rem;gap:.35rem}
.site-hide-sm{display:none}
}
@media(max-width:360px){
.site-logo-sub{display:none}
}
@media(prefers-reduced-motion:reduce){
.site-btn-primary,.site-btn-secondary{transition:none}
.site-btn-primary:hover,.site-btn-secondary:hover{transform:none}
}
@media print{.site-header{display:none}}