/* ============================================================================
   style.css — Tallin Luxury Hotel website
   ============================================================================
   Beginner-friendly explanation:

   This is the ONE file that controls how every page LOOKS AND IS ARRANGED
   (spacing, layout, fonts, buttons, cards, etc). It is the same on every
   page — index.html, rooms.html, about.html, and so on all load this exact
   file, which is why they all share a consistent look.

   IMPORTANT RULE FOLLOWED THROUGHOUT THIS FILE: colors and fonts are never
   written directly here (e.g. you will NOT find "color: #1b2233" written
   below). Instead, everything uses var(--color-primary), var(--font-body),
   etc. Those variable *values* live in a separate, much smaller file — one
   of css/themes/default.css, christmas.css, or valentine.css — chosen by
   site/js/config.js. That split is what makes swapping the whole site's
   look a one-line change (see config.js) instead of editing every color
   in every file.

   The file is organized top-to-bottom in the order a page reads, roughly:
     1. Reset & base styles      5. Buttons                9. Gallery + lightbox
     2. Layout helpers           6. "Only 7 rooms" block   10. Video cards
     3. Header & navigation      7. Room cards             11. FAQ accordion
     4. Hero section             8. About / story layout   12. Footer
   ========================================================================= */


/* ---------------------------------------------------------------------------
   1. RESET & BASE STYLES
   These rules remove inconsistent default browser spacing and set up the
   page's default font/colors so every element starts from the same baseline.
   --------------------------------------------------------------------------*/

*,
*::before,
*::after {
  box-sizing: border-box; /* padding/border are included in an element's width, not added on top */
}

html {
  scroll-behavior: smooth; /* clicking a nav link glides to the section instead of jumping instantly */
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: 1.2;
  margin: 0 0 0.5em 0;
  color: var(--color-primary);
}

h1 { font-size: clamp(2rem, 5vw, 3.2rem); }   /* clamp() = responsive font size without a media query */
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); }

p {
  margin: 0 0 1em 0;
  color: var(--color-text);
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

img {
  max-width: 100%;   /* images never overflow their container, on any screen size */
  height: auto;
  display: block;
}

ul { padding-left: 1.2em; }

/* A screen-reader-only helper: content is still announced by assistive tech
   but invisible on screen. Used for things like "Skip to content" links. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


/* ---------------------------------------------------------------------------
   2. LAYOUT HELPERS
   Small reusable building blocks used across every page.
   --------------------------------------------------------------------------*/

.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.section {
  padding: clamp(3rem, 8vw, 5.5rem) 0;
}

/* Alternates the background between sections so the page has visual rhythm
   without needing borders/dividers everywhere. */
.section-alt {
  background-color: var(--color-bg-alt);
}

.section-heading {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 2.5rem auto;
}

.section-heading .eyebrow {
  display: inline-block;
  color: var(--color-accent);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-bottom: 0.6rem;
}

.grid {
  display: grid;
  gap: 1.5rem;
}

/* Mobile-first: 1 column by default, more columns only once there's room. */
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}


/* ---------------------------------------------------------------------------
   3. HEADER & NAVIGATION
   The header markup itself lives once in js/partials.js and gets injected
   into every page's <div id="site-header">. These rules style whatever
   partials.js produces.
   --------------------------------------------------------------------------*/

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.25rem;
  max-width: 1100px;
  margin: 0 auto;
}

.site-header__logo {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* The small seasonal symbol (star / snowflake / heart) next to the logo text.
   Its actual character comes from --decor-icon, defined per theme. */
.site-header__logo::after {
  content: var(--decor-icon);
  color: var(--color-accent);
  font-size: 1rem;
}

.site-nav {
  display: none; /* hidden on mobile until the menu button is pressed */
  gap: 1.5rem;
}

.site-nav.is-open {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-surface);
  padding: 1rem 1.25rem 1.5rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
}

.site-nav a {
  color: var(--color-text);
  font-weight: 500;
  padding: 0.4rem 0;
}
.site-nav a:hover,
.site-nav a.is-active {
  color: var(--color-accent);
}

