/* ==========================================================
   SKYCITY HOTEL — Brand Stylesheet
   Loaded when hotel node has brandStylesheet = "skycity-hotel"
   ========================================================== */

:root {
	--hotel-primary:         #782a83;
	--hotel-primary-dark:    #561e5e;
	--hotel-bg:              #ffffff;
	--hotel-bg-alt:          #f4f6f7;
	--hotel-text:            #2a2a2a;
	--hotel-text-muted:      rgba(42, 42, 42, 0.58);
	--hotel-card-bg:         #ffffff;
	--hotel-card-border:     rgba(120, 42, 131, 0.15);
	--hotel-divider:         rgba(120, 42, 131, 0.15);
	--hotel-hero-overlay:    linear-gradient(to top, rgba(20, 10, 30, .72) 0%, rgba(20, 10, 30, .22) 55%, rgba(20, 10, 30, .04) 100%);
	/* --sc-breadcrumb-height: 36px removed 2026-09-01 — the row measures 48.19px,
	   so 36px hid 12.19px of page behind the nav band. site.css now sets the real
	   height on any page that renders a breadcrumb. */

	/* Brand header gradient — the two stops read off schotel_top.svg's own
	   <linearGradient>, so the flat bar is the same red→purple the arc painted.
	   #772982 is within 1 step of --hotel-primary #782a83, so the right-hand end
	   of the bar matches the rest of the brand. */
	--hotel-nav-grad:        linear-gradient(90deg, #d22027 0%, #772982 100%);
}

/* ── Header is a FLAT HORIZONTAL BAND — no decorative pseudo-elements ──
 * 2026-09-01, Adam's call. The arc SVG that used to hang off ::before was
 * sized as a 180%–380%-wide, clamp()/calc()-interpolated fixed layer, and it
 * could not be made to hold: it left white gaps at intermediate viewport
 * widths and its lower sweep cropped the hero and the room gallery.
 * The band is now painted by .sc-nav itself, which is position:fixed and
 * left:0/right:0 — so it is exactly viewport-wide at every width by
 * construction, and there is no ratio left to go wrong.
 * 🔴 Do NOT reintroduce a pseudo-element header here. Grand and Horizon both
 * paint their band on .sc-nav for the same reason; this brand now matches.
 * The SVG media item (/media/4dmptjnv/schotel_top.svg) is left in place but
 * is no longer referenced by anything — deletion is Adam's call.
 * ---------------------------------------------------------------- */
.sc-hotel-brand--skycity-hotel::before,
.sc-hotel-brand--skycity-hotel::after {
	display: none;
}

/* ── Nav — solid brand band, fixed on top ─────────────────────── */
.sc-hotel-brand--skycity-hotel .sc-nav {
	background: var(--hotel-nav-grad) !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	border-bottom: none !important;
	box-shadow: none !important;
	z-index: 1000;
}

.sc-hotel-brand--skycity-hotel .sc-nav__inner {
	background: transparent !important;
}

/* White logo */
.sc-hotel-brand--skycity-hotel .sc-nav__logo img {
	content: url('/media/4hgak43v/skycity_white_horizontal.svg');
}

/* White nav links */
.sc-hotel-brand--skycity-hotel .sc-nav__link,
.sc-hotel-brand--skycity-hotel .sc-nav__dropdown-toggle {
	color: #ffffff;
}
.sc-hotel-brand--skycity-hotel .sc-nav__link:hover,
.sc-hotel-brand--skycity-hotel .sc-nav__dropdown-toggle:hover {
	color: #ffffff;
	opacity: 0.8;
	border-bottom-color: rgba(255, 255, 255, 0.6);
}
.sc-hotel-brand--skycity-hotel .sc-nav__link.is-active {
	color: #ffffff;
	border-bottom-color: rgba(255, 255, 255, 0.8);
}

/* Login button — white outline */
.sc-hotel-brand--skycity-hotel .sc-nav__login-btn {
	color: #ffffff !important;
	border-color: #ffffff !important;
	background: transparent !important;
}
.sc-hotel-brand--skycity-hotel .sc-nav__login-btn:hover {
	background: rgba(255, 255, 255, 0.15) !important;
}

/* SHOW logo — swap to white on dark brand background */
.sc-hotel-brand--skycity-hotel .sc-nav__login-logo-img--dark  { display: none; }
.sc-hotel-brand--skycity-hotel .sc-nav__login-logo-img--light { display: block; }

/* Hamburger — white */
.sc-hotel-brand--skycity-hotel .sc-nav__hamburger span {
	background: #ffffff;
}

/* Search bar — subtle white tint for definition, no border */
.sc-hotel-brand--skycity-hotel .sc-nav__search-bar {
	background: rgba(255, 255, 255, 0.1) !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	border-top: none !important;
	box-shadow: none !important;
}
.sc-hotel-brand--skycity-hotel .sc-nav__search-input {
	color: #ffffff;
	background: transparent !important;
}
.sc-hotel-brand--skycity-hotel .sc-nav__search-input::placeholder {
	color: rgba(255, 255, 255, 0.65);
}
.sc-hotel-brand--skycity-hotel .sc-nav__search-icon {
	color: rgba(255, 255, 255, 0.65);
}
.sc-hotel-brand--skycity-hotel .sc-nav__search-submit {
	background: rgba(255, 255, 255, 0.2) !important;
	border-color: rgba(255, 255, 255, 0.5) !important;
	color: #ffffff !important;
}
.sc-hotel-brand--skycity-hotel .sc-nav__search-submit:hover {
	background: rgba(255, 255, 255, 0.35) !important;
}

/* ── Breadcrumb — flows naturally in nav flex column, white text ──
 * Stays transparent on purpose: it is rendered INSIDE .sc-nav, so it shows
 * the band's gradient. (An element's own transparency says nothing about what
 * is painted behind it — CHANGELOG 2026-09-01.)
 * ---------------------------------------------------------------- */
.sc-hotel-brand--skycity-hotel .sc-breadcrumb {
	background: transparent !important;
	/* 🔴 TRANSPARENT COLOUR, NOT `border-bottom: none`. site.css reserves a flat 48px for
	   this row (--sc-breadcrumb-height) and the row is 47.1875px of box PLUS site.css's
	   1px bottom border. `none` deletes the border box, so the band finished 0.8125px
	   short of the reserved height and the white body showed through as a hairline under
	   the nav — measured 2026-09-01: nav bottom 159.1875 vs hero top 160.
	   Clearing only the COLOUR keeps the box, so the row is 48.1875px again and the nav's
	   own gradient shows through the transparent border.
	   📌 Grand and Horizon never had this defect: both override `border-bottom-color`,
	   not the shorthand. Do not "tidy" this back to `none`. */
	border-bottom-color: transparent !important;
}
.sc-hotel-brand--skycity-hotel .sc-breadcrumb__item,
.sc-hotel-brand--skycity-hotel .sc-breadcrumb__link {
	color: rgba(255, 255, 255, 0.8);
}
.sc-hotel-brand--skycity-hotel .sc-breadcrumb__link:hover {
	color: #ffffff;
}
.sc-hotel-brand--skycity-hotel .sc-breadcrumb__item--current {
	color: #ffffff;
}
.sc-hotel-brand--skycity-hotel .sc-breadcrumb__sep {
	color: rgba(255, 255, 255, 0.5);
}

/* ── Hero ─────────────────────────────────────────────────── */
.sc-hotel-brand--skycity-hotel .sc-hero--hotel {
	margin-top: 0 !important;
}
.sc-hotel-brand--skycity-hotel .sc-hero__overlay { background: var(--hotel-hero-overlay); }
.sc-hotel-brand--skycity-hotel .sc-hero__eyebrow { color: #fff; }

.sc-hotel-brand--skycity-hotel .sc-hero__stars {
	color: #782a83;
	-webkit-text-stroke: 1px #ffffff;
	text-stroke: 1px #ffffff;
}

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

/* ── Sections ─────────────────────────────────────────────── */
.sc-hotel-brand--skycity-hotel .sc-section--grey { background: var(--hotel-bg-alt); }

/* ── Overview content ─────────────────────────────────────── */
.sc-hotel-brand--skycity-hotel .sc-hotel__amenities li {
	background: rgba(120, 42, 131, 0.07);
	border-color: rgba(120, 42, 131, 0.2);
}
.sc-hotel-brand--skycity-hotel .sc-hotel__price-amount { color: var(--hotel-primary); }

/* ── Room cards ───────────────────────────────────────────── */
.sc-hotel-brand--skycity-hotel .sc-room-card { border-color: var(--hotel-card-border); }
.sc-hotel-brand--skycity-hotel .sc-room-card__price strong { color: var(--hotel-primary); }


/* ── Prose ────────────────────────────────────────────────── */
.sc-hotel-brand--skycity-hotel .sc-prose a { color: var(--hotel-primary); }

/* ── FAQ ──────────────────────────────────────────────────── */
/* FAQ grouped panel (2026-08-17, tasks/_done/feat-faq-accordion-restyle.md).
   🔴 The previous `border-color` swap on open was a SECOND state signal on top of the
   fill, which the ruled design forbids — and under the grouped panel there is no
   per-item border left to colour anyway. Removed, not repointed.
   ⚠️ This brand's primary is PURPLE (#782a83), which is not a warm hue. The open tint
   deliberately follows the BRAND rather than the base gold wash — a warm gold fill
   inside a purple-skinned page reads as a foreign element. Brand consistency wins on a
   brand-skinned page; the one-signal rule is preserved either way. */
/* ── FAQ — rebuilt for the new design (2026-08-20, spec 02a) ──────────────────
   SkyCity Hotel is a LIGHT brand, so it keeps the base's cream section and expresses itself
   in the open panel, the hairline and the disc.
   ✅ Unlike Horizon's orange, the brand PURPLE is legible on cream and is used as the number
   and question colour — measured on this sheet's own surface, not assumed:
     #782a83 on cream #FAF7F1 ......... 7.99:1
     #782a83 on open panel #E5D6DF .... 6.11:1
     #4A4744 answer on cream .......... 8.63:1
   📌 The two light hotels therefore diverge on purpose: same structure, and each uses its own
   accent exactly as far as its contrast allows. */
.sc-hotel-brand--skycity-hotel .sc-faq__item { border-top-color: var(--hotel-divider); }
/* Each :has() rule in its OWN block (CLAUDE.md §7) */
.sc-hotel-brand--skycity-hotel .sc-faq__item:has(.sc-faq__question[aria-expanded="true"]) { background: #E5D6DF; }
.sc-hotel-brand--skycity-hotel .sc-faq__item:hover { background: #F4EDEC; }
.sc-hotel-brand--skycity-hotel .sc-faq__item:has(.sc-faq__question[aria-expanded="true"]):hover { background: #E5D6DF; }
.sc-hotel-brand--skycity-hotel .sc-faq__question { color: var(--hotel-primary); }
.sc-hotel-brand--skycity-hotel .sc-faq__question:focus-visible { outline-color: var(--hotel-primary); }
.sc-hotel-brand--skycity-hotel .sc-faq__icon { background: #E8DAE2; color: var(--hotel-primary); }
.sc-hotel-brand--skycity-hotel .sc-faq__question[aria-expanded="true"] .sc-faq__icon { background: rgba(255,255,255,.8); color: var(--hotel-primary); }
.sc-hotel-brand--skycity-hotel .sc-faq__answer { color: #4A4744; }
.sc-hotel-brand--skycity-hotel .sc-faq__answer a { color: var(--hotel-primary); }

/* ── Responsive ───────────────────────────────────────────────
 * Nothing to do here for the header any more. The band is .sc-nav, which is
 * fixed left:0/right:0 and therefore viewport-wide at every size; the
 * five breakpoints that used to rescale the arc's width and height were
 * deleted 2026-09-01 with the arc itself.
 * ---------------------------------------------------------------- */