/*
Theme Name: Anza Surf Experience
Theme URI: https://anzasurfexperience.com
Author: Anza Surf Experience
Description: Anza Surf Experience — surf house & hostel in Anza, Agadir. Blue accent on a clean neutral palette, Jost/Inter type, low-radius corners, no shadows. Compatible with MotoPress Hotel Booking, TranslatePress and WooCommerce.
Version: 7.5.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: anza
*/

/* ------------------------------------------------------------------
   ANZA design tokens
   v7.0 — blue-theme pivot. Palette and type swapped from the warm
   editorial system (Fraunces/DM Sans, cream/brown-gold) to a cool
   neutral + blue system (Jost/Inter, slate/blue), ported from a
   reference build the client approved.

   v7.6 — buttons briefly went to a full pill radius (999px), then back
   to --radius (8px): client feedback was "little rounded," not fully
   rounded. --radius stays the single source for every button and
   control's corner. Cards that need the reference's elevated look (the
   packages/offers cards) get their own shadow + hover lift below;
   everything else keeps the flat, no-shadow treatment.
   ------------------------------------------------------------------ */
:root {
  --anza-ink: #0f172a;
  --anza-ink-soft: #475569;
  --anza-cream: #ffffff;
  --anza-paper: #f8fafc;
  --anza-sand: #f0f9ff;
  --anza-line: #e2e8f0;
  --anza-line-soft: #eef2f7;
  --anza-accent: #3b82f6; /* primary blue — links, focus states, price accents, active states */
  --anza-accent-dark: #0369a1; /* hover/pressed state for accent buttons and links */
  --anza-accent-light: #f0f9ff; /* light blue tint — hover backgrounds */
  --radius: 8px; /* low radius everywhere — not zero, not a full pill */
  --radius-sm: 6px;
  --font-display: "Jost", -apple-system, system-ui, sans-serif;
  --font-sans: "Inter", -apple-system, system-ui, sans-serif;
  /* Spacing scale — used for new/adjusted rules going forward. Existing
     rules use their own established values (a mid-project global find/
     replace risks regressing spacing that's already correct on the
     live site), so this is applied incrementally, not retrofitted
     everywhere in one pass. */
  --space-1: .5rem;   /* 8px */
  --space-2: 1rem;    /* 16px */
  --space-3: 1.5rem;  /* 24px */
  --space-4: 2.5rem;  /* 40px */
  --space-5: 4rem;    /* 64px */
  --space-6: 6rem;    /* 96px */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* MotoPress wraps things like "par nuit" in <abbr>, which browsers give a
   dotted underline by default (their native styling for abbreviations).
   That's why it kept appearing under prices everywhere — it was never
   something in this theme's CSS to begin with. Fixed globally, once. */
abbr[title] { text-decoration: none; }

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
  background: var(--anza-cream);
  color: var(--anza-ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
}

a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--anza-ink); color: var(--anza-cream); }

/*
 * v7.2 — global radius safety net.
 *
 * The "some buttons square, some round" bug happened because every
 * radius fix so far was applied class-by-class across two large
 * stylesheets, and it's too easy for one MotoPress-generated button or
 * field to not match any selector that was hand-edited. This is a
 * low-specificity catch-all: it sets --radius on every native button/
 * input/select/textarea and every .button-class element by default,
 * so a NEW or missed control is never square by accident. Any rule
 * elsewhere that sets a more specific colour/border still wins the
 * cascade on specificity — this only ever fills in a radius that
 * would otherwise be un-set.
 */
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="search"],
select,
textarea,
.button,
a.button {
  border-radius: var(--radius);
}

/* ---- Layout ---- */
.container-anza {
  width: 100%;
  max-width: 1360px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}
@media (min-width: 768px)  { .container-anza { padding-inline: 2.5rem; } }
@media (min-width: 1200px) { .container-anza { padding-inline: 4rem; } }

.grid-12 { display: grid; gap: 2.5rem; }
@media (min-width: 768px) {
  .grid-12 { grid-template-columns: repeat(12, 1fr); gap: 4rem; }
  .col-3 { grid-column: span 3; }
  .col-4 { grid-column: span 4; }
  .col-5 { grid-column: span 5; }
  .col-7 { grid-column: span 7; }
  .col-8 { grid-column: span 8; }
  .col-9 { grid-column: span 9; }
}

/* ---- Type: four sizes ---- */
.type-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.75rem, 5.4vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.type-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.55rem, 2.2vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -0.012em;
}
.type-body { font-size: 1.0625rem; line-height: 1.65; }
.type-small { font-size: 0.8125rem; line-height: 1.55; color: var(--anza-ink-soft); }
.type-label {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--anza-ink-soft);
}
.italic { font-style: italic; }

/* ---- Links & buttons: two treatments only ---- */
.link {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--anza-ink); text-decoration: none;
  padding-bottom: 2px; border-bottom: 1px solid var(--anza-ink);
  transition: opacity .2s ease;
}
.link:hover { opacity: .55; }

.link-muted {
  color: var(--anza-ink-soft); text-decoration: none;
  transition: color .2s ease;
}
.link-muted:hover { color: var(--anza-ink); }

/* v7.0 — primary buttons are accent-filled (blue), not ink-filled. In
   the client's reference the blue *is* the primary action colour, not
   an accent reserved for focus states — so every real booking/contact
   CTA on the site (this class, the header CTA, MotoPress's own book
   buttons) was moved from --anza-ink to --anza-accent. Non-action
   dark fills (hero background, mobile nav panel, skip link, calendar
   chrome) were deliberately left on --anza-ink. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  background: var(--anza-accent); color: var(--anza-cream);
  padding: 1.05rem 1.75rem;
  font-family: var(--font-sans); font-size: .78rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid var(--anza-accent); border-radius: var(--radius);
  cursor: pointer; text-decoration: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn:hover { background: var(--anza-accent-dark); border-color: var(--anza-accent-dark); color: var(--anza-cream); transform: translateY(-2px); }

/* ---- Header ---- */
.site-header {
  position: absolute; inset-inline: 0; top: 0; z-index: 200;
  color: var(--anza-ink);
  padding-top: 1.75rem;
}
/* v4.3 — two header fixes.

   1. z-index raised 50 -> 200. MotoPress's datepicker popup and some
      plugin overlays sit in the 100–150 range, which could paint over
      the nav. 200 keeps the header above them without reaching the
      lightbox (9999).

   2. Safe space under the header on pages with no hero. .site-header is
      position:absolute, so it occupies ZERO height — pages that have a
      hero absorb that through the hero's own top padding, but any page
      without one has its content start at y=0 and slide underneath the
      nav. This reserves the header's height on exactly those pages. */