/* Wider screens: show the nav inline, hide the hamburger button */
@media (min-width: 800px) {
  .site-nav {
    display: flex !important;
    position: static;
    flex-direction: row;
    padding: 0;
    border: none;
    background: transparent;
  }
  .nav-toggle { display: none; }
}

.nav-toggle {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  font-size: 1.1rem;
  cursor: pointer;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}


/* ---------------------------------------------------------------------------
   4. HERO SECTION
   The big full-width photo banner at the top of a page with a headline and
   call-to-action buttons on top of it.
   --------------------------------------------------------------------------*/

.hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  color: var(--color-text-on-primary);
  background-size: cover;
  background-position: center;
}

/* A dark, semi-transparent layer between the photo and the text, so white
   text stays readable no matter how bright the underlying photo is. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-overlay);
}

.hero__content {
  position: relative; /* sits above the ::before overlay */
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  padding: 2rem 1.25rem;
}

.hero h1 { color: #fff; }

.hero__subhead {
  font-size: 1.15rem;
  margin-bottom: 1.75rem;
  color: #f1efe9;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: center;
}

/* A smaller hero used on inner pages (Rooms, About, etc.) — same idea, less
   tall, since those pages don't need a full-screen opening moment. */
.page-hero {
  position: relative;
  min-height: 38vh;
  display: flex;
  align-items: center;
  color: #fff;
  background-size: cover;
  background-position: center;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-overlay);
}
/* The global `p { color: var(--color-text); }` rule earlier in this file
   would otherwise override the light `color: #fff` set on .page-hero/.hero
   above (a direct rule on an element always wins over an inherited value).
   These two lines make sure paragraph text inside either hero stays light
   and readable against the dark photo-overlay, instead of near-invisible
   dark-on-dark text. */
.hero__content p,
.page-hero__content p {
  color: #f1efe9;
}

.page-hero__content {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  padding: 2rem 1.25rem;
}
.page-hero h1 { color: #fff; }


/* ---------------------------------------------------------------------------
   5. BUTTONS
   One consistent button style used for every call-to-action across the
   site (WhatsApp, phone, "view room", etc.).
   --------------------------------------------------------------------------*/

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px; /* fully rounded "pill" shape */
  font-weight: 600;
  font-size: 1rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }

/* The primary action — almost always "Chat on WhatsApp" — filled with the
   gold accent color so it stands out against the navy/burgundy/red header. */
.btn-primary {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  box-shadow: var(--shadow-soft);
}
.btn-primary:hover { box-shadow: 0 16px 34px rgba(0,0,0,0.18); }

/* A secondary, outlined style for less important actions (e.g. "Call us"). */
.btn-outline {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}

.btn-block { width: 100%; justify-content: center; }


/* ---------------------------------------------------------------------------
   6. "ONLY 7 ROOMS" HIGHLIGHT BLOCK
   A simple, honest-scarcity callout used on the homepage.
   --------------------------------------------------------------------------*/

.highlight-block {
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  border-radius: var(--radius);
  padding: 2.5rem;
  text-align: center;
}
.highlight-block h2 { color: #fff; }
.highlight-block p { color: #d9dae0; max-width: 640px; margin-left: auto; margin-right: auto; }


/* ---------------------------------------------------------------------------
   7. ROOM CARDS
   Used on the homepage (preview) and the Rooms page (full detail).
   --------------------------------------------------------------------------*/

.room-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
}

.room-card__image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.room-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* fills the frame without distorting the photo */
}

.room-card__body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex-grow: 1;
}

.room-card__amenities {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}
.room-card__amenities li::before {
  content: "• ";
  color: var(--color-accent);
}

.room-card__footer {
  margin-top: auto;
  padding-top: 0.5rem;
}


/* ---------------------------------------------------------------------------
   8. ABOUT / STORY LAYOUT
   The two-column "text beside image" pattern used on the About page.
   --------------------------------------------------------------------------*/

.story-block {
  display: grid;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 800px) {
  .story-block {
    grid-template-columns: 1fr 1fr;
  }
  .story-block--reverse {
    direction: rtl; /* flips column order */
  }
  .story-block--reverse > * {
    direction: ltr; /* ...but keeps the text itself reading left-to-right */
  }
}
.story-block img {
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}


