/**
 * TB News — supplemental styles for effects theme.json can't express
 * (nav hover underline, card hover lift, header/footer polish, mobile nav).
 * Colours reference the theme.json preset CSS variables.
 */

:root {
  --tbnews-brown: var(--wp--preset--color--primary, #291806);
  --tbnews-brown-dark: var(--wp--preset--color--brown-dark, #241A04);
  --tbnews-gold: var(--wp--preset--color--gold, #ffd700);
  --tbnews-gold-soft: var(--wp--preset--color--gold-soft, #ffd57d);
  --tbnews-lavender: var(--wp--preset--color--lavender, #eaddff);
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ---------------------------------------------------------------------------
 * Header — dark brown gradient bar with gold nav-hover underline
 * ------------------------------------------------------------------------- */
.wp-block-template-part.tbnews-header,
.tbnews-header {
  background: linear-gradient(135deg, #241A04 0%, #2d1f05 100%);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

.tbnews-header .wp-block-navigation a,
.tbnews-header .wp-block-site-title a {
  color: var(--tbnews-lavender) !important;
  position: relative;
  text-decoration: none;
  transition: color 0.2s ease;
}

.tbnews-header .wp-block-navigation a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: var(--tbnews-gold);
  transition: width 0.25s ease;
}

.tbnews-header .wp-block-navigation a:hover,
.tbnews-header .wp-block-navigation a:focus {
  color: #ffffff !important;
}

.tbnews-header .wp-block-navigation a:hover::after,
.tbnews-header .wp-block-navigation a:focus::after {
  width: 100%;
}

.tbnews-header .wp-block-site-title a {
  filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.3));
}

/* Header: logo (left) | nav + search (grouped right, search after the menu) */
.tbnews-header__row {
  display: flex !important;
  align-items: center;
  justify-content: flex-end; /* pack nav + search to the right */
  gap: 0.85rem;
}
.tbnews-header__row > .tbnews-header__brand { margin-right: auto; } /* logo pinned left */
/* Nav is content-width (WP's is-content-justification-center would otherwise
   stretch it and shove the search icon into the far corner). */
.tbnews-header__row > .tbnews-nav { flex: 0 0 auto !important; }
.tbnews-nav .wp-block-navigation__container { gap: clamp(0.9rem, 2vw, 2rem); }

/* Search action button (right) */
.tbnews-search-btn {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--tbnews-lavender);
  background: rgba(255, 255, 255, 0.06);
  transition: background 0.2s ease, color 0.2s ease;
}
.tbnews-search-btn:hover { background: var(--tbnews-gold); color: var(--tbnews-brown); }

/* Tablet: logo + search stay on the top row, the 6-item nav wraps below
   (needs !important to beat the content-width base rule above). */
@media (min-width: 601px) and (max-width: 900px) {
  .tbnews-header__row { flex-wrap: wrap; }
  .tbnews-header__row > .tbnews-header__brand   { margin-right: auto; order: 1; }
  .tbnews-header__row > .tbnews-header__actions { order: 2; }
  .tbnews-header__row > .tbnews-nav             { order: 3; flex: 1 0 100% !important; justify-content: center; }
}

/* ---------------------------------------------------------------------------
 * Article / news cards — rounded, soft shadow, hover lift
 * ------------------------------------------------------------------------- */
.tbnews-card,
.wp-block-post.tbnews-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 24px -8px rgba(41, 24, 6, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tbnews-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px -8px rgba(41, 24, 6, 0.28);
}

.tbnews-card .wp-block-post-featured-image img {
  border-radius: 0;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
}

/* ---------------------------------------------------------------------------
 * Buttons — reinforce the pill shape + gold shimmer on primary CTAs
 * ------------------------------------------------------------------------- */
.wp-block-button__link {
  border-radius: 1000px !important;
  /* Explicit gold pill so a plain wp:button (e.g. the 404 "กลับหน้าหลัก")
     always renders the CTA even if the theme.json element style doesn't emit. */
  background-image: var(--wp--preset--gradient--cta-gold, linear-gradient(135deg, #FFD700 0%, #FFA500 100%));
  color: var(--wp--preset--color--primary, #291806) !important;
  font-weight: 600;
  padding: 0.7rem 1.7rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.wp-block-button__link:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px -4px rgba(255, 215, 0, 0.35);
}

/* Category / tag pills */
.wp-block-post-terms a,
.tbnews-pill {
  display: inline-block;
  padding: 0.15em 0.9em;
  border-radius: 1000px;
  background: var(--tbnews-gold-soft);
  color: var(--tbnews-brown);
  font-size: 0.82rem;
  text-decoration: none;
  line-height: 1.8;
}

/* ---------------------------------------------------------------------------
 * Footer — dark brown, lavender text, circular social icons
 * ------------------------------------------------------------------------- */
.tbnews-footer {
  background: var(--tbnews-brown-dark);
  color: var(--tbnews-lavender);
}

.tbnews-footer a { color: var(--tbnews-lavender); text-decoration: none; }
.tbnews-footer a:hover { color: var(--tbnews-gold); }

.tbnews-footer .wp-block-social-links .wp-social-link {
  background: #333333;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  color: #ffffff;
  /* <li> is display:block, so the smaller <a> sat top-left and the glyph read as
     off-centre (~2px up-left). Centre the anchor+icon inside the circle. */
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Hover → each icon takes on its own brand colour (icon stays white). */
.tbnews-footer .wp-block-social-links .wp-social-link {
  transition: background-color 0.2s ease, color 0.2s ease;
}
.tbnews-footer .wp-social-link:hover { color: #ffffff; }
.tbnews-footer .wp-social-link-facebook:hover  { background: #1877F2; }
.tbnews-footer .wp-social-link-instagram:hover { background: #E4405F; }
.tbnews-footer .wp-social-link-line:hover      { background: #06C755; }
.tbnews-footer .wp-social-link-youtube:hover   { background: #FF0000; }

.entry-content, .wp-block-post-content {
  font-size: 1.05rem;
  line-height: 1.8;
}

/* ---------------------------------------------------------------------------
 * Branding — hide the fallback site title once the logo image is present.
 * WordPress adds `.wp-custom-logo` to <body> when a custom logo is set.
 * ------------------------------------------------------------------------- */
/* Brand logo (theme asset). Cap height so the tall 2.8:1 mark fits the bar. */
.tbnews-header .tbnews-logo { display: inline-flex; align-items: center; }
.tbnews-header .tbnews-logo img {
  height: 46px;
  width: auto;
  max-width: 190px;
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.35));
}

/* Header sits flush against the hero (no block-gap strip between them). */
header.tbnews-header { margin-block: 0 !important; }

/* ---------------------------------------------------------------------------
 * Hero with naga mascots (pattern: tbnews/hero-news)
 * ------------------------------------------------------------------------- */
.tbnews-hero {
  /* Dark coffee-brown spotlight vignette (like the figma hero) that stays deep
     through the centre and fades to the cream page background at the edges. */
  background:
    radial-gradient(115% 108% at 50% 4%,
      #140b02 0%, #221304 22%, #3a2109 40%, #5c3416 56%,
      #8a5528 70%, #bd9668 84%, #e7dcc7 94%, #f4f1ea 100%);
  overflow: hidden;
  margin-block: 0 !important;
  /* figma: main px-8 → 100px → 230px. Symmetric padding = guaranteed equal
     left/right gaps for the card (robust vs alignfull/scrollbar centring). */
  padding-inline: 32px;
}

/* Wrapper that scopes the mascots to the card's box (figma: `relative` around
   the card, mascots absolute hanging off its edges via negative offsets). */
.tbnews-hero-inner {
  position: relative;
  /* Fills the hero's padded content box (= viewport − side padding), capped so
     the card never gets absurdly wide on ultra-wide screens. Centred. */
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-block: 3.25rem 3.75rem;
}

/* White card — figma SearchInterface root: fills the wrapper, sits at z-20. */
.tbnews-hero-card {
  position: relative;
  z-index: 20;
  width: 100%;
  /* Must be border-box: as a raw wp:html <div> it defaulted to content-box, so
     width:100% + padding overflowed the wrapper ~80px to the RIGHT — the cause
     of the card looking shifted-right / unequal gaps for many rounds. */
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid #F2DDB8;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 2rem 2.5rem 2.3rem;
  text-align: center;
}

/* Naga mascots — hidden by default; shown + sized per figma breakpoint below.
   Left head is z-30 (IN FRONT of the card); right tail is z-15 (BEHIND it). */
.tbnews-mascot {
  position: absolute;
  height: auto;
  pointer-events: none;
  display: none;
  animation: tbnews-float 3s ease-in-out infinite;
}
.tbnews-mascot--left  { z-index: 30; top: -32px; } /* head IN FRONT of the card */
.tbnews-mascot--right { z-index: 15; animation-delay: 1s; } /* tail BEHIND the card — card overlaps its base, tail emerges from the right edge */

@keyframes tbnews-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

.tbnews-eyebrow {
  display: inline-block;
  background: var(--tbnews-gold);
  color: var(--tbnews-brown);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 1px;
  padding: 5px 16px;
  border-radius: 1000px;
}

.tbnews-hero-title {
  margin: 0.8rem 0 0.55rem;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--tbnews-brown);
  text-wrap: balance;
}

.tbnews-hero-sub {
  margin: 0 auto 1.3rem;
  max-width: 46ch;
  color: #4a4650;
  font-size: 0.98rem;
}

.tbnews-hero-btn {
  display: inline-block;
  background: var(--tbnews-brown);
  color: var(--tbnews-gold-soft);
  padding: 0.8rem 2rem;
  border-radius: 1000px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.tbnews-hero-btn:hover {
  transform: translateY(-2px);
  background: #3a2510;
  color: #ffffff;
}

/* Card titles a touch smaller than the inline template value. */
.tbnews-card .wp-block-post-title { font-size: 1.1rem !important; line-height: 1.4; }

/* ---------------------------------------------------------------------------
 * Responsive — mascot sizing/positioning mirrors the figma breakpoints
 * (md 768 = left head; lg 1024 = + right tail; xl 1280 = full size).
 * ------------------------------------------------------------------------- */

/* md ≥768 (figma `md:`): LEFT head only — the right tail stays hidden until lg,
   exactly like figma (`hidden lg:block`). Card keeps the 32px side gaps. */
@media (min-width: 768px) {
  .tbnews-hero-inner { min-height: 360px; }
  .tbnews-mascot--left { display: block; width: 220px; left: -120px; }
}

/* lg ≥1024 (figma `lg:`): card gap grows to 100px/side; RIGHT tail appears. */
@media (min-width: 1024px) {
  .tbnews-hero { padding-inline: 100px; }
  .tbnews-hero-inner { min-height: 420px; }
  .tbnews-mascot--left  { width: 300px; left: -160px; }
  .tbnews-mascot--right { display: block; width: 220px; right: -120px; top: 40px; }
}

/* xl ≥1280 (figma `xl:`): card gap 230px/side. The card is still ~820px here,
   so keep the lg-size head (a full 400px would cover the long Thai heading);
   the tail grows to its figma size. */
@media (min-width: 1280px) {
  .tbnews-hero { padding-inline: 230px; }
  .tbnews-hero-inner { min-height: 460px; }
  .tbnews-mascot--left  { width: 300px; left: -160px; }
  .tbnews-mascot--right { width: 260px; right: -155px; top: 60px; }
}

/* ≥1600: card is now wide enough (≥1140px) for the full figma 400px head
   without it reaching the centred heading. */
@media (min-width: 1600px) {
  .tbnews-mascot--left { width: 400px; left: -200px; }
}

/* Header responsive. */
@media (max-width: 1023px) {
  .tbnews-header__row { gap: 0.75rem; }
  .tbnews-nav .wp-block-navigation__container { gap: clamp(0.7rem, 1.6vw, 1.2rem); }
}
@media (max-width: 900px) {
  .tbnews-header .wp-block-site-logo,
  .tbnews-header .wp-block-site-logo img { height: 40px; }
}

/* Mobile ≤640: mascots stay hidden (base rule), tighter card. */
@media (max-width: 640px) {
  .tbnews-hero-inner { padding-block: 2.25rem 2.75rem; }
  .tbnews-hero-card { padding: 1.6rem 1.25rem; border-radius: 14px; }
  .tbnews-hero-title { font-size: clamp(1.3rem, 6vw, 1.6rem); }
  .tbnews-card .wp-block-post-title { font-size: 1.05rem !important; }
}

/* ≤600: the nav collapses to a hamburger — put logo left, then search +
   hamburger grouped at the TOP-RIGHT (not centred). */
@media (max-width: 600px) {
  .tbnews-header__row {
    display: flex !important;
    align-items: center;
    gap: 0.6rem;
  }
  .tbnews-header__brand   { margin-right: auto; }  /* logo pinned left */
  .tbnews-header__actions { order: 2; display: flex; }  /* search */
  .tbnews-nav             { order: 3; }            /* hamburger rightmost */
}

@media (prefers-reduced-motion: reduce) {
  .tbnews-mascot { animation: none; }
}