/* ============================================================
   ATLAS GUIDE — GLOBAL DESIGN SYSTEM
   global.css · v1.0
   Import this file first on every page, before page-specific CSS.
   ============================================================ */

/* ============================================================
   GOOGLE FONTS
   Playfair Display · headings, hero, country names, editorial
   DM Sans         · body copy, UI, labels, navigation
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=DM+Sans:wght@300;400;500;700&display=swap');

/* ============================================================
   DESIGN TOKENS — ROOT
   All atlas-guide variables are prefixed --ag- to avoid
   collisions with any third-party or page-specific CSS.
   ============================================================ */
:root {

  /* --- Brand Greens --- */
  --ag-green-900:   #0D2118;   /* darkest, deep shadow */
  --ag-green-800:   #1A3A2B;   /* Deep Jungle — primary CTA, nav active */
  --ag-green-700:   #1F4D35;
  --ag-green-600:   #2E6B4A;   /* Rainforest — hover state, icons */
  --ag-green-500:   #3D8A5E;
  --ag-green-400:   #4D9E72;   /* Savanna — badges, tags, ratings fill */
  --ag-green-100:   #C3DDD0;   /* light border */
  --ag-green-50:    #E8F4ED;   /* tint background, badge fill */

  /* --- Gold Accent --- */
  --ag-gold-700:    #8A6020;
  --ag-gold-600:    #B07A28;
  --ag-gold-500:    #C9A85C;   /* Desert Gold — accent, highlight, links */
  --ag-gold-400:    #D9BC80;
  --ag-gold-50:     #FBF5E6;   /* warm tint */

  /* --- Terracotta (danger / high-risk / alerts) --- */
  --ag-terra-700:   #7A1A10;
  --ag-terra-600:   #A83224;
  --ag-terra-500:   #C24B3A;   /* Terracotta — error, high risk, warnings */
  --ag-terra-50:    #FDECEA;

  /* --- Ocean Slate (secondary accent, info) --- */
  --ag-ocean-700:   #2C4A55;
  --ag-ocean-600:   #3E6070;
  --ag-ocean-500:   #5C7B8A;   /* Ocean Slate — info badges, coast guard, links */
  --ag-ocean-50:    #EBF3F7;

  /* --- Neutrals --- */
  --ag-night:       #1C1C1A;   /* dark backgrounds, hero overlay base */
  --ag-ink:         #2A2420;   /* body text */
  --ag-ink-mid:     #5C5248;   /* secondary text, captions */
  --ag-ink-light:   #9A8E85;   /* muted, placeholders */
  --ag-parchment:   #F5F0E8;   /* warm white — page bg, card bg alternates */
  --ag-warm-white:  #FBF8F2;   /* lightest warm surface */
  --ag-white:       #FFFFFF;

  /* --- Semantic Aliases (used in components) --- */
  --primary:        var(--ag-green-800);
  --primary-light:  var(--ag-green-600);
  --primary-dark:   var(--ag-green-900);
  --accent:         var(--ag-gold-500);
  --secondary:      var(--ag-terra-500);
  --secondary-light:#D4845A;
  --info:           var(--ag-ocean-500);

  --text:           var(--ag-ink);
  --text-mid:       var(--ag-ink-mid);
  --text-light:     var(--ag-ink-light);

  --bg:             var(--ag-warm-white);
  --bg-warm:        var(--ag-parchment);
  --bg-card:        var(--ag-white);
  --bg-dark:        var(--ag-night);

  --border:         rgba(26, 58, 43, 0.10);
  --border-warm:    rgba(201, 168, 92, 0.20);

  /* --- Shadows --- */
  --shadow-sm:  0 2px  10px rgba(26, 36, 32, 0.06);
  --shadow-md:  0 6px  28px rgba(26, 36, 32, 0.10);
  --shadow-lg:  0 16px 56px rgba(26, 36, 32, 0.14);

  /* --- Border Radius --- */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-full: 100px;

  /* --- Typography --- */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* --- Motion --- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Layout --- */
  --header-h:     80px;
  --quicknav-h:   50px;
  --container-w:  1360px;
  --container-narrow-w: 860px;
}

/* ============================================================
   RESET
   ============================================================ */
*, ::before, ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button, input, select, textarea {
  font-family: inherit;
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
.skip-link {
  position: absolute;
  top: -60px;
  left: 8px;
  background: var(--primary);
  color: #fff;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 0 0 8px 8px;
  z-index: 10000;
  font-weight: 700;
  transition: top .3s;
}
.skip-link:focus { top: 0; }

/* ============================================================
   CONTAINERS
   ============================================================ */
.ag-container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 64px);
}

.ag-container--narrow {
  max-width: var(--container-narrow-w);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 64px);
}

