/* =========================================================================
   Asian Star Travel — Site-wide Design Shell
   Global tokens, typography, header chrome, page-title bands and footer for
   every PUBLIC page that is NOT the redesigned homepage.

   SCOPE: every rule is guarded by `body.ast-site` (added by
   inc/ast-site-design.php to all frontend pages except body.ast-home-redesign)
   or `body:not(.ast-home-redesign)`. Nothing here loads or matches in wp-admin.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Design tokens (mirror the homepage module 1:1)
   ---------------------------------------------------------------------- */
:root {
	--ast-navy: #0B1F4B;
	--ast-navy-deep: #081634;
	--ast-navy-70: rgba(11, 31, 75, .70);
	--ast-gold: #D4AF37;
	--ast-gold-ink: #9A7B1E;
	--ast-cream: #F8F6F0;
	--ast-white: #FFFFFF;
	--ast-ink: #1F2433;      /* primary body text on light */
	--ast-body: #54596A;     /* secondary body text */
	--ast-hair: #ECE7DA;     /* warm hairline */
	--ast-line: #E7E9EF;     /* cool hairline */
	--ast-radius: 18px;
	--ast-radius-sm: 12px;
	--ast-maxw: 1280px;
	--ast-maxw-read: 760px;
	--ast-shadow-sm: 0 6px 18px rgba(11, 31, 75, .08);
	--ast-shadow-md: 0 18px 40px rgba(11, 31, 75, .14);
	--ast-shadow-nav: 0 22px 48px rgba(8, 22, 52, .22);
	--ast-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
	--ast-sans: 'Be Vietnam Pro', var(--SVN-Poppins-regular, 'Segoe UI'), system-ui, -apple-system, sans-serif;
	--ast-focus: 0 0 0 3px rgba(212, 175, 55, .55);

	/* AST-MOBILE-CONTACT-CTA-REDESIGN — floating contact widget / booking-bar
	   positioning contract (functions.php wiget_contact(); consumed there and
	   by ast-product-page.css's sticky booking CTA). --ast-mobile-booking-bar-
	   height is deliberately NOT defined here — it has no static value, only a
	   per-page runtime one published by ast-product-page.js, so every consumer
	   reads it as var(--ast-mobile-booking-bar-height, 0px) and pages/scroll
	   states without a visible booking bar fall back to 0 automatically. */
	--ast-contact-safe-bottom: 16px;
	--ast-contact-booking-gap: 12px;
	/* AST-CV-UI-AND-MEAL-COPY-FIX1 — the desktop/tablet inset of the floating
	   contact column from the LEFT viewport edge. The column moved off the right
	   edge because that is where the sticky booking card lives on every product
	   page (.product-info-wrapper, ast-product-page.css B7), and a fixed
	   4-bubble stack sitting on top of the price and the Book Now button is the
	   single most expensive overlap on the site. The left gutter carries no
	   fixed furniture at any width: Flatsome's back-to-top is bottom-RIGHT. */
	--ast-contact-desktop-inset: 12px;
	--ast-z-contact-widget: 40;
	--ast-z-booking-cta: 50;
	--ast-z-contact-backdrop: 60;
	--ast-z-contact-sheet: 70;
}

/* -------------------------------------------------------------------------
   2. Base typography (interior public pages only)
   ---------------------------------------------------------------------- */
body.ast-site {
	font-family: var(--ast-sans);
	color: var(--ast-ink);
	-webkit-font-smoothing: antialiased;
}
body.ast-site p,
body.ast-site li,
body.ast-site .entry-content {
	color: var(--ast-body);
}
body.ast-site a { transition: color .2s ease; }

/* Editorial display type for the key interior titles (kept off UI chrome). */
body.ast-site h1.entry-title,
body.ast-site h1.page-title,
body.ast-site .page-title-inner h1,
body.ast-site .entry-content h1,
body.ast-site .entry-content h2,
body.ast-site .product_title,
body.ast-site .shop-page-title .page-title-inner,
body.ast-site .archive-title,
body.ast-site .ast-band__title {
	font-family: var(--ast-display);
	font-weight: 700;
	letter-spacing: -.005em;
	color: var(--ast-navy);
	line-height: 1.1;
}

/* Accessible, brand-consistent keyboard focus everywhere on interior pages. */
body.ast-site a:focus-visible,
body.ast-site button:focus-visible,
body.ast-site input:focus-visible,
body.ast-site select:focus-visible,
body.ast-site textarea:focus-visible,
body.ast-site [tabindex]:focus-visible {
	outline: none;
	box-shadow: var(--ast-focus);
	border-radius: 6px;
}

/* -------------------------------------------------------------------------
   3. Header chrome — solid, readable navy on interior pages
   The redesigned homepage renders its own header, so #header here is only
   ever the Flatsome interior header.
   ---------------------------------------------------------------------- */
