/*
 * Destination guides — presentation layer shared by the day-plan pages.
 *
 * /puerto-de-mogan            (es)
 * /en/puerto-de-mogan
 * /de/puerto-de-mogan
 * /fr/puerto-de-mogan
 * /it/puerto-de-mogan
 *
 * These pages previously served all five languages from one URL, swapping
 * text in the browser from data-* attributes. Each page now serves one
 * language server-side, so the language control is a set of real links
 * between the five URLs rather than a set of buttons that rewrote the DOM.
 */

/*
 * The page never declared a colour scheme and <body> had no background at
 * all, so in a browser set to dark mode the bare canvas rendered near-black
 * behind light section panels. That is the "nearly all-black canvas" — a
 * dark-mode default showing through, not a design decision. Declaring the
 * scheme and giving the body a sand base fixes it in one line each.
 */
:root {
  color-scheme: light;

  --mg-sand: #fbfaf7;
  --mg-ink: #111827;
  --mg-ink-soft: #4b5563;
  --mg-line: #e5e7eb;
  --mg-sea: #0369a1;
}

body {
  background: var(--mg-sand);
  color: #1f2937;
}

/* ---------------------------------------------------------------- *
 * Language switcher
 *
 * The desktop control used to be five <button>s each containing an empty
 * <span class="language-flag"></span> — a class with no styles anywhere in
 * the codebase. They rendered as five blank grey boxes whose only label was
 * a title attribute, so they had no accessible name either.
 * ---------------------------------------------------------------- */
.mg-lang {
  position: relative;
}

.mg-lang details > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 44px;
  padding: 0 0.75rem;
  border: 1px solid var(--mg-line);
  border-radius: 0.5rem;
  background: #fff;
  color: var(--mg-ink);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.mg-lang summary::-webkit-details-marker {
  display: none;
}

.mg-lang details > summary:hover {
  background: #f3f4f6;
}

.mg-lang details > summary:focus-visible,
.mg-lang a:focus-visible {
  outline: 2px solid var(--mg-sea);
  outline-offset: 2px;
}

.mg-lang summary::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.6;
}

.mg-lang details[open] > summary::after {
  transform: rotate(180deg);
}

.mg-lang ul {
  position: absolute;
  right: 0;
  z-index: 60;
  margin: 0.375rem 0 0;
  padding: 0.25rem;
  min-width: 11rem;
  list-style: none;
  background: #fff;
  border: 1px solid var(--mg-line);
  border-radius: 0.625rem;
  box-shadow: 0 12px 28px rgb(15 23 42 / 0.16);
}

.mg-lang li a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.625rem;
  border-radius: 0.375rem;
  color: var(--mg-ink);
  text-decoration: none;
  font-size: 0.9375rem;
}

.mg-lang li a:hover {
  background: #eff6ff;
}

/* The mobile menu lists all five inline; the current one is not a link. */
.mg-lang-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.5rem;
}

.mg-lang-row a,
.mg-lang-row span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--mg-line);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--mg-ink);
}

.mg-lang-row a:hover {
  background: #f3f4f6;
}

.mg-lang-row [aria-current="true"] {
  background: var(--mg-sea);
  border-color: var(--mg-sea);
  color: #fff;
}

/* ---------------------------------------------------------------- *
 * Hero clearance
 *
 * The hero is `min-h-[60vh] flex items-center` with top padding only, and
 * the panel below it was pulled up by -2rem and stacked above it (z-20).
 * On a narrow screen the hero content is taller than 60vh, so the CTAs sat
 * at the very bottom edge and the panel landed on top of the green one.
 *
 * The lift is a desktop flourish, so it only applies once there is room
 * for it, and the hero keeps guaranteed clear space beneath its buttons.
 * ---------------------------------------------------------------- */
.mg-hero-pad {
  padding-bottom: 4rem;
}

.mg-lift {
  margin-top: 1.5rem;
}

@media (min-width: 768px) {
  .mg-lift {
    margin-top: -2rem;
  }
}

/* Both hero CTAs stay finger-sized and keep 24px of air below them. */
.mg-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.mg-hero-cta > a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------------------------------------------------------------- *
 * Hero, rebuilt around what a visitor is actually deciding
 *
 * The old hero said "Puerto de Mogán" over a photo and offered "Explore
 * now", which begins nothing in particular. A first-time visitor could not
 * tell from it how long a visit takes, what it costs, or which button
 * starts planning. The new one leads with the day plan and keeps one loud
 * action and one quiet one.
 * ---------------------------------------------------------------- */
