/* ============================================================
   LTAT — public theme (Office B · website-cms)
   Identity: royal-blue + white + gold pin. Deliberately distinct
   from AITA (navy/saffron, editorial). Airy modern sports-portal.
   Colours live ONLY here + in admin.css :root.
   ============================================================ */
:root{
  --blue:#0B5AAE;      /* primary royal */
  --blue-d:#083B73;    /* deep */
  --blue-dd:#062a52;   /* footer */
  --sky:#2D8CD6;       /* bright accent */
  --sky-lt:#e7f1fb;    /* tint */
  --gold:#F4B400;      /* gold pin (Thai-national lift) */
  --gold-d:#d99e00;
  --ink:#13263b;       /* body text */
  --muted:#6b8299;
  --bg:#eef4fb;        /* page tint */
  --surface:#ffffff;
  --line:#dce8f5;
  --radius:12px;
}

/* Poppins for Latin chrome/headings; Thai auto-falls back to Sarabun
   (Poppins has no Thai glyphs). Content areas prefer Sarabun. */
body{ font-family:'Poppins','Sarabun',system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink); background:var(--surface); }
h1,h2,h3,h4,.brand{ font-family:'Poppins','Sarabun',system-ui,sans-serif; }
.thai,.article-body,.lead-th{ font-family:'Sarabun','Poppins',sans-serif; }
/* Let the browser's Thai dictionary break at word boundaries; never force mid-word splits. */
.thai,.article-body,.lead-th{ word-break:normal; overflow-wrap:normal; line-break:normal; }
/* Imported WordPress content: keep wide tables/images from breaking the layout. */
.article-body{ overflow-x:auto; }
.article-body img{ max-width:100%; height:auto; }
.article-body table{ max-width:100%; border-collapse:collapse; }
.article-body iframe{ max-width:100%; }
/* WordPress / TinyMCE image-alignment classes — honour them so centred/floated
   images render the same on the live site as in the editor (758 news + 15 pages use these). */
.article-body img.aligncenter,
.article-body .aligncenter{ display:block; margin-left:auto; margin-right:auto; }
.article-body img.alignleft,
.article-body .alignleft{ float:left; margin:.25rem 1rem 1rem 0; }
.article-body img.alignright,
.article-body .alignright{ float:right; margin:.25rem 0 1rem 1rem; }
.article-body .alignnone{ height:auto; }
/* TinyMCE also writes inline text-align on the wrapping block — center any block image too. */
.article-body [style*="text-align: center"] img,
.article-body [style*="text-align:center"] img{ margin-left:auto; margin-right:auto; }
a{ color:var(--blue); text-decoration:none; }
a:hover{ color:var(--blue-d); }
.text-gold{ color:var(--gold); }
.eyebrow{ letter-spacing:.16em; text-transform:uppercase; font-size:.72rem; font-weight:700; color:var(--sky); }

