/* ============================================================
   Glacier Mining Alaska — Brand CSS
   Applied via Hello Elementor child theme (or Elementor custom CSS)
   Tokens match design/color-palette.md + design/typography.md
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&family=Montserrat:wght@600;700&family=Barlow+Condensed:wght@500;600&family=Inter:wght@400;500&family=JetBrains+Mono:wght@400&display=swap');

/* ── Design Tokens ── */
:root {
  --gm-deep-navy:     #0F2C4A;
  --gm-dark-slate:    #1C2533;
  --gm-glacier:       #3D6575;
  --gm-slate-mid:     #5A8090;
  --gm-slate-light:   #A8B4C4;
  --gm-gold:          #C9A02E;
  --gm-gold-warm:     #D4AA50;
  --gm-gold-pale:     #E8CC88;
  --gm-stone:         #6F7F94;
  --gm-marble:        #F2E8D5;
  --gm-cream:         #F5F2EB;
  --gm-charcoal:      #1C2533;
  --gm-steel:         #5A6870;
  --gm-mist:          #8A9BA5;
  --gm-white:         #FFFFFF;

  --gm-font-display:  'Cinzel', Georgia, serif;
  --gm-font-heading:  'Montserrat', system-ui, sans-serif;
  --gm-font-ui:       'Barlow Condensed', system-ui, sans-serif;
  --gm-font-body:     'Inter', system-ui, sans-serif;
  --gm-font-mono:     'JetBrains Mono', monospace;

  --gm-grad-hero:     linear-gradient(160deg, #0F2C4A 0%, #1C2533 50%, #3D6575 100%);
  --gm-grad-gold:     linear-gradient(90deg, #C9A02E 0%, #D4AA50 50%, #C9A02E 100%);
}

/* ── Global reset ── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--gm-font-body);
  color: var(--gm-charcoal);
  background: var(--gm-deep-navy);
  line-height: 1.75;
}

/* ── Typography: global headings ── */
h1, .elementor-heading-title.h1 {
  font-family: var(--gm-font-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  line-height: 1.1 !important;
}
h2, .elementor-heading-title.h2 {
  font-family: var(--gm-font-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  line-height: 1.15 !important;
}
h3, .elementor-heading-title.h3 {
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-weight: 700 !important;
  color: var(--gm-stone) !important;
  line-height: 1.25 !important;
}
h4, .elementor-heading-title.h4 {
  font-family: var(--gm-font-ui) !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--gm-steel) !important;
}

/* ── Gold accent bar — top of any .gm-gold-bar section ── */
.gm-gold-bar::before {
  content: '';
  display: block;
  height: 4px;
  background: var(--gm-grad-gold);
  position: absolute;
  top: 0; left: 0; right: 0;
}

/* ── Hero section utility classes ── */
.gm-hero {
  background: var(--gm-grad-hero) !important;
  position: relative;
}
.gm-hero::before {
  content: '';
  display: block;
  height: 4px;
  background: var(--gm-grad-gold);
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
}

/* ── Eyebrow label ── */
.gm-eyebrow {
  font-family: var(--gm-font-ui) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--gm-gold) !important;
}

/* ── CTA button — primary gold ── */
.elementor-button.gm-btn-primary,
.gm-btn-primary .elementor-button {
  background: var(--gm-gold) !important;
  color: var(--gm-dark-slate) !important;
  font-family: var(--gm-font-ui) !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  border: none !important;
  padding: 14px 32px !important;
}
.gm-btn-primary .elementor-button:hover {
  background: var(--gm-gold-warm) !important;
}

/* ── ENQUIRE button — shared header + page-level CTA ── */
.gm-btn-enquire {
  display: inline-block;
  font-family: var(--gm-font-ui) !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--gm-dark-slate) !important;
  background: var(--gm-gold) !important;
  padding: 12px 28px !important;
  border: none !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease !important;
}
.gm-btn-enquire:hover,
.gm-btn-enquire:focus {
  background: var(--gm-gold-warm) !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(201,160,46,0.35);
  outline: none;
}
.gm-btn-enquire:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(201,160,46,0.25);
}
/* Header context: tighter padding fits the 64px header height */
.elementor-location-header .gm-btn-enquire { padding: 10px 24px !important; }

