/*
Theme Name: CabaretGlow Lite
Theme URI: https://example.com/cabaretglow-lite
Author: Your Studio
Author URI: https://example.com
Description: ธีม WordPress สไตล์ dark cabaret/nightlife ได้แรงบันดาลใจจากความรู้สึกของธีมกลุ่ม dark-futuristic (เช่น Neom) ผสมกับบรรยากาศเวทีคาบาเรต์ - ม่านกำมะหยี่, สปอตไลท์สีทอง/แดง, ตัวอักษรแบบป้ายไฟ เขียนขึ้นใหม่ทั้งหมดให้เบา ไม่มี jQuery ไม่มี page builder บังคับ พร้อม custom post type สำหรับรายการโชว์ และ Schema.org สำหรับ Event/TouristAttraction ออกแบบมาให้ใช้กับเว็บจองโชว์คาบาเรต์ในไทยโดยเฉพาะ
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cabaretglow-lite
Tags: dark, entertainment, one-column, two-columns, custom-logo, custom-menu, featured-images, translation-ready, block-styles

CabaretGlow Lite is distributed under the terms of the GNU GPL v2 or later.
*/

/* =========================================================
   1. DESIGN TOKENS - cabaret stage palette (distinct from tech-blue)
   ========================================================= */
:root{
  /* Colors: deep stage black + velvet burgundy + gold spotlight + magenta neon */
  --cg-bg: #0E0608;
  --cg-bg-soft: #160A0D;
  --cg-surface: #1B0F12;
  --cg-surface-border: rgba(255,255,255,0.09);
  --cg-text: #F3E9DC;
  --cg-text-muted: #B79C8C;
  --cg-gold: #D9A441;
  --cg-magenta: #E23E8C;
  --cg-velvet: #6E0F1F;
  --cg-gradient: linear-gradient(120deg, var(--cg-gold), var(--cg-magenta));
  --cg-gradient-soft: linear-gradient(180deg, rgba(217,164,65,0.18), rgba(226,62,140,0.06));

  /* Type: a display face with a hint of showbill/marquee character */
  --cg-font-display: "Bricolage Grotesque", "Playfair Display", Georgia, serif;
  --cg-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --cg-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --cg-container: 1180px;
  --cg-radius: 14px;
  --cg-radius-sm: 8px;
  --cg-space: 1.25rem;
}

