/*
Theme Name: Mallorca Serena (mallorca.viajes)
Template: granja-travel
Description: Brand direction 2A "Serena — Olive Editorial" for mallorca.viajes. Olive, gold, almond. See design/mallorca-palma-handoff/README.md for the full spec — colors/type/header/hero are final (hifi); everything below the hero is inherited minimally from the parent until layouts/cards are decided.
Author: Granja
Version: 1.1.1
Text Domain: mallorca-viajes-serena
*/

:root {
  --g-primary: #5B6B3A;      /* Olive */
  --g-dark: #24331F;         /* Pine */
  --g-secondary: #C79A3E;    /* Gold */
  --g-bg: #F3EEE2;           /* Almond */
  --g-ink: #201E16;          /* Ink */
  --g-muted: #7A7565;
  --g-nav-text: #4A5340;
  --g-border: rgba(36, 51, 31, .1);

  --g-hero-overlay-from: transparent;
  --g-hero-overlay-to: rgba(36, 51, 31, .55);
  --g-hero-text: #F3EEE2;
  --g-hero-subtext: #E4DFCD;
  --g-placeholder-a: #DAD6C4;
  --g-placeholder-b: #E5E1D0;

  --g-font-display: 'Cormorant Garamond', serif;
  --g-font-body: 'Work Sans', sans-serif;
  --g-font-mono: 'IBM Plex Mono', monospace;
  --g-heading-weight: 600;
  --g-nav-weight: 500;
}

.g-wordmark--italic-accent {
  font-style: italic;
  font-weight: 500;
  color: var(--g-primary);
}

/* Beach facility grid + maps link (2026-07-10 beach-post content component,
   shared verbatim across the Mallorca sites -- see palma-ro-bahia's style.css
   for the twin copy). Available/unavailable colors are fixed green/red
   rather than brand vars: availability is a semantic, not a brand, signal
   and shouldn't shift with the theme's palette. */
.g-beach-meta {
  font-family: var(--g-font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--g-muted);
  margin: 0 0 10px;
}
.g-beach-maps-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--g-font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--g-primary);
  text-decoration: none;
  border: 1px solid var(--g-border);
  padding: 7px 14px;
  border-radius: 20px;
  margin: 0 0 22px;
}
.g-beach-maps-link:hover { background: var(--g-secondary); opacity: 1; }
.g-facility-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 8px 12px;
  margin: 0 0 30px;
}
.g-facility-grid__group {
  grid-column: 1 / -1;
  font-family: var(--g-font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--g-muted);
  margin: 14px 0 2px;
}
.g-facility-grid__group:first-child { margin-top: 0; }
.g-facility {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  padding: 7px 11px;
  border-radius: 8px;
  line-height: 1.25;
}
.g-facility--yes { background: rgba(46,125,50,.1); color: #2E7D32; }
.g-facility--no { background: rgba(198,40,40,.07); color: #B03A3A; opacity: .8; }
.g-facility--yes, .g-facility--no { font-weight: 600; }