/* =============================================================
   GMA Text Header — replaces raster banner with live-text brand row.
   Loads AFTER brand.css and nav.css (registered last in gma.libraries.yml).

   Three-row header structure:
     1. .gma-topbar          (utility/announce — already styled in nav.css)
     2. .gma-brand-row       (emblem + text wordmark + CTA)
     3. .gma-menubar         (main nav — already styled in nav.css)
   ============================================================= */

/* ── Wordmark fonts ─────────────────────────────────────────── */
/* Archivo (English wordmark, extra-bold) */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@900&display=swap');
/* Noto Sans Telugu (Telugu wordmark) — NOTE: fonts.css already loads
   Noto Serif Telugu; this adds the Sans variant for the wordmark only. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Telugu:wght@700&display=swap');

/* ── Brand row container ──────────────────────────────────────
   White bar between the topbar and the menubar.
   Flexbox: emblem+wordmark on the left, CTA cluster on the right.
   ─────────────────────────────────────────────────────────── */
.gma-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--gma-surface, #fff);
  padding: 10px 24px;
  border-bottom: 1px solid var(--gma-border, #ECE5DD);
  /* Remove any old .gma-header banner height constraints */
  min-height: unset;
}

/* ── Brand link (emblem + wordmark) ──────────────────────────── */
.gma-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  flex: 1 1 auto;
  min-width: 0;
}
.gma-brand:hover,
.gma-brand:focus { text-decoration: none; outline-offset: 4px; }

/* Emblem image */
.gma-emblem {
  flex-shrink: 0;
}
.gma-emblem img {
  display: block;
  width: 60px;
  height: 60px;
  object-fit: contain;
}

/* Wordmark text block */
.gma-wordmark {
  line-height: 1.1;
  min-width: 0;
}
.gma-wordmark__en {
  display: block;
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(15px, 2.2vw, 24px);
  letter-spacing: 0.02em;
  color: var(--gma-primary-dark);   /* deep navy from token */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gma-wordmark__te {
  display: block;
  font-family: "Noto Sans Telugu", "Noto Serif Telugu", sans-serif;
  font-weight: 700;
  font-size: clamp(11px, 1.4vw, 15px);
  color: #B11E2F;   /* crimson — intentionally kept red, matches original */
  margin-top: 2px;
}

/* ── CTA cluster (right side of brand row) ──────────────────── */
.gma-brand-row__cta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  white-space: nowrap;
}
.gma-brand-row__tel {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  color: var(--gma-primary, #B11E2F);
  text-decoration: none;
  font-size: 0.9rem;
}
.gma-brand-row__tel:hover { color: var(--gma-primary-dark, #8E1626); }

/* Apply Membership pill button */
.gma-apply {
  background: var(--gma-accent, #C8881A);
  color: var(--gma-ink, #1C1A19);
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: 999px;
  padding: 9px 18px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.gma-apply:hover {
  background: var(--gma-accent-dark, #A66E12);
  color: #fff;
}

/* ── Hide the old banner image completely ───────────────────── */
.gma-header,
.gma-header__banner-img,
.gma-header__inner {
  display: none !important;
}

/* ── Menubar: remove the old helpline div (now in brand row CTA) */
.gma-menubar__helpline { display: none; }

/* ── 1200px: compact brand row slightly ─────────────────────── */
@media (max-width: 1200px) {
  .gma-brand-row { padding: 10px 16px; gap: 12px; }
  .gma-wordmark__en { font-size: clamp(14px, 1.8vw, 22px); }
}

/* ── 1100px: hamburger kicks in — hide Apply from brand row ─── */
@media (max-width: 1100px) {
  .gma-apply { display: none; }
  .gma-brand-row__tel { font-size: 0.85rem; }
}

/* ── 768px (tablet): compact further ───────────────────────── */
@media (max-width: 768px) {
  .gma-brand-row {
    padding: 8px 14px;
    gap: 10px;
  }
  .gma-wordmark__en { font-size: 14px; white-space: normal; }
  .gma-wordmark__te { font-size: 11px; }
  .gma-emblem img   { width: 46px; height: 46px; }
  .gma-brand-row__tel { font-size: 0.8rem; }
}

/* ── 480px: hide phone too, wordmark only ───────────────────── */
@media (max-width: 480px) {
  .gma-brand-row__cta { display: none; }
  .gma-wordmark__en   { font-size: 13px; }
  .gma-emblem img     { width: 40px; height: 40px; }
}

/* ── Step 4: Dark-section link palette ───────────────────────
   Links inside dark hero / footer / gma-dark backgrounds must
   use gold (not Olivero's default blue) for contrast + brand fit.
   Links on light backgrounds use --gma-primary (ocean blue).
   ─────────────────────────────────────────────────────────── */

/* Global light-bg link override — ocean blue on white/cream */
a:not([class]) {
  color: var(--gma-primary);
}
a:not([class]):hover {
  color: var(--gma-primary-dark);
}

/* Dark sections: hero, footer, any .gma-dark-section element */
.gma-hero3 a:not(.gma-btn),
.gma-hero3__col a:not(.gma-btn),
.gma-footer a,
[style*="background:var(--gma-dark)"] a,
.gma-on-dark a {
  color: var(--gma-accent);
}
.gma-hero3 a:not(.gma-btn):hover,
.gma-hero3__col a:not(.gma-btn):hover,
.gma-footer a:hover,
.gma-on-dark a:hover {
  color: #fff;
}

/* Mobile menu open state — light links on open nav */
.gma-menubar.open .gma-menubar__link {
  color: var(--gma-primary-dark);
}