/*
Theme Name: Eden Resort & Suites
Theme URI: https://edenresort.com
Author: Eden Resort & Suites
Author URI: https://edenresort.com
Description: A warm, elegant Full Site Editing block theme for Eden Resort & Suites — Lancaster County's original resort getaway. Integrates the SynXis booking engine (configurable per-property in the Customizer), ships every page of the resort site, and includes editorial section patterns so non-technical editors can build pages directly in the WordPress Site Editor. Brand: Eden gold + charcoal + cream, Playfair Display + Mulish.
Version: 1.2.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: eden-resort
Tags: full-site-editing, block-patterns, custom-colors, custom-logo, editor-style, featured-images, one-column, wide-blocks, hotel, travel
*/

/* =============================================================================
   EDEN RESORT & SUITES
   theme.json owns the palette + typography; this file adds the bespoke
   components (booking widget, amenity mosaic, experience grid, reveal, etc.)
   and references the theme.json CSS variables so Site Editor colour changes
   flow through automatically.
============================================================================= */

:root {
  --eden-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --eden-shadow: 0 18px 50px -20px rgba(31, 34, 33, 0.45);
  --eden-shadow-sm: 0 8px 24px -12px rgba(31, 34, 33, 0.35);
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { max-width: 100%; height: auto; }

/* ---------- Block style: Eyebrow ---------- */
.is-style-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 0.72rem !important;
  font-weight: 700;
  color: var(--wp--preset--color--gold-deep);
  font-family: var(--wp--preset--font-family--mulish);
  margin-bottom: 0.5rem;
}
.is-style-eyebrow.has-text-color { color: inherit; }

/* ---------- Block style: Lede ---------- */
.is-style-lede {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem) !important;
  line-height: 1.6;
  color: var(--wp--preset--color--taupe);
  font-weight: 300;
}

/* ---------- Block style: Card ---------- */
.is-style-eden-card {
  background: var(--wp--preset--color--white);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: var(--eden-shadow-sm);
  transition: transform 0.4s var(--eden-ease), box-shadow 0.4s var(--eden-ease);
  height: 100%;
}
.is-style-eden-card:hover { transform: translateY(-6px); box-shadow: var(--eden-shadow); }

/* ---------- Block style: Image zoom on hover ---------- */
.is-style-zoom { overflow: hidden; }
.is-style-zoom img { transition: transform 0.7s var(--eden-ease); width: 100%; }
.is-style-zoom:hover img { transform: scale(1.06); }

/* ---------- Button variations ---------- */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--wp--preset--color--ink);
  border: 1.5px solid var(--wp--preset--color--ink);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--white);
}
.wp-block-button.is-style-dark .wp-block-button__link {
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--white);
}
.wp-block-button.is-style-dark .wp-block-button__link:hover { background: #000; }
.wp-block-button.is-style-ghost-light .wp-block-button__link {
  background: transparent;
  color: var(--wp--preset--color--white);
  border: 1.5px solid rgba(255, 255, 255, 0.6);
}
.wp-block-button.is-style-ghost-light .wp-block-button__link:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #fff;
}

/* =============================================================================
   HEADER / MASTHEAD
============================================================================= */
.wp-site-blocks > header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--wp--preset--color--white);
  transition: box-shadow 0.4s var(--eden-ease);
}
.eden-scrolled .wp-site-blocks > header.wp-block-template-part {
  box-shadow: 0 4px 24px -12px rgba(31, 34, 33, 0.3);
}
.eden-utility {
  background: var(--wp--preset--color--ink);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.78rem;
}
.eden-utility a { color: rgba(255, 255, 255, 0.8); text-decoration: none; }
.eden-utility a:hover { color: var(--wp--preset--color--gold-light); }
.eden-nav-wrap { background: var(--wp--preset--color--white); }

/* Brand logo — served as a background image (keeps the HTML template parts
   free of inline SVG and PHP; URL is set from functions.php via theme-file URI). */
.eden-logo { display: block; width: 150px; height: 56px; background: var(--eden-logo-url) no-repeat left center; background-size: contain; }
.eden-logo--footer { width: 140px; height: 52px; }

/* Navigation link underline */
.wp-block-navigation .wp-block-navigation-item__content { position: relative; padding-bottom: 3px; }
.wp-block-navigation .wp-block-navigation-item__content::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px;
  background: var(--wp--preset--color--gold); transition: width 0.3s var(--eden-ease);
}
.wp-block-navigation .wp-block-navigation-item:hover .wp-block-navigation-item__content::after { width: 100%; }

/* =============================================================================
   HERO + BOOKING WIDGET
============================================================================= */
.eden-hero { position: relative; }
.eden-hero .wp-block-cover__inner-container { width: 100%; }
.eden-hero-title { font-style: italic; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.3); }

