/* ----------------------------------------------------------------
   Taigh Tuaram — Editorial Hebridean
   Custom CSS beyond Tailwind/DaisyUI
   ---------------------------------------------------------------- */

/* === FONTS === */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/fraunces-normal-latin.069cb90e11a3.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/fraunces-normal-latin-ext.118070a4b0cf.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/fraunces-italic-latin.fa7ce081be5e.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/fraunces-italic-latin-ext.53f8865644cd.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/static/fonts/sourcesans3-normal-latin.30164609c163.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/static/fonts/sourcesans3-normal-latin-ext.c6ba61588d7d.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("/static/fonts/sourcesans3-italic-latin.71c881907d08.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("/static/fonts/sourcesans3-italic-latin-ext.5358bd4fb16e.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}


/* === BODY PROSE COLOUR ===
   --color-prose lives here (not in @theme) because Tailwind v4 only
   emits @theme tokens that are referenced by utility classes; this one
   is consumed by raw CSS.

   Rules wrapped in @layer components so Tailwind utilities (text-white,
   text-base-content, etc.) — which live in @layer utilities — can
   override on a per-element basis. Unlayered rules beat layered ones
   regardless of specificity, which would otherwise break text-white on
   hero headings. */

:root {
  --color-prose: oklch(30% 0.015 250);
}

@layer components {
  main {
    color: var(--color-prose);
  }

  main h1,
  main h2,
  main h3,
  main h4 {
    color: var(--color-base-content);
  }
}


/* === HEADING SCALE === */

.h-display {
  font-family: 'Fraunces', ui-serif, Georgia, serif;
  font-weight: 300;
  font-size: 3rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

@media (min-width: 768px) {
  .h-display {
    font-size: 4.5rem;
  }
}

.h-section {
  font-family: 'Fraunces', ui-serif, Georgia, serif;
  font-weight: 400;
  font-size: 2.25rem;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

@media (min-width: 768px) {
  .h-section {
    font-size: 3rem;
  }
}

.h-subsection {
  font-family: 'Fraunces', ui-serif, Georgia, serif;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

@media (min-width: 768px) {
  .h-subsection {
    font-size: 1.875rem;
  }
}

.prose-narrow {
  max-width: 65ch;
}


/* === HARRIS TWEED TEXTURES === */

[class*="texture-"] {
  position: relative;
  isolation: isolate;
}

[class*="texture-"]::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  border-radius: inherit;
}

.texture-herringbone::before {
  opacity: 0.35;
  background-image: url("/static/images/tweed-herringbone.177f0fcf4862.svg");
  background-size: 64px 64px;
  background-repeat: repeat;
}

.texture-twill::before {
  opacity: 0.03;
  background-image: repeating-linear-gradient(45deg,
      transparent,
      transparent 4px,
      oklch(50% 0.02 240) 4px,
      oklch(50% 0.02 240) 5px);
}

.texture-warp::before {
  opacity: 0.06;
  background-image: repeating-linear-gradient(0deg,
      transparent,
      transparent 2px,
      oklch(50% 0.02 240) 2px,
      oklch(50% 0.02 240) 3px);
  background-size: 100% 8px;
}

/* Light-on-dark variant — for the footer over neutral granite */
.texture-herringbone-light::before {
  opacity: 0.6;
  background-image: url("/static/images/tweed-herringbone-dark.efa10c5efa16.svg");
  background-size: 64px 64px;
  background-repeat: repeat;
}


/* === HERO === */

.hero-scenic {
  position: relative;
  /* Full-bleed hero sized to the viewport so the bottom-aligned title is always
     visible on load without scrolling. The portrait (3:4) source is centre-cropped
     by object-fit: cover — nearly whole on tall phone screens, a horizontal band
     (sea, surf, dunes) on wide ones. min-height stops it collapsing on very short
     viewports. (Avoid aspect-ratio + max-height here: when max-height clamps the
     height, the ratio derives width from it and the hero stops filling the width.) */
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 32rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  overflow: hidden;
}

.hero-scenic__image {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-scenic__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-scenic__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.5) 0%,
      rgba(0, 0, 0, 0.15) 18%,
      rgba(0, 0, 0, 0.05) 45%,
      rgba(0, 0, 0, 0.25) 75%,
      rgba(0, 0, 0, 0.65) 100%);
}

/* For shorter banners (image-banner, image-16-9) where the title sits in
   the bottom ~15%. White display text needs the underlying composite
   pixel below ~50% luminance; against bright sand/sky that requires
   ~0.65 alpha minimum at the title position. */
.image-overlay-scrim {
  background: linear-gradient(to bottom,
      transparent 0%,
      transparent 30%,
      rgba(0, 0, 0, 0.3) 55%,
      rgba(0, 0, 0, 0.7) 80%,
      rgba(0, 0, 0, 0.9) 100%);
}

