/*
Theme Name: Paddle Boarding Maui
Theme URI: https://paddleboardingmaui.com
Author: Paddle Boarding Maui
Description: Custom theme for Paddle Boarding Maui (Kihei, HI), rebuilt from the Wix site with the same colors, copy, photos and video. FareHarbor booking buttons, built-in contact form, editable block-based pages.
Version: 2.0.0
Requires at least: 6.3
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: pbm
*/

:root {
	/* Colors taken from the Wix site */
	--pbm-blue: #004aad;        /* header, footer, headings */
	--pbm-blue-dark: #003a8a;
	--pbm-turq: #17d1d1;        /* buttons, big titles */
	--pbm-turq-dark: #10b3b3;
	--pbm-aqua: #00c4cc;        /* active menu item */
	--pbm-gold: #b58743;        /* subtitle line, links */
	--pbm-gold-light: #dbb986;  /* card titles */
	--pbm-text: #545454;
	--pbm-dark: #080808;
	--pbm-tint: #f2fbfb;
	--pbm-white: #ffffff;
	--pbm-max: 1200px;
	--pbm-radius: 12px;
	--pbm-head: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	--pbm-wide: "Montserrat", "Poppins", system-ui, sans-serif;
	--pbm-body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

body {
	margin: 0;
	font-family: var(--pbm-body);
	font-weight: 300;
	font-size: 17px;
	line-height: 1.7;
	color: var(--pbm-text);
	background: var(--pbm-white);
}

img, video { max-width: 100%; height: auto; }
a { color: var(--pbm-gold); }
a:hover { color: var(--pbm-blue); }
strong, b { font-weight: 600; }

h1, h2, h3, h4 {
	font-family: var(--pbm-head);
	font-weight: 600;
	color: var(--pbm-blue);
	line-height: 1.25;
	margin: 0 0 .6em;
}
h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.25rem; }

/* Wide, letter-spaced titles like the Wix site ("P A D D L E  B O A R D I N G  M A U I") */
.pbm-spaced, .pbm-spaced.wp-block-heading {
	font-family: var(--pbm-wide);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .28em;
	color: var(--pbm-turq);
}
.pbm-spaced-blue { color: var(--pbm-blue) !important; }
h2.pbm-spaced { font-size: clamp(1.3rem, 3vw, 2.2rem); }
p.pbm-spaced { font-size: clamp(.95rem, 2vw, 1.25rem); letter-spacing: .2em; line-height: 1.5; }

