/*
Theme Name: Dama Charter
Theme URI: https://damacharter.it
Author: Mariart
Author URI: https://mariart.com.au
Description: A custom, responsive WordPress theme for Dama Charter — Amalfi Coast boat tours. Built 1:1 from the Figma design with native CSS variables mapped from Figma Variables / Design Tokens.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dama-charter
Tags: custom-colors, custom-menu, featured-images, translation-ready, responsive
*/

/* ==========================================================================
   1. DESIGN TOKENS  (Figma Variables → native CSS variables, names preserved)
   ========================================================================== */
:root {
  /* Color */
  --color-white: #ffffff;
  --color-dama-blue: #006c9b;
  --color-neutral-darkest: #000000;
  --color-scheme-1-text: #000000;
  --color-scheme-1-background: #ffffff;
  --color-scheme-2-text: #000000;
  --color-scheme-2-background: #f4f1ec;
  --color-scheme-2-border: rgba(0,0,0,0.15);
  --color-scheme-3-text: #000000;
  --color-scheme-5-text: #ffffff;
  --color-scheme-5-foreground: #006c9b;
  --color-scheme-5-border: rgba(255,255,255,0.2);
  --color-scheme-5-background: #006c9b;
  --color-scheme-6-text: #000000;
  --color-scheme-6-background: #dacfbc;
  --color-scheme-6-border: rgba(0,0,0,0.15);
  --opacity-transparent: rgba(255,255,255,0);
  --opacity-neutral-darkest-15: rgba(0,0,0,0.15);
  --opacity-neutral-darkest-60: rgba(0,0,0,0.6);

  /* Typography */
  --font-heading: "Tenor Sans", Georgia, "Times New Roman", serif;
  --font-body: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-sizes-heading-1: 64px;
  --text-sizes-heading-2: 40px;
  --text-sizes-heading-3: 28px;
  --text-sizes-heading-4: 21px;
  --text-sizes-heading-5: 32px;  /* NOTE: this is a large pull-quote size used by the blog blockquote, not a heading level. h5/h6 elements use sane sub-h4 sizes. */
  --text-sizes-intro: 21px;
  --text-sizes-body: 18px;
  --text-sizes-text-small: 16px;

  /* Extra spacing around headings added between paragraphs in rich-text areas.
     Added on top of the paragraph gap; more above than below; smaller for
     smaller headings. Tweak per level here. */
  --heading-space-above-h2: 28px;  --heading-space-below-h2: 12px;
  --heading-space-above-h3: 20px;  --heading-space-below-h3: 8px;
  --heading-space-above-h4: 14px;  --heading-space-below-h4: 6px;
  --heading-space-above-h5: 10px;  --heading-space-below-h5: 4px;

  /* Gap */
  --gap-navbar-items: 32px;
  --gap-button-between: 24px;
  --gap-button-above: 48px;
  --gap-hero-h1-button: 42px;
  --gap-text-p-p: 20px;
  --gap-title-h2-text: 28px;
  --gap-title-intro-content: 80px;
  --gap-split2-centre: 80px;
  --gap-card-h3-text: 16px;
  --gap-card-text-link: 24px;
  --gap-card-cardcard: 28px;
  --gap-blog-category-h2: 8px;
  --gap-blog-gutter: 48px;
  --gap-text-bullet-copy: 10px;
  --gap-text-li-li: 8px;
  --gap-review-stars-text: 24px;
  --gap-review-text-author: 24px;
  --gap-form-underheading: 12px;
  --gap-form-radiorows: 14px;
  --gap-h4-text: 4px;
  --gap-footer-links: 12px;
  --gap-footer-line-credits: 32px;

  /* Padding */
  --page-padding-global: 81px;
  --section-padding-section-large: 120px;
  --section-padding-section-medium: 80px;
  --element-padding-navbar-items-tb: 24px;
  --element-padding-card-box-tblr: 32px;
  --element-padding-faq-question-tb: 20px;

  /* Layout / Width */
  --container-large: 1280px;
  --max-width-xxlarge: 1280px;
  --max-width-large: 768px;
  --max-width-medium: 560px;
  --max-width-844: 844px;
  --max-width-xsmall: 400px;
  --column-4column: 408px;

  /* Radius / Stroke */
  --radius-large: 16px;
  --radius-medium: 16px;
  --radius-input: 12px;
  --stroke-border-width: 1px;
  --stroke-divider-width: 1px;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-sizes-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-scheme-1-text);
  background: var(--color-scheme-1-background);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 400; margin: 0; letter-spacing: 1px; }
p { margin: 0; }
/* Figma uses gap/padding only — strip default UA margins so spacing matches 1:1. */
blockquote, figure, figcaption, dl, dd, fieldset { margin: 0; }
fieldset { padding: 0; border: 0; min-width: 0; }

/* ==========================================================================
   3. TYPOGRAPHY UTILITIES
   ========================================================================== */
/* Heading styles apply to the ELEMENT (so editor-added core headings match the
   front end) and to the matching utility class (used by the block builders). */
h1, .h1 { font-size: var(--text-sizes-heading-1); line-height: 1.15; letter-spacing: 0.64px; }
h2, .h2 { font-size: var(--text-sizes-heading-2); line-height: 1.35; letter-spacing: 0.4px; }
h3, .h3 { font-size: var(--text-sizes-heading-3); line-height: 1.2;  letter-spacing: 0.28px; }
h4, .h4 { font-family: var(--font-body); font-weight: 500; font-size: var(--text-sizes-heading-4); line-height: 1.2; letter-spacing: 0.21px; }
h5 { font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 1.3; letter-spacing: 0.18px; }
h6 { font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 1.3; letter-spacing: 0.16px; }

/* Spacing is gap-based, but gap is uniform — so a heading dropped between
   paragraphs in a rich-text area (editor-added H3/H4/…) would get the same gap
   as paragraph-to-paragraph. Add scoped margin (per level, from the
   --heading-space-* vars) for breathing room. Cards/other headings unaffected. */
.prose__paras > h2, .entry__content > h2, .tour-richtext > h2 { margin-top: var(--heading-space-above-h2); margin-bottom: var(--heading-space-below-h2); }
.prose__paras > h3, .entry__content > h3, .tour-richtext > h3 { margin-top: var(--heading-space-above-h3); margin-bottom: var(--heading-space-below-h3); }
.prose__paras > h4, .entry__content > h4, .tour-richtext > h4 { margin-top: var(--heading-space-above-h4); margin-bottom: var(--heading-space-below-h4); }
.prose__paras > h5, .entry__content > h5, .tour-richtext > h5,
.prose__paras > h6, .entry__content > h6, .tour-richtext > h6 { margin-top: var(--heading-space-above-h5); margin-bottom: var(--heading-space-below-h5); }
.prose__paras > :first-child,
.entry__content > :first-child,
.tour-richtext > :first-child { margin-top: 0; }
.prose__paras > :last-child,
.entry__content > :last-child,
.tour-richtext > :last-child { margin-bottom: 0; }
.intro { font-size: var(--text-sizes-intro); line-height: 1.6; }
.text-small { font-size: var(--text-sizes-text-small); line-height: 1.6; }
.tagline { font-family: var(--font-body); font-weight: 600; font-size: 16px; line-height: 1.5; }

