/* Auto-extracted dari Elementor (NASSA). Sumber kebenaran = file ini. */

/* ===== #nc-hfe-header ===== */
/* Font (Libre Caslon Text + Manrope) di-self-host via mu-plugin stellar-local-fonts.php (nassa.css) — @import eksternal dihapus. */

/* ===== Scrollbar NASSA (site-wide) — hijau Our Menu di atas krem halaman =====
 * Nilainya SAMA PERSIS dengan pita #our-menu di nassa-home.css:
 *   thumb = --nx-green  #3B501A   (latar pita Our Menu)
 *   track = --nx-cream  #F1EEE0   (latar halaman)
 * Ditulis literal, bukan var(--nx-*): token itu didefinisikan di :root
 * nassa-home.css yang HANYA di-enqueue di front page, sedangkan file ini
 * site-wide — memakai var() bikin scrollbar kehilangan warna di halaman dalam.
 *
 * Blok lama memakai brass #725c23 di atas #fcf9f4, warisan skin Courtyard 1.0;
 * krem-nya pun beda tipis dari #F1EEE0 sehingga track terlihat sebagai pita
 * lebih terang di tepi kanan. Keduanya diganti sekaligus.
 *
 * Ini juga MENIMPA scrollbar dari stellar-no-fouc.php (thumb hijau 45% alpha):
 * inline <style> itu dicetak di wp_head prioritas 0, stylesheet ini menyusul
 * setelahnya dengan selector yang identik, jadi cascade order yang menentukan —
 * tanpa !important. Kalau nanti no-fouc dikasih !important, aturan di sini ikut
 * harus dinaikkan. */