body.ast-site #header .header-main,
body.ast-site #header .header-bg-color,
body.ast-site #header.stuck .header-main {
	background-color: var(--ast-navy) !important;
	transition: background-color .3s ease, box-shadow .3s ease;
}
body.ast-site #header {
	box-shadow: none;
}
body.ast-site #header.stuck .header-main,
body.ast-site #header .header-main.stuck {
	box-shadow: 0 2px 22px rgba(8, 22, 52, .28) !important;
}
/* Hairline that grounds the header against light interior content. */
body.ast-site #header .header-main {
	border-bottom: 1px solid rgba(212, 175, 55, .16);
}

/* Logo breathing room */
body.ast-site #header #logo img { transition: opacity .2s ease; }

/* Top-level nav links: white → gold, deliberate weight. */
body.ast-site .header-nav-main .nav-top-link,
body.ast-site .header-nav a.nav-top-link {
	color: rgba(255, 255, 255, .92);
	font-family: var(--ast-sans);
	font-weight: 500;
	font-size: 15px;
	letter-spacing: .02em;
}
body.ast-site .header-nav-main > li > a.nav-top-link:hover,
body.ast-site .header-nav-main > li.active > a.nav-top-link,
body.ast-site .header-nav-main > li.current-menu-item > a.nav-top-link,
body.ast-site .header-nav-main > li:hover > a.nav-top-link {
	color: var(--ast-gold);
}
/* Gold underline indicator on the active / hovered top item. */
body.ast-site .header-nav-main > li > a.nav-top-link::after {
	content: "";
	position: absolute;
	left: 12px; right: 12px; bottom: 6px;
	height: 2px;
	background: var(--ast-gold);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .25s ease;
	opacity: .95;
}
body.ast-site .header-nav-main > li:hover > a.nav-top-link::after,
body.ast-site .header-nav-main > li.active > a.nav-top-link::after,
body.ast-site .header-nav-main > li.current-menu-item > a.nav-top-link::after {
	transform: scaleX(1);
}
/* Keep the caret aligned with the label. */
body.ast-site .header-nav-main .nav-top-link .icon-angle-down { opacity: .7; margin-left: 4px; }

/* -------------------------------------------------------------------------
   4. Interior page-title band (Flatsome title bar → editorial band)
   Only styles the band WHEN Flatsome renders one; UX-Builder pages without a
   title bar are unaffected.
   ---------------------------------------------------------------------- */
body.ast-site .page-title,
body.ast-site .shop-page-title,
body.ast-site .category-page-title {
	background-color: var(--ast-cream) !important;
	border-bottom: 1px solid var(--ast-hair);
}
body.ast-site .page-title .page-title-inner {
	min-height: 0;
	padding-top: 46px;
	padding-bottom: 46px;
	background: transparent !important;
}
body.ast-site .page-title-inner .entry-title,
body.ast-site .page-title-inner h1 {
	font-family: var(--ast-display);
	font-weight: 700;
	color: var(--ast-navy);
	font-size: clamp(30px, 4vw, 46px);
	margin: 0;
}
/* Breadcrumbs — quiet, gold active crumb. */
body.ast-site .breadcrumbs {
	font-family: var(--ast-sans);
	font-size: 12.5px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ast-body);
}
body.ast-site .breadcrumbs a { color: var(--ast-body); }
body.ast-site .breadcrumbs a:hover { color: var(--ast-gold-ink); }
body.ast-site .breadcrumbs .active { color: var(--ast-gold-ink); }