.screen-reader-text {
	position: absolute !important; clip: rect(1px,1px,1px,1px);
	width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus {
	clip: auto; width: auto; height: auto; z-index: 1000;
	top: 8px; left: 8px; padding: 8px 14px; background: #fff;
}

.pbm-wrap { max-width: var(--pbm-max); margin: 0 auto; padding: 0 20px; }

/* ---------- Top bar ---------- */
.pbm-topbar {
	background: var(--pbm-blue-dark);
	color: var(--pbm-white);
	font-size: 14px;
}
.pbm-topbar .pbm-wrap {
	display: flex; flex-wrap: wrap; gap: 8px 22px;
	align-items: center; justify-content: space-between;
	padding-top: 7px; padding-bottom: 7px;
}
.pbm-topbar a { color: var(--pbm-white); text-decoration: none; font-weight: 500; }
.pbm-topbar a:hover { color: var(--pbm-turq); }
.pbm-contact-links { display: flex; flex-wrap: wrap; gap: 6px 20px; }

.pbm-social { display: flex; gap: 12px; align-items: center; list-style: none; margin: 0; padding: 0; }
.pbm-social a { display: inline-flex; width: 22px; height: 22px; color: #fff; }
.pbm-social a:hover { color: var(--pbm-turq); }
.pbm-social svg { width: 100%; height: 100%; fill: currentColor; }

/* ---------- Header ---------- */
.pbm-header {
	background: var(--pbm-blue);
	box-shadow: 0 2px 12px rgba(0,30,80,.25);
	position: sticky; top: 0; z-index: 50;
}
.admin-bar .pbm-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .pbm-header { top: 46px; } }

.pbm-header .pbm-wrap {
	display: flex; align-items: center; justify-content: space-between;
	gap: 20px; min-height: 92px;
}
.pbm-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.pbm-header .custom-logo-link img, .pbm-header .custom-logo { max-height: 78px; width: auto; display: block; border-radius: 50%; }
.pbm-brand-name {
	font-family: var(--pbm-wide); font-weight: 800; font-size: 1.1rem;
	color: var(--pbm-white); letter-spacing: .15em; text-transform: uppercase;
}

.pbm-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.pbm-nav li { position: relative; }
.pbm-nav a {
	display: block; padding: 9px 13px;
	font-family: var(--pbm-head); font-weight: 600; font-size: 15px;
	letter-spacing: .03em; text-transform: uppercase;
	color: var(--pbm-white); text-decoration: none; border-radius: 999px;
}
.pbm-nav a:hover { background: rgba(255,255,255,.12); color: #fff; }
.pbm-nav .current-menu-item > a,
.pbm-nav .current_page_item > a,
.pbm-nav .current_page_parent > a { color: var(--pbm-aqua); }
.pbm-nav .sub-menu {
	display: none; position: absolute; top: 100%; left: 0; min-width: 200px;
	background: var(--pbm-blue); box-shadow: 0 8px 20px rgba(0,0,0,.2); border-radius: 10px;
	flex-direction: column; padding: 6px;
}
.pbm-nav li:hover > .sub-menu, .pbm-nav li:focus-within > .sub-menu { display: flex; }

.pbm-header-actions { display: flex; align-items: center; gap: 10px; }

.pbm-btn,
.wp-block-button__link,
.pbm-form button {
	display: inline-block;
	background: var(--pbm-turq); color: var(--pbm-white) !important;
	font-family: var(--pbm-head); font-weight: 500; font-size: 15px;
	letter-spacing: .03em; text-decoration: none;
	padding: 11px 26px; border: 0; border-radius: 999px; cursor: pointer;
	transition: background .15s ease, transform .15s ease;
}
.pbm-btn:hover,
.wp-block-button__link:hover { background: var(--pbm-turq-dark); transform: translateY(-1px); }
.pbm-header .pbm-btn { text-transform: uppercase; }

.pbm-menu-toggle {
	display: none; background: none; border: 2px solid #fff; color: #fff;
	border-radius: 999px; padding: 7px 14px; font-weight: 600; cursor: pointer; font-family: var(--pbm-head);
}

@media (max-width: 960px) {
	.pbm-menu-toggle { display: inline-block; }
	.pbm-nav { display: none; width: 100%; order: 3; padding-bottom: 12px; }
	.pbm-nav.is-open { display: block; }
	.pbm-nav ul { flex-direction: column; }
	.pbm-nav .sub-menu { display: flex; position: static; box-shadow: none; padding-left: 16px; }
	.pbm-header .pbm-wrap { flex-wrap: wrap; min-height: 76px; }
	.pbm-header .custom-logo-link img, .pbm-header .custom-logo { max-height: 60px; }
}
@media (max-width: 600px) {
	.pbm-topbar { font-size: 13px; }
	.pbm-topbar .pbm-social { display: none; }
	.pbm-topbar .pbm-wrap { justify-content: center; }
	.pbm-contact-links { justify-content: center; gap: 4px 14px; }
	.pbm-header .pbm-wrap { gap: 10px; }
	.pbm-brand { flex: 1 1 0; min-width: 0; }
	.pbm-brand-name { font-size: .9rem; line-height: 1.2; }
	.pbm-header-actions { margin-left: auto; }
	.pbm-header-actions .pbm-btn { padding: 9px 14px; font-size: 12px; }
}

/* Floating Book Now (like the Wix site) */
.pbm-float-book {
	position: fixed; right: 20px; bottom: 20px; z-index: 60;
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--pbm-turq); color: #fff !important; text-decoration: none;
	font-family: var(--pbm-head); font-weight: 600; font-size: 18px;
	padding: 12px 20px; border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,.22);
}
.pbm-float-book:hover { background: var(--pbm-turq-dark); }
.pbm-float-book svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
@media (max-width: 600px) { .pbm-float-book { font-size: 15px; padding: 10px 14px; right: 12px; bottom: 12px; } }

