/* Black-and-white theme PREVIEW (Ruksana, 11 Nov 2026; branch preview/bw-theme). White dominant, black second.
   Loaded last in <head>; every rule is under html[data-theme="bw"] so it wins over the older rules without !important.
   The colour map in build/bw_theme.py already turned sand/olive/brown into white/grey/black; this file adds what a map cannot:
   the black panel and black cards in the Packages sections, and buttons that sit on dark panels. Colours only. */
html[data-theme="bw"]{
  --rf-sand:#FFFFFF; --rf-sand-hi:#F4F4F4; --rf-cream:#FFFFFF; --rf-brown:#111111; --rf-brown-2:#0A0A0A;
  --rf-olive:#111111; --rf-olive-hi:#5E5E5E; --rf-sage:#D9D9D9; --rf-olive-deep:#111111; --rf-olive-deeper:#2B2B2B;
  --rf-line:rgba(0,0,0,.14); --rf-line-2:rgba(0,0,0,.24);
  --bw-panel:#0B0B0B; --bw-panel-2:#161616; --bw-on:#FFFFFF; --bw-on-2:#D0D0D0; --bw-on-line:rgba(255,255,255,.28);
}

/* ---------- Home: "Tour packages are mostly loved" = black panel, white text (same black as the service cards) ---------- */
html[data-theme="bw"] .pk-fav{background:var(--bw-panel);color:var(--bw-on);border-radius:28px;padding:clamp(34px,5vw,60px) clamp(18px,4vw,52px) clamp(30px,4vw,48px)}
html[data-theme="bw"] .pk-fav .pill{color:var(--bw-on-2)}
html[data-theme="bw"] .pk-fav h2{color:var(--bw-on)}
html[data-theme="bw"] .pk-fav h2 em{color:var(--bw-on)}
html[data-theme="bw"] .pk-fav-lead{color:var(--bw-on-2)}
html[data-theme="bw"] .pk-fav-link{color:var(--bw-on);border-color:var(--bw-on)}
html[data-theme="bw"] .pk-fav-link:hover{color:var(--bw-on-2);border-color:var(--bw-on-2)}
html[data-theme="bw"] .pk-fav .pk-search{background:var(--bw-panel-2);border-color:var(--bw-on-line)}
html[data-theme="bw"] .pk-fav .pk-search svg,html[data-theme="bw"] .pk-fav .pk-search input{color:var(--bw-on)}
html[data-theme="bw"] .pk-fav .pk-search input::placeholder{color:#B5B5B5}
html[data-theme="bw"] .pk-fav .pk-clear{background:var(--bw-on);color:#111}
html[data-theme="bw"] .pk-chips::before{color:var(--bw-on-2)}
html[data-theme="bw"] .pk-chip{color:var(--bw-on);border-color:var(--bw-on-line)}
html[data-theme="bw"] .pk-chip:hover{border-color:var(--bw-on)}
html[data-theme="bw"] .pk-chip.on{background:var(--bw-on);color:#111;border-color:var(--bw-on)}
html[data-theme="bw"] .pk-chip:focus-visible,html[data-theme="bw"] .pk-fav .pk-clear:focus-visible{outline-color:var(--bw-on)}
html[data-theme="bw"] .pk-count{color:var(--bw-on-2)}
html[data-theme="bw"] .pk-none{background:var(--bw-panel-2);border-color:var(--bw-on-line);color:var(--bw-on)}
html[data-theme="bw"] #published .pk-none .pk-btn{background:var(--bw-on);color:#111}

/* ---------- Package cards (home and /packages/, destination lists): photo on top, black body, white text ---------- */
html[data-theme="bw"] .tr-card{background:var(--bw-panel);border-color:var(--bw-panel);color:var(--bw-on)}
html[data-theme="bw"] .tr-card:hover{box-shadow:0 14px 34px rgba(0,0,0,.22)}
html[data-theme="bw"] .tr-card .tr-body h3{color:var(--bw-on)}
html[data-theme="bw"] .tr-card .tr-body p,html[data-theme="bw"] .tr-card .tr-meta{color:var(--bw-on-2)}
html[data-theme="bw"] .tr-card .tr-foot b{color:var(--bw-on)}
html[data-theme="bw"] .tr-card .tr-foot small{color:#BDBDBD}
html[data-theme="bw"] #published .tr-card{background:var(--bw-panel);border-color:var(--bw-panel)}
html[data-theme="bw"] #published .tr-card:hover{border-color:var(--bw-panel);box-shadow:0 18px 40px rgba(0,0,0,.22)}
html[data-theme="bw"] #published .tr-meta span{background:#FFFFFF;color:#111}
html[data-theme="bw"] #published .tr-body h3,html[data-theme="bw"] #published .tr-foot b{color:var(--bw-on)}
html[data-theme="bw"] #published .tr-body p,html[data-theme="bw"] #published .tr-foot small{color:var(--bw-on-2)}
html[data-theme="bw"] #published .tr-foot{border-top-color:var(--bw-on-line)}
html[data-theme="bw"] #published .tr-foot::after{color:var(--bw-on);border-color:var(--bw-on)}
html[data-theme="bw"] #published .tr-card:hover .tr-foot::after{background:var(--bw-on);color:#111}
html[data-theme="bw"] #published .tr-card:focus-visible,html[data-theme="bw"] .tr-card:focus-visible{outline-color:#111}
html[data-theme="bw"] #published .tr-more-h{color:#111}

/* ---------- Page backgrounds: white everywhere (cards and slabs keep the light grey #F4F4F4) ---------- */
html[data-theme="bw"] body.dx:not(.as){background:#FFFFFF}   /* /about/ (body.as) is a dark story page by design and stays dark */
html[data-theme="bw"] body.as{--sage:#FFFFFF}
html[data-theme="bw"] body.pp{--paper:#F4F4F4}
@media (max-width:760px){
  html[data-theme="bw"] .pk-fav{padding:32px 14px 28px;border-radius:22px}
  html[data-theme="bw"] .pk-fav .pill{gap:10px;letter-spacing:.16em}
  html[data-theme="bw"] .pk-fav .pill::before,html[data-theme="bw"] .pk-fav .pill::after{width:22px}
}

/* ---------- Not a colour: existing bug on every package page (also on 5196). The day text sits in a nested <li> that inherited
   the day row's two-column grid (80px + rest), so it was squeezed into an 80px column, one or two words per line.
   Ruksana asked that all Packages content be readable; this one line lets the day text use the full width. Drop it if only colours may change. ---------- */
html[data-theme="bw"] .dx-days li li{display:block}

/* ---------- Plain text links on inner pages were the browser's default blue (also on 5196): they now take the text colour
   around them (black on white, white on the black panels) and keep their underline. ---------- */
html[data-theme="bw"] body.dx a:not([class]){color:inherit;text-decoration:underline;text-underline-offset:3px}
html[data-theme="bw"] body.dx a:not([class]):hover{text-decoration-thickness:2px}