.image-overlay-scrim h1,
.image-overlay-scrim h2 {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.hero-scenic__content {
  position: relative;
  z-index: 2;
  padding-bottom: 12vh;
  text-align: center;
}


/* === PULL QUOTE === */

.pull-quote {
  font-family: 'Fraunces', ui-serif, Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 1.375rem;
  line-height: 1.5;
  padding-left: 1.5rem;
  border-left: 2px solid var(--color-accent);
  color: oklch(35% 0.02 250);
}


/* === SQUARE IMAGE === */

/* Square cells suit the mixed-orientation gallery: the portrait stove keeps
   most of its height, the landscapes lose only a little width. */
.image-square {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
}

.image-square img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-16-9 {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
}

.image-16-9 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-banner {
  aspect-ratio: 3 / 1;
  overflow: hidden;
  position: relative;
}

.image-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* === NAV LINK === */

.nav-link {
  text-transform: uppercase;
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  padding: 0.5rem 0;
}

.nav-link:hover {
  color: oklch(38% 0.08 245);
}

/* White variant for transparent nav over hero */
.nav-link-light {
  color: rgba(255, 255, 255, 0.85);
}

.nav-link-light:hover {
  color: white;
}


/* === EDITORIAL CARD ===
   Separation by background-shift, not border. The card auto-detects its
   surrounding section: on a base-200 section a card is base-100; on a
   base-100 section a card is base-200. Hover steps one stop further. */

.card-editorial {
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--color-base-100);
}

.bg-base-100 .card-editorial,
.texture-herringbone.bg-base-100 .card-editorial {
  background: var(--color-base-200);
}

a.card-editorial,
.card-editorial[role="button"] {
  display: block;
  color: inherit;
}

a.card-editorial:hover,
.card-editorial[role="button"]:hover {
  background: var(--color-base-300);
}

a.card-editorial:focus-visible,
.card-editorial[role="button"]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}


/* === BUTTONS — snap states, no transition === */

.btn-primary-editorial {
  display: inline-block;
  padding: 0.875rem 2rem;
  background: var(--color-primary);
  color: var(--color-primary-content);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 0.375rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}

.btn-primary-editorial:hover {
  background: var(--color-primary-strong);
}

.btn-primary-editorial:active {
  background: var(--color-primary-strong);
  transform: translateY(1px);
}

.btn-primary-editorial:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.btn-primary-editorial:disabled,
.btn-primary-editorial[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary-editorial.is-block {
  width: 100%;
}

.btn-secondary-editorial {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: transparent;
  color: var(--color-base-content);
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid var(--color-base-300);
  border-radius: 0.375rem;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}

.btn-secondary-editorial:hover {
  background: var(--color-base-200);
}

.btn-secondary-editorial:active {
  background: var(--color-base-300);
}

.btn-secondary-editorial:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}


/* === EDITORIAL ALERT (replaces DaisyUI full-colour fills) === */

.alert-editorial {
  border-left: 4px solid;
  border-radius: 0.375rem;
  padding: 1rem 1.25rem;
  background: oklch(97.5% 0.005 240 / 0.8);
}

.alert-editorial[data-type="success"] {
  border-left-color: oklch(50% 0.09 155);
}

.alert-editorial[data-type="error"] {
  border-left-color: oklch(50% 0.18 25);
}

.alert-editorial[data-type="warning"] {
  border-left-color: oklch(73% 0.13 75);
}

.alert-editorial[data-type="info"] {
  border-left-color: oklch(55% 0.08 230);
}

.alert-editorial[data-type="debug"] {
  border-left-color: oklch(86% 0.012 240);
}


/* === SECTION BREAK === */

.section-break {
  width: 100%;
  height: 1px;
  position: relative;
  overflow: hidden;
}

.section-break::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg,
      oklch(86% 0.012 240),
      oklch(86% 0.012 240) 4px,
      transparent 4px,
      transparent 8px);
}


/* === ERROR PAGES === */

.error-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  position: relative;
  overflow: hidden;
}

.error-page__code {
  position: absolute;
  font-family: 'Fraunces', ui-serif, Georgia, serif;
  font-weight: 200;
  font-size: clamp(12rem, 30vw, 28rem);
  line-height: 1;
  opacity: 0.06;
  user-select: none;
  pointer-events: none;
  z-index: 0;
}

.error-page__content {
  position: relative;
  z-index: 1;
  max-width: 28rem;
}


/* === AUDIO PLAYER === */

.audio-player {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  background: var(--color-base-200);
}

.audio-player__btn {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: oklch(38% 0.08 245);
  color: white;
  border: none;
  cursor: pointer;
}

.audio-player__btn:hover {
  background: oklch(33% 0.08 245);
}

.audio-player__progress {
  flex: 1;
  height: 3px;
  background: oklch(86% 0.012 240);
  border-radius: 2px;
  overflow: hidden;
  cursor: pointer;
}

.audio-player__progress-fill {
  height: 100%;
  background: oklch(38% 0.08 245);
  border-radius: 2px;
  width: 0%;
}

.audio-player__time {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: oklch(50% 0.01 240);
  font-variant-numeric: tabular-nums;
  min-width: 3rem;
  text-align: right;
}


