/* =========================================================================
   shell.css — the shared page shell for thaivisafinder.com
   Design tokens, announcement ribbon, top bar and width system.
   Mirrors index.html, which remains the visual reference. Every page other
   than index.html links this file and injects the header via site.js.
   Load this BEFORE a page's own <style> so page components can still win.
   ========================================================================= */

:root{
  --ink:#191B2C;
  --ink-soft:#5A5E76;
  --paper:#F8F6F0;
  --paper-2:#EFECE2;
  --surface:#FFFFFF;
  --jade:#22265E;
  --jade-deep:#12143B;
  --jade-soft:#E7E8F4;
  --mango:#BE1231;
  --mango-deep:#93122A;
  --mango-soft:#F9E3E7;
  --chili:#BE1231;
  --chili-soft:#F9E3E7;
  --gold:#B08A3E;
  --gold-soft:#F1E7CF;
  --sand:#D9DAE6;
  --line:#E4E0D3;
  --line-dark:rgba(255,255,255,.14);
  --warn:#A56618; --warn-bg:#FAEED4;
  --danger:#AC3A2B; --danger-bg:#F8E1DA;
  --logo-img:url('/logo.png');
  --radius:22px; --radius-sm:14px;
  --shadow:0 1px 2px rgba(24,20,40,.05), 0 16px 40px -18px rgba(24,20,40,.22);
  --shadow-lg:0 2px 6px rgba(24,20,40,.07), 0 36px 80px -28px rgba(24,20,40,.38);
  --ease:cubic-bezier(.22,.75,.22,1);
  --serif:"Fraunces","Georgia",serif;
  --sans:"Hanken Grotesk",system-ui,sans-serif;
  --mono:"Spline Sans Mono",ui-monospace,monospace;

  /* Width system.
     --maxw  = the page shell: ribbon, top bar, footer. Matches index.html.
     --readw = the prose column inside <main>, kept to a readable measure. */
  --maxw:1180px;
  --readw:860px;
}

:root[data-theme="dark"]{
  --ink:#EAEBF2; --ink-soft:#9CA0B8;
  --paper:#0C0E1A; --paper-2:#141726; --surface:#1B1E30;
  --jade:#8B9AE8; --jade-deep:#080911; --jade-soft:#232741;
  --mango:#D9A84E; --mango-deep:#E8C57C; --mango-soft:#241D0F;
  --chili:#D9A84E; --chili-soft:#241D0F; --gold:#D9BC77; --gold-soft:#241D0F; --sand:#2E3350;
  --line:#2A2E49; --line-dark:rgba(255,255,255,.12);
  --warn:#E7B15E; --warn-bg:#191509; --danger:#E8776A; --danger-bg:#2C1714;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 14px 34px -16px rgba(0,0,0,.7);
  --shadow-lg:0 2px 6px rgba(0,0,0,.55),0 30px 64px -22px rgba(0,0,0,.8);
  background:#0C0E1A; color-scheme:dark;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
     font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;}
img,svg{max-width:100%;}

/* ---------- width system ---------- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 26px;}
.wrap-wide{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 26px;}
main .wrap{max-width:var(--readw);}
/* Landing-style pages opt out of the narrow prose measure with <body data-wide>. */
body[data-wide] main .wrap{max-width:var(--maxw);}
main .wrap-wide{max-width:1080px;}
main .bleed{max-width:var(--maxw);}

/* ---------- skip link ---------- */
.skip{position:absolute;left:-9999px;}
.skip:focus{left:16px;top:10px;z-index:200;background:#fff;padding:10px 16px;border-radius:8px;}
:root[data-theme="dark"] .skip:focus{background:var(--surface);color:var(--ink);}

/* ---------- announcement ribbon ---------- */
.ribbon{background:#070810;color:#C8C9E4;font-size:.78rem;letter-spacing:.02em;}
.ribbon .inner{display:flex;align-items:center;justify-content:center;gap:10px;
               min-height:38px;padding:6px 26px;text-align:center;}
.ribbon b{color:#fff;font-weight:600;}
.ribbon a{color:#fff;text-decoration:underline;text-underline-offset:2px;}
.ribbon .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:0 0 auto;
             box-shadow:0 0 0 3px rgba(176,138,62,.25);}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:50;background:rgba(248,246,240,.86);
        backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
        border-bottom:1px solid var(--line);}
:root[data-theme="dark"] .topbar{background:rgba(12,14,26,.88);}
.topbar .inner{display:flex;align-items:center;justify-content:space-between;height:74px;gap:16px;}

.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--ink);}
.brand .logo{width:46px;height:46px;border-radius:50%;flex:0 0 auto;overflow:hidden;
             background:var(--logo-img) center/cover no-repeat;
             box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--gold),0 4px 10px rgba(0,0,0,.18);}
.brand .bt{font-family:var(--mono);font-weight:600;font-size:.62rem;letter-spacing:.3em;
           color:var(--gold);text-transform:uppercase;display:block;line-height:1;margin-bottom:4px;}
.brand .bs{font-family:var(--serif);font-weight:600;font-size:1.14rem;color:var(--ink);
           display:block;line-height:1.05;letter-spacing:0;}