.eden-booking {
  background: var(--wp--preset--color--white);
  box-shadow: var(--eden-shadow);
  border-radius: 4px;
  border-top: 4px solid var(--wp--preset--color--gold);
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 0.7fr 0.7fr 0.7fr 1.1fr auto;
  overflow: hidden;
  margin: 0 auto;
  max-width: 1240px;
  position: relative;
  z-index: 20;
}
.eden-booking__field {
  display: flex; flex-direction: column; justify-content: center;
  padding: 0.9rem 1.1rem; border-right: 1px solid var(--wp--preset--color--line);
}
.eden-booking__field label {
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.16em;
  font-weight: 800; color: var(--wp--preset--color--muted); margin-bottom: 0.3rem;
}
.eden-booking__field input,
.eden-booking__field select {
  font-family: var(--wp--preset--font-family--mulish);
  font-size: 0.98rem; font-weight: 600; color: var(--wp--preset--color--ink);
  border: none; background: transparent; outline: none; width: 100%; cursor: pointer;
}
.eden-booking__field .opt { color: var(--wp--preset--color--muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.eden-booking__submit {
  border: none; cursor: pointer;
  background: var(--wp--preset--color--gold); color: #fff;
  font-family: var(--wp--preset--font-family--mulish);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem;
  padding: 1rem 2rem; transition: background 0.3s var(--eden-ease);
}
.eden-booking__submit:hover { background: var(--wp--preset--color--gold-deep); }

/* Pull the booking bar up so it overlaps the hero */
.eden-booking-wrap { margin-top: -44px; padding: 0 var(--wp--preset--spacing--40); position: relative; z-index: 20; }

/* =============================================================================
   AMENITY MOSAIC
============================================================================= */
.eden-mosaic { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 240px; gap: 1.4rem; }
.eden-mosaic__item { position: relative; border-radius: 4px; overflow: hidden; box-shadow: var(--eden-shadow); }
.eden-mosaic__item--tall { grid-row: span 2; }
.eden-mosaic__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--eden-ease); }
.eden-mosaic__item:hover img { transform: scale(1.05); }
.eden-mosaic__cap {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.5rem; color: #fff;
  background: linear-gradient(180deg, rgba(31, 34, 33, 0) 35%, rgba(31, 34, 33, 0.82) 100%);
}
.eden-mosaic__cap h3 { color: #fff; font-family: var(--wp--preset--font-family--playfair); font-size: 1.35rem; margin: 0 0 0.2rem; }
.eden-mosaic__cap p { font-size: 0.86rem; color: rgba(255, 255, 255, 0.85); margin: 0; }

/* =============================================================================
   EXPERIENCE GRID
============================================================================= */
.eden-exp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.eden-exp__item { position: relative; display: block; border-radius: 4px; overflow: hidden; aspect-ratio: 3 / 2; box-shadow: var(--eden-shadow-sm); text-decoration: none; }
.eden-exp__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--eden-ease); }
.eden-exp__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31, 34, 33, 0) 45%, rgba(31, 34, 33, 0.75) 100%); }
.eden-exp__item:hover img { transform: scale(1.07); }
.eden-exp__label {
  position: absolute; left: 0; right: 0; bottom: 1.1rem; text-align: center; z-index: 2;
  color: #fff; font-family: var(--wp--preset--font-family--playfair); font-style: italic; font-size: 1.3rem;
}

/* =============================================================================
   NEWSLETTER SIGNUP
============================================================================= */
.eden-signup { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.eden-signup input[type="email"] {
  flex: 1; min-width: 200px; padding: 0.9rem 1rem;
  border: 1.5px solid rgba(31, 34, 33, 0.25); border-radius: 4px;
  font-family: var(--wp--preset--font-family--mulish); font-size: 0.95rem; background: #fff; outline: none;
}
.eden-signup input[type="email"]:focus { border-color: var(--wp--preset--color--ink); }
.eden-signup button {
  background: var(--wp--preset--color--ink); color: #fff; border: none; cursor: pointer;
  font-family: var(--wp--preset--font-family--mulish); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 0.78rem; padding: 0.9rem 1.6rem; border-radius: 4px;
}
.eden-signup-msg { font-size: 0.85rem; font-weight: 700; margin-top: 0.6rem; min-height: 1.1em; }

/* =============================================================================
   REVEAL ANIMATION
   Hidden state is scoped to .js-reveal (added by eden.js) so that if the
   script ever fails to load, all content remains fully visible.
============================================================================= */
.js-reveal .eden-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--eden-ease), transform 0.8s var(--eden-ease); }
.js-reveal .eden-reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-reveal .eden-reveal { opacity: 1; transform: none; transition: none; }
}

/* =============================================================================
   RESPONSIVE
============================================================================= */
@media (max-width: 1080px) {
  .eden-booking { grid-template-columns: 1fr 1fr 1fr; }
  .eden-booking__submit { grid-column: 1 / -1; }
  .eden-booking__field { border-bottom: 1px solid var(--wp--preset--color--line); }
}
@media (max-width: 781px) {
  .eden-exp { grid-template-columns: repeat(2, 1fr); }
  .eden-mosaic { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .eden-mosaic__item--tall { grid-row: span 1; }
  .eden-booking-wrap { margin-top: 1.5rem; }
}
@media (max-width: 600px) {
  .eden-booking { grid-template-columns: 1fr 1fr; }
  .eden-exp { grid-template-columns: 1fr; }
}