/* ==========================================================================
   KTT GLOBAL FIXES  —  final cascade layer
   Loaded at the end of the shared CSS stack on every page by
   include/css-loader.php:
      <link rel="stylesheet" href="/css/ktt-global-fixes.css?v=...">
   Only page-level component CSS (e.g. /css/contact-snackbar.css) can load
   after it, and that file only touches body height/padding.
   ==========================================================================
   WHY THIS FILE EXISTS
   --------------------------------------------------------------------------
   1. BOX MODEL  — border-box for every element *and* pseudo-element. `*`
      never matched ::before/::after, so badges, ribbons and icon wrappers
      could add their padding on top of a declared width and push grids out
      of their column.
   2. TYPOGRAPHY — the served stack redeclared `body` 17 times with 8
      different font stacks and a base size flipping between 14px and 16px
      (global.min.css:14px -> main.min.css:1rem -> main.min.css:14px, last
      one wins). Now one stack, one 16px root, one heading scale.
   3. CONTRAST   — the template shipped a half-finished
      "@media (prefers-color-scheme: dark)" block (main.css:15093,
      global.min.css, main.min.css) that mapped
          --text-dark #333 -> #e0e0e0   --text-medium #0d0b0b -> #b0b0b0
          --white #ffffff -> #2d2d2d    --text-lighter -> never defined
      while ~90 declarations in the same stack still paint literal
      `background:#fff` surfaces. On any dark-mode device that produced
      1.32:1 body copy and 1.09:1 headings (invisible). Those tokens are
      pinned back to the light palette below, and the source blocks are
      patched in place as well.
   4. LIGHT SURFACES — .breadcrumb-item a was rgba(255,255,255,.9) on the
      #f5f5f5 .breadcrumb-section bar (1.09:1), and .btn-link was #fea116
      on white (2.20:1) which is what the FAQ accordions use.
   5. OVERFLOW   — min-width:0 for flex/grid children, wrapping for long
      strings, media capped at 100%.
   6. WHITE TEXT ON WHITE — the template paints class-less <nav> anchors white
      (1.5k breadcrumb + footer shop links), a white .btn-primary over the
      header CTA, white .text-white headings inside white cards, white badges
      on pale Bootstrap chips and light footer copy over a white contact card.
      Section 6 re-colours exactly those cases; dark bars keep their white.
   --------------------------------------------------------------------------
   Rules of engagement: stay generic, never out-specify a component rule you
   are not repairing, and do not add !important unless the rule being
   repaired already uses it. Page-specific work goes to css/page-overrides/.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BOX MODEL
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Bootstrap sizes these two with content-box arithmetic on purpose. */
.btn-close,
.carousel-indicators [data-bs-target] {
  box-sizing: content-box;
}

/* No horizontal page overflow. `overflow-x: clip` (used where supported)
   does not create a scroll container, so position:sticky keeps working. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

@supports (overflow-x: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

/* --------------------------------------------------------------------------
   2. TYPOGRAPHY — one stack, one scale
   -------------------------------------------------------------------------- */
html {
  font-size: var(--ktt-fs-root);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--ktt-font-sans);
  font-size: var(--ktt-fs-base);   /* 16px, not the template's 14px */
  font-weight: 400;
  line-height: var(--ktt-lh-base);
  color: var(--ktt-text);
  background-color: var(--ktt-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--ktt-font-heading);
  font-weight: 700;
  line-height: var(--ktt-lh-heading);
  color: var(--ktt-heading);
  overflow-wrap: break-word;
  text-wrap: balance;
}

/* Fluid but bounded scale: 28 -> 40 / 24 -> 32 / 21 -> 26 px. */
h1, .h1 { font-size: clamp(1.75rem, 1.30rem + 1.8vw, 2.5rem); }
h2, .h2 { font-size: clamp(1.5rem, 1.20rem + 1.2vw, 2rem); }
h3, .h3 { font-size: clamp(1.3125rem, 1.13rem + 0.7vw, 1.625rem); }
h4, .h4 { font-size: 1.25rem; }
h5, .h5 { font-size: 1.0625rem; }
h6, .h6 { font-size: 1rem; }

/* Hero/banner headings keep their display size — they are more specific
   selectors (.hero-section h1 etc.), this is only a safety net for the
   mobile range where the template previously dropped to 1.8rem/20px. */
@media (max-width: 576px) {
  h1, .h1 { font-size: 1.75rem; }
  h2, .h2 { font-size: 1.5rem; }
  h3, .h3 { font-size: 1.25rem; }
}

/* Dark surfaces own their text colour. The template hard-codes
   h1..h6{color:#0f172b}, so a bare <h2> inside a `.text-white` / `.bg-dark` /
   `.cta-section` band rendered dark-on-dark instead of inheriting the band's
   white. These headings inherit again; the enumerated surfaces cover every
   dark container the storefront uses. `:where()` keeps the specificity at
   0,0,1 so component rules still take precedence. */