/* Firefox: thumb hijau, track = BG krem */
html { scrollbar-color: #3B501A #F1EEE0; scrollbar-width: thin; }
/* WebKit (Chrome/Edge/Safari) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #F1EEE0; }          /* = --nx-cream */
::-webkit-scrollbar-thumb { background: #3B501A; border-radius: 5px; border: 2px solid #F1EEE0; } /* hijau --nx-green, dibingkai warna BG */
::-webkit-scrollbar-thumb:hover { background: #2C3C14; }    /* hijau lebih pekat saat hover */

/* Stellar Group header → courtyard skin */
header#masthead, header#masthead .elementor-section {
    background: #fcf9f4 !important;
    border-bottom: 1px solid #c4c8c1 !important;
    box-shadow: 0 1px 2px rgba(24,36,26,0.04) !important;
}
header#masthead { position: sticky !important; top: 0; left: 0; right: 0; z-index: 9999; width: 100%; background-color: #fcf9f4 !important; }
header#masthead .elementor-container { max-width: 1440px !important; }
header#masthead { --e-global-color-accent: #725c23 !important; }

/* Reset Elementor wrapper paddings so our nav fills full width */
header#masthead .elementor-section,
header#masthead .elementor-container,
header#masthead .elementor-column,
header#masthead .elementor-column-wrap,
header#masthead .elementor-widget-wrap,
header#masthead .elementor-widget-html { padding: 0 !important; margin: 0 !important; background: transparent !important; min-height: 0 !important; }
header#masthead .elementor-container { max-width: 100% !important; }
header#masthead .elementor-widget-html .elementor-widget-container { padding: 0 !important; }
/* Tepi konten header = tepi panah slider.
 *
 * Angkanya BUKAN pilihan bebas: ini salinan persis dari .nx-gal-prev /
 * .nx-wo-prev di mu-plugins/nassa-home-assets/nassa-home.css, yang diturunkan
 * dari bbox panah di Nassa.svg (x 57,570312 x 4/3 = 76,76px @1366 = 5,62vw).
 * Kalau jarak panah di sana diubah, ubah juga di sini — kalau tidak, header
 * dan panah berhenti sejajar.
 *
 * Konsekuensinya shell "max-width 1440 + margin auto" DIBUANG: di layar
 * >1440px shell itu memusatkan nav sehingga kontennya mulai di 268px
 * (terukur @1920) sementara panah tetap di 77px — meleset 191px. Panah
 * diukur dari tepi VIEWPORT, jadi header pun harus begitu. */
header#masthead { --nc-edge: clamp(10px, 5.62vw, 77px); }

/* Container: full-bleed, dengan padding samping = jarak panah slider. */
.nc-courtyard-nav { display: flex !important; align-items: center; justify-content: space-between; height: 88px; max-width: 100%; margin: 0; padding: 0 var(--nc-edge); gap: 16px; font-family: 'Manrope', sans-serif; }
.nc-courtyard-nav .nc-cy-brandwrap { display: flex; align-items: center; gap: 14px; }
/* Divider as a centered, fixed-height pseudo-element line so it never
   visually clashes with the now-tall (72px) Stellar wordmark logo. */
.nc-courtyard-nav .nc-cy-group { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; padding-right: 16px; position: relative; transition: opacity .25s ease; white-space: nowrap; }
.nc-courtyard-nav .nc-cy-group::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 32px; background: #c4c8c1; }
.nc-courtyard-nav .nc-cy-group:hover { opacity: 0.7; }
.nc-courtyard-nav .nc-cy-group .nc-cy-group-arrow { font-size: 26px; line-height: 1; color: #747872; transition: transform .25s ease; font-weight: 300; }
.nc-courtyard-nav .nc-cy-group:hover .nc-cy-group-arrow { transform: translateX(-3px); color: #725c23; }
/* Stellar back-arrow logo sized to match the NASSA brand mark — shrunk from 72
   so brand row + 5 nav links + Book Now no longer overlap at desktop widths. */
.nc-courtyard-nav .nc-cy-group img { height: 52px; width: auto; object-fit: contain; display: block; filter: brightness(0) saturate(100%); opacity: 0.85; transition: opacity .25s ease; }
.nc-courtyard-nav .nc-cy-group:hover img { opacity: 1; }
/* Logo anchor now wraps BOTH the emblem and the wordmark/tagline so the whole
   brand block links to the NASSA home (like Orion's clickable wordmark). The
   14px gap that used to come from .nc-cy-brandwrap now lives on this anchor. */
.nc-courtyard-nav .nc-cy-logo { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; transition: opacity .25s ease; }
.nc-courtyard-nav .nc-cy-logo:hover { opacity: 0.75; }
.nc-courtyard-nav .nc-cy-logo img { height: 52px; width: auto; display: block; object-fit: contain; }
/* Brand block lifted from the footer (.nf-brandtext) — wordmark NASSA stacked
   above the tagline, sitting to the RIGHT of the NASSA emblem. No divider. */
.nc-courtyard-nav .nc-cy-brandtext { display: inline-flex; flex-direction: column; justify-content: center; gap: 3px; }
.nc-courtyard-nav .nc-cy-wm { font-family: 'Libre Caslon Text', serif; font-size: 22px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #18241a; line-height: 1; }
.nc-courtyard-nav .nc-cy-tagline { display: inline-flex; align-items: center; gap: 5px; font-family: 'Manrope', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #747872; white-space: nowrap; line-height: 1; }
.nc-courtyard-nav .nc-cy-tagline .nc-cy-tag-dot { color: #725c23; font-weight: 700; }
/* flex: 0 0 auto + white-space: nowrap SEJAK item nav jadi ENAM (Banquet
   ditambahkan 2026-08-24). Tanpa keduanya deretan nav ikut menyusut waktu ruang
   kurang, dan yang menyusut bukan jaraknya melainkan teksnya: "What's On" dan
   "Contact Us" patah jadi dua baris sehingga bilah header terlihat berantakan
   di 1200-1499px. Yang mengalah sekarang blok brand (min-width: 0), bukan nav. */
.nc-courtyard-nav .nc-cy-links { display: flex; gap: 20px; align-items: center; flex: 0 0 auto; }
.nc-courtyard-nav .nc-cy-links a { white-space: nowrap; }
.nc-courtyard-nav .nc-cy-brandwrap { min-width: 0; }
.nc-courtyard-nav .nc-cy-links a { font-size: 14px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #434843; transition: color .3s ease; padding-bottom: 4px; text-decoration: none; }
.nc-courtyard-nav .nc-cy-links a:hover { color: #725c23; }
.nc-courtyard-nav .nc-cy-links a.active { color: #18241a; border-bottom: 2px solid #725c23; }
.nc-courtyard-nav .nc-cy-actions { display: flex; align-items: center; gap: 16px; }
/* Book Now — warnanya disamakan dengan tombol "Reservasi via WhatsApp"
 * (.nx-btn-solid di section Location, nassa-home.css): isi hijau --nx-green
 * #3B501A, teks krem --nx-cream #F1EEE0. Sebelumnya #18241a + #fff, warisan
 * palet Courtyard 1.0 — hijaunya lebih gelap dan lebih biru, jadi dua tombol
 * "aksi utama" di halaman yang sama tidak pernah sama warnanya.
 *
 * Literal, bukan var(--nx-*): token itu hidup di :root nassa-home.css yang cuma
 * di-enqueue di front page, sedangkan header ini site-wide — var() bikin
 * tombolnya kehilangan warna di halaman dalam. Alasan yang sama dengan blok
 * scrollbar di atas.
 *
 * Hanya WARNA yang mengikuti; ukuran/letter-spacing tetap milik header (tombol
 * bar sempit, bukan tombol section). */
.nc-courtyard-nav .nc-cy-book { background: #3B501A; color: #F1EEE0; font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; padding: 12px 32px; border: 1px solid #3B501A; border-radius: 2px; text-decoration: none; transition: all .3s ease; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.nc-courtyard-nav .nc-cy-book:hover { background: transparent; color: #3B501A; }
.nc-courtyard-nav .nc-cy-hamburger { display: none; flex-direction: column; gap: 5px; background: transparent; border: 0; cursor: pointer; padding: 10px; width: 44px; height: 44px; align-items: center; justify-content: center; }
.nc-courtyard-nav .nc-cy-hamburger span { display: block; width: 24px; height: 2px; background: #18241a; border-radius: 1px; transition: all .3s ease; }

/* Mobile drawer — slides in from the RIGHT (muncul dari kanan, dorong ke kiri).
   Overlay always rendered so the panel can transition; opacity/visibility toggle
   instead of display:none/block (display can't animate). */
.nc-cy-drawer { position: fixed; inset: 0; background: rgba(24,36,26,0.4); backdrop-filter: blur(6px); z-index: 10000; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s ease, visibility 0s linear .35s; }
.nc-cy-drawer.open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .35s ease; }
.nc-cy-drawer .nc-cy-drawer-panel { position: absolute; top: 0; bottom: 0; right: 0; left: auto; width: 82%; max-width: 360px; background: #f0ede9; padding: 24px; display: flex; flex-direction: column; box-shadow: -4px 0 24px rgba(0,0,0,0.18); transform: translateX(100%); transition: transform .35s cubic-bezier(.4, 0, .2, 1); will-change: transform; }
.nc-cy-drawer.open .nc-cy-drawer-panel { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
    .nc-cy-drawer, .nc-cy-drawer .nc-cy-drawer-panel { transition: none !important; }
}
.nc-cy-drawer .nc-cy-drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
.nc-cy-drawer .nc-cy-drawer-head img { height: 44px; }
/* Drawer brand: NASSA emblem + wordmark + tagline (mirrors the top-bar brand block) */
.nc-cy-drawer .nc-cy-drawer-brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.nc-cy-drawer .nc-cy-drawer-brand img { height: 44px; width: auto; object-fit: contain; }
.nc-cy-drawer .nc-cy-drawer-brandtext { display: inline-flex; flex-direction: column; gap: 3px; }
.nc-cy-drawer .nc-cy-drawer-wm { font-family: 'Libre Caslon Text', serif; font-size: 18px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #18241a; line-height: 1; }
.nc-cy-drawer .nc-cy-drawer-tag { font-family: 'Manrope', sans-serif; font-size: 8px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #747872; line-height: 1; white-space: nowrap; }
.nc-cy-drawer .nc-cy-drawer-close { background: transparent; border: 0; font-size: 24px; cursor: pointer; color: #434843; }
.nc-cy-drawer .nc-cy-drawer-group { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; padding: 10px; margin: 0 -10px 24px; border-bottom: 1px solid #c4c8c1; align-self: stretch; }
.nc-cy-drawer .nc-cy-drawer-group span { font-size: 16px; color: #747872; }
.nc-cy-drawer .nc-cy-drawer-group img { height: 22px; width: auto; object-fit: contain; filter: brightness(0); opacity: 0.85; }
.nc-cy-drawer .nc-cy-drawer-group:hover span { color: #725c23; }
.nc-cy-drawer .nc-cy-drawer-nav { display: flex; flex-direction: column; gap: 28px; }
.nc-cy-drawer .nc-cy-drawer-nav a { font-family: 'Libre Caslon Text', serif; font-size: 22px; font-style: italic; color: #18241a; text-decoration: none; }
.nc-cy-drawer .nc-cy-drawer-nav a.active { border-bottom: 2px solid #725c23; align-self: flex-start; padding-bottom: 4px; }
.nc-cy-drawer .nc-cy-drawer-book { display: inline-block; margin-top: 32px; background: #18241a; color: #fff; font-family: 'Manrope', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; padding: 14px 28px; border-radius: 2px; text-decoration: none; text-align: center; align-self: flex-start; }
.nc-cy-drawer .nc-cy-drawer-book:hover { background: #725c23; }
/* Drawer footer = "Direction" link (map pin + label) → Google Maps Nassa */
.nc-cy-drawer .nc-cy-drawer-foot { margin-top: auto; padding-top: 24px; border-top: 1px solid #c4c8c1; font-size: 14px; font-weight: 600; letter-spacing: 0.04em; color: #434843; display: flex; align-items: center; gap: 9px; text-decoration: none; transition: color .25s ease; }
.nc-cy-drawer a.nc-cy-drawer-foot:hover { color: #725c23; }
.nc-cy-drawer .nc-cy-drawer-foot svg { width: 17px; height: 17px; flex-shrink: 0; color: #725c23; transition: transform .25s ease; }
.nc-cy-drawer a.nc-cy-drawer-foot:hover svg { transform: translateY(-1px); }

/* Layar sangat lebar (≥1800px) — link menu di-CENTER terhadap viewport.
   Padding samping (--nc-edge) tetap 77px supaya brand & Book Now tetap sejajar
   panah slider; yang berubah hanya posisi blok link.
   Caranya: brandwrap & actions dikasih `flex: 1 1 0` (basis 0, grow sama) →
   sisa ruang dibagi rata kiri-kanan, jadi .nc-cy-links persis di tengah tanpa
   position:absolute. Kalau brand lebih lebar dari jatahnya, `min-width: 0`
   mencegah nav melebar/overflow. */
@media (min-width: 1800px) {
    .nc-courtyard-nav .nc-cy-brandwrap { flex: 1 1 0; min-width: 0; }
    .nc-courtyard-nav .nc-cy-links { flex: 0 0 auto; }
    .nc-courtyard-nav .nc-cy-actions { flex: 1 1 0; min-width: 0; justify-content: flex-end; }
}

/* Narrow desktop (1024-1499px) — matches Orion's narrow-desktop band: scaled
   logos/links so the full inline nav fits down to 1024px before collapsing to
   the burger drawer. Padding samping TIDAK di-override di sini (dan di semua
   breakpoint di bawah): --nc-edge sudah ikut lebar layar lewat 5,62vw, sama
   persis dengan panah, jadi menimpanya dengan angka px tetap akan langsung
   merusak kesejajaran itu. */
@media (min-width: 1024px) and (max-width: 1499px) {
    .nc-courtyard-nav { height: 84px; gap: 12px; }
    .nc-courtyard-nav .nc-cy-brandwrap { gap: 12px; }
    .nc-courtyard-nav .nc-cy-logo { gap: 12px; }
    .nc-courtyard-nav .nc-cy-group { padding-right: 14px; }
    .nc-courtyard-nav .nc-cy-group::after { height: 28px; }
    .nc-courtyard-nav .nc-cy-group img { height: 44px; }
    .nc-courtyard-nav .nc-cy-group .nc-cy-group-arrow { font-size: 20px; }
    .nc-courtyard-nav .nc-cy-logo img { height: 44px; }
    .nc-courtyard-nav .nc-cy-wm { font-size: 16px; letter-spacing: 0.1em; }
    .nc-courtyard-nav .nc-cy-tagline { font-size: 9px; letter-spacing: 0.12em; }
    .nc-courtyard-nav .nc-cy-links { gap: 11px; }
    .nc-courtyard-nav .nc-cy-links a { font-size: 11.5px; letter-spacing: 0.06em; }
    .nc-courtyard-nav .nc-cy-actions { gap: 16px; }
    .nc-courtyard-nav .nc-cy-book { padding: 9px 14px; font-size: 11px; letter-spacing: 0.1em; }
}
@media (max-width: 1023px) {
    /* Tablet & mobile (≤1023px, matches Orion) — hide back-arrow, show burger
       drawer, KEEP Book Now button visible inline. Layout:
       [ brand ] [ Book Now ] [ burger ] */
    .nc-courtyard-nav { height: 80px; gap: 10px; }
    .nc-courtyard-nav .nc-cy-brandwrap { order: 1; gap: 12px; flex: 1 1 auto; min-width: 0; }
    .nc-courtyard-nav .nc-cy-logo { gap: 12px; }
    .nc-courtyard-nav .nc-cy-group { display: none; }
    .nc-courtyard-nav .nc-cy-brandtext { display: inline-flex; }
    .nc-courtyard-nav .nc-cy-wm { font-size: 18px; letter-spacing: 0.12em; }
    .nc-courtyard-nav .nc-cy-tagline { font-size: 9px; letter-spacing: 0.14em; }
    .nc-courtyard-nav .nc-cy-logo img { height: 52px; }
    .nc-courtyard-nav .nc-cy-links { display: none; }
    .nc-courtyard-nav .nc-cy-actions { display: flex; order: 2; flex-shrink: 0; gap: 0; }
    .nc-courtyard-nav .nc-cy-book {
        padding: 10px 18px; font-size: 11px; letter-spacing: .14em;
        flex-shrink: 0;
    }
    .nc-courtyard-nav .nc-cy-hamburger { display: flex; order: 3; margin-left: 4px; flex-shrink: 0; }
}
@media (max-width: 600px) {
    .nc-courtyard-nav { height: 72px; gap: 8px; }
    .nc-courtyard-nav .nc-cy-brandwrap { gap: 9px; }
    .nc-courtyard-nav .nc-cy-logo { gap: 9px; }
    .nc-courtyard-nav .nc-cy-logo img { height: 44px; }
    .nc-courtyard-nav .nc-cy-wm { font-size: 15px; letter-spacing: 0.08em; }
    .nc-courtyard-nav .nc-cy-tagline { font-size: 8px; letter-spacing: 0.1em; gap: 4px; }
    .nc-courtyard-nav .nc-cy-book {
        padding: 9px 14px; font-size: 10px; letter-spacing: .12em;
    }
    .nc-courtyard-nav .nc-cy-hamburger { width: 40px; height: 40px; padding: 8px; margin-left: 2px; }
}
@media (max-width: 419px) {
    /* Very small phones — shrink book further, tighten everything. Brand
       wordmark + tagline stay visible (user request) but at minimum size. */
    .nc-courtyard-nav { gap: 6px; }
    .nc-courtyard-nav .nc-cy-brandwrap { gap: 7px; }
    .nc-courtyard-nav .nc-cy-logo { gap: 7px; }
    .nc-courtyard-nav .nc-cy-logo img { height: 38px; }
    .nc-courtyard-nav .nc-cy-wm { font-size: 13px; letter-spacing: 0.06em; }
    .nc-courtyard-nav .nc-cy-tagline { font-size: 7px; letter-spacing: 0.08em; }
    .nc-courtyard-nav .nc-cy-book { padding: 8px 11px; font-size: 10px; letter-spacing: .1em; }
}