/* ==========================================================================
   4. LAYOUT PRIMITIVES
   ========================================================================== */
.section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--section-padding-section-large) var(--page-padding-global);
}
.container { width: 100%; max-width: var(--container-large); }
.scheme-1 { background: var(--color-scheme-1-background); color: var(--color-scheme-1-text); }
.scheme-2 { background: var(--color-scheme-2-background); color: var(--color-scheme-2-text); }
.scheme-5 { background: var(--color-scheme-5-background); color: var(--color-scheme-5-text); }
.scheme-6 { background: var(--color-scheme-6-background); color: var(--color-scheme-6-text); }

/* Arch-tile watermark on every Dama-blue (scheme-5) section — 60×86 tile,
   repeated from the top-left at 12% opacity (matches Figma). The ::before sits
   behind the section content; scaled down at the mobile breakpoints so it stays
   proportional to the narrower layout (≈80% ≤991px, ≈60% ≤560px). */
.scheme-5 { position: relative; }
.scheme-5::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url(assets/images/pattern-arch.png) top left / 60px 86px repeat;
  opacity: 0.12;
}
.scheme-5 > * { position: relative; z-index: 1; }
@media (max-width: 991px) { .scheme-5::before { background-size: 48px 69px; } }
@media (max-width: 560px) { .scheme-5::before { background-size: 36px 52px; } }

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: 100px;
  border: var(--stroke-border-width) solid var(--color-dama-blue);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-sizes-body);
  line-height: 1.6;
  cursor: pointer;
  transition: opacity .2s ease, background .2s ease, color .2s ease;
}
.btn.btn--primary   { background: var(--color-dama-blue); color: var(--color-white); }
.btn.btn--secondary { background: var(--color-white); color: var(--color-scheme-2-text); }
.btn.btn--outline   { background: transparent; color: var(--color-neutral-darkest); }
.btn.btn--ghost-light { background: transparent; border-color: var(--color-white); color: var(--color-white); }
.btn.btn--text { border: none; background: transparent; padding: 0; color: var(--color-neutral-darkest); }
.btn.btn--text-light { border: none; background: transparent; padding: 0; color: var(--color-white); font-weight: 400; }
.btn .chevron { width: 24px; height: 24px; transition: transform .2s ease; }

/* Interim hover states — replace with the Figma "hover=true" variant styles
   once that variant exists (then I can map its exact fills/borders here). */
.btn.btn--primary:hover    { background: #00587f; border-color: #00587f; }            /* darken blue */
.btn.btn--secondary:hover  { background: var(--color-dama-blue); color: var(--color-white); } /* fill on hover */
.btn.btn--outline:hover    { background: var(--color-dama-blue); border-color: var(--color-dama-blue); color: var(--color-white); }
.btn.btn--ghost-light:hover { background: var(--color-white); color: var(--color-dama-blue); }
.btn.btn--text:hover .chevron,
.btn.btn--text-light:hover .chevron { transform: translateX(4px); }
.btn.btn--text:hover, .btn.btn--text-light:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ==========================================================================
   6. NAVBAR  (Navbar / MA01)
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 var(--page-padding-global);
  background: var(--color-scheme-1-background);
  border-bottom: var(--stroke-border-width) solid var(--opacity-neutral-darkest-15);
}
/* When logged in, offset the sticky header by the WP admin-bar height so it
   pins below the bar instead of under it. Only affects the .admin-bar body
   class (logged-in users); logged-out visitors are unchanged. Breakpoints
   mirror WP core: bar is 32px >782px, 46px ≤782px, and non-fixed (scrolls
   away) ≤600px — so revert to top:0 there. */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media screen and (max-width: 600px) { .admin-bar .site-header { top: 0; } }
.navbar { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: var(--container-large); height: 93px; }
.navbar__logo { display: flex; align-items: center; }
.navbar__logo img, .navbar__logo .custom-logo { width: 167px; height: auto; }
.navbar__column { display: flex; align-items: center; gap: var(--gap-navbar-items); }
.navbar__links { display: flex; align-items: center; justify-content: flex-end; gap: var(--gap-navbar-items); padding: var(--element-padding-navbar-items-tb) 0; }
.navbar__link { display: flex; align-items: center; gap: 4px; }
.navbar__link a { display: flex; align-items: center; gap: 4px; }
.navbar__link .chevron { width: 24px; height: 24px; }
.navbar__toggle { display: none; }

/* Menu items + dropdown (Appearance → Menus, Primary location). */
.navbar__links li { position: relative; list-style: none; }
.navbar__links a { display: inline-flex; align-items: center; gap: 4px; transition: color .2s ease; }
.navbar__links .menu-item-has-children > a::after {
  content: ""; width: 6px; height: 6px; margin-left: 4px; margin-top: -3px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
}
.navbar__links .sub-menu {
  /* Offset left by the box's own padding so sub-item text lines up with the
     top-level link text above it. */
  position: absolute; top: 100%; left: -16px; z-index: 110; display: none;
  flex-direction: column; gap: 8px; min-width: 280px; padding: 16px;
  background: var(--color-scheme-1-background);
  border-radius: var(--radius-medium); box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}
.navbar__links .menu-item-has-children:hover > .sub-menu,
.navbar__links .menu-item-has-children:focus-within > .sub-menu { display: flex; }
.navbar__links .sub-menu a { white-space: nowrap; }
/* Hover + current-page (selected) nav links turn Dama blue. The chevron uses
   currentColor, so it follows. Covers both wp_nav_menu and the custom fallback. */
.navbar__links a:hover,
.navbar__links a:focus-visible,
.navbar__links .current-menu-item > a,
.navbar__links .current-menu-ancestor > a,
.navbar__links .current-menu-parent > a,
.navbar__links .current_page_item > a,
.navbar__links .current_page_ancestor > a {
  color: var(--color-dama-blue);
}

/* ==========================================================================
   7. HERO  (Hero / MA01)
   ========================================================================== */
.hero {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 750px; padding: 0 var(--page-padding-global); overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; }
.hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__bg::after { content: ""; position: absolute; inset: 0; background: var(--opacity-neutral-darkest-15); }
.hero__container { position: relative; display: flex; flex-direction: column; justify-content: center; flex: 1 0 0; width: 100%; max-width: var(--container-large); }
.hero__column { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-hero-h1-button); max-width: var(--max-width-medium); }
.hero__title { color: var(--color-white); }
.hero__actions { display: flex; gap: var(--gap-button-between); flex-wrap: wrap; }