:where([class*="text-white"], .bg-dark, .bg-primary, .bg-brand, .table-dark,
       .hero-section, .inner-banner, .cta-section,
       .main-footer, .main-header)
  :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
  color: inherit;
}

/* Form controls + buttons use the same stack as body copy. */
button,
input,
select,
textarea,
optgroup {
  font-family: var(--ktt-font-sans);
  line-height: inherit;
}

/* --------------------------------------------------------------------------
   3. CONTRAST — authoritative light palette
   Declared unconditionally and last, so it wins over the template's
   @media (prefers-color-scheme: dark) token block (equal specificity,
   later in source order). The site is a light-only design.
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;   /* native controls / scrollbars stay light */

  --text-dark: var(--ktt-text);
  --text-darker: var(--ktt-heading);
  --text-medium: var(--ktt-text-strong);
  --text-light: var(--ktt-text-muted);
  --text-lighter: var(--ktt-heading);   /* was referenced, never defined */

  --text-white: #ffffff;
  --white: #ffffff;
  --lighter: #fafafa;
  --light: #f8f9fa;
  --black: #000000;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: light;
  }
}

/* --------------------------------------------------------------------------
   4. TEXT COLOURS ON LIGHT SURFACES
   -------------------------------------------------------------------------- */

/* Links: #1a73e8 (4.04:1) and #fea116 (2.20:1) were both used as link
   colours. One accessible link colour now. */
a {
  color: var(--ktt-link);
}

a:hover,
a:focus-visible {
  color: var(--ktt-link-hover);
}

/* ...but a bare link — or a .btn-link used as a text toggle — inside a dark
   surface must stay light, hover included. */
:where([class*="text-white"], .bg-dark, .bg-primary, .bg-brand, .table-dark,
       .hero-section, .inner-banner, .cta-section, .main-header, .main-footer)
  :is(a:not([class]), .btn-link),
:where([class*="text-white"], .bg-dark, .bg-primary, .bg-brand, .table-dark,
       .hero-section, .inner-banner, .cta-section, .main-header, .main-footer)
  :is(a:not([class]), .btn-link):is(:hover, :focus-visible) {
  color: var(--ktt-on-dark);
}

/* .btn-link was #fea116 on white (2.20:1) — that is every FAQ accordion
   question on the package pages. */
.btn-link,
.btn-link:not(:disabled):not(.disabled) {
  color: var(--ktt-link);
}

.btn-link:hover,
.btn-link:focus-visible {
  color: var(--ktt-link-hover);
}

/* Breadcrumbs: the template styled every crumb as white text for use on a
   photo banner, but .breadcrumb-section paints a light #f5f5f5 bar. White
   on #f5f5f5 is 1.09:1 — invisible. Default to dark, re-light only inside
   the dark banners. */
.breadcrumb-section .breadcrumb,
.breadcrumb {
  background-color: transparent;
  border-color: transparent;
}

.breadcrumb-item a {
  color: var(--ktt-link);
}

.breadcrumb-item a:hover,
.breadcrumb-item a:focus-visible {
  color: var(--ktt-link-hover);
  text-decoration: underline;
}

.breadcrumb-item.active,
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--ktt-text-muted);
}

/* Dark banners keep the original light treatment. */
.hero-section .breadcrumb,
.inner-banner .breadcrumb,
.cta-section .breadcrumb,
.page-header .breadcrumb,
.banner-wrapper .breadcrumb,
.banner-wrapper2 .breadcrumb {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.2);
}

.hero-section .breadcrumb-item a,
.inner-banner .breadcrumb-item a,
.cta-section .breadcrumb-item a,
.page-header .breadcrumb-item a,
.banner-wrapper .breadcrumb-item a,
.banner-wrapper2 .breadcrumb-item a {
  color: var(--ktt-on-dark);
}

.hero-section .breadcrumb-item a:hover,
.inner-banner .breadcrumb-item a:hover,
.cta-section .breadcrumb-item a:hover,
.page-header .breadcrumb-item a:hover,
.banner-wrapper .breadcrumb-item a:hover,
.banner-wrapper2 .breadcrumb-item a:hover {
  color: var(--ktt-on-dark);
  text-decoration: underline;
}

.hero-section .breadcrumb-item.active,
.inner-banner .breadcrumb-item.active,
.page-header .breadcrumb-item.active,
.banner-wrapper .breadcrumb-item.active,
.banner-wrapper2 .breadcrumb-item.active,
.hero-section .breadcrumb-item + .breadcrumb-item::before,
.inner-banner .breadcrumb-item + .breadcrumb-item::before,
.page-header .breadcrumb-item + .breadcrumb-item::before,
.banner-wrapper .breadcrumb-item + .breadcrumb-item::before,
.banner-wrapper2 .breadcrumb-item + .breadcrumb-item::before {
  color: var(--ktt-on-dark-muted);
}

