/*
Theme Name: Flatsome Child
Description: TKB247OFC child theme - dark cyan-blue palette
Author: TKB247
Template: flatsome
Version: 1.0
*/

/* ============================================================
   FONT — Sarabun for Thai
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@400;500;700&display=swap');

body, h1, h2, h3, h4, h5, h6, p, a, button, input, select, textarea,
.entry-title, .page-title, .wp-block-heading {
  font-family: 'Sarabun', 'Helvetica Neue', system-ui, -apple-system, sans-serif;
}

/* ============================================================
   ROOT — DARK CYAN-BLUE MECHA PALETTE
   ============================================================ */
:root {
  --tkb-bg-deep: #060e1f;
  --tkb-bg-mid:  #0a1830;
  --tkb-bg-card: rgba(11, 28, 60, 0.78);
  --tkb-accent:        #00e5ff;
  --tkb-accent-2:      #1e88ff;
  --tkb-accent-glow:   rgba(0, 229, 255, 0.55);
  --tkb-text-primary:  #e8f4ff;
  --tkb-text-muted:    #9bb6d8;
  --tkb-border:        rgba(0, 229, 255, 0.32);
  --tkb-pink-accent:   #ff4d8d;

  --fs-color-primary: #1e88ff;
  --fs-color-secondary: #060e1f;
  --fs-experimental-link-color: #00e5ff;
  --fs-experimental-link-color-hover: #6cf3ff;
  --primary-color: #1e88ff;
}

/* ============================================================
   GLOBAL BG
   ============================================================ */
html, body {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(0, 229, 255, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(255, 77, 141, 0.06) 0%, transparent 50%),
    linear-gradient(180deg, #060e1f 0%, #020714 100%);
  background-attachment: fixed;
  color: var(--tkb-text-primary);
}
#wrapper, #main { background: transparent; }

/* ============================================================
   TYPOGRAPHY GLOBAL
   ============================================================ */
body, p, .wp-block-paragraph { color: var(--tkb-text-primary); line-height: 1.75; }
h1, h2, h3, h4, h5, h6 { color: #ffffff; font-weight: 700; letter-spacing: -0.01em; }
.wp-block-heading { color: #ffffff; }
a { color: var(--tkb-accent); transition: color .2s ease; }
a:hover { color: #6cf3ff; }
.tkb-brand { color: var(--tkb-accent); font-weight: 700; text-shadow: 0 0 8px var(--tkb-accent-glow); }

/* ============================================================
   HEADER
   ============================================================ */
.header-main {
  background: linear-gradient(180deg, #0d2150 0%, #07172d 60%, #060e1f 100%) !important;
  border-bottom: 1px solid rgba(0, 229, 255, 0.18);
}
.header-bottom, .header-bg-color, .header-wrapper {
  background-color: #060e1f !important;
}
.header-bottom-nav > li > a {
  color: #d6ecff !important;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.header-bottom-nav > li.active > a,
.header-bottom-nav > li > a:hover {
  color: var(--tkb-accent) !important;
  text-shadow: 0 0 8px var(--tkb-accent-glow);
}
.header-button .button.primary {
  background: linear-gradient(135deg, var(--tkb-accent-2), var(--tkb-accent)) !important;
  border: none !important;
  color: #001225 !important;
  font-weight: 700;
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.4);
}
.header-button .button.is-outline {
  border-color: var(--tkb-accent) !important;
  color: var(--tkb-accent) !important;
}

/* ============================================================
   GUTENBERG BLOCK STYLING
   ============================================================ */
.wp-block-cover, .wp-block-cover.alignfull { border-radius: 0; overflow: hidden; position: relative; }
.wp-block-cover::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.05) 0%, transparent 60%);
  pointer-events: none; z-index: 1;
}
.wp-block-cover .wp-block-cover__inner-container { position: relative; z-index: 2; }
.wp-block-cover h1.wp-block-heading,
.wp-block-cover h2.wp-block-heading {
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.7), 0 0 12px rgba(0, 229, 255, 0.25);
}

.wp-block-button .wp-block-button__link {
  border-radius: 99px !important;
  background: linear-gradient(135deg, var(--tkb-accent-2) 0%, var(--tkb-accent) 100%) !important;
  color: #001225 !important;
  font-weight: 700 !important;
  padding: 14px 32px !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(0, 60, 160, 0.4), 0 0 14px rgba(0, 229, 255, 0.25);
  transition: transform .25s ease, box-shadow .25s ease;
}
.wp-block-button .wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 229, 255, 0.55), 0 0 24px rgba(0, 229, 255, 0.45);
}
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  border: 2px solid var(--tkb-accent) !important;
  color: var(--tkb-accent) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: rgba(0, 229, 255, 0.1) !important;
  color: #6cf3ff !important;
}

.wp-block-group, .wp-block-columns, .wp-block-column { color: var(--tkb-text-primary); }

.wp-block-group.has-background, .wp-block-column.has-background {
  background: var(--tkb-bg-card) !important;
  border: 1px solid var(--tkb-border);
  border-radius: 18px;
  padding: 28px !important;
  box-shadow: 0 4px 18px rgba(0, 30, 70, 0.4), inset 0 0 16px rgba(0, 24, 60, 0.4);
  transition: transform .25s ease, box-shadow .25s ease;
}
.wp-block-group.has-background:hover, .wp-block-column.has-background:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 229, 255, 0.4), inset 0 0 16px rgba(0, 24, 60, 0.4);
}

.wp-block-image img,
.wp-block-cover .wp-block-cover__image-background {
  border-radius: 14px;
}
.wp-block-image figure.is-style-rounded img { border-radius: 50%; }

