/*
Theme Name: Burgee Sailing Club
Theme URI: https://getburgee.com/
Author: Nathaniel G. Beighley
Author URI: https://getburgee.com/
Description: Demo-only theme for the fictitious Burgee Sailing Club at demo.getburgee.com. A lightweight classic theme that frames the Burgee plugin's race schedule, standings and results in a believable yacht-club site, with documentation and calls-to-action back to getburgee.com. Not for production use.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: burgee-club
*/

/* ==========================================================================
   Design tokens — harmonized with the Burgee plugin's frontend.css palette
   ========================================================================== */
:root {
	--bc-navy-900: #1b2433;
	--bc-navy-800: #1f2937;
	--bc-navy:     #2b3a5e;
	--bc-navy-600: #3a4870;
	--bc-navy-500: #4b5b8c;
	--bc-gold:     #c47e27;
	--bc-gold-600: #a9690f;
	--bc-ink:      #2b3340;
	--bc-body:     #3f4855;
	--bc-muted:    #6b7280;
	--bc-line:     #e5e7eb;
	--bc-bg:       #ffffff;
	--bc-bg-soft:  #f7f8f9;
	--bc-bg-blue:  #eef4fb;
	--bc-radius:   10px;
	--bc-shadow:   0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .08);
	--bc-wrap:     1120px;
	--bc-serif:    "Spectral", Georgia, "Times New Roman", serif;
	--bc-sans:     "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

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

body {
	margin: 0;
	font-family: var(--bc-sans);
	font-size: 17px;
	line-height: 1.65;
	color: var(--bc-body);
	background: var(--bc-bg);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--bc-serif);
	color: var(--bc-ink);
	line-height: 1.2;
	margin: 0 0 .5em;
	font-weight: 600;
}
h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.3rem; }

p { margin: 0 0 1.1em; }

a { color: var(--bc-navy-500); text-decoration: none; }
a:hover { color: var(--bc-gold-600); text-decoration: underline; }

img { max-width: 100%; height: auto; }

.bc-wrap {
	width: 100%;
	max-width: var(--bc-wrap);
	margin-inline: auto;
	padding-inline: 22px;
}

.bc-eyebrow {
	font-family: var(--bc-sans);
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: .78rem;
	font-weight: 700;
	color: var(--bc-gold-600);
	margin: 0 0 .6em;
}