/* Hero as a core Cover block (shows the image in the editor). */
.hero-cover.wp-block-cover { min-height: 750px; padding-left: var(--page-padding-global); padding-right: var(--page-padding-global); align-items: center; }
.hero-cover .wp-block-cover__inner-container { width: 100%; max-width: var(--container-large); }
.hero-cover .hero__column { max-width: var(--max-width-medium); margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-hero-h1-button); }
.hero-cover .hero__title { color: var(--color-white); }

/* Inner-page Cover banner (Header / MA01). */
.page-hero.wp-block-cover { min-height: 360px; padding-left: var(--page-padding-global); padding-right: var(--page-padding-global); align-items: center; }
.page-hero .wp-block-cover__inner-container { width: 100%; max-width: var(--container-large); }
.page-hero__inner { max-width: var(--max-width-large); margin: 0; }
.page-hero__title { color: var(--color-white); }

/* Tour page Content / MA01 (rich text + specs list). */
.tour-content { display: flex; flex-direction: column; align-items: center; gap: var(--gap-title-h2-text); width: 100%; max-width: var(--container-large); }
.tour-title { text-align: center; max-width: var(--max-width-844); }
.tour-body { display: flex; flex-direction: column; gap: var(--gap-button-above); width: 100%; max-width: var(--max-width-844); }
.tour-richtext { display: flex; flex-direction: column; gap: var(--gap-text-p-p); }
.tour-specs { width: 100%; border-bottom: var(--stroke-divider-width) solid var(--color-scheme-2-border); }
.tour-spec { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: var(--element-padding-faq-question-tb) 0; border-top: var(--stroke-divider-width) solid var(--color-scheme-2-border); }
.tour-spec__label { flex: 1 0 0; min-width: 0; }
.tour-spec__value { flex: 1 0 0; min-width: 0; text-align: right; }

/* ==========================================================================
   8. SPLIT LAYOUT  (Layout MA01 / MA03)
   ========================================================================== */
.split { display: flex; gap: var(--gap-split2-centre); align-items: center; width: 100%; max-width: var(--container-large); }
.split--top { align-items: flex-start; }
.split--reverse { flex-direction: row-reverse; }
.split__media { flex: 1 0 0; min-width: 0; }
.split__media img { width: 100%; border-radius: var(--radius-large); object-fit: cover; }
.split__content { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: var(--gap-button-above); }
/* Captain ("Angelo") photo is a tall 1200×1800 portrait; at the desktop
   two-column width it renders ~900px and towers over the text. Cap its height
   (object-fit crops sky/legs, biased up to keep his face). Steps shorter on
   tablet/mobile in the responsive blocks below. */
.split--top .split__media .wp-block-image img { height: 720px; object-fit: cover; object-position: center 35%; }
.prose { display: flex; flex-direction: column; gap: var(--gap-title-h2-text); }
.prose__paras { display: flex; flex-direction: column; gap: var(--gap-text-p-p); }
.actions-row { display: flex; gap: var(--gap-button-between); align-items: center; flex-wrap: wrap; }

/* Video lightbox (MA01 media) — the container fits the video's shape (no
   background bleed). The video is a click-to-play facade: poster + custom play
   button, swapped for the Wistia iframe on click (assets/js/main.js). */
.lightbox { position: relative; flex: 0 1 auto; min-width: 0; align-self: center; border-radius: var(--radius-large); overflow: hidden; }
.lightbox .dama-video { position: relative; display: block; overflow: hidden; border-radius: var(--radius-large); }
.dama-video--landscape { width: min(620px, 100%); aspect-ratio: 16 / 9; }
.dama-video--portrait  { height: min(600px, 78vh); aspect-ratio: 9 / 16; }
.dama-video--square    { height: min(480px, 64vh); aspect-ratio: 1 / 1; }
.dama-video > img,
.dama-video__iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
/* Poster + custom play button = a transparent play cutout in a white circle
   (SVG fill-rule:evenodd) that drops opacity on hover. */
.dama-video__facade { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; background: var(--color-scheme-6-background) center / cover no-repeat; }
.dama-video__play { width: 84px; height: 84px; max-width: 34%; line-height: 0; }
.dama-video__play svg { display: block; width: 100%; height: 100%; opacity: 0.9; transition: opacity 0.3s ease; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35)); }
.dama-video__facade:hover .dama-video__play svg,
.dama-video__facade:focus-visible .dama-video__play svg { opacity: 0.5; }

/* ==========================================================================
   9. SECTION TITLE (centered)
   ========================================================================== */
.section-title { display: flex; flex-direction: column; gap: var(--gap-title-h2-text); align-items: center; text-align: center; width: 100%; max-width: var(--max-width-large); }

/* ==========================================================================
   10. TOURS  (Layout / MA02 — 3 cards on blue)
   ========================================================================== */
.stack-80 { display: flex; flex-direction: column; align-items: center; gap: var(--gap-title-intro-content); width: 100%; max-width: var(--container-large); }
.tours__row { display: flex; gap: var(--gap-card-cardcard); align-items: stretch; width: 100%; }
.tour-card {
  position: relative; display: flex; flex: 1 1 0; min-width: 0; flex-direction: column;
  background: var(--color-scheme-5-foreground);
  border: var(--stroke-border-width) solid var(--color-scheme-5-border);
  border-radius: var(--radius-medium); overflow: hidden;
}
/* Whole card is the link: stretch the "View Option" link over the card. */
.tour-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tour-card__media { position: relative; width: 100%; aspect-ratio: 408 / 408; overflow: hidden; }
.tour-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tour-card__body { display: flex; flex-direction: column; justify-content: center; gap: var(--gap-card-text-link); padding: var(--element-padding-card-box-tblr); flex: 1 0 0; }
.tour-card__top { display: flex; flex-direction: column; gap: var(--gap-blog-category-h2); }
.tour-card__text { display: flex; flex-direction: column; gap: var(--gap-card-h3-text); }
.tour-card .tagline, .tour-card__text { color: var(--color-scheme-5-text); }
.tour-card__top { width: 100%; }
.tour-card__body .btn { align-self: flex-start; }

