/*
 * Site-wide premium refinement layer
 * Visual-only overrides: no layout structure, routes, forms, or API contracts.
 */

:root {
  --lux-navy-1000: #020d1d;
  --lux-navy-950: #04162d;
  --lux-navy-900: #07284d;
  --lux-navy-800: #0b3d73;
  --lux-gold-600: #bd7b0a;
  --lux-gold-500: #dc9c20;
  --lux-gold-400: #f0bd56;
  --lux-ivory: #fffbf3;
  --lux-canvas: #f5f8fc;
  --lux-card: rgba(255, 255, 255, 0.94);
  --lux-line: rgba(7, 40, 77, 0.13);
  --lux-muted: #63758b;
  --lux-radius-sm: 14px;
  --lux-radius-md: 20px;
  --lux-radius-lg: 28px;
  --lux-shadow-xs: 0 2px 8px rgba(3, 22, 48, 0.05);
  --lux-shadow-sm: 0 10px 28px rgba(3, 22, 48, 0.08);
  --lux-shadow-md: 0 20px 55px rgba(3, 22, 48, 0.11);
  --lux-shadow-lg: 0 30px 80px rgba(2, 14, 32, 0.16);
  --lux-focus: 0 0 0 4px rgba(220, 156, 32, 0.22);

  /* Refine the existing token set without breaking component contracts. */
  --navy: var(--lux-navy-900);
  --royal: var(--lux-navy-800);
  --gold: var(--lux-gold-500);
  --gold-soft: var(--lux-gold-400);
  --navy-950: var(--lux-navy-950);
  --navy-900: var(--lux-navy-900);
  --navy-800: var(--lux-navy-800);
  --gold-500: var(--lux-gold-500);
  --gold-400: var(--lux-gold-400);
  --surface: var(--lux-canvas);
  --surface-soft: var(--lux-canvas);
  --muted: var(--lux-muted);
  --text-muted: var(--lux-muted);
  --line: var(--lux-line);
  --border: var(--lux-line);
  --radius-lg: var(--lux-radius-lg);
  --radius-md: var(--lux-radius-md);
  --shadow: var(--lux-shadow-md);
  --shadow-sm: var(--lux-shadow-sm);
}

html[data-theme="dark"] {
  --lux-card: rgba(9, 28, 52, 0.92);
  --lux-line: rgba(192, 211, 234, 0.15);
  --lux-muted: #a3b4c9;
  --white: #07182d;
  --surface: #0b2038;
  --surface-soft: #0b2038;
  --ink: #f5f8fc;
  --text: #f5f8fc;
  --muted: var(--lux-muted);
  --text-muted: var(--lux-muted);
  --line: var(--lux-line);
  --border: var(--lux-line);
  --shadow: 0 24px 65px rgba(0, 0, 0, 0.42);
  --shadow-sm: 0 12px 34px rgba(0, 0, 0, 0.3);
}

::selection {
  background: rgba(220, 156, 32, 0.3);
  color: var(--ink);
}

body {
  background:
    radial-gradient(circle at 8% 2%, rgba(220, 156, 32, 0.045), transparent 24rem),
    var(--white);
  letter-spacing: -0.005em;
}

main {
  isolation: isolate;
}

:is(h1, h2, h3, h4) {
  text-wrap: balance;
}

:is(p, li) {
  text-wrap: pretty;
}

html:not([lang="km"]) :is(.section-heading h2, .page-header h1, .legal h1) {
  letter-spacing: -0.035em;
}

.container {
  width: min(1200px, calc(100% - clamp(32px, 6vw, 72px)));
}

/* Header and navigation --------------------------------------------------- */
.site-header {
  background: color-mix(in srgb, var(--white) 90%, transparent);
  border-bottom-color: var(--lux-line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), 0 8px 32px rgba(2, 16, 36, 0.035);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  backdrop-filter: blur(22px) saturate(145%);
}

.site-header.scrolled {
  border-bottom-color: rgba(220, 156, 32, 0.22);
  box-shadow: 0 14px 44px rgba(2, 16, 36, 0.12);
}

.brand img {
  filter: drop-shadow(0 5px 10px rgba(2, 18, 40, 0.1));
}

.nav-link,
.nav-link.dropdown-toggle {
  color: color-mix(in srgb, var(--ink) 78%, var(--muted));
  position: relative;
}

.nav-link::after,
.nav-link.dropdown-toggle::after {
  background: linear-gradient(90deg, var(--lux-gold-600), var(--lux-gold-400));
  border-radius: 999px;
  bottom: 5px;
  content: "";
  height: 2px;
  left: 14px;
  position: absolute;
  right: 14px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 220ms ease;
}

