@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Fraunces:opsz,ital,wght@9..144,0,500;9..144,1,400&display=swap');

/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme — Minimal
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

/* ── Design tokens ─────────────────────────── */
:root {
  --bg:        #F7F6F2;
  --surface:   #FFFFFF;
  --border:    #E4E2DC;
  --text:      #1C1B19;
  --muted:     #4F4C45;
  --muted2:    #4F4C45;

  /* Lightning Yellow CI (2026-08-29 rebrand) */
  --accent-50:  #FFFBEB;
  --accent-100: #FFF4C6;
  --accent-200: #FFE888;
  --accent-300: #FED64B;
  --accent-400: #FEC428;
  --accent:     #FEC428;

  /* Navy — text emphasis / hover state (yellow-on-yellow hover has poor contrast) */
  --navy-800:  #333393;
  --navy-900:  #33357C;
  --navy-950:  #1E1E48;
  --accent-dk: #333393;

  /* Dark-section tokens (hero, stats bar, CTA band) — navy instead of brown */
  --roast:    #1E1E48;
  --foam:     #FFFBEB;
  --amber-lt: #FED64B;

  --radius:       12px;
  --font:         'Noto Sans Thai', 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Fraunces', serif;

  /* Bright yellow --accent fails contrast as TEXT on light backgrounds —
     use --accent-text (navy) for links/labels/small text; keep --accent
     (yellow) for backgrounds, underlines, borders, icon fills. */
  --accent-text: var(--navy-800);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* ── Header: fix Blocksy customizer yellow → white ──────────
   Blocksy global.css sets:
   [data-header*="type-1"] .ct-header [data-row*="middle"] {
     background-color: var(--theme-palette-color-9);  (#ffc627)
   }
   We match that specificity and force white. */
[data-header] .ct-header [data-row*="middle"],
[data-header] [data-sticky] [data-row*="middle"] {
  background-color: #fff !important;
  background-image: none !important;
  border-bottom: 1px solid #E4E2DC !important;
  box-shadow: none !important;
}

/* ── Nav: HOME re-added 2026-08-29 per client redesign brief ──
   ul.menu is the actual class on Blocksy's desktop nav UL
   (not .ct-menu — that class does not exist on this theme version) */

/* ── Nav top-level links ── */
[data-header] .ct-header [data-row*="middle"] ul.menu > li > a.ct-menu-link,
[data-header] .ct-header [data-row*="middle"] ul.menu > li > .ct-sub-menu-parent > a.ct-menu-link {
  color: var(--muted) !important;
  font-family: var(--font) !important;
  font-size: .8rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  text-decoration: underline !important;
  text-decoration-color: transparent !important;
  text-underline-offset: 5px !important;
  text-decoration-thickness: 1.5px !important;
  transition: color .15s, text-decoration-color .15s !important;
  background: transparent !important;
}

/* hover, active, focus — lock color, no white/yellow bleed from Blocksy */
[data-header] .ct-header [data-row*="middle"] ul.menu > li:hover > a.ct-menu-link,
[data-header] .ct-header [data-row*="middle"] ul.menu > li:hover > .ct-sub-menu-parent > a.ct-menu-link,
[data-header] .ct-header [data-row*="middle"] ul.menu > li > a.ct-menu-link:hover,
[data-header] .ct-header [data-row*="middle"] ul.menu > li > a.ct-menu-link:active,
[data-header] .ct-header [data-row*="middle"] ul.menu > li > a.ct-menu-link:focus,
[data-header] .ct-header [data-row*="middle"] ul.menu > li > .ct-sub-menu-parent > a.ct-menu-link:hover,
[data-header] .ct-header [data-row*="middle"] ul.menu > li > .ct-sub-menu-parent > a.ct-menu-link:active,
[data-header] .ct-header [data-row*="middle"] ul.menu > li > .ct-sub-menu-parent > a.ct-menu-link:focus {
  color: var(--text) !important;
  text-decoration-color: var(--accent) !important;
  background: transparent !important;
}

/* current page indicator */
[data-header] .ct-header [data-row*="middle"] ul.menu > li.current-menu-item > a.ct-menu-link,
[data-header] .ct-header [data-row*="middle"] ul.menu > li.current-menu-ancestor > a.ct-menu-link,
[data-header] .ct-header [data-row*="middle"] ul.menu > li.current-page-ancestor > .ct-sub-menu-parent > a.ct-menu-link {
  color: var(--text) !important;
  text-decoration-color: var(--accent) !important;
  background: transparent !important;
}

/* sticky nav — same color lock (palette-5 = #F2F2F2 would go near-white otherwise) */
[data-header] [data-sticky] [data-row*="middle"] ul.menu > li > a.ct-menu-link,
[data-header] [data-sticky] [data-row*="middle"] ul.menu > li > .ct-sub-menu-parent > a.ct-menu-link {
  color: var(--muted) !important;
}
[data-header] [data-sticky] [data-row*="middle"] ul.menu > li:hover > a.ct-menu-link,
[data-header] [data-sticky] [data-row*="middle"] ul.menu > li:hover > .ct-sub-menu-parent > a.ct-menu-link,
[data-header] [data-sticky] [data-row*="middle"] ul.menu > li > a.ct-menu-link:active,
[data-header] [data-sticky] [data-row*="middle"] ul.menu > li > a.ct-menu-link:focus {
  color: var(--text) !important;
  text-decoration-color: var(--accent) !important;
  background: transparent !important;
}

/* Homepage transparent-header variant renders the nav a notch smaller than the
   inner pages (brief round-2 p.1). Force one size everywhere, transparent or not. */
[data-header] [data-row*="middle"] ul.menu > li > a.ct-menu-link,
[data-header] [data-row*="middle"] ul.menu > li > .ct-sub-menu-parent > a.ct-menu-link,
[data-header] header[data-transparent] [data-row*="middle"] ul.menu > li > a.ct-menu-link,
[data-header] [data-transparent-header] [data-row*="middle"] ul.menu > li > a.ct-menu-link {
  font-size: .82rem !important;
  line-height: 1.4 !important;
}

/* ── Dropdown ── */
[class*="animated-submenu"] > .sub-menu {
  --dropdown-background-color: #fff;
  background-color: #fff !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  border-radius: 4px !important;
  box-shadow: 0 8px 24px rgba(28,27,25,.08) !important;
  padding: .35rem !important;
  min-width: 180px !important;
}

.ct-header .sub-menu a.ct-menu-link,
.ct-header .sub-menu li a {
  color: var(--text) !important;
  background: transparent !important;
  font-family: var(--font) !important;
  font-size: .9rem !important;
  font-weight: 400 !important;
  padding: .55rem .85rem !important;
  border-radius: 3px !important;
  display: block !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  transition: background .12s, color .12s !important;
}
.ct-header .sub-menu a.ct-menu-link:hover,
.ct-header .sub-menu li a:hover {
  background: var(--bg) !important;
  color: var(--accent-text) !important;
}

/* ─────────────────────────────────────────────
   MOBILE DRAWER — fix yellow Blocksy background
   ───────────────────────────────────────────── */
#offcanvas,
#offcanvas .ct-panel-inner,
.ct-drawer-canvas .ct-panel {
  background-color: #fff !important;
  background-image: none !important;
}

/* Mobile menu items */
.mobile-menu a.ct-menu-link,
.mobile-menu .ct-menu-link {
  color: var(--text) !important;
  font-family: var(--font) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  background: transparent !important;
}

.mobile-menu a.ct-menu-link:hover,
.mobile-menu a.ct-menu-link:active,
.mobile-menu li.current-menu-item > a.ct-menu-link,
.mobile-menu li.current-menu-ancestor > a.ct-menu-link {
  color: var(--accent-text) !important;
  background: transparent !important;
}

/* Mobile close button */
.ct-toggle-close svg { color: var(--text) !important; }

/* Mobile sub-menu */
.mobile-menu .sub-menu a.ct-menu-link {
  font-size: .95rem !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: .03em !important;
  color: var(--muted) !important;
  padding-left: 1.5rem !important;
}
.mobile-menu .sub-menu a.ct-menu-link:hover {
  color: var(--accent-text) !important;
}

/* ─────────────────────────────────────────────
   MOBILE SEARCH — fix flex-basis height bug
   flex-basis:220px becomes HEIGHT in column layout
   ───────────────────────────────────────────── */
@media (max-width: 600px) {
  .cal-search-wrap,
  .act-search-wrap {
    flex: 0 0 auto !important;
  }
}

/* ─────────────────────────────────────────────
   FOOTER LOGO — cap oversized mobile rendering
   (image ID 2694, wp-image-2694 is WP's stable class).
   NOTE: the "2025" text baked into the logo artwork itself
   is a client-asset problem, not fixable via CSS — flagged
   separately, needs a re-exported 2026 logo file.
   ───────────────────────────────────────────── */
@media (max-width: 600px) {
  img.wp-image-2694 {
    max-width: 160px !important;
    width: 160px !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
  }
}