/* ================================
   PORTER PALACE MAIN STYLE SHEET
   Updated: site-wide side padding on body + full-bleed utility
   ================================ */

:root{
  --navy:#101D42;
  --accent:#0A142C;
  --cream:#FBF9F6;
  --gold:#D4AF37;
  --dark-text:#433A34;
  --light-text:#F0F4F8;

  /* default side padding (matches Tailwind px-4 sm:px-8 lg:px-16) */
  --site-side-pad: 16px;
}

/* breakpoint updates for --site-side-pad */
@media (min-width:640px){
  :root{ --site-side-pad: 32px; }
}
@media (min-width:1024px){
  :root{ --site-side-pad: 64px; }
}

/* ===========================
   Apply site-wide horizontal padding to body
   (affects entire site automatically)
   =========================== */
html, body {
  height:100%;
}
body{
  font-family:'Plus Jakarta Sans', sans-serif;
  background-color:var(--cream);
  color:var(--dark-text);
  margin:0;
  padding-left: var(--site-side-pad);
  padding-right: var(--site-side-pad);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  box-sizing: border-box;
}

/* Box sizing: make sizing predictable */
*, *::before, *::after { box-sizing: inherit; }

/* ====================================
   Utility to make an element ignore body padding
   and stretch edge-to-edge (full-bleed)
   Use: add class="full-bleed" to elements that must be edge-to-edge
   e.g. <div id="hero-section" class="full-bleed"> ... </div>
   ==================================== */
.full-bleed {
  /* Expand width to full viewport while the body keeps padding */
  width: calc(100vw);
  /* reset any inherited horizontal padding/margins: align to viewport edge */
  margin-left: calc(-1 * var(--site-side-pad));
  margin-right: calc(-1 * var(--site-side-pad));
  /* ensure it sits flush even when page scrollbars appear */
  position: relative;
  left: 0;
  right: 0;
  box-sizing: border-box;
}

/* If element also uses internal .container or needs centering,
   keep those internal structures intact. */
.full-bleed > .container,
.full-bleed > .container * {
  box-sizing: border-box;
}

/* ====================================
   TYPOGRAPHY + COLORS
   ==================================== */
.font-serif{ font-family:'Cormorant Garamond', serif; }
.text-primary{ color:var(--gold); }
.bg-primary{ background-color:var(--gold); }
.text-dark{ color:var(--dark-text); }
.bg-dark{ background-color:var(--navy); }
.bg-dark-accent{ background-color:var(--accent); }
.bg-light{ background-color:var(--cream); }

a{ text-decoration:none; transition:color .2s ease; }

/* ====================================
   NAVIGATION
   ==================================== */
.nav-link{ position:relative; }
.nav-link::after{
  content:'';
  position:absolute;
  width:0;
  height:1px;
  bottom:-4px;
  left:50%;
  transform:translateX(-50%);
  background:var(--gold);
  transition:width .25s ease;
}
.nav-link:hover::after,
.nav-link.active::after{ width:100%; }
.nav-link.active{ color:var(--gold); }

#mobile-menu{
  transition:max-height .3s, opacity .25s;
  overflow:hidden;
}
#mobile-menu.hidden{ max-height:0; opacity:0; }

/* ====================================
   HERO SECTION
   ==================================== */
#hero-section{
  position:relative;
  top:0;
  margin-top:0!important;
  padding-top:0!important;
  /* Don't force hero content to be padded by body if you want full-bleed:
     add class="full-bleed" to #hero-section in the HTML. */
}
#hero-section img{ display:block; margin-top:0!important; width:100%; height:auto; }

.hero-title-shadow{ text-shadow:4px 4px 8px rgba(0,0,0,.9); }
.hero-text-shadow{ text-shadow:1px 1px 2px rgba(0,0,0,.6); }

/* ====================================
   PAGE + SECTIONS
   ==================================== */
main{ margin-bottom:0!important; }
section{ scroll-margin-top:100px; }

.page-view{ transition:opacity .4s, transform .4s; }
.page-view.hidden{
  opacity:0;
  transform:translateY(20px);
  pointer-events:none;
}
.page-view.visible{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

/* ====================================
   BUTTONS
   ==================================== */
.cta-button{
  background:var(--gold);
  color:#000;
  font-weight:700;
  padding:1rem 2.5rem;
  font-size:1rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  border-radius:.125rem;
  box-shadow:0 10px 15px rgba(0,0,0,.15);
}
.cta-button:hover{ opacity:.9; }

.outline-button{
  border:1px solid var(--gold);
  color:var(--gold);
  padding:.6rem 1.4rem;
  font-weight:700;
  text-transform:uppercase;
  border-radius:.125rem;
}

/* ====================================
   FORMS
   ==================================== */
.booking-input,
.form-input-light-bg{
  width:100%;
  border:1px solid #e2e8f0;
  border-radius:4px;
  padding:.75rem;
  color:var(--dark-text);
  background:#fff;
  font-size:.95rem;
}

.booking-label{
  font-weight:600;
  text-transform:uppercase;
  font-size:.8rem;
  margin-bottom:.25rem;
  color:var(--navy);
}

.booking-submit-button{
  background:var(--gold);
  color:#000;
  font-weight:700;
  border:none;
  border-radius:4px;
  padding:.75rem 1.5rem;
  cursor:pointer;
  font-size:.9rem;
  height:40px;
}

/* ====================================
   FOOTER
   ==================================== */
footer{
  margin-top:0!important;
  padding-top:2rem;
}
footer p,
footer a{ color:#ccc; }
footer a:hover{ color:var(--gold); }

/* ====================================
   GALLERY + LIGHTBOX
   ==================================== */
#gallery-thumbs img{
  cursor:pointer;
  border-radius:4px;
  transition:transform .25s;
}
#gallery-thumbs img:hover{ transform:scale(1.05); }

.glightbox-clean .gdesc{ color:#111; }
.glightbox-clean .ginner{
  background:rgba(255,255,255,.95);
  border-radius:8px;
}
.glightbox-clean .gnext,
.glightbox-clean .gprev{ color:var(--gold); }

/* ====================================
   MAP
   ==================================== */
.map-responsive{
  position:relative;
  overflow:hidden;
  width:100%;
  padding-top:56.25%;
  border-radius:.25rem;
}
.map-responsive iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border:0;
}

/* ====================================
   MISC
   ==================================== */
.hero-bg-extension{ background-color:var(--cream); }

.pp-alert{
  transition:transform .45s ease, opacity .45s ease;
  transform:translateX(0);
}
.pp-alert--hide{
  transform:translateX(100%);
  opacity:0;
}
.pp-unavailable{ font-weight:700; }

/* ====================================
   RESPONSIVE TWEAKS
   ==================================== */
@media (max-width:640px){
  .cta-button{
    padding:.85rem 1.6rem;
    font-size:.95rem;
  }
  .font-serif{ line-height:1.3; }
}

/* === FORCE HERO FULL BLEED (ONLY hotel.webp hero section) === */
#hero-section {
  width: 100vw !important;
  margin-left: calc(-1 * var(--site-side-pad)) !important;
  margin-right: calc(-1 * var(--site-side-pad)) !important;
  padding: 0 !important;
}

#hero-section > div:first-child img {
  width: 100vw !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}