/*
Theme Name: Vangelis at the Helm
Theme URI: https://neroladakis.gr/
Author: Evangelos Neroladakis
Description: Your journey to the helm, the RYA way. A block theme for an independent advice site on the RYA powerboat and motor cruising path and on buying a first or second boat.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vangelis-at-the-helm
Tags: block-patterns, full-site-editing, blog, one-column, wide-blocks
*/

:root {
	--vath-navy: var(--wp--preset--color--navy);
	--vath-sea: var(--wp--preset--color--sea);
	--vath-foam: var(--wp--preset--color--foam);
	--vath-line: var(--wp--preset--color--line);
	--vath-muted: var(--wp--preset--color--muted);
	--vath-signal: var(--wp--preset--color--signal);
	--vath-amber: var(--wp--preset--color--amber);
	--vath-green: var(--wp--preset--color--green);
	--vath-radius: 12px;
}

html { scroll-behavior: smooth; }
:where(section, .wp-block-group)[id] { scroll-margin-top: 90px; }
body { -webkit-font-smoothing: antialiased; }

/* ---------- Shared ---------- */
.vath-eyebrow {
	font-size: .78rem !important;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--vath-signal);
	margin-bottom: .4rem !important;
}
.vath-section-head { max-width: var(--wp--style--global--wide-size) !important; margin-bottom: 2.6rem !important; }
.vath-section-head > * { max-width: 680px; }
.vath-section-head > * + * { margin-top: .6rem !important; }
.vath-section-head p:not(.vath-eyebrow) { color: var(--vath-muted); font-size: 1.06rem; }
.vath-small-note { font-size: .85rem; color: var(--vath-muted); }