body:not(.home):not(.has-page-hero) .site-main,
body:not(.home):not(.has-page-hero) .anza-page,
body:not(.home):not(.has-page-hero) .anza-mphb-archive,
body:not(.home):not(.has-page-hero) .anza-single-room,
body:not(.home):not(.has-page-hero) main {
  padding-top: 8rem;
}
@media (min-width: 768px) {
  body:not(.home):not(.has-page-hero) .site-main,
  body:not(.home):not(.has-page-hero) .anza-page,
  body:not(.home):not(.has-page-hero) .anza-mphb-archive,
  body:not(.home):not(.has-page-hero) .anza-single-room,
  body:not(.home):not(.has-page-hero) main {
    padding-top: 9rem;
  }
}
.home .site-header, .has-page-hero .site-header { color: var(--anza-cream); }
.site-header .container-anza { display: flex; align-items: center; justify-content: space-between; }
.site-logo { color: currentColor; text-decoration: none; display: inline-flex; flex-direction: column; line-height: .95; }
.site-logo span { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; letter-spacing: .02em; }
.site-nav ul { display: none; list-style: none; gap: 2rem; align-items: center; }
@media (min-width: 1024px) { .site-nav ul { display: flex; } }
.site-nav a { font-size: .7rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: currentColor; text-decoration: none; transition: opacity .2s ease; }
.site-nav a:hover { opacity: .6; }
.header-book { font-size: .7rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: currentColor; text-decoration: none; }
.header-book:hover { opacity: .6; }

/* ---- Hero ---- */
.hero {
  position: relative; isolation: isolate;
  min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--anza-ink); color: var(--anza-cream);
  overflow: hidden;
}
/* v2.22 — on short/narrow mobile viewports, the h1 + subtitle + full
   MotoPress search form (stacked fields) together are taller than the
   viewport itself. With justify-content:flex-end packing everything to
   the bottom of a box capped at 100svh, that overflow pushes the h1 up
   past the top of the section — directly into the transparent absolute
   header, which is what caused the visible text collision. Below 640px,
   drop the forced full-height box and let the section size itself to its
   real content instead, with explicit top padding so content can never
   start above the header regardless of how tall the search form gets. */
@media (max-width: 640px) {
  .hero { min-height: 0; padding-top: 7.5rem; }
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media iframe, .hero-media img {
  position: absolute; top: 50%; left: 50%;
  width: 177.78vh; min-width: 100%; height: 56.25vw; min-height: 100%;
  transform: translate(-50%, -50%); border: 0; object-fit: cover; pointer-events: none;
}
.hero-overlay {
  position: absolute; inset: 0; z-index: -1;
  /* v2.24 — the video background can hit an oddly bright/glitchy frame
     between loops (screenshot showed a jarring rainbow-artifact frame).
     The overlay used to nearly disappear in the middle (opacity dipped to
     ~.45 at the 40% mark), which is exactly where that kind of frame
     showed through hardest. Raised the minimum darkness across the whole
     gradient — never lighter than .55 — so no single video frame, however
     rough, can dominate the hero. */
  background: linear-gradient(to bottom, rgba(15,23,42,.72), rgba(15,23,42,.55) 40%, rgba(15,23,42,.78));
}
.hero-inner { padding-bottom: 3.5rem; }
@media (min-width: 768px) { .hero-inner { padding-bottom: 5rem; } }
.hero h1 { color: var(--anza-cream); }
.hero .type-small { color: rgba(255,255,255,.7); }

/* ---- Sections ---- */
.section { border-top: 1px solid var(--anza-line-soft); }
.section-pad { padding-block: 6rem; }
@media (min-width: 768px) { .section-pad { padding-block: 8rem; } }
.bg-paper { background: var(--anza-paper); }

.rule-y > * + * { border-top: 1px solid var(--anza-line-soft); }
.entry-row { padding-block: 3.5rem; }
@media (min-width: 768px) { .entry-row { padding-block: 5rem; } }

/* ---- Page banner (subpages) ---- */
.page-banner { padding: 10rem 0 5rem; }
@media (min-width: 768px) { .page-banner { padding: 12rem 0 7rem; } }

/* ---- v2.2: shared short hero + breadcrumbs for every inner page ---- */
.page-hero {
  position: relative; isolation: isolate;
  /* v2.25 — v2.19's clamp(420px, 55vh, 620px) put ~600px of near-empty
     dark space above every inner-page title (Résultats de recherche,
     Expériences, Location, etc.), pushing real content far below the
     fold for no informational gain — these are utility/archive pages,
     not cinematic landing moments. Cut the ceiling and the viewport
     share so the hero introduces the page without dominating it. */
  min-height: clamp(220px, 26vh, 330px);
  display: flex; align-items: flex-end;
  background-color: var(--anza-ink);
  background-size: cover; background-position: center;
  color: var(--anza-cream);
  overflow: hidden;
}
/* Single room / single service / single post pages — as specified. */
.page-hero--compact { min-height: clamp(240px, 28vh, 340px); }
.page-hero--flat { background-image: none !important; }
.page-hero__overlay {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(15,23,42,.55), rgba(15,23,42,.22) 45%, rgba(15,23,42,.68));
}
/* v3.8 — header legibility over photo heroes.
   The site header is cream text laid over the top of the hero. On the
   dark flat heroes (Chambres, Packages, Journal…) that's fine, but the
   Contact hero uses a bright, white-walled photo, and the gradient above
   only darkens the top to 55% — not enough for cream text to stay
   readable, so the nav effectively disappeared there.
   This adds a dedicated scrim across just the top band, sized to the
   header, so the nav has a guaranteed dark backing on ANY featured
   image, however bright, without darkening the rest of the hero or
   touching the flat-hero pages' appearance. */
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: clamp(140px, 20vh, 220px);
  z-index: -1;
  background: linear-gradient(to bottom, rgba(15,23,42,.78), rgba(15,23,42,0));
  pointer-events: none;
}
.page-hero__inner { padding-block: 3.75rem 1.75rem; width: 100%; }
.page-hero .type-display {
  color: var(--anza-cream);
  /* v2.25 — the 8rem ceiling paired with the shorter hero made headings
     feel oversized relative to the available space (see brief: "typography
     sometimes too large for the space"). Trimmed the top end while keeping
     the same responsive floor. */
  font-size: clamp(2.75rem, 6vw, 6rem);
  line-height: .95;
  max-width: 1000px;
}
.page-hero .type-label { color: rgba(255,255,255,.75); margin-bottom: .5rem; }
.page-hero__subtitle { max-width: 38rem; margin-top: 1.25rem; color: rgba(255,255,255,.88); }
@media (min-width: 768px) { .page-hero__inner { padding-block: 4.5rem 2rem; } }

