/*
Theme Name: Eivissa Flor (eivissa.de)
Template: granja-travel
Description: Brand direction 4A "Flor — Hippie Sunset" for eivissa.de. Sunset orange, magenta, turquoise, gold, aubergine, cream — bohemian, psychedelic, sun-soaked. See design/eivissa-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.0.0
Text Domain: eivissa-de-flor
*/

:root {
  --g-primary: #E23E8C;      /* Magenta */
  --g-dark: #3B2154;         /* Aubergine */
  --g-secondary: #F2B705;    /* Gold */
  --g-bg: #FBF3E4;           /* Cream */
  --g-ink: #5A4756;          /* Body text */
  --g-muted: #8A6A62;
  --g-nav-text: #5A4756;
  --g-border: rgba(59, 33, 84, .1);

  --g-hero-overlay-from: transparent;
  --g-hero-overlay-to: rgba(59, 33, 84, .5);
  --g-hero-text: #FBF3E4;
  --g-hero-subtext: #FBEFD8;
  --g-placeholder-a: #F7D9B0;
  --g-placeholder-b: #F3C6DC;

  --g-font-display: 'Shrikhand', serif;
  --g-font-body: 'Quicksand', sans-serif;
  --g-font-mono: 'Space Mono', monospace;
  --g-heading-weight: 400;
  --g-nav-weight: 600;
}

/* Wordmark is magenta specifically (not the aubergine used for regular headings), upright — no tilt in the header context per handoff */
.g-wordmark { color: var(--g-primary); }

/* Rounder radii throughout — the brand's signature "noticeably rounder than the other brands" note */
.g-hero, .g-card__media { border-radius: 16px; }
.g-nav .sub-menu { border-radius: 14px; }

/* Playful tilt on the hero headline only; body/nav text stays upright */
.g-hero__title { transform: rotate(-1deg); }

/* Signature gradient CTA pill, replacing the parent's flat-fill/8px-radius button */
.g-cta {
  background: linear-gradient(135deg, #F26430, #E23E8C);
  border-radius: 22px;
  padding: 10px 18px;
  font-weight: 700;
}

/* Centered-logo header (logo on its own top row, weather chip beside it,
   nav/CTA on the row below) — this brand's own layout, see header.php. */
.g-header--centered-weather {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.g-header-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.g-header-top .g-wordmark {
  grid-column: 2;
  justify-self: center;
}
.g-weather-chip {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--g-font-mono);
  font-size: 12px;
  color: var(--g-muted);
  white-space: nowrap;
}
.g-weather-chip__icon { flex-shrink: 0; }

@media (max-width: 480px) {
  .g-header-top { grid-template-columns: auto 1fr; }
  .g-header-top .g-wordmark { grid-column: 1; justify-self: start; }
  .g-weather-chip { grid-column: 2; }
}
.g-header-bottom {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.g-header-bottom .g-cta {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.g-header-bottom .g-header-toggle {
  position: absolute;
  left: 0;
}

@media (max-width: 720px) {
  .g-header-bottom {
    justify-content: space-between;
  }
  .g-header-bottom .g-cta,
  .g-header-bottom .g-header-toggle {
    position: static;
    transform: none;
  }
}