/*
Theme Name: Sunrise Lagoon
Theme URI: https://ntdigital.co.nz/
Author: NT Digital
Author URI: https://ntdigital.co.nz/
Description: A warm, uncluttered theme for island tour operators. Built to pair with the Sunrise Lagoon Tours plugin, with a one-click page setup, an editable home page, and a lagoon blue and reef green palette.
Version: 1.18.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sunrise-lagoon
Tags: blog, one-column, custom-menu, custom-logo, featured-images, translation-ready, block-styles, wide-blocks
*/

/* ==========================================================================
   Tokens
   ========================================================================== */

:root {
	--sl-navy: #0b3b66;
	--sl-navy-deep: #072741;
	--sl-lagoon: #12a6c9;
	--sl-lagoon-soft: #d6f0f7;
	--sl-reef: #17a88b;
	--sl-reef-soft: #dcf3ed;
	--sl-sun: #f2870f;
	--sl-sand: #f8f4ea;
	--sl-ink: #14202e;
	--sl-ink-soft: #566577;
	--sl-rule: #e3e8ef;
	--sl-white: #ffffff;

	--sl-display: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--sl-body: "Newsreader", Georgia, "Times New Roman", serif;

	--sl-wrap: 72rem;
	--sl-narrow: 44rem;
	--sl-gutter: clamp(1.25rem, 4vw, 3rem);
	--sl-section: clamp(3.5rem, 8vw, 6.5rem);
	--sl-radius: 16px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}

body {
	margin: 0;
	background: var(--sl-white);
	color: var(--sl-ink);
	font-family: var(--sl-body);
	font-size: 1.0625rem;
	line-height: 1.7;
	font-optical-sizing: auto;
}

img, svg, video {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--sl-lagoon);
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
}

a:hover,
a:focus {
	color: var(--sl-navy);
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--sl-sun);
	outline-offset: 2px;
	border-radius: 4px;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .6em;
	font-family: var(--sl-display);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -.02em;
	color: var(--sl-navy);
}

h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.55rem); }
h4 { font-size: 1.1rem; }

p, ul, ol, blockquote, figure, table {
	margin: 0 0 1.25rem;
}

blockquote {
	padding-left: 1.25rem;
	border-left: 3px solid var(--sl-reef);
	font-size: 1.15rem;
	color: var(--sl-ink-soft);
}

hr {
	height: 1px;
	margin: 2.5rem 0;
	border: 0;
	background: var(--sl-rule);
}

table {
	width: 100%;
	border-collapse: collapse;
}

th, td {
	padding: .6rem .5rem;
	border-bottom: 1px solid var(--sl-rule);
	text-align: left;
}

code, pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .92em;
}

pre {
	padding: 1rem;
	overflow-x: auto;
	background: var(--sl-sand);
	border-radius: 10px;
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.sl-wrap {
	width: 100%;
	max-width: var(--sl-wrap);
	margin: 0 auto;
	padding-inline: var(--sl-gutter);
}

.sl-narrow {
	max-width: var(--sl-narrow);
}

.sl-section {
	padding-block: var(--sl-section);
}

.sl-section--sand { background: var(--sl-sand); }
.sl-section--tint { background: var(--sl-lagoon-soft); }

.sl-section__head {
	max-width: 40rem;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.sl-section__head p {
	margin: 0;
	font-size: 1.1rem;
	color: var(--sl-ink-soft);
}

.sl-section__head--center {
	margin-inline: auto;
	text-align: center;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.sl-skip {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	z-index: 999;
	padding: .75rem 1.25rem;
	background: var(--sl-navy);
	color: #fff;
}

.sl-skip:focus {
	left: 1rem;
	top: 1rem;
	width: auto;
	height: auto;
	overflow: visible;
	clip: auto;
	color: #fff;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.sl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .85rem 1.75rem;
	border: 2px solid transparent;
	border-radius: 999px;
	background: var(--sl-reef);
	color: #fff;
	font-family: var(--sl-display);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: .01em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.sl-btn:hover,
.sl-btn:focus {
	background: #128a71;
	color: #fff;
}

.sl-btn--sun {
	background: var(--sl-sun);
	color: #2b1800;
}

.sl-btn--sun:hover,
.sl-btn--sun:focus {
	background: #d9760a;
	color: #2b1800;
}

.sl-btn--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, .7);
	color: #fff;
}

.sl-btn--ghost:hover,
.sl-btn--ghost:focus {
	background: rgba(255, 255, 255, .14);
	border-color: #fff;
	color: #fff;
}

.sl-btn--outline {
	background: transparent;
	border-color: var(--sl-navy);
	color: var(--sl-navy);
}

.sl-btn--outline:hover,
.sl-btn--outline:focus {
	background: var(--sl-navy);
	color: #fff;
}

/* ==========================================================================
   Header
   ========================================================================== */

.sl-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, .96);
	border-bottom: 1px solid var(--sl-rule);
	backdrop-filter: saturate(140%) blur(8px);
}

.admin-bar .sl-header { top: 32px; }

@media (max-width: 782px) {
	.admin-bar .sl-header { top: 46px; }
}

.sl-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 5.9rem;
}

.sl-brand {
	display: flex;
	align-items: center;
	gap: .85rem;
	text-decoration: none;
	color: var(--sl-navy);
}

.sl-brand img {
	max-height: 78px;
	width: auto;
}

.sl-brand__name {
	font-family: var(--sl-display);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.01em;
}

.sl-brand__tag {
	display: block;
	font-family: var(--sl-body);
	font-size: .82rem;
	font-weight: 400;
	color: var(--sl-ink-soft);
}

