/*
Theme Name: Palma Bahía (palma.ro)
Template: granja-travel
Description: Brand direction 2B "Bahía — Sunset Rose" for palma.ro. Rose, marigold, navy. Scope is the city of Palma (with nearby beaches), not the whole island — per handoff. See design/mallorca-palma-handoff/README.md; colors/type/header/hero are final (hifi), everything below the hero inherited minimally from the parent until layouts/cards are decided.
Author: Granja
Version: 1.2.0
Text Domain: palma-ro-bahia
*/

:root {
  --g-primary: #D6446E;      /* Rose */
  --g-dark: #1B2A4A;         /* Navy */
  --g-secondary: #F4A93C;    /* Marigold */
  --g-bg: #FCF3EE;           /* Blush */
  --g-ink: #1A1620;          /* Ink */
  --g-muted: #8B7C82;
  --g-nav-text: #4B5468;
  --g-border: rgba(27, 42, 74, .1);

  --g-hero-overlay-from: transparent;
  --g-hero-overlay-to: rgba(27, 42, 74, .6);
  --g-hero-text: #FCF3EE;
  --g-hero-subtext: #F3E2D6;
  --g-placeholder-a: #EFDDD3;
  --g-placeholder-b: #F6E8E0;

  --g-font-display: 'Playfair Display', serif;
  --g-font-body: 'Manrope', sans-serif;
  --g-font-mono: 'IBM Plex Mono', monospace;
  --g-heading-weight: 700;
  --g-nav-weight: 600;
}

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

/* Sunset-glow accent from the logo-hero board, available as a utility */
.g-sun-glow { position: relative; }
.g-sun-glow::before {
  content: "";
  position: absolute;
  bottom: -70px;
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, #F4A93C 0%, #D6446E 55%, transparent 72%);
  opacity: .85;
  pointer-events: none;
}

/* Beach facility grid + maps link (2026-07-10 beach-post content component,
   shared verbatim across the Mallorca sites -- see mallorca-viajes-serena'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; }