/* 
   Regis Consultant (RGC) - Official Branding & Custom Stylesheet
   Theme: Crimson Burgundy & Deep Royal Plum with Champagne Amber Accents
   Matches Official Logo: RGC >> (#7A0C2E Burgundy -> #2D0A3E Deep Plum)
*/

/* ==========================================================================
   1. Typography & Thai Vowel Bug Fix (แก้สระจม / สระลอย / สระซ้อน / สระขาด)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,600;1,700&display=swap');

:root {
  /* Brand Color Tokens matching Official RGC Logo */
  --rgc-burgundy: #7A0C2E;
  --rgc-burgundy-dark: #58081F;
  --rgc-burgundy-light: #9F1239;
  --rgc-burgundy-vibrant: #BE123C;
  --rgc-plum: #2D0A3E;
  --rgc-plum-dark: #15041F;
  --rgc-plum-light: #44125B;
  --rgc-gold: #D97706;
  --rgc-gold-light: #F59E0B;
  --rgc-gold-champagne: #FDE68A;
  
  /* Backward-compatible alias tokens */
  --color-navy-900: #15041F;
  --color-navy-800: #250833;
  --color-navy-700: #3D0C4A;
  --color-gold-500: #D97706;
  --color-gold-600: #B45309;
  --color-gold-400: #F59E0B;
}

/* Base Thai Typography Reset */
html, body, input, select, textarea, button {
  font-family: 'Sarabun', 'Leelawadee UI', 'Tahoma', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #1e293b;
  background-color: #faf7f8;
  overflow-x: hidden;
  
  /* OpenType Glyph Shaping: fixes vowel stacking (สระบน/สระล่าง/วรรณยุกต์) */
  font-feature-settings: "liga" 1, "kern" 1, "calt" 1, "ccmp" 1, "mark" 1, "mkmk" 1;
  -webkit-font-feature-settings: "liga" 1, "kern" 1, "calt" 1, "ccmp" 1, "mark" 1, "mkmk" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.72;
}

/* Critical Thai Vowel Fix: Prevent negative tracking which causes สระจม / ซ้อนทับ */
body, h1, h2, h3, h4, h5, h6, p, span, a, li, button, input, select, textarea, label, div {
  letter-spacing: normal !important;
}

/* Fix Thai vowel clipping and floating on Headings (สระอุ สระอู ฐ ญ สระอิ สระอี วรรณยุกต์) */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Sarabun', 'Leelawadee UI', sans-serif;
  font-feature-settings: "liga" 1, "kern" 1, "calt" 1, "ccmp" 1, "mark" 1, "mkmk" 1;
  -webkit-font-feature-settings: "liga" 1, "kern" 1, "calt" 1, "ccmp" 1, "mark" 1, "mkmk" 1;
  text-rendering: optimizeLegibility;
  line-height: 1.42 !important;
  padding-top: 0.08em;
  padding-bottom: 0.06em;
}

p, span, a, li, label, td, th {
  font-feature-settings: "liga" 1, "kern" 1, "calt" 1, "ccmp" 1, "mark" 1, "mkmk" 1;
  -webkit-font-feature-settings: "liga" 1, "kern" 1, "calt" 1, "ccmp" 1, "mark" 1, "mkmk" 1;
  line-height: 1.72;
}

/* ==========================================================================
   2. Brand Gradients & Visual Utilities (Matching RGC Logo)
   ========================================================================== */

