/*
Theme Name: Rotary Pekela
Description: Custom block theme for Rotary Club Pekela, built on the Rotary brand guidelines. No page builder.
Version: 1.0.7
Requires at least: 6.6
Requires PHP: 8.1
Author: Aerotive Labs
Text Domain: rotary-pekela
License: GPL-2.0-or-later
*/

:root {
	--rp-radius: var(--wp--custom--radius, 6px);
}

/* Skip link and focus */
:where(a, button, input, select, textarea):focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

/* Header */
.rp-header {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.admin-bar .rp-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .rp-header { top: 0; position: relative; } }
.rp-header .rp-logo img { height: 56px; width: auto; }
.rp-header .wp-block-navigation .current-menu-item > a,
.rp-header .wp-block-navigation a[aria-current="page"] {
	color: var(--wp--preset--color--azure);
	box-shadow: inset 0 -2px 0 currentColor;
}
.rp-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.5rem;
}

/* Buttons */
.wp-block-button.is-style-gold .wp-block-button__link {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--charcoal);
}
.wp-block-button.is-style-gold .wp-block-button__link:hover {
	background: #e4960a;
}
.wp-block-button.is-style-outline-light .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--white);
	box-shadow: inset 0 0 0 2px rgba(255,255,255,.8);
}
.wp-block-button.is-style-outline-light .wp-block-button__link:hover {
	background: rgba(255,255,255,.12);
}

/* Hero: fills the first screen below the sticky header */
:root { --rp-header-height: 80px; }
.rp-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: grid;
	align-content: center;
	min-height: calc(100vh - var(--rp-header-height));
	min-height: calc(100svh - var(--rp-header-height));
	padding-top: clamp(2rem, 6vh, 4rem) !important;
	padding-bottom: clamp(2rem, 6vh, 4rem) !important;
}
.admin-bar .rp-hero {
	min-height: calc(100vh - var(--rp-header-height) - 32px);
	min-height: calc(100svh - var(--rp-header-height) - 32px);
}
@media (max-width: 782px) {
	.admin-bar .rp-hero {
		min-height: calc(100vh - var(--rp-header-height) - 46px);
		min-height: calc(100svh - var(--rp-header-height) - 46px);
	}
}
/* Short laptop screens: tighter content so the buttons and logo stay on the first screen */
@media (min-width: 601px) and (max-height: 700px) {
	.rp-hero h1 { font-size: var(--wp--preset--font-size--xx-large) !important; }
	.rp-hero .wp-block-image { margin-top: 1rem !important; }
	.rp-hero .wp-block-image img { width: 200px !important; }
}
.rp-hero::after {
	/* Oversized wheel-ring watermark built from CSS, not a brand mark */
	content: "";
	position: absolute;
	right: -14vw;
	top: 50%;
	width: min(70vw, 760px);
	aspect-ratio: 1;
	transform: translateY(-50%);
	border-radius: 50%;
	border: clamp(28px, 5vw, 64px) solid rgba(255,255,255,.06);
	box-shadow: 0 0 0 clamp(20px, 3vw, 40px) rgba(0,162,224,.08);
	z-index: -1;
}
.rp-hero .rp-eyebrow { color: var(--wp--preset--color--gold); }
.rp-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 700;
	font-size: 0.8125rem;
}

/* Cards */
.rp-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--rp-radius);
	height: 100%;
	/* Long URLs in an excerpt must wrap, not stretch the card over its neighbour */
	min-width: 0;
	overflow-wrap: anywhere;
	transition: box-shadow .2s ease, transform .2s ease;
}
.rp-card:hover { box-shadow: var(--wp--preset--shadow--card); }
.rp-card .wp-block-post-featured-image img {
	border-radius: var(--rp-radius) var(--rp-radius) 0 0;
	aspect-ratio: 16/10;
	object-fit: cover;
}
.rp-news .wp-block-post-template { align-items: stretch; }
.rp-news .wp-block-post { display: flex; }
.rp-news .wp-block-post > .rp-card { flex: 1; }

/* Areas of focus */
.rp-aof .wp-block-column { text-align: center; }
.rp-aof img { width: 84px; height: 84px; margin-inline: auto; }
.rp-aof h3 { font-size: 1rem; margin-top: .75rem; }
.rp-aof p { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--slate); }
.rp-aof-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 2rem 1.5rem;
}
.rp-aof-grid > * { margin-block-start: 0; }

