/*
Theme Name: GuidaMallorca Dolce Isola (guidamallorca.com)
Template: granja-travel
Description: Brand direction "7A -- Dolce Isola, Riviera Italiana" for guidamallorca.com (Italian-language guide, replicating mallorca.viajes' structure). Terracotta, verde olivo, giallo Napoli, crema -- warm, editorial, dolce vita. See _temp/GuidaMallorca Brand Direction.html for the source spec.
Author: Granja
Version: 1.0.0
Text Domain: guidamallorca-dolceisola
*/

:root {
  --g-primary: #1F6E5C;      /* Verde olivo */
  --g-dark: #B0432B;         /* Terracotta */
  --g-secondary: #EBC13B;    /* Giallo Napoli */
  --g-bg: #FBF6EC;           /* Crema */
  --g-ink: #5B3A2A;          /* Espresso */
  --g-muted: #8A7967;
  --g-nav-text: #5B3A2A;
  --g-border: rgba(176, 67, 43, .12);

  --g-hero-overlay-from: transparent;
  --g-hero-overlay-to: rgba(30, 17, 10, .6);
  --g-hero-text: #FBF6EC;
  --g-hero-subtext: #EFE2D0;
  --g-placeholder-a: #DCC9AE;
  --g-placeholder-b: #F1E8DA;

  --g-font-display: 'Fraunces', serif;
  --g-font-body: 'Poppins', sans-serif;
  --g-font-mono: 'Space Mono', monospace;
  --g-heading-weight: 600;
  --g-nav-weight: 500;
}

/* Wordmark + hero headline use the italic cut of Fraunces -- the
   characterful flourish the brand direction calls out specifically
   ("Mallorca" in italic terracotta), kept off regular body headings. */
.g-wordmark, .g-hero__title {
  font-style: italic;
}

/* Olive -> giallo -> terracotta ribbon under the header -- the brand
   direction's signature accent, applied as a border-image gradient so it
   needs no extra markup or template override. */
.g-header {
  border-bottom: 5px solid transparent;
  border-image: linear-gradient(90deg, #1F6E5C, #EBC13B, #B0432B) 1;
}

/* Beach facility grid + maps link -- shared verbatim across the Mallorca
   sites (see mallorca-viajes-serena / palma-ro-bahia for the twin copy).
   Availability is a semantic, not a brand, signal, so it keeps fixed
   green/red rather than following the terracotta/olive 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; }