/* ============================================================
   Wat Phouthapasaram — shared layer
   Loaded by every page before its own <style> block, so any page
   can still override what it needs for its own layout.

   Contains: the palettes, the base type, the site nav, the
   buttons, and the footer shell. Page-specific layout stays in
   the page.
   ============================================================ */

/* ============================================================
   THEMING
   Every color in the site resolves to one of these variables,
   so a palette swap is a single class on <html>.
   ============================================================ */

/* --- 1. VERMILION — brilliant lacquer red, the temple sign at full saturation --- */
.t-vermilion{
  --band:#D62027;        --band-2:#A3141B;      --band-ink:#FFFFFF;
  --band-ink-soft:#FFD9D6; --band-border:rgba(255,255,255,.34);
  --accent:#FFC61E;      --accent-ink:#7A0F13;
  --action:#FF7A1A;      --action-hover:#E8630B; --action-ink:#FFFFFF;
  --page:#FFFDF8;        --page-2:#FFF3E2;      --surface:#FFFFFF;
  --ink:#2B1D1B;         --ink-soft:#6E5A55;    --rule:#EADCC8;
  --motif:#D9A21B;
  --calm:#0E8F6F;        --calm-2:#0A6B53;      --calm-ink:#EAFBF5; --calm-ink-soft:#A9DFCE;
  --scrim:22,6,6;
  --tint:#FDE7E2;
}

/* --- 2. SAFFRON & IVORY — light-dominant, airy, minimal dark mass --- */
.t-saffron{
  --band:#F26A1B;        --band-2:#241C1A;      --band-ink:#FFFFFF;
  --band-ink-soft:#FFE3CC; --band-border:rgba(255,255,255,.38);
  --accent:#FFB020;      --accent-ink:#4A2408;
  --action:#E8531C;      --action-hover:#CE4413; --action-ink:#FFFFFF;
  --page:#FFFFFF;        --page-2:#FFF7EC;      --surface:#FFFFFF;
  --ink:#231C19;         --ink-soft:#6B5C55;    --rule:#EFE2D2;
  --motif:#C98A24;
  --calm:#12796A;        --calm-2:#0C5A4E;      --calm-ink:#EAF7F4; --calm-ink-soft:#A6D3C9;
  --scrim:26,12,4;
  --tint:#FFEBDA;
}
/* the ivory theme keeps the nav light instead of a solid color band */
.t-saffron nav{ background:rgba(255,255,255,.96); border-bottom-color:var(--action) }
.t-saffron .brand{ color:var(--ink) }
.t-saffron .brand .lo{ color:var(--action) }
.t-saffron .nav-links a{ color:var(--ink-soft) }
.t-saffron .nav-links a:hover{ color:var(--ink) }
.t-saffron .nav-links a[aria-current="page"]{ color:var(--action) }
.t-saffron .lang{ border-color:var(--rule) }
.t-saffron .lang button{ color:var(--ink-soft) }
.t-saffron .lang button[aria-pressed="true"]{ background:var(--ink); color:#fff }
.t-saffron .fb{ color:var(--ink-soft) }

/* --- 3. GOLD & JADE — the nāga green, brightened; red used only as accent --- */
.t-jade{
  --band:#0E7C63;        --band-2:#08543F;      --band-ink:#FFFFFF;
  --band-ink-soft:#B9E4D6; --band-border:rgba(255,255,255,.34);
  --accent:#FFC93C;      --accent-ink:#0A4835;
  --action:#E4571A;      --action-hover:#C74712; --action-ink:#FFFFFF;
  --page:#FDFCF7;        --page-2:#EEF6F2;      --surface:#FFFFFF;
  --ink:#1E2A26;         --ink-soft:#5A6B65;    --rule:#DCE8E1;
  --motif:#C79A2A;
  --calm:#B0331F;        --calm-2:#8A2416;      --calm-ink:#FDECE6; --calm-ink-soft:#EDBBAB;
  --scrim:4,26,20;
  --tint:#DFF0E8;
}

/* --- 4. HERITAGE — oxblood and gold, the palette in use --- */
.t-heritage{
  --band:#6E1B18;        --band-2:#42100E;      --band-ink:#F7F2E6;
  --band-ink-soft:#E6CFC6; --band-border:rgba(247,242,230,.35);
  --accent:#EFB008;      --accent-ink:#42100E;
  --action:#D9631A;      --action-hover:#C4560F; --action-ink:#FFFFFF;
  --page:#F7F2E6;        --page-2:#EFE7D3;      --surface:#FFFFFF;
  --ink:#2A1F1C;         --ink-soft:#6B5A52;    --rule:#D8CDB6;
  --motif:#C0952F;
  --calm:#2F6B5B;        --calm-2:#1D4A3E;      --calm-ink:#EAF2EF; --calm-ink-soft:#C9DED8;
  --scrim:66,16,14;
  --tint:#F2DFD8;
}

/* ============================================================
   BASE
   ============================================================ */
*{box-sizing:border-box}
/* The palette is light by design. "only light" forbids the browser
   from force-darkening it (Chrome's auto dark theme repaints the
   cream sections brown), which it will otherwise do to any page
   that has not declared a scheme. */
:root{color-scheme:only light}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--page);color:var(--ink);
  font-family:"Inter Tight",system-ui,sans-serif;font-size:17px;line-height:1.65}