/* [dama_tours] — dynamic grid / carousel from the Tour post type. */
.dama-tours { width: 100%; }
.dama-tours:not(.dama-tours--carousel) .tours__row { flex-direction: row; flex-wrap: wrap; justify-content: center; }
.dama-tours:not(.dama-tours--carousel) .tour-card { flex: 0 1 calc((100% - 2 * var(--gap-card-cardcard)) / 3); min-width: 280px; }
.dama-tours--carousel .dama-tours__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.dama-tours--carousel .dama-tours__viewport::-webkit-scrollbar { display: none; }
.dama-tours--carousel .dama-tours__track { display: flex; gap: var(--gap-card-cardcard); }
.dama-tours--carousel .tour-card { flex: 0 0 calc((100% - 2 * var(--gap-card-cardcard)) / 3); scroll-snap-align: start; }
.dama-tours__nav { display: flex; justify-content: center; gap: 16px; margin-top: 40px; }
.dama-tours__arrow {
  width: 48px; height: 48px; border-radius: 100px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 24px; line-height: 1; padding-bottom: 3px;
  background: transparent; color: var(--color-white);
  border: var(--stroke-border-width) solid var(--color-white);
  transition: background .2s ease, color .2s ease;
}
.dama-tours__arrow:hover { background: var(--color-white); color: var(--color-dama-blue); }
/* Tour CAROUSEL (homepage) — keep it a horizontal, arrow-driven carousel at ALL
   widths (the generic =991px column / full-width rules would otherwise stack it).
   Cards per view: 3 on desktop, 2 on tablet (=1305px), 1 on mobile (=560px). The
   higher-specificity track > card selector beats the generic stacking rules;
   flex-shrink 0 keeps card widths fixed so extra cards overflow and scroll. */
.dama-tours--carousel .dama-tours__track { flex-direction: row; flex-wrap: nowrap; }
.dama-tours--carousel .dama-tours__track > .tour-card { flex: 0 0 calc((100% - 2 * var(--gap-card-cardcard)) / 3); width: auto; }
@media (max-width: 1305px) {
  .dama-tours--carousel .dama-tours__track > .tour-card { flex-basis: calc((100% - var(--gap-card-cardcard)) / 2); }
}
@media (max-width: 560px) {
  .dama-tours--carousel .dama-tours__track > .tour-card { flex-basis: 100%; }
}
/* Tour GRID (landing page) responsive steps — the carousel is unaffected.
   3-up on desktop → 2-up at =1305px (the two cards fill the row) → 1 column at
   =560px, matching the homepage carousel (stays two-up longer). */
@media (max-width: 1305px) {
  .dama-tours:not(.dama-tours--carousel) .tour-card { flex: 0 1 calc((100% - var(--gap-card-cardcard)) / 2); width: auto; min-width: 0; }
}
@media (max-width: 560px) {
  .dama-tours:not(.dama-tours--carousel) .tour-card { flex: 1 1 100%; width: 100%; min-width: 0; }
}
/* Tour card images get shorter as cards widen on smaller screens (square on
   desktop → 4:3 on tablet → 16:9 on mobile) so a wide/full-width card image
   doesn't dominate. Applies to both the carousel and the grid. object-fit:cover
   just crops the square source shorter. */
