/* =============================================================
   SURFERS – global styles (header, footer, buttons, typography, reveal)
   Section styles live in src/views/blocks/<block>/style.css
   ============================================================= */
:root {
	--sb-ink: #050d26;
	--sb-navy: #0b1a45;
	--sb-navy-2: #13265a;
	--sb-navy-3: #1e3570;
	--sb-teal: #0a8c9a;
	--sb-teal-2: #22b3bf;
	--sb-foam: #b5d8c8;
	--sb-gold: #e6b566;
	--sb-gold-2: #f2c879;
	--sb-amber: #d9953b;
	--sb-sand: #f5dca8;
	--sb-cream: #faf6e6;
	--sb-muted: #c9d3e6;
	--sb-sunset: linear-gradient(120deg, #f5dca8 0%, #e6b566 35%, #d9953b 60%, #0a8c9a 100%);
	--sb-gold-text: linear-gradient(180deg, #fff3cf 0%, #f2c879 45%, #d9953b 100%);
	--sb-display: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
	--sb-script: Pacifico, "Brush Script MT", cursive;
	--sb-body: Outfit, "Segoe UI", Arial, sans-serif;
	--sb-r: 22px;
	--sb-max: 1240px;
	--sb-shadow: 0 24px 60px -18px rgba(0, 0, 0, .6);
	--sb-ease: cubic-bezier(.2, .8, .2, 1);
}

html { scroll-behavior: smooth; overflow-x: clip; }
.surfers .sb-section, .surfers .sb-section *, .surfers .sb-section *::before, .surfers .sb-section *::after { box-sizing: border-box; }
body.surfers { margin: 0; overflow-x: clip; background: var(--sb-ink); color: var(--sb-cream); font-family: var(--sb-body); -webkit-font-smoothing: antialiased; }
body.surfers img { max-width: 100%; height: auto; }
.surfers ::selection { background: var(--sb-gold); color: var(--sb-navy); }

/* Remove block-gap between template parts & sections – sections control their own spacing */
.surfers .wp-site-blocks > * { margin-block: 0; }
.sb-main, .sb-content { margin: 0; padding: 0; }
.sb-content > .sb-section { margin-block: 0; max-width: none; }

.sb-skip-link { position: absolute; left: 12px; top: -60px; z-index: 1000; padding: 10px 16px; border-radius: 8px; background: var(--sb-gold); color: var(--sb-navy); font-weight: 600; text-decoration: none; transition: top .2s; }
.sb-skip-link:focus { top: 12px; }
.sb-screen-reader { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.sb-container { width: min(var(--sb-max), 100% - 32px); margin-inline: auto; }
.sb-section { position: relative; padding: 120px 0; }
.sb-center { text-align: center; }
.sb-icon { width: 1em; height: 1em; fill: currentColor; flex-shrink: 0; }

/* ---------- typography ---------- */
.sb-kicker { display: block; margin: 0 0 4px; font-family: var(--sb-script); font-size: clamp(1.3rem, 2.4vw, 1.8rem); line-height: 1.4; color: var(--sb-teal-2); transform: rotate(-3deg); }
.sb-title { margin: 0; font-family: var(--sb-display); font-weight: 400; letter-spacing: 1px; line-height: .92; text-transform: uppercase; font-size: clamp(3rem, 8vw, 6.4rem); color: inherit; }
.sb-gold, .sb-gold-text { background: var(--sb-gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sb-lead { max-width: 620px; margin: 16px 0 0; font-size: 1.1rem; color: var(--sb-muted); }
.sb-center .sb-lead { margin-inline: auto; }
.sb-lead p { margin: 0 0 .6em; }

/* ---------- buttons ---------- */
.sb-btn {
	--bg: var(--sb-gold);
	position: relative; display: inline-flex; align-items: center; gap: 10px;
	padding: 16px 32px; border: 0; border-radius: 999px; cursor: pointer; text-decoration: none;
	font-family: var(--sb-display); font-size: 1.35rem; letter-spacing: 1.5px; line-height: 1;
	background: var(--bg); color: var(--sb-navy); overflow: hidden; isolation: isolate;
	box-shadow: 0 10px 30px -8px rgba(230, 181, 102, .7), inset 0 -4px 0 rgba(0, 0, 0, .15);
	transition: transform .25s, box-shadow .25s, color .25s;
}
.sb-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s; }
.sb-btn:hover, .sb-btn:focus-visible { transform: translateY(-3px) rotate(-1deg); color: var(--sb-navy); box-shadow: 0 16px 40px -8px rgba(230, 181, 102, .9); }
.sb-btn:hover::before { transform: translateX(120%); }
.sb-btn .sb-icon { transition: transform .25s; }
.sb-btn:hover .sb-icon { transform: translateX(4px); }
.sb-btn--ghost { --bg: transparent; color: var(--sb-cream); box-shadow: inset 0 0 0 2px var(--sb-foam); }
.sb-btn--ghost:hover, .sb-btn--ghost:focus-visible { color: var(--sb-gold); box-shadow: inset 0 0 0 2px var(--sb-gold); }
.sb-btn--sm { padding: 11px 22px; font-size: 1.15rem; }
.sb-btn--dark { --bg: var(--sb-navy); color: var(--sb-gold); box-shadow: 0 16px 40px -12px rgba(11, 26, 69, .7); }
.sb-btn--dark:hover { color: var(--sb-gold); }
.sb-round { display: inline-grid; place-items: center; width: 54px; height: 54px; padding: 0; border: 2px solid var(--sb-foam); border-radius: 50%; background: transparent; color: var(--sb-cream); font-size: 1.3rem; cursor: pointer; transition: .25s; }
.sb-round:hover, .sb-round:focus-visible { background: var(--sb-gold); border-color: var(--sb-gold); color: var(--sb-navy); }
.surfers a:focus-visible, .surfers button:focus-visible { outline: 3px solid var(--sb-gold); outline-offset: 3px; }

/* ---------- preloader + progress ---------- */
.sb-preloader { position: fixed; inset: 0; z-index: 999; display: grid; place-items: center; background: var(--sb-navy); transition: opacity .6s, visibility .6s; }
.sb-preloader.is-done { opacity: 0; visibility: hidden; }
.sb-preloader img { width: 150px; animation: sb-bob 1.6s ease-in-out infinite; }
.sb-preloader__bar { width: 160px; height: 6px; margin: 24px auto 0; border-radius: 6px; background: var(--sb-navy-3); overflow: hidden; }
.sb-preloader__bar::after { content: ""; display: block; width: 40%; height: 100%; border-radius: 6px; background: var(--sb-sunset); animation: sb-load 1.1s ease-in-out infinite; }
.sb-progress { position: fixed; top: 0; left: 0; z-index: 200; height: 4px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--sb-sunset); box-shadow: 0 0 12px var(--sb-gold); pointer-events: none; }
@keyframes sb-load { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
@keyframes sb-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-12px) rotate(3deg); } }
@keyframes sb-marq { to { transform: translateX(-50%); } }

/* ---------- header ---------- */
.sb-header { position: fixed; inset: 0 0 auto; z-index: 150; padding: 18px 0; transition: padding .35s, background .35s, box-shadow .35s; }
.admin-bar .sb-header { top: 32px; }
.sb-header.is-stuck, .sb-header--solid { padding: 8px 0; background: rgba(8, 20, 56, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .6); }
.sb-header__inner { display: flex; align-items: center; gap: 24px; }
.sb-brand { display: block; flex-shrink: 0; }
.sb-brand img { display: block; width: 96px; height: auto; transition: width .35s; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5)); }
.sb-header.is-stuck .sb-brand img, .sb-header--solid .sb-brand img { width: 64px; }
.sb-nav { margin-left: auto; }
.sb-nav ul { list-style: none; margin: 0; padding: 0; }
.sb-nav > ul { display: flex; gap: 4px; }
.sb-nav li { position: relative; }
.sb-nav a { position: relative; display: block; padding: 10px 14px; color: var(--sb-cream); font-weight: 500; text-decoration: none; }
.sb-nav > ul > li > a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 3px; border-radius: 3px; background: var(--sb-gold); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.sb-nav > ul > li > a:hover::after, .sb-nav > ul > li.current-menu-item > a::after { transform: scaleX(1); }
.sb-nav .menu-item-has-children > a { padding-right: 26px; }
.sb-nav .menu-item-has-children > a::before { content: ""; position: absolute; right: 10px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border-right: 2px solid var(--sb-gold); border-bottom: 2px solid var(--sb-gold); transform: rotate(45deg); }
.sb-nav .sub-menu { position: absolute; top: 100%; left: 0; min-width: 210px; padding: 10px; border-radius: 16px; background: rgba(11, 26, 69, .97); border: 1px solid rgba(181, 216, 200, .15); box-shadow: var(--sb-shadow); opacity: 0; visibility: hidden; transform: translateY(10px); transition: .25s; }
.sb-nav li:hover > .sub-menu, .sb-nav li:focus-within > .sub-menu, .sb-nav li.is-open > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.sb-nav .sub-menu a { border-radius: 10px; }
.sb-nav .sub-menu a:hover { background: var(--sb-navy-3); color: var(--sb-gold); }
.sb-burger { display: none; position: relative; z-index: 160; width: 48px; height: 48px; margin-left: auto; padding: 0; border: 0; border-radius: 50%; background: var(--sb-gold); cursor: pointer; }
.sb-burger span { position: absolute; left: 14px; right: 14px; height: 2px; background: var(--sb-navy); transition: .3s; }
.sb-burger span:nth-child(1) { top: 17px; }
.sb-burger span:nth-child(2) { top: 23px; }
.sb-burger span:nth-child(3) { top: 29px; }
.sb-burger[aria-expanded="true"] span:nth-child(1) { top: 23px; transform: rotate(45deg); }
.sb-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.sb-burger[aria-expanded="true"] span:nth-child(3) { top: 23px; transform: rotate(-45deg); }
/* pages that do not start with a hero get space for the fixed header */
.sb-header-spacer { height: 112px; }