.nav-link:hover::after,
.nav-link.active::after,
.nav-link.dropdown-toggle:hover::after {
  transform: scaleX(1);
}

.nav-link:hover,
.nav-link.active,
.nav-link.dropdown-toggle:hover {
  background: color-mix(in srgb, var(--gold) 8%, transparent);
  color: var(--ink);
}

.dropdown-menu,
.language-menu {
  background: color-mix(in srgb, var(--white) 95%, transparent);
  border-color: var(--lux-line);
  box-shadow: var(--lux-shadow-md);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
}

.dropdown-item,
.language-option {
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.dropdown-item:hover,
.language-option:hover {
  background: color-mix(in srgb, var(--gold) 10%, var(--surface));
  transform: translateX(2px);
}

.theme-toggle,
.language-toggle,
.menu-toggle {
  background: color-mix(in srgb, var(--white) 72%, transparent);
  border-color: var(--lux-line);
  box-shadow: var(--lux-shadow-xs);
}

.mobile-panel {
  background: color-mix(in srgb, var(--white) 96%, transparent);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}

/* Buttons and keyboard states ------------------------------------------- */
:is(.btn, .btn-primary, .btn-secondary, .gold-btn, .gold-fill-btn) {
  box-shadow: 0 10px 24px rgba(189, 123, 10, 0.16);
  letter-spacing: 0.005em;
}

.btn:not(.outline):not(.light):not(.secondary):not(.btn-outline-white),
.btn-primary,
.gold-btn,
.gold-fill-btn {
  background: linear-gradient(135deg, var(--lux-gold-400), var(--lux-gold-500) 55%, #cb8610);
  border-color: rgba(255, 255, 255, 0.32);
  color: var(--lux-navy-950);
}

.btn.secondary {
  background: linear-gradient(135deg, var(--lux-navy-800), var(--lux-navy-950));
}

:is(.btn, .btn-primary, .btn-secondary):focus-visible,
:is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--lux-gold-500);
  outline-offset: 3px;
}

/* Shared surfaces and cards --------------------------------------------- */
:is(.card,
  .form-card,
  .trust-item,
  .visa-feature-card,
  .featured-itinerary,
  .inbound-home-preview-card,
  .private-tour-preview-card,
  .featured-tour,
  .panel,
  .day,
  .article-card,
  .dest-card,
  .package-card,
  .why-card,
  .inbound-tour-card,
  .inbound-style-card,
  .inbound-benefit-grid article,
  .inbound-review-card,
  .private-service-card,
  .private-package-card,
  .private-advantage-card,
  .private-testimonial-card) {
  border-color: var(--lux-line);
  box-shadow: var(--lux-shadow-sm);
}

:is(.card,
  .visa-feature-card,
  .featured-itinerary,
  .inbound-home-preview-card,
  .private-tour-preview-card,
  .featured-tour,
  .article-card,
  .dest-card,
  .package-card,
  .why-card,
  .inbound-tour-card,
  .inbound-style-card,
  .inbound-benefit-grid article,
  .private-service-card,
  .private-package-card,
  .private-advantage-card) {
  transition: border-color 280ms ease, box-shadow 280ms ease, transform 280ms ease;
}

@media (hover: hover) and (pointer: fine) {

  :is(.card,
    .visa-feature-card,
    .featured-itinerary,
    .inbound-home-preview-card,
    .private-tour-preview-card,
    .featured-tour,
    .article-card,
    .dest-card,
    .package-card,
    .why-card,
    .inbound-tour-card,
    .inbound-style-card,
    .inbound-benefit-grid article,
    .private-service-card,
    .private-package-card,
    .private-advantage-card):hover {
    border-color: rgba(220, 156, 32, 0.42);
    box-shadow: var(--lux-shadow-md);
    transform: translateY(-5px);
  }
}

/* Hero and editorial imagery -------------------------------------------- */
:is(.hero, .domestic-hero, .private-tour-hero, .inbound-hero) {
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}

/* Keep the two homepage tour showcases refined, perfectly balanced, with complete button clearance. */
@media (min-width: 801px) {
  body[data-page="home"] .featured-itinerary {
    grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr);
    min-height: 500px;
    height: auto;
    align-items: stretch;
  }

  body[data-page="home"] .featured-itinerary__media {
    min-height: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
  }

  body[data-page="home"] .featured-itinerary__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  body[data-page="home"] .featured-itinerary__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: auto;
    padding: clamp(24px, 2.6vw, 34px) clamp(26px, 3vw, 38px) clamp(28px, 3vw, 36px);
    box-sizing: border-box;
  }

  body[data-page="home"] .featured-itinerary__location {
    line-height: 1.45;
    margin-bottom: 6px;
  }

  body[data-page="home"] .featured-itinerary__content h3 {
    font-size: clamp(1.35rem, 1.75vw, 1.9rem);
    line-height: 1.32;
    margin-bottom: 12px;
  }

  body[data-page="home"] .featured-itinerary__list {
    gap: 6px;
    line-height: 1.5;
    margin-bottom: 12px;
  }

  body[data-page="home"] .featured-itinerary__price {
    margin: auto 0 14px;
    padding-top: 14px;
  }

  body[data-page="home"] .featured-itinerary__actions {
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 4px;
  }
}