.sl-nav {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.sl-nav ul {
	display: flex;
	align-items: center;
	gap: 1.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sl-nav li {
	position: relative;
}

.sl-nav a {
	display: block;
	padding: .35rem 0;
	font-family: var(--sl-display);
	font-size: .98rem;
	font-weight: 500;
	color: var(--sl-ink);
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

.sl-nav a:hover,
.sl-nav a:focus,
.sl-nav .current-menu-item > a,
.sl-nav .current_page_item > a {
	color: var(--sl-navy);
	border-bottom-color: var(--sl-reef);
}

.sl-nav .sub-menu {
	position: absolute;
	left: 0;
	top: 100%;
	display: none;
	min-width: 12rem;
	padding: .5rem 0;
	background: #fff;
	border: 1px solid var(--sl-rule);
	border-radius: 10px;
	box-shadow: 0 12px 28px rgba(7, 39, 65, .12);
}

.sl-nav li:hover > .sub-menu,
.sl-nav li:focus-within > .sub-menu {
	display: block;
}

.sl-nav .sub-menu a {
	padding: .5rem 1rem;
	border-bottom: 0;
}

.sl-header__cta {
	flex: 0 0 auto;
}

.sl-toggle {
	display: none;
	align-items: center;
	gap: .5rem;
	min-height: 44px;
	padding: .6rem .9rem;
	border: 1px solid var(--sl-rule);
	border-radius: 10px;
	background: #fff;
	font-family: var(--sl-display);
	font-size: .95rem;
	font-weight: 600;
	color: var(--sl-navy);
	cursor: pointer;
}

.sl-toggle__bars,
.sl-toggle__bars::before,
.sl-toggle__bars::after {
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
	content: "";
}

.sl-toggle__bars {
	position: relative;
}

.sl-toggle__bars::before { position: absolute; top: -6px; }
.sl-toggle__bars::after  { position: absolute; top: 6px; }

@media (max-width: 960px) {
	.sl-toggle { display: inline-flex; }

	.sl-nav {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 1rem var(--sl-gutter) 1.5rem;
		background: #fff;
		border-bottom: 1px solid var(--sl-rule);
	}

	.sl-nav.is-open { display: flex; }

	.sl-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.sl-nav a {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: .8rem 0;
		border-bottom: 1px solid var(--sl-rule);
	}

	.sl-nav .sub-menu {
		position: static;
		display: block;
		border: 0;
		box-shadow: none;
		padding: 0 0 0 1rem;
	}

	.sl-header__cta { display: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.sl-hero {
	position: relative;
	padding-block: clamp(3.5rem, 9vw, 7rem) clamp(5rem, 10vw, 8rem);
	background: linear-gradient(165deg, #12a6c9 0%, #0e7fa8 42%, #0b3b66 100%);
	color: #fff;
	overflow: hidden;
	text-align: center;
	isolation: isolate;
}

.sl-hero--image {
	background-size: cover;
	background-position: center;
}

.sl-hero--image::before {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(170deg, rgba(18, 166, 201, .82), rgba(11, 59, 102, .92));
	content: "";
}

.sl-hero__inner {
	position: relative;
	max-width: 48rem;
	margin: 0 auto;
}

.sl-hero h1 {
	margin: 0;
	color: #fff;
	text-shadow: 0 2px 20px rgba(7, 39, 65, .25);
}

.sl-hero__lede {
	margin: 1.15rem auto 2rem;
	max-width: 34rem;
	font-size: clamp(1.1rem, 2.2vw, 1.35rem);
	color: rgba(255, 255, 255, .94);
}

.sl-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .9rem;
}

.sl-hero__strip {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .6rem 2rem;
	margin-top: 2.5rem;
	font-family: var(--sl-display);
	font-size: .95rem;
	color: rgba(255, 255, 255, .88);
}

.sl-hero__strip span {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
}

.sl-hero__strip span::before {
	width: .45rem;
	height: .45rem;
	border-radius: 50%;
	background: var(--sl-sun);
	content: "";
}

/* The wave is pulled back up over the coloured band above it, so its
   transparent half shows that colour and the filled half carries the page
   background down. Without the negative pull it is white on white. */
.sl-wave {
	--sl-wave-h: clamp(30px, 5vw, 72px);
	display: block;
	position: relative;
	z-index: 2;
	width: 100%;
	height: var(--sl-wave-h);
	margin-top: calc(var(--sl-wave-h) * -1);
	margin-bottom: -1px;
	color: var(--sl-white);
	pointer-events: none;
}

.sl-wave--sand { color: var(--sl-sand); }

/* ==========================================================================
   Highlights
   ========================================================================== */

.sl-highlights {
	display: grid;
	gap: 1.75rem;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.sl-highlight {
	padding-top: 1.1rem;
	border-top: 3px solid var(--sl-reef);
}

.sl-highlight:nth-child(2) { border-top-color: var(--sl-lagoon); }
.sl-highlight:nth-child(3) { border-top-color: var(--sl-sun); }

.sl-highlight h3 {
	margin-bottom: .35rem;
	font-size: 1.15rem;
}

.sl-highlight p {
	margin: 0;
	color: var(--sl-ink-soft);
}

/* ==========================================================================
   About / split media
   ========================================================================== */

.sl-split {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	align-items: center;
}

.sl-split__media img,
.sl-split__media .sl-photo {
	width: 100%;
	border-radius: var(--sl-radius);
}

.sl-split__media .sl-photo--empty {
	aspect-ratio: 4 / 3;
}

.sl-split__media {
	position: relative;
}

/* Photo on the right. Only from the width at which the two actually sit side
   by side, or the order would flip on a phone and drop the text below. */
@media (min-width: 40rem) {
	.sl-split--flip .sl-split__media { order: 2; }
	.sl-split--flip .sl-split__body  { order: 1; }
}

.sl-split__media::after {
	position: absolute;
	right: -14px;
	bottom: -14px;
	z-index: -1;
	width: 60%;
	height: 60%;
	border-radius: var(--sl-radius);
	background: var(--sl-reef-soft);
	content: "";
}

.sl-split__body h2 {
	margin-top: 0;
}

.sl-facts {
	display: grid;
	gap: .75rem 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	margin: 1.75rem 0 0;
	padding: 0;
	list-style: none;
}

.sl-facts li {
	padding-left: 1.5rem;
	position: relative;
	font-size: .98rem;
	color: var(--sl-ink-soft);
}

.sl-facts li::before {
	position: absolute;
	left: 0;
	top: .5rem;
	width: .5rem;
	height: .85rem;
	border: solid var(--sl-reef);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	content: "";
}

/* ==========================================================================
   Gallery
   ========================================================================== */

.sl-gallery {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.sl-gallery figure {
	margin: 0;
	overflow: hidden;
	border-radius: var(--sl-radius);
	aspect-ratio: 4 / 3;
}

.sl-gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ==========================================================================
   Call to action band
   ========================================================================== */

.sl-cta {
	position: relative;
	padding-block: clamp(3rem, 7vw, 5rem);
	background: linear-gradient(135deg, var(--sl-navy) 0%, var(--sl-reef) 180%);
	color: #fff;
	text-align: center;
}

.sl-cta h2 {
	color: #fff;
	margin-bottom: .5rem;
}

.sl-cta p {
	max-width: 34rem;
	margin: 0 auto 1.75rem;
	color: rgba(255, 255, 255, .9);
}

/* ==========================================================================
   Contact
   ========================================================================== */

.sl-contact-grid {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.sl-contact-card {
	padding: 1.5rem;
	background: #fff;
	border: 1px solid var(--sl-rule);
	border-radius: var(--sl-radius);
}

.sl-contact-card h3 {
	margin-bottom: .75rem;
	font-size: 1.1rem;
}

.sl-contact-card ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sl-contact-card li {
	padding: .4rem 0;
	border-bottom: 1px solid var(--sl-rule);
}

.sl-contact-card li:last-child {
	border-bottom: 0;
}

.sl-contact-card a {
	font-weight: 600;
	text-decoration: none;
}

/* ==========================================================================
   Page and post content
   ========================================================================== */

.sl-page-header {
	padding-block: clamp(2.75rem, 6vw, 4.5rem) calc(clamp(2.75rem, 6vw, 4.5rem) + var(--sl-wave-h, 60px));
	background: var(--sl-navy);
	color: #fff;
}

.sl-page-header h1 {
	margin: 0;
	color: #fff;
}

.sl-page-header p {
	margin: .75rem 0 0;
	max-width: 40rem;
	color: rgba(255, 255, 255, .85);
}

.sl-entry {
	padding-block: var(--sl-section);
}

.sl-entry__content > * {
	max-width: var(--sl-narrow);
	margin-inline: auto;
}

.sl-entry__content > .alignwide,
.sl-entry__content > .alignfull,
.sl-entry__content > .sl-tours,
.sl-entry__content > .sl-full {
	max-width: none;
}

.sl-entry--wide .sl-entry__content > * {
	max-width: none;
}

.sl-entry__thumb {
	margin-bottom: 2.5rem;
	border-radius: var(--sl-radius);
	overflow: hidden;
}

.sl-meta {
	margin-bottom: 1.5rem;
	font-family: var(--sl-display);
	font-size: .9rem;
	color: var(--sl-ink-soft);
}

.sl-posts {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.sl-post-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--sl-rule);
	border-radius: var(--sl-radius);
	overflow: hidden;
}

.sl-post-card img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.sl-post-card__body {
	padding: 1.25rem 1.35rem 1.5rem;
}

.sl-post-card h2 {
	font-size: 1.25rem;
	margin-bottom: .4rem;
}

.sl-post-card h2 a {
	color: var(--sl-navy);
	text-decoration: none;
}

.sl-pagination {
	margin-top: 3rem;
	text-align: center;
}

.sl-pagination .page-numbers {
	display: inline-block;
	padding: .5rem .9rem;
	margin: 0 .15rem;
	border-radius: 8px;
	text-decoration: none;
}

.sl-pagination .current {
	background: var(--sl-navy);
	color: #fff;
}

/* Blocks and alignment */

.alignfull {
	margin-inline: calc(50% - 50vw);
	max-width: 100vw;
}

.alignwide {
	max-width: var(--sl-wrap);
}

.alignleft {
	float: left;
	margin: 0 1.5rem 1rem 0;
}

.alignright {
	float: right;
	margin: 0 0 1rem 1.5rem;
}

.aligncenter {
	margin-inline: auto;
}

.wp-caption-text,
.wp-element-caption {
	font-size: .88rem;
	color: var(--sl-ink-soft);
}

/* ==========================================================================
   Forms
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="password"],
select,
textarea {
	width: 100%;
	padding: .7rem .85rem;
	border: 1px solid #ccd5e0;
	border-radius: 10px;
	background: #fff;
	font: inherit;
	font-size: 1rem;
	color: var(--sl-ink);
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--sl-lagoon);
	outline: 3px solid rgba(18, 166, 201, .3);
	outline-offset: 1px;
}

/* The tours plugin styles its own buttons, so the theme leaves those alone
   rather than outranking them with an attribute selector. */
input[type="submit"]:not(.slt-btn),
button[type="submit"]:not(.slt-btn) {
	width: auto;
	padding: .85rem 1.75rem;
	border: 0;
	border-radius: 999px;
	background: var(--sl-reef);
	color: #fff;
	font-family: var(--sl-display);
	font-weight: 600;
	cursor: pointer;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.sl-footer {
	padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
	background: var(--sl-navy-deep);
	color: rgba(255, 255, 255, .8);
	font-size: .98rem;
}

.sl-footer h2,
.sl-footer h3,
.sl-footer .widget-title {
	margin-bottom: .9rem;
	font-size: 1.05rem;
	color: #fff;
}

.sl-footer a {
	color: #9fe3f3;
	text-decoration: none;
}

.sl-footer a:hover,
.sl-footer a:focus {
	color: #fff;
	text-decoration: underline;
}

.sl-footer__grid {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.sl-footer__brand img {
	max-height: 90px;
	margin-bottom: 1rem;
}

.sl-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sl-footer li {
	padding: .25rem 0;
}

.sl-footer__base {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, .15);
	font-size: .9rem;
}

.sl-footer__base p {
	margin: 0;
}

/* ==========================================================================
   Plugin bridge — keeps the tours plugin sitting inside the theme rhythm
   ========================================================================== */

.sl-entry__content .slt-tours,
.sl-entry__content .slt-booking,
.sl-section .slt-tours {
	margin-block: 0;
}

.sl-notice {
	max-width: var(--sl-narrow);
	margin: 0 auto;
	padding: 1.25rem 1.5rem;
	background: var(--sl-sand);
	border-left: 4px solid var(--sl-sun);
	border-radius: 10px;
	color: var(--sl-ink-soft);
}

/* ==========================================================================
   Photos and their drawn stand-ins
   ========================================================================== */

.sl-photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sl-photo--empty {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 100%;
	overflow: hidden;
	background: var(--sl-lagoon);
}

.sl-photo--empty svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* ==========================================================================
   Reassurance strip
   ========================================================================== */

.sl-trust {
	position: relative;
	z-index: 2;
	margin-top: -2.5rem;
	padding-bottom: 0;
}

.sl-trust__list {
	display: grid;
	gap: 0;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--sl-rule);
	border-radius: var(--sl-radius);
	box-shadow: 0 18px 44px -28px rgba(7, 39, 65, .45);
	overflow: hidden;
}

.sl-trust__item {
	display: flex;
	align-items: flex-start;
	gap: .85rem;
	padding: 1.4rem 1.5rem;
	border-right: 1px solid var(--sl-rule);
}

.sl-trust__item:last-child {
	border-right: 0;
}

.sl-trust__mark {
	flex: 0 0 auto;
	width: 1.5rem;
	height: 1.5rem;
	margin-top: .15rem;
	border-radius: 50%;
	background: var(--sl-reef);
	position: relative;
}

.sl-trust__mark::before {
	position: absolute;
	left: 50%;
	top: 46%;
	width: .38rem;
	height: .7rem;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: translate(-50%, -50%) rotate(45deg);
	content: "";
}

.sl-trust__item--2 .sl-trust__mark { background: var(--sl-lagoon); }
.sl-trust__item--3 .sl-trust__mark { background: var(--sl-navy); }
.sl-trust__item--4 .sl-trust__mark { background: var(--sl-sun); }

.sl-trust__body {
	display: block;
	line-height: 1.45;
}

.sl-trust__body strong {
	display: block;
	font-family: var(--sl-display);
	font-size: 1rem;
	font-weight: 600;
	color: var(--sl-navy);
}

.sl-trust__body span {
	display: block;
	font-size: .92rem;
	color: var(--sl-ink-soft);
}

@media (max-width: 860px) {
	.sl-trust {
		margin-top: 0;
		padding-top: clamp(2rem, 6vw, 3rem);
	}

	.sl-trust__item {
		border-right: 0;
		border-bottom: 1px solid var(--sl-rule);
	}

	.sl-trust__item:last-child {
		border-bottom: 0;
	}
}

/* ==========================================================================
   What we offer
   ========================================================================== */

.sl-services {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.sl-service {
	display: flex;
	flex-direction: column;
	padding: 1.6rem 1.5rem 1.5rem;
	background: #fff;
	border: 1px solid var(--sl-rule);
	border-radius: var(--sl-radius);
	transition: border-color .2s ease, box-shadow .2s ease;
}

.sl-service:hover {
	border-color: #cfd9e6;
	box-shadow: 0 16px 34px -26px rgba(7, 39, 65, .5);
}

.sl-service__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.1rem;
	height: 3.1rem;
	margin-bottom: 1.1rem;
	border-radius: 14px;
	background: var(--sl-reef-soft);
	color: var(--sl-reef);
}

.sl-service__icon .sl-icon {
	width: 1.6rem;
	height: 1.6rem;
	vertical-align: 0;
}

.sl-service:nth-child(3n+2) .sl-service__icon {
	background: var(--sl-lagoon-soft);
	color: var(--sl-lagoon-deep);
}

.sl-service:nth-child(3n+3) .sl-service__icon {
	background: #fdf0da;
	color: #b8690b;
}

.sl-service__name {
	margin: 0 0 .45rem;
	font-size: 1.2rem;
}

.sl-service__text {
	margin: 0;
	font-size: .95rem;
	line-height: 1.6;
	color: var(--sl-ink-soft);
}

@media (prefers-reduced-motion: reduce) {
	.sl-service { transition: none; }
}

/* ==========================================================================
   Where will we take you
   ========================================================================== */

.sl-section--deep {
	background: linear-gradient(170deg, var(--sl-navy-deep) 0%, var(--sl-navy) 60%, #0e5f86 100%);
	color: rgba(255, 255, 255, .85);
}

.sl-section__head--light h2 {
	color: #fff;
}

.sl-section__head--light p {
	color: rgba(255, 255, 255, .82);
}

.sl-islands {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.sl-island {
	display: flex;
	flex-direction: column;
	padding: 1.6rem 1.5rem 1.5rem;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--sl-radius);
	transition: background-color .2s ease, border-color .2s ease;
}

.sl-island:hover {
	background: rgba(255, 255, 255, .1);
	border-color: rgba(255, 255, 255, .26);
}

/* The icon does the work a photo would, so it is given room. */
.sl-island__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.1rem;
	height: 3.1rem;
	margin-bottom: 1.1rem;
	border-radius: 14px;
	background: rgba(159, 227, 243, .14);
	border: 1px solid rgba(159, 227, 243, .28);
	color: #9fe3f3;
}

.sl-island__icon .sl-icon {
	width: 1.6rem;
	height: 1.6rem;
	vertical-align: 0;
}

.sl-island:nth-child(3n+2) .sl-island__icon {
	background: rgba(63, 200, 176, .14);
	border-color: rgba(63, 200, 176, .3);
	color: #6ee0c6;
}

.sl-island:nth-child(3n+3) .sl-island__icon {
	background: rgba(255, 215, 154, .13);
	border-color: rgba(255, 215, 154, .3);
	color: #ffd79a;
}

.sl-island__name {
	margin: 0 0 .45rem;
	font-size: 1.2rem;
	color: #fff;
}

.sl-island__text {
	margin: 0 0 1.2rem;
	font-size: .95rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, .78);
}

.sl-island__link {
	margin-top: auto;
	align-self: flex-start;
	font-family: var(--sl-display);
	font-size: .93rem;
	font-weight: 600;
	color: #ffd79a;
	text-decoration: none;
	border-bottom: 2px solid rgba(255, 215, 154, .35);
	padding-bottom: 1px;
}

.sl-island__link:hover,
.sl-island__link:focus {
	color: #fff;
	border-bottom-color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.sl-island { transition: none; }
}

/* ==========================================================================
   More about the packages
   ========================================================================== */

.sl-faq {
	max-width: 52rem;
	margin: 0 auto;
	background: #fff;
	border: 1px solid var(--sl-rule);
	border-radius: var(--sl-radius);
	overflow: hidden;
}

.sl-faq__item {
	border-bottom: 1px solid var(--sl-rule);
}

.sl-faq__item:last-child {
	border-bottom: 0;
}

.sl-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.15rem 1.4rem;
	font-family: var(--sl-display);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--sl-navy);
	cursor: pointer;
	list-style: none;
}

.sl-faq__q::-webkit-details-marker {
	display: none;
}

.sl-faq__q::after {
	flex: 0 0 auto;
	width: .6rem;
	height: .6rem;
	border: solid var(--sl-reef);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform .2s ease;
	content: "";
}

.sl-faq__item[open] > .sl-faq__q::after {
	transform: rotate(-135deg);
}

.sl-faq__item[open] > .sl-faq__q {
	background: var(--sl-reef-soft);
}

.sl-faq__a {
	padding: 0 1.4rem 1.35rem;
}

.sl-faq__a p {
	margin: 0;
	color: var(--sl-ink-soft);
}

/* ==========================================================================
   Health and safety
   ========================================================================== */

.sl-safety {
	display: grid;
	gap: clamp(2rem, 5vw, 3.5rem);
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	align-items: start;
}

.sl-safety__intro h2 {
	margin-top: 0;
}

.sl-safety__intro p {
	color: var(--sl-ink-soft);
}

.sl-safety__media {
	margin: 1.5rem 0;
	aspect-ratio: 4 / 3;
	border-radius: var(--sl-radius);
	overflow: hidden;
}

.sl-safety__list {
	display: grid;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sl-safety__list li {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}

.sl-safety__icon {
	flex: 0 0 auto;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 10px;
	background: var(--sl-reef-soft);
	position: relative;
}

.sl-safety__icon::before {
	position: absolute;
	left: 50%;
	top: 50%;
	width: .55rem;
	height: 1rem;
	border: solid var(--sl-reef);
	border-width: 0 2.5px 2.5px 0;
	transform: translate(-50%, -60%) rotate(45deg);
	content: "";
}

.sl-safety__list h3 {
	margin-bottom: .25rem;
	font-size: 1.05rem;
}

.sl-safety__list p {
	margin: 0;
	font-size: .96rem;
	color: var(--sl-ink-soft);
}

/* ==========================================================================
   Lead paragraph, used at the top of the starter pages
   ========================================================================== */

.sl-entry__content .sl-lead {
	font-size: clamp(1.12rem, 2.2vw, 1.3rem);
	line-height: 1.6;
	color: var(--sl-navy);
}

/* ==========================================================================
   How booking works
   ========================================================================== */

.sl-steps {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.sl-step {
	position: relative;
	padding: 1.75rem 1.4rem 1.6rem;
	background: #fff;
	border: 1px solid var(--sl-rule);
	border-radius: var(--sl-radius);
}

.sl-step__n {
	position: absolute;
	top: -0.9rem;
	left: 1.4rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 50%;
	background: var(--sl-navy);
	color: #fff;
	font-family: var(--sl-display);
	font-size: .95rem;
	font-weight: 700;
}

.sl-step h3 {
	margin: .25rem 0 .4rem;
	font-size: 1.1rem;
}

.sl-step p {
	margin: 0;
	font-size: .96rem;
	color: var(--sl-ink-soft);
}

.sl-steps__action {
	margin: 2.25rem 0 0;
	text-align: center;
}

/* ==========================================================================
   Guest reviews
   ========================================================================== */

.sl-reviews {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.sl-review {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 1.6rem 1.5rem 1.4rem;
	background: var(--sl-lagoon-soft);
	border-radius: var(--sl-radius);
}

.sl-review blockquote {
	flex: 1;
	margin: 0 0 1.1rem;
	padding: 0;
	border: 0;
	font-size: 1.02rem;
	line-height: 1.6;
	color: var(--sl-ink);
}

.sl-review blockquote::before {
	content: "\201C";
	float: left;
	margin: -.1em .12em 0 -.06em;
	font-family: var(--sl-body);
	font-size: 2.4rem;
	line-height: 1;
	color: var(--sl-lagoon);
}

.sl-review figcaption {
	font-size: .9rem;
	color: var(--sl-ink-soft);
}

.sl-review figcaption strong {
	display: block;
	font-family: var(--sl-display);
	color: var(--sl-navy);
}

.sl-reviews__link {
	margin: 1.75rem 0 0;
	text-align: center;
	font-size: .95rem;
}

/* ==========================================================================
   Phones and tablets
   ========================================================================== */

@media (max-width: 782px) {

	/* Phone, WhatsApp and email are the links that matter most on a phone,
	   so they get a full-width row rather than a line of text. */
	.sl-contact-card li {
		padding: 0;
	}

	.sl-contact-card li a {
		display: block;
		padding: .8rem .25rem;
	}

	.sl-footer li {
		padding: 0;
	}

	.sl-footer li a {
		display: inline-block;
		padding: .55rem 0;
	}

	/* Forms: 16px stops iOS zooming in when a field takes focus. */
	input[type="text"],
	input[type="email"],
	input[type="url"],
	input[type="tel"],
	input[type="number"],
	input[type="date"],
	input[type="search"],
	input[type="password"],
	select,
	textarea {
		font-size: 16px;
	}

	.sl-btn {
		padding: .9rem 1.5rem;
	}

	.sl-hero__actions .sl-btn {
		width: 100%;
	}

	.sl-nav a {
		padding: .95rem 0;
	}

	.sl-faq__q {
		padding: 1.1rem 1.1rem;
		font-size: 1rem;
	}

	.sl-faq__a {
		padding: 0 1.1rem 1.2rem;
	}

	.sl-trust__item {
		padding: 1.1rem 1.2rem;
	}

	.sl-step {
		padding-top: 2rem;
	}

	.sl-safety__list li {
		gap: .85rem;
	}

	.sl-entry__content {
		overflow-wrap: break-word;
	}

	/* Tables in page content scroll rather than stretch the layout. */
	.sl-entry__content table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}
}

@media (max-width: 480px) {

	:root {
		--sl-gutter: 1.1rem;
	}

	.sl-hero__strip {
		gap: .45rem 1.1rem;
		font-size: .9rem;
	}

	.sl-split__media::after {
		display: none;
	}

	.sl-review blockquote::before {
		font-size: 2rem;
	}

	.sl-contact__list {
		gap: .35rem 1.25rem;
	}
}

/* ==========================================================================
   Page builders
   ========================================================================== */

/* A page built with Elementor sets its own widths, so the theme's reading
   measure is removed for it. */
.sl-elementor .sl-entry__content > * {
	max-width: none;
	margin-inline: 0;
}

/* The full width template drops the reading measure but keeps a gutter.
   Without one, plain blocks sit hard against the edge of the screen. */
.sl-entry--full {
	padding-inline: 0;
}

.sl-entry--full > .sl-entry__content {
	width: 100%;
	padding-inline: var(--sl-gutter);
}

.sl-entry--full > .sl-entry__content > * {
	max-width: var(--sl-wrap);
	margin-inline: auto;
}

/* Blocks that ask to break out still do. */
.sl-entry--full > .sl-entry__content > .alignfull {
	max-width: none;
	margin-inline: calc(var(--sl-gutter) * -1);
	width: calc(100% + var(--sl-gutter) * 2);
}

/* A page actually built with Elementor runs edge to edge, because Elementor
   draws its own sections and supplies its own padding. */
.sl-elementor .sl-entry--full > .sl-entry__content {
	padding-inline: 0;
}

.sl-elementor .sl-entry--full > .sl-entry__content > * {
	max-width: none;
	margin-inline: 0;
}

.sl-entry--bare {
	padding-block: 0;
}

/* Elementor supplies its own spacing, so the theme stops adding its own. */
.sl-elementor .sl-entry {
	padding-block: 0;
}

.sl-elementor .sl-entry__content > .elementor {
	width: 100%;
}

/* Galleries, whether from the block editor or Elementor. */
.sl-entry__content .wp-block-gallery {
	margin-bottom: 1.5rem;
}

.sl-entry__content .wp-block-gallery img {
	border-radius: 10px;
}

/* ==========================================================================
   Logo lockups
   ========================================================================== */

.sl-brand__logo {
	max-height: 74px;
	width: auto;
	flex: 0 0 auto;
}

.sl-footer__logo {
	max-width: 168px;
	height: auto;
	margin-bottom: 1rem;
}

@media (max-width: 480px) {
	.sl-brand__logo { max-height: 54px; }
	.sl-brand__name { font-size: 1rem; }
}

/* ==========================================================================
   Footer detail
   ========================================================================== */

.sl-footer__col h3 {
	margin-bottom: .6rem;
}

.sl-footer__h-sub {
	margin-top: 1.6rem;
}

.sl-footer__pay {
	margin-top: 1rem;
	padding: .65rem .85rem;
	background: rgba(255, 255, 255, .07);
	border-left: 3px solid var(--sl-sun);
	border-radius: 6px;
	font-size: .92rem;
}

.sl-footer__contact a {
	font-weight: 600;
}

.sl-footer__widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 2rem;
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid rgba(255, 255, 255, .15);
}

.sl-footer__note {
	margin: 2.5rem 0 0;
	padding-top: 1.75rem;
	border-top: 1px solid rgba(255, 255, 255, .15);
	font-size: .92rem;
	color: rgba(255, 255, 255, .7);
}

.sl-footer__note + .sl-footer__base {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
}

/* The message form sitting inside the home contact section */

.sl-contact-form-slot {
	margin-top: 2.5rem;
}

.sl-contact-form-slot .slt-contact-form {
	margin: 0;
	background: #fff;
	border: 1px solid var(--sl-rule);
}

/* ==========================================================================
   Icons
   ========================================================================== */

.sl-icon {
	display: inline-block;
	width: 1.25em;
	height: 1.25em;
	vertical-align: -0.28em;
	flex: 0 0 auto;
	color: inherit;
}

/* Banner tick marks */

.sl-hero__tick {
	width: 1em;
	height: 1em;
	margin-right: .3rem;
	vertical-align: -0.16em;
	color: var(--sl-sun);
}

.sl-hero__strip span::before {
	display: none;
}

/* Reassurance strip */

.sl-trust__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.2rem;
	height: 2.2rem;
	border-radius: 11px;
	background: var(--sl-reef-soft);
	color: var(--sl-reef);
}

.sl-trust__mark::before {
	display: none;
}

.sl-trust__mark .sl-icon {
	width: 1.25rem;
	height: 1.25rem;
	vertical-align: 0;
}

.sl-trust__item--2 .sl-trust__mark { background: var(--sl-lagoon-soft); color: var(--sl-lagoon); }
.sl-trust__item--3 .sl-trust__mark { background: #e4ecf7; color: var(--sl-navy); }
.sl-trust__item--4 .sl-trust__mark { background: #fdf0da; color: #b8690b; }

/* Why us */

.sl-highlight__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	margin-bottom: .75rem;
	border-radius: 12px;
	background: var(--sl-reef-soft);
	color: var(--sl-reef);
}

.sl-highlight:nth-child(2) .sl-highlight__icon { background: var(--sl-lagoon-soft); color: var(--sl-lagoon-deep); }
.sl-highlight:nth-child(3) .sl-highlight__icon { background: #fdf0da; color: #b8690b; }

.sl-highlight__icon .sl-icon {
	width: 1.35rem;
	height: 1.35rem;
	vertical-align: 0;
}

/* Safety */

.sl-safety__icon .sl-icon {
	width: 1.3rem;
	height: 1.3rem;
	vertical-align: 0;
}

.sl-safety__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--sl-reef);
}

.sl-safety__icon::before {
	display: none;
}

/* Contact cards */

.sl-contact-card h3 {
	display: flex;
	align-items: center;
	gap: .5rem;
}

.sl-contact-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 9px;
	background: var(--sl-lagoon-soft);
	color: var(--sl-lagoon-deep);
}

.sl-contact-card__icon .sl-icon {
	width: 1.05rem;
	height: 1.05rem;
	vertical-align: 0;
}


/* ==========================================================================
   Contact page
   ========================================================================== */

/* Laid out here rather than relying on the core block stylesheet, so the two
   columns hold even if that is dequeued by a plugin or an optimiser.
   No wrap on the wide view: the 60/40 bases plus the gap add up to more than
   one line, so wrapping would drop the second column underneath. They shrink
   to absorb the gap instead. */
.sl-contact-columns {
	display: flex;
	flex-wrap: nowrap;
	gap: clamp(1.75rem, 4vw, 3.5rem);
	align-items: flex-start;
	margin-bottom: 0;
}

.sl-contact-columns > .wp-block-column {
	flex-grow: 1;
	flex-shrink: 1;
	min-width: 0;
}

.sl-contact-columns .wp-block-column > *:first-child {
	margin-top: 0;
}

.sl-contact-columns h2 {
	margin-top: 0;
	font-size: clamp(1.4rem, 2.6vw, 1.8rem);
}

.sl-contact-columns h3 {
	margin-top: 1.9rem;
	font-size: 1.1rem;
}

.sl-contact-columns ul {
	padding-left: 1.1rem;
}

.sl-contact-columns li {
	margin-bottom: .3rem;
	color: var(--sl-ink-soft);
}

/* The message form fills its column rather than sitting in a padded island. */
.sl-contact-columns .slt-contact-form {
	margin: 0;
}

/*
 * The plugin draws its contact block as a wide navy band, which is right
 * across a full page and wrong in a narrow column. Here it becomes a quiet
 * card so the message form stays the loudest thing on the page.
 */
.sl-contact-columns .slt-contact,
.sl-entry__content .slt-contact {
	/* Auto side margins, so this lines up with the centred text above it.
	   A plain "margin: 0 0 1.25rem" here left it hanging off to one side. */
	margin: 0 auto 1.25rem;
	padding: 1.1rem 1.25rem;
	background: #fff;
	border: 1px solid var(--sl-rule);
	border-left: 4px solid var(--sl-reef);
	border-radius: 12px;
	color: var(--sl-ink);
	text-align: left;
}

.sl-entry__content .slt-contact__title {
	margin: 0 0 .5rem;
	font-family: var(--sl-display);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--sl-ink-soft);
}

.sl-entry__content .slt-contact__list {
	display: block;
	gap: 0;
	text-align: left;
}

.sl-entry__content .slt-contact__list li {
	margin: 0;
	padding: .1rem 0;
	color: inherit;
}

.sl-entry__content .slt-contact__list a {
	display: inline-block;
	padding: .3rem 0;
	color: var(--sl-lagoon-deep);
	font-family: var(--sl-display);
	font-size: 1.02rem;
	font-weight: 600;
	border-bottom: 0;
	text-decoration: none;
}

.sl-entry__content .slt-contact__list a:hover,
.sl-entry__content .slt-contact__list a:focus {
	color: var(--sl-navy);
	text-decoration: underline;
}

/* The plugin draws its social chips for a dark band. On a page they sit on
   white, so they take the page's own colours. */
.sl-entry__content .slt-social {
	margin-top: 1rem;
}

.sl-entry__content .slt-social__link {
	background: var(--sl-lagoon-soft);
	border-color: transparent;
	color: var(--sl-lagoon-deep);
}

.sl-entry__content .slt-social__link:hover,
.sl-entry__content .slt-social__link:focus {
	background: var(--sl-lagoon);
	color: #fff;
}

@media (max-width: 781px) {

	.sl-contact-columns {
		flex-wrap: wrap;
		gap: 2rem;
	}

	.sl-contact-columns > .wp-block-column {
		flex-basis: 100% !important;
	}

	.sl-contact-columns h3 {
		margin-top: 1.5rem;
	}
}

/* Social links in the footer */

.sl-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
	margin: 1.1rem 0 0;
	padding: 0;
	list-style: none;
}

.sl-footer__social li {
	padding: 0;
}

/* Visible to screen readers, out of the way of everyone else. */
.sl-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Icon-only buttons: the footer column is narrow, and three named pills
   stacked one under another crowded it out. The name is still there for
   screen readers and as a hover title. */
.sl-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, .09);
	border: 1px solid rgba(255, 255, 255, .16);
	color: #9fe3f3;
	font-family: var(--sl-display);
	font-size: .85rem;
	font-weight: 600;
	text-decoration: none;
}