@media (max-width: 1305px) {
  .tour-card__media { aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
  .tour-card__media { aspect-ratio: 16 / 9; }
}
/* Landing-page GRID: use the shorter 4:3 crop already at desktop (the homepage
   carousel keeps the square crop on desktop). Still drops to 16:9 on mobile. */
.dama-tours:not(.dama-tours--carousel) .tour-card__media { aspect-ratio: 4 / 3; }
@media (max-width: 560px) {
  .dama-tours:not(.dama-tours--carousel) .tour-card__media { aspect-ratio: 16 / 9; }
}

/* ==========================================================================
   11. BOAT  (Layout / MA04 — two-col text + full-bleed image)
   ========================================================================== */
.boat__content { display: flex; flex-direction: column; align-items: center; padding: var(--section-padding-section-large) var(--page-padding-global); width: 100%; }
.boat__cols { display: flex; gap: var(--gap-split2-centre); align-items: flex-start; width: 100%; max-width: var(--container-large); }
.boat__col { flex: 1 0 0; min-width: 0; }
.boat__col--right { display: flex; flex-direction: column; gap: var(--gap-button-above); }
.bullet-list { display: flex; flex-direction: column; gap: var(--gap-text-li-li); }
.bullet-list__item { display: flex; gap: var(--gap-text-bullet-copy); }
.bullet-list__item::before { content: ""; flex: 0 0 auto; align-self: flex-start; width: 0.36em; height: 0.36em; border-radius: 50%; background: var(--color-dama-blue); margin-top: 0.6em; }
.boat__image { position: relative; width: 100%; aspect-ratio: 1440 / 810; overflow: hidden; }
.boat__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   12. TESTIMONIALS  (Testimonial / MA01 — 6-card wall)
   ========================================================================== */
.reviews__grid { display: flex; gap: var(--gap-card-cardcard); align-items: flex-start; width: 100%; }
.reviews__col { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: var(--gap-card-cardcard); }
.review-card {
  display: flex; flex-direction: column; gap: var(--gap-review-text-author);
  border: var(--stroke-border-width) solid var(--color-scheme-6-background);
  border-radius: var(--radius-large); padding: var(--element-padding-card-box-tblr);
}
.review-card__content { display: flex; flex-direction: column; gap: var(--gap-review-stars-text); }
.review-card__stars { display: flex; align-items: center; gap: 4px; }
.review-card__stars svg { width: 19px; height: 19px; display: block; }
.review-card__star { fill: var(--color-scheme-6-background); }
.review-card__star.is-filled { fill: var(--color-dama-blue); }
.review-card__quote { font-size: var(--text-sizes-intro); line-height: 1.6; }
.review-card__author { display: flex; flex-direction: column; }
.review-card__author .name { font-weight: 600; }
.review-card__author .date { font-size: var(--text-sizes-text-small); opacity: 0.6; }
.reviews__empty { font-size: var(--text-sizes-intro); opacity: 0.6; }

/* ==========================================================================
   13. CONTACT  (Contact / MA01 — booking form)
   ========================================================================== */
.contact__form { display: flex; flex-direction: column; align-items: center; gap: var(--gap-button-above); width: 100%; max-width: var(--max-width-844); }
.contact__fields { display: flex; flex-direction: column; gap: 28px; width: 100%; }
.contact__row { display: flex; flex-wrap: wrap; gap: var(--gap-card-cardcard); width: 100%; }
.contact__field { display: flex; flex-direction: column; gap: var(--gap-form-underheading); flex: 1 0 0; min-width: 408px; }
.contact__field--full { width: 100%; min-width: 100%; }
.contact__field label { font-size: var(--text-sizes-body); line-height: 1.6; }
.contact__field input,
.contact__field select,
.contact__field textarea {
  width: 100%; padding: 8px 12px; min-height: 48px;
  background: var(--opacity-transparent);
  border: var(--stroke-border-width) solid var(--opacity-neutral-darkest-15);
  border-radius: var(--radius-input);
  font-family: var(--font-body); font-size: var(--text-sizes-body); color: var(--color-neutral-darkest);
}
.contact__field textarea { min-height: 180px; resize: vertical; }
.contact__radios { display: flex; flex-direction: column; gap: var(--gap-form-underheading); width: 100%; }
.contact__radio-grid { display: flex; flex-direction: column; gap: var(--gap-form-radiorows); }
.contact__radio-row { display: flex; flex-wrap: wrap; gap: var(--gap-card-cardcard); width: 100%; }
.contact__radio { display: flex; flex: 1 0 0; min-width: 408px; gap: 12px; align-items: center; }
.contact__radio input { width: 18px; height: 18px; min-height: 0; accent-color: var(--color-dama-blue); }
.contact__submit { align-self: flex-start; }
.form-notice { width: 100%; max-width: var(--max-width-844); padding: 14px 18px; border-radius: var(--radius-input); font-size: var(--text-sizes-body); }
.form-notice--success { background: rgba(0,108,155,0.08); border: var(--stroke-border-width) solid var(--color-dama-blue); color: var(--color-dama-blue); }
.form-notice--error { background: rgba(180,30,30,0.06); border: var(--stroke-border-width) solid #b41e1e; color: #b41e1e; }

/* ==========================================================================
   13b. GRAVITY FORMS — match the Dama "Book a Tour" design
   ========================================================================== */
.gform_wrapper { width: 100%; max-width: var(--max-width-844); margin: 0 auto; }
.gform_wrapper form { margin: 0; }

/* Re-brand the orbital theme's CSS variables (drives colours/radius/focus). */
.gform_wrapper {
  --gf-color-primary: #006c9b !important;
  --gf-color-primary-rgb: 0,108,155 !important;
  --gf-color-primary-contrast: #ffffff !important;
  --gf-color-primary-contrast-rgb: 255,255,255 !important;
  --gf-color-primary-darker: #00587f !important;
  --gf-color-primary-lighter: #1a82b0 !important;
  --gf-radius: var(--radius-input) !important;
  --gf-ctrl-border-color-focus: #006c9b !important;
}
.gform_wrapper,
.gform_wrapper input,
.gform_wrapper select,
.gform_wrapper textarea,
.gform_wrapper button { font-family: var(--font-body) !important; }

.gform_wrapper .gform_fields { gap: 28px; }
.gform_wrapper .gfield_label,
.gform_wrapper legend.gfield_label { font-family: var(--font-body); font-weight: 400; font-size: var(--text-sizes-body); line-height: 1.6; color: var(--color-scheme-1-text); margin: 0 0 var(--gap-form-underheading); }

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="date"],
.gform_wrapper select,
.gform_wrapper textarea {
  width: 100%; padding: 8px 12px !important; min-height: 48px !important;
  border: var(--stroke-border-width) solid var(--opacity-neutral-darkest-15) !important;
  border-radius: var(--radius-input) !important;
  font-size: var(--text-sizes-body) !important; color: var(--color-neutral-darkest);
  background: var(--opacity-transparent) !important; box-shadow: none !important;
}
.gform_wrapper textarea { min-height: 180px !important; }
/* Date field: compact input (just wide enough for a date), not full width,
   with its calendar icon beside it and a small gap. */
.gform_wrapper .ginput_container_date { display: flex; align-items: center; justify-content: flex-start; }
.gform_wrapper .ginput_container_date .datepicker { width: 12rem !important; max-width: 100%; flex: 0 0 auto; }
.gform_wrapper .ui-datepicker-trigger { flex: 0 0 auto; margin-left: 12px; width: 22px; height: 22px; cursor: pointer; }

.gform_wrapper .gfield_radio { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: var(--gap-form-radiorows) var(--gap-card-cardcard) !important; }
/* Collapse the tour radios to one column at 760px — the width below which the
   longest option ("Full Day Amalfi Coast & Capri Boat Tour") wraps in two columns. */
@media (max-width: 760px) { .gform_wrapper .gfield_radio { grid-template-columns: 1fr !important; } }
.gform_wrapper .gchoice { display: flex !important; align-items: center; gap: 12px !important; }
.gform_wrapper .gchoice input[type="radio"] { width: 18px !important; height: 18px !important; min-height: 0 !important; accent-color: var(--color-dama-blue); margin: 0; }
.gform_wrapper .gchoice label { margin: 0; font-size: var(--text-sizes-body); }

.gform_wrapper .gform_footer { padding: 0; margin: var(--gap-button-above) 0 0; display: flex; justify-content: flex-start; }
.gform_wrapper .gform_footer .gform_button,
.gform_wrapper .gform_button {
  display: inline-flex !important; align-items: center; justify-content: center; width: auto !important;
  padding: 10px 24px !important; border-radius: 100px !important;
  background: var(--color-dama-blue) !important; color: var(--color-white) !important;
  border: var(--stroke-border-width) solid var(--color-dama-blue) !important;
  font-weight: 500 !important; font-size: var(--text-sizes-body) !important; line-height: 1.6 !important; cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.gform_wrapper .gform_button:hover { background: #00587f !important; border-color: #00587f !important; }
.gform_wrapper .gfield_required { color: var(--color-dama-blue); }
.gform_confirmation_message { font-size: var(--text-sizes-body); }

/* ==========================================================================
   14. GALLERY  (Gallery / MA01 — 1 large + 4 small mosaic)
   ========================================================================== */
.gallery__mosaic { display: flex; gap: var(--gap-card-cardcard); align-items: stretch; width: 100%; }
.gallery__feature { position: relative; flex: 1 0 0; min-width: 0; aspect-ratio: 1 / 1; border-radius: var(--radius-large); overflow: hidden; }
.gallery__col { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: var(--gap-card-cardcard); }
.gallery__row { display: flex; gap: var(--gap-card-cardcard); }
.gallery__cell { position: relative; flex: 1 0 0; min-width: 0; aspect-ratio: 1 / 1; border-radius: var(--radius-large); overflow: hidden; }
.gallery__feature img, .gallery__cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   15. FAQ  (FAQ / MA01 — accordion + "other questions")
   ========================================================================== */
.faq { width: 100%; max-width: var(--max-width-844); border-bottom: var(--stroke-divider-width) solid var(--color-scheme-2-border); }
.faq__item { border-top: var(--stroke-divider-width) solid var(--color-scheme-2-border); }
.faq__question {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%;
  padding: var(--element-padding-faq-question-tb) 0; background: none; border: 0; cursor: pointer;
  font-family: var(--font-body); font-weight: 500; font-size: var(--text-sizes-heading-4);
  line-height: 1.2; letter-spacing: 0.21px; text-align: left; color: var(--color-scheme-2-text);
}
.faq__question::-webkit-details-marker { display: none; }
.faq__icon { width: 32px; height: 32px; flex-shrink: 0; transition: transform .25s ease; }
.faq__item[open] .faq__icon { transform: rotate(180deg); }
.faq__answer { display: flex; flex-direction: column; gap: var(--gap-text-p-p); padding-bottom: 24px; }
.faq__outro { display: flex; flex-direction: column; align-items: center; gap: var(--gap-button-above); max-width: var(--max-width-medium); text-align: center; }

/* ==========================================================================
   16. BLOG  (Blog / MA01 — 2 cards on blue)
   ========================================================================== */
.blog__grid { display: flex; gap: var(--gap-blog-gutter); align-items: stretch; width: 100%; }
.blog-card { display: flex; flex: 1 0 0; min-width: 0; flex-direction: column; gap: var(--gap-card-text-link); }
.blog-card__media { position: relative; width: 100%; aspect-ratio: 616 / 346.5; border-radius: var(--radius-large); overflow: hidden; }
.blog-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.blog-card__body { display: flex; flex-direction: column; gap: var(--gap-blog-category-h2); }
.blog-card__category { font-weight: 600; font-size: var(--text-sizes-text-small); color: var(--color-white); }
.blog-card__text { display: flex; flex-direction: column; gap: var(--gap-card-h3-text); }
.blog-card__link { display: inline-flex; align-items: center; gap: 8px; }
.blog__rows { display: flex; flex-direction: column; gap: var(--gap-blog-gutter); width: 100%; }

/* ==========================================================================
   17. FOOTER  (Footer / MA01)
   ========================================================================== */
.site-footer { display: flex; flex-direction: column; align-items: center; padding: var(--section-padding-section-medium) var(--page-padding-global); background: var(--color-scheme-2-background); color: var(--color-scheme-6-text); }
.site-footer__container { display: flex; flex-direction: column; gap: 80px; width: 100%; max-width: var(--container-large); }
/* 12-column grid (1280 container → 81px columns, 28px gutters). Brand spans
   the left 6 columns; the two link lists are the right two 3-column blocks. */
.site-footer__content { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 28px; row-gap: 48px; align-items: start; }
.site-footer__col--brand { grid-column: 1 / span 6; display: flex; flex-direction: column; gap: 32px; max-width: 100%; }
.site-footer__logo img, .site-footer__logo .custom-logo { width: 203px; height: auto; }
.site-footer__blocks { display: flex; flex-direction: column; gap: var(--gap-text-p-p); }
.site-footer__block { display: flex; flex-direction: column; gap: var(--gap-h4-text); }
.site-footer__block a { text-decoration: underline; }
.site-footer__social { display: flex; gap: 14px; }
.site-footer__social img { width: 34px; height: 34px; }
/* Wrapper dissolves so the two lists become grid items: cols 7-9 and 10-12. */
.site-footer__col--links { display: contents; }
.site-footer__col--links > .site-footer__links:first-child { grid-column: 7 / span 3; }
.site-footer__col--links > .site-footer__links:last-child { grid-column: 10 / span 3; }
.site-footer__links { display: flex; flex-direction: column; gap: var(--gap-footer-links); }
.site-footer__links a { font-weight: 500; }
.site-footer__credits { display: flex; flex-direction: column; gap: var(--gap-footer-line-credits); }
.site-footer__divider { width: 100%; height: var(--stroke-divider-width); background: var(--color-scheme-2-border); }
.site-footer__row { display: flex; align-items: flex-start; justify-content: space-between; font-size: var(--text-sizes-text-small); }
.site-footer__legal { display: flex; gap: var(--gap-text-p-p); }

/* ==========================================================================
   18. PAGE BANNER + ENTRY (inner pages / single)
   ========================================================================== */
.page-banner { display: flex; flex-direction: column; align-items: center; padding: var(--section-padding-section-medium) var(--page-padding-global); background: var(--color-scheme-2-background); }
.page-banner__container { display: flex; flex-direction: column; gap: var(--gap-title-h2-text); width: 100%; max-width: var(--container-large); }
.page-banner__title { max-width: var(--max-width-large); }
.entry { display: flex; flex-direction: column; gap: var(--gap-title-intro-content); width: 100%; max-width: var(--max-width-large); }
.entry__content { display: flex; flex-direction: column; gap: var(--gap-text-p-p); }
.entry__featured { border-radius: var(--radius-large); overflow: hidden; }
.entry__featured-wrap { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.entry__featured-caption { font-size: var(--text-sizes-text-small); color: var(--opacity-neutral-darkest-60); border-left: 2px solid var(--opacity-neutral-darkest-15); padding-left: 8px; }

/* Style Gutenberg / the_content() blocks so editor content matches the theme. */
.entry__content > h1, .entry__content > h2 { font-family: var(--font-heading); font-size: var(--text-sizes-heading-2); line-height: 1.35; letter-spacing: 0.4px; }
.entry__content > h3 { font-family: var(--font-heading); font-size: var(--text-sizes-heading-3); line-height: 1.2; letter-spacing: 0.28px; }
.entry__content > h4 { font-family: var(--font-body); font-weight: 500; font-size: var(--text-sizes-heading-4); line-height: 1.2; }
.entry__content p, .entry__content li { font-size: var(--text-sizes-body); line-height: 1.6; }
/* "Intro" paragraph style (larger lead paragraph — Figma blog intro size). */
.entry__content p.is-style-intro, p.is-style-intro { font-size: var(--text-sizes-intro); line-height: 1.6; }
.entry__content a { color: var(--color-dama-blue); text-decoration: underline; text-underline-offset: 3px; }
.entry__content ul, .entry__content ol { padding-left: 1.4em; display: flex; flex-direction: column; gap: var(--gap-text-li-li); }
.entry__content ul { list-style: disc; }
.entry__content ol { list-style: decimal; }
.entry__content li { margin: 0; }
.entry__content img, .entry__content .wp-block-image img { border-radius: var(--radius-large); }
.entry__content figure { display: flex; flex-direction: column; gap: 8px; }
.entry__content figcaption { font-size: var(--text-sizes-text-small); color: var(--opacity-neutral-darkest-60); border-left: 2px solid var(--opacity-neutral-darkest-15); padding-left: 8px; }
/* Blog blockquote (Figma "Individual Blog"): thin left line + indent, italic. */
.entry__content blockquote { border-left: 2px solid var(--opacity-neutral-darkest-15); padding-left: 20px; margin: 4px 0; font-family: var(--font-body); font-style: italic; font-size: 20px; line-height: 1.4; }
.entry__content blockquote p { font-size: 20px; font-style: italic; line-height: 1.4; }
.entry__content .wp-block-button__link { display: inline-flex; align-items: center; padding: 10px 24px; border-radius: 100px; background: var(--color-dama-blue); color: var(--color-white); font-family: var(--font-body); font-weight: 500; text-decoration: none; }
.entry__content .wp-block-buttons { display: flex; gap: var(--gap-button-between); flex-wrap: wrap; }

/* Single blog post (Content / MA02) — narrower 844 column, tag pills. */
.entry--blog { max-width: var(--max-width-844); gap: var(--gap-button-above); }
.entry--blog .entry__title { width: 100%; }
.entry__tags { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.blog-tag { border: var(--stroke-border-width) solid var(--color-scheme-2-border); border-radius: 100px; padding: 4px 10px; font-weight: 600; font-size: var(--text-sizes-text-small); }

/* ==========================================================================
   21. BLOCK ADAPTATIONS — style core blocks used by the homepage patterns
   ========================================================================== */
/* Core images inside the theme's media wrappers must fill the box. */
.hero__bg .wp-block-image,
.tour-card__media .wp-block-image,
.gallery__feature .wp-block-image,
.gallery__cell .wp-block-image,
.boat__image .wp-block-image,
.split__media .wp-block-image,
.lightbox .wp-block-image { display: block; width: 100%; height: 100%; margin: 0; }
.split__media .wp-block-image { height: auto; }
.split__media .wp-block-image img { border-radius: var(--radius-large); }

/* Core buttons → theme pill buttons (primary by default, outline variant). */
.wp-block-button__link {
  background: var(--color-dama-blue); color: var(--color-white);
  border: var(--stroke-border-width) solid var(--color-dama-blue);
  border-radius: 100px; padding: 10px 24px;
  font-family: var(--font-body); font-weight: 500; font-size: var(--text-sizes-body); line-height: 1.6;
}
.wp-block-button.btn--secondary .wp-block-button__link { background: var(--color-white); color: var(--color-scheme-2-text); }
.wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--color-neutral-darkest); border: var(--stroke-border-width) solid var(--color-dama-blue); }
.scheme-5 .wp-block-button.is-style-outline .wp-block-button__link { color: var(--color-white); border: var(--stroke-border-width) solid var(--color-white); }
.hero__actions, .actions-row { display: flex; gap: var(--gap-button-between); flex-wrap: wrap; align-items: center; }
/* Block-button hover states (target the link, not the wrapper). */
.wp-block-button .wp-block-button__link { transition: background .2s ease, color .2s ease, border-color .2s ease; }
.wp-block-button:not(.btn--secondary):not(.is-style-outline):not(.is-style-dama-link) .wp-block-button__link:hover { background: #00587f; border-color: #00587f; }
.wp-block-button.btn--secondary .wp-block-button__link:hover { background: var(--color-dama-blue); color: var(--color-white); }
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--color-dama-blue); color: var(--color-white); border-color: var(--color-dama-blue); }
.scheme-5 .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--color-white); color: var(--color-dama-blue); }

