/*
 * Element defaults and the few primitives every component shares: buttons,
 * icons, kicker, check list. Nothing here knows about a component.
 */

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--azul-ground);
  color: var(--azul-ink);
  font-family: var(--azul-font-body);
  font-size: var(--azul-step-0);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* Headings inherit their colour: a block on a photo sets white once, on
   its container. Running text sets the ink below. */
h1, h2, h3, h4 {
  margin: 0 0 var(--azul-space-s);
  font-family: var(--azul-font-display);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.015em;
  text-wrap: balance;
}

h1 { font-size: var(--azul-step-3); line-height: 1.06; }
h2 { font-size: var(--azul-step-2); line-height: 1.2; }
h3 { font-size: var(--azul-step-1); line-height: 1.25; }

p, ul, ol { margin: 0 0 var(--azul-space-m); }

:where(.entry__content, .article__body, .entry-header__text, .page-header) > :is(h1, h2, h3, h4) { color: var(--azul-ink); }

a { color: var(--azul-coral-dark); transition: color var(--azul-t-fast) var(--azul-ease), background-color var(--azul-t-fast) var(--azul-ease); }
a:hover { color: var(--azul-coral); }

img { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 2px solid var(--azul-coral);
  outline-offset: 3px;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Icons: inline SVG in currentColor. Glyphs are stroked, illustrations filled. */
.icon {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--art,
.icon .icon__fill,
.icon .icon__dot { fill: currentColor; stroke: none; }

/*
 * Buttons. Coral is the call to action; outline the second action on a light
 * ground; ghost and light sit on a photograph; ink is a quiet bordered link;
 * wa is WhatsApp. A trailing icon moves on hover.
 */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 22px;
  border: 1.5px solid transparent;
  border-radius: var(--azul-radius-s);
  background: var(--azul-gold);
  color: var(--azul-ink);
  font: inherit;
  font-size: var(--azul-text-base);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--azul-t-fast) var(--azul-ease), color var(--azul-t-fast) var(--azul-ease), border-color var(--azul-t-fast) var(--azul-ease);
}

.button:hover { background: var(--azul-gold-dark); color: var(--azul-ink); }
.button:active { transform: translateY(1px); }
.button .icon { width: 18px; height: 18px; transition: transform var(--azul-t-fast) var(--azul-ease); }
.button:hover span + .icon { transform: translateX(2px); }