/* Self-hosted display font - one weight, swap, falls back silently if missing */
@font-face{
  font-family:"Bricolage Grotesque";
  src:url("assets/fonts/bricolage-700.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

/* =========================================================
   2. RESET
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--cg-bg);
  color:var(--cg-text);
  font-family:var(--cg-font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--cg-gold); text-decoration:none; }
a:hover{ color:var(--cg-magenta); }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family:var(--cg-font-display);
  font-weight:700;
  line-height:1.15;
  margin:0 0 .6em;
  letter-spacing:-0.01em;
}
h1{ font-size:clamp(2.2rem,5vw,3.6rem); }
h2{ font-size:clamp(1.6rem,3.2vw,2.3rem); }
h3{ font-size:1.3rem; }
p{ margin:0 0 1.2em; color:var(--cg-text-muted); }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--cg-gold);
  outline-offset:3px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

/* =========================================================
   3. LAYOUT
   ========================================================= */
.cg-container{ max-width:var(--cg-container); margin:0 auto; padding:0 var(--cg-space); }
.cg-section{ padding:5rem 0; }
.cg-grid{ display:grid; gap:1.5rem; }
.cg-grid-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:860px){ .cg-grid-3{ grid-template-columns:1fr; } }

/* =========================================================
   4. HEADER / NAV
   ========================================================= */
.cg-header{
  position:sticky; top:0; z-index:50;
  background:rgba(14,6,8,0.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--cg-surface-border);
}
.cg-header-inner{ display:flex; align-items:center; justify-content:space-between; padding:0.9rem var(--cg-space); max-width:var(--cg-container); margin:0 auto; }
.cg-logo{ font-family:var(--cg-font-display); font-weight:700; font-size:1.3rem; background:var(--cg-gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.cg-nav ul{ display:flex; gap:1.7rem; }
.cg-nav a{ color:var(--cg-text-muted); font-size:0.93rem; }
.cg-nav a:hover, .cg-nav .current-menu-item > a{ color:var(--cg-text); }
.cg-header-actions{ display:flex; align-items:center; gap:1rem; }
.cg-menu-toggle{ display:none; background:none; border:1px solid var(--cg-surface-border); border-radius:var(--cg-radius-sm); color:var(--cg-text); padding:.4rem .6rem; cursor:pointer; }
@media (max-width:780px){
  .cg-nav{ display:none; width:100%; }
  .cg-nav.is-open{ display:block; }
  .cg-nav ul{ flex-direction:column; padding:1rem 0; gap:0.9rem; }
  .cg-menu-toggle{ display:inline-block; }
  .cg-header-inner{ flex-wrap:wrap; }
}

/* =========================================================
   5. HERO + SPOTLIGHT SIGNATURE (pure CSS, no images)
   ========================================================= */
.cg-hero{ position:relative; padding:6rem 0 0; overflow:hidden; text-align:center; }
.cg-hero-glow{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 40% 60% at 30% 0%, rgba(217,164,65,0.20), transparent 60%),
    radial-gradient(ellipse 40% 60% at 70% 0%, rgba(226,62,140,0.20), transparent 60%);
  pointer-events:none;
}
.cg-eyebrow{
  display:inline-block; font-family:var(--cg-font-mono); font-size:0.78rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--cg-gold); border:1px solid rgba(217,164,65,0.4);
  padding:.35rem .8rem; border-radius:999px; margin-bottom:1.4rem;
}
.cg-hero p.lead{ max-width:640px; margin:0 auto 2rem; font-size:1.1rem; }
.cg-cta-row{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:3rem; }
.cg-btn{
  display:inline-block; padding:.85rem 1.7rem; border-radius:999px; font-weight:700; font-size:0.95rem;
  transition:transform .15s ease, box-shadow .15s ease;
}
.cg-btn-primary{ background:var(--cg-gradient); color:#160A0D; }
.cg-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(226,62,140,0.35); color:#160A0D; }
.cg-btn-ghost{ border:1px solid var(--cg-surface-border); color:var(--cg-text); }
.cg-btn-ghost:hover{ border-color:var(--cg-gold); color:var(--cg-gold); }

/* Signature: a row of "spotlight" beams sweeping like stage lights, CSS only */
.cg-spotlights{ position:relative; height:120px; margin-top:1rem; overflow:hidden; }
.cg-spotlights i{
  position:absolute; bottom:0; width:2px; height:100%;
  background:linear-gradient(180deg, transparent, rgba(217,164,65,0.55));
  transform-origin:bottom center;
  animation:cg-sweep 6s ease-in-out infinite;
  filter:blur(1px);
}
.cg-spotlights i:nth-child(1){ left:20%; animation-delay:0s; background:linear-gradient(180deg, transparent, rgba(226,62,140,0.5)); }
.cg-spotlights i:nth-child(2){ left:40%; animation-delay:1.3s; }
.cg-spotlights i:nth-child(3){ left:60%; animation-delay:2.6s; background:linear-gradient(180deg, transparent, rgba(226,62,140,0.5)); }
.cg-spotlights i:nth-child(4){ left:80%; animation-delay:3.9s; }
@keyframes cg-sweep{
  0%,100%{ transform:rotate(-18deg) scaleY(0.85); opacity:0.5; }
  50%{ transform:rotate(18deg) scaleY(1); opacity:1; }
}

/* =========================================================
   6. CARDS / SHOW GRID
   ========================================================= */
.cg-card{
  background:var(--cg-surface); border:1px solid var(--cg-surface-border); border-radius:var(--cg-radius);
  overflow:hidden; height:100%; display:flex; flex-direction:column;
}
.cg-card img{ aspect-ratio:4/3; object-fit:cover; }
.cg-card-body{ padding:1.5rem; flex:1; display:flex; flex-direction:column; }
.cg-card .cg-icon{
  width:42px; height:42px; border-radius:10px; margin-bottom:1rem;
  background:var(--cg-gradient-soft); display:flex; align-items:center; justify-content:center; color:var(--cg-gold);
}
.cg-card h3{ margin-bottom:.4rem; }
.cg-tag{ display:inline-block; font-family:var(--cg-font-mono); font-size:0.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--cg-magenta); margin-bottom:.6rem; }
.cg-price{ font-family:var(--cg-font-display); color:var(--cg-gold); font-size:1.1rem; margin:.6rem 0; }

/* Section heading system - glam uppercase display, matches the billboard
   typography used across Tiffany/Alcazar/Calypso's own sites */
.cg-section > .cg-container > h2{
  text-transform:uppercase;
  letter-spacing:.03em;
  font-size:clamp(1.5rem,2.6vw,2rem);
  position:relative;
  padding-bottom:.7rem;
}
.cg-section > .cg-container > h2::after{
  content:""; position:absolute; left:0; bottom:0; width:64px; height:3px;
  background:var(--cg-gradient); border-radius:3px;
}
.cg-section > .cg-container > h2 + p{ max-width:680px; }
.cg-subhead{ margin-top:2.4rem; }

/* =========================================================
   6b. CITY SLIDER - native scroll-snap, no JS libraries needed
   ========================================================= */
.cg-slider-wrap{ position:relative; margin-top:1.5rem; }
.cg-slider{
  display:flex; gap:1.1rem; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:1rem; scrollbar-width:thin; scrollbar-color:var(--cg-gold) transparent;
}
.cg-slider::-webkit-scrollbar{ height:6px; }
.cg-slider::-webkit-scrollbar-thumb{ background:var(--cg-gold); border-radius:6px; }
.cg-slide{
  flex:0 0 280px; scroll-snap-align:start; border-radius:var(--cg-radius);
  overflow:hidden; background:var(--cg-surface); border:1px solid var(--cg-surface-border);
}
.cg-slide-media{
  aspect-ratio:3/4; background:var(--cg-gradient-soft); display:flex; align-items:flex-end;
  padding:1rem; position:relative;
}
.cg-slide-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cg-slide-media span{
  position:relative; z-index:1; font-family:var(--cg-font-display); text-transform:uppercase;
  font-size:1.05rem; color:var(--cg-text); text-shadow:0 2px 10px rgba(0,0,0,.6);
}
.cg-slide-body{ padding:1rem 1.1rem 1.3rem; }
.cg-slide-body h3{ font-size:1.05rem; margin-bottom:.3rem; }
.cg-slide-body p{ font-size:.88rem; margin-bottom:.8rem; }
.cg-slider-controls{ display:flex; gap:.6rem; justify-content:flex-end; margin-top:.6rem; }
.cg-slider-btn{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--cg-surface-border);
  background:var(--cg-surface); color:var(--cg-text); cursor:pointer; font-size:1rem;
}
.cg-slider-btn:hover{ border-color:var(--cg-gold); color:var(--cg-gold); }

