/* =========================================================
   ThaiHolidayBudget — NEWS SECTION STYLES
   Theme tokens copied verbatim from index.html / phrases.html so the
   /news pages sit in the same dark-navy-default design system.
   Loaded only by the generated news pages (news/index.html, news/*.html).
   ========================================================= */

:root { color-scheme: light; }

/* ---------- theme tokens: light (default) vs dark (very dark deep blue) ---------- */
:root{
  --page:#FFFBF0; --dot1:rgba(15,118,110,.045); --dot2:rgba(249,115,22,.03);
  --ink-rgb:31 41 55;
  --surface:#ffffff; --surface2:#ffffff; --tile:#F5F0E6;
  --card-border:rgba(15,118,110,.10); --field-border:#E2DCCD; --opt-border:#E8E2D4;
  --glass:rgba(255,251,240,.85); --glass-border:rgba(15,118,110,.12);
}
html.dark{
  color-scheme:dark;
  --page:#0A1428; --dot1:rgba(20,184,166,.05); --dot2:rgba(249,115,22,.04);
  --ink-rgb:230 237 248;
  --surface:#0F1D36; --surface2:#0C182E; --tile:#0C182E;
  --card-border:rgba(20,184,166,.20); --field-border:#243456; --opt-border:#243456;
  --glass:rgba(8,16,32,.85); --glass-border:rgba(20,184,166,.18);
}

body{
  background-color:var(--page);
  background-image:
    radial-gradient(var(--dot1) 1px, transparent 1px),
    radial-gradient(var(--dot2) 1px, transparent 1px);
  background-size: 34px 34px, 34px 34px;
  background-position: 0 0, 17px 17px;
  color:rgb(var(--ink-rgb));
  transition:background-color .25s, color .25s;
}

.card { background:var(--surface); border:1px solid var(--card-border); border-radius:1.25rem;
        box-shadow:0 1px 2px rgba(15,118,110,.06), 0 8px 24px -8px rgba(31,41,55,.10); }
.field { background:var(--surface2); border:1.5px solid var(--field-border); border-radius:.8rem;
         padding:.7rem .95rem; color:rgb(var(--ink-rgb)); width:100%; font-weight:600; transition:.15s; }