.mg-eyebrow {
  display: inline-block;
  margin-bottom: 0.625rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.18);
  border: 1px solid rgb(255 255 255 / 0.28);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mg-h1 {
  margin: 0 0 0.75rem;
  /* Two lines on a phone, rather than the four the old size produced. */
  font-size: clamp(1.75rem, 1.15rem + 2.6vw, 3rem);
  line-height: 1.14;
  font-weight: 800;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.mg-hero-sub {
  max-width: 46ch;
  margin: 0 auto 1.25rem;
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.1875rem);
  line-height: 1.55;
}

/*
 * The overlay was a flat black at 50% over an image already dimmed to
 * opacity 0.6, which killed the photograph twice over. This is a gradient
 * in the harbour's own blue-black, so the picture reads through it.
 *
 * The alphas are not a guess. Sampling the hero image through this gradient
 * at 1200 points across the band the text occupies, and computing contrast
 * against white, gives a worst case of 5.64:1 — so the subtitle and the
 * badges clear WCAG AA for normal text, not merely the large-text
 * threshold. An earlier, lighter version measured 3.82:1 and passed only
 * for the heading.
 */
.mg-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgb(8 24 40 / 0.72) 0%,
    rgb(8 24 40 / 0.6) 45%,
    rgb(8 24 40 / 0.78) 100%
  );
}

.mg-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.mg-badges li {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.6875rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.14);
  border: 1px solid rgb(255 255 255 / 0.24);
  font-size: 0.8125rem;
}

/* One primary action, one deliberately quieter secondary. */
.mg-cta-primary {
  background: #f59e0b;
  color: #1f1300;
  font-weight: 700;
  border: 1px solid #f59e0b;
}

.mg-cta-primary:hover {
  background: #fbbf24;
}

.mg-cta-secondary {
  background: rgb(255 255 255 / 0.12);
  color: #fff;
  border: 1px solid rgb(255 255 255 / 0.55);
  font-weight: 600;
}

.mg-cta-secondary:hover {
  background: rgb(255 255 255 / 0.22);
}

/* ---------------------------------------------------------------- *
 * At a glance
 * ---------------------------------------------------------------- */
.mg-glance {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 40rem) {
  .mg-glance {
    grid-template-columns: repeat(4, 1fr);
  }
}

.mg-glance > div {
  padding: 0.875rem 1rem;
  border: 1px solid var(--mg-line);
  border-radius: 0.75rem;
  background: #fff;
}

.mg-glance dt {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--mg-ink-soft);
}

.mg-glance dd {
  margin: 0.1875rem 0 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--mg-ink);
}

/* ---------------------------------------------------------------- *
 * The day plan
 *
 * This is the section the hero's primary button now scrolls to. It used to
 * scroll to "Activities and excursions", which is a catalogue of optional
 * add-ons rather than a plan, so the one thing the page asked people to do
 * led them away from the route.
 * ---------------------------------------------------------------- */
.mg-plan-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
}

.mg-plan-tab {
  min-height: 44px;
  padding: 0 1rem;
  border-radius: 999px;
  border: 1px solid var(--mg-line);
  background: #fff;
  color: var(--mg-ink);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}

.mg-plan-tab[aria-selected="true"] {
  background: var(--mg-sea);
  border-color: var(--mg-sea);
  color: #fff;
}

.mg-plan-tab:focus-visible {
  outline: 2px solid var(--mg-sea);
  outline-offset: 2px;
}

.mg-stops {
  display: grid;
  gap: 0.875rem;
  margin: 0;
  padding: 0;
  list-style: none;
  /* No accordion: the route reads without anyone having to open anything. */
}

.mg-stop {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.875rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--mg-line);
  border-left: 4px solid var(--mg-sea);
  border-radius: 0.75rem;
  background: #fff;
}

.mg-stop-n {
  grid-row: span 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #e0f2fe;
  color: #075985;
  font-weight: 800;
  font-size: 0.875rem;
}

.mg-stop h3 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--mg-ink);
}

.mg-stop-meta {
  margin: 0.125rem 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #075985;
}

.mg-stop p:last-child {
  margin: 0.375rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #374151;
}

/* The question each stop answers, so the plan reads as decisions. */
.mg-stop-q {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--mg-ink-soft);
}

.mg-plan-note {
  margin: 1rem 0 0;
  padding: 0.75rem 0.875rem;
  border-radius: 0.5rem;
  background: #fffbeb;
  border: 1px solid #fde68a;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #3f3016;
}

/*
 * `hidden` sets display:none in the UA stylesheet, but .mg-stop declares
 * display:grid at equal specificity and later in the cascade, so it won.
 * The half-day toggle set the attribute and nothing disappeared.
 */