/* Reusable interior hero band (available for template overrides). */
body.ast-site .ast-band {
	background: var(--ast-navy);
	color: #fff;
	padding: clamp(40px, 6vw, 72px) 0;
	position: relative;
	overflow: hidden;
}
body.ast-site .ast-band__inner { max-width: var(--ast-maxw); margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px); position: relative; }
body.ast-site .ast-band__eyebrow { color: var(--ast-gold); font-size: 12.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; margin: 0 0 12px; }
body.ast-site .ast-band__title { color: #fff; font-size: clamp(32px, 4.6vw, 52px); margin: 0; }

/* -------------------------------------------------------------------------
   5. Generic content buttons & links (accent, non-destructive)
   ---------------------------------------------------------------------- */
body.ast-site .entry-content a:not(.button):not(.ast-btn) {
	color: var(--ast-gold-ink);
	text-underline-offset: 2px;
}
body.ast-site .entry-content a:not(.button):not(.ast-btn):hover { color: var(--ast-navy); }

/* Reusable premium pill button (opt-in class for template overrides). */
body.ast-site .ast-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	min-height: 48px; padding: 0 28px; border-radius: 999px;
	font-family: var(--ast-sans); font-weight: 600; font-size: 15px;
	line-height: 1; text-decoration: none; cursor: pointer;
	border: 1.5px solid transparent;
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
body.ast-site .ast-btn--gold { background: var(--ast-gold); color: var(--ast-navy-deep); box-shadow: 0 8px 22px rgba(212, 175, 55, .28); }
body.ast-site .ast-btn--gold:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(212, 175, 55, .4); color: var(--ast-navy-deep); }
body.ast-site .ast-btn--navy { background: var(--ast-navy); color: #fff; }
body.ast-site .ast-btn--navy:hover { background: var(--ast-navy-deep); transform: translateY(-2px); color: #fff; }
body.ast-site .ast-btn--ghost { background: transparent; color: var(--ast-navy); border-color: var(--ast-navy); }
body.ast-site .ast-btn--ghost:hover { background: var(--ast-navy); color: #fff; }

/* -------------------------------------------------------------------------
   6. Footer — deep-navy premium treatment (interior #footer)
   Content is preserved; only the presentation is upgraded. Overrides the
   legacy black footer from style.css.
   ---------------------------------------------------------------------- */
body.ast-site #footer.footer-wrapper {
	background: var(--ast-navy-deep);
	background-image: linear-gradient(180deg, var(--ast-navy) 0%, var(--ast-navy-deep) 100%);
	color: rgba(255, 255, 255, .74);
}
/* Retained !important: a Flatsome `.row-ft` rule otherwise forces 50px here
   (verified — removing !important drops the intended 56px band padding). */
body.ast-site #footer .row-ft { padding-top: 56px !important; }
body.ast-site #footer .ux-menu-link__text {
	color: rgba(255, 255, 255, .74);
	font-family: var(--ast-sans);
	font-size: 14px;
	transition: color .2s ease;
}
body.ast-site #footer .ux-menu-link:hover .ux-menu-link__text { color: var(--ast-gold); }
body.ast-site #footer h3,
body.ast-site #footer .widget-title {
	color: #fff;
	font-family: var(--ast-sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}
/* Social pills — gold hover ring, matches homepage footer.
   Retained !important: Flatsome's `.social-icons a.is-outline` forces a solid
   white border that otherwise wins here (verified — removing it reverts the
   translucent border and gold hover ring). */
body.ast-site #footer .social-icons a {
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .22) !important;
	transition: border-color .2s ease, color .2s ease, background .2s ease;
}
body.ast-site #footer .social-icons a:hover {
	color: var(--ast-gold);
	border-color: var(--ast-gold) !important;
	background: rgba(212, 175, 55, .08);
}
body.ast-site #footer .copyright-text p { color: rgba(255, 255, 255, .7); }
body.ast-site #footer .ast-footer-license { font-size: 12px; line-height: 1.5; margin-top: 4px; color: rgba(255, 255, 255, .55); }
body.ast-site #footer a:hover { color: var(--ast-gold); }
body.ast-site #footer .copyright-footer {
	display: none;
}

/* Back-to-top → gold on navy. */
body.ast-site #top-link,
body.ast-site .back-to-top {
	background-color: var(--ast-gold) !important;
	color: var(--ast-navy-deep) !important;
	border-color: var(--ast-gold) !important;
}

/* -------------------------------------------------------------------------
   7. Global guards — no horizontal overflow, comfortable content width
   ---------------------------------------------------------------------- */
body.ast-site { overflow-x: hidden; }
body.ast-site .container { max-width: var(--ast-maxw); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	body.ast-site *,
	body.ast-site *::before,
	body.ast-site *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* -------------------------------------------------------------------------
   8. Floating contact widget — mobile overlap fix (#button-contact-vr)
   SUPERSEDED by AST-MOBILE-CONTACT-CTA-REDESIGN. The always-visible 4-bubble
   mobile stack this section used to compact (Messenger / Zalo / Phone /
   WhatsApp, all persistently visible) no longer exists: the widget's own
   inline footer <style> (functions.php wiget_contact()) now renders only
   WhatsApp + a compact Contact trigger by default at <=767px, with
   Zalo/Messenger/Call moved into an on-demand bottom sheet — and positions
   the whole persistent column against the real booking-bar height via
   --ast-mobile-booking-bar-height, not a static offset. Re-introducing a
   competing `html #button-contact-vr` rule here would out-specificity that
   contract (extra `html` type selector beats a bare `#button-contact-vr`),
   so this section is intentionally empty rather than edited in place.
   ---------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   8b. Non-home footer legal safe-area — clear the persistent mobile widget
   column. At <=767px the widget is now just WhatsApp (56px) + the Contact
   trigger (44px) stacked vertically with an 8px gap, anchored right:6px (see
   #button-contact-vr in functions.php), so its footprint is narrower than
   the old 4-bubble stack this reservation was originally sized for. The
   copyright/licence text is reserved inline-end space so it flows clear of
   the widget's column instead of the widget being moved, hidden or resized —
   same safe-area principle as ast-contact-form.css's .ast-contact__formcard
   reservation. 72px = 56px widest control + 6px right offset + 10px buffer.
   ---------------------------------------------------------------------- */
@media (max-width: 767px) {
	body.ast-site #footer .copyright-text,
	body.ast-site #footer .ast-footer-license { padding-right: 72px; }
}