.breadcrumbs { margin-bottom: 1.5rem; }
.breadcrumbs ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  list-style: none; margin: 0; padding: 0;
  font: 500 .68rem/1.3 var(--font-sans); letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.75);
}
.breadcrumbs li { display: flex; align-items: center; gap: .4rem; }
.breadcrumbs a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.breadcrumbs a:hover { border-color: currentColor; }
.breadcrumbs__sep { opacity: .5; }
.breadcrumbs [aria-current="page"] { color: var(--anza-cream); }

/* ---- System pages / content widths ---- */
.anza-page__header,
.anza-mphb-system-page .anza-page__header { padding: 10rem 0 3rem; }
.anza-page__content { padding-bottom: 8rem; }
.anza-page__reading { max-width: 44rem; }
.anza-mphb-system-page__content { max-width: 1120px; margin: 0 auto; }

/* ---- v2.23: checkout page polish ----
   [mphb_checkout] has no template override in this theme (I don't have
   its exact markup to safely restructure into "cards" without guessing),
   so this is presentation-only polish scoped to our own content wrapper —
   generic element styling, not dependent on MotoPress's specific class
   names, same approach already proven for the calendar and price-period
   fixes elsewhere in this file. */
.anza-mphb-system-page__content table {
	width: 100%;
	max-width: 560px;
	border-collapse: collapse;
	margin: 1.5rem 0;
	font-size: .92rem;
}
.anza-mphb-system-page__content table th,
.anza-mphb-system-page__content table td {
	padding: .6em .25em;
	text-align: left;
	border-bottom: 1px solid var(--anza-line-soft);
}
.anza-mphb-system-page__content table tr:last-child th,
.anza-mphb-system-page__content table tr:last-child td { font-weight: 600; border-bottom: 2px solid var(--anza-ink); }
.anza-mphb-system-page__content h2,
.anza-mphb-system-page__content h3 {
	font: 400 1.4rem/1.2 var(--font-display);
	margin: var(--space-5) 0 var(--space-2);
}
.anza-mphb-system-page__content > *:first-child h2,
.anza-mphb-system-page__content > *:first-child h3 { margin-top: 0; }
.anza-mphb-system-page__content input[type="checkbox"] { width: auto; min-height: auto; margin-right: .5rem; vertical-align: middle; }

/* ---- Room / experience media ---- */
/* v7.5 — this class had no radius at all (only width/object-fit), so
   every full-bleed photo using it — the rooftop image, the Journal
   listing thumbnails, the single-post featured image — stayed
   square-cornered through every previous radius pass, which only
   touched bordered card/button rules. */
.media-cover { width: 100%; object-fit: cover; border-radius: var(--radius); }
.ratio-43  { aspect-ratio: 4 / 3; }
.ratio-45  { aspect-ratio: 4 / 5; }
.ratio-169 { aspect-ratio: 16 / 9; }
.media-zoom { overflow: hidden; }
.media-zoom img { transition: transform .8s ease-out; }
.media-zoom:hover img { transform: scale(1.02); }

/* ---- Forms ---- */
.anza-input, .wpforms-container input[type="text"], .wpforms-container input[type="email"],
.wpforms-container textarea, .mphb-search-form input, .mphb-search-form select {
  background: transparent; border: 0; border-bottom: 1px solid var(--anza-line);
  padding: .8rem 0; font-family: var(--font-sans); font-size: .9375rem;
  color: var(--anza-ink); outline: none; border-radius: 0; width: 100%;
  transition: border-color .2s ease;
}
.anza-input:focus { border-bottom-color: var(--anza-ink); }

/* v7.6 — Contact Form 7 embeds (e.g. the Journal post CTAs) were never
   themed: only .wpforms-container was covered, so any [Your name] /
   [Your email] / [Subject] / [Your message] CF7 shortcode rendered with
   raw browser defaults — a black-outlined input box and a grey native
   <input type="submit"> button next to fully-designed page content.
   Styled to the same field/button language as the rest of the site. */
.wpcf7-form { margin-top: var(--space-3); }
.wpcf7-form p { margin-bottom: var(--space-2); }
.wpcf7-form label { display: block; font: 500 .7rem/1.4 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--anza-ink-soft); margin-bottom: .5rem; }
.wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"], .wpcf7-form input[type="number"], .wpcf7-form textarea, .wpcf7-form select {
  background: var(--anza-cream); border: 1px solid var(--anza-line); border-radius: var(--radius);
  padding: .8rem 1rem; font-family: var(--font-sans); font-size: .9375rem;
  color: var(--anza-ink); outline: none; width: 100%; min-height: 44px;
  transition: border-color .2s ease;
}
.wpcf7-form textarea { min-height: 9rem; resize: vertical; }
.wpcf7-form input:focus, .wpcf7-form textarea:focus, .wpcf7-form select:focus { border-color: var(--anza-accent); }
.wpcf7-form input[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  background: var(--anza-accent); color: var(--anza-cream);
  padding: 1.05rem 1.75rem; margin-top: .5rem;
  font-family: var(--font-sans); font-size: .78rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid var(--anza-accent); border-radius: var(--radius);
  cursor: pointer; width: auto; min-height: 0;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.wpcf7-form input[type="submit"]:hover { background: var(--anza-accent-dark); border-color: var(--anza-accent-dark); transform: translateY(-2px); }
.wpcf7-response-output { border-radius: var(--radius); margin-top: var(--space-2) !important; font-size: .875rem; }
.wpcf7-not-valid-tip { color: #dc2626; font-size: .8rem; margin-top: .35rem; }

/* ---- MotoPress Hotel Booking: restrained overrides ---- */
.mphb-booking-form .mphb-book-button,
.mphb-search-form button[type="submit"],
.mphb_sc_search-form .button {
  background: var(--anza-accent) !important; color: var(--anza-cream) !important;
  border: 1px solid var(--anza-accent) !important; border-radius: var(--radius) !important;
  text-transform: uppercase; letter-spacing: .14em; font-size: .78rem;
}
.mphb-room-type-title a { font-family: var(--font-display); font-weight: 400; text-decoration: none; }
/* v7.2 — price numbers are accent-coloured, matching the reference:
   every real price on the site (room cards, single room, checkout
   total, package cards) is a live MotoPress figure, so highlighting
   it in the brand blue draws the eye to real, calculated numbers. */
.mphb-price { font-family: var(--font-display); color: var(--anza-accent); }

/* ---- Footer ---- */
.site-footer { border-top: 1px solid var(--anza-line-soft); padding-block: 4rem 2rem; }
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: .75rem; }
.footer-bottom {
  margin-top: 5rem; padding-top: 2rem;
  border-top: 1px solid var(--anza-line-soft);
  display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between;
}

/* ---- WP defaults kept quiet ---- */
.entry-content p { margin-bottom: 1.25rem; }
.entry-content h2, .entry-content h3 { margin: 2.5rem 0 1rem; }
.wp-block-image img { border-radius: 0; }
.alignwide, .alignfull { border-radius: 0; }

/* ---- v2.4: reviews strip ---- */
.anza-reviews__track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding-bottom: .5rem;
  margin: 0 -1.5rem;
  padding-inline: 1.5rem;
}
@media (min-width: 768px) { .anza-reviews__track { margin: 0; padding-inline: 0; } }
.anza-reviews__card {
  flex: 0 0 min(320px, 82vw);
  scroll-snap-align: start;
  background: var(--anza-cream);
  border: 1px solid var(--anza-line); border-radius: var(--radius);
  padding: 2rem;
  margin: 0;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) { .anza-reviews__card { flex-basis: calc((100% - 3rem) / 3); } }