/* === FORM FIELD (editorial bottom-border style) === */

.form-editorial .field-group {
  position: relative;
  margin-bottom: 1.5rem;
}

.form-editorial .field-group label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-stone);
  margin-bottom: 0.375rem;
}

.form-editorial .field-group input,
.form-editorial .field-group select,
.form-editorial .field-group textarea {
  width: 100%;
  padding: 0.625rem 0.25rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--color-base-content);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-base-300);
  outline: none;
}

.form-editorial .field-group input:hover,
.form-editorial .field-group select:hover,
.form-editorial .field-group textarea:hover {
  border-bottom-color: var(--color-stone);
}

.form-editorial .field-group input:focus,
.form-editorial .field-group select:focus,
.form-editorial .field-group textarea:focus {
  border-bottom: 2px solid var(--color-primary);
  background: oklch(94% 0.008 240 / 0.5);
  padding-bottom: calc(0.625rem - 1px);
}

.form-editorial .field-group input[aria-invalid="true"],
.form-editorial .field-group.has-error input,
.form-editorial .field-group.has-error select,
.form-editorial .field-group.has-error textarea {
  border-bottom: 2px solid var(--color-error);
  padding-bottom: calc(0.625rem - 1px);
}

.form-editorial .field-group input:disabled,
.form-editorial .field-group select:disabled,
.form-editorial .field-group textarea:disabled {
  background: var(--color-base-200);
  cursor: not-allowed;
  color: var(--color-stone);
}

.form-editorial .field-group input:disabled+label,
.form-editorial .field-group:has(input:disabled) label {
  color: var(--color-base-300);
}

.form-editorial .field-group .field-error {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.75rem;
  color: var(--color-error);
}

.form-editorial .field-group textarea {
  resize: vertical;
  min-height: 4rem;
}

.form-editorial .field-group select {
  cursor: pointer;
}


/* === GRADIENT PLACEHOLDERS (for images not yet sourced) === */

.placeholder-ocean {
  background: linear-gradient(180deg, oklch(65% 0.04 230), oklch(38% 0.08 245));
}

.placeholder-moor {
  background: linear-gradient(180deg, oklch(60% 0.03 250), oklch(42% 0.05 310));
}

.placeholder-sand {
  background: linear-gradient(180deg, oklch(92% 0.03 85), oklch(86% 0.012 240));
}

.placeholder-fire {
  background: linear-gradient(180deg, oklch(40% 0.04 30), oklch(30% 0.03 40));
}

.placeholder-stone {
  background: linear-gradient(180deg, oklch(70% 0.01 240), oklch(55% 0.015 250));
}

.placeholder-tweed {
  background: linear-gradient(135deg, oklch(50% 0.04 55), oklch(42% 0.05 170));
}


/* === BOOKING RANGE CALENDAR === */

.cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.cal__title {
  font-family: 'Fraunces', ui-serif, Georgia, serif;
  font-size: 1.0625rem;
}

.cal__nav {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 9999px;
  color: var(--color-base-content);
}

.cal__nav:hover {
  background: var(--color-base-200);
}

.cal__nav.is-disabled {
  opacity: 0.3;
}

.cal__weekdays,
.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.cal__weekdays {
  margin-bottom: 0.25rem;
}

.cal__weekdays span {
  text-align: center;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-stone);
  padding: 0.25rem 0;
}

.cal__day {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-size: 0.9rem;
  border-radius: 0.45rem;
  color: var(--color-base-content);
}

button.cal__day {
  cursor: pointer;
}

button.cal__day:hover {
  background: var(--color-base-200);
}

.cal__day--blank {
  visibility: hidden;
}

.cal__day--off {
  color: var(--color-base-300);
  text-decoration: line-through;
  cursor: not-allowed;
}

.cal__day.is-in-range {
  background: color-mix(in oklch, var(--color-accent) 16%, transparent);
  border-radius: 0;
}

.cal__day.is-start,
.cal__day.is-end {
  background: var(--color-accent);
  color: #fff;
}

.cal__day.is-start {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.cal__day.is-end {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.cal__summary {
  margin-top: 0.75rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-stone);
}


/* === GUEST PICKER === */

.guests {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.guests__quick {
  display: flex;
  gap: 0.4rem;
}

.guests__chip {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  border: 1px solid var(--color-base-300);
  color: var(--color-base-content);
}

.guests__chip:hover {
  border-color: var(--color-accent);
}

.guests__chip.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.guests__stepper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.guests__step {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  border: 1px solid var(--color-base-300);
  font-size: 1.15rem;
  line-height: 1;
  color: var(--color-base-content);
}

.guests__step:hover {
  border-color: var(--color-accent);
}

.form-editorial .guests__stepper input {
  width: 3.25rem;
  text-align: center;
  border: none;
  border-bottom: 1px solid var(--color-base-300);
}

/* Group heading for field-groups that wrap a control cluster (no single input). */
.form-editorial .field-group__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-stone);
  margin-bottom: 0.375rem;
}