/* ESB Slipway — supplementary styles (most styling lives in theme.json). */

:root {
	--esb-radius: var(--wp--custom--radius--medium, 12px);
	--esb-radius-sm: var(--wp--custom--radius--small, 6px);
}

body { -webkit-font-smoothing: antialiased; }
::selection { background: var(--wp--preset--color--electric); color: var(--wp--preset--color--deep-water); }
.esb-hero-panel { background: var(--wp--preset--color--panel-dark) !important; border: 1px solid var(--wp--preset--color--rule-dark); }

/* ---------- Header ---------- */
.esb-topbar { font-size: 0.875rem; }
.esb-topbar a { color: inherit; text-decoration: none; }
.esb-topbar a:hover { text-decoration: underline; }
/* Floating header: the whole header part sticks, offset upwards by the
   top bar's height so the top bar scrolls away and the main bar stays.
   header.js measures the top bar into --esb-topbar-h. */
:root { --esb-admin-offset: 0px; }
body.admin-bar { --esb-admin-offset: 32px; }
@media (max-width: 782px) { body.admin-bar { --esb-admin-offset: 46px; } }
@media (max-width: 600px) { body.admin-bar { --esb-admin-offset: 0px; } }
.wp-site-blocks > header.wp-block-template-part,
.wp-site-blocks > .wp-block-template-part:first-child {
	position: sticky;
	top: calc(var(--esb-admin-offset) - var(--esb-topbar-h, 0px));
	z-index: 100;
}
.esb-header {
	border-bottom: 1px solid var(--wp--preset--color--line);
	transition: padding .25s ease, box-shadow .25s ease;
}
.esb-scrolled .esb-header {
	padding-top: 0.55rem !important;
	padding-bottom: 0.55rem !important;
	box-shadow: 0 6px 20px rgba(11, 42, 60, .10);
	border-bottom-color: transparent;
}
.esb-header .wp-block-site-logo img { transition: width .25s ease; }
.esb-scrolled .esb-header .wp-block-site-logo img { width: 36px !important; }
.esb-logo-mark { flex-shrink: 0; }

/* ---------- Eyebrow / lead ---------- */
.is-style-eyebrow {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.8125rem !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--electric-dark);
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
}
.is-style-eyebrow::before {
	content: "";
	width: 1.75em;
	height: 2px;
	background: var(--wp--preset--color--safety);
}
.has-deep-water-background-color .is-style-eyebrow,
.has-harbour-background-color .is-style-eyebrow,
.has-waterline-gradient-background .is-style-eyebrow,
.is-style-panel-dark .is-style-eyebrow { color: var(--wp--preset--color--electric); }

.is-style-lead { font-size: var(--wp--preset--font-size--large); line-height: 1.5; color: var(--wp--preset--color--slate); }
.has-deep-water-background-color .is-style-lead,
.has-waterline-gradient-background .is-style-lead,
.is-style-panel-dark .is-style-lead { color: var(--wp--preset--color--on-dark); }

/* Headings inherit light text on dark sections */
.has-deep-water-background-color :where(h1,h2,h3,h4,h5,h6),
.has-harbour-background-color :where(h1,h2,h3,h4,h5,h6),
.has-waterline-gradient-background :where(h1,h2,h3,h4,h5,h6),
.is-style-panel-dark :where(h1,h2,h3,h4,h5,h6) { color: var(--wp--preset--color--white); }
.has-deep-water-background-color a:where(:not(.wp-element-button)),
.has-waterline-gradient-background a:where(:not(.wp-element-button)),
.is-style-panel-dark a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--electric); }

/* ---------- Cards ---------- */
.is-style-card {
	background: var(--wp--preset--color--white);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--line) 70%, var(--wp--preset--color--slate));
	border-radius: var(--esb-radius);
	box-shadow: 0 1px 2px rgba(11,42,60,.08), 0 12px 32px rgba(11,42,60,.12);
	height: 100%;
	transition: transform .2s ease, box-shadow .2s ease;
}
.is-style-card:has(a):hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(11,42,60,.08), 0 14px 32px rgba(11,42,60,.12); }
.is-style-panel-dark {
	background: var(--wp--preset--color--deep-water);
	color: var(--wp--preset--color--on-dark);
	border-radius: var(--esb-radius);
}