.anza-reviews__stars { color: var(--anza-accent); letter-spacing: .2em; font-size: .85rem; margin-bottom: 1rem; }
.anza-reviews__text { margin: 0; color: var(--anza-ink); flex: 1; }
.anza-reviews__text::before { content: '“'; color: var(--anza-accent); }
.anza-reviews__text::after { content: '”'; color: var(--anza-accent); }
.anza-reviews__author { margin-top: 1.5rem; font-style: normal; }
/* v7.1 — average-rating summary line above the review cards. */
.anza-reviews__summary { font-size: 1rem; color: var(--anza-ink-soft); }
.anza-reviews__summary-stars { color: var(--anza-accent); letter-spacing: .15em; margin-right: .5rem; }
.anza-reviews__country { color: var(--anza-ink-soft); }

/* ---- v2.6: rentals grid ---- */
.anza-rentals__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 640px) { .anza-rentals__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .anza-rentals__grid { grid-template-columns: repeat(4, 1fr); } }
.anza-rentals__card { border: 1px solid var(--anza-line); border-radius: var(--radius); padding: 1.75rem; display: flex; flex-direction: column; }
.anza-rentals__name { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; margin: 0 0 .6rem; }
.anza-rentals__desc { color: var(--anza-ink-soft); margin: 0 0 1.25rem; }
/* v7.7 — "price at the bottom": some items (board, wetsuit) carry a
   deposit + a sizes line after the price; others (poncho, towel) don't.
   flex:1 was on .anza-rentals__desc, which only pins whatever comes
   right after IT to the bottom — for items with a trailing deposit/
   sizes line, that pushed price up above those lines instead, so price
   landed on a different baseline card to card. Moving flex:1 (as
   margin-top:auto) onto the price itself pins the price line to a
   consistent bottom-anchored row on every card; deposit/sizes, when
   present, simply continue below it. */
.anza-rentals__price { font-family: var(--font-display); font-size: 1.5rem; margin: auto 0 0; }
.anza-rentals__unit { font-family: var(--font-sans); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--anza-ink-soft); margin-left: .35rem; }
.anza-rentals__deposit, .anza-rentals__sizes { margin: .5rem 0 0; color: var(--anza-ink-soft); }

/* ---- v2.9: real MotoPress [mphb_services] list ----
   Styled generically (by element, scoped to our own wrapper) rather than
   by guessing MotoPress's internal class names, the same approach used to
   fix the availability calendar — holds up regardless of exact markup. */
.anza-services__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (min-width: 640px) { .anza-services__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .anza-services__list { grid-template-columns: repeat(4, 1fr); } }
.anza-services__list > * {
	border: 1px solid var(--anza-line); border-radius: var(--radius);
	padding: 1.5rem;
	list-style: none;
}
.anza-services__list img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; margin-bottom: 1rem; }
.anza-services__list h1,
.anza-services__list h2,
.anza-services__list h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; margin: 0 0 .5rem; }
.anza-services__list p { color: var(--anza-ink-soft); font-size: .88rem; margin: 0 0 .5rem; }
.anza-services__list .mphb-price,
.anza-services__list [class*="price"] { font-family: var(--font-display); font-size: 1.3rem; color: var(--anza-accent); }

/* ---- v2.10: experiences grid (fallback when no MotoPress Services exist yet) ---- */
.anza-experiences__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
@media (min-width: 640px) { .anza-experiences__grid { grid-template-columns: repeat(2, 1fr); } }
.anza-experiences__card { border: 1px solid var(--anza-line); border-radius: var(--radius); padding: 2rem; display: flex; flex-direction: column; }
.anza-experiences__tag { margin: 0 0 .75rem; }
.anza-experiences__name { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; margin: 0 0 .75rem; }
.anza-experiences__desc { color: var(--anza-ink-soft); margin: 0 0 1.5rem; flex: 1; }
.anza-experiences__price { font-family: var(--font-display); font-size: 1.75rem; margin: 0 0 1.25rem; }

/* v7.6 — packages/offers cards, styled to match the reference build:
   shadow + lift on hover, scoped to this class only (not
   .anza-experiences__card in general, which anza_experiences_grid()
   also uses on the homepage with no image and no shadow — that usage
   is untouched). .anza-package__media / __actions / __cta / __secondary
   already have their full styling in assets/motopress.css (v5.2/v5.4) —
   deliberately not duplicated here; see that file for the radius/bleed
   fixes made alongside this pass. */
.anza-page-offres-et-packages .anza-experiences__card,
.anza-package-page .anza-experiences__card {
	overflow: hidden;
	border-color: var(--anza-line);
	border-radius: 1.25rem;
	box-shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
	transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}
