/*
Theme Name: Neptun Theme
Theme URI: https://themes.getmotopress.com/palmeria/
Template: palmeria
Author: MotoPress
Author URI: https://motopress.com
Description: Palmeria is a free WordPress Booking theme. It is Gutenberg compatible template with a built-in reservation functionality. The theme is implemented with the search availability and booking forms backed by the powerful WordPress Hotel Booking plugin by MotoPress. Palmeria is great to use for creating hotel, single property, real estate and travel agency websites or launching any other type of property reservations for your hospitality business at a zero cost. This WordPress hotel booking theme stands out from other free templates with its robust functionality, elegant design and dedicated support to ensure smooth theme customization and usage. You will be as well able to import sample data in Appearance - Import Demo Data to make your website look exactly like our demo https://themes.getmotopress.com/palmeria/.
Tags: one-column,full-width-template,custom-background,custom-header,custom-menu,editor-style,featured-images,flexible-header,microformats,rtl-language-support,sticky-post,threaded-comments,translation-ready,custom-logo,block-styles,holiday,entertainment,e-commerce
Version: 1.3.3.1780968731
Updated: 2026-06-09 03:32:11

*/

/* ============================================================
   PALMERIA PARENT OVERRIDES
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  clear: none;
  line-height: inherit;
}

p { margin: 0; }

#content.site-content,
.site-content.wrapper {
  padding: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  width: 100% !important;
}

#page.site {
  margin: 0;
  padding: 0;
}

/* ============================================================
   DESIGN TOKENS
   ============================================================ */

:root {
  --white:   #FDFBF7;
  --chalk:   #F4EFEB;
  --bone:    #E4DDD3;
  --stone:   #B5AC9E;
  --slate:   #6A6157;
  --ink:     #12110F;
  --sea:     #16444A;
  --sea-l:   #1A4A51;
  --sea-d:   #0f373c;
  --amber:   #8B551C;
  --amber-l: #B06B25;

  --serif-d: 'Cormorant Garamond', Georgia, serif;
  --serif-b: 'Libre Baskerville', Georgia, serif;
  --sans:    'DM Sans', system-ui, sans-serif;

  --ease-slow:     cubic-bezier(.16, 1, .3, 1);
  --ease-spring:   cubic-bezier(.175, .885, .32, 1.1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
}

/* ============================================================
   RESET & BASE
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--sans);
  background: var(--chalk);
  color: var(--ink);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  text-decoration: none;
  color: inherit;
}


/* ============================================================
   NAVIGATION
   ============================================================ */

#nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  padding: 2.5rem 4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: padding 0.8s var(--ease-out-expo), background 0.8s, box-shadow 0.8s;
  pointer-events: none;
}
#nav * { pointer-events: auto; }

#nav.scrolled {
  padding: 1.2rem 4rem;
  background: var(--chalk);
  box-shadow: 0 1px 0 var(--bone);
  opacity: 0.98;
}

.nav-links {
  display: flex;
  gap: 3rem;
  align-items: center;
}

.nav-link {
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.2s;
  display: inline-block;
  padding: 1rem 0;
}
@media (max-width: 900px) {
  .nav-link { font-size: 0.75rem; }
}
#nav.scrolled .nav-link { color: var(--slate); }
#nav.scrolled .nav-link:hover { color: var(--sea) !important; }

.nav-cta {
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-weight: 500;
  color: white;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 0.8rem 1.8rem;
  border-radius: 2rem;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
#nav.scrolled .nav-cta { color: var(--slate); border-color: rgba(18, 17, 15, 0.2); }
.nav-cta:hover { background: var(--sea); color: white; border-color: var(--sea); }
#nav.scrolled .nav-cta:hover { background: var(--sea); color: white; border-color: var(--sea); }

.nav-logo {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  color: white;
  transition: color 0.01s;
}
#nav.scrolled .nav-logo { color: var(--ink); }

.nav-logo-icon {
  height: 55px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  transition: filter 0.1s, opacity 0.1s;
}

#nav.scrolled .nav-logo-icon { filter: brightness(0); opacity: 0.9; }

/* Logo hover — filter is the only way to recolour an <img> SVG */
.nav-logo-icon:hover {
  filter: sepia(40%) saturate(600%) hue-rotate(185deg) brightness(30%);
  opacity: 0.9;
}

#nav.scrolled .nav-logo-icon:hover {
  filter: invert(22%) sepia(40%) saturate(600%) hue-rotate(185deg) brightness(30%);
  opacity: 1;
}

