/* ==========================================================
   HORIZON BY SKYCITY — Brand Stylesheet
   Loaded when hotel node has brandStylesheet = "horizon"
   Deep navy nav (#1c1933) + SVG wave strip hanging below it.
   ========================================================== */

/* The --sc-breadcrumb-height: 36px that stood here was removed 2026-09-01.
   The row measures 48.19px, so 36px hid 12.19px of page behind the nav band,
   and the claim that grand.css did the same was false — it never set it.
   site.css now sets the real height on any page rendering a breadcrumb. */

:root {
	--hotel-primary:         #e8862a;
	--hotel-primary-dark:    #c96e1a;
	--hotel-bg:              #ffffff;
	--hotel-bg-alt:          #f4f4f4;
	--hotel-text:            #2a2a2a;
	--hotel-text-muted:      rgba(42, 42, 42, 0.58);
	--hotel-card-bg:         #ffffff;
	--hotel-card-border:     rgba(232, 134, 42, 0.15);
	--hotel-divider:         rgba(232, 134, 42, 0.15);
	--hotel-hero-overlay:    linear-gradient(to top, rgba(28, 25, 51, .72) 0%, rgba(28, 25, 51, .22) 55%, rgba(28, 25, 51, .04) 100%);
}

/* ── No decorative ::before/::after on body ───────────────── */
.sc-hotel-brand--horizon::before,
.sc-hotel-brand--horizon::after {
	display: none;
}

/* ── Nav — solid navy, fixed at top, overflow visible for wave */
.sc-hotel-brand--horizon .sc-nav {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	background: #1c1933 !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	border-bottom: none !important;
	box-shadow: none !important;
	z-index: 1000;
	overflow: visible;
}

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

/* ── SVG wave strip — hangs directly below the nav bar ───────
 * z-index: 0 — sits below the breadcrumb which has position:
 * relative + z-index: 1 set globally in site.css
 * ------------------------------------------------------------ */
.sc-hotel-brand--horizon .sc-nav::after {
	content: '';
	display: block;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 5rem;
	background: url('https://sceg-ws-mktg-umbraco17-fe-internal-wa-tst-arazefhqbah4budg.australiaeast-01.azurewebsites.net/media/q2cnurxx/header-bg2.svg') no-repeat top left;
	background-size: 100% 5rem;
	pointer-events: none;
	z-index: 0;
}

@media (max-width: 1136px) {
	.sc-hotel-brand--horizon .sc-nav::after {
		height: 5vw;
		background-size: 100% 5vw;
	}
}

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

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

/* Login button — white outline */
.sc-hotel-brand--horizon .sc-nav__login-btn {
	color: #ffffff !important;
	border-color: #ffffff !important;
	background: transparent !important;
}
.sc-hotel-brand--horizon .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--horizon .sc-nav__login-logo-img--dark  { display: none; }
.sc-hotel-brand--horizon .sc-nav__login-logo-img--light { display: block; }

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

/* Search bar */
.sc-hotel-brand--horizon .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--horizon .sc-nav__search-input {
	color: #ffffff;
	background: transparent !important;
}
.sc-hotel-brand--horizon .sc-nav__search-input::placeholder {
	color: rgba(255, 255, 255, 0.65);
}
.sc-hotel-brand--horizon .sc-nav__search-icon {
	color: rgba(255, 255, 255, 0.65);
}
.sc-hotel-brand--horizon .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--horizon .sc-nav__search-submit:hover {
	background: rgba(255, 255, 255, 0.35) !important;
}

/* ── Breadcrumb — navy background, white text ────────────────
 * position: relative + z-index: 1 is set globally in site.css
 * so the breadcrumb always sits above the wave pseudo-element.
 * Only colour overrides needed here.
 * ------------------------------------------------------------ */
.sc-hotel-brand--horizon .sc-breadcrumb {
	background: #1c1933 !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.sc-hotel-brand--horizon .sc-breadcrumb__item,
.sc-hotel-brand--horizon .sc-breadcrumb__link {
	color: rgba(255, 255, 255, 0.7);
}
.sc-hotel-brand--horizon .sc-breadcrumb__link:hover {
	color: #ffffff;
}
.sc-hotel-brand--horizon .sc-breadcrumb__item--current {
	color: rgba(255, 255, 255, 0.9);
}
.sc-hotel-brand--horizon .sc-breadcrumb__sep {
	color: rgba(255, 255, 255, 0.35);
}

/* ── Hero ─────────────────────────────────────────────────── */
.sc-hotel-brand--horizon .sc-hero--hotel {
	margin-top: 0 !important;
}
.sc-hotel-brand--horizon .sc-hero__overlay {
	background: var(--hotel-hero-overlay);
}
.sc-hotel-brand--horizon .sc-hero__eyebrow {
	color: rgba(255, 255, 255, 0.85);
}
.sc-hotel-brand--horizon .sc-hero__stars {
	color: var(--hotel-primary);
}

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

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

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

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


/* ── Prose ────────────────────────────────────────────────── */
.sc-hotel-brand--horizon .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.
   Open state is the fill alone; the icon carries the brand colour. */
/* ── FAQ — rebuilt for the new design (2026-08-20, spec 02a) ──────────────────
   Horizon is a LIGHT brand, so it keeps the base's cream section and expresses itself in the
   open panel, the hairline and the disc.
   🔴 THE BRAND ORANGE IS NOT USED AS TEXT, AND THAT IS DELIBERATE. #e8862a measures
   **2.49:1 on the cream section** — nowhere near the 4.5:1 floor. This is exactly the pairing
   CLAUDE.md §2 warns about (an accent that lives on dark is not automatically legible on
   light), and the spec flagged it as the likely failure of this part. The number and question
   use a DEEPENED orange from the same family instead, which reads as Horizon without failing:
     #8A470D on cream #FAF7F1 ......... 6.57:1
     #8A470D on open panel #F7E3CD .... 5.63:1
     #4A4744 answer on cream .......... 8.63:1
   ⚠️ Do not "restore" var(--hotel-primary) on .sc-faq__question — it is legible on Horizon's
   dark hero, not on this section. The brand orange stays where it can be seen: the fills. */
.sc-hotel-brand--horizon .sc-faq__item { border-top-color: var(--hotel-divider); }
/* Each :has() rule in its OWN block (CLAUDE.md §7) */
.sc-hotel-brand--horizon .sc-faq__item:has(.sc-faq__question[aria-expanded="true"]) { background: #F7E3CD; }
.sc-hotel-brand--horizon .sc-faq__item:hover { background: #F9F0E5; }
.sc-hotel-brand--horizon .sc-faq__item:has(.sc-faq__question[aria-expanded="true"]):hover { background: #F7E3CD; }
.sc-hotel-brand--horizon .sc-faq__question { color: #8A470D; }
.sc-hotel-brand--horizon .sc-faq__question:focus-visible { outline-color: var(--hotel-primary); }
.sc-hotel-brand--horizon .sc-faq__icon { background: #F7E5D1; color: #8A470D; }
.sc-hotel-brand--horizon .sc-faq__question[aria-expanded="true"] .sc-faq__icon { background: rgba(255,255,255,.8); color: #8A470D; }
.sc-hotel-brand--horizon .sc-faq__answer { color: #4A4744; }
.sc-hotel-brand--horizon .sc-faq__answer a { color: #8A470D; }