@import "tailwindcss";

@source "../templates";
@source "../components";

/* === DESIGN TOKENS === */
@theme {
  --color-forest: #2a3d2e;
  --color-sage: #5a7a5c;
  --color-terracotta: #b05e3a;
  --color-gold: #c9a84c;
  --color-cream: #f5f0e8;
  --color-parchment: #ede5d4;
  --color-warm-white: #faf7f2;
  --color-dark: #1e2a1f;
  --color-text: #3a3028;
  --color-text-light: #6b5e52;

  /* === FONTS === */
  --font-serif: "Cormorant Garamond", serif;
  --font-sans: "Jost", sans-serif;
  --font-garamond: "Cormorant Garamond", serif;
  --font-jost: "Jost", sans-serif;
}

:root {
  /* Increase or decrease the number
  to change the vertical spacing globally*/

  /* Base Vertical Spacing */
  --space: 1.62;

  /* Vertical Spacing - multiplier */
  --vspace: calc(var(--space) * 1rem);
  --vspace-0: calc(3 * var(--space) * 1rem);
  --vspace-1: calc(2 * var(--space) * 1rem);
  --vspace-2: calc(1.5 * var(--space) * 1rem);
  --vspace-3: calc(0.5 * var(--space) * 1rem);
}

body {
  margin: 0 auto;
  font-family: "Jost", sans-serif;
  font-weight: 300;
  font-size: 1.4rem;
  /* Comfortable baseline */
  @apply bg-parchment;
}

p {
  margin: var(--vspace) 0;
  line-height: var(--vspace);
}

h1 {
  margin: var(--vspace-1) 0 var(--vspace-1) 0;
  line-height: calc(3.4583/var(--space)* var(--vspace));
}

h2 {
  @apply font-serif text-[2.9rem] leading-[1.15] text-dark mb-4;
}

h3 {
  margin: var(--vspace-1) 0 var(--vspace-3) 0;
  line-height: 1em;
}

h4,
h5,
h6 {
  margin: var(--vspace-2) 0 var(--vspace-3) 0;
  line-height: var(--vspace);
}

.bigtitle,
h1 {
  font-size: 3.4583em;
  word-break: break-word;
}

.title,
h2 {
  font-size: 2.125em;
  font-weight: normal;
  word-break: break-word;
}

.subheading1,
h3,
.menu_link {
  font-size: 1.6042em;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: .1em;
}

blockquote {
  font-size: 1.0833em;
  font-style: italic;
  line-height: calc(1.0833*var(--vspace));
  margin: var(--vspace-2) var(--vspace-2);
}

.subheading2,
h4 {
  font-size: 1.3333em;
  text-transform: capitalize;
}

.subheading3,
h5 {
  font-size: 1.2083em;
  font-weight: lighter;
  text-transform: uppercase;
  letter-spacing: .15em;
}

.subheading4,
h6 {
  font-size: 1.0833em;
  font-weight: normal;
  font-style: italic;
  font-family: "le-monde-livre-classic-byol", serif !important;
  letter-spacing: 0px !important;
}

.caption_ts {
  font-size: 0.8958em;
  font-weight: normal;
  font-style: italic;
}

.endnote_ts {
  font-size: 0.8958em;
}

.footnote_ts {
  margin: var(--vspace-0) 0 var(--vspace-2) 0;
  font-size: 0.8125em;
  border-top: 1px solid #ccc;
  line-height: 2em;
}

sup {
  font-size: 0.8125rem;
  margin: .5em;
  text-transform: none;
  font-style: italic;
  font-weight: normal;
}

li {
  list-style: none;
}

.tns-outer .wrapper {
  padding: .5em;
}

details {
  border: none !important;
  outline: none !important;
  color: black;
}

h1,
h3 {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 300;
}

/* === DRUPAL MESSAGES === */
[data-drupal-messages] {
  @apply my-8 max-w-4xl mx-auto;
}

[data-drupal-messages] [role="contentinfo"] {
  @apply p-6 rounded-xl shadow-lg border-l-8 border-gold;
  @apply bg-terracotta text-warm-white;
  @apply transition-all duration-300;
}

[data-drupal-messages] a {
  @apply text-gold hover:text-warm-white underline decoration-2 underline-offset-4 transition-colors;
}

/* === WEBFORMS === */
.webform-submission-form {
  @apply space-y-6 max-w-3xl mx-auto my-12 p-10 bg-warm-white rounded-3xl shadow-sm border border-parchment;
}

.form-item,
.js-form-item {
  @apply flex flex-col space-y-2;
}

.form-item label {
  @apply font-sans font-semibold text-text uppercase tracking-widest text-xs mb-1;
  font-family: "Jost", sans-serif;
}