.sl-footer__social a:hover,
.sl-footer__social a:focus {
	background: rgba(255, 255, 255, .17);
	color: #fff;
	text-decoration: none;
}

.sl-footer__social svg {
	width: 1.15rem;
	height: 1.15rem;
	flex: 0 0 auto;
}

/* ---------------------------------------------------------------- figures
 *
 * A picture placed in page content with [sunrise_photo]. On a wide screen a
 * right aligned one sits beside the words; on a phone it goes full width,
 * because a floated image in a narrow column leaves unreadable slivers.
 */
.sl-figure {
	margin: 0 0 1.75rem;
}

.sl-figure__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--sl-radius);
	box-shadow: 0 14px 34px rgba(11, 59, 102, .16);
}

.sl-figure__caption {
	margin-top: .6rem;
	color: var(--sl-muted);
	font-size: .88rem;
	line-height: 1.5;
}

.sl-figure--square .sl-figure__img,
.sl-figure--wide .sl-figure__img,
.sl-figure--tall .sl-figure__img {
	object-fit: cover;
}

.sl-figure--square .sl-figure__img { aspect-ratio: 1 / 1; }
.sl-figure--wide .sl-figure__img   { aspect-ratio: 16 / 9; }
.sl-figure--tall .sl-figure__img   { aspect-ratio: 3 / 4; }

