/* www.seastarmauritius.com: one stylesheet, no framework. Sizes, spacing and radii are the previous site's, measured in a browser at
   1280 x 800. The palette variables (--main, --shade2, …) and the @font-face rules are written into each page's
   <head> by scripts/build-www.mjs from data/www/site.json and fonts.css. */
*, *::before, *::after { box-sizing: border-box; }
:root { --hd: 75px; --ink: #323335; --muted: #5a6670; --r: 5px; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 16px/1.6 Ubuntu, system-ui, sans-serif; color: var(--ink); background: #fff; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: Merriweather, Georgia, serif; font-weight: 700; line-height: 1.3; margin: 0 0 20px; }
h1 { font-size: clamp(40px, 5vw, 64px); }
h2 { font-size: 24px; }
h3 { font-size: 18px; }
p { margin: 0; } /* the old site's paragraphs have no margin: its gaps are <br>s and blank lines in the text */
strong, b { font-weight: 700; }
.tc { text-align: center; }
.tr { text-align: right; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- header: 75 px, sticky, links 16 px with 20 px sides, the button 38 px high ------------------------------------------------ */
.hd { position: sticky; top: 0; z-index: 20; background: #fff; }
.hd-in { display: flex; align-items: center; justify-content: space-between; height: var(--hd); padding: 0 40px; }
.hd nav { display: flex; align-items: center; }
.hd nav a:not(.btn) { display: block; padding: 20px; line-height: 24px; text-decoration: none; }
.hd nav a:not(.btn):hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.hd nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.hd nav .btn { margin-left: 44px; padding: 7px 31px; }
.hd .logo { display: block; }
.hd .logo img { display: block; height: 44px; width: auto; }
.hd .burger { display: none; }
@media (max-width: 800px) {
  .hd-in { padding: 0 16px; justify-content: center; position: relative; }
  .hd .logo { margin: 0 auto; }
  .js .hd .burger { display: grid; place-items: center; position: absolute; left: 8px; top: 12px; width: 51px; height: 51px; background: none; border: 0; cursor: pointer; padding: 0; }
  .burger span, .burger span::before, .burger span::after { display: block; width: 22px; height: 2px; background: var(--ink); content: ''; position: relative; }
  .burger span::before { position: absolute; top: -7px; }
  .burger span::after { position: absolute; top: 7px; }
  .js .hd nav { display: none; position: absolute; left: 0; right: 0; top: var(--hd); flex-direction: column; align-items: stretch; background: #fff; padding: 8px 16px 20px; box-shadow: 0 8px 12px rgba(0, 0, 0, .12); }
  .js .hd.open nav { display: flex; }
  .hd nav .btn { margin: 8px 0 0; text-align: center; }
  html:not(.js) .hd-in { flex-wrap: wrap; height: auto; padding: 8px 16px; }
  html:not(.js) .hd .logo { order: -1; flex: 0 0 100%; text-align: center; }
}

/* ---- buttons: 50 px high, 5 px radius ------------------------------------------------------------------------------------------ */
.btn { display: inline-block; background: var(--main); color: #fff; padding: 13px 31px; border-radius: var(--r); text-decoration: none; font: 400 16px/24px Ubuntu, system-ui, sans-serif; border: 0; cursor: pointer; text-align: center; transition: filter .15s; }
.btn:hover { filter: brightness(1.1); }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid var(--shade1); outline-offset: 2px; }
.bg-main .btn, .bg-shade2 .btn, .hero .btn, .embed .btn { background: #fff; color: var(--ink); }
.ctas { display: flex; flex-wrap: wrap; gap: 20px; margin: 40px 0 -10px; } /* the -10 px puts a centred block 5 px low, as on the old site */
.tc .ctas, .hero .ctas, .pack .ctas { justify-content: center; }

/* ---- block colours -------------------------------------------------------------------------------------------------------------- */
.bg-white { background: #fff; color: var(--ink); }
.bg-main { background: var(--main); color: #fff; }
.bg-shade2 { background: var(--shade2); color: #fff; }
.bg-white h1, .bg-white h2, .bg-white h3 { color: var(--main); }
.bg-main a:not(.btn), .bg-shade2 a:not(.btn) { color: #fff; }

/* ---- cover: hero (100vh minus the header) ---------------------------------------------------------------------------------------- */
.hero { position: relative; display: grid; place-items: center; min-height: calc(100vh - var(--hd)); min-height: calc(100svh - var(--hd)); text-align: center; isolation: isolate; overflow: hidden; }
.hero > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--tint, var(--main)); opacity: .62; }
.hero .in { width: 100%; max-width: 790px; padding: 60px 20px 80px; }
.hero.tint-white { color: var(--ink); }
.hero.tint-white::after { --tint: #fff; opacity: .72; }
.hero.tint-white h1, .hero.tint-white h2 { color: var(--main); }
.hero:not(.tint-white) h1, .hero:not(.tint-white) h2, .hero:not(.tint-white) h3, .hero:not(.tint-white) p { color: #fff; }
.hero .in img { max-width: 600px; width: 90%; }
.hero .more { position: absolute; left: 50%; bottom: 7px; width: 54px; height: 47px; margin-left: -27px; display: grid; place-items: center; text-decoration: none; }
.hero .more::before { content: ''; width: 10px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-3px, -3px); }

/* ---- cover: image and text side by side (100vh; the text column has 60 px sides) -------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; min-height: 100svh; }
.split .tx { display: flex; flex-direction: column; justify-content: center; padding: 60px; }
.split .tx > div { width: 100%; }
.split .tx img { max-width: 100%; }
.split .im { position: relative; min-height: 320px; }
.split .im img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split.rev .im { order: -1; }
.split.top .tx { justify-content: flex-start; padding-top: 80px; padding-bottom: 80px; }
.justify .tx p { text-align: justify; hyphens: manual; overflow-wrap: break-word; }
.over { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.over .im { position: absolute; left: 0; top: 0; bottom: 0; width: 55%; }
.over .im img { width: 100%; height: 100%; object-fit: cover; display: block; }
.over .ov { position: relative; margin-left: 45.1%; padding-right: 60px; }
.over .card { background: var(--main); padding: 62px 0 57px 60px; }
.over .note { margin: 83px 0 0 205px; max-width: 409px; }
@media (max-width: 800px) {
  .split, .over { display: block; min-height: 0; }
  .split .im, .split.rev .im { aspect-ratio: 1 / 1; min-height: 0; }
  .split .tx { padding: 40px 20px; }
  .split.top .tx { padding: 40px 20px; }
  .over .im { position: relative; width: 100%; aspect-ratio: 4 / 3; }
  .over .ov { margin: 0; padding: 0 20px 40px; }
  .over .card { padding: 40px 0 0; }
  .over .note { margin: 24px 0 0; max-width: none; }
}

/* ---- galleries ------------------------------------------------------------------------------------------------------------------ */
.gal figure { margin: 0; position: relative; }
.gal figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* two or more justified rows: row height 45vh - 48px, 30 px gaps, the widths of a row are weights */
.gal-r { padding: 90px 30px 100px; }
.gal-r .row { display: flex; gap: 30px; height: calc(45vh - 48px); min-height: 200px; margin-bottom: 30px; }
.gal-r .row:last-child { margin-bottom: 0; }
.gal-r figure { flex: var(--w) 1 0; min-width: 0; }
/* tiles: 280 px squares, 10 px gaps, three to a row in a column of 860 px */
.gal-t { padding: 80px 20px 78px; }
.gal-t .ttl { max-width: 860px; margin: 0 auto 42px; }
.gal-t .ttl h2 { text-align: center; }
.gal-g { display: grid; grid-template-columns: repeat(3, 280px); gap: 10px; justify-content: center; max-width: 860px; margin: 0 auto; }
.gal-g figure { aspect-ratio: 1 / 1; }
.gal.no-ttl.gal-t { padding-top: 80px; }
@media (max-width: 800px) {
  .gal-r { padding: 30px 16px 40px; }
  .gal-r .row { display: block; height: auto; margin-bottom: 16px; }
  .gal-r figure { aspect-ratio: 4 / 3; margin-bottom: 16px; }
  .gal-r .row:last-child figure:last-child { margin-bottom: 0; }
  .gal-t { padding: 40px 16px; }
  .gal-g { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}

/* ---- slideshow: 640 px, round arrows 1000 px apart, dots -------------------------------------------------------------------------- */
.slider { position: relative; height: min(640px, 75vw); min-height: 280px; overflow: hidden; background: var(--shade2); }
.slides { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.slides::-webkit-scrollbar { display: none; }
.slides figure { margin: 0; flex: 0 0 100%; height: 100%; scroll-snap-align: start; position: relative; }
.slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slider .nav { position: absolute; top: 50%; width: 48px; height: 48px; margin-top: -24px; border: 0; border-radius: 50%; background: rgba(50, 51, 53, .75); cursor: pointer; padding: 0; }
.slider .nav::before { content: ''; position: absolute; top: 18px; width: 11px; height: 11px; border: solid #fff; border-width: 2px 2px 0 0; }
.slider .prev { left: max(12px, calc(50% - 500px)); } .slider .prev::before { left: 20px; transform: rotate(-135deg); }
.slider .next { right: max(12px, calc(50% - 500px)); } .slider .next::before { left: 14px; transform: rotate(45deg); }
.slider .dots { position: absolute; left: 0; right: 0; bottom: 56px; display: flex; justify-content: center; align-items: center; gap: 9px; pointer-events: none; }
.slider .dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .75); transition: all .2s; }
.slider .dots i.on { width: 10px; height: 10px; background: #fff; }
@media (max-width: 800px) { .slider .dots { bottom: 16px; } .slider .nav { width: 40px; height: 40px; margin-top: -20px; } .slider .nav::before { top: 14px; } }

/* ---- consent boxes: YouTube and Google Maps load on click ------------------------------------------------------------------------ */
.embed { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 40px; background: #8f8f8f; color: #fff; min-height: 240px; }
.embed > div { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; }
.embed p { margin: 0; max-width: 780px; font-size: 16px; text-align: left; }
.embed svg { display: none; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed.loaded { padding: 0; background: #000; }
.vid { padding: 60px 20px; }
.vid .embed { max-width: 860px; margin: 0 auto; }
.embed.map { min-height: 344px; background: #8f8f8f; }
@media (max-width: 800px) { .embed { padding: 24px 16px; } .vid { padding: 40px 16px; } .embed.map { min-height: 300px; } }

/* ---- contact: 860 px column, the map, three columns -------------------------------------------------------------------------------- */
.contact { padding: 110px 20px 100px; }
.contact .wrap { max-width: 860px; margin: 0 auto; }
.contact h2 { color: #fff; margin-bottom: 59px; }
.contact .map { margin-bottom: 61px; }
.contact .cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.contact p { margin: 0; }
.contact h3 { margin-bottom: 20px; }
#ladesk { margin-top: 12px; min-height: 0; }
@media (max-width: 800px) { .contact { padding: 60px 16px; } .contact h2 { margin-bottom: 30px; } .contact .map { margin-bottom: 40px; } .contact .cols { grid-template-columns: 1fr; gap: 28px; } }

/* ---- day package band, news bar, about strip, review cards -------------------------------------------------------------------------- */
.pack { position: relative; isolation: isolate; text-align: center; height: 400px; display: grid; place-items: center; overflow: hidden; }
.pack > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.pack::after { content: ''; position: absolute; inset: 0; z-index: -1; background: #fff; opacity: .62; }
.pack .in { width: 100%; max-width: 900px; padding: 0 20px; }
.news { display: flex; align-items: center; justify-content: center; gap: 207px; min-height: 102px; padding: 26px 20px 26px 26px; }
.news h3 { margin: 0; color: #fff; flex: 0 0 305px; }
.news .ctas { margin: 0; flex-direction: column; align-items: flex-end; gap: 20px; }
@media (max-width: 800px) { .news { flex-direction: column; gap: 16px; padding: 28px 16px; text-align: center; } .news h3 { flex: none; } .news .ctas { align-items: center; } .pack { height: auto; min-height: 400px; padding: 40px 0; } }
.about { padding: 82px 20px 80px; text-align: center; }
.about p { margin: 0; }
.cols2 { padding: 80px 20px; }
.cols2 .intro { max-width: 860px; margin: 0 auto 2em; }
.cols2 .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 30px; max-width: 860px; margin: 0 auto; text-align: center; }
.cols2 .card { background: var(--shade1); color: var(--ink); padding: 20px; display: flex; flex-direction: column; }
.cols2 .card img { width: 100%; height: auto; margin: 0 0 1em; display: block; }
.cols2 .card h3 { color: var(--ink); margin-top: auto; }
.cols2 .card .ctas { justify-content: center; margin-top: 14px; }
.cols2 .card .btn { background: #000; color: #fff; }

/* ---- OCF: the restaurant's open/closed boxes (src/www/ocf.js); the old widget's own CSS ---------------------------------------------- */
.ocfwrap { max-width: 860px; margin: 0 auto; }
.ocf { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; padding: 20px 0; margin: 0 0 20px; list-style: none; }
.ocf li { display: flex; flex-direction: column; padding: 15px; border-radius: 8px; font-size: 16px; font-weight: 700; text-align: center; background: rgb(144, 225, 255); color: var(--ink); width: calc(16.666% - 10px); }
.ocf li > span { margin-bottom: 10px; }
.ocf .st { margin-top: auto; padding: 10px; border-radius: 8px; line-height: 24px; display: block; text-decoration: none; overflow: hidden; }
.ocf .open { background: green; color: #fff; }
.ocf .depends { background: yellow; color: #000; }
.ocf .depends::after { content: ' 🌧'; }
.ocf .closed, .ocf .full { background: red; color: #fff; }
@media (max-width: 1000px) { .ocf li { width: calc(33.333% - 10px); } }
@media (max-width: 480px) { .ocf li { width: calc(50% - 10px); } }

/* ---- upcoming events (server-rendered from Airtable, src/www/events.js) ------------------------------------------- */
.events { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin: 1.4em 0 0; padding: 0; list-style: none; }
.ev { background: #fff; border: 1px solid #d7e1e7; border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; font-size: .85rem; color: var(--ink); }
.ev img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; background: #eef3f6; }
.ev dl { margin: 0; padding: 12px; display: grid; gap: 2px; }
.ev dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-top: 8px; }
.ev dd { margin: 0; }
.ev .when { font-weight: 700; font-size: 1rem; }
.pill { display: inline-block; padding: 1px 9px; border-radius: 999px; background: #e3e8ec; font-size: .8rem; }
.pill.open { background: #d4f2dc; } .pill.sold { background: #fbd9d9; }
.ev-more { font-size: .85rem; margin-top: 1em; }
.bg-white .ev-more a { color: var(--main); }

/* ---- day package (src/www/dayuse.js, public/www/static/daypackage.js) ---------------------------------------------------- */
.dp { padding: clamp(28px, 5vw, 72px) 20px; }
.dp-in { max-width: 640px; margin: 0 auto; }
.dp-in h1 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
.dp-inc { background: #eef6fa; padding: 18px 22px; border-radius: 6px; margin: 1.4em 0 2em; }
.dp-inc h2 { font-size: 1.1rem; margin-bottom: .3em; }
.dp-inc h3 { font-size: 1rem; color: var(--ink); margin: 1em 0 .3em; }
.dp-inc ul { margin: .3em 0 0; padding-left: 1.2em; }
.dp-form label { display: block; font-weight: 700; margin: 1.3em 0 .35em; }
.dp-form .hint { font-size: .9rem; color: var(--muted); margin: 0 0 1em; }
.dp-form .opt { font-weight: 400; color: var(--muted); }
.dp-form input:not([type=checkbox]), .dp-form select { width: 100%; font: inherit; padding: .7em .8em; border: 1px solid #a9bcc7; border-radius: 4px; background: #fff; color: var(--ink); }
.dp-form .check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.dp-form .check input { margin-top: .4em; }
.dp-form .hp { position: absolute; left: -9999px; }
.dp-form .btn { margin-top: 1.4em; width: 100%; padding: .9em; font-size: 1rem; }
.dp-form .btn[disabled] { opacity: .6; cursor: wait; }
.dp-result { margin-top: 1.2em; padding: 14px 18px; border-radius: 6px; }
.dp-result.ok { background: #d4f2dc; }
.dp-result.err { background: #fbd9d9; }
.dp-result h2 { font-size: 1.2rem; }
.dp-none { padding: 14px 18px; background: #fff3cd; border-radius: 6px; color: var(--ink); }
.pack .dp-none { display: inline-block; text-align: left; }

/* ---- check-out survey (public/www/static/survey.js, data/www/survey.json) -------------------------------------------------- */
.sv { padding: clamp(28px, 5vw, 72px) 20px; }
.sv-in { max-width: 680px; margin: 0 auto; }
.sv-in h1 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.sv-intro { font-size: 1.05rem; margin-bottom: 1.6em; }
.sv-q { border: 0; border-top: 1px solid #dbe6ec; margin: 0; padding: 1.4em 0 1.2em; min-width: 0; }
.sv-q[hidden] { display: none; }
.sv-q legend { font-weight: 700; padding: 0; margin-bottom: .6em; line-height: 1.4; float: left; width: 100%; }
.sv-q legend + * { clear: both; }
.sv-q .hint { font-size: .9rem; color: var(--muted); margin: -.2em 0 .8em; clear: both; }
.sv .req { color: #c9302c; }
.sv-q textarea { width: 100%; font: inherit; padding: .7em .8em; border: 1px solid #a9bcc7; border-radius: 4px; resize: vertical; }
.sv-choice { display: flex; flex-wrap: wrap; gap: 12px; }
.sv-choice label, .sv-yn label, .sv-scale label { cursor: pointer; }
.sv-choice label { flex: 1 1 140px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px; border: 2px solid #cfdde5; border-radius: 8px; text-align: center; }
.sv input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sv-choice label:has(input:checked), .sv-yn label:has(input:checked), .sv-scale label:has(input:checked) { border-color: var(--main); background: #e6f4fa; }
.sv-choice label:has(input:focus-visible), .sv-yn label:has(input:focus-visible), .sv-scale label:has(input:focus-visible), .sv-stars input:focus-visible + label { outline: 3px solid var(--shade1); outline-offset: 2px; }
.sv-stars { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.sv-stars label { font-size: 2.2rem; line-height: 1; color: #c5d2da; cursor: pointer; padding: 0 2px; }
.sv-stars input:checked ~ label, .sv-stars label:hover, .sv-stars label:hover ~ label { color: #f0a800; }
.sv-yn { display: flex; gap: 12px; }
.sv-yn label { padding: .6em 1.6em; border: 2px solid #cfdde5; border-radius: 999px; }
.sv-scale { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; }
.sv-scale label { text-align: center; padding: .65em 0; border: 2px solid #cfdde5; border-radius: 6px; font-weight: 700; }
.sv-ends { display: flex; justify-content: space-between; gap: 10px; font-size: .8rem; color: var(--muted); margin-top: 6px; }
.sv-ends span:nth-child(2) { text-align: center; }
.sv-form .hp { position: absolute; left: -9999px; }
.sv-form .btn { margin-top: 1.6em; width: 100%; padding: .9em; font-size: 1rem; }
.sv-form .btn[disabled] { opacity: .6; cursor: wait; }
.sv-lang { margin-top: 2em; font-size: .9rem; text-align: center; }
@media (max-width: 560px) { .sv-scale { grid-template-columns: repeat(5, 1fr); } }

/* my own pages (no old counterpart) keep ordinary paragraph spacing */
.dp-in p, .sv-in p, .dp-result p, .ev-more { margin: 0 0 1em; }
.dp-in p:last-child, .sv-in p:last-child, .dp-result p:last-child { margin-bottom: 0; }