.anza-page-offres-et-packages .anza-experiences__card:hover,
.anza-package-page .anza-experiences__card:hover {
	transform: translateY(-4px);
	border-color: transparent;
	box-shadow: 0 20px 25px -5px rgba(15, 23, 42, .1), 0 8px 10px -6px rgba(15, 23, 42, .06);
}

/* ---- v2.16: "Why Choose Us" homepage section ---- */
/* v7.1 — icon-in-rounded-box, matching the reference build: a light
   accent-tinted square behind a simple line icon, 4-across on desktop.
   (v6.2/v7.0 tried a numbered watermark list instead — superseded.) */
.anza-why__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4) var(--space-3);
}
@media (min-width: 640px)  { .anza-why__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .anza-why__grid { grid-template-columns: repeat(4, 1fr); } }
.anza-why__icon-box {
	display: inline-flex; align-items: center; justify-content: center;
	width: 3.25rem; height: 3.25rem;
	background: var(--anza-accent-light); color: var(--anza-accent);
	border-radius: var(--radius);
	margin-bottom: var(--space-2);
}
.anza-why__title { font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; margin: 0 0 var(--space-1); }
.anza-why__text { color: var(--anza-ink-soft); line-height: 1.6; font-size: .92rem; max-width: 22rem; }

/* ---- v2.16: packages checklist ---- */
.anza-packages__checklist { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.anza-packages__checklist li { position: relative; padding-left: 1.4rem; margin-bottom: .5rem; color: var(--anza-ink-soft); font-size: .9rem; line-height: 1.5; }
.anza-packages__checklist li::before { content: '✓'; position: absolute; left: 0; color: var(--anza-accent); font-weight: 600; }

/* ---- v2.17: single MotoPress Service page ---- */
.anza-single-service__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
	padding-block: var(--space-5);
}
@media (min-width: 980px) { .anza-single-service__layout { grid-template-columns: minmax(0, 7fr) minmax(280px, 4fr); } }
.anza-single-service__image { aspect-ratio: 3 / 2; overflow: hidden; margin-bottom: var(--space-4); background: var(--anza-sand); }
.anza-single-service__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.anza-single-service__booking-inner { position: sticky; top: 2rem; border: 1px solid var(--anza-line); border-radius: var(--radius); background: var(--anza-paper); padding: var(--space-4); }
.anza-single-service__booking-inner .anza-services__list--single { margin-top: var(--space-3); }
.anza-single-service__booking-inner .anza-services__list--single > * { border: 0; padding: 0; }

/* ---- v2.20: package detail page pieces (used by the Content Manager plugin) ---- */
.anza-experiences__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); margin-bottom: var(--space-2); background: var(--anza-sand); }
.anza-experiences__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.anza-experiences__badge {
	position: absolute; left: var(--space-2); top: var(--space-2);
	padding: .4rem .7rem;
	background: var(--anza-paper);
	color: var(--anza-ink);
	font: 500 .64rem/1 var(--font-sans);
	letter-spacing: .1em;
	text-transform: uppercase;
}
.anza-package-program { margin-top: var(--space-5); }
.anza-package-program__list { margin-top: var(--space-3); border-top: 1px solid var(--anza-line-soft); }
.anza-package-program__step {
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: var(--space-3);
	padding-block: var(--space-3);
	border-bottom: 1px solid var(--anza-line-soft);
}
.anza-package-program__day { font: 500 .72rem/1.4 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--anza-ink-soft); }
.anza-package-program__body h3 { font: 400 1.1rem/1.3 var(--font-display); margin: 0 0 .4rem; }
.anza-package-program__body p { color: var(--anza-ink-soft); line-height: 1.6; margin: 0; }
.anza-package-inclusions {
	margin-top: var(--space-5);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
}
@media (min-width: 640px) { .anza-package-inclusions { grid-template-columns: 1fr 1fr; } }
.anza-packages__checklist--muted li { color: var(--anza-ink-soft); opacity: .75; }
.anza-packages__checklist--muted li::before { content: '–'; color: var(--anza-ink-soft); }
.anza-package-room { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--anza-line-soft); }

/* ---- v2.15: Journal (home.php) ---- */
.anza-journal__list { padding-block: var(--space-4) var(--space-5); }
.anza-journal__pagination { margin-top: var(--space-5); display: flex; justify-content: center; gap: var(--space-2); }

/* ---- v7.3: real Google Maps embed (Contact page) ---- */
.anza-location-map__frame {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--anza-line);
  border-radius: var(--radius);
  background: var(--anza-paper);
}
@media (min-width: 768px) { .anza-location-map__frame { aspect-ratio: 16 / 10; } }
.anza-location-map__frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---- v2.6: FAQ accordion (native <details>, no JS) ---- */
.anza-faq__list { border-top: 1px solid var(--anza-line-soft); }
.anza-faq__item { border-bottom: 1px solid var(--anza-line-soft); padding: 1.25rem 0; }
.anza-faq__question {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--anza-ink);
}
.anza-faq__question::-webkit-details-marker { display: none; }
.anza-faq__question::after {
  content: '+';
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: 1.3rem;
  line-height: 1;
  color: var(--anza-ink-soft);
  transition: transform .2s ease;
}
.anza-faq__item[open] .anza-faq__question::after { content: '−'; }
.anza-faq__answer { margin: 1rem 0 0; color: var(--anza-ink-soft); }

/* ==================================================================
   v4.3 — hero spacing.

   The band between the header and the breadcrumb was oversized: the
   hero reserves its own top padding to clear the absolutely-positioned
   header, and that clearance was set generously enough to leave an
   obvious empty strip on every inner page. Tightened, with the header
   clearance now expressed explicitly so it can't drift again.
   ================================================================== */
:root { --anza-header-clearance: 7rem; }
@media (min-width: 768px) { :root { --anza-header-clearance: 7.5rem; } }

.page-hero__inner {
  padding-top: var(--anza-header-clearance);
  padding-bottom: 1.5rem;
}
@media (min-width: 768px) {
  .page-hero__inner { padding-bottom: 1.75rem; }
}
.page-hero .breadcrumbs { margin-bottom: .85rem; }
.page-hero__subtitle { margin-top: .9rem; }

/* ==================================================================
   v4.6 — breathing room after the hero, on every inner page.

   `.anza-page__content` set `padding-bottom: 8rem` but no padding-top,
   so page content started flush against the bottom edge of the hero —
   the eyebrow ("ANZA, AGADIR", "À LA JOURNÉE") sat right on the seam.
   The archive had the same problem: the search form began immediately
   under the hero.

   One token so every template opens with the same gap and they can't
   drift apart again.
   ================================================================== */
