/*
Theme Name: AndamanGo
Theme URI: https://andamangotravel.com
Description: AndamanGo Child Theme — Phuket & Phang Nga OTA Platform
Author: Knowage
Template: hello-elementor
Version: 1.0.0
*/

/* ============================================================
   Brand Tokens
   ============================================================ */
:root {
  /* Colors */
  --ag-teal:        #0AAEA0;
  --ag-dark:        #077A70;
  --ag-light:       #4ECDC4;
  --ag-text:        #1A2C2B;
  --ag-text-muted:  #5A7A79;
  --ag-bg:          #FFFFFF;
  --ag-bg-soft:     #F5FAFA;
  --ag-border:      #D4ECEB;

  /* Typography */
  --ag-font-display: 'Fraunces', serif;
  --ag-font-body:    'Plus Jakarta Sans', sans-serif;

  /* Spacing */
  --ag-section-pad:  80px 0;
  --ag-radius:       12px;
  --ag-radius-lg:    20px;

  /* Shadows */
  --ag-shadow-sm:    0 2px 8px rgba(10, 174, 160, 0.08);
  --ag-shadow-md:    0 8px 32px rgba(10, 174, 160, 0.12);
}

/* ============================================================
   Base Reset & Typography
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--ag-font-body);
  color: var(--ag-text);
  background: var(--ag-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--ag-font-display);
  font-weight: 700;
  line-height: 1.2;
}

/* ============================================================
   Global Utility Classes
   ============================================================ */
.ag-teal    { color: var(--ag-teal); }
.ag-bg-soft { background: var(--ag-bg-soft); }

.ag-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: var(--ag-teal);
  color: #fff;
  font-family: var(--ag-font-body);
  font-weight: 600;
  font-size: 15px;
  border-radius: var(--ag-radius);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.ag-btn:hover {
  background: var(--ag-dark);
  transform: translateY(-1px);
  color: #fff;
  text-decoration: none;
}

.ag-btn-outline {
  background: transparent;
  border: 2px solid var(--ag-teal);
  color: var(--ag-teal);
}

.ag-btn-outline:hover {
  background: var(--ag-teal);
  color: #fff;
}

/* ============================================================
   Mobile-First Responsive Base
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --ag-section-pad: 48px 0;
  }

  h1 { font-size: clamp(1.8rem, 5vw, 2.5rem); }
  h2 { font-size: clamp(1.5rem, 4vw, 2rem); }
}


/* ============================================================
   HERO SECTION — force full width, no overflow clip
   ============================================================ */
.elementor-element[data-id="hero-section"],
.elementor-element[data-id="hero-section"] > .e-con-inner,
.elementor-element[data-id="hero-section"] .elementor-widget-container,
.elementor-element[data-id="hero-section"] .elementor-widget {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  overflow: visible !important;
}
/* Fix overflow clip on parent containers */
.elementor-element[data-id="hero-section"] {
  overflow: visible !important;
}

/* ============================================================
   HERO content width + desktop 2-col layout
   ============================================================ */
#ag-hero {
  width: 100% !important;
  margin-left: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}
#ag-hero > div:nth-child(3) {
  box-sizing: border-box !important;
}
@media (min-width: 900px) {
  #ag-hero > div:nth-child(3) > div:last-child {
    flex-direction: row !important;
    align-items: flex-end !important;
    gap: 60px !important;
  }
  #ag-hero > div:nth-child(3) > div:last-child > div:first-child {
    flex: 1 !important;
  }
  #ag-hero > div:nth-child(3) > div:last-child > div:last-child {
    flex-shrink: 0 !important;
    width: 420px !important;
  }
  #ag-hero h1 {
    font-size: clamp(3rem, 4vw, 5rem) !important;
  }
}

/* ============================================================
   HERO SECTION v5 — clean override
   ============================================================ */

.elementor-element[data-id="hero-section"],
.elementor-element[data-id="hero-section"] > .e-con-inner,
.elementor-element[data-id="hero-section"] .elementor-widget-container,
.elementor-element[data-id="hero-section"] .elementor-widget {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  overflow: visible !important;
}
@media (min-width: 900px) {
  #ag-hero-flex { flex-direction: row !important; align-items: flex-end !important; gap: 60px !important; }
  #ag-hero-flex > div:first-child { flex: 1 !important; }
  #ag-hero-flex > div:last-child { flex-shrink: 0 !important; width: 420px !important; }
  #ag-hero h1 { font-size: clamp(3rem,4vw,4.8rem) !important; }
}
@keyframes kenburns { 0% { transform:scale(1.0); } 100% { transform:scale(1.06) translate(-0.5%,-0.5%); } }

#ag-hero { overflow: hidden !important; }

/* Override hero justify */
#ag-hero { justify-content: flex-start !important; display: block !important; }

/* Allow guest dropdown to overflow hero section */
#ag-hero { overflow: visible !important; }
.elementor-element[data-id="hero-section"],
.elementor-element[data-id="hero-section"] .elementor-widget,
.elementor-element[data-id="hero-section"] .elementor-widget-container {
  overflow: visible !important;
}
/* Date wrapper hover */
#ag-date-wrapper:hover { border-color: #0AAEA0 !important; }


/* ============================================================
   Hide Hello Elementor default theme header & footer
   (We use custom header from functions.php instead)
   ============================================================ */
.site-header,
.site-footer,
.entry-header,
header.entry-header,
.page-header,
.site-branding,
.hfe-header,
.ast-above-header,
.ast-primary-header-bar,
.ast-footer-bar {
  display: none !important;
}

/* Hide WordPress page title above Elementor content */
.elementor-page .entry-title,
.elementor-page .entry-header,
.elementor-page > .entry-content > *:not(.elementor),
.page-content > *:not(.elementor),
.post-content > *:not(.elementor) {
  display: none !important;
}

/* Ensure Elementor content fills full width */
.elementor-page .site-content,
.elementor-page #content,
.elementor-page .entry-content,
.elementor-page article {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
}