.nav-logo-text {
  font-family: var(--serif-d);
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Floating booking CTA */
.float-cta {
  position: fixed;
  bottom: 3rem;
  right: 3rem;
  z-index: 90;
  background: var(--sea);
  color: white;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-weight: 400;
  text-align: center;
  line-height: 1.4;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
  transform: scale(0);
  opacity: 0;
  transition: transform 0.6s var(--ease-spring), opacity 0.6s, background 0.4s;
}
.float-cta.visible { transform: scale(1); opacity: 1; }
.float-cta:hover { background: var(--sea-d); color: white; }

/* Mobile overlay menu */
#mob-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--chalk);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  clip-path: circle(0px at top right);
  transition: clip-path 1s var(--ease-out-expo);
  pointer-events: none;
}
#mob-menu.open {
  clip-path: circle(150% at top right);
  pointer-events: all;
}

.mob-link {
  font-family: var(--serif-d);
  font-size: clamp(3rem, 12vw, 5rem);
  font-weight: 300;
  font-style: italic;
  color: var(--ink);
  letter-spacing: -0.02em;
  padding: 0.2rem 0;
  opacity: 0;
  transform: translateY(20px);
  transition: color 0.3s;
}
#mob-menu.open .mob-link {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s, transform 0.6s var(--ease-out-expo);
}
.mob-link:nth-child(1) { transition-delay: 0.2s; }
.mob-link:nth-child(2) { transition-delay: 0.3s; }
.mob-link:nth-child(3) { transition-delay: 0.4s; }
.mob-link:nth-child(4) { transition-delay: 0.5s; }
.mob-link:nth-child(5) { transition-delay: 0.6s; }
.mob-link:nth-child(6) { transition-delay: 0.7s; }

.mob-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sea);
  color: white;
  border: 1px solid var(--sea);
  font-size: 0.68rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 1.2rem 3rem;
  margin-top: 1.5rem;
  font-style: normal;
  font-family: var(--sans);
  border-radius: 2rem;
}
#mob-menu.open .mob-cta-btn { opacity: 1; transform: translateY(0); }

.nav-burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  gap: 6px;
  padding: 5px;
  position: relative;
  z-index: 101;
}
.nav-burger span {
  display: block;
  width: 28px;
  height: 1px;
  background: white;
  transition: transform 0.6s var(--ease-out-expo), background 0.4s;
}
#nav.scrolled .nav-burger span { background: var(--ink); }
#nav.mob-open .nav-burger span { background: var(--ink); }
#nav.mob-open .nav-burger span:first-child { transform: translateY(3.5px) rotate(45deg); }
#nav.mob-open .nav-burger span:last-child  { transform: translateY(-3.5px) rotate(-45deg); }


/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */

.wrap         { max-width: 1400px; margin: 0 auto; padding: 0 clamp(1.5rem, 4vw, 4rem); }
.wrap--narrow { max-width: 900px; }
.section      { padding: clamp(6rem, 12vw, 10rem) 0; }

/* ============================================================
   TYPOGRAPHY — EYEBROW / PAGE TITLES
   ============================================================ */

/* All page/post titles styled as eyebrow labels */
.eyebrow,
.entry-title,
.page-title {
  font-size: 0.8rem;
  font-family: var(--sans);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--amber);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  line-height: 1.4;
}
.eyebrow::before,
.entry-title::before,
.page-title::before {
  content: '';
  display: block;
  width: 36px;
  height: 1px;
  background: var(--amber);
  flex-shrink: 0;
}

