/* Senior Cruises — base styles (Tailwind CDN + small extras) */
html { scroll-behavior: smooth; }

/* ═══ Cruise journey background (whole site feels like being on a cruise) ═══ */
#cruiseBg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
#cruiseBg .cb-layer { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.2s ease; will-change: opacity; }
#cruiseBg .cb-layer.cb-active { opacity: 1; }
#cruiseBg .cb-layer.cb-ken { animation: cbKen 18s ease-in-out infinite alternate; }
@keyframes cbKen { from { transform: scale(1); } to { transform: scale(1.08); } }
/* readability scrim — dark theme */
#cruiseBg .cb-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,15,28,0.72) 0%, rgba(3,15,28,0.45) 35%, rgba(3,15,28,0.55) 70%, rgba(3,15,28,0.82) 100%); }
#cruiseBg .cb-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 90% 70% at 50% 35%, transparent 55%, rgba(2,10,20,0.5) 100%); }
/* light theme scrim — soft, airy */
html[data-theme="light"] #cruiseBg .cb-scrim { background: linear-gradient(180deg, rgba(240,247,252,0.78) 0%, rgba(240,247,252,0.6) 35%, rgba(240,247,252,0.65) 70%, rgba(240,247,252,0.88) 100%); }
html[data-theme="light"] #cruiseBg .cb-vignette { background: radial-gradient(ellipse 90% 70% at 50% 35%, transparent 55%, rgba(210,228,242,0.55) 100%); }
/* journey caption — "now passing" chip */
#cbCaption { position: fixed; left: 16px; bottom: 66px; z-index: 260; max-width: 78vw; background: rgba(3,15,28,0.62); border: 1px solid rgba(251,191,36,0.45); color: #fde68a; font-size: 0.8rem; font-weight: 700; padding: 6px 14px; border-radius: 9999px; backdrop-filter: blur(6px); opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; pointer-events: none; }
#cbCaption.cb-show { opacity: 1; transform: translateY(0); }
html[data-theme="light"] #cbCaption { background: rgba(240,247,252,0.85); color: #0e5a8a; border-color: rgba(14,90,138,0.4); }
@media (prefers-reduced-motion: reduce) { #cruiseBg .cb-layer.cb-ken { animation: none; } }
body.font-lg { font-size: 112%; }
body.font-xl { font-size: 125%; }
.deal-card img { user-select: none; }
.day-row b { display: block; }
#toast { position: fixed; left: 50%; bottom: 80px; transform: translateX(-50%); background: #0e5a8a; color: #fff; padding: 10px 18px; border-radius: 9999px; font-weight: 700; font-size: 0.9rem; z-index: 9999; box-shadow: 0 8px 24px rgba(0,0,0,0.4); opacity: 0; transition: opacity 0.3s; pointer-events: none; max-width: 90vw; text-align: center; }
#toast.show { opacity: 1; }
@media (max-width: 640px) {
  .deal-img { height: 140px; }
}


/* ═══ Readability for a 50+ audience ════════════════════════════════════════
   Everything here is rem-based (Tailwind), so the ROOT size is the single
   lever that moves text, spacing and pill padding together — changing
   body font-size would have left every Tailwind text-* class untouched.
   17px base, with two larger steps the reader picks and we remember.
   The floors below catch the handful of places that were set in fixed px or
   in very small rem: a 9px badge and a 13px ad line are not readable by the
   people this site is for. */
html { font-size: 19px; }
html.fs-lg { font-size: 21px; }
html.fs-xl { font-size: 23px; }
body { line-height: 1.7; }

.ad-slot-badge { font-size: 11px !important; }
#adContent { font-size: 0.9rem !important; }
.badge-senior { font-size: 0.82rem !important; }
.ad-slot-text, .ad-slot-cta { font-size: 0.92rem !important; }
.ad-slot-title { font-size: 1rem !important; }
.price-tag { font-size: 0.95rem !important; }
.filter-chip { font-size: 1rem !important; }
.text-xs { font-size: 0.82rem !important; }
.text-sm { font-size: 0.95rem !important; }

/* the reader's own control — bottom right, clear of #cbCaption and #toast */
#fsBar { position: fixed; right: 12px; bottom: 76px; z-index: 300; display: flex; gap: 2px;
         background: rgba(3,15,28,0.72); border: 1px solid rgba(251,191,36,0.45);
         border-radius: 9999px; padding: 3px; backdrop-filter: blur(6px); }
#fsBar button { border: 0; background: none; color: #fde68a; font-weight: 800; cursor: pointer;
                border-radius: 9999px; padding: 5px 11px; line-height: 1; font-family: inherit; }
#fsBar button[aria-pressed="true"] { background: #d97706; color: #fff; }
#fsBar button:nth-child(2) { font-size: 1.15em; }
#fsBar button:nth-child(3) { font-size: 1.32em; }
html[data-theme="light"] #fsBar { background: rgba(255,255,255,0.92); border-color: rgba(14,90,138,0.35); }
html[data-theme="light"] #fsBar button { color: #0e5a8a; }
html[data-theme="light"] #fsBar button[aria-pressed="true"] { color: #fff; }
@media print { #fsBar { display: none; } }