/* Card with image flush to top */
.esb-card-media > .wp-block-image,
.esb-card-media > .wp-block-post-featured-image,
.esb-card-media > .wp-block-cover { margin: 0 !important; }
.esb-card-media > .wp-block-image img,
.esb-card-media > .wp-block-post-featured-image img { border-radius: var(--esb-radius) var(--esb-radius) 0 0; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.esb-card-body { padding: 1.25rem 1.5rem 1.5rem; }

/* Icon chip used in audience/route cards: solid badge so it stands out */
.esb-chip {
	display: inline-grid !important;
	place-items: center;
	width: 3.5rem; height: 3.5rem;
	border-radius: 10px;
	background: var(--wp--preset--color--deep-water);
	color: var(--wp--preset--color--electric);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 1.6rem !important;
	line-height: 1;
	margin: 0 0 0.35rem !important;
	box-shadow: 0 6px 16px rgba(11, 42, 60, .22), inset 0 0 0 2px color-mix(in srgb, var(--wp--preset--color--electric) 35%, transparent);
	transition: background .2s ease, color .2s ease, transform .2s ease;
}
.esb-chip.is-accent {
	background: var(--wp--preset--color--safety);
	color: var(--wp--preset--color--on-safety);
	box-shadow: 0 6px 16px color-mix(in srgb, var(--wp--preset--color--safety) 40%, transparent);
}
.is-style-card:hover .esb-chip { transform: scale(1.06); }
.is-style-card:hover .esb-chip:not(.is-accent) { background: var(--wp--preset--color--electric); color: var(--wp--preset--color--deep-water); }

/* ---------- Buttons ---------- */
.wp-block-button.is-style-secondary .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--deep-water);
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--deep-water);
}
.wp-block-button.is-style-secondary .wp-block-button__link:hover { background: var(--wp--preset--color--deep-water); color: var(--wp--preset--color--white); }
.wp-block-button.is-style-ghost-light .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--white);
	box-shadow: inset 0 0 0 2px rgba(255,255,255,.6);
}
.wp-block-button.is-style-ghost-light .wp-block-button__link:hover { box-shadow: inset 0 0 0 2px var(--wp--preset--color--electric); color: var(--wp--preset--color--electric); }

/* ---------- Lists ---------- */
.is-style-checklist { list-style: none; padding-left: 0; }
.is-style-checklist li { position: relative; padding-left: 1.9em; margin-bottom: .5em; }
.is-style-checklist li::before {
	content: "";
	position: absolute; left: 0; top: .3em;
	width: 1.15em; height: 1.15em; border-radius: 50%;
	background: var(--wp--preset--color--electric) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%230B2A3C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 75% no-repeat;
}
.is-style-steps { list-style: none; padding-left: 0; counter-reset: esb-step; }
.is-style-steps > li {
	counter-increment: esb-step;
	position: relative;
	padding: 0 0 1.5rem 3.5rem;
	border-left: 2px solid var(--wp--preset--color--line);
	margin-left: 1.25rem;
	padding-left: 2.25rem;
}
.is-style-steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.is-style-steps > li::before {
	content: counter(esb-step);
	position: absolute; left: -1.3rem; top: -.15rem;
	width: 2.5rem; height: 2.5rem; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--wp--preset--color--deep-water);
	color: var(--wp--preset--color--electric);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
}
.is-style-steps > li strong { display: block; font-family: var(--wp--preset--font-family--heading); color: var(--wp--preset--color--deep-water); font-size: 1.125rem; }

/* ---------- Post terms as pills ---------- */
.is-style-pills a {
	display: inline-block;
	padding: .2em .75em;
	border-radius: 999px;
	background: var(--wp--preset--color--mist);
	color: var(--wp--preset--color--electric-dark) !important;
	margin: 0 .25em .25em 0;
}
.is-style-pills .wp-block-post-terms__separator { display: none; }

/* ---------- Stats strip ---------- */
.esb-stat-value { font-family: var(--wp--preset--font-family--heading); font-weight: 800; line-height: 1; }

