/* ═══════════════════════════════════════════════════════════════════════════ My Tour Planners — global stylesheet. Styling is mostly inline, on the elements themselves. This file covers what an inline style cannot express: the header's scroll and dark states, the 1080px breakpoint, animation, and hover and focus states. ═══════════════════════════════════════════════════════════════════════════ */ * { box-sizing: border-box; } body { margin: 0; background: #F3F3F1; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-family: Manrope, system-ui, sans-serif; color: #16181A; min-height: 100vh; } /* No `overflow-x: hidden` on body. It creates a clipping context around every positioned descendant and can cut off fixed layers, and nothing on the widest pages overflows horizontally at 390, 768 or 1440px, so it is not needed. */ html { scroll-behavior: smooth; } a { color: #2F4A3C; text-decoration: none; } a:hover { color: #16181A; } /* …but never on a surface that is already dark. */ .skip-link:hover, .crumbs a:hover, .hdr-logo:hover, footer a:hover { color: inherit; } button { font: inherit; cursor: pointer; } a, button, summary, input, select, textarea { touch-action: manipulation; -webkit-tap-highlight-color: rgba(201,169,97,.2); } /* Anchor targets clear the fixed header. */ [id] { scroll-margin-top: 96px; } img { display: block; max-width: 100%; } summary::-webkit-details-marker { display: none; } ::selection { background: #E3D9C9; color: #16181A; } /* The hidden attribute must win. Several overlays — the mobile menu, the planner drawer, the planner's final pane — carry an inline `display: flex` for their layout, and an inline style beats the browser's own `[hidden] { display: none }`. Without this rule they render open on every page. */ [hidden] { display: none !important; } @keyframes mtpFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes mtpFade { from { opacity: 0; } to { opacity: 1; } } @keyframes mtpSlideUp { from { transform: translateY(100%); } to { transform: none; } } /* ── Anchors used as buttons ─────────────────────────────────────────────── Navigation controls are links so the site is crawlable; these rules make them render the same as the buttons beside them. */ a[style*="inline-flex"], a[style*="display: flex"], a[style*="display: block"] { text-decoration: none; } a[style] { color: inherit; } main a[href^="/"]:hover, footer a[href^="/"]:hover { color: inherit; } /* Destination chips on the home page. They are a row of links, so none carries a permanent dark fill that would read as a selected state; the dark treatment appears on hover and focus instead. */ .chip:hover, .chip:focus-visible { background: #16181A !important; border-color: #16181A !important; color: #FAF7F2 !important; transform: translateY(-1px); } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: #16181A; color: #FAF7F2; padding: 12px 18px; font-size: 14px; font-weight: 600; } .skip-link:focus, .skip-link:hover { left: 8px; top: 8px; color: #FAF7F2; } :focus-visible { outline: 2px solid #C9A961; outline-offset: 3px; } /* ── Header ──────────────────────────────────────────────────────────────── Two attributes drive its appearance: [data-dark-hero] on and [data-scrolled] on the header. Defaults below are the light (scrolled or non-hero) treatment. */ [data-header] { position: fixed; top: 0; left: 0; right: 0; z-index: 80; height: 84px; background: rgba(250,247,242,.96); backdrop-filter: blur(12px); border-bottom: 1px solid #E9E1D4; color: #16181A; transition: height .3s, background .3s, color .3s, border-color .3s; } [data-header][data-scrolled] { height: 66px; } /* Dark hero pages start transparent with light text, until the page scrolls. */ [data-dark-hero] [data-header]:not([data-scrolled]) { background: transparent; backdrop-filter: none; border-bottom-color: transparent; color: #FAF7F2; } .hdr-inner { max-width: 1400px; margin: 0 auto; padding: 0 max(clamp(18px, 4vw, 44px), env(safe-area-inset-right)) 0 max(clamp(18px, 4vw, 44px), env(safe-area-inset-left)); display: flex; align-items: center; gap: 28px; height: 100%; } .hdr-logo { display: flex; align-items: center; flex-shrink: 0; color: currentColor; } .hdr-logo:hover { color: currentColor; } /* Logo. The