/* ==========================================================
   THE GRAND BY SKYCITY — Brand Stylesheet
   Loaded when hotel node has brandStylesheet = "grand"
   Dark luxury aesthetic — deep charcoal + warm bronze gold.
   Font: LTC Bodoni 175 (Adobe Fonts, Typekit: bsg2bme)
   ========================================================== */

/* ── Bodoni 175 typography ──────────────────────────────────────── */
.sc-hotel-brand--grand .sc-hero__title,
.sc-hotel-brand--grand .sc-hero__eyebrow,
.sc-hotel-brand--grand .sc-section__title,
.sc-hotel-brand--grand .sc-room-overview__title,
.sc-hotel-brand--grand .sc-hotel__short-desc {
	font-family: "ltc-bodoni-175", serif;
	font-weight: 400;
	font-style: normal;
}

/* 🔴 THE HERO TITLE NEEDS !important — and the rule it beats is named.
   Found 2026-07-29 while auditing the brand sheets after the same bug was
   diagnosed in venues/poker.css.

   BEATS: site.css:2678

       h1,
       .sc-hero__heading,
       .sc-mosaic__title--hero {
           font-family: "specter", var(--sc-font) !important;
           font-weight: 800 !important;
       }

   `.sc-hero__title` RENDERS AS AN <h1>, so that bare type selector — specificity
   (0,0,1), the lowest there is — matches it and carries `!important`, which
   outranks specificity outright. The rule above is (0,2,0) and could never win,
   no matter how specific it got or how late this sheet loads.

   ⚠ SO THE GRAND'S HERO HAS BEEN RENDERING **SPECTER AT 800, NOT BODONI AT
   400**, ever since that rule landed. The declaration sits in this file looking
   correct and simply never applies — a silent failure with nothing in the
   console and nothing in the backoffice to notice.

   BOTH properties are restored, because site.css forces both. Weight matters
   independently: `font-weight: 800` on a face that ships 400 synthesises a
   faux-bold serif even once the family is right.

   Only `.sc-hero__title` needs this — it is the only <h1> in the group above.
   `.sc-section__title` and `.sc-room-overview__title` are h2s and the other two
   are not headings, so the plain rule reaches all four normally. Do NOT promote
   the rest to `!important`: nothing else is contested, and a blanket
   `!important` would make the next real conflict undiagnosable.

   ⚠ horizon.css and skycity-hotel.css declare NO font-family at all, so neither
   is affected — checked, not assumed. If either ever gains a display face on an
   h1, it needs this same treatment.

   See CLAUDE §7 — the documented brand-sheet cascade trap. */
.sc-hotel-brand--grand .sc-hero__title {
	font-family: "ltc-bodoni-175", serif !important;
	font-weight: 400 !important;
}

.sc-hotel-brand--grand .sc-hero__tagline,
.sc-hotel-brand--grand .sc-room-overview__desc {
	font-family: "ltc-bodoni-175", serif;
	font-weight: 400;
	font-style: italic;
}

:root {
	--hotel-primary:         #b8935a;
	--hotel-primary-dark:    #8a6a3a;
	--hotel-bg:              #0e0906;
	--hotel-bg-alt:          #1a120a;
	--hotel-text:            #f5ede0;
	--hotel-text-muted:      rgba(245, 237, 224, 0.62);
	--hotel-nav-bg:          rgba(14, 9, 6, 0.97);
	--hotel-nav-border:      rgba(184, 147, 90, 0.2);
	--hotel-nav-link:        rgba(245, 237, 224, 0.75);
	--hotel-hero-overlay:    linear-gradient(to top, rgba(14,9,6,.92) 0%, rgba(14,9,6,.45) 50%, rgba(14,9,6,.1) 100%);
	--hotel-card-bg:         #1a120a;
	--hotel-card-border:     rgba(184, 147, 90, 0.15);
	--hotel-divider:         rgba(184, 147, 90, 0.18);
}

/* ── Global page background ───────────────────────────────── */
.sc-hotel-brand--grand {
	background: linear-gradient(0deg, rgb(26, 21, 23) 0%, rgb(82, 77, 77) 100%);
	color: var(--hotel-text);
}

/* ── Floral background pattern (fixed, full viewport) ─────── */
.sc-hotel-brand--grand::before,
.sc-hotel-brand--grand::after {
	content: '';
	position: fixed;
	top: 0;
	width: 28vw;
	height: 100vh;
	background-size: 70% auto;
	background-repeat: no-repeat;
	opacity: 0.07;
	z-index: 0;
	pointer-events: none;
}

.sc-hotel-brand--grand::before {
	left: 0;
	background-image: url('/media/mbhnsikk/left-ptn-bw.png');
	background-position: top left;
}

.sc-hotel-brand--grand::after {
	right: 0;
	background-image: url('/media/jnojkknq/right-ptn-bw.png');
	background-position: top right;
}