/* ── CTA button — secondary outline ── */
.gm-btn-outline .elementor-button {
  background: transparent !important;
  color: var(--gm-slate-light) !important;
  font-family: var(--gm-font-ui) !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  border: 1px solid var(--gm-slate-mid) !important;
  padding: 14px 32px !important;
}

/* ── Service cards ── */
.gm-card {
  background: var(--gm-white) !important;
  border-top: 4px solid var(--gm-gold) !important;
  padding: 32px !important;
  box-shadow: 0 2px 16px rgba(15,44,74,0.08) !important;
}
.gm-card h3 {
  font-family: var(--gm-font-display) !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--gm-deep-navy) !important;
  margin-bottom: 12px !important;
}

/* ── Country tag chips ── */
.gm-chip {
  display: inline-block;
  font-family: var(--gm-font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gm-slate-light);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(168,180,196,0.3);
  padding: 6px 14px;
  margin: 4px 4px 4px 0;
}

/* ── Credential stats bar ── */
.gm-stat-number {
  font-family: var(--gm-font-display) !important;
  font-size: 2.25rem !important;
  font-weight: 700 !important;
  color: var(--gm-gold) !important;
  line-height: 1 !important;
}
.gm-stat-label {
  font-family: var(--gm-font-ui) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--gm-slate-light) !important;
}

/* ── Divider gold bar ── */
.gm-divider-gold {
  height: 4px !important;
  background: var(--gm-grad-gold) !important;
  border: none !important;
}

/* ── Section: dark slate background utility ── */
.gm-section-dark { background: var(--gm-deep-navy) !important; }
.gm-section-darkslate { background: var(--gm-dark-slate) !important; }
.gm-section-glacier { background: var(--gm-glacier) !important; }
.gm-section-marble { background: var(--gm-deep-navy) !important; }
.gm-section-cream { background: var(--gm-cream) !important; }

/* ── Nav ── */
.site-header,
.elementor-location-header {
  background: var(--gm-deep-navy) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.site-header a,
.elementor-nav-menu a {
  font-family: var(--gm-font-ui) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--gm-slate-light) !important;
}
.site-header a:hover,
.elementor-nav-menu a:hover { color: var(--gm-gold) !important; }

/* ── Footer ── */
.site-footer,
.elementor-location-footer {
  background: var(--gm-deep-navy) !important;
  border-top: 4px solid var(--gm-gold) !important;
  color: var(--gm-steel) !important;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  h1, .elementor-heading-title.h1 { font-size: 2.25rem !important; }
  h2, .elementor-heading-title.h2 { font-size: 1.75rem !important; }
}

/* ── WPForms inside Elementor Pro popup — load after WPForms stylesheet (#24) ── */
/* Selector chain targets the popup regardless of exact Elementor class used */
.elementor-popup-modal .wpforms-field-label,
.elementor-popup-modal label.wpforms-field-label,
.dialog-message .wpforms-field-label,
.dialog-message label,
.elementor-18 .wpforms-field-label,
.elementor-18 label {
  color: #FFFFFF !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
.elementor-popup-modal .wpforms-required-label,
.dialog-message .wpforms-required-label { color: #C9A02E !important; }
.elementor-popup-modal .wpforms-field-description,
.dialog-message .wpforms-field-description {
  color: #A8B4C4 !important;
  font-family: Inter, sans-serif !important;
  font-size: 0.8125rem !important;
}
.elementor-popup-modal .wpforms-submit,
.elementor-popup-modal button[type=submit],
.dialog-message .wpforms-submit,
.dialog-message button[type=submit] {
  background: #C9A02E !important;
  color: #1C2533 !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 14px 32px !important;
}
.elementor-popup-modal .wpforms-submit:hover,
.dialog-message .wpforms-submit:hover { background: #D4AA50 !important; }
.elementor-popup-modal input:focus,
.elementor-popup-modal select:focus,
.elementor-popup-modal textarea:focus,
.dialog-message input:focus,
.dialog-message select:focus,
.dialog-message textarea:focus {
  border-color: #C9A02E !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(201,160,46,0.2) !important;
}