@media (min-width: 900px) {

	/* Scoped through the container, because .sl-entry__content > * sets both
	   max-width and auto side margins and would otherwise win. */
	.sl-entry__content > .sl-figure--right,
	.sl-entry__content > .sl-figure--left {
		max-width: 21rem;
	}

	/* A float goes to the edge of its containing block, which here is the full
	   width wrap, not the centred column of text. This pulls it back in line
	   with the words. */
	.sl-entry__content > .sl-figure--right {
		float: right;
		margin-inline: 2.25rem max(0px, calc((100% - var(--sl-narrow)) / 2));
	}

	.sl-entry__content > .sl-figure--left {
		float: left;
		margin-inline: max(0px, calc((100% - var(--sl-narrow)) / 2)) 2.25rem;
	}

	/* The float must not escape into the next section's heading. */
	.sl-entry__content h2 {
		clear: both;
	}
}

/* ------------------------------------------------------- FAQ on its own page
 *
 * The same accordion as the home page, a touch roomier since this page is
 * nothing but questions. It deliberately keeps the width of the text column
 * around it, so it lines up with the sentence above rather than hanging out
 * past it on both sides.
 */
.sl-entry__content > .sl-faq--page {
	max-width: var(--sl-narrow);
	margin: 1.5rem auto 2rem;
}

