/* =========================================================
   GOOSEBERRY — GLOBAL TOKENS
   Pengganti Elementor Site Settings > Global Colors/Fonts.
   Paste seluruh isi file ini ke:
   Appearance → Customize → Additional CSS
   (atau plugin code snippet, taruh di section paling atas)
   ========================================================= */

:root{
  /* --- Colours — brief §4 --- */
  --gb-noir:            #0F0D0A; /* Primary — dark section grounds */
  --gb-noir-deep:       #0B0907; /* Secondary — footer only */
  --gb-bone:            #EFE9DC; /* Text on noir; brand mark */
  --gb-champagne:       #C9AA76; /* Accent — labels, rules, drop cap, primary btn on noir */
  --gb-champagne-light: #D8BB88; /* Italic headline phrases on noir */
  --gb-bone-bright:     #F6F1E7; /* Headlines on noir */
  --gb-paper:           #F7F3EA; /* Light section grounds */
  --gb-ink:             #1A1713; /* Headlines on paper */
  --gb-ink-soft:        #4A443E; /* Body copy on paper */
  --gb-ink-muted:       #5A5249; /* Standfirsts / small caps on paper */
  --gb-ink-muted-2:     #6B6258; /* Menu row English label on paper */
  --gb-gold-deep:       #9A7B4F; /* Labels on paper */
  --gb-gold-italic:     #8A6D3A; /* Italic headline phrases + menu names on paper */
  --gb-gold-rule:       #A0855C; /* 56px rules on paper */

  /* --- Hairlines — brief §4 --- */
  --gb-line-noir-section:  rgba(201,170,118,.30);
  --gb-line-noir-internal: rgba(201,170,118,.20);
  --gb-line-noir-footer:   rgba(239,233,220,.12);
  --gb-line-paper-section: rgba(154,123,79,.32);
  --gb-line-paper-internal:rgba(154,123,79,.22);
  --gb-wash-paper-hover:   rgba(154,123,79,.08);

  /* --- Fonts — brief §4 "Global Font Family Rules" --- */
  --gb-font-display:    'Cormorant Garamond', Georgia, serif; /* headlines, w300 */
  --gb-font-body:       'Cormorant Garamond', Georgia, serif; /* section body copy, w400 */
  --gb-font-label:      'Jost', 'Helvetica Neue', Arial, sans-serif; /* eyebrows/nav/buttons/captions */
  --gb-font-standfirst: 'EB Garamond', Georgia, serif; /* hero + reservation standfirsts, italic */

  /* --- Motion — brief §8 --- */
  --gb-ease:            cubic-bezier(.22,.61,.36,1);
  --gb-duration-reveal: 1.2s;
  --gb-duration-header: 0.6s;
  --gb-duration-fast:   0.4s;
  --gb-duration-btn:    0.5s;

  /* --- Layout — brief §5 --- */
  --gb-width-margin-col: 1280px;
  --gb-width-menu-list:  960px;
  --gb-width-visit:      1100px;
  --gb-pad-desktop:      60px;
  --gb-pad-tablet:       40px;
  --gb-pad-mobile:       24px;
}

/* =========================================================
   SCOPED RESET
   Sengaja di-scope ke .gb-home, BUKAN elemen global (*),
   supaya tidak bentrok dengan admin bar / plugin lain di situs.
   Set class "gb-home" di CSS Classes container Elementor
   paling luar pada page ini.
   ========================================================= */
.gb-home,
.gb-home *{
  box-sizing: border-box;
}
.gb-home{
  background: var(--gb-noir);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Root container cuma butuh direction:column (lihat build-guide) — min-height/
     justify-content/align-items TIDAK boleh disetel di sini (itu punya .gb-hero).
     Kalau kepencet/kesetel gak sengaja di panel Layout Elementor, baris ini
     menetralisir supaya section pertama tidak "terdorong" ke bawah viewport. */
  min-height: 0 !important;
}
.gb-home img{ max-width:100%; display:block; }
.gb-home a{ color:inherit; text-decoration:none; }

