/* Basic Reset and Variables */
:root {
  --clr-bg: #0e1a1a;
  --clr-bg-soft: #122222;
  --clr-surface: #ffffff;
  --clr-text: #0f1b1b;
  --clr-text-muted: #4b5a5a;
  --clr-primary: #0ea5a4;
  --clr-primary-600: #0b8686;
  --clr-secondary: #305c7e;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 10px 30px rgba(0,0,0,0.15);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', sans-serif;
  color: var(--clr-text);
  background: #f6fbfb;
  line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--clr-secondary); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { width: min(1140px, 94%); margin-inline: auto; }
.rounded { border-radius: var(--radius); }

.skip-link { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { position:static; width:auto; height:auto; padding:0.5rem 1rem; background:#fff; box-shadow: var(--shadow); border-radius: var(--radius-sm); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.9); backdrop-filter: blur(10px); border-bottom: 1px solid #e7efef; }
.header-inner { display:flex; align-items:center; justify-content:space-between; padding: 0.8rem 0; }
.logo { font-weight: 700; letter-spacing: 0.3px; color: var(--clr-text); }

.main-nav { position: relative; }
.nav-toggle { display:none; }
.nav-list { display:flex; gap:1rem; align-items:center; list-style:none; margin:0; padding:0; }
.nav-list a { padding:0.5rem 0.75rem; border-radius: 10px; }
.nav-list a:hover { background:#eef6f6; text-decoration:none; }

.btn { display:inline-block; padding:0.7rem 1rem; border-radius: 999px; font-weight:600; border: 1px solid transparent; transition: all 0.2s ease; }
.btn-primary { background: var(--clr-primary); color:#fff; }
.btn-primary:hover { background: var(--clr-primary-600); }
.btn-secondary { background: #e6eef7; color: #18415f; }
.btn-secondary:hover { background: #d9e7f6; }

/* Hero */
.hero { position: relative; isolation:isolate; }
.hero picture, .hero img { width: 100%; height: clamp(360px, 50vw, 620px); object-fit: cover; display:block; }
.hero::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(14,26,26,0.65), rgba(14,26,26,0.15)); z-index:0; }
.hero-overlay { position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding: 1rem; color:#fff; z-index:1; }
.hero-overlay h1 { font-size: clamp(1.8rem, 4vw, 3rem); margin:0 0 0.6rem; }
.hero-overlay p { margin: 0 0 1rem; color: #f0f7f7; }
.hero-cta { display:flex; gap:0.7rem; justify-content:center; flex-wrap:wrap; }

/* Sections */
section { padding: clamp(2rem, 6vw, 4rem) 0; }
h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); margin: 0 0 1rem; }
h3 { margin: 0.6rem 0; }

.grid-3 { display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
@media (max-width: 900px){ .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .grid-3 { grid-template-columns: 1fr; } }

.card { background:#fff; border:1px solid #e7efef; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); }
.card img { aspect-ratio: 16/10; object-fit: cover; }
.card h3, .card p { padding: 0 1rem 0.8rem; }
.card h3 { padding-top: 0.8rem; }

.teaser .teaser-inner { display:grid; grid-template-columns: 1.1fr 0.9fr; gap:1.4rem; align-items:center; }
@media (max-width: 900px){ .teaser .teaser-inner { grid-template-columns: 1fr; } }

.quote { background:#fff; border-left:4px solid var(--clr-primary); border-radius: var(--radius-sm); padding: 1rem; box-shadow: var(--shadow); }
.quote footer { color: var(--clr-text-muted); font-size: 0.95rem; }

/* Footer */
.site-footer { background: var(--clr-bg); color:#eaf4f4; padding-top: 2rem; margin-top: 2rem; }
.footer-grid { display:grid; grid-template-columns: 1.5fr 1fr 1fr; gap:1rem; align-items:start; }
.site-footer a { color:#cfe9ff; }
.site-footer nav ul { list-style:none; margin:0; padding:0; }
.site-footer nav li + li { margin-top: 0.4rem; }
.site-footer .btn { border-color: #3f6f96; }
.site-footer .btn:hover { background:#3f6f96; color:#fff; }
/* Improve contrast for footer CTA button */
.site-footer .btn-secondary { background: var(--clr-primary); color:#fff; border-color: var(--clr-primary-600); }
.site-footer .btn-secondary:hover { background: var(--clr-primary-600); color:#fff; }
.btn:focus-visible { outline: 3px solid #b4e5e4; outline-offset: 2px; }
.site-footer p { margin: 0.4rem 0; }
.site-footer .container { padding-bottom: 1rem; }
.site-footer .copyright { text-align:center; color:#a8bebe; padding: 0.8rem 0 1.4rem; border-top: 1px solid #1a2b2b; margin-top: 1rem; }

/* Content pages */
.page-hero { background: linear-gradient(135deg, #0ea5a4 0%, #305c7e 100%); color:#fff; padding: 3rem 0; }
.breadcrumbs { color: #eaf8f8; font-size: 0.95rem; margin-bottom: 0.6rem; }
.content { background:#fff; border:1px solid #e7efef; border-radius: var(--radius); padding: 1.2rem; box-shadow: var(--shadow); }
.content h2 { margin-top: 0.6rem; }
.list-check { list-style: none; padding:0; }
.list-check li { margin: 0.35rem 0; }
.list-check li::before { content:"✔"; color: var(--clr-primary); margin-right: 0.5rem; }

/* Forms */
form .row { display:grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
@media (max-width: 620px){ form .row { grid-template-columns: 1fr; } }
label { display:block; font-weight: 600; margin: 0.5rem 0 0.2rem; }
input, select, textarea { width:100%; padding:0.7rem 0.8rem; border-radius: 10px; border:1px solid #cfe2e2; background:#fff; }
input:focus, select:focus, textarea:focus { outline: 2px solid #b4e5e4; border-color: var(--clr-primary); }
.help { color: var(--clr-text-muted); font-size: 0.9rem; }
.form-actions { display:flex; gap: 0.6rem; margin-top: 1rem; }
.error { color: #b42318; font-size: 0.9rem; }
.badge { display:inline-block; background:#e8fbfb; color:#075e5e; border: 1px solid #bdeaea; border-radius: 999px; padding: 0.2rem 0.6rem; font-size: 0.85rem; }

/* Booking steps */
.steps { display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom: 1rem; }
.step { padding:0.35rem 0.6rem; border:1px solid #d6eeee; border-radius: 999px; color:#275; background:#f2fbfb; }
.step.active { background: #0ea5a4; color:#fff; border-color: transparent; }
.summary { background:#f7fdfd; border:1px dashed #bdeaea; border-radius: var(--radius-sm); padding: 1rem; }