/* ---- utility bar (deep blue) : flag switcher + portal CTA ---- */
.util-bar{ background:var(--blue-d); color:#bcd6f0; font-size:.78rem; }
.util-bar a{ color:#bcd6f0; }
.util-bar a:hover{ color:#fff; }
.lang-switch{ display:inline-flex; gap:.35rem; align-items:center; }
.lang-switch a{ display:inline-flex; align-items:center; gap:.3rem; padding:.1rem .35rem; border-radius:4px;
  opacity:.6; line-height:1; }
.lang-switch a.active{ opacity:1; background:rgba(255,255,255,.12); font-weight:600; color:#fff; }
.lang-switch img{ width:20px; height:14px; object-fit:cover; border-radius:2px; display:block;
  box-shadow:0 0 0 1px rgba(255,255,255,.25); }
.util-bar .portal-cta{ background:var(--gold); color:var(--blue-d); font-weight:700; padding:.18rem .7rem;
  border-radius:4px; }
.util-bar .portal-cta:hover{ background:var(--gold-d); color:var(--blue-d); }

/* ---- sticky social rail : fixed right edge, slides out left on hover (square-ish) ---- */
.social-rail{ position:fixed; right:0; top:50%; transform:translateY(-50%); z-index:1035; display:flex; flex-direction:column; gap:3px; }
.social-rail a{ display:flex; align-items:center; height:42px; width:160px; color:#fff; text-decoration:none;
  border-radius:3px 0 0 3px; transform:translateX(118px); transition:transform .22s ease; box-shadow:-2px 2px 8px rgba(0,0,0,.18); }
.social-rail a:hover,.social-rail a:focus{ transform:translateX(0); }
.social-rail a .si-ic{ width:42px; min-width:42px; display:flex; align-items:center; justify-content:center; font-size:1.15rem; }
.social-rail a .si-lb{ font-size:.82rem; font-weight:600; white-space:nowrap; }
.social-rail a.fb{ background:#1877f2; } .social-rail a.ig{ background:#e1306c; } .social-rail a.tw{ background:#111; }
.social-rail a.yt{ background:#ff0000; } .social-rail a.ln{ background:#06C755; }
@media (max-width:576px){ .social-rail{ display:none; } }

/* ---- royal-patronage masthead (crest + full bilingual name) ---- */
.masthead{ background:#fff; }
.masthead .crest{ height:78px; width:auto; flex:0 0 auto; }
.mh-th{ font-family:'Sarabun','Poppins',sans-serif; font-weight:700; color:var(--blue-d);
  font-size:clamp(1.02rem,2.5vw,1.55rem); line-height:1.18; }
.mh-th .mh-roy{ color:var(--gold-d); font-weight:600; }
.mh-en{ font-family:'Poppins',sans-serif; font-weight:600; letter-spacing:.05em; color:var(--muted);
  font-size:clamp(.58rem,1.2vw,.76rem); text-transform:uppercase; margin-top:.1rem; }
.mh-en .mh-roy{ color:var(--gold-d); }
.masthead .mh-rule{ height:3px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.masthead .mh-side{ flex:0 0 auto; min-width:0; }
.masthead .mh-side img{ max-height:60px; max-width:150px; object-fit:contain; display:block; }
@media (max-width:767px){ .masthead .mh-side{ display:none; } }
@media (max-width:575px){ .masthead .crest{ height:58px; } }

/* ---- white navbar (vs AITA's solid bar) ---- */
.nav-wrap{ position:sticky; top:0; z-index:1020; background:#fff; border-bottom:2px solid var(--blue);
  box-shadow:0 2px 12px rgba(11,90,174,.10); }
.nav-wrap .brand{ color:var(--blue); font-weight:800; letter-spacing:.3px; display:flex; align-items:center; gap:.5rem; }
.nav-wrap .brand img{ height:36px; width:auto; }
.nav-wrap .brand small{ color:var(--gold-d); font-weight:700; letter-spacing:1.5px; font-size:.6rem; }
.nav-wrap a.nav-link{ color:var(--blue-d); font-weight:500; }
.nav-wrap a.nav-link:hover,.nav-wrap a.nav-link.active{ color:var(--blue); }
.nav-wrap a.nav-link.active{ font-weight:700; }
.nav-wrap .navbar-nav .nav-link{ padding:.4rem .5rem; font-size:.9rem; }
.nav-wrap .dropdown-menu{ border:0; box-shadow:0 8px 24px rgba(11,90,174,.16); border-top:2px solid var(--gold); padding:.35rem 0; }
.nav-wrap .dropdown-item{ color:var(--blue-d); font-weight:500; font-size:.88rem; padding:.45rem 1rem; }
.nav-wrap .dropdown-item:hover{ background:var(--sky-lt); color:var(--blue); }
@media (min-width:992px){ .nav-wrap .dropdown:hover>.dropdown-menu{ display:block; } }

/* ---- hero : full-bleed slider + self-filling thumb strip ---- */
.hero{ position:relative; }
/* hero targets ~2:1 across laptop/tablet widths (matches the 2:1 banner crop);
   ultra-wide screens letterbox via cover-center, which also keeps arbitrary
   imported images sensible. */
.hero-slide{ position:relative; height:clamp(300px,50vw,600px); background-size:cover; background-position:center;
  background-color:var(--blue); }
.hero-slide::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(8,59,115,.92) 0%,rgba(8,59,115,.35) 45%,transparent 70%); }
.hero-slide::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 88% 18%,rgba(244,180,0,.22),transparent 55%); z-index:1; }
.hero-cap{ position:absolute; left:0; right:0; bottom:0; z-index:3; }
.hero-cap .eyebrow{ color:var(--gold); }
.hero-cap h2{ color:#fff; font-weight:800; line-height:1.1; font-size:clamp(1.4rem,3.2vw,2.4rem); max-width:34ch; }
.hero-cap .btn-gold{ background:var(--gold); color:var(--blue-d); border:none; font-weight:700; }
.hero-cap .btn-gold:hover{ background:var(--gold-d); }
/* up-next thumbnails = auto-fills from latest news when no banner set */
.hero-thumbs{ position:absolute; right:1rem; bottom:1rem; z-index:4; display:flex; gap:.4rem; align-items:flex-end; }
.hero-thumbs .ht{ width:74px; height:50px; border-radius:6px; background-size:cover; background-position:center;
  background-color:var(--sky); opacity:.7; cursor:pointer; transition:opacity .2s, transform .2s; border:2px solid transparent; }
.hero-thumbs .ht:hover{ opacity:1; transform:translateY(-2px); }
.hero-thumbs .ht.active{ opacity:1; border-color:var(--gold); }
@media (max-width:576px){ .hero-thumbs{ display:none; } }

/* ---- category tiles ---- */
.cat-tile{ display:block; border-radius:var(--radius); padding:1.1rem 1.2rem; color:#fff; height:100%;
  box-shadow:0 8px 20px rgba(11,90,174,.14); transition:transform .2s, box-shadow .2s; }
.cat-tile:hover{ transform:translateY(-3px); box-shadow:0 12px 26px rgba(11,90,174,.22); color:#fff; }
.cat-tile h3{ font-size:1rem; font-weight:700; margin:0; }
.cat-tile p{ font-size:.8rem; opacity:.85; margin:.15rem 0 0; }
.cat-tile .bi{ font-size:1.4rem; opacity:.9; }
.cat-1{ background:linear-gradient(135deg,var(--blue),var(--sky)); }
.cat-2{ background:linear-gradient(135deg,var(--blue-d),var(--blue)); }
.cat-3{ background:linear-gradient(135deg,var(--sky),#5bb0ea); }

/* ---- sponsors (prominent — moved high per BOD) ---- */
.sponsors{ background:var(--bg); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.sponsors .sp-card{ display:flex; align-items:center; justify-content:center; height:78px; padding:.6rem 1rem;
  background:#fff; border:1px solid var(--line); border-radius:10px; transition:box-shadow .2s, transform .2s; }
.sponsors .sp-card:hover{ box-shadow:0 8px 18px rgba(11,90,174,.12); transform:translateY(-2px); }
.sponsors .sp-card img{ max-height:48px; max-width:100%; object-fit:contain; }
.sponsors .sp-ph{ color:var(--blue); font-weight:700; letter-spacing:.04em; }

/* ---- federations strip (sister bodies — reuses the sponsor card look) ---- */
.federations .sp-card{ display:flex; align-items:center; justify-content:center; padding:.6rem 1rem;
  background:#fff; border:1px solid var(--line); border-radius:12px; }
.federations .sp-card img{ max-width:100%; object-fit:contain; }
.federations .sp-ph{ color:var(--blue); font-weight:700; letter-spacing:.04em; }

/* ---- square logo cards (bigger; sponsor/federation logos are often vertical) ---- */
.sp-card.sp-square{ position:relative; aspect-ratio:1; height:auto !important; flex-direction:column;
  padding:1.1rem; overflow:hidden; transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.sp-card.sp-square img{ max-height:80% !important; max-width:84%; width:auto; object-fit:contain;
  transition:transform .35s cubic-bezier(.2,.8,.2,1); position:relative; z-index:1; }
/* translucent caption across the TOP (box size unchanged; logo shows faintly behind) */
.sp-card.sp-square .sp-cap{ position:absolute; top:0; left:0; right:0; z-index:2; padding:.4rem .55rem;
  font-size:.82rem; font-weight:700; line-height:1.2; color:var(--blue-d); text-align:center;
  background:rgba(255,255,255,.78); backdrop-filter:blur(2px); border-bottom:1px solid rgba(11,90,174,.12); }
/* holographic shine sweep on hover (from the owner's CSS examples) */
.sp-card.sp-square .sp-shine{ position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, rgba(120,200,255,.35) 55%, transparent 70%);
  transform:translateX(-120%); transition:opacity .2s; }
.sp-card.sp-square:hover{ transform:translateY(-6px) scale(1.03); box-shadow:0 16px 34px rgba(11,90,174,.22); }
.sp-card.sp-square:hover img{ transform:scale(1.06); }
.sp-card.sp-square:hover .sp-shine{ opacity:1; animation:spSheen .8s ease forwards; }
@keyframes spSheen{ from{ transform:translateX(-120%);} to{ transform:translateX(120%);} }

/* ---- horizontal strip layout: arrows OUTSIDE the carousel ---- */
/* revolving conveyor: arrows OUTSIDE, items move one-by-one, N always visible */
.cv{ display:flex; align-items:center; gap:.65rem; }
.cv-viewport{ overflow:hidden; flex:1 1 auto; }
.cv-track{ display:flex; will-change:transform; }
.cv-item{ flex:0 0 33.3333%; padding:0 .5rem; box-sizing:border-box; }   /* cv--3 default = 3 visible */
.cv--5 .cv-item{ flex-basis:20%; }                                       /* 5 visible */
@media (max-width:991px){ .cv--5 .cv-item{ flex-basis:33.3333%; } .cv--3 .cv-item{ flex-basis:50%; } }
@media (max-width:575px){ .cv--5 .cv-item{ flex-basis:50%; } .cv--3 .cv-item{ flex-basis:100%; } }

.strip-wrap{ display:flex; align-items:center; gap:.65rem; }
.strip-arrow{ flex:0 0 auto; width:42px; height:42px; border-radius:50%; border:0; cursor:pointer;
  background:var(--blue); color:#fff; font-size:1.2rem; line-height:1; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(11,90,174,.28); transition:background .2s, transform .2s; }
.strip-arrow:hover{ background:var(--blue-d); transform:scale(1.08); }
@media (max-width:575px){ .strip-arrow{ width:34px; height:34px; font-size:1rem; } }

/* Mobile: show Latest News BEFORE Sponsors (admin ask) — desktop order unchanged */
@media (max-width:767px){
  .home-reorder{ display:flex; flex-direction:column; }
  .home-reorder .latest-news{ order:1; }
  .home-reorder .sponsors{ order:2; }
}

/* ---- hero 3-up card slider (top-anchored images → heads aren't cropped) ---- */
.hero-strip .hero-card{ display:block; position:relative; border-radius:14px; overflow:hidden; text-decoration:none;
  box-shadow:0 8px 24px rgba(11,90,174,.16); transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.hero-strip .hero-card-img{ aspect-ratio:4/3; background:#dde8f5 center top/cover no-repeat; transition:transform .5s ease; }
.hero-strip .hero-card-cap{ position:absolute; left:0; right:0; bottom:0; padding:.9rem 1rem; color:#fff; z-index:2;
  background:linear-gradient(to top, rgba(8,24,46,.92), rgba(8,24,46,.45) 60%, transparent); }
.hero-strip .hero-card-cap .eyebrow{ color:var(--gold); margin-bottom:.15rem; }
.hero-strip .hero-card-cap h3{ font-size:1rem; line-height:1.3; margin:0; font-weight:700;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hero-strip .hero-card:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(11,90,174,.26); }
.hero-strip .hero-card:hover .hero-card-img{ transform:scale(1.05); }
@media (max-width:575px){ .hero-strip .hero-card-img{ aspect-ratio:16/9; } }

/* ---- designer touches (8-year refresh) ---- */
/* animated underline on the main nav links */
@media (min-width:992px){
  .nav-wrap .navbar-nav .nav-link{ position:relative; }
  .nav-wrap .navbar-nav .nav-link::after{ content:''; position:absolute; left:.55rem; right:.55rem; bottom:.25rem;
    height:2px; background:linear-gradient(to right,var(--blue),var(--gold)); border-radius:2px;
    transform:scaleX(0); transform-origin:right; transition:transform .35s ease; }
  .nav-wrap .navbar-nav .nav-link:hover::after{ transform:scaleX(1); transform-origin:left; }
}
/* gentle lift on the latest-news cards */
.news-feature,.news-item{ transition:transform .3s ease, box-shadow .3s ease; }
.news-feature:hover,.news-item:hover{ transform:translateY(-3px); }
.news-feature:hover .ph,.news-item:hover .ph{ filter:brightness(1.03); }
/* reveal sections as they scroll into view (gated behind .js-anim so no-JS never hides content) */
.js-anim .reveal-up{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.js-anim .reveal-up.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .js-anim .reveal-up{ opacity:1; transform:none; } }

/* ---- news : featured + list ---- */
.section-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.1rem; }
.section-head h2{ font-size:1.25rem; font-weight:800; color:var(--blue-d); margin:0; }
.section-head .more{ font-weight:600; font-size:.85rem; color:var(--blue); }
.news-feature{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  box-shadow:0 8px 22px rgba(11,90,174,.10); height:100%; }
.news-feature .ph{ height:230px; background:linear-gradient(135deg,var(--sky),var(--blue)); background-size:cover; background-position:center; }
.news-feature .bd{ padding:1rem 1.1rem; }
.news-feature h3{ font-size:1.15rem; font-weight:700; color:var(--blue-d); }
.news-item{ display:flex; gap:.8rem; align-items:center; background:#fff; border:1px solid var(--line);
  border-radius:10px; padding:.6rem .7rem; margin-bottom:.6rem; transition:box-shadow .2s; }
.news-item:hover{ box-shadow:0 6px 16px rgba(11,90,174,.12); }
.news-item .ph{ width:84px; height:60px; flex:0 0 auto; border-radius:7px; background:var(--sky-lt); background-size:cover; background-position:center; }
.news-item h4{ font-size:.92rem; font-weight:600; color:var(--blue-d); margin:0; }
.news-item .date{ font-size:.74rem; color:var(--muted); }

/* ---- portal teaser (integration → tour.ltat.org) ---- */
.portal-band{ border-radius:var(--radius); background:linear-gradient(110deg,var(--blue-d),var(--blue));
  color:#fff; padding:1.3rem 1.5rem; }
.portal-band .eyebrow{ color:var(--gold); }
.portal-band h2{ color:#fff; font-weight:800; font-size:1.3rem; margin:.1rem 0 0; }
.portal-band .btn-gold{ background:var(--gold); color:var(--blue-d); font-weight:700; border:none; }
.portal-band .btn-gold:hover{ background:var(--gold-d); }

/* ---- footer ---- */
footer.site-footer{ background:var(--blue-dd); color:#9fc0e2; }
footer.site-footer a{ color:#cfe2f7; }
footer.site-footer a:hover{ color:#fff; }
footer.site-footer .ft-h{ color:#fff; text-transform:uppercase; letter-spacing:.1em; font-size:.74rem; font-weight:700; }

/* buttons */
.btn-blue{ background:var(--blue); border-color:var(--blue); color:#fff; }
.btn-blue:hover{ background:var(--blue-d); border-color:var(--blue-d); color:#fff; }
.text-bg-success{ background-color:var(--blue)!important; color:#fff!important; } /* success = blue, never green */

/* slim inner-page hero (other pages) */
.page-hero{ background:linear-gradient(135deg,var(--blue-d),var(--blue)); color:#fff; padding:1rem 0; }
.page-hero h1{ font-size:1.4rem; margin:0; }