/* ═══════════════════════════════════════════════════════════════
   andygrimes.com  |  Brand CSS
   Unified design tokens and site-header styles shared across
   all sections of andygrimes.com.
   ═══════════════════════════════════════════════════════════════ */

/* ── Design Tokens ──────────────────────────────────────────── */
:root {
  --ag-navy:        #0f2240;
  --ag-navy-mid:    #1a3358;
  --ag-navy-light:  #264d72;
  --ag-gold:        #c49a3a;
  --ag-gold-light:  #d4af5a;
  --ag-gold-pale:   #fdf6e3;
  --ag-cream:       #f5f2ec;
  --ag-white:       #ffffff;
  --ag-text:        #1c2a3a;
  --ag-text-muted:  #6b7a8d;
  --ag-border:      #e2ddd6;
}

/* ── Site Header ────────────────────────────────────────────── */
/*
   A slim, persistent brand bar that appears at the top of every
   page.  On the left it shows the andygrimes.com compass mark
   and wordmark; a vertical rule divides it from the section
   label ("Travel Tools").  An optional .ag-header-right slot
   can hold page-specific controls (e.g. a back link).
*/

.ag-site-header {
  background: var(--ag-navy);
  color: var(--ag-white);
  padding: 0 1.5rem;
  height: 46px;
  display: flex;
  align-items: center;
  gap: 0;
  border-bottom: 1px solid rgba(196, 154, 58, 0.25);
  flex-shrink: 0;
  z-index: 200;
  position: relative;
}

/* Brand link (compass + wordmark) */
.ag-brand-link {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}

.ag-brand-link:hover .ag-wordmark {
  color: var(--ag-gold-light);
}

/* Compass/icon logo */
.ag-logo-mark {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
}

/* "andygrimes.com" wordmark */
.ag-wordmark {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.975rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ag-white);
  white-space: nowrap;
  transition: color 0.2s;
  line-height: 1;
}

.ag-wordmark .ag-tld {
  color: var(--ag-gold);
}

/* Vertical rule */
.ag-header-divider {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.18);
  margin: 0 0.85rem;
  flex-shrink: 0;
}

/* "TRAVEL TOOLS" section badge */
.ag-section-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ag-gold);
  white-space: nowrap;
  line-height: 1;
}

/* Right-hand slot (optional per-page content) */
.ag-header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Back / navigation link inside the header */
.ag-header-back {
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  white-space: nowrap;
  transition: color 0.2s;
}

.ag-header-back:hover {
  color: var(--ag-gold);
}

/* ── Reusable Logo (use <img> tag) ──────────────────────────── */
/*
   Use this markup inline wherever the logo icon is needed:

   <img class="ag-logo-mark" src="/andygrimes-icon.png" alt="" aria-hidden="true">
*/

/* ── Print: hide brand bar ──────────────────────────────────── */
@media print {
  .ag-site-header { display: none !important; }
}