.mg-stop[hidden] {
  display: none;
}

/*
 * The badge sits in column one and spans the four rows its siblings occupy
 * (heading, timing, body, question). `1 / -1` does not work here: the rows
 * are implicit, so -1 resolves to the end of the explicit grid and the span
 * collapses, dropping every other child back into column one.
 */
.mg-stop-n {
  grid-column: 1;
  grid-row: span 4;
  align-self: start;
}

.mg-stop > :not(.mg-stop-n) {
  grid-column: 2;
}

/* ---------------------------------------------------------------- *
 * Skip link — the page had none, so keyboard users had to tab the
 * whole header on every visit.
 * ---------------------------------------------------------------- */
.mg-skip {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: 0.625rem 1rem;
  background: var(--mg-sea);
  color: #fff;
  font-weight: 600;
  border-radius: 0 0 0.5rem 0;
}

.mg-skip:focus {
  left: 0;
  top: 0;
}

/* ---------------------------------------------------------------- *
 * Map facade
 *
 * The Google embed loaded on every page view — several hundred KB and a
 * third-party connection — for a map most visitors never touch. This shows
 * a still and only loads the real thing when asked, which also means the
 * page no longer contacts Google before the reader has chosen to.
 * ---------------------------------------------------------------- */
.mg-mapwrap {
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid var(--mg-line);
}

.mg-mapfacade {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 220px;
}

.mg-mapfacade img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.75) brightness(0.6);
}

.mg-mapload {
  position: relative;
  min-height: 44px;
  padding: 0 1.25rem;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--mg-ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px rgb(15 23 42 / 0.3);
}

.mg-mapload:hover {
  background: #f3f4f6;
}

.mg-mapload:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.mg-mapnote {
  position: relative;
  margin: 0.625rem 0 0;
  padding: 0 1rem;
  font-size: 0.75rem;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.6);
}

.mg-mapwrap iframe {
  display: block;
  width: 100%;
  height: 350px;
  border: 0;
}

/* ---------------------------------------------------------------- *
 * Motion preferences
 * ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------- *
 * Sticky action bar
 *
 * This slot used to hold a floating WhatsApp button pointing at
 * https://wa.me/34600000000 — a placeholder number, so the one persistent
 * call to action on the page went nowhere. It now carries the two things
 * a visitor actually wants within reach: the route and how to get there.
 * ---------------------------------------------------------------- */
.mg-actionbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem clamp(0.75rem, 3vw, 1rem);
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
  background: rgb(255 255 255 / 0.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--mg-line);
  transform: translateY(110%);
  transition: transform 0.2s ease;
}

/* The pages' own scroll handler adds .visible past 500px. */
.mg-actionbar.visible {
  transform: translateY(0);
}

@media (min-width: 48rem) {
  .mg-actionbar {
    display: none;
  }
}

.mg-actionbar a {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border-radius: 0.625rem;
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
}

.mg-actionbar a:first-child {
  background: var(--mg-sea);
  color: #fff;
}

.mg-actionbar a:last-child {
  background: #fff;
  color: var(--mg-ink);
  border: 1px solid var(--mg-line);
}

.mg-actionbar a:focus-visible {
  outline: 2px solid var(--mg-sea);
  outline-offset: 2px;
}

/* Keep the bar from covering the end of the page. */
@media (max-width: 47.99rem) {
  body {
    padding-bottom: 4.5rem;
  }
}

/* ---------------------------------------------------------------- *
 * Sources
 * ---------------------------------------------------------------- */
.mg-sources {
  max-width: 44rem;
  margin-inline: auto;
  padding: 1.25rem;
  border: 1px solid var(--mg-line);
  border-left: 4px solid var(--mg-sea);
  border-radius: 0.75rem;
  background: #f8fafc;
}

.mg-sources h2 {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--mg-ink);
}

.mg-sources p {
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--mg-ink-soft);
}

.mg-sources ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.25rem;
}

.mg-sources a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: #0369a1;
  font-size: 0.9375rem;
}

/* ---------------------------------------------------------------- *
 * Reading comfort
 *
 * Body copy ran the full width of a 72rem container and sat at #4b5563 or
 * lighter on white. Both are fixed here: measure capped near 70 characters,
 * and the default body colour darkened to clear AA comfortably.
 * ---------------------------------------------------------------- */
.mg-sources p,
#plan p,
#glance + section p {
  max-width: 70ch;
}

.text-gray-600,
.text-gray-700 {
  color: #374151;
}
