/* ==========================================================================
   premium.css — Refinement layer for Thirdy's Hospitality Group
   Loaded LAST. Purpose: tighten the type, calm the noise, add the small
   optical details that separate "template" from "premium hotel brand".
   ========================================================================== */

/* ---------------------------------------------------------------
   1. TYPOGRAPHIC REFINEMENT
   The display serif was rendering with default tracking, which at
   large sizes reads loose and cheap. Premium editorial type gets
   TIGHTER as it gets bigger, never looser.
   --------------------------------------------------------------- */
:root{
  --space-1:.5rem;  --space-2:1rem;   --space-3:1.5rem;
  --space-4:2.5rem; --space-5:4rem;   --space-6:6rem; --space-7:9rem;
  --ease: cubic-bezier(.22,.61,.36,1);
  --shadow-1: 0 1px 2px rgba(26,20,16,.04), 0 2px 8px rgba(26,20,16,.04);
  --shadow-2: 0 2px 4px rgba(26,20,16,.05), 0 8px 24px rgba(26,20,16,.07);
  --shadow-3: 0 4px 8px rgba(26,20,16,.06), 0 18px 48px rgba(26,20,16,.10);
}

html{ -webkit-text-size-adjust:100%; }

body{
  /* Real kerning + ligatures. Off by default in most browsers. */
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Optical tracking scale for the display serif */
.hero-title{ letter-spacing:-.022em; }
.section-title, .prop-title, .carousel-active-title{ letter-spacing:-.014em; }
h2,h3,h4{ letter-spacing:-.01em; }

/* Serif numerals look unbalanced in tabular contexts (prices, ratings). */
.price-amount, .rate-num, .cmp-table td, .rating-score, .stat-num{
  font-variant-numeric: tabular-nums lining-nums;
}

/* Prevent typographic orphans on short headings */
.section-title, .prop-title, .hero-title{ text-wrap: balance; }
p, .section-sub, .prop-desc{ text-wrap: pretty; }

/* Hanging punctuation on pull quotes reads far more considered */
blockquote, .review-text{ hanging-punctuation: first last; }

/* The italic <em> inside display headings was set with inline styles.
   Centralised here so the markup stays clean. */
.rooms-section-title em,
.prop-title em,
.hero-title em,
.carousel-active-title em,
.section-title em{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 300;
}

/* ---------------------------------------------------------------
   2. SELECTION + SCROLLBAR + FOCUS
   Tiny surfaces almost always left at browser default. Branding
   them is a strong "someone cared" signal.
   --------------------------------------------------------------- */
::selection{ background: rgba(122,37,53,.14); color: var(--burgundy-deep, #5a1a28); }

@supports (scrollbar-width: thin){
  html{ scrollbar-width: thin; scrollbar-color: #c9bfae transparent; }
}
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background: #f2ede4; }
::-webkit-scrollbar-thumb{
  background:#cdc3b2; border-radius:10px; border:2px solid #f2ede4;
}
::-webkit-scrollbar-thumb:hover{ background:#b3a693; }

/* Consistent, on-brand focus ring (accessibility + polish) */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--burgundy, #7a2535);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------------------------------------------------------------
   3. ELEGANT IMAGE PLACEHOLDERS
   23 room/gallery photos are not yet supplied. Previously these
   collapsed to a giant faint letter on flat grey — which reads as
   "broken". Reframed as an intentional monogram plate so the site
   looks unfinished-by-design rather than buggy.
   --------------------------------------------------------------- */
.room-img-new, .gal-item-new, .prop-img-holder,
.blog-cover-new .img-ph, .why-image-main{
  background-image:
    linear-gradient(135deg, #f4efe6 0%, #ebe4d8 48%, #f4efe6 100%);
  background-color:#f1ebe0;
  position:relative;
  overflow:hidden;
}

/* Fine inner hairline — like a matted print */
.room-img-new::after, .gal-item-new::after{
  content:"";
  position:absolute; inset:8px;
  border:1px solid rgba(122,37,53,.10);
  pointer-events:none;
  z-index:1;
}
.room-img-new img, .gal-item-new img{ position:relative; z-index:2; }

/* Monogram: smaller, gold, letterspaced — a crest, not an error */
.ph-text{
  font-family:'Cormorant Garamond', Georgia, serif !important;
  color: rgba(122,37,53,.16) !important;
  font-weight:500 !important;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.room-img-new .ph-text{ font-size:2.4rem !important; }
.gal-item-new .ph-text{ font-size:2rem !important; }
.prop-img-holder .ph-text{ font-size:5rem !important; color:rgba(255,255,255,.14) !important; }

/* Discreet caption under the monogram */
.room-img-new .ph-text::after,
.gal-item-new .ph-text::after{
  content:"Photo coming soon";
  position:absolute;
  left:50%; transform:translateX(-50%);
  top:calc(50% + 1.5rem);
  font-family:'Jost', system-ui, sans-serif;
  font-size:.58rem;
  font-weight:400;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(63,58,53,.34);
  white-space:nowrap;
}

/* ---------------------------------------------------------------
   4. DEPTH & SURFACES
   Original shadows were single-layer and slightly muddy. Layered,
   warm-tinted shadows read much more expensive.
   --------------------------------------------------------------- */
.prop-card-new, .blog-card-new, .food-card, .review-card,
.cmp-table-wrap, .hero-book-card, .room-card-new{
  box-shadow: var(--shadow-1);
  transition: box-shadow .45s var(--ease), transform .45s var(--ease);
}
.prop-card-new:hover, .blog-card-new:hover, .food-card:hover,
.room-card-new:hover{
  box-shadow: var(--shadow-3);
  transform: translateY(-3px);   /* restrained; 8px lifts feel gimmicky */
}

/* Images should scale slower than the card for a calm, filmic feel */
.blog-cover-new img, .prop-img-holder img, .food-card img{
  transition: transform 1.1s var(--ease), filter .6s var(--ease);
  will-change: transform;
}
.blog-card-new:hover .blog-cover-new img,
.food-card:hover img{ transform: scale(1.045); }

/* ---------------------------------------------------------------
   5. BUTTONS — quieter, more confident
   --------------------------------------------------------------- */
.btn, .btn-new, .book-btn, .btn-outline{
  transition: background-color .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), box-shadow .3s var(--ease),
              transform .18s var(--ease);
}
.btn:active, .btn-new:active, .book-btn:active{ transform: translateY(1px); }

/* Primary CTA: subtle warm glow instead of a hard drop shadow */
.btn-primary, .bk-submit, .book-btn.primary{
  box-shadow: 0 1px 2px rgba(90,26,40,.18), 0 6px 18px rgba(122,37,53,.16);
}
.btn-primary:hover, .bk-submit:hover, .book-btn.primary:hover{
  box-shadow: 0 2px 4px rgba(90,26,40,.22), 0 12px 30px rgba(122,37,53,.24);
}

/* ---------------------------------------------------------------
   6. SECTION RHYTHM
   Vertical spacing was inconsistent (some sections 60px, some 120px),
   which is the fastest way to look amateur. Normalised to one scale.
   --------------------------------------------------------------- */
section{ padding-block: clamp(3.5rem, 8vw, var(--space-7)); }
.section-head{ margin-bottom: clamp(2rem, 4vw, var(--space-5)); }

/* Gold hairline flourish under section eyebrows */
.section-label::after, .eyebrow::after{
  content:"";
  display:block;
  width:34px; height:1px;
  margin:.7rem auto 0;
  background:linear-gradient(90deg, transparent, var(--gold,#b5860a), transparent);
}

/* ---------------------------------------------------------------
   7. IMAGE RENDERING QUALITY
   --------------------------------------------------------------- */
img{
  image-rendering:auto;
  /* Stops the 1px sub-pixel shimmer on scaled photos in WebKit */
  backface-visibility:hidden;
}
/* Warm, subtle grade so mixed-source photography feels like one set */
.prop-img-holder img, .blog-cover-new img, .gal-item-new img{
  filter: saturate(1.03) contrast(1.02);
}

/* ---------------------------------------------------------------
   8. PRINT — guests do print booking confirmations
   --------------------------------------------------------------- */
@media print{
  #quick-book, #sticky-book, #contact-pill,
  .mob-toggle, #mob-overlay, .top-bar, .seasonal-banner,
  #newsletter, .gal-strip-new{ display:none !important; }
  body{ background:#fff; color:#000; font-size:11pt; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:9pt; color:#555; }
  section{ padding-block:1rem; break-inside:avoid; }
}

/* ---------------------------------------------------------------
   9. MOTION RESTRAINT
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .prop-card-new:hover, .blog-card-new:hover{ transform:none; }
}

/* --------------------------------------------------------------
   10. LAYOUT SAFETY
   -------------------------------------------------------------- */
img, video, iframe{ max-width:100%; }
/* Kills horizontal scroll caused by wide iframes/tables on mobile */
body{ overflow-x:hidden; }
.cmp-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }


/* ---------------------------------------------------------------
   11. HERO PROMO CARD TITLE
   Was an <h3>, which created an h1 -> h3 skip before the first
   <h2>. Demoted to <p> for correct document outline; the visual
   treatment is reproduced here so nothing changes on screen.
   --------------------------------------------------------------- */
.hero-book-card .hero-card-title{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:1.35rem;
  font-weight:500;
  color:var(--ink, #1a1a1a);
  margin:0 0 20px;
  text-align:center;
  letter-spacing:.02em;
  line-height:1.25;
}


/* ---------------------------------------------------------------
   12. OVERLAY ACCESSIBILITY
   enhancements.css hid the booking modal and lightbox with only
   opacity:0 + pointer-events:none. That leaves both in the
   accessibility tree: screen readers read out the entire closed
   booking form, and Tab moves focus into invisible fields.
   visibility:hidden removes them properly; it still animates
   because it is a discrete-but-transitionable property when
   paired with a delay on the way out.
   --------------------------------------------------------------- */
.bk-overlay,
.lb-overlay{
  visibility:hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
.bk-overlay.open,
.lb-overlay.open{
  visibility:visible;
  transition: opacity .25s ease, visibility 0s linear 0s;
}

/* Belt and braces: never allow focus into a closed overlay even if
   a future change reintroduces the visibility bug. */
.bk-overlay:not(.open) :where(a,button,input,select,textarea),
.lb-overlay:not(.open) :where(a,button,input,select,textarea){
  pointer-events:none;
}