/* Keep the two outbound tour cards balanced and completely visible on desktop. */
@media (min-width: 993px) {
  body[data-page="outbound-tours"] .featured-tour {
    min-height: 500px;
    height: auto;
    display: flex;
    align-items: stretch;
  }

  body[data-page="outbound-tours"] .featured-tour__media {
    flex-basis: 54%;
    min-height: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
  }

  body[data-page="outbound-tours"] .featured-tour__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  body[data-page="outbound-tours"] .featured-tour__content {
    flex-basis: 46%;
    min-height: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(24px, 2.6vw, 34px) clamp(26px, 3vw, 38px) clamp(28px, 3vw, 36px);
    box-sizing: border-box;
  }

  body[data-page="outbound-tours"] .featured-tour__location {
    margin-bottom: 6px;
    line-height: 1.45;
  }

  body[data-page="outbound-tours"] .featured-tour__content h3 {
    font-size: clamp(1.35rem, 1.75vw, 1.9rem);
    line-height: 1.32;
    margin-bottom: 12px;
  }

  body[data-page="outbound-tours"] .featured-tour__list {
    gap: 6px;
    line-height: 1.5;
    margin-bottom: 12px;
  }

  body[data-page="outbound-tours"] .featured-tour__meta {
    padding-top: 14px;
    margin-top: auto;
  }

  body[data-page="outbound-tours"] .featured-tour__actions {
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 4px;
  }
}

.hero::after {
  background:
    radial-gradient(circle at 78% 20%, rgba(220, 156, 32, 0.12), transparent 28%),
    linear-gradient(105deg, rgba(2, 13, 29, 0.98) 0%, rgba(5, 41, 82, 0.91) 48%, rgba(5, 41, 82, 0.42) 78%, rgba(2, 13, 29, 0.16) 100%);
}

.domestic-hero-overlay,
.private-tour-hero-overlay {
  background:
    radial-gradient(circle at 78% 18%, rgba(220, 156, 32, 0.13), transparent 28%),
    linear-gradient(90deg, rgba(2, 13, 29, 0.97), rgba(5, 41, 82, 0.79) 52%, rgba(2, 13, 29, 0.2));
}