:root { --anza-after-hero: 3.5rem; }
@media (min-width: 768px) { :root { --anza-after-hero: 4.5rem; } }

.anza-page__content { padding-top: var(--anza-after-hero); }
.has-page-hero .anza-mphb-archive-search { margin-top: var(--anza-after-hero); }
.anza-single-room__gallery-wrap { padding-top: var(--anza-after-hero); }
.mphb_sc_search_results-wrapper,
.anza-mphb-results-summary { margin-top: var(--anza-after-hero); }

/* ==================================================================
   v4.6 — Contact page layout.

   The contact details (email, WhatsApp, address) are page content
   written in wp-admin, so the text itself isn't mine to change — but
   the layout was: a single narrow column with the FAQ dumped underneath,
   leaving the whole right half of the screen empty on desktop.

   Now a two-column split on wide screens — details left, FAQ right —
   which is what a contact page is actually for: reach us, or answer
   your own question. Stacks back to one column on mobile.
   ================================================================== */
@media (min-width: 900px) {
	.anza-page-contact .anza-page__content > .container-anza {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		gap: 4rem;
		align-items: start;
	}
	/* The FAQ block is injected after the content by page.php; its inline
	   margin-top would push it out of alignment inside the grid. */
	.anza-page-contact .anza-page__content > .container-anza > div[style] {
		margin-top: 0 !important;
		max-width: none !important;
	}
}

/* Contact links: they're plain underlined text in the page content.
   Given a deliberate treatment so email / phone read as actions. */
.anza-page-contact .entry-content a[href^="mailto:"],
.anza-page-contact .entry-content a[href^="tel:"] {
	display: inline-block;
	font-family: var(--font-sans);
	font-weight: 500;
	color: var(--anza-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--anza-ink);
	padding-bottom: 2px;
	transition: opacity .2s ease;
}
.anza-page-contact .entry-content a[href^="mailto:"]:hover,
.anza-page-contact .entry-content a[href^="tel:"]:hover { opacity: .6; }

/* ==================================================================
   v4.6 — Packages page: give the price its own weight.
   "À partir de 15€" is longer than "349€", so the unit line needs to
   sit under it rather than fight it for the same row.
   ================================================================== */
.anza-page-offres-et-packages .anza-experiences__price,
.anza-experiences__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: .6rem;
	row-gap: .15rem;
}
.anza-experiences__price .anza-rentals__unit {
	flex-basis: 100%;
	font: 500 .68rem/1.4 var(--font-sans);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--anza-ink-soft);
}

/* ==================================================================
   v4.7 — MOBILE NAVIGATION.

   Audit finding, and the most serious one in the project: below 1024px
   `.site-nav ul` was `display: none`, `.menu-toggle` had no CSS at all,
   and no JavaScript existed to connect them. On every phone and most
   tablets the site had NO navigation — a guest could reach the homepage
   and nothing else. No desktop screenshot could ever have shown this.

   Safety net first: the panel is only hidden when JS is confirmed
   running (`.anza-has-js-nav`, set by nav.js). If the script fails to
   load, the menu stays visible and navigable rather than disappearing.
   ================================================================== */

/* Hamburger — visible only below the desktop breakpoint. */
.menu-toggle {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;              /* 44px: minimum comfortable tap target */
	height: 44px;
	padding: 0 10px;
	border: 0;
	background: transparent;
	color: currentColor;
	cursor: pointer;
}
@media (min-width: 1024px) { .menu-toggle { display: none; } }
.menu-toggle span {
	display: block;
	height: 1.5px;
	width: 100%;
	background: currentColor;
	transition: transform .25s ease, opacity .25s ease;
}
/* Open state: the two bars become an X. */
.anza-nav-open .menu-toggle span:first-child { transform: translateY(3.25px) rotate(45deg); }
.anza-nav-open .menu-toggle span:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

/* The panel itself. Only hidden once JS is confirmed present. */
@media (max-width: 1023px) {
	.anza-has-js-nav .site-nav {
		position: fixed;
		/* v7.8 — inset:0 on all four sides, not "0 0 auto 0". With bottom
		   left at auto, this panel's height was only ever as tall as its
		   own content (a handful of nav links), not the viewport — on a
		   screen where those links don't fill the height, whatever sits
		   behind the panel (the hero's booking search form) stayed
		   visible below it despite body.anza-nav-open:overflow-hidden,
		   because the panel simply didn't extend down that far. */
		inset: 0;
		z-index: 190;
		overflow-y: auto;
		padding: 7rem 1.5rem 2.5rem;
		background: var(--anza-ink);
		transform: translateY(-100%);
		visibility: hidden;
		transition: transform .3s ease, visibility .3s ease;
	}
	.anza-has-js-nav .anza-nav-open .site-nav,
	.anza-has-js-nav body.anza-nav-open .site-nav {
		transform: translateY(0);
		visibility: visible;
	}
	/* Override the desktop `display:none` on the list inside the panel. */
	.anza-has-js-nav .site-nav ul {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
	}
	.site-nav li { width: 100%; border-bottom: 1px solid rgba(255,255,255,.14); }
	.site-nav li:last-child { border-bottom: 0; }
	/* v7.0 — large display-font links instead of small uppercase labels,
	   so the open panel reads as an immersive full-screen menu rather
	   than a dropdown. Toggle/open-close JS in nav.js is untouched. */
	.site-nav a {
		display: block;
		width: 100%;
		padding: 1rem 0;      /* generous tap target */
		font-family: var(--font-display);
		font-weight: 500;
		font-size: clamp(1.75rem, 8vw, 2.75rem);
		letter-spacing: -0.01em;
		text-transform: none;
		color: var(--anza-cream);
	}
	/* The toggle must sit above the panel so it can close it. */
	.menu-toggle { position: relative; z-index: 200; }
	.site-logo, .header-book { position: relative; z-index: 200; }
	.anza-nav-open .menu-toggle,
	.anza-nav-open .site-logo { color: var(--anza-cream); }
	/* Stop the page scrolling behind an open panel. */
	body.anza-nav-open { overflow: hidden; }
}

/* ==================================================================
   v4.7 — mobile UI/UX pass from the same audit.
   ================================================================== */