/* "Text link (chevron)" button style — replaces the Figma text+chevron links. */
.wp-block-button.is-style-dama-link .wp-block-button__link {
  background: transparent; border: none; border-radius: 0; padding: 0;
  color: var(--color-neutral-darkest); font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px;
}
.wp-block-button.is-style-dama-link .wp-block-button__link::after {
  content: ""; width: 7px; height: 7px; flex-shrink: 0;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .2s ease;
}
.wp-block-button.is-style-dama-link .wp-block-button__link:hover { text-decoration: underline; text-underline-offset: 4px; }
.wp-block-button.is-style-dama-link .wp-block-button__link:hover::after { transform: translateX(3px) rotate(-45deg); }
.scheme-5 .wp-block-button.is-style-dama-link .wp-block-button__link { color: var(--color-white); }

/* Core <details> accordion → theme FAQ styling. */
.faq .wp-block-details { border-top: var(--stroke-divider-width) solid var(--color-scheme-2-border); }
.faq .wp-block-details summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  list-style: none; cursor: pointer; padding: var(--element-padding-faq-question-tb) 0;
  font-family: var(--font-body); font-weight: 500; font-size: var(--text-sizes-heading-4); line-height: 1.2;
}
.faq .wp-block-details summary::-webkit-details-marker { display: none; }
.faq .wp-block-details summary::after {
  content: ""; width: 12px; height: 12px; flex-shrink: 0;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq .wp-block-details[open] summary::after { transform: rotate(-135deg); }
.faq .wp-block-details > :not(summary) { padding-bottom: 24px; }
.faq .wp-block-details p { font-size: var(--text-sizes-body); line-height: 1.6; }

/* ==========================================================================
   19. ACCESSIBILITY
   ========================================================================== */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--color-dama-blue); color: #fff; padding: 12px 20px; z-index: 1000; }