/* ---------- footer ---------- */
.sb-footer { position: relative; padding-top: 110px; background: var(--sb-ink) center / cover no-repeat; color: var(--sb-cream); }
.sb-footer::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 13, 38, .93), rgba(5, 13, 38, .98)); }
.sb-footer > * { position: relative; }
.sb-footer__wave { position: absolute; top: -1px; left: 0; width: 100%; height: 80px; }
.sb-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr; gap: 50px; padding-bottom: 50px; }
.sb-footer__logo { display: block; width: 130px; height: auto; margin-bottom: 18px; }
.sb-footer h2 { margin: 0 0 18px; font-family: var(--sb-display); font-weight: 400; font-size: 1.9rem; letter-spacing: 1px; color: var(--sb-gold); }
.sb-footer p { color: var(--sb-muted); }
.sb-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sb-footer ul a, .sb-footer__contact span { display: inline-flex; align-items: flex-start; gap: 10px; color: var(--sb-muted); text-decoration: none; transition: color .2s, padding .2s; }
.sb-footer ul a:hover { color: var(--sb-gold); padding-left: 6px; }
.sb-footer__contact .sb-icon { margin-top: 3px; color: var(--sb-teal-2); }
.sb-socials { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.sb-socials a { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--sb-navy-2); border: 1px solid rgba(181, 216, 200, .2); color: var(--sb-cream); transition: .25s; }
.sb-socials a:hover { background: var(--sb-gold); color: var(--sb-navy); transform: translateY(-4px); }
.sb-socials .sb-icon { width: 20px; height: 20px; }
.sb-copy { padding: 22px 0; border-top: 1px solid rgba(181, 216, 200, .14); text-align: center; font-size: .95rem; color: #93a1bd; }
.sb-copy p { margin: 0; color: inherit; }
.sb-top { position: fixed; right: 22px; bottom: 22px; z-index: 140; display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: var(--sb-gold); color: var(--sb-navy); font-size: 1.4rem; cursor: pointer; box-shadow: 0 12px 30px -8px rgba(230, 181, 102, .8); opacity: 0; visibility: hidden; transform: translateY(20px); transition: .3s; }
.sb-top.is-visible { opacity: 1; visibility: visible; transform: none; }

/* ---------- text pages (template "Page with title") ---------- */
.sb-text-page { padding: 170px 16px 100px; }
.sb-text-page__title { font-family: var(--sb-display); font-size: clamp(2.8rem, 7vw, 5rem); text-transform: uppercase; color: var(--sb-gold); }
.sb-text-page a { color: var(--sb-gold); }

/* ---------- scroll reveal (only when JS is running) ---------- */
.sb-js [data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity .9s var(--sb-ease), transform .9s var(--sb-ease); transition-delay: var(--d, 0s); }
.sb-js [data-reveal="left"] { transform: translateX(-50px); }
.sb-js [data-reveal="right"] { transform: translateX(50px); }
.sb-js [data-reveal="zoom"] { transform: scale(.9); }
.sb-js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- editor ---------- */
.editor-styles-wrapper [data-reveal], .is-preview [data-reveal] { opacity: 1 !important; transform: none !important; }
.sb-header.is-preview { position: relative; inset: auto; top: 0; padding: 10px 0; background: var(--sb-navy); }
.sb-header.is-preview .sb-nav { position: static; clip-path: none; visibility: visible; display: block; padding: 0; background: none; }
.editor-styles-wrapper .sb-top, .editor-styles-wrapper .sb-progress, .editor-styles-wrapper .sb-preloader { display: none; }
.is-hidden-section { opacity: .45; outline: 3px dashed var(--sb-amber); outline-offset: -3px; }
.sb-hidden-note { position: absolute; top: 12px; left: 50%; z-index: 20; transform: translateX(-50%); padding: 8px 16px; border-radius: 999px; background: var(--sb-amber); color: var(--sb-navy); font: 600 14px/1.3 var(--sb-body); white-space: nowrap; }

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.surfers *, .surfers *::before, .surfers *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
	.sb-js [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
	.sb-burger { display: block; }
	.sb-header .sb-header__cta { display: none; }
	.sb-nav { position: fixed; inset: 0; margin: 0; display: grid; place-items: center; overflow-y: auto; padding: 90px 20px 40px;
		background: radial-gradient(circle at 80% 10%, rgba(10, 140, 154, .35), transparent 50%), var(--sb-navy);
		clip-path: circle(0 at calc(100% - 44px) 44px); visibility: hidden; transition: clip-path .6s cubic-bezier(.7, 0, .2, 1), visibility 0s .6s; }
	.sb-nav.is-open { clip-path: circle(150% at calc(100% - 44px) 44px); visibility: visible; transition: clip-path .6s cubic-bezier(.7, 0, .2, 1); }
	.sb-nav > ul { flex-direction: column; gap: 6px; text-align: center; }
	.sb-nav a { font-family: var(--sb-display); font-size: 2.2rem; letter-spacing: 2px; }
	.sb-nav > ul > li > a::after { display: none; }
	.sb-nav .menu-item-has-children > a::before { position: static; display: inline-block; margin: 0 10px 6px 0; }
	.sb-nav .sub-menu { position: static; display: none; padding: 0; background: transparent; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
	.sb-nav li.is-open > .sub-menu { display: block; }
	.sb-nav .sub-menu a { font-size: 1.4rem; color: var(--sb-foam); }
	.sb-footer__grid { grid-template-columns: 1fr; gap: 36px; }
	.sb-section { padding: 90px 0; }
	.sb-header-spacer { height: 84px; }
}
@media (max-width: 782px) {
	.admin-bar .sb-header { top: 46px; }
}
@media (max-width: 600px) {
	.sb-brand img { width: 76px; }
	.admin-bar .sb-header.is-stuck { top: 0; }
}