/* Ensure all content sits above the flower layer */
.sc-hotel-brand--grand .sc-nav,
.sc-hotel-brand--grand main,
.sc-hotel-brand--grand .sc-footer,
.sc-hotel-brand--grand .sc-breadcrumb {
	position: relative;
	z-index: 1;
}

/* ── Nav ──────────────────────────────────────────────────── */
.sc-hotel-brand--grand .sc-nav { background: var(--hotel-nav-bg); border-bottom-color: var(--hotel-nav-border); position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 1000 !important; }
/* White logo on Grand dark background */
.sc-hotel-brand--grand .sc-nav__logo img { content: url('/media/4hgak43v/skycity_white_horizontal.svg'); }
.sc-hotel-brand--grand .sc-nav__link,
.sc-hotel-brand--grand .sc-nav__dropdown-toggle { color: var(--hotel-nav-link); }
.sc-hotel-brand--grand .sc-nav__link:hover,
.sc-hotel-brand--grand .sc-nav__link.is-active,
.sc-hotel-brand--grand .sc-nav__dropdown-toggle:hover { color: var(--hotel-primary); border-bottom-color: var(--hotel-primary); }
.sc-hotel-brand--grand .sc-nav__search-bar { background: rgba(26,18,10,.98); border-top-color: var(--hotel-nav-border); }
.sc-hotel-brand--grand .sc-nav__search-input { color: var(--hotel-text); }
.sc-hotel-brand--grand .sc-nav__search-input::placeholder { color: var(--hotel-text-muted); }
.sc-hotel-brand--grand .sc-nav__hamburger span { background: var(--hotel-text); }
/* SHOW logo — swap to white on dark brand background */
.sc-hotel-brand--grand .sc-nav__login-logo-img--dark  { display: none; }
.sc-hotel-brand--grand .sc-nav__login-logo-img--light { display: block; }

/* ── Hero ─────────────────────────────────────────────────── */
.sc-hotel-brand--grand .sc-hero__overlay { background: var(--hotel-hero-overlay); }
.sc-hotel-brand--grand .sc-hero__eyebrow { color: var(--hotel-primary); }
.sc-hotel-brand--grand .sc-hero__stars   { color: var(--hotel-primary); }

/* ── Buttons ──────────────────────────────────────────────── */
.sc-hotel-brand--grand .sc-btn--gold { background: var(--hotel-primary); border-color: var(--hotel-primary); color: var(--hotel-bg); }
.sc-hotel-brand--grand .sc-btn--gold:hover { background: var(--hotel-primary-dark); border-color: var(--hotel-primary-dark); }
.sc-hotel-brand--grand .sc-btn--outline { color: var(--hotel-primary); border-color: var(--hotel-primary); background: transparent; }
.sc-hotel-brand--grand .sc-btn--outline:hover { background: var(--hotel-primary); color: var(--hotel-bg); }

/* ── Sections ─────────────────────────────────────────────── */
.sc-hotel-brand--grand .sc-section { background: transparent; color: var(--hotel-text); }
.sc-hotel-brand--grand .sc-section--grey { background: rgba(26, 18, 10, 0.6); color: var(--hotel-text); }
.sc-hotel-brand--grand .sc-section__title { color: var(--hotel-text); }

/* ── Overview content ─────────────────────────────────────── */
.sc-hotel-brand--grand .sc-hotel__short-desc { color: var(--hotel-text-muted); }
.sc-hotel-brand--grand .sc-hotel__quick-facts li { color: var(--hotel-text-muted); }
.sc-hotel-brand--grand .sc-hotel__quick-facts strong { color: var(--hotel-text); }
.sc-hotel-brand--grand .sc-hotel__amenities li { background: rgba(184,147,90,.1); border-color: rgba(184,147,90,.25); color: var(--hotel-text); }
.sc-hotel-brand--grand .sc-hotel__price { color: var(--hotel-text-muted); }
.sc-hotel-brand--grand .sc-hotel__price-amount { color: var(--hotel-primary); }

/* ── Room cards ───────────────────────────────────────────── */
.sc-hotel-brand--grand .sc-room-card { background: var(--hotel-card-bg); border: 1px solid var(--hotel-card-border); color: var(--hotel-text); }
.sc-hotel-brand--grand .sc-room-card__title  { color: var(--hotel-text); }
.sc-hotel-brand--grand .sc-room-card__desc   { color: var(--hotel-text-muted); }
.sc-hotel-brand--grand .sc-room-card__price  { color: var(--hotel-text-muted); }
.sc-hotel-brand--grand .sc-room-card__price strong { color: var(--hotel-primary); }


/* ── Breadcrumb ───────────────────────────────────────────── */
.sc-hotel-brand--grand .sc-breadcrumb { background: transparent; border-bottom-color: var(--hotel-divider); }
.sc-hotel-brand--grand .sc-breadcrumb__item          { color: var(--hotel-text-muted); }
.sc-hotel-brand--grand .sc-breadcrumb__link          { color: var(--hotel-text-muted); }
.sc-hotel-brand--grand .sc-breadcrumb__link:hover    { color: var(--hotel-primary); }
.sc-hotel-brand--grand .sc-breadcrumb__item--current { color: var(--hotel-text); }
.sc-hotel-brand--grand .sc-breadcrumb__sep           { color: rgba(245,237,224,.4); }

