/*
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 {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* a safety net: if any one element (an oversized logo/image, etc.) ever gets wider than the screen, this stops it from adding a page-wide horizontal scrollbar that shifts every vw-based width/section below it */
}

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);
  font-weight: 400;
}

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;
}

/* This is the ONLY margin the theme forces to zero: the section itself,
   so consecutive sections butt together with no gap. Nothing else on the
   page has its margin touched — normal content, plugin output (booking
   forms, contact forms, calendars, etc.), and widgets all keep their own
   natural spacing and won't end up looking cramped as a side effect. */
.entry-content > .section,
.site-content > .section {
  margin: 0;
}

/* Trims the very first/last thing inside a section so the section's own
   padding is the only visible space at its top/bottom edge — otherwise a
   heading's or paragraph's own default margin would stack on top of that
   padding, making some sections look like they have more built-in space
   than others depending on which block type happens to be first/last. */
.section > :first-child { margin-top: 0; }
.section > :last-child { margin-bottom: 0; }

/* 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;
  }

/* 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: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 24px 5vw;
}
.logo-overlay { grid-column: 1; justify-self: start; }
.nav-overlay { grid-column: 2; justify-self: center; }
.hero-right-controls {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* 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.
   min-width: 0 lets this flex item actually shrink instead of forcing the
   row (and the whole page) wider than the screen if the logo is large;
   max-width is a hard ceiling so an oversized/very wide logo file can't
   blow out the layout no matter what height value gets set. */
.logo-overlay {
  z-index: 2;
  min-width: 0;
}
.logo-overlay img,
.logo-overlay .custom-logo {
  max-height: var(--logo-height, 72px);
  max-width: 100%;
  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: var(--nav-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);
}
/* Set in Appearance > Customize > Suite Overlay Options > Primary Menu >
   "Show background pill behind menu" — unchecking it adds this class,
   which removes the dark translucent capsule/blur behind the menu links
   entirely (what can look like a border around the menu). Desktop only —
   the mobile dropdown version keeps its own background regardless, since
   it needs some contrast to read as a floating menu either way. */
@media (min-width: 761px) {
  .nav-overlay.no-pill ul {
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
  }
}
/* 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: fixed;
    top: 72px; /* adjust to roughly match your banner header's height */
    right: 5vw;
    display: none;
    width: min(80vw, 320px);
    z-index: 9999;
  }
  .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; }

  .site-hero {
    overflow: visible;
  }
}
/* ==========================================================================
   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 widget columns (Appearance > Widgets > Footer Column 1/2/3) —
   sits above the logo/copyright/menu row. Empty columns just don't render
   (see the is_active_sidebar checks in footer.php), so filling in 1, 2, or
   3 of them all work fine. */
.footer-widgets {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  align-items: center;
  gap: 2.5rem;
  padding: 3.5rem 5vw 0;
}
.footer-widgets-column .footer-widget + .footer-widget {
  margin-top: 1.25em;
}
.footer-widget-title {
  font-family: var(--font-heading, inherit);
  margin-bottom: 0.5em;
}
/* Default Social Icons block color to white so it's legible against the
   dark footer overlay out of the box; picking a color via the block's own
   Color panel overrides this automatically. */
.footer-widgets .wp-block-social-links .wp-social-link {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.12);
}
.footer-widgets .wp-block-social-links .wp-social-link:hover {
  background-color: rgba(255, 255, 255, 0.24);
}

.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;
  display: inline-block; /* needed for text-align on the parent to have any effect */
}
/* Left stays inline alongside the copyright/menu row (the original default
   behavior). Center/right give the logo its own full-width row above that
   row instead — a narrow flex item has no extra space to align within, so
   simply centering it wouldn't visibly move it otherwise. */
.footer-logo.align-center,
.footer-logo.align-right {
  flex-basis: 100%;
  order: -1;
}
.footer-logo.align-center { text-align: center; }
.footer-logo.align-right { text-align: right; }
.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); font-size: var(--nav-font-size, 0.85rem); }

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

/* ==========================================================================
   5. BUTTONS — a real hover effect that works with whatever background/text
   color you pick per button, since the block editor itself doesn't offer
   an easy way to set a separate hover color per individual button.
   ========================================================================== */
.wp-block-button__link {
  transition: filter 0.15s ease, opacity 0.15s ease;
}
.wp-block-button__link:hover,
.wp-block-button__link:focus {
  filter: brightness(0.88);
}

/* Suites page button — apply "btn-suites" as an Additional CSS Class on
   the Button block (Advanced panel). Overrides the generic dim-on-hover
   above with an exact hover color instead. Fully self-contained (shape,
   padding, etc.) rather than depending on core WordPress button styling
   being present, in case a caching/CSS-optimization plugin strips it. */