:is(.featured-itinerary__media,
  .inbound-home-preview-media,
  .private-tour-preview-media,
  .featured-tour__media,
  .article-media,
  .dest-card-media,
  .package-media,
  .private-service-media,
  .private-package-media,
  .story-media) img {
  transition: filter 450ms ease, transform 650ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

/* Keep both outbound cover images slightly darker so they sit comfortably
   against the navy page background while preserving image detail. */
body[data-page="outbound-tours"] :is(.featured-tour__media, .featured-itinerary__media) img {
  filter: brightness(0.86) contrast(1.04);
}

body[data-page="outbound-tours"] :is(.featured-tour, .featured-itinerary):hover img {
  filter: brightness(0.9) contrast(1.04);
}

@media (hover: hover) and (pointer: fine) {

  :is(.featured-itinerary,
    .inbound-home-preview-card,
    .private-tour-preview-card,
    .featured-tour,
    .article-card,
    .dest-card,
    .package-card,
    .private-service-card,
    .private-package-card,
    .domestic-story-card):hover img {
    filter: saturate(1.06) contrast(1.025);
    transform: scale(1.045);
  }
}

/* Blog and journal ------------------------------------------------------- */
.article-card {
  background: var(--lux-card);
  border-radius: var(--lux-radius-md);
  position: relative;
}

.article-card::after {
  background: linear-gradient(90deg, transparent, var(--lux-gold-500), transparent);
  bottom: 0;
  content: "";
  height: 2px;
  left: 16%;
  opacity: 0;
  position: absolute;
  right: 16%;
  transform: scaleX(0.5);
  transition: opacity 240ms ease, transform 240ms ease;
}

.article-card:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

.article-media {
  background: var(--lux-navy-950);
  overflow: hidden;
}

.article-media::after {
  background: linear-gradient(180deg, transparent 55%, rgba(2, 13, 29, 0.38));
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.article-cat {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: rgba(255, 247, 229, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 6px 18px rgba(2, 13, 29, 0.18);
  color: var(--lux-navy-950);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  z-index: 1;
}

.article-body {
  padding: 23px;
}

.article-time {
  color: var(--lux-gold-600);
  font-weight: 700;
}

.article-title {
  color: var(--ink);
  font-size: clamp(1.08rem, 1.4vw, 1.25rem);
}

.article-excerpt {
  line-height: 1.7;
}

.article-link {
  align-items: center;
  color: var(--navy);
  display: inline-flex;
  min-height: 38px;
  width: fit-content;
}

.article-link:hover {
  color: var(--lux-gold-600);
}

/* Forms and dialogs ------------------------------------------------------ */
.form-card {
  background:
    radial-gradient(circle at 100% 0%, rgba(220, 156, 32, 0.07), transparent 24%),
    var(--lux-card);
  border-radius: var(--lux-radius-lg);
}

.field,
.phone-input-wrap {
  background: color-mix(in srgb, var(--white) 95%, var(--surface));
  border-color: var(--lux-line);
  border-radius: var(--lux-radius-sm);
  box-shadow: inset 0 1px 2px rgba(3, 22, 48, 0.025);
}

.field:hover,
.phone-input-wrap:hover {
  border-color: rgba(220, 156, 32, 0.36);
}

.field:focus,
.phone-input-wrap:focus-within {
  border-color: var(--lux-gold-500);
  box-shadow: var(--lux-focus);
}

.field::placeholder {
  color: color-mix(in srgb, var(--muted) 72%, transparent);
}

.inquiry-modal::backdrop,
.private-tour-details-modal::backdrop {
  background: rgba(1, 8, 20, 0.78);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
}

.inquiry-modal-shell,
.private-tour-details-modal-content {
  border-color: rgba(220, 156, 32, 0.24);
  border-radius: var(--lux-radius-lg);
  box-shadow: var(--lux-shadow-lg);
}

.inquiry-modal-header {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 94%, transparent), color-mix(in srgb, var(--gold) 7%, var(--surface)));
}

/* Footer ----------------------------------------------------------------- */
.site-footer {
  background:
    radial-gradient(circle at 12% 0%, rgba(220, 156, 32, 0.12), transparent 26rem),
    radial-gradient(circle at 90% 90%, rgba(25, 88, 151, 0.2), transparent 30rem),
    linear-gradient(145deg, var(--lux-navy-1000), var(--lux-navy-950));
  border-top: 1px solid rgba(220, 156, 32, 0.24);
  position: relative;
}

.site-footer::before {
  background: linear-gradient(90deg, transparent, var(--lux-gold-500), transparent);
  content: "";
  height: 1px;
  left: 12%;
  opacity: 0.72;
  position: absolute;
  right: 12%;
  top: 0;
}

.footer-col h3 {
  color: var(--lux-gold-400);
}

.footer-col a {
  transition: color 180ms ease, transform 180ms ease;
}

.footer-col a:hover {
  color: #fff4d8;
  transform: translateX(2px);
}

/* Dark theme refinements ------------------------------------------------- */
html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 10% 0%, rgba(220, 156, 32, 0.06), transparent 24rem),
    #061426;
}

html[data-theme="dark"] .site-header {
  background: rgba(5, 18, 37, 0.91);
  border-bottom-color: rgba(192, 211, 234, 0.16);
}

html[data-theme="dark"] :is(.dropdown-menu, .language-menu, .mobile-panel) {
  background: rgba(7, 24, 45, 0.96);
}

html[data-theme="dark"] :is(.article-card, .form-card) {
  background:
    radial-gradient(circle at 100% 0%, rgba(220, 156, 32, 0.07), transparent 24%),
    var(--lux-card);
}

html[data-theme="dark"] :is(.article-title, .article-link) {
  color: #f5f8fc;
}

html[data-theme="dark"] .field,
html[data-theme="dark"] .phone-input-wrap {
  background: rgba(4, 17, 34, 0.72);
}

/* Responsive polish without changing component layout ------------------- */
@media (max-width: 1050px) {

  .nav-link::after,
  .nav-link.dropdown-toggle::after {
    display: none;
  }
}

@media (max-width: 620px) {
  .container {
    width: min(1200px, calc(100% - 32px));
  }

  :is(.card, .article-card, .form-card, .panel, .day) {
    border-radius: 20px;
  }

  .article-body {
    padding: 21px 19px;
  }

  .site-footer {
    padding-top: 52px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .nav-link::after,
  .nav-link.dropdown-toggle::after,
  .article-card::after {
    transition: none;
  }
}