/* A section that paints a photo but no scrim leaves white copy on a random
   photo (or on white when the image 404s). Guarantee a dark base. */
.hero-section,
.inner-banner {
  background-color: #0f172b;
}

/* --------------------------------------------------------------------------
   5. GRID / OVERFLOW GUARDS
   Flex and grid children default to min-width:auto, so one long word, URL or
   nested table makes the whole row wider than its container. That is the
   usual reason "containers overlap" on this site.
   -------------------------------------------------------------------------- */
.container,
.container-fluid {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.container {
  padding-left: 15px;
  padding-right: 15px;
}

.row > *,
[class*="col-"],
.d-flex > *,
.card-body,
.list-group-item,
.media-body {
  min-width: 0;
}

/* Bootstrap rows use negative gutter margins; adding them to a row that is
   not inside a padded .container pushes content past the viewport edge. */
.container > .row,
.container-fluid > .row {
  margin-left: calc(var(--bs-gutter-x, 1.5rem) / -2);
  margin-right: calc(var(--bs-gutter-x, 1.5rem) / -2);
}

/* Long unbreakable strings (package names, URLs, emails, phone numbers). */
li,
td,
th,
dd,
figcaption {
  overflow-wrap: break-word;
}

/* Media can never widen a column. */
img,
svg,
video,
canvas,
iframe,
embed,
object {
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   6. HARD-CODED WHITE TEXT ON LIGHT SURFACES
   Every rule below repairs a literal `color:#fff` / `color:white` that the
   template applies to copy sitting on a white or near-white surface. Cases
   that live on a genuinely dark surface (navbar, footer band, hero photo,
   coloured CTA buttons) are deliberately untouched.
   -------------------------------------------------------------------------- */

/* 6.1 CLASS-LESS <nav> LINKS
   main.css and tour.css style the dark header nav with a bare `nav a` rule.
   The same selector therefore paints the breadcrumb trail and the shop links
   in include/footer.php ("Hotels In Kashmir · Hotels In Srinagar · …") white,
   and those sit on the page background: 1.5k invisible links on 85 pages.
   `nav a:not([class])` is one class heavier than `nav a`, so it wins against
   every copy of the template rule, including the inline <style> blocks in
   individual pages, without !important. */
nav a:not([class]) {
  color: var(--ktt-link);
}

nav a:not([class]):hover,
nav a:not([class]):focus-visible {
  color: var(--ktt-link-hover);
  text-decoration: underline;
}

/* …except inside the dark bars, where the original light treatment is right.
   .ktt-hero / .city-hub-header / .valley-hero-banner carry their own
   breadcrumb <nav> on top of a photo scrim; .ktt-contact-bar (the fixed
   Call / Book / WhatsApp bar) and the standalone page <header>/<footer>
   blocks are navy elements with class-less anchors of their own.
   `:is()` (not `:where()`) so the guard outweighs the bare `nav a` rule for
   anchors that are direct children of the bar as well. */
:is(.main-header, .main-footer, .hero-section, .inner-banner, .cta-section,
    .page-header, .banner-wrapper, .banner-wrapper2, .bg-dark, .bg-brand,
    .ktt-hero, .city-hub-header, .valley-hero-banner, .ktt-contact-bar,
    .booking-bar, header, footer, [class*="text-white"])
  nav a:not([class]),
:is(.main-header, .main-footer, .hero-section, .inner-banner, .cta-section,
    .page-header, .banner-wrapper, .banner-wrapper2, .bg-dark, .bg-brand,
    .ktt-hero, .city-hub-header, .valley-hero-banner, .ktt-contact-bar,
    .booking-bar, header, footer, [class*="text-white"])
  a:not([class]) {
  color: var(--ktt-on-dark);
}

/* 6.2 HEADER "CONTACT" CTA
   .btn-contact paints a blue gradient in header.css, but tour.css re-declares
   `.btn-primary{background:#fff}` later in the stack and the anchor also
   carries .navbar-nav .nav-link (color:#fff !important), so the tour pages
   rendered a white label on a white button. Keep the CTA a solid blue. */
.main-header .btn-contact,
.navbar .btn-contact {
  background: #0a58ca;
  background-image: linear-gradient(135deg, #0b5ed7, #0a58ca);
  color: var(--ktt-on-dark);
}

/* 6.3 BOOTSTRAP SEMANTIC BADGES ON LIGHT CHIPS
   Bootstrap paints every .badge white and then offers light backgrounds among
   the semantic set: .bg-info (#0dcaf0, 1.96:1), .bg-warning (#ffc107, 1.6:1)
   and .bg-light. Those chips are opaque and pale, so the label has to be dark.
   Chips that are genuinely dark (bg-success, bg-danger, bg-dark, bg-primary)
   and the theme's translucent glass chips keep their white label. */
.badge.bg-info,
.badge.bg-warning,
.badge.bg-light,
.badge.bg-white,
.badge.text-bg-info,
.badge.text-bg-warning,
.badge.text-bg-light {
  color: var(--ktt-heading);
}

/* 6.4 .table-dark NEVER PAINTS ITS CELLS
   Bootstrap 5.3 sets `--bs-table-bg:#0f172b` on .table-dark and lets the
   `.table > :not(caption) > * > *` rule paint each cell with it. That second
   rule is missing from this theme's bundled copy (main.css only ships the
   custom properties), so `<table class="table table-dark">` and
   `<thead class="table-dark text-white">` keep white text on the page/Card
   background — 1:1. Paint the surface here. */
.table-dark {
  background-color: #0f172b;
  color: var(--ktt-on-dark);
}

.table-dark > :not(caption) > * > * {
  background-color: var(--bs-table-bg, #0f172b);
  color: var(--ktt-on-dark);
}

/* 6.5 .text-white INSIDE A LIGHT CONTAINER
   The template sprinkles .text-white on headings that live inside white
   .card / .card-header / .bg-light blocks (Bootstrap's .text-white is
   !important, hence the !important repair here). */
:is(.card, .card-header, .card-body, .bg-light, .bg-white, .bg-info,
    .bg-warning, .table-light, .list-group-item)
  :is(.text-white, .text-white-50) {
  color: var(--ktt-heading) !important;
}

/* An element that carries its own dark chip colour keeps white type even when
   it sits inside a light container (e.g. `<span class="badge bg-brand
   text-white">` inside a .bg-light section). */
:is(.text-white, .text-white-50):is(.bg-dark, .bg-brand, .bg-primary,
                                    .bg-secondary, .bg-black, .bg-success,
                                    .bg-danger) {
  color: var(--ktt-on-dark) !important;
}

/* A dark container further up always wins (same (0,2,0) weight, declared
   last on purpose — `:where()` here would weigh (0,1,0) and lose). */
:is(.bg-dark, .bg-brand, .bg-primary, .main-footer, .main-header,
    .hero-section, .inner-banner, .cta-section)
  :is(.text-white, .text-white-50) {
  color: var(--ktt-on-dark) !important;
}

/* 6.6 AMBER HERO CHIP — declared after the dark-container override above so
   that a badge inside `.hero-section` does not get the white label back.
   .hero-badge paints a light amber gradient (style.css) and already asks for
   #333, but several pages also put .text-white on the element, which is an
   !important class in main.css and wins: white on #ffb74d is 1.73:1.
   Scoped to the pages that opt into white so the translucent .hero-badge chips
   over dark hero photos keep their light label. */
.hero-badge:is(.text-white, [class*="text-white"]),
.hero-badge :is(.text-white, [class*="text-white"]) {
  color: var(--ktt-heading) !important;
}

/* 6.7 DARK BANDS OWN THEIR TEXT COLOUR
   The earlier contrast pass gave .hero-section / .inner-banner a #0f172b base
   so white hero copy never lands on a missing photo. That base also has to own
   the text colour: main.css paints every <p> #3d4757 and every heading
   #0f172b, so on 42 banner pages the <h1> inherited dark body copy and
   disappeared into the now-dark band (1.19:1). With the colour declared on the
   band, its headings and paragraphs inherit the light treatment again. */
.hero-section,
.inner-banner,
.cta-section,
.page-header,
.banner-wrapper,
.banner-wrapper2 {
  color: var(--ktt-on-dark);
}

:where(.hero-section, .inner-banner, .cta-section, .page-header,
       .banner-wrapper, .banner-wrapper2, .main-footer)
  :is(p, li, dd, dt, blockquote) {
  color: inherit;
}

/* 6.8 BADGE WITH NO CHIP COLOUR ON A WHITE PACKAGE CARD
   `<span class="badge">Most Popular</span>` inside .package-card (white,
   style.css) has no background of its own, so Bootstrap's white label lands
   straight on the card: 1:1. Only badges without a `bg-*` chip are touched, so
   real chips keep their own colour treatment. */
.package-card .badge:not([class*="bg-"]) {
  color: var(--ktt-heading);
}

/* --------------------------------------------------------------------------
   7. PRINT — keep the accessible palette on paper
   -------------------------------------------------------------------------- */
@media print {
  body {
    color: #000000;
    background: #ffffff;
  }

  a[href] {
    text-decoration: underline;
  }
}