:lang(lo){font-family:"Noto Sans Lao",sans-serif;line-height:1.95}
h1:lang(lo),h2:lang(lo),h3:lang(lo){font-family:"Noto Serif Lao",serif;line-height:1.8}
img{max-width:100%;display:block}
a{color:var(--action)}
.wrap{max-width:1120px;margin:0 auto;padding:0 26px}
.eyebrow{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--action);margin:0 0 14px}
h2{font-family:Fraunces,serif;font-weight:600;font-size:clamp(1.6rem,3.4vw,2.3rem);letter-spacing:-.02em;line-height:1.15;margin:0 0 16px}
.lede{font-size:1.06rem;color:var(--ink-soft);max-width:60ch;margin:0 0 30px}
button:focus-visible,a:focus-visible{outline:2px solid var(--action);outline-offset:3px}
/* the nav is sticky, so anchored sections stop below it */
section[id],header[id]{scroll-margin-top:80px}

/* ============================================================
   SITE NAV
   The same markup on every page. To add a page, drop one more
   anchor into .nav-links and carry aria-current="page" on the
   anchor for the page you are on.
   ============================================================ */
nav{position:sticky;top:0;z-index:50;background:var(--band);
  border-bottom:3px solid var(--accent);transition:background .25s}
/* padding-block, never the padding shorthand: this element is also a
   .wrap, and a shorthand would zero the side gutter it inherits */
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-block:12px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--band-ink);min-width:0}
.brand svg circle,.brand svg line{stroke:var(--accent)}
.brand svg circle:last-of-type{fill:var(--accent)}
.brand .nm{font-family:Fraunces,serif;font-weight:600;font-size:1rem;line-height:1.15;letter-spacing:-.01em}
.brand .lo{font-family:"Noto Serif Lao",serif;font-size:.86rem;color:var(--accent);line-height:1.7}

.nav-links{display:flex;align-items:center;gap:2px}
.nav-links a{color:var(--band-ink-soft);text-decoration:none;font-size:.89rem;font-weight:500;
  padding:7px 12px;border-radius:3px;white-space:nowrap;transition:color .15s,background .15s}
.nav-links a:hover{color:var(--band-ink);background:rgba(127,127,127,.16)}
.nav-links a[aria-current="page"]{color:var(--accent);font-weight:600}
.nav-links a:lang(lo){font-size:.95rem}

.nav-r{display:flex;align-items:center;gap:8px;flex-shrink:0}
.lang{display:flex;border:1px solid var(--band-border);border-radius:3px;overflow:hidden}
.lang button{appearance:none;border:0;background:transparent;font:inherit;font-size:.82rem;
  padding:6px 12px;cursor:pointer;color:var(--band-ink-soft)}
.lang button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);font-weight:600}
.give{background:var(--action);color:var(--action-ink);text-decoration:none;font-size:.85rem;
  font-weight:600;padding:9px 17px;border-radius:3px;white-space:nowrap}
.give:hover{background:var(--action-hover)}
.fb{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:3px;color:var(--band-ink-soft);text-decoration:none;transition:color .15s,background .15s}
.fb:hover{color:var(--accent);background:rgba(127,127,127,.12)}
.fb:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ============================================================
   BUTTONS
   ============================================================ */
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-block;text-decoration:none;font-weight:600;font-size:.95rem;padding:13px 24px;border-radius:3px}
.btn-p{background:var(--accent);color:var(--accent-ink)}
.btn-p:hover{filter:brightness(1.08)}
.btn-s{border:1.5px solid rgba(255,255,255,.62);color:#fff}
.btn-s:hover{border-color:var(--accent);color:var(--accent)}
/* a button whose destination does not exist yet: shows the shape
   without pretending to work */
.btn.is-soon,.btn.is-soon:hover{cursor:default;opacity:.45;filter:none}

/* ============================================================
   FOOTER SHELL — pages lay out their own contents inside it
   ============================================================ */
footer{background:var(--band-2);color:var(--band-ink-soft);padding:48px 0 36px;font-size:.9rem;transition:background .25s}
footer a{color:var(--accent)}
footer .fineprint{margin:0;font-size:.8rem;opacity:.7}

/* ============================================================
   NAV RESPONSIVE
   Below 760px the page links drop to their own row under the
   brand, so the nav never crowds on a phone.
   ============================================================ */
@media (max-width:900px){
  .brand .lo{display:none}
  .nav-links a{padding:7px 9px}
}
@media (max-width:760px){
  .wrap{padding:0 20px}
  .nav-in{flex-wrap:wrap;gap:10px 14px;padding-block:11px 0}
  .nav-links{order:3;width:100%;justify-content:center;gap:4px;
    border-top:1px solid var(--band-border);padding:7px 0 9px;margin-top:1px}
  .give{padding:8px 14px}
  section[id],header[id]{scroll-margin-top:118px}   /* nav is two rows here */
}
/* Below this the brand name, the controls and the page links no
   longer fit two rows in source order. The nav becomes a small grid
   so the temple name keeps its place: name, language and Facebook on
   top, page links and Give beneath. .nav-r turns into display:contents
   so its children can be placed on either row. */
@media (max-width:560px){
  .nav-r{display:contents}
  .nav-in{display:grid;align-items:center;
    grid-template-columns:minmax(0,1fr) auto auto;
    grid-template-areas:
      "brand lang fb"
      "links links give";
    gap:9px 10px;padding-block:10px 11px}
  .brand{grid-area:brand;gap:9px}
  .brand svg{width:26px;height:26px;flex:0 0 auto}
  .brand .nm{font-size:.88rem;line-height:1.15}
  .lang{grid-area:lang}
  .lang button{padding:6px 10px;font-size:.79rem}
  .fb{grid-area:fb;width:32px;height:32px}
  .give{grid-area:give;justify-self:end;font-size:.82rem;padding:8px 13px}
  .nav-links{grid-area:links;width:auto;justify-content:flex-start;gap:2px;
    border-top:0;padding:0;margin:0}
  .nav-links a{font-size:.87rem;padding:6px 9px}
  .nav-links a:first-child{margin-left:-9px}   /* optical align with the brand */
  section[id],header[id]{scroll-margin-top:108px}
}