.skip-link:focus { left: 0; }

/* ==========================================================================
   20. RESPONSIVE  (Figma Mobile frames)
   ========================================================================== */
/* Navbar switches to the hamburger menu earlier — the horizontal items start
   wrapping to two lines around ~1160px, so collapse it by 1215px. */
@media (max-width: 1215px) {
  .navbar__column { gap: 16px; }
  .navbar__toggle { display: inline-flex; background: none; border: 0; cursor: pointer; padding: 8px; }
  .navbar__links { position: absolute; top: 93px; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px var(--page-padding-global); background: var(--color-scheme-1-background); border-bottom: var(--stroke-border-width) solid var(--opacity-neutral-darkest-15); display: none; }
  .navbar__links.is-open { display: flex; }
  .navbar__links .sub-menu { position: static; display: flex; min-width: 0; padding: 8px 0 4px 16px; border: 0; box-shadow: none; background: transparent; }
  .navbar__links .menu-item-has-children > a::after { display: none; }
}

@media (max-width: 991px) {
  :root {
    --page-padding-global: 24px;
    --section-padding-section-large: 80px;
    --section-padding-section-medium: 56px;
    --text-sizes-heading-1: 44px;
    --text-sizes-heading-2: 32px;
    --text-sizes-heading-5: 26px;
    --gap-split2-centre: 48px;
    --gap-blog-gutter: 28px;
    --gap-title-intro-content: 48px;
  }
  .split, .split--reverse { flex-direction: column; align-items: stretch; }
  .split > .lightbox { align-self: center; max-width: 100%; }
  .tours__row { flex-direction: column; }
  .boat__cols { flex-direction: column; }
  .reviews__grid { flex-direction: column; }
  .contact__field { min-width: 100%; }
  .contact__radio { min-width: 100%; }
  .gallery__mosaic { flex-direction: column; }
  .gallery__feature { aspect-ratio: 16 / 11; }

  /* When rows stack into columns, a flex-basis of 0 would apply to HEIGHT and
     collapse the items (worsened by overflow:hidden + absolutely-positioned
     images). Reset to content-sized, full-width blocks. */
  .tours__row > .tour-card,
  .split > .split__content,
  .split > .split__media,
  .boat__cols > .boat__col,
  .reviews__grid > .reviews__col,
  .gallery__mosaic > .gallery__feature,
  .gallery__mosaic > .gallery__col { flex: 0 0 auto; width: 100%; }
  /* Two-column grid (1fr | 1fr + gutter): brand in the left half, the two link
     menus stacked in the right half — left-aligned so their left edge starts
     just past centre, not flush against the right margin. */
  .site-footer__content { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; row-gap: 48px; align-items: start; }
  .site-footer__col--brand { grid-column: 1; min-width: 0; }
  .site-footer__col--links { grid-column: 2; display: flex; flex-direction: column; gap: 24px; }
  .site-footer__row { flex-direction: column; gap: 24px; }
  .hero { min-height: 560px; }
  /* Shorter hero + captain photo on tablet so they don't dominate the screen. */
  .hero-cover.wp-block-cover { min-height: 560px; }
  .split--top .split__media .wp-block-image img { height: 460px; }
}
/* Footer: brand | stacked-links holds from 991px down; drop to a single column
   only once it's too narrow to sit side by side without breaking. */