/* Legacy aliases — keeps existing pages working */
.container        { max-width: var(--container-w); margin: 0 auto; padding: 0 clamp(20px, 4vw, 64px); }
.container--narrow{ max-width: var(--container-narrow-w); }
.jg-container     { max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.js-ready .reveal,
.js-ready .rv {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity   .7s var(--ease-out),
    transform .7s var(--ease-out);
}
.js-ready .reveal.visible,
.js-ready .rv.vis,
.reveal.visible,
.rv.vis {
  opacity: 1;
  transform: translateY(0);
}
.rv-scale {
  opacity: 0;
  transform: scale(.94);
  transition:
    opacity   .8s var(--ease-out),
    transform .8s var(--ease-out);
}
.rv-scale.vis {
  opacity: 1;
  transform: scale(1);
}

/* ============================================================
   TYPOGRAPHY SCALE
   ============================================================ */

/* Section eyebrow label */
.ag-eyebrow,
.sec-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 14px;
}
.ag-eyebrow::before,
.sec-eyebrow::before {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--ag-gold-500);
  border-radius: 2px;
  flex-shrink: 0;
}

/* Section title */
.ag-section-title,
.sec-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 16px;
  letter-spacing: -.025em;
}

/* Section description */
.ag-section-desc,
.sec-desc {
  font-size: 1.05rem;
  color: var(--text-mid);
  max-width: 560px;
  line-height: 1.78;
}

/* Display headline (hero, large callouts) */
.ag-display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
}

/* Prose body */
.ag-prose p {
  font-size: 1.05rem;
  color: var(--text-mid);
  line-height: 1.82;
  margin-bottom: 18px;
  max-width: 720px;
}
.ag-prose p:last-child { margin-bottom: 0; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn,
.ag-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 30px;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all .35s var(--ease-out);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

/* Primary — deep jungle green */
.btn-primary,
.ag-btn-primary {
  background: var(--ag-green-800);
  color: #fff;
  box-shadow: 0 4px 20px rgba(26, 58, 43, .20);
}
.btn-primary:hover,
.ag-btn-primary:hover {
  background: var(--ag-green-600);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(26, 58, 43, .28);
}

/* Secondary — gold accent */
.ag-btn-accent {
  background: var(--ag-gold-500);
  color: var(--ag-green-800);
  box-shadow: 0 4px 20px rgba(201, 168, 92, .25);
}
.ag-btn-accent:hover {
  background: var(--ag-gold-600);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(201, 168, 92, .35);
}

/* Outline */
.btn-outline,
.ag-btn-outline {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--ag-green-800);
}
.btn-outline:hover,
.ag-btn-outline:hover {
  background: var(--ag-green-800);
  color: #fff;
  transform: translateY(-2px);
}

/* Ghost (for use on dark/hero backgrounds) */
.btn-ghost,
.ag-btn-ghost {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(4px);
}
.btn-ghost:hover,
.ag-btn-ghost:hover {
  background: rgba(255, 255, 255, .22);
  transform: translateY(-2px);
}

/* White (for use on green/dark backgrounds) */
.btn-white,
.ag-btn-white {
  background: #fff;
  color: var(--ag-green-800);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .12);
}
.btn-white:hover,
.ag-btn-white:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .18);
}

/* Arrow animation inside buttons */
.btn-arrow,
.ag-btn-arrow {
  display: inline-flex;
  transition: transform .3s var(--ease-out);
}
.btn:hover .btn-arrow,
.ag-btn:hover .ag-btn-arrow {
  transform: translateX(3px);
}

/* ============================================================
   BADGES & TAGS
   ============================================================ */
.ag-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 12px;
  border-radius: var(--radius-full);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.ag-badge-green  { background: var(--ag-green-50);  color: var(--ag-green-800); }
.ag-badge-gold   { background: var(--ag-gold-50);   color: var(--ag-gold-700);  }
.ag-badge-terra  { background: var(--ag-terra-50);  color: var(--ag-terra-700); }
.ag-badge-ocean  { background: var(--ag-ocean-50);  color: var(--ag-ocean-700); }

/* Risk levels — used on scam/safety pages */
.ag-risk-low    { background: var(--ag-green-50);  color: var(--ag-green-800); }
.ag-risk-medium { background: var(--ag-gold-50);   color: var(--ag-gold-700);  }
.ag-risk-high   { background: var(--ag-terra-50);  color: var(--ag-terra-700); }

/* ============================================================
   RISK GRADIENT BAR
   Used on scam/safety pages
   ============================================================ */
.ag-risk-bar {
  height: 8px;
  border-radius: var(--radius-full);
  background: linear-gradient(
    90deg,
    var(--ag-green-400) 0%,
    var(--ag-gold-500)  50%,
    var(--ag-terra-500) 100%
  );
  margin-bottom: 6px;
}
.ag-risk-labels {
  display: flex;
  justify-content: space-between;
  font-size: .68rem;
  font-weight: 700;
  color: var(--text-light);
}