/* =========================================================
   6c. COMPARISON TABLE
   ========================================================= */
.cg-table-wrap{ overflow-x:auto; margin-top:1.5rem; }
.cg-table{ width:100%; border-collapse:collapse; min-width:640px; }
.cg-table th, .cg-table td{ padding:.9rem 1rem; text-align:left; border-bottom:1px solid var(--cg-surface-border); font-size:.92rem; }
.cg-table th{ font-family:var(--cg-font-display); text-transform:uppercase; letter-spacing:.03em; font-size:.8rem; color:var(--cg-gold); }
.cg-table tr:hover td{ background:rgba(217,164,65,0.05); }

/* =========================================================
   6d. FAQ ACCORDION - native <details>, zero JS
   ========================================================= */
.cg-faq{ max-width:820px; margin-top:1.5rem; }
.cg-faq details{
  border-bottom:1px solid var(--cg-surface-border); padding:1.1rem 0;
}
.cg-faq summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center;
  font-family:var(--cg-font-display); font-size:1.05rem; color:var(--cg-text);
}
.cg-faq summary::-webkit-details-marker{ display:none; }
.cg-faq summary::after{ content:"+"; font-size:1.4rem; color:var(--cg-gold); margin-left:1rem; flex-shrink:0; }
.cg-faq details[open] summary::after{ content:"–"; }
.cg-faq details p{ margin-top:.8rem; }

/* Post list / blog */
.cg-post{ border-bottom:1px solid var(--cg-surface-border); padding:2rem 0; }
.cg-post h2 a{ color:var(--cg-text); }
.cg-post .cg-meta{ font-family:var(--cg-font-mono); font-size:0.8rem; color:var(--cg-text-muted); margin-bottom:.6rem; }
.cg-post img{ border-radius:var(--cg-radius); margin-bottom:1rem; }

/* =========================================================
   7. FOOTER
   ========================================================= */
.cg-footer{ border-top:1px solid var(--cg-surface-border); padding:3rem 0; margin-top:3rem; }
.cg-footer-inner{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:0.9rem; color:var(--cg-text-muted); }
.cg-footer a{ color:var(--cg-text-muted); }
.cg-footer a:hover{ color:var(--cg-gold); }

.screen-reader-text{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}