/* =========================================================
   BLUE SKY — SHARED THEME LAYER
   Loaded after tailwind.css by bs_tailwind_css(), so every
   trip, hub, about and contact page picks it up at once.
   1. Retunes the compiled brand utilities to the petrol/teal/
      gold palette used by the homepage, header and footer.
   2. Modernises the shared trip template (hero, factsheet strip,
      tabs, itinerary, cards, booking sidebar, forms).
   3. Supplies the dark-mode counterparts.
   ========================================================= */

/* ---------- 1. Palette retune (same specificity, later wins) ---------- */
.bg-brand-900{background-color:rgb(15 46 53/var(--tw-bg-opacity,1))}
.bg-brand-900\/90{background-color:rgba(15,46,53,.9)}
.bg-brand-800{background-color:rgb(19 58 66/var(--tw-bg-opacity,1))}
.bg-brand-800\/80{background-color:rgba(19,58,66,.8)}
.bg-brand-50{background-color:rgb(240 246 244/var(--tw-bg-opacity,1))}
.bg-brand-50\/50{background-color:rgba(240,246,244,.55)}
.bg-paper{background-color:rgb(249 249 247/var(--tw-bg-opacity,1))}
.text-brand-900{color:rgb(15 46 53/var(--tw-text-opacity,1))}
.text-brand-800{color:rgb(17 105 94/var(--tw-text-opacity,1))}
.text-brand-500{color:rgb(17 105 94/var(--tw-text-opacity,1))}
.text-brand-100{color:rgb(214 228 225/var(--tw-text-opacity,1))}
.border-brand-900{border-color:rgb(15 46 53/var(--tw-border-opacity,1))}
.border-brand-800{border-color:rgb(32 76 84/var(--tw-border-opacity,1))}
.border-brand-500{border-color:rgb(17 105 94/var(--tw-border-opacity,1))}
.border-brand-100{border-color:rgb(226 232 229/var(--tw-border-opacity,1))}
.from-brand-900{--tw-gradient-from:#0f2e35 var(--tw-gradient-from-position);--tw-gradient-to:rgba(15,46,53,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.via-brand-900\/70{--tw-gradient-to:rgba(15,46,53,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(15,46,53,.7) var(--tw-gradient-via-position),var(--tw-gradient-to)}
.via-brand-900\/80{--tw-gradient-to:rgba(15,46,53,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(15,46,53,.8) var(--tw-gradient-via-position),var(--tw-gradient-to)}
/* Accent: warm gold replaces the hard safety orange everywhere it is used
   as a brand accent; status reds/greens are untouched. */
:root{--safety-500:200 140 50;--safety-600:170 115 36}
.text-safety-500,.text-safety-600{color:rgb(154 106 30/var(--tw-text-opacity,1))}
.text-amber-400,.text-yellow-400,.text-yellow-500{color:#e9b872}
.selection\:bg-safety-500 ::selection,.selection\:bg-safety-500::selection{background:#11695e}

/* ---------- 2. Typography ---------- */
.font-sans{font-family:'Open Sans',system-ui,-apple-system,"Segoe UI",sans-serif}
h1.font-serif,h2.font-serif,h3.font-serif,.font-serif h1,.font-serif h2,.font-serif h3,
h1 .font-sans,.font-sans h1,.font-sans h2,.font-sans h3,h2.font-sans,h3.font-sans,
.tab-content h2,.tab-content h3,.expedition-main h2,.expedition-main h3{
  font-family:'Montserrat',sans-serif;letter-spacing:-.02em
}
.font-black{font-weight:800}
.tracking-\[0\.2em\]{letter-spacing:.18em}
*:focus-visible{outline:3px solid #11695e !important;outline-offset:3px}

/* ---------- 3. Rounder, softer surfaces ---------- */
.rounded-sm{border-radius:.75rem}
.rounded-b-sm{border-bottom-left-radius:1.25rem;border-bottom-right-radius:1.25rem}
.rounded-tr-sm{border-top-right-radius:1.25rem}
.rounded-t-md{border-top-left-radius:.6rem;border-top-right-radius:.6rem}
.rounded-2xl{border-radius:1.25rem}
.rounded-3xl{border-radius:1.75rem}
.shadow-2xl{--tw-shadow:0 1px 2px rgba(13,31,38,.06),0 24px 48px -16px rgba(13,31,38,.22)}
.shadow-sm{--tw-shadow:0 1px 2px rgba(13,31,38,.05),0 10px 28px -14px rgba(13,31,38,.12)}
.shadow-lg,.hover\:shadow-lg:hover{--tw-shadow:0 2px 4px rgba(13,31,38,.05),0 24px 48px -18px rgba(13,31,38,.22)}
.border-gray-300{border-color:#e3e8e6}
.border-gray-200,.divide-gray-200>:not([hidden])~:not([hidden]){border-color:#e8ece9}
.text-gray-500{color:#6b7a80}
.text-gray-600{color:#55646a}

/* ---------- 4. Trip hero ---------- */
section.min-h-\[540px\]{min-height:min(78svh,640px)}
section.min-h-\[540px\]>img,section.min-h-\[540px\]>picture img{opacity:1 !important}
section.min-h-\[540px\]>.bg-gradient-to-t{background:
  linear-gradient(0deg,rgba(6,20,26,.94) 0%,rgba(6,20,26,.72) 38%,rgba(6,20,26,.18) 70%,rgba(6,20,26,.3) 100%)}
section.min-h-\[540px\] nav[aria-label="Breadcrumb"],section.min-h-\[540px\]>div>nav{
  background:rgba(255,255,255,.08) !important;border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(10px);border-radius:999px;padding:8px 14px !important;
  text-transform:none;letter-spacing:0;font-weight:600;font-size:12.5px}
section.min-h-\[540px\] .bg-safety-500.rounded-sm,section.min-h-\[540px\] span.bg-safety-500{
  background:#e9b872;color:#241a07;border-radius:999px;padding:7px 14px;letter-spacing:.12em}
section.min-h-\[540px\] h1{text-shadow:0 2px 24px rgba(0,0,0,.35)}
section.min-h-\[540px\] h1>span.font-sans{color:#e9b872;font-weight:700}
section.min-h-\[540px\] p.font-serif{font-family:'Open Sans',sans-serif;color:rgba(255,255,255,.86)}
/* trek pages wrap the copy in a bordered box; make it a frosted card */
section.min-h-\[540px\] .bg-brand-900\/90.border-l-4{
  background:rgba(9,30,34,.72);border:1px solid rgba(255,255,255,.14);border-left-width:1px;
  border-radius:20px;backdrop-filter:blur(10px)}

/* ---------- 5. Factsheet strip ---------- */
.factsheet-strip-section>div{
  border-radius:20px;border-top-width:0 !important;overflow:hidden;
  box-shadow:0 1px 2px rgba(13,31,38,.06),0 24px 56px -16px rgba(13,31,38,.25)}
.factsheet-strip-section>div>div{padding:22px 16px}
.factsheet-strip-section>div>div>span:first-child{color:#7a8a90;letter-spacing:.14em;font-size:10.5px}
.factsheet-strip-section>div>div>span:last-child,.factsheet-strip-section>div>div>b{
  font-family:'Montserrat',sans-serif;font-weight:800;letter-spacing:-.02em;color:#0f2e35}
.factsheet-strip-section>div>div.bg-brand-50{background:#0f2e35 !important}
.factsheet-strip-section>div>div.bg-brand-50>span:first-child{color:#e9b872}
.factsheet-strip-section>div>div.bg-brand-50>span:last-child,.factsheet-strip-section>div>div.bg-brand-50>b{color:#fff}
.factsheet-strip-section .text-safety-600{color:#b8862f}

/* ---------- 6. Tabs: segmented pill control ---------- */
.sticky.top-20.border-b{border-bottom:0;background:transparent;padding-top:0}
.sticky.top-20.border-b>nav{
  gap:6px;padding:6px;background:#eef2f0;border-radius:999px;margin-bottom:14px;
  box-shadow:inset 0 1px 2px rgba(13,31,38,.06)}
.tab-btn{
  border:0 !important;border-radius:999px !important;margin-bottom:0 !important;
  padding:11px 18px;font-size:13px;font-weight:700;color:#4a5a60;background:transparent !important;
  white-space:nowrap;transition:background .2s,color .2s,box-shadow .2s}
.tab-btn:hover{color:#0f2e35;background:rgba(255,255,255,.6) !important}
.tab-btn[aria-selected="true"]{
  background:#0f2e35 !important;color:#fff !important;
  box-shadow:0 6px 16px -6px rgba(15,46,53,.5)}
.sticky.top-20.border-b+div{border-radius:20px !important;border:1px solid #e3e8e6 !important}

/* ---------- 7. Itinerary accordions ---------- */
#panel-itinerary details{border-radius:14px;overflow:hidden;transition:box-shadow .2s,border-color .2s}
#panel-itinerary details:hover{border-color:#cfdad5}
#panel-itinerary details[open]{box-shadow:0 10px 28px -14px rgba(13,31,38,.18)}
#panel-itinerary summary{list-style:none}
#panel-itinerary summary::-webkit-details-marker{display:none}
#panel-itinerary summary>div>span:first-child{border-radius:10px;font-family:'Montserrat',sans-serif;font-weight:800}
#panel-itinerary summary>div>span:first-child.bg-brand-900{background:#11695e}
#panel-itinerary summary>span:last-child{
  width:30px;height:30px;display:grid;place-items:center;border-radius:50%;
  background:#eef2f0;font-size:10px;color:#0f2e35}
#panel-itinerary details[open] summary>span:last-child{background:#11695e;color:#fff}
#panel-itinerary summary:hover,#panel-itinerary summary:focus{background:rgba(17,105,94,.06)}
#toggle-all-days{
  text-decoration:none;border:1px solid #cfdad5;border-radius:999px;padding:8px 14px;
  font-size:12.5px;color:#11695e;transition:background .2s,border-color .2s}
#toggle-all-days:hover{background:#eef5f3;border-color:#11695e;color:#0c4f47}
.tab-content .border-l-4.border-brand-500{border-left-width:3px;border-radius:0 16px 16px 0;background:#f0f6f4}

/* ---------- 8. Inclusion lists, gallery, map, reviews ---------- */
.tab-content .text-green-600{color:#1a9b6c}
.tab-content ul.space-y-6>li,.tab-content ul.space-y-5>li{
  padding:14px 16px;background:#f7f9f8;border:1px solid #e8ece9;border-radius:14px;margin-top:10px !important}
.tab-content .aspect-\[16\/10\]{border-radius:16px}
.tab-content .grid>div.border{border-radius:16px;overflow:hidden}
.tab-content .border.overflow-hidden,.tab-content .border.rounded-sm.overflow-hidden,
.tab-content .h-\[460px\]{border-radius:16px}
.tab-content blockquote{font-family:Merriweather,serif;color:#1e2e33}
.tab-content .bg-paper.p-8.border{border-radius:18px;border-left:4px solid #e9b872}

/* ---------- 9. Booking sidebar ---------- */
#booking-section>div{border-radius:22px;border-color:rgba(255,255,255,.1);
  background:linear-gradient(160deg,#0f2e35,#0c4f47 140%);box-shadow:0 30px 60px -22px rgba(15,46,53,.55)}
#booking-section h3{text-transform:none;letter-spacing:-.02em;font-family:'Montserrat',sans-serif}
#booking-section .border-brand-700,#booking-section .border-b.border-brand-700{border-color:rgba(255,255,255,.12)}
#booking-section input,#booking-section textarea{border-radius:12px;border-color:transparent}
#booking-section input:focus,#booking-section textarea:focus{border-color:#e9b872}
#booking-section button[type="submit"]{
  border-radius:999px;background:#e9b872;color:#241a07;text-transform:none;letter-spacing:0;
  font-family:'Montserrat',sans-serif;font-weight:800;font-size:15px;padding:15px;
  box-shadow:0 12px 28px -10px rgba(233,184,114,.6);transition:transform .2s,box-shadow .2s}
#booking-section button[type="submit"]:hover{background:#f0c88b;transform:translateY(-2px)}
#booking-section .bg-brand-800\/80{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);border-radius:12px}
#booking-section .bg-brand-800\/80:hover{background:rgba(255,255,255,.12)}
#booking-section .text-safety-500{color:#e9b872}
#booking-section label .text-safety-500{color:#e9b872}
/* Mobile sticky trek bar (inline-styled in the markup) */
.trek-mobile{background:#0f2e35 !important;border-top:1px solid rgba(255,255,255,.1);font-size:14px}
.trek-mobile a{background:#e9b872 !important;color:#241a07 !important;border-radius:999px}

/* ---------- 10. Generic pill buttons used on hub / about / contact ---------- */
a.rounded-full.bg-safety-500,.bg-safety-500.rounded-full{background:#e9b872;color:#241a07}
a.rounded-full.bg-safety-500:hover,.hover\:bg-safety-600:hover{background:#f0c88b;color:#241a07}
.bg-safety-500.text-white:not(.rounded-full):not(.tab-btn){background:#e9b872;color:#241a07}
.bg-brand-900.text-white.rounded-sm,.bg-green-600.text-white.rounded-sm{border-radius:999px}
.bg-brand-900.text-white.rounded-sm:hover{background:#11695e}
a.rounded-full,button.rounded-full{transition:transform .2s,background .2s,border-color .2s}
a.rounded-full:hover{transform:translateY(-2px)}

/* ---------- 11. Dark mode counterparts ---------- */
html[data-theme="dark"] .bg-paper{background-color:#0b171d}
html[data-theme="dark"] .bg-white{background-color:#10232a}
html[data-theme="dark"] .bg-brand-50,html[data-theme="dark"] .bg-brand-50\/50,
html[data-theme="dark"] .tab-content .border-l-4.border-brand-500{background:#13262d}
html[data-theme="dark"] .border-gray-300,html[data-theme="dark"] .border-gray-200,
html[data-theme="dark"] .border-brand-100,html[data-theme="dark"] .border,
html[data-theme="dark"] .divide-gray-200>:not([hidden])~:not([hidden]),
html[data-theme="dark"] .sticky.top-20.border-b+div{border-color:rgba(255,255,255,.1) !important}
html[data-theme="dark"] .text-brand-900,html[data-theme="dark"] .text-gray-800,
html[data-theme="dark"] .text-gray-700{color:#dbe6e8}
html[data-theme="dark"] .text-gray-600,html[data-theme="dark"] .text-gray-500{color:#9db0b6}
html[data-theme="dark"] .text-brand-500,html[data-theme="dark"] .text-brand-800{color:#58b5a8}
html[data-theme="dark"] .factsheet-strip-section>div>div>span:last-child,
html[data-theme="dark"] .factsheet-strip-section>div>div>b{color:#eef4f5}
html[data-theme="dark"] .factsheet-strip-section>div>div.bg-brand-50{background:#11695e !important}
html[data-theme="dark"] .sticky.top-20.border-b>nav{background:#13262d;box-shadow:none}
html[data-theme="dark"] .tab-btn{color:#9db0b6}
html[data-theme="dark"] .tab-btn:hover{color:#fff;background:rgba(255,255,255,.08) !important}
html[data-theme="dark"] .tab-btn[aria-selected="true"]{background:#e9b872 !important;color:#241a07 !important}
html[data-theme="dark"] #panel-itinerary summary>span:last-child{background:#1a3540;color:#fff}
html[data-theme="dark"] #panel-itinerary summary:hover{background:rgba(255,255,255,.05)}
html[data-theme="dark"] .tab-content ul.space-y-6>li,html[data-theme="dark"] .tab-content ul.space-y-5>li{background:#0e1f26;border-color:rgba(255,255,255,.08)}
html[data-theme="dark"] .tab-content blockquote{color:#dbe6e8}
html[data-theme="dark"] #toggle-all-days{border-color:rgba(255,255,255,.18);color:#58b5a8}
html[data-theme="dark"] #toggle-all-days:hover{background:rgba(255,255,255,.06)}
html[data-theme="dark"] .bg-gray-100{background:#15282f}
html[data-theme="dark"] .hover\:bg-white\/50:hover{background:rgba(255,255,255,.06)}
html[data-theme="dark"] .text-safety-500,html[data-theme="dark"] .text-safety-600,
html[data-theme="dark"] .factsheet-strip-section .text-safety-600{color:#e9b872}
html[data-theme="dark"] #booking-section input,html[data-theme="dark"] #booking-section textarea{background:#fff}

/* ---------- 12. Small screens ---------- */
@media(max-width:640px){
  .factsheet-strip-section>div>div{padding:16px 12px}
  .factsheet-strip-section>div>div>span:last-child,.factsheet-strip-section>div>div>b{font-size:1.15rem}
  .sticky.top-20.border-b>nav{border-radius:16px}
  .tab-btn{padding:10px 14px;font-size:12.5px}
}
@media(prefers-reduced-motion:reduce){
  .tab-btn,a.rounded-full,#booking-section button[type="submit"]{transition:none}
}