.wp-block-button.btn-suites .wp-block-button__link,
.wp-block-button.btn-header .wp-block-button__link {
  display: inline-block;
  padding: 12px 28px;
  border: none;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.wp-block-button.btn-suites .wp-block-button__link {
  background-color: #403954 !important;
  color: #fff !important;
}
.wp-block-button.btn-suites .wp-block-button__link:hover,
.wp-block-button.btn-suites .wp-block-button__link:focus {
  background-color: #9b3d6e !important;
  color: #fff !important;
  filter: none;
}

/* Header button — apply "btn-header" as an Additional CSS Class the same
   way. */
.wp-block-button.btn-header .wp-block-button__link {
  background-color: #b8dbd9 !important;
  color: #222 !important;
}
.wp-block-button.btn-header .wp-block-button__link:hover,
.wp-block-button.btn-header .wp-block-button__link:focus {
  background-color: #9b3d6e !important;
  color: #fff !important;
  filter: none;
}

/* ==========================================================================
   6. TEXT ENTRANCE ANIMATION — apply "text-fade-in" as an Additional CSS
   Class on a Heading or Paragraph block (Advanced panel) to have just
   that text fade/slide in on page load. Put a background color on the
   block's WRAPPING container instead (a Group block, for example) and
   leave that one unanimated — it'll render solid immediately, with the
   text animating in on top of it, rather than the background fading in
   along with everything else.
   ========================================================================== */
@keyframes so-fade-in-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.text-fade-in,
.fade-in {
  animation: so-fade-in-up var(--fade-in-duration, 3s) ease-out both;
}
@media (prefers-reduced-motion: reduce) {
  .text-fade-in,
  .fade-in {
    animation: none;
  }
}

/* ==========================================================================
   7. FOOGALLERY — the plugin's own gallery wrapper carries a fixed max-width
   from its own CSS, which stays in effect even when the WordPress Group
   block wrapping it is set to Full width. Overriding it here means Full
   width on the wrapping Group actually reaches the gallery itself.
   ========================================================================== */
.foogallery {
  max-width: 100% !important;
  width: 100% !important;
}

/* ==========================================================================
   8. LATEST POSTS BLOCK — WordPress's own grid view isn't real CSS Grid,
   it's flexbox with each column's WIDTH pre-calculated to leave room for
   a small built-in gutter (via margin, not gap). Layering a "gap" on top
   of that (an earlier version of this file did) double-counts the
   spacing and can push the last column onto a new line. Replacing it
   with actual CSS Grid avoids that entirely and makes the gap reliably
   adjustable. Also includes an optional "posts-cards" class (Additional
   CSS Class on the block) that colors each post individually instead of
   the whole grid as one solid block — a background color set on the
   block itself otherwise fills the gap area too, since the gap is empty
   space INSIDE that same colored box, not a gap through to the page.
   ========================================================================== */
.wp-block-latest-posts.is-grid {
  display: grid;
  gap: 2rem;
}
.wp-block-latest-posts.is-grid li {
  width: auto;
  margin: 0;
}
.wp-block-latest-posts.columns-2 { grid-template-columns: repeat(2, 1fr); }
.wp-block-latest-posts.columns-3 { grid-template-columns: repeat(3, 1fr); }
.wp-block-latest-posts.columns-4 { grid-template-columns: repeat(4, 1fr); }
.wp-block-latest-posts.columns-5 { grid-template-columns: repeat(5, 1fr); }
.wp-block-latest-posts.columns-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 599px) {
  .wp-block-latest-posts.is-grid {
    grid-template-columns: 1fr !important;
  }
}

.wp-block-latest-posts.is-grid.posts-cards {
  background: transparent !important;
}
.wp-block-latest-posts.is-grid.posts-cards li {
  background-color: var(--posts-card-bg, #ffffff);
  padding: 1.5rem;
  border-radius: 8px;
}

/* ==========================================================================
   9. 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; }

h2.suites-hero-title {
  font-size: clamp(2rem, 10vw, 11.75rem) !important;
}
h2.hero-tagline-fluid {
  font-size: clamp(1.5rem, 6vw, 3.4375rem) !important;
}
.suites-gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}
.suites-gallery.wp-block-gallery .wp-block-image:nth-child(n+9) {
	display: none !important;
}
.suites-gallery.wp-block-gallery.is-expanded .wp-block-image:nth-child(n+9) {
	display: block !important;
}
@media (max-width: 760px) {
	.suites-gallery {
		grid-template-columns: repeat(2, 1fr);
	}
}