.topnav{display:flex;align-items:center;gap:2px;}
.topnav a{font-size:.9rem;font-weight:600;color:var(--ink-soft);text-decoration:none;
          padding:9px 13px;border-radius:10px;transition:color .15s,background .15s;}
.topnav a:hover{color:var(--ink);background:var(--paper-2);}
.topnav .tcta{background:var(--jade);color:#fff;margin-left:10px;padding:11px 20px;
              border-radius:100px;box-shadow:var(--shadow);}
.topnav .tcta:hover{background:var(--jade-deep);color:#fff;}
:root[data-theme="dark"] .topnav .tcta{color:#17110A;background:var(--gold);
              box-shadow:0 12px 34px -10px rgba(217,188,119,.4);}
:root[data-theme="dark"] .topnav .tcta:hover{background:#E8C57C;color:#17110A;}

.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
              padding:0;margin-left:6px;border:1px solid var(--line);background:var(--surface);
              color:var(--ink);border-radius:50%;cursor:pointer;
              transition:background .15s,color .15s;flex:0 0 auto;}
.theme-toggle:hover{background:var(--paper-2);}
.theme-toggle svg{width:17px;height:17px;}
.theme-toggle .i-sun{display:none;}
.theme-toggle .i-moon{display:block;}
:root[data-theme="dark"] .theme-toggle .i-sun{display:block;}
:root[data-theme="dark"] .theme-toggle .i-moon{display:none;}

@media(max-width:900px){
  .topnav a.hide-sm{display:none;}
  .topbar .inner{height:64px;}
  .brand .logo{width:40px;height:40px;}
  .brand .bs{font-size:1.02rem;}
}
@media(max-width:640px){
  .wrap,.wrap-wide{padding:0 18px;}
  .ribbon .inner{padding:6px 18px;font-size:.74rem;}
}
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }

/* ---------- HOMEPAGE-MATCHED SHARED CHROME ---------- */
/* Kept explicit and !important because legacy page-level styles load after this file. */
.ribbon{background:#07192A !important;color:#D8E5ED !important;}
.ribbon b,.ribbon a{color:#FFF4D9 !important;}
.ribbon .dot{background:#2DD4BF !important;box-shadow:0 0 0 4px rgba(45,212,191,.18) !important;}
.topbar{background:rgba(255,255,255,.92) !important;border-bottom-color:rgba(15,118,110,.10) !important;}
.brand{color:#1F2937 !important;}
.brand .logo{box-shadow:0 0 0 2px #fff,0 0 0 4px #FFB627,0 7px 18px rgba(7,25,42,.18) !important;}
.brand .bt{color:#FF6B35 !important;}
.brand .bs{color:#1F2937 !important;}
.topnav a{color:#667085 !important;}
.topnav a:hover{color:#1F2937 !important;background:#F5F0E6 !important;}
.topnav .tcta{background:linear-gradient(135deg,#FF6B35,#FF8A3D) !important;color:#fff !important;box-shadow:0 12px 28px -14px rgba(255,107,53,.82) !important;}
.topnav .tcta:hover{background:linear-gradient(135deg,#F75B27,#FF7A35) !important;color:#fff !important;}
.theme-toggle{border-color:#E2DCCD !important;background:#fff !important;color:#1F2937 !important;}
.theme-toggle:hover{background:#F5F0E6 !important;}
footer{background:#052E27 !important;color:#A6A8CC !important;}
footer::before{background:radial-gradient(50% 70% at 90% 110%,rgba(255,107,53,.14),transparent 60%) !important;}
footer .brand-f{color:#fff !important;}
footer .brand-f .logo{box-shadow:0 0 0 2px rgba(94,234,212,.55) !important;}
footer h4{color:#E8C57C !important;}
footer a,footer button.flink{color:#A6A8CC !important;}
footer a:hover,footer button.flink:hover{color:#fff !important;}
footer .legal{border-top-color:rgba(255,255,255,.14) !important;color:#7B7EA6 !important;}
footer .legal b{color:#C0C1DE !important;}
:root[data-theme="dark"] .topbar{background:rgba(10,20,40,.92) !important;border-bottom-color:#243456 !important;}
:root[data-theme="dark"] .brand{color:#E6EDF8 !important;}
:root[data-theme="dark"] .brand .logo{box-shadow:0 0 0 2px #0F1D36,0 0 0 4px #FFB627,0 7px 18px rgba(0,0,0,.35) !important;}
:root[data-theme="dark"] .brand .bs{color:#E6EDF8 !important;}
:root[data-theme="dark"] .topnav a{color:#AAB7CC !important;}
:root[data-theme="dark"] .topnav a:hover{color:#E6EDF8 !important;background:#0C182E !important;}
:root[data-theme="dark"] .topnav .tcta{background:linear-gradient(135deg,#FF6B35,#FF8A3D) !important;color:#fff !important;box-shadow:0 14px 32px -16px rgba(255,107,53,.82) !important;}
:root[data-theme="dark"] .topnav .tcta:hover{background:linear-gradient(135deg,#F75B27,#FF7A35) !important;color:#fff !important;}
:root[data-theme="dark"] .theme-toggle{border-color:#243456 !important;background:#0F1D36 !important;color:#E6EDF8 !important;}
:root[data-theme="dark"] .theme-toggle:hover{background:#0C182E !important;}
:root[data-theme="dark"] footer{background:#07192A !important;}