/* ── Prose ────────────────────────────────────────────────── */
.sc-hotel-brand--grand .sc-prose { color: var(--hotel-text-muted); }
.sc-hotel-brand--grand .sc-prose h2,
.sc-hotel-brand--grand .sc-prose h3 { color: var(--hotel-text); }
.sc-hotel-brand--grand .sc-prose a { color: var(--hotel-primary); }

/* ── FAQ ──────────────────────────────────────────────────── */
/* FAQ grouped panel — DARK-SURFACE counterpart (2026-08-17,
   tasks/_done/feat-faq-accordion-restyle.md).
   🔴 The base open-state tint is a LIGHT warm wash, which on this brand's near-black
   page (--hotel-bg #0e0906) would be a near-white block. This is the reason that spec
   raised a STOP rather than shipping the shared component alone. The dark analogue is a
   low-alpha BRONZE lift on the dark card surface — same one-signal rule, inverted.
   ⚠️ ONE signal only: fill changes, border does NOT. Do not re-add a border-colour swap. */
/* ── FAQ — rebuilt for the new design (2026-08-20, spec 02a) ──────────────────
   🔴 THE GRAND IS A DARK BRAND AND THE NEW BASE FAQ SECTION IS CREAM (#FAF7F1). That
   collision is what broke this page: the base painted a cream section while this sheet
   still set `.sc-faq__question { color: var(--hotel-text) }` — cream text — so the
   questions and the heading were cream-on-cream, effectively invisible. The old
   `.sc-faq__list { background: var(--hotel-card-bg) }` then dropped a dark panel into the
   middle of the cream, which is the "dark brown/black items on cream" Adam reported.
   📌 Note what the 02 audit could not see: every one of those rules was individually
   defensible. The failure was the COMPOSITION of this sheet with a changed base, which is
   why the acceptance test for this pass is a screenshot and not a rule-by-rule verdict.

   The fix keeps the new design's STRUCTURE (wide number column, display-size numbers, one
   flat open panel, filled disc) and gives it The Grand's OWN surface — the section is dark
   here, because a cream band on a near-black hotel page is not "brand-matched", it is a
   foreign block. Contrast measured on this sheet's own surface, not inherited from the base:
     cream #f5ede0 on section #1a120a ........ 15.93:1
     cream #f5ede0 on open panel #362918 ..... 12.15:1
     bronze #b8935a on section ................ 6.48:1
     muted  #ABA397 on section ................ 7.42:1
   ⚠️ Opaque fills throughout — a translucent tint over a gradient-free but brand-variable
   surface is the trap CLAUDE.md §7 keeps re-teaching. */
.sc-hotel-brand--grand .sc-faq { background: var(--hotel-card-bg); }
.sc-hotel-brand--grand .sc-faq__heading { color: var(--hotel-text); }
.sc-hotel-brand--grand .sc-faq__item { border-top-color: var(--hotel-divider); }
/* Each :has() rule in its OWN block (CLAUDE.md §7) */
.sc-hotel-brand--grand .sc-faq__item:has(.sc-faq__question[aria-expanded="true"]) { background: #362918; }
.sc-hotel-brand--grand .sc-faq__item:hover { background: #251B10; }
.sc-hotel-brand--grand .sc-faq__item:has(.sc-faq__question[aria-expanded="true"]):hover { background: #362918; }
/* The number inherits this via currentColor — that is the base's contract, so setting the
   question colour is all that is needed to recolour both. */
.sc-hotel-brand--grand .sc-faq__question { color: var(--hotel-text); }
.sc-hotel-brand--grand .sc-faq__question:focus-visible { outline-color: var(--hotel-primary); }
.sc-hotel-brand--grand .sc-faq__icon { background: rgba(184,147,90,.20); color: var(--hotel-primary); }
.sc-hotel-brand--grand .sc-faq__question[aria-expanded="true"] .sc-faq__icon { background: rgba(245,237,224,.16); color: var(--hotel-primary); }
.sc-hotel-brand--grand .sc-faq__answer { color: #ABA397; }
.sc-hotel-brand--grand .sc-faq__answer a { color: var(--hotel-primary); }

/* ── Footer ───────────────────────────────────────────────── */
.sc-hotel-brand--grand .sc-footer { background: rgba(8,5,3,.95); border-top: 1px solid var(--hotel-divider); }

/* ── Mobile: scale flowers down ───────────────────────────── */
@media (max-width: 768px) {
	.sc-hotel-brand--grand::before,
	.sc-hotel-brand--grand::after {
		width: 60vw;
		opacity: 0.05;
	}
}