/* ---------- Header ---------- */
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 50; }
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) { .admin-bar .wp-site-blocks > header.wp-block-template-part { top: 0; } }
.vath-header { background: rgba(11, 34, 54, .96); backdrop-filter: blur(6px); min-height: 68px; }
.vath-brand { gap: 10px !important; }
.vath-logo svg { width: 38px; height: 38px; display: block; }
.vath-brand .wp-block-site-title { margin: 0; line-height: 1.1; }
.vath-brand .wp-block-site-title a { color: #fff; text-decoration: none; }
.vath-brand .wp-block-site-tagline { margin: 3px 0 0 !important; color: #9fb3c2; font-size: .68rem; letter-spacing: .06em; }
.vath-header .wp-block-navigation { color: #cfdbe4; font-weight: 500; font-size: .94rem; }
.vath-header .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content { color: #cfdbe4; text-decoration: none; }
.vath-header .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover { color: #fff; }
.vath-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--vath-navy) !important; }
.vath-header .wp-block-navigation__responsive-container.is-menu-open a { color: #fff; font-size: 1.2rem; }
.vath-header .wp-block-navigation__responsive-container-open svg,
.vath-header .wp-block-navigation__responsive-container-close svg { fill: #fff; }
@media (max-width: 860px) { .vath-header .vath-header-cta { display: none; } }

/* ---------- Hero ---------- */
.vath-hero {
	position: relative;
	overflow: hidden;
	background-color: var(--vath-navy);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600' fill='none' stroke='%239fd0ee' stroke-width='1' opacity='.16'%3E%3Cpath d='M-50 420C150 380 260 470 430 430S720 330 900 380 1150 460 1260 420'/%3E%3Cpath d='M-50 470C160 430 270 520 440 480S730 380 910 430 1160 510 1260 470'/%3E%3Cpath d='M-50 360C140 330 250 410 420 375S710 280 890 325 1140 400 1260 365'/%3E%3Cpath d='M-50 300C130 275 240 345 410 315S700 225 880 268 1130 340 1260 305'/%3E%3Ccircle cx='980' cy='150' r='70'/%3E%3Ccircle cx='980' cy='150' r='110'/%3E%3Ccircle cx='980' cy='150' r='150'/%3E%3Cg font-size='12' fill='%239fd0ee' stroke='none' font-family='sans-serif'%3E%3Ctext x='210' y='200'%3E12%3C/text%3E%3Ctext x='520' y='250'%3E8%3C/text%3E%3Ctext x='760' y='180'%3E15%3C/text%3E%3Ctext x='330' y='540'%3E21%3C/text%3E%3Ctext x='1060' y='520'%3E18%3C/text%3E%3C/g%3E%3C/svg%3E");
	background-size: cover;
	background-position: center;
	color: #fff;
}
.vath-hero::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: 70px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M0 40C240 70 480 10 720 30S1200 70 1440 30V70H0Z' fill='%23eef4f7'/%3E%3C/svg%3E") no-repeat bottom / 100% 70px;
	pointer-events: none;
}
.vath-hero > * { position: relative; z-index: 1; }
.vath-hero h1 { color: #fff; }
.vath-hero .vath-lead { color: #c9d7e2; font-size: 1.15rem; max-width: 560px; }
.vath-hero .vath-eyebrow { color: var(--vath-signal); }
.wp-block-button.is-style-outline.vath-ghost .wp-block-button__link {
	border: 1.5px solid rgba(255, 255, 255, .45);
	color: #fff;
	background: transparent;
}
.wp-block-button.is-style-outline.vath-ghost .wp-block-button__link:hover { background: rgba(255, 255, 255, .08); }

.vath-helm-card {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 14px;
	padding: 26px !important;
}
.vath-helm-card h3 { color: #fff; margin-bottom: .8rem; }
.vath-ticks { list-style: none; padding: 0 !important; margin: 0; }
.vath-ticks li {
	position: relative;
	padding: 9px 0 9px 32px;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	color: #dbe6ee;
	font-size: .95rem;
}
.vath-ticks li:last-child { border-bottom: 0; }
.vath-ticks li::before {
	content: "\2713";
	position: absolute;
	left: 0; top: 10px;
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--vath-green);
	color: #fff;
	font-size: .75rem;
	display: grid;
	place-items: center;
}

/* ---------- Credential chips ---------- */
.vath-creds { border-bottom: 1px solid var(--vath-line); }
.vath-creds-label { font-weight: 600; color: var(--vath-navy); margin: 0 !important; }
.vath-chips { list-style: none; padding: 0 !important; margin: 0 !important; display: flex; flex-wrap: wrap; gap: 10px; }
.vath-chips li {
	background: #fff;
	border: 1px solid var(--vath-line);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: .86rem;
	color: var(--wp--preset--color--navy-2);
}

/* ---------- The Helm Journey (path) ---------- */
.vath-path-tabs { display: flex !important; width: fit-content; margin-left: max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2)) !important; margin-right: auto !important; background: var(--vath-foam); border-radius: 10px; padding: 5px; gap: 0 !important; margin-bottom: 2rem !important; }
.vath-path-tabs .wp-block-button__link {
	background: none !important;
	color: var(--vath-muted) !important;
	border: 0 !important;
	border-radius: 7px !important;
	padding: 11px 20px !important;
	font-weight: 600;
}
.vath-path-tabs .is-active .wp-block-button__link { background: #fff !important; color: var(--vath-navy) !important; box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
.js-vath .vath-path[hidden] { display: none !important; }
.vath-path { position: relative; counter-reset: vath-step; }
.vath-path::before {
	content: "";
	position: absolute;
	left: 23px; top: 10px; bottom: 10px;
	width: 2px;
	background: repeating-linear-gradient(var(--vath-sea) 0 8px, transparent 8px 14px);
}
.vath-path > .vath-step + .vath-step { margin-top: 22px; }
.vath-step {
	position: relative;
	margin-left: 68px !important;
	background: #fff;
	border: 1px solid var(--vath-line);
	border-radius: var(--vath-radius);
	padding: 20px 22px !important;
}
.vath-step > * + * { margin-top: .4rem !important; }
.vath-step::before {
	counter-increment: vath-step;
	content: counter(vath-step);
	position: absolute;
	left: -68px; top: 0;
	width: 48px; height: 48px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--vath-sea);
	display: grid;
	place-items: center;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	color: var(--vath-sea);
}
.vath-step.is-done::before { background: var(--vath-sea); color: #fff; }
.vath-step.is-branch { counter-increment: none; }
.vath-step.is-branch::before { counter-increment: none; content: "+"; }
.vath-step.is-goal::before { counter-increment: none; content: "\2605"; background: var(--vath-signal); border-color: var(--vath-signal); color: #fff; }
.vath-step h3 { font-size: 1.2rem; margin-top: .2rem !important; }
.vath-step p { color: var(--vath-muted); font-size: .95rem; }
.vath-tag {
	display: inline-block;
	font-size: .72rem !important;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 3px 9px;
	border-radius: 5px;
	background: var(--vath-foam);
	color: var(--vath-sea) !important;
	margin: 0 !important;
}
.vath-tag.is-mine { background: #e5f4ec; color: var(--vath-green) !important; }
.vath-tag.is-exam { background: #fdeee7; color: var(--vath-signal) !important; }
p.vath-meta { color: var(--wp--preset--color--navy-2) !important; font-size: .85rem !important; }
p.vath-tip {
	font-size: .9rem !important;
	color: var(--wp--preset--color--ink) !important;
	background: #fff8ec;
	border-left: 3px solid var(--vath-amber);
	padding: 10px 14px;
	border-radius: 0 6px 6px 0;
	margin-top: .8rem !important;
}
@media (max-width: 600px) {
	.vath-path::before { left: 17px; }
	.vath-step { margin-left: 50px !important; }
	.vath-step::before { left: -50px; width: 36px; height: 36px; font-size: .9rem; }
}

/* ---------- Finder ---------- */
.vath-finder h2, .vath-finder h3 { color: #fff; }
.vath-finder .vath-section-head p:not(.vath-eyebrow) { color: #b9cad6; }
.vath-options { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.vath-opt {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: var(--vath-radius);
	padding: 22px !important;
	margin: 0 !important;
	cursor: pointer;
	transition: border-color .15s, background .15s;
}
.vath-opt:hover, .vath-opt:focus-visible, .vath-opt.is-selected { border-color: var(--vath-amber); background: rgba(243, 163, 43, .1); outline: none; }
.vath-opt h3 { font-size: 1.15rem; margin: 0 0 6px !important; }
.vath-opt p { color: #b9cad6; font-size: .92rem; margin: 0 !important; }
.vath-answers { margin-top: 26px !important; }
.vath-answer { background: #fff; color: var(--wp--preset--color--ink); border-radius: var(--vath-radius); padding: 24px 26px !important; }
.vath-answer h3 { color: var(--vath-navy) !important; margin: 0 0 6px !important; }
.vath-answer + .vath-answer { margin-top: 12px; }
.js-vath .vath-answer { display: none; }
.js-vath .vath-answer.is-shown { display: block; }
.js-vath .vath-answer + .vath-answer { margin-top: 0; }

/* ---------- Cards ---------- */
.vath-card {
	background: #fff;
	border: 1px solid var(--vath-line);
	border-radius: var(--vath-radius);
	padding: 24px !important;
	height: 100%;
}
.vath-card h3 { font-size: 1.12rem; margin-bottom: .5rem !important; }
.vath-card > * + * { margin-top: .5rem !important; }
.vath-card p { color: var(--vath-muted); font-size: .94rem; }
.vath-card p.vath-card-foot { color: var(--vath-sea); font-weight: 600; font-size: .84rem; margin-top: auto !important; padding-top: .6rem; }
.vath-card[class*="vath-icon-"]::before {
	content: "";
	display: block;
	width: 42px; height: 42px;
	border-radius: 10px;
	margin-bottom: 14px;
	background-color: var(--vath-foam);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 22px;
}
.vath-icon-map::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f5f86' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l6-3 6 3 6-3v15l-6 3-6-3-6 3z'/%3E%3Cpath d='M9 3v15M15 6v15'/%3E%3C/svg%3E"); }
.vath-icon-compass::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f5f86' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m15 9-4 2-2 4 4-2z'/%3E%3C/svg%3E"); }
.vath-icon-globe::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f5f86' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20'/%3E%3C/svg%3E"); }
.vath-icon-star::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f5f86' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M4.9 19.1 7 17M17 7l2.1-2.1'/%3E%3C/svg%3E"); }
.vath-card.vath-icon-map, .vath-card.vath-icon-compass, .vath-card.vath-icon-globe, .vath-card.vath-icon-star { display: flex; flex-direction: column; }

/* ---------- Buying ---------- */
.vath-checklist { list-style: none; padding: 0 !important; margin: 0; counter-reset: vath-check; }
.vath-checklist li {
	counter-increment: vath-check;
	position: relative;
	padding: 14px 0 14px 40px;
	border-bottom: 1px solid var(--vath-line);
	color: var(--vath-muted);
	font-size: .94rem;
}
.vath-checklist li::before {
	content: counter(vath-check);
	position: absolute;
	left: 0; top: 15px;
	width: 26px; height: 26px;
	border-radius: 6px;
	background: var(--vath-navy);
	color: #fff;
	font-size: .8rem;
	font-weight: 600;
	display: grid;
	place-items: center;
}
.vath-checklist li strong { display: block; color: var(--vath-navy); font-size: 1rem; }

.vath-cost { background: #fff; border: 1px solid var(--vath-line); border-radius: 14px; padding: 26px; }
.vath-cost h3 { margin: 0 0 4px; }
.vath-cost .vath-cost-sub { color: var(--vath-muted); font-size: .9rem; margin: 0 0 18px; }
.vath-cost label { display: block; font-size: .88rem; font-weight: 600; margin: 14px 0 6px; color: var(--wp--preset--color--navy-2); }
.vath-cost input[type=range] { width: 100%; accent-color: var(--vath-signal); }
.vath-cost .vath-cost-row { display: flex; justify-content: space-between; font-size: .92rem; padding: 7px 0; border-bottom: 1px dashed var(--vath-line); }
.vath-cost .vath-cost-total { display: flex; justify-content: space-between; font-weight: 700; font-size: 1.15rem; color: var(--vath-navy); padding-top: 14px; }
.vath-cost .vath-cost-note { font-size: .8rem; color: var(--vath-muted); margin: 12px 0 0; }

/* ---------- Broker ---------- */
.vath-broker { border-radius: 18px; color: #fff; }
.vath-broker h2 { color: #fff; font-size: clamp(1.7rem, 3vw, 2.2rem) !important; }
.vath-broker p { color: #d4e2ec; }
.vath-broker .vath-eyebrow { color: var(--vath-amber); }
.vath-broker p.vath-disclose { font-size: .8rem; color: #a9c0d0; }
.vath-steps { list-style: none; padding: 0 !important; counter-reset: vath-brief; }
.vath-steps li { counter-increment: vath-brief; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .18); font-size: .95rem; color: #fff; }
.vath-steps li::before { content: counter(vath-brief) ". "; color: var(--vath-amber); font-weight: 600; }
.vath-steps li:last-child { border-bottom: 0; }

/* ---------- From Crew to Helm (posts) ---------- */
.vath-posts .wp-block-post-template { gap: 20px; }
.vath-post { background: #fff; border: 1px solid var(--vath-line); border-radius: var(--vath-radius); padding: 18px !important; height: 100%; }
.vath-post .wp-block-post-featured-image { margin: 0 0 16px; border-radius: 9px; overflow: hidden; aspect-ratio: 16/9; background: linear-gradient(135deg, #1f5f86, #0b2236); }
.vath-post .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; }
.vath-post .wp-block-post-terms { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
.vath-post .wp-block-post-terms a { color: var(--vath-signal); text-decoration: none; }
.vath-post .wp-block-post-title { font-size: 1.12rem; }
.vath-post .wp-block-post-title a { color: var(--vath-navy); text-decoration: none; }
.vath-post .wp-block-post-excerpt { color: var(--vath-muted); font-size: .94rem; }
.vath-post .wp-block-post-excerpt__more-link { font-weight: 600; font-size: .84rem; text-decoration: none; }
.vath-post-thumb-fallback .wp-block-post-featured-image:empty { display: block; }

/* ---------- Contact form ---------- */
.vath-form { background: #fff; border: 1px solid var(--vath-line); border-radius: 14px; padding: 28px; }
.vath-form label { display: block; font-size: .88rem; font-weight: 600; margin: 12px 0 6px; }
.vath-form input, .vath-form select, .vath-form textarea {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--vath-line);
	border-radius: 7px;
	font: inherit;
	font-size: .95rem;
	background: var(--wp--preset--color--paper);
	box-sizing: border-box;
}
.vath-form textarea { min-height: 110px; resize: vertical; }
.vath-form .vath-consent { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; font-size: .82rem; color: var(--vath-muted); margin-top: 14px; }
.vath-form .vath-consent input { width: auto; margin-top: 4px; }
.vath-form button {
	margin-top: 18px;
	width: 100%;
	background: var(--vath-signal);
	color: #fff;
	border: 0;
	border-radius: 6px;
	padding: 13px 22px;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.vath-form button:hover { background: #cf4a1f; }
.vath-form .vath-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.vath-notice { padding: 12px 14px; border-radius: 7px; font-weight: 600; margin-bottom: 8px; }
.vath-notice.is-ok { background: #e5f4ec; color: var(--vath-green); }
.vath-notice.is-error { background: #fdeee7; color: var(--vath-signal); }

/* ---------- Footer ---------- */
.vath-footer { color: #9fb3c2; font-size: .88rem; }
.vath-footer h4 { color: #fff; font-size: 1rem; }
.vath-footer a { color: #cfdbe4; text-decoration: none; }
.vath-footer a:hover { color: #fff; }
.vath-footer ul { list-style: none; padding: 0 !important; }
.vath-footer li { margin: 4px 0; }
.vath-footer .vath-legal { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 20px; font-size: .8rem; }

/* ---------- Single posts ---------- */
.vath-entry-meta { color: var(--vath-muted); font-size: .9rem; }
.vath-entry-meta a { color: var(--vath-signal); text-decoration: none; font-weight: 600; }

/* ---------- Layout seams ---------- */
.wp-site-blocks > footer.wp-block-template-part,
.wp-site-blocks > main,
.wp-site-blocks > .wp-block-group:first-of-type { margin-block-start: 0; }