@media (max-width: 767px) {
	/* Hero display type was sized for desktop and overflowed narrow
	   screens; clamp keeps it dramatic without causing sideways scroll. */
	.page-hero .type-display { font-size: clamp(2rem, 11vw, 3rem); }
	.hero .type-display { font-size: clamp(2.1rem, 12vw, 3.4rem); }

	/* Nothing should ever scroll sideways on a phone. */
	html, body { overflow-x: hidden; }

	/* Buttons and links get a real tap target (Apple/Google guidance
	   is 44px; several of these were ~34px). */
	.btn, .link, .header-book,
	.anza-mphb-room-card__actions a,
	.anza-mphb-room-card__actions button,
	.anza-mphb-search-room__actions a,
	.anza-mphb-search-room__actions button { min-height: 44px; }

	/* Card actions stack full-width so neither button is cramped. */
	.anza-mphb-room-card__actions,
	.anza-mphb-search-room__actions {
		display: grid;
		grid-template-columns: 1fr;
		gap: .6rem;
	}
	.anza-mphb-room-card__actions > *,
	.anza-mphb-search-room__actions > * { width: 100%; max-width: none; }
	.anza-mphb-room-card__actions .button,
	.anza-mphb-search-room__actions .button { width: 100%; text-align: center; }

	/* Contact page: single column, and the FAQ regains its own spacing. */
	.anza-page-contact .anza-page__content > .container-anza { display: block; }
}

/* ==================================================================
   v5.7 — accessibility & motion pass.

   Audit findings, all verified against the stylesheets:
     1. No skip link anywhere. A keyboard user had to tab through the
        entire nav on every single page before reaching content.
     2. `:focus-visible` appeared 10 times in motopress.css (form fields
        only) and ZERO times in style.css — so links, buttons, the logo
        and the nav had no visible keyboard focus at all. Someone
        navigating by keyboard could not see where they were.
     3. `prefers-reduced-motion` covered only the gallery carousel. The
        card hover lifts, the mobile nav slide and `scroll-behavior:
        smooth` all ignored it.
   ================================================================== */

/* 1. Skip link — invisible until focused, then clearly on top. */
.anza-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 300;
	padding: .85rem 1.25rem;
	background: var(--anza-ink);
	color: var(--anza-cream);
	font: 500 .75rem/1 var(--font-sans);
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
}
.anza-skip-link:focus {
	left: 1rem;
	top: 1rem;
}
#anza-main { display: block; scroll-margin-top: 6rem; }
#anza-main:focus { outline: none; }

/* 2. Visible keyboard focus on everything interactive.
   :focus-visible only shows for keyboard/AT users, so mouse users see
   no change. Two-tone ring so it reads on both cream and ink. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible,
.btn:focus-visible,
.link:focus-visible,
.header-book:focus-visible,
.menu-toggle:focus-visible,
.site-logo:focus-visible {
	outline: 2px solid var(--anza-accent);
	outline-offset: 3px;
	border-radius: 1px;
}
/* On the dark hero/header the accent needs a cream halo to stay visible. */
.has-page-hero .site-header a:focus-visible,
.home .site-header a:focus-visible,
.site-header .menu-toggle:focus-visible,
.anza-nav-open .site-nav a:focus-visible,
.page-hero a:focus-visible {
	outline-color: var(--anza-cream);
	outline-offset: 3px;
}

/* 3. Respect reduced motion everywhere, not just the carousel. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	/* Movement-based effects are removed outright rather than sped up. */
	.anza-mphb-room-card:hover { transform: none; }
	.anza-mphb-room-card:hover .anza-mphb-room-card__media img { transform: none; }
	.anza-has-js-nav .site-nav { transition: none; }
}

/* ==================================================================
   v5.7 — hero poster for anyone who doesn't get the video.

   nav.js only promotes the hero iframe to a live src on desktop, with
   motion allowed and no data-saver. Everyone else needs something to
   look at, so the hero media area carries a real photo as a background.
   It's an existing theme asset, not a placeholder.
   ================================================================== */
.hero-media {
	/* The image itself is set inline by front-page.php from real media
	   (the Customizer rooftop image, else a room's featured image). A
	   hardcoded assets/rooftop.jpg path was NOT used: that file does not
	   exist in the theme and would have 404'd on every mobile load. */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: var(--anza-ink);
}
/* Once the video is live the poster is redundant behind it. */
.anza-hero-video-on .hero-media { background-image: none; }
.hero-media iframe:not([src]) { display: none; }

/* ==================================================================
   v5.7 — reading measure. Long paragraphs on a 1360px container run to
   ~150 characters, well past the 60–75 that's comfortable to read.
   ================================================================== */
.type-body { max-width: 68ch; }
.page-hero__subtitle { max-width: 52ch; }
.anza-reviews__text { max-width: 46ch; }
/* Anything already given an explicit width keeps it. */
.type-body[style*="max-width"] { max-width: none; }

/* ==================================================================
   v5.8 — layout architecture & CRO.

   Measured problems, not impressions:

   1. SECTION HEADERS WASTED THE LEFT THIRD.
      Every section header is `.col-3` (a short eyebrow like "LES
      CHAMBRES") beside `.col-8/9` (the real heading). On a 1360px
      container that gives 340px to a two-word label and starts the
      heading 404px in — 30% of the page width spent on a caption,
      with the heading pushed off the page's own left edge so it no
      longer aligns with the content beneath it.

      The eyebrow now sits directly above the heading, both on the
      container's left edge. Same information, one clean column, and
      the heading finally lines up with the cards under it.

   2. OVER-SPACING. `.section-pad` was 8rem top AND bottom = 256px
      between sections. Across the home page's eight sections that's
      about 2,000px of pure scroll. Reduced to 5.5rem (176px per
      section) — still generous, ~640px less scrolling to reach a
      booking CTA.

   3. THE BOOKING CTA LOOKED LIKE A NAV LINK. `.header-book` was plain
      uppercase text with a hover fade, visually identical to "Contact".
      The single highest-value action on a hostel site had no more
      emphasis than a menu item.
   ================================================================== */