@media (max-width: 530px) {
  .site-footer__content { display: flex; flex-direction: column; gap: 48px; }
}
@media (max-width: 560px) {
  .hero__actions { flex-direction: column; align-items: stretch; }
  .gallery__row { flex-direction: column; }
  .gallery__row > .gallery__cell { flex: 0 0 auto; width: 100%; }
  .gallery__cell { aspect-ratio: 16 / 11; }
  /* Shortest hero + captain photo on phones. */
  .hero-cover.wp-block-cover { min-height: 440px; }
  .split--top .split__media .wp-block-image img { height: 340px; }
  /* Blog cards stay two-across through the tablet range and only stack to a
     single column here at phone width (the flex-basis reset stops the
     aspect-ratio media from collapsing once stacked). */
  .blog__grid { flex-direction: column; }
  .blog__grid > .blog-card { flex: 0 0 auto; width: 100%; }
}

/* ==========================================================================
   20. SCROLL-IN ANIMATIONS
   Subtle fade + short slide as sections enter the viewport. Gated on
   .anim-ready (added by JS only when IntersectionObserver exists) and on
   prefers-reduced-motion, so content is never hidden without JS/animation.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* 1. Section H2s — fade + slide up, word by word (JS wraps words + staggers). */
  .anim-ready h2.h2 .anim-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.35em);
    transition: opacity var(--word-dur, .4s) ease, transform var(--word-dur, .4s) ease;
  }
  .anim-ready h2.h2.is-inview .anim-word { opacity: 1; transform: none; }

  /* 2. Inset images — fade + short slide from the side they sit on. */
  .anim-ready .split__media,
  .anim-ready .lightbox,
  .anim-ready .boat__image {
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease;
    will-change: opacity, transform;
  }
  .anim-ready .split__media { transform: translateX(-32px); }  /* image sits left  → in from left */
  .anim-ready .lightbox     { transform: translateX(32px); }   /* image sits right → in from right */
  .anim-ready .boat__image  { transform: translateY(28px); }
  .anim-ready .split__media.is-inview,
  .anim-ready .lightbox.is-inview,
  .anim-ready .boat__image.is-inview { opacity: 1; transform: none; }

  /* 3. Gallery mosaic — fade in largest-first (delays set inline by JS). */
  .anim-ready .gallery__feature,
  .anim-ready .gallery__cell {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .6s ease, transform .6s ease;
  }
  .anim-ready .gallery__mosaic.is-inview .gallery__feature,
  .anim-ready .gallery__mosaic.is-inview .gallery__cell { opacity: 1; transform: none; }
}

/* ==========================================================================
   21. MICRO-INTERACTIONS, HERO MOTION, PARALLAX & CONDENSING HEADER
   ========================================================================== */
/* Offset in-page anchor jumps for the sticky header (scroll-behavior is smooth). */
:target { scroll-margin-top: 110px; }

/* Buttons: include border-color in the smooth hover fill. */
.btn { transition: opacity .2s ease, background .2s ease, color .2s ease, border-color .2s ease; }

/* Sticky header condenses after you scroll past the hero. */
.site-header { transition: box-shadow .3s ease; }
.navbar { transition: height .3s ease; }
.navbar__logo img, .navbar__logo .custom-logo { transition: width .3s ease; }
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.07); }
.site-header.is-scrolled .navbar { height: 76px; }
.site-header.is-scrolled .navbar__logo img, .site-header.is-scrolled .navbar__logo .custom-logo { width: 140px; }

/* Parallax containers — clip the scaled image so it can drift without gaps. */
.split__media { overflow: hidden; border-radius: var(--radius-large); }

@media (prefers-reduced-motion: no-preference) {

  /* Ken Burns — very slow, subtle drift on hero/banner cover images. */
  .hero-cover .wp-block-cover__image-background,
  .page-hero .wp-block-cover__image-background {
    transform-origin: center;
    animation: dama-kenburns 18s ease-in-out infinite alternate;
    will-change: transform;
  }
  /* Constant zoom + horizontal drift = a gentle pan (no zoom pulse or vertical bob). */
  @keyframes dama-kenburns { from { transform: scale(1.1) translateX(-3.5%); } to { transform: scale(1.1) translateX(3.5%); } }

  /* Hero headline + buttons rise in on load. */
  .anim-ready .hero-cover .hero__title   { animation: dama-rise .7s ease .15s both; }
  .anim-ready .hero-cover .hero__actions { animation: dama-rise .7s ease .38s both; }
  @keyframes dama-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

  /* Section intro paragraphs fade up just after their heading. */
  .anim-ready .section-title > .intro { opacity: 0; transform: translateY(10px); transition: opacity .5s ease .22s, transform .5s ease .22s; }
  .anim-ready .section-title.is-inview > .intro { opacity: 1; transform: none; }

  /* Cards (reviews, tours, blog) fade + rise, staggered (delays set inline by JS). */
  .anim-ready .review-card,
  .anim-ready .tour-card,
  .anim-ready .blog-card { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
  .anim-ready .reviews__grid.is-inview .review-card,
  .anim-ready .tours__row.is-inview .tour-card,
  .anim-ready .blog__rows.is-inview .blog-card { opacity: 1; transform: none; }

  /* Parallax — inset images drift slightly slower than scroll (offset via --parallax). */
  .split__media img, .lightbox img { transform: translateY(var(--parallax, 0px)) scale(1.06); will-change: transform; }

  /* Hover — card image zoom only (no lift; the card box stays put and its
     rounded corners are preserved). Clipped by the media box's overflow. */
  .tour-card__media img, .blog-card__media img { transition: transform .4s ease; }
  .tour-card:hover .tour-card__media img, .blog-card:hover .blog-card__media img { transform: scale(1.04); }
}