/* Buttons -------------------------------------------------------------- */
.bc-btn {
	display: inline-block;
	font-weight: 600;
	font-size: .98rem;
	line-height: 1;
	padding: 14px 22px;
	border-radius: 8px;
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.bc-btn:hover { text-decoration: none; }
.bc-btn-primary { background: var(--bc-gold); color: #fff; }
.bc-btn-primary:hover { background: var(--bc-gold-600); color: #fff; }
.bc-btn-navy { background: var(--bc-navy); color: #fff; }
.bc-btn-navy:hover { background: var(--bc-navy-600); color: #fff; }
.bc-btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.bc-btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
.bc-btn-outline { background: #fff; color: var(--bc-navy); border-color: var(--bc-line); }
.bc-btn-outline:hover { border-color: var(--bc-navy-500); color: var(--bc-navy-600); }

/* ==========================================================================
   Site header / navigation
   ========================================================================== */
.bc-topbar {
	background: var(--bc-navy-900);
	color: #cdd5e3;
	font-size: .82rem;
}
.bc-topbar .bc-wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	min-height: 38px;
}
.bc-topbar a { color: #e6ebf3; }
.bc-topbar .bc-demo-pill {
	background: var(--bc-gold);
	color: #fff;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	font-size: .68rem;
	padding: 3px 9px;
	border-radius: 999px;
}

.bc-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255,255,255,.96);
	backdrop-filter: saturate(180%) blur(6px);
	border-bottom: 1px solid var(--bc-line);
}
.bc-header .bc-wrap {
	display: flex;
	align-items: center;
	gap: 26px;
	min-height: 72px;
}
.bc-brand { display: flex; align-items: center; gap: 12px; }
.bc-brand img { height: 40px; width: auto; }
.bc-brand .bc-brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.bc-brand .bc-brand-name {
	font-family: var(--bc-serif);
	font-weight: 700;
	font-size: 1.18rem;
	color: var(--bc-ink);
}
.bc-brand .bc-brand-sub {
	font-size: .68rem;
	text-transform: uppercase;
	letter-spacing: .16em;
	color: var(--bc-muted);
}
.bc-brand:hover { text-decoration: none; }

.bc-nav { margin-left: auto; }
.bc-nav ul { list-style: none; display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; }
.bc-nav li { position: relative; }
.bc-nav a {
	display: block;
	padding: 10px 13px;
	color: var(--bc-ink);
	font-weight: 500;
	font-size: .95rem;
	border-radius: 7px;
}
.bc-nav a:hover { background: var(--bc-bg-blue); color: var(--bc-navy-600); text-decoration: none; }
.bc-nav .current-menu-item > a,
.bc-nav .current_page_item > a { color: var(--bc-navy-500); }

/* Sub-menus (classic dropdown) */
.bc-nav ul ul {
	position: absolute;
	top: 100%;
	left: 0;
	display: block;
	min-width: 220px;
	background: #fff;
	border: 1px solid var(--bc-line);
	border-radius: 10px;
	box-shadow: var(--bc-shadow);
	padding: 6px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.bc-nav li:hover > ul,
.bc-nav li:focus-within > ul { opacity: 1; visibility: visible; transform: translateY(0); }
.bc-nav ul ul a { font-size: .9rem; }

/* The external "Get Burgee" CTA item — add CSS class `bc-cta` to that menu item */
.bc-nav .bc-cta > a {
	background: var(--bc-gold);
	color: #fff;
	margin-left: 8px;
}
.bc-nav .bc-cta > a:hover { background: var(--bc-gold-600); color: #fff; }

/* Mobile nav toggle */
.bc-nav-toggle {
	display: none;
	margin-left: auto;
	background: none;
	border: 1px solid var(--bc-line);
	border-radius: 8px;
	padding: 9px 11px;
	cursor: pointer;
	color: var(--bc-ink);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.bc-hero {
	position: relative;
	color: #fff;
	background:
		linear-gradient(180deg, rgba(20,28,42,.30) 0%, rgba(20,28,42,.62) 70%, rgba(20,28,42,.78) 100%),
		var(--bc-hero-fallback, linear-gradient(135deg, #2b3a5e 0%, #1b2433 100%));
	background-size: cover;
	background-position: center 40%;
}
.bc-hero.has-image { background-image:
		linear-gradient(180deg, rgba(20,28,42,.28) 0%, rgba(20,28,42,.60) 70%, rgba(20,28,42,.80) 100%),
		var(--bc-hero-image); }
.bc-hero .bc-wrap { padding-block: clamp(80px, 16vw, 168px); max-width: 980px; }
.bc-hero h1 { color: #fff; max-width: 16ch; text-shadow: 0 2px 18px rgba(0,0,0,.28); }
.bc-hero .bc-eyebrow { color: #f3d3a0; }
.bc-hero p.bc-lede {
	font-size: clamp(1.05rem, 2vw, 1.32rem);
	max-width: 56ch;
	color: #eef1f6;
	margin-bottom: 1.6em;
}
.bc-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ==========================================================================
   Sections / layout helpers
   ========================================================================== */
.bc-section { padding-block: clamp(48px, 8vw, 88px); }
.bc-section-soft { background: var(--bc-bg-soft); }
.bc-section-navy { background: var(--bc-navy-900); color: #cfd7e4; }
.bc-section-navy h2, .bc-section-navy h3 { color: #fff; }
.bc-section-head { max-width: 640px; margin-bottom: 40px; }
.bc-section-head.bc-center { margin-inline: auto; text-align: center; }

.bc-grid { display: grid; gap: 24px; }
.bc-grid-3 { grid-template-columns: repeat(3, 1fr); }
.bc-grid-2 { grid-template-columns: repeat(2, 1fr); }

.bc-card {
	background: #fff;
	border: 1px solid var(--bc-line);
	border-radius: var(--bc-radius);
	padding: 26px;
	box-shadow: var(--bc-shadow);
	display: flex;
	flex-direction: column;
}
.bc-card h3 { margin-bottom: .35em; }
.bc-card p { color: var(--bc-muted); font-size: .96rem; }
.bc-card .bc-card-link { margin-top: auto; font-weight: 600; padding-top: 10px; }
.bc-card .bc-icon {
	width: 46px; height: 46px;
	display: grid; place-items: center;
	border-radius: 10px;
	background: var(--bc-bg-blue);
	color: var(--bc-navy-500);
	margin-bottom: 16px;
}
.bc-section-navy .bc-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); box-shadow: none; }
.bc-section-navy .bc-card p { color: #aab4c5; }
.bc-section-navy .bc-card .bc-icon { background: rgba(255,255,255,.08); color: #f3d3a0; }

/* CTA band */
.bc-cta-band { text-align: center; }
.bc-cta-band h2 { max-width: 20ch; margin-inline: auto; }
.bc-cta-band p { max-width: 56ch; margin-inline: auto; margin-bottom: 1.6em; }
.bc-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   Page / content (interior pages, incl. plugin shortcode output)
   ========================================================================== */
.bc-page-hero {
	background: linear-gradient(135deg, var(--bc-navy) 0%, var(--bc-navy-900) 100%);
	color: #fff;
}
.bc-page-hero .bc-wrap { padding-block: clamp(40px, 7vw, 72px); }
.bc-page-hero h1 { color: #fff; margin: 0; }
.bc-page-hero p { color: #cdd5e3; margin: .5em 0 0; max-width: 60ch; }

.bc-main { padding-block: clamp(40px, 7vw, 72px); }
.bc-content { max-width: 820px; }
.bc-content.bc-wide { max-width: var(--bc-wrap); }
.bc-content h2 { margin-top: 1.6em; }
.bc-content h3 { margin-top: 1.4em; }
.bc-content ul, .bc-content ol { padding-left: 1.3em; margin: 0 0 1.1em; }
.bc-content li { margin-bottom: .4em; }
.bc-content blockquote {
	border-left: 4px solid var(--bc-gold);
	background: var(--bc-bg-soft);
	margin: 1.4em 0;
	padding: 14px 20px;
	border-radius: 0 8px 8px 0;
	color: var(--bc-ink);
}
.bc-content img { border-radius: 8px; }

/* "Callout" used on docs pages to point at getburgee.com */
.bc-callout {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 22px;
	background: var(--bc-bg-blue);
	border: 1px solid #d7e3f4;
	border-radius: var(--bc-radius);
	padding: 20px 24px;
	margin: 1.6em 0;
}
.bc-callout p { margin: 0; color: var(--bc-navy-600); }
.bc-callout .bc-btn { margin-left: auto; white-space: nowrap; }

/* Give plugin shortcode blocks a little breathing room on pages */
.bc-content .wpsf { margin: 1.4em 0; }

/* Screenshot figures on the docs pages */
.bc-shot { margin: 1.6em 0; }
.bc-shot img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--bc-line);
	border-radius: 10px;
	box-shadow: var(--bc-shadow);
	background: var(--bc-bg-soft);
}
.bc-shot figcaption {
	margin-top: 10px;
	font-size: .88rem;
	color: var(--bc-muted);
	font-style: italic;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.bc-footer {
	background: var(--bc-navy-900);
	color: #aab4c5;
	padding-block: 56px 28px;
	font-size: .92rem;
}
.bc-footer a { color: #d7deea; }
.bc-footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 32px;
	padding-bottom: 36px;
	border-bottom: 1px solid rgba(255,255,255,.10);
}
.bc-footer h4 { color: #fff; font-family: var(--bc-sans); font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 14px; }
.bc-footer ul { list-style: none; margin: 0; padding: 0; }
.bc-footer li { margin-bottom: 8px; }
.bc-footer .bc-foot-brand .bc-brand-name { color: #fff; font-family: var(--bc-serif); font-size: 1.2rem; }
.bc-footer .bc-powered {
	display: inline-flex; align-items: center; gap: 8px;
	margin-top: 14px;
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.10);
	border-radius: 999px;
	padding: 7px 14px;
	color: #f3d3a0;
	font-weight: 600;
}
.bc-footer .bc-powered:hover { background: rgba(255,255,255,.12); text-decoration: none; }
.bc-colophon {
	display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
	padding-top: 22px;
	font-size: .82rem;
	color: #7d889a;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
	.bc-grid-3 { grid-template-columns: repeat(2, 1fr); }
	.bc-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
	.bc-nav-toggle { display: inline-flex; }
	.bc-nav {
		position: absolute;
		top: 100%; left: 0; right: 0;
		background: #fff;
		border-bottom: 1px solid var(--bc-line);
		box-shadow: var(--bc-shadow);
		display: none;
		padding: 10px 14px 16px;
	}
	.bc-nav.is-open { display: block; }
	.bc-nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
	.bc-nav ul ul {
		position: static; opacity: 1; visibility: visible; transform: none;
		box-shadow: none; border: none; border-left: 2px solid var(--bc-line);
		border-radius: 0; margin: 2px 0 6px 12px; padding: 0 0 0 8px;
	}
	.bc-nav .bc-cta > a { margin-left: 0; text-align: center; }
	.bc-grid-3, .bc-grid-2 { grid-template-columns: 1fr; }
	.bc-footer-grid { grid-template-columns: 1fr; }
}