/* 1. Section headers: one column, left-aligned, no wasted third. */
@media (min-width: 900px) {
	.section .grid-12:has(> .col-3 > .type-label),
	.section-pad > .container-anza > .grid-12:has(> .col-3 > .type-label),
	.anza-why .grid-12:has(> .col-3 > .type-label),
	.anza-reviews .grid-12:has(> .col-3 > .type-label) {
		grid-template-columns: 1fr auto;
		gap: 1.5rem 2rem;
		align-items: end;
	}
	.section .grid-12:has(> .col-3 > .type-label) > .col-3,
	.anza-why .grid-12:has(> .col-3 > .type-label) > .col-3,
	.anza-reviews .grid-12:has(> .col-3 > .type-label) > .col-3 {
		grid-column: 1;
		grid-row: 1;
		margin-bottom: -.35rem;
	}
	.section .grid-12:has(> .col-3 > .type-label) > .col-8,
	.section .grid-12:has(> .col-3 > .type-label) > .col-9,
	.anza-why .grid-12:has(> .col-3 > .type-label) > .col-9,
	.anza-reviews .grid-12:has(> .col-3 > .type-label) > .col-9 {
		grid-column: 1;
		grid-row: 2;
	}
	/* A trailing link ("Toutes les chambres") stays on the right, where
	   it acts as a secondary action rather than dead space. */
	.section .grid-12:has(> .col-3 > .type-label) > .col-4 {
		grid-column: 2;
		grid-row: 2;
		align-self: end;
	}
}

/* 2. Tighter vertical rhythm. */
.section-pad { padding-block: 4rem; }
@media (min-width: 768px) { .section-pad { padding-block: 5.5rem; } }

/* 3. v5.9 — the booking CTA is a SOLID button.

   v5.8 made it an outlined button, which was still too quiet: on a
   cream header a thin 1px outline reads as a bordered label, not an
   action. This is the single highest-value click on the site, so it now
   carries a filled background — the only solid element in the header,
   which is what makes it read as the action rather than a seventh
   nav item.

   Two fills, because the header sits on two backgrounds:
     - cream header  -> ink fill, cream text
     - dark hero     -> cream fill, ink text
   Both are the brand's own two colours; no new colour is introduced. */
.header-book {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: .75rem 1.6rem;
	border: 1px solid var(--anza-accent);
	border-radius: var(--radius);
	background: var(--anza-accent);
	color: var(--anza-cream);
	font-size: .7rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background .2s ease, color .2s ease;
}
.header-book:hover,
.header-book:focus-visible {
	opacity: 1;
	background: var(--anza-accent-dark);
	border-color: var(--anza-accent-dark);
	color: var(--anza-cream);
}
/* On the dark hero the fill inverts so it stays the brightest element. */
.home .header-book,
.has-page-hero .header-book {
	border-color: var(--anza-cream);
	background: var(--anza-cream);
	color: var(--anza-ink);
}
.home .header-book:hover,
.home .header-book:focus-visible,
.has-page-hero .header-book:hover,
.has-page-hero .header-book:focus-visible {
	background: transparent;
	color: var(--anza-cream);
}
/* Inside the open mobile panel the header sits on ink regardless. */
.anza-nav-open .header-book {
	border-color: var(--anza-cream);
	background: var(--anza-cream);
	color: var(--anza-ink);
}
@media (max-width: 1023px) {
	.header-book { padding: .6rem 1.1rem; min-height: 40px; }
}


/* ==================================================================
   v6.0 — package detail pages (/offre/{slug}/).
   Same architecture as the room pages: content left, a sticky booking
   panel right, stacking on mobile with the price moved above the fold.
   ================================================================== */
.anza-package-page__media {
	margin-bottom: var(--space-5);
	aspect-ratio: 21 / 9;
	max-height: 420px;
	overflow: hidden;
	background: var(--anza-sand);
}
.anza-package-page__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.anza-package-page__grid { display: grid; gap: var(--space-5); }
@media (min-width: 900px) {
	.anza-package-page__grid { grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--space-6); align-items: start; }
	.anza-package-page__aside { position: sticky; top: 7.5rem; }
}
.anza-package-page__h2 { margin: 0 0 var(--space-3); font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.anza-package-page__lists { display: grid; gap: var(--space-4); }
@media (min-width: 640px) {
	.anza-package-page__lists { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
}
.anza-package-page__list + .anza-package-page__list { margin-top: 0; }

/* Inclus / non inclus read at a glance: a tick and a cross, not two
   identical bullet lists the guest has to read carefully to tell apart. */
.anza-package-checklist { list-style: none; margin: 0; padding: 0; }
.anza-package-checklist li {
	position: relative;
	padding: .5rem 0 .5rem 1.75rem;
	border-bottom: 1px solid var(--anza-line-soft);
	font: 400 .95rem/1.45 var(--font-sans);
}
.anza-package-checklist li:last-child { border-bottom: 0; }
.anza-package-checklist li::before {
	position: absolute;
	left: 0;
	top: .5rem;
	font-weight: 700;
	line-height: 1.45;
}
.anza-package-checklist--in li::before  { content: "✓"; color: var(--anza-accent); }
.anza-package-checklist--out li::before { content: "✕"; color: var(--anza-ink-soft); }
.anza-package-checklist--out li { color: var(--anza-ink-soft); }

/* Programme, when it's filled in. */
.anza-package-programme { list-style: none; margin: 0 0 var(--space-5); padding: 0; counter-reset: anzastep; }
.anza-package-programme li {
	position: relative;
	padding: 0 0 var(--space-3) 3rem;
	border-left: 1px solid var(--anza-line);
	margin-left: .75rem;
}
.anza-package-programme li::before {
	counter-increment: anzastep;
	content: counter(anzastep);
	position: absolute;
	left: -1rem;
	top: 0;
	width: 2rem;
	height: 2rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--anza-ink);
	color: var(--anza-cream);
	font: 500 .75rem/1 var(--font-sans);
}
.anza-package-programme li:last-child { border-left-color: transparent; padding-bottom: 0; }
.anza-package-programme__label {
	display: block;
	margin-bottom: .3rem;
	font: 500 .7rem/1 var(--font-sans);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--anza-ink-soft);
}

/* Booking panel. */
.anza-package-booking { padding: var(--space-4); border: 1px solid var(--anza-line); border-radius: var(--radius); background: var(--anza-paper); }
.anza-package-booking__price { margin: 0; font: 400 2.2rem/1 var(--font-display); color: var(--anza-accent); }
.anza-package-booking__unit { margin: .4rem 0 var(--space-3); font: 500 .72rem/1.4 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--anza-ink-soft); }
.anza-package-booking .anza-package__cta { width: 100%; }
.anza-package-booking .anza-package__secondary { display: flex; justify-content: center; width: 100%; margin-top: .6rem; }
.anza-package-booking__note { margin: var(--space-3) 0 0; font: 400 .8rem/1.5 var(--font-sans); color: var(--anza-ink-soft); }
.anza-package-page__back { margin-top: var(--space-5); }