.wp-block-list li, ul li, ol li { color: var(--tkb-text-primary); line-height: 1.85; }

.wp-block-separator {
  border: none !important;
  border-top: 1px solid var(--tkb-border) !important;
  opacity: 0.6;
  margin: 32px auto;
}

/* ============================================================
   FLATSOME BUTTONS
   ============================================================ */
.button.primary {
  background: linear-gradient(135deg, var(--tkb-accent-2), var(--tkb-accent));
  border: none;
  color: #001225;
}
.button.primary:hover {
  background: linear-gradient(135deg, #6cf3ff, var(--tkb-accent-2));
  color: #001225;
}
.button.is-outline { border-color: var(--tkb-accent); color: var(--tkb-accent); }
.button.success { background: linear-gradient(135deg, #00c853, #00e676); border: none; }

/* ============================================================
   GENERIC TKB CARD
   ============================================================ */
.tkb-card {
  background: var(--tkb-bg-card);
  border: 1px solid var(--tkb-border);
  border-radius: 18px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 4px 18px rgba(0, 30, 70, 0.32);
}
.tkb-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0, 229, 255, 0.4), 0 0 28px rgba(0, 229, 255, 0.25);
}
.tkb-card img { width: 100%; height: auto; display: block; transition: transform .35s ease; }
.tkb-card:hover img { transform: scale(1.04); }

/* ============================================================
   MARQUEE
   ============================================================ */
.gxt1 {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px; margin: 14px 0; border-radius: 14px;
  background: linear-gradient(90deg, rgba(13, 33, 80, 0.92) 0%, rgba(6, 14, 31, 0.96) 100%);
  border: 1px solid var(--tkb-border);
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.18), inset 0 0 12px rgba(0, 24, 60, 0.45);
  overflow: hidden;
  color: var(--tkb-text-primary);
}
.gxt1__label {
  flex-shrink: 0; font-weight: 700;
  color: var(--tkb-accent);
  text-shadow: 0 0 8px var(--tkb-accent-glow);
  letter-spacing: 0.5px;
}
.gxt1__track { display: flex; gap: 60px; white-space: nowrap; animation: gxt1-scroll 28s linear infinite; }
.gxt1__item { color: #d6ecff; font-weight: 600; }
@keyframes gxt1-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ============================================================
   FOOTER
   ============================================================ */
.footer-1, .footer-2 {
  background: linear-gradient(180deg, #060e1f 0%, #020714 100%) !important;
  color: var(--tkb-text-primary);
}
.absolute-footer { background: #020714 !important; color: #6f8cad; }
.footer-1 a, .footer-2 a { color: var(--tkb-accent); }

/* ============================================================
   STICKY BOTTOM BAR (mobile)
   ============================================================ */
#tkb-footer-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
  background: linear-gradient(180deg, #07172d 0%, #020714 100%);
  border-top: 2px solid var(--tkb-accent);
  box-shadow: 0 -4px 22px rgba(0, 229, 255, 0.28);
  display: flex; justify-content: space-around; align-items: stretch;
  padding: 6px 4px;
}
#tkb-footer-bar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 4px 2px;
  color: #d6ecff; text-decoration: none; font-size: 11px; font-weight: 700;
  transition: color .2s ease;
}
#tkb-footer-bar a:hover, #tkb-footer-bar a.active { color: var(--tkb-accent); }
#tkb-footer-bar a i { font-size: 22px; margin-bottom: 2px; }
#tkb-footer-bar a.is-center { padding-top: 36px; position: relative; }
#tkb-footer-bar a.is-center .is-center__btn {
  position: absolute; top: -22px; width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tkb-accent-2), var(--tkb-accent));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 18px var(--tkb-accent-glow);
  color: #001225; font-size: 24px;
}
body { padding-bottom: 70px; }
@media (min-width: 850px) {
  #tkb-footer-bar { display: none; }
  body { padding-bottom: 0; }
}

/* ============================================================
   FORMS
   ============================================================ */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="search"], input[type="number"], input[type="password"], textarea, select {
  background: rgba(6, 14, 31, 0.6);
  border: 1px solid var(--tkb-border);
  color: var(--tkb-text-primary);
  border-radius: 10px;
  padding: 10px 14px;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--tkb-accent) !important;
  box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.18);
}
input::placeholder, textarea::placeholder { color: #6f8cad; }

.wpcf7-form input, .wpcf7-form textarea, .wpcf7-form select { width: 100%; }
.wpcf7-submit {
  background: linear-gradient(135deg, var(--tkb-accent-2), var(--tkb-accent)) !important;
  color: #001225 !important;
  border: none !important;
  font-weight: 700 !important;
  padding: 12px 28px !important;
  border-radius: 99px !important;
  cursor: pointer;
}

/* ============================================================
   UTILITIES
   ============================================================ */
.tkb-glow { text-shadow: 0 0 12px var(--tkb-accent-glow); }
.tkb-card-pink {
  background: linear-gradient(135deg, rgba(255, 77, 141, 0.12), rgba(0, 229, 255, 0.08));
  border: 1px solid rgba(255, 77, 141, 0.3);
}

/* Cover safety */
.wp-block-cover.alignfull { min-height: 380px; }
.wp-block-cover img.wp-block-cover__image-background { object-fit: cover; object-position: center center; }

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 48em) {
  .gxt1 { font-size: 13px; padding: 8px 12px; }
  .wp-block-cover { min-height: 280px !important; }
  .wp-block-cover h1 { font-size: 30px !important; }
  .wp-block-cover h2 { font-size: 22px !important; }
}