/* ---------- Guide callouts ---------- */
.esb-callout {
	border-left: 4px solid var(--wp--preset--color--electric);
	background: var(--wp--preset--color--mist);
	border-radius: 0 var(--esb-radius-sm) var(--esb-radius-sm) 0;
}
.esb-callout.is-warning { border-left-color: var(--wp--preset--color--safety); background: color-mix(in srgb, var(--wp--preset--color--safety) 9%, #fff); }

/* Case-study key facts */
.esb-facts { border-top: 1px solid var(--wp--preset--color--line); }
.esb-facts p { margin: 0; }
.esb-facts .esb-fact-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--wp--preset--color--slate); font-weight: 700; }

/* ---------- Footer ---------- */
.esb-footer a { color: var(--wp--preset--color--on-dark); text-decoration: none; }
.esb-footer a:hover { color: var(--wp--preset--color--electric); }
.esb-footer .wp-block-navigation__container { gap: .35rem !important; }

/* ---------- WooCommerce ---------- */
.esb-from {
	font-size: .75em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--wp--preset--color--slate);
	margin-right: .15em;
}
.woocommerce ul.products li.product,
.wc-block-grid__product,
.wc-block-product {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--esb-radius);
	overflow: hidden;
	padding-bottom: 1.25rem !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-components-product-name {
	font-family: var(--wp--preset--font-family--heading) !important;
	font-weight: 700 !important;
	color: var(--wp--preset--color--deep-water) !important;
	padding: 0 1.25rem !important;
}
.woocommerce ul.products li.product .price,
.wc-block-components-product-price { color: var(--wp--preset--color--deep-water) !important; font-weight: 700; padding: 0 1.25rem; }
.woocommerce ul.products li.product .button { margin-left: 1.25rem; }
.woocommerce ul.products li.product a img { margin-bottom: 1rem; aspect-ratio: 4 / 3; object-fit: cover; }
.woocommerce span.onsale { background: var(--wp--preset--color--safety); color: var(--wp--preset--color--on-safety); border-radius: 999px; }
.woocommerce div.product .product_title { font-family: var(--wp--preset--font-family--heading); }
.woocommerce div.product p.price { color: var(--wp--preset--color--deep-water); font-size: 1.5rem; font-weight: 700; }
.woocommerce .button:hover, .woocommerce button.button:hover, .woocommerce a.button:hover { background: var(--wp--preset--color--safety-hover) !important; }
.woocommerce .button, .woocommerce button.button, .woocommerce a.button {
	background: var(--wp--preset--color--safety) !important;
	color: var(--wp--preset--color--on-safety) !important;
	border-radius: var(--esb-radius-sm) !important;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom-color: var(--wp--preset--color--white); }
.woocommerce-breadcrumb, .wc-block-breadcrumbs { font-size: .875rem; color: var(--wp--preset--color--slate); }
@media (max-width: 900px) { .esb-header-cta { display: none; } }

@media (prefers-reduced-motion: reduce) {
	.esb-header, .esb-chip, .is-style-card, .esb-header .wp-block-site-logo img { transition: none !important; }
	.is-style-card:hover, .is-style-card:hover .esb-chip { transform: none !important; }
}

/* Boat range cards: compact, equal height */
.esb-boat-card { height: 100%; }
.esb-boat-card h3 { margin: 0; }
.esb-boat-card p { margin: 0; }
/* Top bar on the action colour */
.esb-topbar.has-safety-background-color { font-weight: 600; }
.esb-topbar.has-safety-background-color a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.esb-topbar.has-safety-background-color a:hover { text-decoration-thickness: 3px; }

/* Tables in page and post content: light borders so guide tables read clearly */
.wp-block-post-content .wp-block-table table,
.entry-content .wp-block-table table { border-collapse: collapse; width: 100%; }
.wp-block-post-content .wp-block-table th,
.wp-block-post-content .wp-block-table td { border: 1px solid var(--wp--preset--color--line); padding: .55em .75em; text-align: left; vertical-align: top; }
.wp-block-post-content .wp-block-table thead th { background: var(--wp--preset--color--mist); color: var(--wp--preset--color--deep-water); font-family: var(--wp--preset--font-family--heading); font-weight: 700; }
.wp-block-post-content .wp-block-table { overflow-x: auto; }