.sl-faq--page .sl-faq__q {
	padding: 1.25rem 1.5rem;
}

/* ------------------------------------------------------------------- reels
 *
 * Facebook reels are shot upright, so each sits in a 9:16 frame and the grid
 * drops to fewer columns rather than squeezing them narrower.
 */
.sl-reels {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	margin: 0 0 2rem;
}

.sl-entry__content > .sl-reels {
	max-width: none;
}

.sl-reels--1 { grid-template-columns: minmax(0, 22rem); justify-content: center; }
.sl-reels--2 { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.sl-reels--4 { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }

.sl-reel {
	margin: 0;
}

.sl-reel__frame {
	position: relative;
	aspect-ratio: 9 / 16;
	overflow: hidden;
	background: var(--sl-navy);
	border-radius: var(--sl-radius);
	box-shadow: 0 14px 34px rgba(11, 59, 102, .16);
}

.sl-reel__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.sl-reel__link {
	margin-top: .6rem;
	font-size: .9rem;
	text-align: center;
}

.sl-reels__empty {
	margin: 2rem 0;
	text-align: center;
}

/* --------------------------------------------------- booking on the home page
 *
 * The plugin's form is built for a page's text column. Dropped into a full
 * width section it would stretch across the screen, so it is held to a
 * readable width and given a card of its own against the tinted band.
 */
/* The form brings its own card, so this only holds it to a readable width.
   Wrapping it in a second card put a box inside a box. */
.sl-booking-slot {
	max-width: 62rem;
	margin: 0 auto;
}

.sl-booking-slot .slt-booking {
	margin: 0;
	box-shadow: 0 18px 44px rgba(11, 59, 102, .10);
}

/* ------------------------------------------------- the gallery on the Photos page
 *
 * One column on a phone, so a photo of the lagoon is worth looking at rather
 * than a thumbnail. Each picture keeps its own shape instead of being cropped
 * square, because these are real photographs, not product shots.
 */
.sl-gallery-grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
	margin: 1.5rem 0 2rem;
}

.sl-entry__content > .sl-gallery-grid {
	max-width: none;
}

.sl-gallery-grid__item {
	margin: 0;
}

.sl-gallery-grid__item img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--sl-radius);
	box-shadow: 0 14px 34px rgba(11, 59, 102, .14);
}

.sl-gallery-grid__item a {
	display: block;
	text-decoration: none;
}

.sl-gallery-grid__item figcaption {
	margin-top: .5rem;
	color: var(--sl-muted);
	font-size: .88rem;
}

@media (min-width: 40rem) {
	.sl-gallery-grid--2 { grid-template-columns: repeat(2, 1fr); }
	.sl-gallery-grid--3 { grid-template-columns: repeat(2, 1fr); }
	.sl-gallery-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 62rem) {
	.sl-gallery-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.sl-gallery-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Only the operator sees this, and only when there is nothing to show. */
.sl-gallery__note {
	padding: 1.1rem 1.35rem;
	background: var(--sl-sand);
	border-left: 4px solid var(--sl-sun);
	border-radius: 10px;
	color: var(--sl-ink-soft);
}