.field:focus { border-color:#14B8A6; box-shadow:0 0 0 4px rgba(20,184,166,.16); outline:none; }
.field::placeholder { color:#9CA3AF; font-weight:400; }

.opt { cursor:pointer; background:var(--surface); border:1.5px solid var(--opt-border); border-radius:1rem;
       transition:border-color .15s, transform .18s, box-shadow .18s; width:100%; }
.opt:hover { border-color:#14B8A6; transform:translateY(-2px); box-shadow:0 10px 24px -10px rgba(15,118,110,.28); }
.opt:focus-visible { outline:3px solid rgba(20,184,166,.5); outline-offset:2px; }

.btn-teal { background:linear-gradient(92deg,#0F766E,#14B8A6); color:#fff; font-weight:800;
            box-shadow:0 6px 20px -6px rgba(15,118,110,.5); transition:transform .15s, filter .15s; }
.btn-teal:hover { transform:translateY(-2px); filter:brightness(1.06); }
.btn-cta { background:linear-gradient(92deg,#F97316,#FB923C); color:#fff; font-weight:800;
           box-shadow:0 6px 20px -6px rgba(249,115,22,.55); transition:transform .15s, filter .15s; }
.btn-cta:hover { transform:translateY(-2px); filter:brightness(1.05); }
.btn-ghost { background:var(--surface); border:1.5px solid var(--field-border); color:rgb(var(--ink-rgb));
             font-weight:700; transition:.15s; }
.btn-ghost:hover { border-color:#14B8A6; color:#0F766E; }

.glassbar { background:var(--glass); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
            border-bottom:1px solid var(--glass-border); }

html.dark .card:hover{ border-color:rgba(45,212,191,.55); }
html.dark .card{ box-shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -8px rgba(0,0,0,.5); }
html.dark .text-tealdeep{ color:#2DD4BF; }
html.dark .btn-ghost:hover{ color:#2DD4BF; }
html.dark .bg-white{ background:var(--surface); }
html.dark path[fill="#FFFBF0"]{ fill:#0A1428; }
html.dark ::-webkit-scrollbar-thumb{ background:#24345F; }

/* ---------- news-specific ---------- */

/* Tag pills */
.tag-pill{ display:inline-block; font-size:.68rem; font-weight:800; letter-spacing:.06em;
           text-transform:uppercase; padding:.25rem .6rem; border-radius:999px;
           background:rgba(20,184,166,.12); color:#0F766E; border:1px solid rgba(20,184,166,.28); }
html.dark .tag-pill{ background:rgba(45,212,191,.12); color:#2DD4BF; border-color:rgba(45,212,191,.3); }

/* "Heads up" advisory box */
.advisory{ border-left:4px solid #FBBF24; background:rgba(251,191,36,.10); border-radius:.75rem;
           padding:.9rem 1.1rem; font-size:.9rem; }
html.dark .advisory{ background:rgba(251,191,36,.08); }

/* Article prose — scoped so Tailwind reset doesn't flatten the body copy */
.prose-pong{ font-size:1.02rem; line-height:1.75; }
.prose-pong > * + *{ margin-top:1.05rem; }
.prose-pong h2{ font-family:Fraunces,Georgia,serif; font-weight:900; font-size:1.5rem;
                margin-top:2.2rem; line-height:1.3; }
.prose-pong h3{ font-weight:800; font-size:1.13rem; margin-top:1.7rem; }
.prose-pong a{ color:#0F766E; font-weight:700; text-decoration:underline; text-underline-offset:2px;
               text-decoration-thickness:1.5px; }
.prose-pong a:hover{ color:#F97316; }
html.dark .prose-pong a{ color:#2DD4BF; }
html.dark .prose-pong a:hover{ color:#FBBF24; }
.prose-pong ul, .prose-pong ol{ padding-left:1.35rem; }
.prose-pong ul{ list-style:disc; }
.prose-pong ol{ list-style:decimal; }
.prose-pong li{ margin-top:.45rem; }
.prose-pong li::marker{ color:#14B8A6; font-weight:700; }
.prose-pong strong{ font-weight:800; }
.prose-pong blockquote{ border-left:4px solid #14B8A6; padding-left:1rem;
                        color:rgb(var(--ink-rgb) / .8); font-style:italic; }
/* Tables: scroll horizontally on narrow screens rather than blowing out the layout */
.prose-pong .tbl{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
                  border:1px solid var(--card-border); border-radius:.9rem; }
.prose-pong .tbl table{ margin:0; }
.prose-pong .tbl th:first-child, .prose-pong .tbl td:first-child{ border-left:0; }
.prose-pong .tbl th:last-child, .prose-pong .tbl td:last-child{ border-right:0; }
.prose-pong .tbl tr:first-child th{ border-top:0; }
.prose-pong .tbl tr:last-child td{ border-bottom:0; }
.prose-pong table{ width:100%; border-collapse:collapse; font-size:.92rem; min-width:34rem; }
.prose-pong tbody tr:nth-child(even) td{ background:rgb(var(--ink-rgb) / .025); }

/* Figures, if an article carries an in-body image */
.prose-pong figure{ margin:1.6rem 0; }
.prose-pong figure img{ width:100%; max-height:26rem; object-fit:cover; object-position:top;
                        border-radius:1.1rem; display:block; }
.prose-pong figcaption{ font-size:.8rem; line-height:1.5; margin-top:.5rem;
                        color:rgb(var(--ink-rgb) / .65); }
.prose-pong th, .prose-pong td{ border:1px solid var(--card-border); padding:.55rem .7rem; text-align:left; }
.prose-pong th{ background:var(--tile); font-weight:800; }
.prose-pong code{ background:var(--tile); padding:.12rem .38rem; border-radius:.35rem; font-size:.9em; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .opt:hover, .btn-teal:hover, .btn-cta:hover{ transform:none; }
}