/*
Theme Name: Suite Overlay
Theme URI: https://example.com
Author: Your Name
Description: A one-page hotel/suites theme with a full-bleed header image, a transparent logo and nav overlaid on top of it, and zero gap between content sections. Built to use your own header image, footer image, and logo via Appearance > Customize.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: suite-overlay
*/

/* ==========================================================================
   1. RESET — this is what actually kills the "gap between sections" bug.
   Every theme that has this problem has SOME element (usually p, h1-h6,
   or the block editor's own spacing) still carrying a margin. Zero it here,
   then add spacing back deliberately with padding inside each section.
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html, body, h1, h2, h3, h4, h5, h6, p, figure {
  margin: 0;
  padding: 0;
}

/* Lists: zero the margin like everything else, but keep the left padding —
   that's what creates the bullet/number indent, not spacing between blocks. */
ul, ol {
  margin: 0;
  padding-left: 1.4em;
}

body {
  font-family: var(--font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
  line-height: 1.5;
  color: #222;
  background: #fff;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading, inherit);
}

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

a { color: inherit; }

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid #0a84ff;
  outline-offset: 2px;
}

/* Kill the gap the block editor / theme default sometimes leaves between
   stacked blocks and sections. */
.wp-site-blocks > *,
main > *,
.site-content > *,
.entry-content > * {
  margin-top: 0;
  margin-bottom: 0;
}

/* Spacing BETWEEN blocks you stack inside the same section/group/column —
   without this, every heading/paragraph you add would sit flush against
   the next one with no breathing room, since margin is zeroed globally.
   This only adds space BETWEEN siblings, never around the outside of the
   section/group itself, so sections still butt together with zero gap. */
.entry-content > * + *:not(.section),
.section > * + *,
.wp-block-group > * + *,
.wp-block-column > * + * {
  margin-top: 1.25em;
}

/* Content width — keeps paragraphs/columns/images from stretching the
   full width of the screen on wide monitors, like most page builders do
   by default. Use a block's own Wide or Full alignment (toolbar, next to
   the alignment buttons) whenever you want something to break out of
   this and go edge-to-edge or a bit wider. */
.entry-content > *:not(.alignwide):not(.alignfull):not(.section),
.section > *:not(.alignwide):not(.alignfull) {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.entry-content > .alignwide,
.section > .alignwide {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}
.entry-content > .alignfull,
.section > .alignfull {
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ==========================================================================
   2. HERO — header image with logo + nav overlaid on top of it.
   ========================================================================== */
.site-hero {
  position: relative;
  width: 100%;
  min-height: var(--hero-height, 70vh);
  background-color: #111; /* shows while image loads / if none is set */
  background-size: cover;
  background-position: center;
  overflow: hidden;
  isolation: isolate;
}

/* Optional dark scrim so nav/logo stay legible over any photo */
.site-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--overlay-opacity, 0.35));
  z-index: 1;
}

.hero-top-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 5vw;
}

/* Banner mode: header shrinks to just fit the logo/nav row, no hero splash */
.site-hero.size-banner {
  min-height: 0;
}
.site-hero.size-banner .hero-top-bar {
  padding: 14px 5vw;
}
.site-hero.size-banner .hero-copy {
  display: none;
}

/* Logo — transparent/overlaid on the image, not boxed in behind a background */
.logo-overlay {
  z-index: 2;
}
.logo-overlay img,
.logo-overlay .custom-logo {
  max-height: 72px;
  width: auto;
  opacity: 0.92; /* the "transparent painted-on" look; set to 1 if your logo already has its own transparency baked in */
}

/* Nav — overlaid, frosted so it reads over busy photos */
.nav-overlay {
  z-index: 2;
}
.nav-overlay ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  background: rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: 8px 8px;
}
.nav-overlay a {
  display: inline-block;
  padding: 8px 16px;
  color: #fff;
  text-decoration: none;
  font-family: var(--font-menu, inherit);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: background 0.15s ease;
}
.nav-overlay a:hover,
.nav-overlay a:focus-visible {
  background: rgba(255, 255, 255, 0.18);
}
/* Add the CSS class "nav-cta" to a menu item (Appearance > Menus > Screen
   Options > CSS Classes) to make it stand out as a "Book Now" style button. */
.nav-overlay .nav-cta a {
  background: #fff;
  color: #111;
  font-weight: 600;
}
.nav-overlay .nav-cta a:hover { background: #e8e8e8; }

.hero-copy {
  position: relative;
  z-index: 2;
  padding: 0 5vw 56px;
  color: #fff;
  max-width: 720px;
}
.hero-copy h1 {
  font-family: var(--font-display, var(--font-heading, inherit));
  font-size: clamp(1.9rem, 4.5vw, 3.2rem);
  line-height: 1.1;
}
.hero-copy p {
  margin-top: 14px;
  font-size: 1.05rem;
  color: rgba(255,255,255,0.9);
}

/* Mobile nav toggle */
.menu-toggle {
  display: none;
  z-index: 3;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.6rem;
  cursor: pointer;
}
@media (max-width: 760px) {
  .menu-toggle { display: block; }
  .nav-overlay { position: absolute; top: 100%; right: 5vw; display: none; width: min(80vw, 320px); }
  .nav-overlay.is-open { display: block; }
  .nav-overlay ul { flex-direction: column; align-items: stretch; border-radius: 12px; background: rgba(0,0,0,0.75); }
  .nav-overlay a { text-align: left; }
}

/* ==========================================================================
   3. SECTIONS — stacked with zero gap; spacing lives INSIDE each section.
   ========================================================================== */
.section {
  padding: 4.5rem 5vw; /* all the breathing room comes from padding, never margin */
}
.section + .section { padding-top: 4.5rem; } /* explicit, never relies on collapsing margins */

/* ==========================================================================
   4. FOOTER — same overlay technique as the hero, using its own image.
   ========================================================================== */
.site-footer {
  position: relative;
  background-color: #111;
  background-size: cover;
  background-position: center;
  color: #fff;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--footer-overlay-opacity, 0.55));
}
.footer-inner {
  position: relative;
  z-index: 1;
  padding: 3.5rem 5vw;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  justify-content: space-between;
}
.footer-logo img {
  max-height: var(--footer-logo-height, 90px);
  width: auto;
}
.footer-inner nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.footer-inner a { text-decoration: none; font-family: var(--font-menu, inherit); }

@media (max-width: 600px) {
  .footer-inner { padding: 2.5rem 6vw; justify-content: center; text-align: center; }
}

/* ==========================================================================
   5. VIDEO — replaces the native bottom control bar with a single centered
   play/pause button (see js/video-controls.js).
   ========================================================================== */
.wp-block-video {
  position: relative;
}
.wp-block-video video {
  width: 100%;
  display: block;
}
.so-video-toggle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.2s ease;
  z-index: 2;
}
.so-video-toggle:hover { background: rgba(0, 0, 0, 0.75); }
.so-video-toggle svg { width: 28px; height: 28px; fill: currentColor; }

/* Fade the button out while playing; bring it back on hover or once paused */
.wp-block-video.is-playing .so-video-toggle { opacity: 0; }
.wp-block-video.is-playing:hover .so-video-toggle,
.wp-block-video:not(.is-playing) .so-video-toggle { opacity: 1; }