/* ---------- Content ---------- */
.pbm-main { min-height: 50vh; }
.pbm-page-header {
	background: linear-gradient(120deg, var(--pbm-blue) 0%, #0a74c9 60%, var(--pbm-turq) 130%);
	color: #fff; padding: 58px 0 50px; text-align: center;
}
.pbm-page-header h1 {
	color: #fff; margin: 0;
	font-family: var(--pbm-wide); font-weight: 800; text-transform: uppercase; letter-spacing: .25em;
	font-size: clamp(1.6rem, 4vw, 2.6rem);
}
.pbm-page-header p { margin: .6em 0 0; opacity: .92; }

.pbm-content { padding: 48px 0 64px; }
.pbm-content > * { max-width: 860px; margin-left: auto; margin-right: auto; }
.pbm-content > .alignwide { max-width: var(--pbm-max); }
.pbm-content > .alignfull { max-width: none; margin-left: 0; margin-right: 0; }
.pbm-content > *:not(.alignfull) { padding-left: 20px; padding-right: 20px; }
.pbm-content.is-front { padding-top: 0; padding-bottom: 0; }

.entry-content > * + * { margin-top: 1.1em; }

/* Hero (video cover) */
.wp-block-cover h1, .wp-block-cover h2, .wp-block-cover p { color: #fff; }
.pbm-hero .wp-block-cover__inner-container { max-width: 1000px; text-align: center; }
.pbm-hero h1 {
	font-family: var(--pbm-wide); font-weight: 800; text-transform: uppercase;
	letter-spacing: .3em; font-size: clamp(1.7rem, 5vw, 3.4rem);
	text-shadow: 0 2px 14px rgba(0,0,0,.35);
}
.pbm-hero .wp-block-buttons { justify-content: center; }
.pbm-hero .wp-block-button:nth-child(2) .wp-block-button__link { background: transparent; border: 2px solid #fff; }
.pbm-hero .wp-block-button:nth-child(2) .wp-block-button__link:hover { background: rgba(255,255,255,.15); }
.wp-block-cover__video-background { object-fit: cover; }

/* Sections */
.pbm-band { padding: 60px 20px !important; margin-top: 0 !important; }
.pbm-band-tint { background: var(--pbm-tint); }
.pbm-band > * { max-width: var(--pbm-max); margin-left: auto; margin-right: auto; }
.pbm-narrow-band > * { max-width: 860px !important; }
.has-text-align-center { text-align: center; }
.pbm-gold, p.pbm-gold { color: var(--pbm-gold); font-size: 1.1rem; }
.pbm-blue-text, p.pbm-blue-text { color: var(--pbm-blue); }
.pbm-band h2.pbm-intro-title { font-weight: 400; }

/* Cards */
.pbm-cards { gap: 28px !important; }
.pbm-card {
	background: #fff; border-radius: var(--pbm-radius); overflow: hidden;
	box-shadow: 0 6px 24px rgba(0,74,173,.12);
	display: flex; flex-direction: column;
	padding: 0 0 24px !important;
}
.pbm-card > * { margin-left: 22px !important; margin-right: 22px !important; }
.pbm-card > .wp-block-image { margin: 0 0 18px !important; }
.pbm-card .wp-block-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.pbm-card h3 {
	margin-bottom: .3em; color: var(--pbm-gold-light);
	font-family: var(--pbm-wide); font-weight: 800; text-transform: uppercase; letter-spacing: .22em;
	font-size: 1.05rem; line-height: 1.6; text-align: center;
}
.pbm-price { font-family: var(--pbm-head); font-weight: 700; color: var(--pbm-dark); font-size: 1.3rem; margin: 0 0 .4em; text-align: center; }
.pbm-card p:not(.pbm-price) { text-align: center; font-size: 15px; }
.pbm-card .wp-block-buttons { margin-top: auto !important; padding-top: 10px; justify-content: center; }

.wp-block-columns { display: flex; flex-wrap: wrap; gap: 2em; }
.wp-block-column { flex: 1 1 0; min-width: 0; }
@media (max-width: 781px) { .wp-block-columns { flex-direction: column; } .wp-block-column { flex-basis: 100% !important; } }

/* Staff */
.pbm-staff { text-align: center; }
.pbm-staff .wp-block-image img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; width: 220px; margin: 0 auto; display: block; box-shadow: 0 6px 20px rgba(0,74,173,.18); }
.pbm-staff .pbm-role { color: var(--pbm-turq); font-weight: 600; margin-top: -.4em; }

/* FAQ accordion (core Details block) */
.wp-block-details {
	background: #fff; border: 1px solid #dfe7f2; border-radius: 10px;
	padding: 0; margin-top: 10px !important;
}
.wp-block-details summary {
	cursor: pointer; padding: 16px 48px 16px 18px; position: relative;
	font-family: var(--pbm-head); font-weight: 600; color: var(--pbm-blue); list-style: none;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
	content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
	font-size: 1.4rem; color: var(--pbm-turq);
}
.wp-block-details[open] summary::after { content: "–"; }
.wp-block-details > *:not(summary) { padding: 0 18px; margin: 0 0 6px; }
.wp-block-details > *:last-child { margin-bottom: 16px; }

/* Gallery */
.wp-block-gallery.has-nested-images {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 12px !important;
}
.wp-block-gallery.has-nested-images figure.wp-block-image {
	width: auto !important; max-width: none !important; margin: 0 !important; flex: none !important;
}
.wp-block-gallery.has-nested-images figure.wp-block-image img {
	width: 100% !important; height: 220px !important; object-fit: cover; border-radius: 10px;
}
.pbm-location-meta { color: var(--pbm-gold); font-weight: 500; margin-top: -.3em; }

/* Blog */
.pbm-post-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; max-width: var(--pbm-max) !important; }
.pbm-post-card { background: #fff; border-radius: var(--pbm-radius); overflow: hidden; box-shadow: 0 6px 24px rgba(0,74,173,.12); }
.pbm-post-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.pbm-post-card .pbm-post-body { padding: 18px 22px 22px; }
.pbm-post-card h2 { font-size: 1.15rem; }
.pbm-post-card h2 a { color: var(--pbm-blue); text-decoration: none; }
.pbm-meta { color: var(--pbm-gold); font-size: 14px; margin: 0 0 .4em; }
.pbm-pagination { text-align: center; margin-top: 40px; }
.pbm-pagination .page-numbers { padding: 6px 12px; }
.single .entry-content .wp-block-image img { border-radius: var(--pbm-radius); }
.single .entry-content h2 { font-size: 1.4rem; margin-top: 1.4em; }

/* Contact form */
.pbm-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 760px; margin: 0 auto; }
.pbm-form .pbm-full { grid-column: 1 / -1; }
.pbm-form label { display: block; font-weight: 500; font-size: 14px; margin-bottom: 4px; color: var(--pbm-blue); }
.pbm-form input, .pbm-form textarea {
	width: 100%; padding: 12px 14px; font: inherit;
	border: 1px solid #c9d6e8; border-radius: 10px; background: #fff;
}
.pbm-form input:focus, .pbm-form textarea:focus { outline: 2px solid var(--pbm-turq); border-color: transparent; }
.pbm-form button { background: var(--pbm-blue); font-size: 17px; font-weight: 300; padding: 12px 40px; }
.pbm-form button:hover { background: var(--pbm-blue-dark); }
.pbm-form .pbm-hp { position: absolute; left: -9999px; }
.pbm-notice { padding: 14px 18px; border-radius: 10px; margin: 0 auto 16px; font-weight: 600; max-width: 760px; }
.pbm-notice.ok { background: #e2f6ea; color: #17643a; }
.pbm-notice.err { background: #fdeaea; color: #8a1f1f; }
@media (max-width: 600px) { .pbm-form { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.pbm-footer { background: var(--pbm-blue); color: #e5eefb; padding: 48px 0 28px; }
.pbm-footer a { color: #fff; }
.pbm-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.pbm-footer h4 { color: #fff; font-size: 1rem; text-transform: uppercase; letter-spacing: .1em; }
.pbm-footer ul { list-style: none; margin: 0; padding: 0; }
.pbm-footer li { margin-bottom: 6px; }
.pbm-footer .pbm-social { margin-top: 14px; }
.pbm-footer .custom-logo-link img, .pbm-footer .custom-logo { max-height: 110px; width: auto; border-radius: 50%; }
.pbm-footer .pbm-brand { display: inline-block; margin-bottom: 12px; }
.pbm-footer-bottom { border-top: 1px solid rgba(255,255,255,.18); margin-top: 32px; padding-top: 18px; font-size: 14px; text-align: center; }
@media (max-width: 800px) { .pbm-footer-grid { grid-template-columns: 1fr; } }

/* Long blog titles read better without the wide spacing */
.single .pbm-page-header h1 { letter-spacing: .01em; text-transform: none; font-family: var(--pbm-head); font-weight: 600; max-width: 900px; margin: 0 auto; }
.pbm-hero { background: linear-gradient(135deg, #003a8a, #0a74c9); }

/* Promo video */
.pbm-hero { background: #003a8a url(assets/hero-poster.jpg) center / cover no-repeat; }
.pbm-band-video { padding-top: 10px !important; padding-bottom: 50px !important; }
.pbm-promo { margin: 0 auto; max-width: 1100px !important; }
.pbm-promo video { width: 100%; display: block; border-radius: var(--pbm-radius); box-shadow: 0 10px 34px rgba(0,74,173,.22); background: #000; }

/* Top bar: phone + booking message */
.pbm-topbar strong { font-weight: 700; letter-spacing: .02em; }
.pbm-topbar .pbm-topbar-book { color: var(--pbm-turq); font-weight: 600; }
.pbm-topbar .pbm-topbar-book:hover { color: #fff; }