/* =========================================================
   FIX: tema punya rule "h1,h2,h3,h4{font-family:...}" yang
   nempel LANGSUNG di tag heading asli. Elementor menaruh CSS
   Class dari Advanced tab di DIV PEMBUNGKUS widget, bukan di
   tag <h1>-<h4> itu sendiri — jadi rule tema menang lawan
   warisan dari class gb-* di parent (rule eksplisit di tag itu
   sendiri selalu menang lawan inheritance, berapa pun specificity-nya).
   Baris ini menetralisir rule tema tsb khusus di dalam .gb-home,
   supaya font-family/size/dst tetap ikut class gb-* masing-masing.
   ========================================================= */
.gb-home .elementor-heading-title{
  font-family: inherit !important;
  font-weight: inherit !important;
  font-style: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
  color: inherit !important;
  margin: 0 !important;
}

/* =========================================================
   FIX #2: Elementor punya rule global ".elementor-widget-text-editor"
   yang nyetel font-family/font-weight/color LANGSUNG di div
   pembungkus widget — dan div itu adalah elemen YANG SAMA yang
   diberi class gb-* dari Advanced tab (bukan parent/child seperti
   kasus heading di atas). Jadi ini bukan soal inheritance, tapi
   dua rule sama-sama nempel di elemen yang sama dengan specificity
   sama (1 class) — pemenangnya cuma soal urutan file, gampang
   berubah kapan saja. Makanya tiap utility/section class di bawah
   yang ditempel ke widget Text Editor WAJIB pakai !important di
   font-family/font-weight/color-nya (lihat .gb-eyebrow, .gb-body,
   .gb-standfirst di bawah, dan gb-hero__kicker/__standfirst/__hours,
   gb-menu__standfirst, gb-reserve__standfirst di gooseberry-sections.css).
   Class yang cuma menata child <p> lewat descendant selector
   (mis. .gb-about-cols p, .gb-guest__body p) TIDAK perlu !important
   — itu sudah otomatis menang karena rule eksplisit di tag <p> itu
   sendiri selalu ngalahin warisan dari div pembungkusnya.
   ========================================================= */

/* =========================================================
   FIX #3: kalau Container Elementor disetel Content Width =
   "Boxed" (default Elementor tiap bikin Container baru), isi
   asli (kicker/heading/dst) dibungkus SATU div tambahan
   ".e-con-inner" yang TIDAK punya class gb-* kita — jadi
   align-items/justify-content/text-align yang kita taruh di
   .gb-hero dkk cuma ngatur div LUAR (yang isinya cuma satu
   .e-con-inner itu doang), bukan konten aslinya. Elementor
   juga nyetel align-items/justify-content/text-align sendiri
   di .e-con-inner lewat CSS var yang default-nya "normal"/
   "initial" kalau kita gak isi panel Layout — makanya konten
   kelihatan rata kiri/atas padahal .gb-hero udah bilang center.
   Baris ini maksa .e-con-inner ikut nilai align-items/justify-
   content/text-align dari div pembungkus gb-* di atasnya,
   apapun Content Width yang kepilih (Boxed atau Full Width).
   ========================================================= */
.gb-home .e-con-inner{
  align-items: inherit !important;
  justify-content: inherit !important;
  text-align: inherit !important;
}

/* =========================================================
   TYPOGRAPHY UTILITIES
   Tempel nama class ini di tab Advanced → CSS Classes
   pada widget Heading/Text Editor Elementor terkait.
   ========================================================= */

/* Eyebrow / micro-label — Jost uppercase, wide tracking */
.gb-eyebrow{
  font-family: var(--gb-font-label) !important;
  font-weight: 300 !important;
  font-size: clamp(9px, 1vw, 13px);
  letter-spacing: .4em;
  text-transform: uppercase;
  padding-left: .4em; /* optical centring per brief */
}
.gb-eyebrow--on-noir{ color: var(--gb-champagne) !important; }
.gb-eyebrow--on-paper{ color: var(--gb-gold-deep) !important; }