.button--outline { border-color: var(--azul-coral); background: transparent; color: var(--azul-coral); }
.button--outline:hover { background: var(--azul-coral); color: #fff; }

.button--ghost { border-color: rgba(255, 255, 255, .85); background: rgba(8, 54, 86, .15); color: #fff; }
.button--ghost:hover { background: #fff; color: var(--azul-ink); }

.button--light { border-color: #fff; background: #fff; color: var(--azul-ink); }
.button--light:hover { border-color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .86); color: var(--azul-ink); }

.button--ink { border-color: var(--azul-ink); background: transparent; color: var(--azul-ink); }
.button--ink:hover { background: var(--azul-ink); color: #fff; }

/* Outline on a photo: the footer band, a cta-band with its image. */
.button--outline-light { border: 1.5px solid #fff; background: rgba(var(--azul-veil), .12); color: #fff; }
.button--outline-light:hover { border-color: #fff; background: rgba(255, 255, 255, .16); color: #fff; }

/* Two kinds of call to action: coral books (availability, booking pages),
   gold leads further into the site (packages, the house, what is included). */
.button--coral { border-color: var(--azul-cta); background: var(--azul-cta); color: #fff; }
.button--coral:hover { border-color: var(--azul-cta-dark); background: var(--azul-cta-dark); color: #fff; }
.button--gold { border-color: var(--azul-gold); background: var(--azul-gold); color: var(--azul-ink); }
.button--gold:hover { border-color: var(--azul-gold-dark); background: var(--azul-gold-dark); color: var(--azul-ink); }

.button--wa { background: var(--azul-wa); color: #fff; }
.button--wa:hover { background: var(--azul-wa-dark); color: #fff; }
.button--wa .icon { width: 22px; height: 22px; }

.button--block { width: 100%; }
.button--compact { min-height: 44px; padding: 10px 14px; font-size: .906rem; }
/* The single call to action that closes a section. */
.button--lg { min-height: 54px; padding-inline: 28px; font-size: var(--azul-text-lg); }

/* The row under a section that holds its call to action, centred; the
   button runs full width on a phone. */
.section__cta { margin: 32px 0 0; text-align: center; }

/* A row of buttons. */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: var(--azul-space-m); }

/* A text link that leads somewhere: semibold, coral, with a moving arrow. */
.link-arrow { display: inline-flex; align-items: center; gap: 8px; padding-block: .3em; color: var(--azul-coral-dark); font-size: var(--azul-text-base); font-weight: 600; text-decoration: none; }
.link-arrow .icon { width: 16px; height: 16px; transition: transform var(--azul-t-fast) var(--azul-ease); }
.link-arrow:hover { color: var(--azul-coral); }
.link-arrow:hover .icon { transform: translateX(3px); }

/* Small spaced capitals above a title. */
.kicker {
  margin: 0 0 8px;
  color: var(--azul-brown);
  font-size: var(--azul-text-xs);
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.3;
  text-transform: uppercase;
}

/* Centred kicker in deep sky blue between two small brush strokes. */
.kicker--brush { display: flex; align-items: center; justify-content: center; gap: .9em; color: var(--azul-sky-deep); }
.kicker--brush::before, .kicker--brush::after { content: ""; flex: none; width: 4.5em; height: .32em; background: currentColor; -webkit-mask: url("../img/marks/eyebrow.webp") center / 100% 100% no-repeat; mask: url("../img/marks/eyebrow.webp") center / 100% 100% no-repeat; }
.kicker--brush::after { transform: scaleX(-1); }

/* Navy kicker of a section head: larger, wider spaced (after --brush, whose
   colour it overrides). */
.kicker--navy { margin-bottom: 18px; color: var(--azul-navy); font-size: .84rem; letter-spacing: .2em; }

/* Section titles of inserted blocks: display face, never a heading element. */
.display-title {
  margin: 0;
  color: var(--azul-ink);
  font-family: var(--azul-font-display);
  font-size: clamp(1.65rem, 1.3rem + 1vw, 2.2rem);
  line-height: 1.12;
  letter-spacing: -.015em;
  text-wrap: balance;
}

/* A short text on a brush patch: the patch is a mask (--brush-mask, set by
   a variant) filled with --brush-color and reaching --brush-inset past the
   text box. The element sets its own font, padding and tilt. */
.brush-label { position: relative; isolation: isolate; }
.brush-label::before { content: ""; position: absolute; z-index: -1; inset: var(--brush-inset, 0); background: var(--brush-color, var(--azul-orange)); -webkit-mask: var(--brush-mask) center / 100% 100% no-repeat; mask: var(--brush-mask) center / 100% 100% no-repeat; }
/* A name by hand, white on an orange stroke. */
.brush-label--label { --brush-mask: url("../img/marks/label-brush.webp"); --brush-inset: 0 -4px; --brush-color: var(--azul-cta); color: #fff; font-family: var(--azul-font-hand); font-weight: 700; line-height: 1.1; white-space: nowrap; transform-origin: left center; }
/* An hour or a step number. */
.brush-label--time { --brush-mask: url("../img/marks/time-brush.webp"); }
/* A rating or a price. */
.brush-label--rating { --brush-mask: url("../img/marks/rating-brush.webp"); }
/* The Google score of the reviews panel. */
.brush-label--score { --brush-mask: url("../img/marks/score-brush.webp"); }

/* An orange arched brush stroke on its own line under a title or a price.
   The element sets the stroke's width (and max-width), height and gap on
   its own ::after. */
.stroke-under::after { content: ""; display: block; height: 12px; margin-top: 16px; background: var(--azul-orange); -webkit-mask: url("../img/marks/arch-soft.webp") center / 100% 100% no-repeat; mask: url("../img/marks/arch-soft.webp") center / 100% 100% no-repeat; }

/* Large navy section title, an orange mark under its starred passage; the
   flat arch spans the middle 80% of the passage. */
.display-title--xl { --mark-color: var(--azul-orange); color: var(--azul-navy); font-size: var(--azul-title-l); line-height: 1.22; }
.display-title--xl .ink-mark--arch-soft::after { right: 10%; left: 10%; }

@media (max-width: 719px) {
  .kicker--navy { font-size: .74rem; letter-spacing: .14em; }
  .display-title--xl { font-size: 1.6rem; }
  .section__cta .button { width: 100%; }
}

.display-lead { margin: 10px 0 0; color: var(--azul-ink-soft); font-size: var(--azul-text-lg); line-height: 1.6; }

/* Short lines, a coral check each. */
.checklist { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.checklist li { display: flex; align-items: flex-start; gap: 10px; color: var(--azul-ink); font-size: .906rem; line-height: 1.4; }
.checklist .icon { width: 18px; height: 18px; margin-top: 1px; color: var(--azul-coral); stroke-width: 2.2; }

/* Page scroll lock while a modal layer is open (lightbox, video dialog,
   exit dialog, mobile menu): html.has-layer-open, set by azulUi. */
.has-layer-open,
.has-layer-open body { overflow: hidden; }

/* Motion off on request: everything snaps, nothing is hidden. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, ::details-content {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
    transition-delay: 0s !important;
  }
}

.lead {
  font-size: var(--azul-step-1);
  color: var(--azul-ink-soft);
}

/* Tile, a card: hairline border, rounded, clipped, content stacked; the
   surface ground unless the tile sets its own. Not named .card: the
   WordPress admin styles .card and loads that sheet in the editor canvas. */
.tile { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--azul-line); border-radius: var(--azul-radius); background: var(--azul-surface); }
/* A photo that zooms in a little while its tile, or a .tile__zoom area
   around it, is hovered. */
.tile__media { transition: transform .5s ease; }
.tile:hover .tile__media,
.tile__zoom:hover .tile__media { transform: scale(1.04); }

/* Panel: a bordered card on sand (or white), the frame of sidebar blocks. */
.panel { position: relative; overflow: hidden; border: 1px solid var(--azul-line); border-radius: var(--azul-radius); background: var(--azul-sand); }
.panel--white { background: var(--azul-surface); }
.panel--padded { padding: 20px 18px; }
.panel__title { margin: 0 0 14px; color: var(--azul-ink); font-family: var(--azul-font-display); font-size: 1.45rem; line-height: 1.15; letter-spacing: -.015em; }
.panel__actions { display: grid; gap: 10px; margin-top: 18px; }
.panel__actions .button { width: 100%; }
.panel__link { margin-top: 16px; }

/* The "?" next to a room sold by the bed (room_help()): its note shows on hover,
   focus or tap, above the positioned line that holds it. */
.room-help button { position: relative; display: block; width: 18px; height: 18px; padding: 0; border: 1px solid currentColor; border-radius: var(--azul-radius-s); background: none; color: inherit; font: inherit; font-size: .72rem; font-weight: 700; line-height: 1; cursor: help; }
.room-help button::before { content: ""; position: absolute; inset: -10px; }
.room-help__tip { position: absolute; right: 0; bottom: calc(100% + 8px); left: 0; z-index: 3; visibility: hidden; padding: 9px 11px; border-radius: var(--azul-radius-s); background: var(--azul-navy); box-shadow: 0 6px 18px -6px rgba(11, 47, 75, .5); color: #fff; font-size: .8rem; font-weight: 400; line-height: 1.35; opacity: 0; transition: opacity var(--azul-t-fast) ease; }
.room-help:hover .room-help__tip,
.room-help:focus-within .room-help__tip { visibility: visible; opacity: 1; }

/* Phone: a kicker or a title set left on wide screens is centred, with its
   stroke (.center-sm, set by the block on the element; the text under it
   keeps its alignment). The footer band follows (chrome.css holds its layout). */
@media (max-width: 719px) {
  .center-sm { justify-content: center; text-align: center; }
  .center-sm.stroke-under::after { margin-inline: auto; }
  /* A kicker as wide as its text: centred as a box. */
  .center-sm--box { margin-inline: auto; }
  .site-footer__band :is(.site-footer__kicker, .site-footer__band-title) { justify-content: center; text-align: center; }
  .site-footer__band-stroke { margin-inline: auto; }
  /* A second rule after the kicker balances the one before it. */
  .site-footer__band .site-footer__kicker::after { content: ""; width: 34px; height: 3px; border-radius: 2px; background: var(--azul-coral); }
}