.form-text,
.form-email,
.form-tel,
.form-number,
.form-textarea,
select {
  @apply w-full px-4 py-3 rounded-xl border-2 border-parchment bg-white text-text transition-all duration-300;
  @apply focus:border-gold focus:ring-4 focus:ring-gold/10 outline-none;
  font-family: "Jost", sans-serif;
}

.form-submit {
  @apply w-full sm:w-auto px-10 py-4 bg-forest text-warm-white font-sans font-bold rounded-xl shadow-md cursor-pointer transition-all duration-300;
  @apply hover:bg-forest/90 hover:shadow-xl hover:-translate-y-0.5 active:translate-y-0;
  font-family: "Jost", sans-serif;
}

.form-required::after {
  @apply text-terracotta ml-1;
}

.description {
  @apply text-sm text-text-light italic mt-1;
}


/* === ROOM INFO FIELDS === */
.field {
  @apply mb-4;
}

.field--label-inline {
  @apply flex items-baseline gap-4 py-3 border-b border-parchment/30 last:border-0;
}

.field--label-above {
  @apply mb-6;
}

.field__label {
  @apply font-sans font-semibold text-forest uppercase tracking-widest text-[11px] leading-tight shrink-0;
  font-family: "Jost", sans-serif;
}

.field--label-above .field__label {
  @apply mb-1.5 block;
}

.field__item {
  @apply font-sans text-text text-base leading-relaxed;
  font-family: "Jost", sans-serif;
}

.field--name-field-capacity .field__item {
  @apply font-bold text-forest text-2xl;
}

.field--name-field-book-this-unit .field__label {
  @apply font-serif text-3xl text-forest italic mt-8 mb-4 normal-case tracking-normal w-full block border-none;
  font-family: "Cormorant Garamond", serif;
}

.field--name-field-location .field__item,
.field--name-field-accommodation-unit-type .field__item {
  @apply font-medium text-text-light;
}

/* === BOOKING CALENDAR === */
.webform-booking-calendar {
  @apply bg-white p-6 rounded-2xl border border-parchment shadow-inner my-6;
}

.webform-booking-calendar select {
  @apply mb-4;
}

.webform-booking-calendar .calendar-day {
  @apply font-sans text-sm p-3 rounded-full hover:bg-forest hover:text-warm-white transition-all cursor-pointer text-center border border-transparent;
  @apply bg-sage/10 text-forest;
}

.webform-booking-calendar .calendar-day.is-selected {
  @apply bg-gold text-forest font-bold shadow-md;
}

.webform-booking-calendar .calendar-day.is-today {
  @apply border-gold text-forest font-semibold;
}

.webform-booking-calendar .calendar-day.is-disabled {
  @apply opacity-30 cursor-not-allowed bg-transparent text-gray-400;
}

/* === GALLERY === */
.photoswipe-gallery {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 1.5rem !important;
  margin: 3rem auto !important;
  width: 100% !important;
}

.photoswipe-gallery .field__item {
  flex: 0 1 auto !important;
}

.photoswipe-gallery .photoswipe {
  @apply block overflow-hidden rounded-xl shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-1;
}

.photoswipe-gallery img {
  @apply w-full h-full object-cover aspect-square hover:scale-105 transition-transform duration-500;
}

/* === COMPONENTS === */
@layer components {

  /* === CONTAINER === */
  .container-wrapper {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  /* === SECTIONS === */
  .section {
    @apply w-full py-12 md:py-16 lg:py-20;
  }

  .section-tight {
    @apply py-8 md:py-10;
  }

  .section-loose {
    @apply py-16 md:py-24;
  }

  .section-bg {
    @apply w-full;
  }

  /* === HERO === */
  .hero {
    @apply w-full py-20 md:py-28 lg:py-32 bg-forest text-cream;
  }

  /* === GOLDEN LAYOUT === */
  .layout-golden {
    @apply flex flex-col lg:flex-row gap-10 items-start;
  }

  /* === MAIN CONTENT === */
  .content-main {
    @apply w-full bg-white p-8 rounded-2xl shadow-sm;
  }

  /* === SIDEBAR === */
  .region-sidebar {
    @apply w-full bg-white dark:bg-dark rounded-2xl shadow-lg border border-gray-200 dark:border-gray-800 p-6;
  }

  /* === STICKY BEHAVIOR (FIXED VERSION) === */
  .sidebar-sticky {
    position: sticky;
    top: 6rem;
    align-self: flex-start;
  }

  /* === RESPONSIVE SPLIT === */
  @media (min-width: 1024px) {
    .content-main {
      width: 61.8%;
    }

    .region-sidebar {
      width: 38.2%;
    }
  }

  /* === TYPO === */
  .prose-wrapper {
    @apply max-w-3xl mx-auto;
  }

}