/* Exception: front page hero title matches old site's hero-h1 style */
.front-page-header-wrapper .entry-title,
.front-page-header-wrapper .page-title {
  font-family: var(--serif-d);
  font-size: clamp(2.8rem, 6vw, 5.5rem);
  font-weight: 300;
  font-style: italic;
  letter-spacing: -0.015em;
  text-transform: none;
  color: white;
  display: block;
  align-items: initial;
  gap: 0;
  margin-bottom: 0;
  line-height: 0.95;
}
.front-page-header-wrapper .entry-title::before,
.front-page-header-wrapper .page-title::before {
  display: none;
}

/* ============================================================
   RESPONSIVE — NAVIGATION
   ============================================================ */

@media (max-width: 900px) {
  #nav { padding: 1.5rem 2rem; }
  #nav.scrolled { padding: 1.2rem 2rem; }
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  .wrap { padding: 0 1.5rem; }
  .section { padding: 5rem 0; }
}

@media (max-width: 480px) {
  #nav { padding: 1.2rem 1.25rem; }
  #nav.scrolled { padding: 1rem 1.25rem; }
  .nav-logo-icon { height: 40px; }
  .nav-logo-text { font-size: 1.5rem; }
  .mob-link { font-size: clamp(2.2rem, 10vw, 3rem); }
  .float-cta { width: 72px; height: 72px; bottom: 1.5rem; right: 1.5rem; font-size: 0.55rem; }
}

/* ============================================================
   FOOTER
   ============================================================ */

#neptun-footer {
  background: var(--white);
  color: var(--ink);
  padding: 6rem 4rem 3rem;
  position: relative;
  overflow: hidden;
}
.footer-wm {
  position: absolute;
  bottom: -5rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--serif-d);
  font-size: clamp(14rem, 30vw, 28rem);
  font-weight: 300;
  font-style: italic;
  color: var(--ink);
  opacity: 0.03;
  white-space: nowrap;
  pointer-events: none;
  letter-spacing: -0.02em;
}
.footer-grid {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 6rem;
  flex-wrap: wrap;
  gap: 4rem;
}
.f-logo { height: 60px; width: auto; display: block; margin-bottom: 1.2rem; filter: brightness(0); opacity: 0.85; }
.f-brand { font-family: var(--serif-d); font-size: 2.5rem; font-weight: 300; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 1.5rem; }
.f-addr { font-size: 0.95rem; font-weight: 300; color: var(--slate); line-height: 2.0; }
.f-links { list-style: none; display: flex; flex-direction: column; gap: 1.2rem; }
.f-links a { font-size: 0.85rem; letter-spacing: 0.25em; text-transform: uppercase; font-weight: 500; color: var(--slate); }

.footer-bot {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--bone);
  padding-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-copy { font-size: 0.65rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--slate); }

@media (max-width: 900px) {
  #neptun-footer { padding: 4rem 1.5rem 3rem; }
  .footer-wm { opacity: 0.07; font-size: clamp(5rem, 28vw, 10rem); }
  .footer-grid { flex-direction: column; align-items: flex-start; margin-bottom: 4rem; gap: 3rem; }
}

@media (max-width: 480px) {
  .footer-wm { font-size: clamp(3.5rem, 22vw, 6rem); bottom: -0.5rem; }
  .footer-bot { flex-direction: column; gap: 1.5rem; align-items: flex-start; }
}

/* ============================================================
   SECTION IMAGES — responsive aspect ratio
   ============================================================ */

/* Mobile: replace 100vh with a fixed 4:3 crop */
@media (max-width: 991px) {
  .child-pages-list .page > .post-thumbnail {
    height: auto;
    aspect-ratio: 3 / 2;
  }
}

/* Desktop: show the full image uncropped — override absolute positioning */
@media (min-width: 992px) {
  .child-pages-list .page > .post-thumbnail {
    align-self: center;
  }
  .child-pages-list .page > .post-thumbnail img {
    position: static;
    width: 100%;
    height: auto;
    object-fit: initial;
  }
}