/* Official Logo Gradient: Deep Plum -> Royal Violet -> Crimson Burgundy */
.bg-brand-gradient,
.bg-navy-gradient {
  background: linear-gradient(135deg, #15041F 0%, #2A083B 35%, #56092A 70%, #7A0C2E 100%) !important;
}

/* Subtle luxury card gradient */
.bg-brand-subtle {
  background: linear-gradient(135deg, rgba(122, 12, 46, 0.04) 0%, rgba(45, 10, 62, 0.02) 100%);
}

.bg-burgundy-soft {
  background-color: #fcf4f6;
}

/* Glowing text gradients */
.text-brand-gradient {
  background: linear-gradient(135deg, #7A0C2E 0%, #9F1239 50%, #BE123C 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gold-gradient {
  background: linear-gradient(135deg, #F59E0B 0%, #FDE68A 50%, #D97706 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-plum-gradient {
  background: linear-gradient(135deg, #44125B 0%, #7A0C2E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Border gradients */
.border-gold-gradient {
  border-image: linear-gradient(135deg, #F59E0B, #FDE68A, #D97706) 1;
}

.border-burgundy-soft {
  border-color: rgba(122, 12, 46, 0.15);
}

/* Direct Brand Utility Classes (Works consistently in front-end, admin, and fallback) */
.bg-brand-burgundy { background-color: var(--rgc-burgundy) !important; }
.bg-brand-burgundy-light { background-color: var(--rgc-burgundy-light) !important; }
.bg-brand-burgundy-dark { background-color: var(--rgc-burgundy-dark) !important; }
.text-brand-burgundy { color: var(--rgc-burgundy) !important; }
.border-brand-burgundy { border-color: var(--rgc-burgundy) !important; }

.bg-brand-plum { background-color: var(--rgc-plum) !important; }
.text-brand-plum { color: var(--rgc-plum) !important; }

.bg-brand-navy { background-color: var(--rgc-plum-dark) !important; }
.text-brand-navy { color: var(--rgc-plum-dark) !important; }

.bg-brand-gold { background-color: var(--rgc-gold-light) !important; }
.text-brand-gold { color: var(--rgc-gold) !important; }
.border-brand-gold { border-color: var(--rgc-gold-light) !important; }

/* ==========================================================================
   3. Buttons & Conversion Elements
   ========================================================================== */

/* Primary CTA Button: Champagne Amber / Gold (High Conversion contrast against Dark Plum) */
.btn-gold {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  color: #15041F;
  font-weight: 700;
  box-shadow: 0 4px 14px 0 rgba(217, 119, 6, 0.35);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(217, 119, 6, 0.5);
  background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
  color: #15041F;
}

.btn-gold:active {
  transform: translateY(0);
}

.btn-gold::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(60deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: rotate(30deg);
  animation: shine 4s infinite;
}

/* Secondary Button: Official RGC Burgundy Gradient */
.btn-burgundy {
  background: linear-gradient(135deg, #7A0C2E 0%, #58081F 100%);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 4px 14px 0 rgba(122, 12, 46, 0.35);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-burgundy:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(122, 12, 46, 0.5);
  background: linear-gradient(135deg, #9F1239 0%, #7A0C2E 100%);
  color: #ffffff;
}

@keyframes shine {
  0% { transform: translate(-100%, -100%) rotate(30deg); }
  20%, 100% { transform: translate(100%, 100%) rotate(30deg); }
}

/* ==========================================================================
   4. Cards & Interactive Hover
   ========================================================================== */
.card-hover {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 30px -10px rgba(45, 10, 62, 0.12);
  border-color: rgba(122, 12, 46, 0.35);
}

/* Floating animation */
@keyframes floatSlow {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

.animate-float {
  animation: floatSlow 4s ease-in-out infinite;
}

/* ==========================================================================
   5. Mobile Sticky CTA Bar
   ========================================================================== */
/* The bar height is pinned to --cta-bar-h so the body padding below can clear it
   exactly. Labels must never wrap: a wrapped label grew the bar past the body's
   compensating padding and permanently hid the bottom of every page on phones
   narrower than ~375px. */
.sticky-cta-bar {
  --cta-bar-h: 60px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  box-sizing: border-box;
  height: calc(var(--cta-bar-h) + env(safe-area-inset-bottom, 0px));
  background: rgba(21, 4, 31, 0.96);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(245, 158, 11, 0.3);
  padding: 8px 12px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -4px 20px rgba(0,0,0,0.35);
  display: flex;
  gap: 8px;
  align-items: stretch;
}

/* Equal-width, equal-height, single-line buttons regardless of label length. */
.sticky-cta-bar > a {
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.sticky-cta-bar > a > svg {
  flex: 0 0 auto;
}

/* Narrow phones cannot fit icon + Thai label on one line, so drop the icons
   and tighten the type instead of letting the text wrap. */
@media (max-width: 389px) {
  .sticky-cta-bar > a {
    font-size: 11px;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
  .sticky-cta-bar > a > svg {
    display: none;
  }
}

@media (max-width: 767px) {
  body {
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (min-width: 768px) {
  .sticky-cta-bar {
    display: none;
  }
}

/* ==========================================================================
   6. Form & Inputs
   ========================================================================== */
.form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid #cbd5e1;
  background-color: #ffffff;
  font-size: 1rem; /* 16px prevents iOS Safari auto-zoom */
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input:focus {
  outline: none;
  border-color: #7A0C2E;
  box-shadow: 0 0 0 3px rgba(122, 12, 46, 0.18);
}

/* Long Thai option labels are wider than a phone, and a native select hard-cuts
   the text under its own chevron. Reserve room for the chevron and let the
   overflow ellipsize instead - the full label is still readable once opened.
   The 16px font size stays: anything smaller makes iOS Safari zoom on focus. */
select.form-input {
  padding-right: 2.25rem;
  text-overflow: ellipsis;
}

/* Slugs and URLs in the admin tables have no spaces to break on, so they push
   their cell wider than the viewport. Allow mid-string wrapping. */
.break-anywhere,
.admin-table td a,
.admin-table td code {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ==========================================================================
   6b. Touch target sizing
   ========================================================================== */
/* Several small links (the top-bar phone/WhatsApp/LINE icons, card "read more"
   links, compact quote buttons) render well under the 44px minimum touch size.
   Grow the *hit area* with a centred pseudo-element so the visual design and
   surrounding layout stay exactly as designed. */
.tap-safe {
  position: relative;
}

.tap-safe::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  min-width: 44px;
  min-height: 44px;
}

/* Pointer devices do not need the enlarged region, and it can shadow adjacent
   controls in dense desktop layouts. */
@media (hover: hover) and (pointer: fine) {
  .tap-safe::after {
    display: none;
  }
}

/* Fallback Prose Formatting for Knowledge & Articles */
.prose h2 { font-size: 1.5rem; font-weight: 700; margin-top: 1.5rem; margin-bottom: 0.75rem; color: #0f172a; line-height: 1.4 !important; }
.prose h3 { font-size: 1.25rem; font-weight: 600; margin-top: 1.25rem; margin-bottom: 0.5rem; color: #1e293b; line-height: 1.4 !important; }
.prose p { margin-bottom: 1rem; line-height: 1.75; color: #334155; }
.prose ul { list-style-type: disc; margin-left: 1.25rem; margin-bottom: 1rem; }
.prose ol { list-style-type: decimal; margin-left: 1.25rem; margin-bottom: 1rem; }
.prose li { margin-bottom: 0.35rem; color: #334155; }
.prose strong { color: #0f172a; font-weight: 700; }

/* Toast Notifications */
#toast {
  visibility: hidden;
  min-width: 280px;
  background-color: #15041F;
  color: #fff;
  text-align: center;
  border-radius: 8px;
  padding: 16px 20px;
  position: fixed;
  z-index: 9999;
  bottom: 80px;
  right: 24px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.4);
  border-left: 4px solid #F59E0B;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.3s ease;
}

#toast.show {
  visibility: visible;
  transform: translateY(0);
  opacity: 1;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #7A0C2E;
}

/* ---------------------------------------------------------------------------
   Anchor targets under the sticky header
   ---------------------------------------------------------------------------
   The header is fixed, so a plain #anchor jump parks the target underneath it.
   scroll-margin-top reserves the header height for every in-page CTA that
   points at #lead-form. */
#lead-form,
.scroll-anchor-offset,
[id]:target {
  scroll-margin-top: 96px;
}

/* ---------------------------------------------------------------------------
   Lead form success container (.returnmessage)
   ---------------------------------------------------------------------------
   Rendered [hidden] inside every lead form and unhidden by main.js only after
   the submission is accepted. The GTM "EC Contact Form" tag watches this
   selector with an Element Visibility trigger, so it must be genuinely
   invisible until then - display:none, not opacity. */
.returnmessage[hidden] {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   Layout stability (CLS)
   ---------------------------------------------------------------------------
   Images carry width/height attributes, which fixes their own aspect ratio,
   but the boxes that load asynchronously still need reserved space. Without
   these the map iframe, the toast and the sticky CTA bar each shifted the page
   on arrival - the site measured CLS 0.226 on mobile and 0.383 on desktop. */
iframe[loading="lazy"] {
  border: 0;
  background-color: #f1f5f9;
}