/* ============================================================
   CARDS — BASE
   ============================================================ */
.ag-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  transition: box-shadow .3s var(--ease-out), transform .3s var(--ease-out);
}
.ag-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.ag-card-warm {
  background: var(--bg-warm);
  border-color: var(--border-warm);
}

/* ============================================================
   TIP / CALLOUT BOX
   ============================================================ */
.ag-tip {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: rgba(26, 58, 43, .05);
  border: 1px solid rgba(26, 58, 43, .13);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  margin-top: 20px;
}
.ag-tip-icon        { font-size: 1.2rem; flex-shrink: 0; margin-top: 1px; }
.ag-tip strong      { display: block; font-size: .88rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.ag-tip p,
.ag-tip div         { font-size: .86rem; color: var(--text-mid); line-height: 1.65; }

/* Warning variant */
.ag-tip-warn {
  background: rgba(201, 168, 92, .07);
  border-color: rgba(201, 168, 92, .25);
  border-left-color: var(--ag-gold-500);
}

/* Danger variant */
.ag-tip-danger {
  background: var(--ag-terra-50);
  border-color: rgba(194, 75, 58, .20);
  border-left-color: var(--ag-terra-500);
}

/* ============================================================
   SECTION LABEL (inline variant, used in country pages)
   ============================================================ */
.ag-section-label,
.jg-section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ag-green-800);
  margin-bottom: 10px;
}
.ag-section-label::before,
.jg-section-label::before {
  content: '';
  width: 20px;
  height: 2px;
  background: var(--ag-gold-500);
  border-radius: 2px;
}

/* ============================================================
   RATING BARS
   ============================================================ */
.ag-rating-bar {
  height: 5px;
  background: var(--bg-warm);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.ag-rating-fill {
  height: 100%;
  background: var(--ag-green-400);
  border-radius: var(--radius-full);
  transition: width .9s var(--ease-out);
}
.ag-rating-fill-mid  { background: var(--ag-gold-500); }
.ag-rating-fill-low  { background: var(--ag-terra-500); }

/* ============================================================
   EMERGENCY CARD COLORS
   ============================================================ */
.ag-em-police  { background: linear-gradient(135deg, #1a3060, #2a4a8a); }
.ag-em-medical { background: linear-gradient(135deg, #6b1414, #a82828); }
.ag-em-coast   { background: linear-gradient(135deg, var(--ag-ocean-700), var(--ag-ocean-500)); }
.ag-em-tourist { background: linear-gradient(135deg, var(--ag-green-900), var(--ag-green-600)); }

/* ============================================================
   LANGUAGE SWITCHER (fixed, site-wide)
   ============================================================ */
.language-switcher-bottom {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 10001;
}
.language-switcher-bottom select {
  background: var(--bg-card);
  color: var(--text);
  border: 2px solid var(--ag-green-800);
  border-radius: var(--radius-full);
  padding: 10px 36px 10px 18px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all .3s var(--ease-out);
  box-shadow: var(--shadow-sm);
  outline: 0;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%231A3A2B' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.language-switcher-bottom select:hover,
.language-switcher-bottom select:focus {
  background-color: var(--ag-green-800);
  color: #fff;
  border-color: var(--ag-green-800);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(26, 58, 43, .22);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23fff' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.language-switcher-bottom select option {
  background: var(--bg-card);
  color: var(--text);
}

/* ============================================================
   PARTNER / BOOKING BUTTON — GLOBAL
   ============================================================ */
.ag-partner-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--ag-green-800);
  color: #fff;
  padding: 10px 20px;
  border-radius: var(--radius-full);
  font-size: .85rem;
  font-weight: 700;
  white-space: nowrap;
  transition: all .3s var(--ease-out);
  flex-shrink: 0;
}
.ag-partner-btn:hover {
  background: var(--ag-green-600);
  transform: translateY(-1px);
  box-shadow: 0 5px 18px rgba(26, 58, 43, .28);
}

/* ============================================================
   UTILITIES
   ============================================================ */

/* Pulse animation — used on live dots */
@keyframes ag-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}
.ag-pulse { animation: ag-pulse 2s ease infinite; }

/* Fade up entry */
@keyframes ag-fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Scroll pulse (hero scroll cue) */
@keyframes ag-scroll-pulse {
  0%   { top: -100%; }
  50%  { top: 100%;  }
  100% { top: 100%;  }
}

/* Ken Burns */
@keyframes ag-ken-burns {
  0%   { transform: scale(1.04) translate(0, 0); }
  100% { transform: scale(1.10) translate(-1%, -1%); }
}

/* Text truncation */
.ag-truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Screen reader only */
.ag-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .language-switcher-bottom,
  .ag-partner-btn,
  .btn { display: none !important; }
  body { color: #000; background: #fff; }
  a[href]::after { content: ' (' attr(href) ')'; font-size: .75rem; }
}