/* Section headline — Cormorant light, closing phrase gold italic (wrap it in <em> or a span) */
.gb-h2{
  font-family: var(--gb-font-display);
  font-weight: 300;
  font-size: clamp(34px, 4.6vw, 76px);
  line-height: 1.14;
  letter-spacing: -0.005em;
}
.gb-h2--on-noir{ color: var(--gb-bone-bright); }
.gb-h2--on-paper{ color: var(--gb-ink); }
.gb-h2 em, .gb-h2 .gb-accent{
  font-style: italic;
  font-weight: 300;
}
.gb-h2--on-noir em, .gb-h2--on-noir .gb-accent{ color: var(--gb-champagne-light); }
.gb-h2--on-paper em, .gb-h2--on-paper .gb-accent{ color: var(--gb-gold-italic); }

/* Body copy — story sections (Intro / About / Guest Experience) */
.gb-body{
  font-family: var(--gb-font-body) !important;
  font-weight: 400 !important;
  font-size: 20px;
  line-height: 1.75;
  max-width: 48ch;
}
.gb-body--on-noir{ color: rgba(239,233,220,.72) !important; }
.gb-body--on-paper{ color: var(--gb-ink-soft) !important; }

/* Standfirst — EB Garamond italic (hero tagline, reservation line) */
.gb-standfirst{
  font-family: var(--gb-font-standfirst) !important;
  font-style: italic;
  font-size: clamp(21px, 1.9vw, 26px);
  line-height: 1.6;
  max-width: 62ch;
}

/* Hairline rule — 56px above margin-column label; 44px below centred labels */
.gb-rule{
  height: 1px;
  background: var(--gb-champagne);
}
.gb-rule--56{ width:56px; }
.gb-rule--44{ width:44px; }
.gb-rule--on-paper{ background: var(--gb-gold-rule); }

/* =========================================================
   BUTTONS
   Tempel gb-btn + gb-btn--primary/--secondary di CSS Classes
   widget Button. CATATAN: sama seperti heading/text-editor,
   Elementor naruh CSS Class di DIV PEMBUNGKUS widget, bukan di
   tag <a class="elementor-button"> yang sebenarnya dirender.
   Karena background/padding/border TIDAK ikut-ikutan lewat
   inheritance (beda dengan font-family/color), rule di bawah
   sengaja nembak langsung ke descendant .elementor-button
   dengan !important, supaya style kita beneran nge-cat tombol
   aslinya, bukan cuma div pembungkus yang gak keliatan.
   ========================================================= */
.gb-btn .elementor-button{
  display: inline-block !important;
  font-family: var(--gb-font-label) !important;
  font-weight: 300 !important;
  font-size: 11px !important;
  letter-spacing: .3em !important;
  text-transform: uppercase !important;
  padding: 17px 42px !important;
  border: 1px solid transparent !important;
  border-radius: 0 !important;
  transition: background var(--gb-duration-btn) ease, color var(--gb-duration-btn) ease, border-color var(--gb-duration-btn) ease !important;
}
.gb-btn--primary .elementor-button{
  background: var(--gb-champagne) !important;
  color: var(--gb-noir) !important;
  border-color: var(--gb-champagne) !important;
}
.gb-btn--primary:hover .elementor-button{
  background: transparent !important;
  color: var(--gb-champagne) !important;
}
.gb-btn--secondary .elementor-button{
  background: transparent !important;
  color: var(--gb-bone) !important;
  border-color: rgba(239,233,220,.45) !important;
}
.gb-btn--secondary:hover .elementor-button{
  background: var(--gb-bone) !important;
  color: var(--gb-noir) !important;
}

/* =========================================================
   SECTION GROUND WRAPPERS
   Tempel di container Elementor tiap section sesuai §3 page order.
   ========================================================= */
.gb-ground--noir{ background: var(--gb-noir); color: var(--gb-bone); }
.gb-ground--noir-deep{ background: var(--gb-noir-deep); color: var(--gb-bone); }
.gb-ground--paper{ background: var(--gb-paper); color: var(--gb-ink); }