/* Stats */
.rp-stat-num {
	font-size: var(--wp--preset--font-size--x-large);
	white-space: nowrap;
	font-weight: 800;
	color: var(--wp--preset--color--azure);
	line-height: 1;
	margin: 0;
}

/* Page title band */
.rp-page-head { border-bottom: 4px solid var(--wp--preset--color--gold); }

/* Footer */
.rp-footer a { color: var(--wp--preset--color--white); text-decoration: none; }
.rp-footer a:hover { text-decoration: underline; }
.rp-footer .rp-footer-logo { margin-bottom: 1.5rem; }
.rp-footer .rp-footer-logo img { height: 64px; width: auto; }
.rp-footer h2 {
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--wp--preset--color--gold);
}
.rp-footer ul { list-style: none; padding: 0; margin: 0; }
.rp-footer li + li { margin-top: .4rem; }

/* Forms (Fluent Forms inherits these) */
.entry-content input:not([type=checkbox]):not([type=radio]):not([type=submit]),
.entry-content textarea,
.entry-content select {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--rp-radius);
	padding: .7rem .85rem;
	font: inherit;
	width: 100%;
}

.rp-footer .wp-block-separator { width: 100%; max-width: none; border: 0; height: 1px; }

/* The Events Calendar: brand accent */
:root {
	--tec-color-accent-primary: var(--wp--preset--color--azure);
	--tec-color-accent-primary-hover: var(--wp--preset--color--royal);
	--tec-color-button-primary: var(--wp--preset--color--azure);
	--tec-font-family-sans-serif: var(--wp--preset--font-family--open-sans);
}
.tribe-events-view { padding-top: var(--wp--preset--spacing--40); }

/* Fluent Forms: brand button */
.fluentform .ff-btn-submit:not(.ff_btn_no_style) {
	background-color: var(--wp--preset--color--azure) !important;
	border-radius: var(--rp-radius);
	font-weight: 700;
	padding: .8rem 1.5rem;
}
.fluentform .ff-btn-submit:not(.ff_btn_no_style):hover { background-color: var(--wp--preset--color--royal) !important; }

/* Six menu items need the room: below this width the join button stays in the hero only */
.rp-header .wp-block-button__link { white-space: nowrap; }
@media (min-width: 800px) {
	.rp-header .wp-block-navigation__container { flex-wrap: nowrap; white-space: nowrap; }
}
@media (max-width: 1000px) {
	.rp-header .wp-block-buttons { display: none; }
	.rp-header .wp-block-navigation__container { gap: 1rem !important; }
}

/* Small screens: compact header; the join button stays in the hero and menu */
@media (max-width: 600px) {
	.rp-header .rp-logo img { height: 44px !important; } /* beats the block's inline height */
	.rp-header .wp-block-buttons { display: none; }
}

/* Hero video carousel: one square video at a time, see assets/js/hero-videos.js */
.rp-hero-videos {
	display: grid;
	gap: .75rem;
	max-width: 440px;
	margin-inline: auto;
}
.rp-hero-videos .wp-block-video {
	grid-area: 1 / 1;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .4s ease, visibility .4s;
}
.rp-hero-videos .wp-block-video:first-child,
.rp-hero-videos.is-ready .wp-block-video.is-active { opacity: 1; visibility: visible; }
.rp-hero-videos.is-ready .wp-block-video:not(.is-active) { opacity: 0; visibility: hidden; }
.rp-hero-videos video {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	background: var(--wp--preset--color--royal);
	border-radius: var(--rp-radius);
	box-shadow: 0 12px 32px rgba(0,0,0,.28);
}
.rp-hero-videos figcaption {
	margin: .75rem 0 0;
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
	text-align: left;
}
.rp-hero-videos__nav {
	display: flex;
	align-items: center;
	gap: .25rem;
}
.rp-hero-videos__nav button {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--white);
	font: inherit;
	cursor: pointer;
}
.rp-hero-videos__dot::before {
	content: "";
	width: .6rem;
	height: .6rem;
	border-radius: 50%;
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--white);
}
.rp-hero-videos__dot[aria-current="true"]::before { background: var(--wp--preset--color--gold); box-shadow: none; }
.rp-hero-videos__toggle { margin-left: auto; }
.rp-hero-videos__toggle svg { width: 1rem; height: 1rem; fill: currentColor; }
@media (max-width: 781px) {
	.rp-hero-videos { margin-top: var(--wp--preset--spacing--30); }
}
@media (prefers-reduced-motion: reduce) {
	.rp-hero-videos .wp-block-video { transition: none; }
}