/* ---------------------------------------------------------------------------
   9. GALLERY + LIGHTBOX
   The Gallery page grid, and the full-screen "click to enlarge" viewer.
   The interactive behavior (opening/closing/next/prev) lives in js/main.js;
   these rules just control how it all looks.
   --------------------------------------------------------------------------*/

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
@media (min-width: 700px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1000px) {
  .gallery-grid { grid-template-columns: repeat(4, 1fr); }
}

.gallery-grid__item {
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: var(--color-bg-alt); /* shows while the lazy image is still loading */
}
.gallery-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}
.gallery-grid__item:hover img {
  transform: scale(1.05);
}

/* The full-screen overlay. Hidden by default; js/main.js adds the
   "is-open" class when a thumbnail is clicked. */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 18, 0.92);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
.lightbox.is-open { display: flex; }

.lightbox img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 8px;
}

.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: absolute;
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: none;
  border-radius: 999px;
  width: 44px;
  height: 44px;
  font-size: 1.2rem;
  cursor: pointer;
}
.lightbox__close { top: 1.25rem; right: 1.25rem; }
.lightbox__prev { left: 1.25rem; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 1.25rem; top: 50%; transform: translateY(-50%); }


/* ---------------------------------------------------------------------------
   10. VIDEO CARDS (click-to-play)
   A still poster image with a play button on top. Clicking it (handled in
   js/main.js) swaps the poster for a real, playing <video> element — the
   video file itself is never downloaded until a visitor asks for it.
   --------------------------------------------------------------------------*/

.video-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  aspect-ratio: 9 / 16; /* these clips were filmed vertically, phone-in-hand */
  cursor: pointer;
}
.video-card img,
.video-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-card__play span {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}
/* Once playing, js/main.js adds this class to hide the play button/overlay. */
.video-card.is-playing .video-card__play { display: none; }


/* ---------------------------------------------------------------------------
   11. FAQ ACCORDION
   Built with the native HTML <details>/<summary> elements — these are
   collapsible by default in every modern browser with ZERO JavaScript
   needed. That's why there's no "faq.js" in this project.
   --------------------------------------------------------------------------*/

.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 0.25rem 1.25rem;
  margin-bottom: 0.75rem;
}
.faq-item summary {
  font-weight: 600;
  padding: 1rem 0;
  cursor: pointer;
  color: var(--color-primary);
  list-style: none; /* hides the browser's default triangle marker... */
}
.faq-item summary::-webkit-details-marker { display: none; } /* ...in Safari/Chrome too */
.faq-item summary::after {
  content: "+";
  float: right;
  color: var(--color-accent);
  font-size: 1.2rem;
}
.faq-item[open] summary::after { content: "–"; }
.faq-item p { padding-bottom: 1rem; color: var(--color-text-muted); }


/* ---------------------------------------------------------------------------
   12. FOOTER
   Like the header, the markup is generated once in js/partials.js and
   injected into every page. These rules style it.
   --------------------------------------------------------------------------*/

.site-footer {
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  padding: 3rem 0 1.5rem 0;
  margin-top: 3rem;
}
.site-footer a { color: var(--color-text-on-primary); }
.site-footer a:hover { color: var(--color-accent); }

.site-footer__grid {
  display: grid;
  gap: 2rem;
  margin-bottom: 2rem;
}
@media (min-width: 700px) {
  .site-footer__grid { grid-template-columns: repeat(3, 1fr); }
}

.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 1.5rem;
  font-size: 0.85rem;
  color: #b9bcc6;
  text-align: center;
}


/* ---------------------------------------------------------------------------
   13. FLOATING WHATSAPP BUTTON
   A small round button that stays fixed in the corner of the screen on
   every page (a very common, expected pattern for WhatsApp-first
   businesses) so the contact option is always one tap away.
   --------------------------------------------------------------------------*/

.whatsapp-float {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366; /* WhatsApp's own brand green — recognizable at a glance */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
  z-index: 60;
}