/*
 * ============================================
 *   GUIA MARCOS — BRAND COMPONENT LIBRARY
 * ============================================
 * Edit this file to update styles site-wide.
 *
 * SECTIONS:
 *   1. CSS Variables  (colors, fonts, spacing)
 *   2. Logo & Nav
 *   3. Buttons
 *   4. Hero Sections  (ALL pages — one size)
 *   5. Footer
 *   6. Cards & Badges
 * ============================================
 */

/* ── 1. CSS VARIABLES ─────────────────────── */
:root {
  /* Brand colors */
  --navy:     #002147;
  --green:    #007B40;
  --blue:     #1D72B8;
  --teal:     #007B7B;
  --mint:     #A8D8B9;
  --lt-blue:  #D6EAF7;
  --lt-green: #D4EDE1;
  --lt-mint:  #EAF6EE;
  --lt-gray:  #F0F3F6;
  --gray:     #4A5568;
  --dark:     #1a202c;
  --white:    #FFFFFF;
  --wa-green: #25D366;

  /* Radius & shadows */
  --radius:    12px;
  --shadow:    0 4px 24px rgba(0,60,113,0.10);
  --shadow-lg: 0 8px 40px rgba(0,60,113,0.16);

  /* Typography */
  --font-heading: 'Playfair Display', serif;
  --font-body:    'Inter', sans-serif;

  /* ── Hero — edit these two lines to move ALL hero sections at once */
  --hero-pt:  60px;   /* padding-top — desktop (static header)  */
  --hero-pb:  60px;   /* padding-bottom */

  /* ── Hero heading — edit this one line to resize ALL hero headings */
  --hero-h-size: clamp(30px, 4vw, 52px);
}

/* ── 2. LOGO & NAV ───────────────────────── */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
}
.logo span { color: var(--blue); }

/* The favicon icon inside the logo */
.logo-icon {
  height: 32px;
  width:  32px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

/* ── 3. BUTTONS ──────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  text-decoration: none;
}
.btn-primary {
  background: var(--green);
  color: var(--white);
  border-color: var(--green);
}
.btn-primary:hover {
  background: #006835;
  border-color: #006835;
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.btn-secondary {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.btn-secondary:hover {
  background: var(--lt-blue);
}

/* ── 4. HERO SECTIONS ────────────────────── */
/* All hero variants share the same vertical rhythm */
.hero,
.about-hero,
.page-hero,
.contact-hero {
  padding-top:    var(--hero-pt);
  padding-bottom: var(--hero-pb);
  position: relative;
  overflow: hidden;
}

/* Universal hero heading size — applies to h1 and .section-title inside any hero */
.hero h1,
.about-hero h1,
.page-hero h1,
.contact-hero h1,
.hero .section-title,
.about-hero .section-title,
.page-hero .section-title,
.contact-hero .section-title,
.hero-heading {
  font-family: var(--font-heading) !important;
  font-size:   var(--hero-h-size) !important;
  font-weight: 700 !important;
  color:       var(--navy) !important;
  line-height: 1.2 !important;
  margin-bottom: 16px;
}

/* ── 5. FOOTER ───────────────────────────── */
footer {
  background: var(--navy);
  color: var(--white);
}

/* ── 6. CARDS & BADGES ───────────────────── */
.card {
  background:    var(--white);
  border-radius: var(--radius);
  box-shadow:    var(--shadow);
  padding: 24px;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background:    var(--lt-mint);
  color:         var(--navy);
  padding: 6px 14px;
  border-radius: 20px;
  font-size:  13px;
  font-weight: 600;
}

/* ── Language Pill Toggle ──────────────────────────────────────── */
.lang-pill {
  display: inline-flex;
  border: 2px solid var(--navy);
  border-radius: 999px;
  overflow: hidden;
  margin-left: 8px;
  flex-shrink: 0;
}
.lang-pill button {
  background: none;
  border: none;
  padding: 5px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--navy);
  letter-spacing: 0.04em;
  transition: background 0.18s, color 0.18s;
  line-height: 1;
}
.lang-pill button.lp-active {
  background: var(--navy);
  color: #fff;
}
.lang-pill button:not(.lp-active):hover {
  background: var(--lt-blue);
}
/* Mobile: slightly larger touch targets */
@media (max-width: 900px) {
  .lang-pill button { padding: 8px 16px; font-size: 0.85rem; }
  .lang-pill { margin-left: 0; margin-top: 8px; align-self: flex-start; }
}