/* Client brand layer: loaded after the demo CSS, never in ?reference=1. Colours: brand-colours.css (generated). */
:root { --safar-heading-font: "Cinzel", serif; --safar-heading-font-weight: 500; --safar-body-font: "Montserrat", sans-serif; }
:lang(vi) { --safar-heading-font: "Noto Serif Display", serif; --safar-heading-font-weight: 400; }
.gsb-brand { display: block; padding: 8px 12px; line-height: 0; }
.logo-wrapper .gsb-brand img { display: block; width: 200px; max-width: none; height: auto; }
.gsb-logo-colour, .responsive-header-top .gsb-logo-white, .safar-header-sticky .gsb-logo-white { display: none !important; }
.responsive-header-top .gsb-logo-colour, .safar-header-sticky .gsb-logo-colour { display: block !important; }
@media (max-width: 767px) { .logo-wrapper .gsb-brand img { width: 180px; } }
.safar-footer .gsb-logo, .ap-site-footer .gsb-logo { display: block; width: 260px; max-width: 100%; height: auto; }
.safar-services-5-item li { letter-spacing: -.02em; }
/* Gold submit buttons (search, room, contact form) beat the demo's own colour rules with !important. */
body.gsb-home :is(input.button, input.wpcf7-submit):not(:hover) { color: #0F2D28 !important; }
/* Gold (#C89B62) backgrounds take Deep green text: white on gold is only 2.5:1. Hover states keep the demo (dark fill, white text). */
.safar-button-default:not(:hover) :is(.safar-button-text, .safar-button-text-solid, .safar-button-icon),
input.button:not(:hover), .safar-mphb-widget-load-more-btn:not(:hover), .db-fw-external-nav:not(:hover),
.elementor-element-821589b .elementor-heading-title { color: #0F2D28; }
#masthead.safar-header-sticky .safar-navbar-nav > li > a:not(:hover), #masthead.safar-header-sticky .safar-header-right-button:not(:hover) { color: #0F2D28; }
@media (max-width: 767px) { .safar-counterup-wrap { min-height: 46px; } }
.gsb-lang { display: flex; align-items: center; gap: 14px; margin: 0; padding: 0; list-style: none; font: 500 13px/1 var(--safar-body-font); letter-spacing: .08em; }
.gsb-lang a { color: inherit; opacity: .65; font-size: 13px; padding: 0; border: 0; }
.gsb-lang a::before, .gsb-lang a::after { display: none; }
.gsb-lang a:hover, .gsb-lang a[aria-current] { opacity: 1; }
.safar-header-top-content > .gsb-lang { position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: #fff; }
.safar-header-right .gsb-lang { margin-right: 10px; color: #0F2D28; }
/* Eight menu items from the FINAL sitemap plus the switcher: tighter spacing keeps the sticky bar on one row down to 1200px. */
.safar-header-area ul.safar-navbar-nav > li > a { padding-right: 4px; font-size: 14px; }
.safar-header-area ul.safar-navbar-nav > li.menu-item-has-children > a { padding-right: 20px; }
.safar-mobile-menu-nav-wrapper > .gsb-lang { margin: 16px 20px 0; color: #0F2D28; }
.safar-mobile-menu .gsb-lang li { border: 0; }
.safar-mobile-menu .gsb-lang a { font-size: 13px; padding: 0; }
/* Homepage photos from the client: keep the demo frames, crop with object-fit. */
.gsb-home img.gsb-photo { object-fit: cover; }
.gsb-home .elementor-element-e503da2 img.gsb-photo, .gsb-home .elementor-element-b36dd9d img.gsb-photo { width: 236px; height: 274px; }
.gsb-home .elementor-element-7af3c5d img.gsb-photo { width: 100%; aspect-ratio: 560 / 650; height: auto; }
.gsb-home .e-n-tabs-content img.gsb-photo { width: 100%; aspect-ratio: 750 / 1078; height: auto; }
/* Discover Da Nang: without the demo's three counters the text column is centred against the photo (no effect once the columns stack). */
.gsb-home .elementor-element.elementor-element-55bb0c3 { --justify-content: center; }
/* Hero badge: the client emblem in the demo's round ivory badge (same place and size; the demo's ring of English text is gone). */
.gsb-home .elementor-element-b29ba6c img.gsb-emblem { box-sizing: border-box; width: 210px; height: 210px; padding: 52px; border: 1px solid #C89B62; border-radius: 50%; background: #F8F5ED; object-fit: contain; }
@media (max-width: 767px) { .gsb-home .elementor-element-b29ba6c img.gsb-emblem { width: 180px; height: 180px; padding: 45px; } }
.gsb-home .safar-accommodation-20-item .thumb img { width: 100%; aspect-ratio: 83 / 60; object-fit: cover; }
.gsb-home .safar-accommodation-20-item .content:last-child { padding-bottom: 0; border-bottom: 0; } /* no price row: no rule under the specs */
/* Gold (#C89B62) text on ivory/white is only 2.5:1: small gold labels and rating stars take Deep green; large ornaments and rules stay gold. */
.gsb-home :is(.elementor-element-19b73b5, .elementor-element-94349cf, .elementor-element-678531a) p.elementor-heading-title,
.gsb-home .safar-accommodation__rating, .gsb-home .mphbr-rating-stars, .gsb-home .mphbr-star { color: #0F2D28; }
body.gsb-home .elementor-element.elementor-element-eff8103 .elementor-heading-title { color: #0F2D28; } /* intro text on the gold card */
/* Inner-page banners carry a client photo under the transparent header: Deep green veil (rooms, accommodation) and a green-to-white fade on About. */
.gsb-home .safar-page-title-area.safar-breadcrumb-has-bg:before { background: rgba(15, 45, 40, .5); }
body.gsb-home .elementor-14713 .elementor-element-9e1ec63.safar-page-title-bg::before { background: linear-gradient(180deg, rgba(15, 45, 40, .65) 0%, rgba(15, 45, 40, .4) 25%, rgba(255, 255, 255, .7) 55%, #fff 100%); }
/* Transparent header over photo banners: white menu text on a Deep green band that fades into the banner keeps it at 4.5:1 or more on light photos. */
body.gsb-home.safar-header-transparent-enable #masthead:not(.safar-header-sticky)::before { content: ""; position: absolute; inset: 0 0 -60px; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(15, 45, 40, .7) 0%, rgba(15, 45, 40, .6) calc(100% - 60px), rgba(15, 45, 40, 0) 100%); }
body.gsb-home.safar-header-transparent-enable #masthead:not(.safar-header-sticky) .safar-navbar-nav > li > a { color: #fff; }
@media (max-width: 767px) { body.gsb-home.safar-header-transparent-enable #masthead:not(.safar-header-sticky)::before { inset: 0; background: linear-gradient(180deg, rgba(15, 45, 40, .6), rgba(15, 45, 40, 0)); } } /* logo only: a short fade that stays off the About pill */
/* About banner: clear the two-row header, and let the pill (hotel name) fit its text. */
@media (min-width: 768px) { body.gsb-home .elementor-14713 .elementor-element-9e1ec63.safar-page-title-bg { --padding-top: 215px; } }
body.gsb-home .elementor-14713 .elementor-element-6123241 { --width: fit-content; }
.gsb-home .elementor-element-8b8d907 .elementor-heading-title { white-space: nowrap; }
/* Facilities, dining, wellness and contact banners: the demo's brown gradient becomes a Deep green veil. */
body.gsb-home :is(.elementor-19098, .elementor-18306, .elementor-18913, .elementor-20706, .elementor-18189) .elementor-element.safar-page-title-bg::before { background: linear-gradient(90deg, rgba(15, 45, 40, .85) 15%, rgba(15, 45, 40, .6) 55%, rgba(15, 45, 40, .35) 100%); }
/* Facility rows: the demo's dark buttons keep white text (the gold-button rule above does not apply). */
.gsb-home :is(.elementor-element-dba57e0, .elementor-element-c4cfb15) .safar-button:not(:hover) :is(.safar-button-text, .safar-button-icon) { color: #fff; }
.gsb-home .elementor-element.gsb-facility-title, .gsb-facility-title { text-align: center; margin: 0 0 60px; font-size: 48px; line-height: 1.1; }
@media (max-width: 767px) { .gsb-facility-title { font-size: 32px; margin-bottom: 40px; } }
/* Facility photos keep the demo frames and are cropped to them. */
.gsb-home .elementor-element-0dbf7f5 img { width: 100%; aspect-ratio: 610 / 916; object-fit: cover; }
.gsb-home .elementor-element-b1c34a3 img { width: 100%; aspect-ratio: 550 / 320; object-fit: cover; }
.gsb-home .safar-services-style-11 .thumb img { width: 100%; aspect-ratio: 595 / 474; object-fit: cover; }
/* News and Offers: plain Deep green banner (no photo in the FINAL file), empty-state line. */
.gsb-home .safar-page-title-area.gsb-plain-banner { background-color: #0F2D28; }
.gsb-empty { margin: 0; padding: 60px 0; text-align: center; font-size: 20px; }
/* Single offer: the 1920x700 band of the demo, and a plain gold Book button (the demo's Elementor button needs its widget CSS). */
.gsb-home .safar-blog-single-top-content .post-thumbnail img { width: 100%; aspect-ratio: 1920 / 700; object-fit: cover; }
.gsb-home .safar-single-post .post-thumbnail img { object-fit: cover; }
.gsb-offer-book { display: inline-block; margin-top: 10px; padding: 16px 40px; background: #C89B62; color: #0F2D28; font-weight: 500; letter-spacing: .04em; text-decoration: none; }
.gsb-offer-book:hover { background: #0F2D28; color: #fff; }
/* At exactly 1199px the demo's header-5 desktop rules (min-width: 1199px) and its mobile rules (max-width: 1199px) both apply: the logo row is hidden
   while the desktop menu shows (the live demo has the same gap). Give that one width the 1200px layout. */
@media (min-width: 1199px) and (max-width: 1199.98px) {
  body.gsb-home .theme-header-5:not(.safar-header-sticky) .safar-header-top-wrapper { display: flex; }
  body.gsb-home .theme-header-5:not(.safar-header-sticky) .safar-theme-nav-responsive { display: none; }
  body.gsb-home .theme-header-5:not(.safar-header-sticky) .safar-default-header-nav { display: block; }
}
/* Open mobile menu: one logo on every page. The demo child theme hides the second brand only on its homepage (body class boutique-hotels). */
.gsb-home .safar-mobile-menu-visible .navbar-brand:not(.page-header-5-sticky) { display: none; }