/*
Theme Name: SwingersHub (Blocksy Child)
Theme URI: https://swingershub.com.au
Description: Child theme for Blocksy implementing the SwingersHub brand system.
Author: SwingersHub
Template: blocksy
Version: 1.0.0
Text Domain: blocksy-child
*/

/* ==========================================================================
   Brand tokens
   ========================================================================== */

:root {
	--sh-velvet: #4a0e2e;
	--sh-bone: #e8dcc8;
	--sh-brass: #c9a227;
	--sh-nearblack: #1a0a12;
	--sh-softred: #b3405b;

	--sh-velvet-lift: #5a1a3a;   /* card / hover surface on velvet */
	--sh-bone-dim: rgba(232, 220, 200, 0.72);
	--sh-hairline: rgba(232, 220, 200, 0.16);

	--sh-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
	--sh-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

	--sh-measure: 68ch;
	--sh-radius: 2px;
}

/* ==========================================================================
   Base
   ========================================================================== */

body {
	background-color: var(--sh-velvet);
	color: var(--sh-bone);
	font-family: var(--sh-font-body);
	font-size: 1.0625rem;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.entry-content p,
.entry-content ul,
.entry-content ol {
	max-width: var(--sh-measure);
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title {
	font-family: var(--sh-font-display);
	color: var(--sh-bone);
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.2;
}

h1, .entry-title, .page-title {
	font-size: clamp(2.1rem, 5vw, 3.4rem);
	font-style: italic;
	font-variation-settings: 'SOFT' 40, 'WONK' 1;
	margin-bottom: 0.6em;
}

h2 {
	font-size: clamp(1.6rem, 3.4vw, 2.2rem);
	margin-top: 2.4em;
	margin-bottom: 0.7em;
}

h3 {
	font-size: clamp(1.2rem, 2.4vw, 1.45rem);
	margin-top: 1.9em;
	margin-bottom: 0.6em;
}

.entry-content h2 + h3 { margin-top: 1.1em; }

/* ==========================================================================
   Links
   ========================================================================== */

.entry-content a,
a {
	color: var(--sh-brass);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color 0.18s ease;
}

.entry-content a:hover,
a:hover { color: var(--sh-bone); }

a:focus-visible,
button:focus-visible,
input:focus-visible {
	outline: 2px solid var(--sh-brass);
	outline-offset: 3px;
}

/* ==========================================================================
   Header
   ========================================================================== */

header[data-header] .ct-header,
header[data-header] [data-row] {
	background-color: var(--sh-velvet) !important;
}

.site-title,
.site-title a,
[data-id="logo"] .site-title a {
	font-family: var(--sh-font-display) !important;
	font-style: italic;
	font-weight: 400;
	font-size: 1.6rem;
	color: var(--sh-bone) !important;
	letter-spacing: -0.01em;
	text-decoration: none;
}

.site-title a strong,
.site-title strong { font-weight: 800; }

.header-menu-1 > li > a,
[data-id="menu"] .menu > li > a {
	font-family: var(--sh-font-body);
	color: var(--sh-bone) !important;
	font-size: 0.9rem;
	font-weight: 500;
	letter-spacing: 0.01em;
}

[data-id="menu"] .menu > li > a:hover { color: var(--sh-brass) !important; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.sh-btn,
.ct-button,
.wp-block-button__link,
button[type="submit"],
.ff-btn-submit {
	display: inline-block;
	background-color: var(--sh-brass) !important;
	color: var(--sh-nearblack) !important;
	font-family: var(--sh-font-body) !important;
	font-weight: 600 !important;
	font-size: 0.9rem !important;
	letter-spacing: 0.02em;
	padding: 0.85em 1.6em !important;
	border: 0 !important;
	border-radius: var(--sh-radius) !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: background-color 0.18s ease, transform 0.18s ease;
}

.sh-btn:hover,
.ct-button:hover,
.wp-block-button__link:hover,
button[type="submit"]:hover,
.ff-btn-submit:hover {
	background-color: #dbb43a !important;
	color: var(--sh-nearblack) !important;
	transform: translateY(-1px);
}

.sh-btn--ghost {
	background: transparent !important;
	color: var(--sh-brass) !important;
	border: 1px solid var(--sh-brass) !important;
}

.sh-btn--ghost:hover {
	background: var(--sh-brass) !important;
	color: var(--sh-nearblack) !important;
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.sh-wrap {
	max-width: 1100px;
	margin-inline: auto;
	padding-inline: 24px;
}

.sh-section { padding-block: clamp(3rem, 7vw, 5.5rem); }

.sh-rule {
	border: 0;
	border-top: 1px solid var(--sh-hairline);
	margin-block: 3rem;
}

.sh-lede {
	font-size: clamp(1.1rem, 2.2vw, 1.3rem);
	line-height: 1.65;
	color: var(--sh-bone);
	max-width: 60ch;
}

.sh-breadcrumbs {
	font-size: 0.8rem;
	color: var(--sh-bone-dim);
	margin-bottom: 2rem;
	letter-spacing: 0.02em;
}

.sh-breadcrumbs a { color: var(--sh-bone-dim); text-decoration: none; }
.sh-breadcrumbs a:hover { color: var(--sh-brass); text-decoration: underline; }
.sh-breadcrumbs .separator { color: var(--sh-brass); margin: 0 0.5em; }

.sh-eyebrow {
	font-family: var(--sh-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sh-brass);
	margin-bottom: 1rem;
	display: block;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.sh-hero {
	background: linear-gradient(160deg, var(--sh-velvet) 0%, var(--sh-nearblack) 100%);
	padding-block: clamp(4rem, 12vw, 8.5rem);
	text-align: left;
}

.sh-hero h1 { margin-bottom: 0.5em; max-width: 16ch; }
.sh-hero .sh-lede { margin-bottom: 2.2rem; }

/* Front page: Blocksy's page title is the H1, so give it the hero treatment
   and close the gap to the supporting hero block beneath it. */
.home .page-title {
	max-width: 18ch;
	margin-bottom: 0;
}

.home .hero-section,
.home .page-title + * { margin-bottom: 0; }

.home .sh-hero {
	background: none;
	padding-top: 1.5rem;
	padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

/* ==========================================================================
   Cards
   ========================================================================== */

.sh-card {
	background-color: var(--sh-velvet-lift);
	border: 1px solid var(--sh-hairline);
	border-radius: var(--sh-radius);
	padding: 2rem;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.sh-card:hover {
	border-color: var(--sh-brass);
	transform: translateY(-2px);
}

.sh-card h2, .sh-card h3 { margin-top: 0; }

.sh-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Bone card variant — for high-emphasis blocks */
.sh-card--bone {
	background-color: var(--sh-bone);
	color: var(--sh-nearblack);
	border-color: transparent;
}

.sh-card--bone h2,
.sh-card--bone h3,
.sh-card--bone p { color: var(--sh-nearblack); }

.sh-card--bone a { color: #8a1f4a; }

/* ==========================================================================
   Event cards (This Weekend)
   ========================================================================== */

.sh-day {
	font-family: var(--sh-font-display);
	font-style: italic;
	font-size: 1.7rem;
	color: var(--sh-brass);
	border-bottom: 1px solid var(--sh-hairline);
	padding-bottom: 0.5rem;
	margin-top: 3rem;
	margin-bottom: 1.5rem;
}

.sh-event {
	background-color: var(--sh-velvet-lift);
	border-left: 3px solid var(--sh-brass);
	padding: 1.5rem 1.75rem;
	margin-bottom: 1.25rem;
}

.sh-event h3 { margin: 0 0 0.5rem; font-size: 1.25rem; }

.sh-event__meta {
	font-size: 0.875rem;
	color: var(--sh-bone-dim);
	margin-bottom: 0.9rem;
}

.sh-event__meta span + span::before {
	content: '·';
	margin: 0 0.6em;
	color: var(--sh-brass);
}

.sh-event__book { margin: 0; font-size: 0.9rem; }

/* Compact listing — home page */
.sh-events--compact .sh-day {
	font-size: 1.1rem;
	margin-top: 2rem;
	margin-bottom: 0.75rem;
	padding-bottom: 0.4rem;
}

.sh-events--compact .sh-day:first-child { margin-top: 0; }

.sh-events--compact .sh-event {
	padding: 1rem 1.25rem;
	margin-bottom: 0.6rem;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem 1rem;
}

.sh-events--compact .sh-event h3 {
	font-size: 1.05rem;
	margin: 0;
	flex: 1 1 auto;
}

.sh-events--compact .sh-event__meta {
	margin: 0;
	font-size: 0.82rem;
	flex: 1 1 100%;
}

.sh-events--compact .sh-event__book { flex: 0 0 auto; font-size: 0.82rem; }

/* ==========================================================================
   Tools
   ========================================================================== */

.sh-tool {
	background-color: var(--sh-velvet-lift);
	border: 1px solid var(--sh-hairline);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	margin-block: 2rem;
}

.sh-tool fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 1.75rem;
}

.sh-tool legend {
	font-family: var(--sh-font-body);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sh-brass);
	margin-bottom: 0.9rem;
	padding: 0;
}

.sh-tool__options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.sh-tool__options label {
	display: inline-block;
	border: 1px solid var(--sh-hairline);
	border-radius: var(--sh-radius);
	padding: 0.6rem 1rem;
	font-size: 0.9rem;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
	user-select: none;
}

.sh-tool__options label:hover { border-color: var(--sh-brass); }

.sh-tool__options input { position: absolute; opacity: 0; pointer-events: none; }

.sh-tool__options input:checked + span,
.sh-tool__options label:has(input:checked) {
	background-color: var(--sh-brass);
	color: var(--sh-nearblack);
	border-color: var(--sh-brass);
	font-weight: 600;
}

.sh-tool__options input:focus-visible + span {
	outline: 2px solid var(--sh-brass);
	outline-offset: 3px;
}

.sh-tool__result {
	border-top: 1px solid var(--sh-hairline);
	padding-top: 1.75rem;
	margin-top: 0.5rem;
}

.sh-tool__result[hidden] { display: none; }

.sh-tool__result h3 { margin-top: 0; color: var(--sh-brass); }

.sh-tool__match {
	background-color: var(--sh-velvet);
	border-left: 3px solid var(--sh-brass);
	padding: 1.25rem 1.5rem;
	margin-bottom: 1rem;
}

.sh-tool__match h4 {
	font-family: var(--sh-font-display);
	font-style: italic;
	font-size: 1.15rem;
	margin: 0 0 0.4rem;
}

.sh-tool__match p { margin: 0 0 0.6rem; font-size: 0.92rem; color: var(--sh-bone-dim); }

.sh-placeholder {
	border: 1px dashed var(--sh-softred);
	border-left: 3px solid var(--sh-softred);
	background: rgba(179, 64, 91, 0.08);
	padding: 1.25rem 1.5rem;
	margin-bottom: 1.25rem;
	color: var(--sh-bone-dim);
	font-size: 0.9rem;
}

/* ==========================================================================
   Notices
   ========================================================================== */

.sh-notice {
	font-size: 0.875rem;
	color: var(--sh-bone-dim);
	border-left: 2px solid var(--sh-brass);
	padding-left: 1rem;
	margin-block: 1.5rem;
}

.sh-alert {
	border-left-color: var(--sh-softred);
	color: var(--sh-softred);
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.sh-faq { border-top: 1px solid var(--sh-hairline); }

.sh-faq__item {
	border-bottom: 1px solid var(--sh-hairline);
	padding-block: 1.4rem;
}

.sh-faq__item h3 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.sh-faq__item p { margin: 0; color: var(--sh-bone-dim); }

/* ==========================================================================
   Newsletter block
   ========================================================================== */

.sh-signup {
	background-color: var(--sh-nearblack);
	border: 1px solid var(--sh-hairline);
	padding: clamp(2rem, 5vw, 3rem);
	margin-block: 3rem;
}

.sh-signup h2 {
	margin-top: 0;
	font-size: clamp(1.5rem, 3vw, 2rem);
}

.sh-signup p { color: var(--sh-bone-dim); max-width: 52ch; }

/* Fluent Forms */
.fluentform .ff-el-input--content input[type="email"],
.fluentform input[type="email"] {
	background-color: var(--sh-velvet) !important;
	border: 1px solid var(--sh-hairline) !important;
	color: var(--sh-bone) !important;
	border-radius: var(--sh-radius) !important;
	padding: 0.85em 1em !important;
	font-family: var(--sh-font-body) !important;
	font-size: 0.95rem !important;
}

.fluentform input[type="email"]::placeholder { color: rgba(232, 220, 200, 0.45) !important; }
.fluentform input[type="email"]:focus { border-color: var(--sh-brass) !important; }

.fluentform .ff-el-form-check-label,
.fluentform .ff-el-input--label label {
	color: var(--sh-bone-dim) !important;
	font-family: var(--sh-font-body) !important;
	font-size: 0.85rem !important;
	font-weight: 400 !important;
}

.fluentform .ff-el-group { margin-bottom: 1rem !important; }

.ff-message-success {
	background: transparent !important;
	border: 1px solid var(--sh-brass) !important;
	color: var(--sh-bone) !important;
	padding: 1rem 1.25rem !important;
	font-family: var(--sh-font-body) !important;
}

/* ==========================================================================
   Footer
   ========================================================================== */

footer.ct-footer,
footer.ct-footer [data-row] {
	background-color: var(--sh-nearblack) !important;
	color: var(--sh-bone-dim);
}

footer.ct-footer a { color: var(--sh-bone-dim); }
footer.ct-footer a:hover { color: var(--sh-brass); }

.sh-footer-note {
	font-size: 0.8rem;
	color: rgba(232, 220, 200, 0.5);
	line-height: 1.7;
}

.sh-footer-note strong { color: var(--sh-brass); font-weight: 600; }

.sh-footer {
	background-color: var(--sh-nearblack);
	border-top: 1px solid var(--sh-hairline);
	padding-block: clamp(2.5rem, 6vw, 4rem);
}

.sh-footer__grid {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	align-items: start;
}

.sh-footer__signup h2 {
	margin-top: 0;
	margin-bottom: 0.4em;
	font-size: clamp(1.3rem, 2.6vw, 1.7rem);
}

.sh-footer__signup p { color: var(--sh-bone-dim); margin-bottom: 1.2rem; }

.sh-footer__meta { padding-top: 0.5rem; }
.sh-footer__meta .sh-footer-note + .sh-footer-note { margin-top: 0.9rem; }

.ct-footer-copyright { font-size: 0.8rem; color: rgba(232, 220, 200, 0.5); }

@media (max-width: 767px) {
	.sh-footer__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Age Gate
   ========================================================================== */

.age-gate,
.age-gate__wrapper,
#age-gate-wrapper {
	background-color: var(--sh-velvet) !important;
	color: var(--sh-bone) !important;
	font-family: var(--sh-font-body) !important;
}

.age-gate__background { background-color: var(--sh-velvet) !important; }

.age-gate__heading,
.age-gate__headline,
.age-gate h1, .age-gate h2 {
	font-family: var(--sh-font-display) !important;
	font-style: italic !important;
	color: var(--sh-bone) !important;
	font-weight: 600 !important;
}

.age-gate__subheadline,
.age-gate__challenge,
.age-gate p { color: var(--sh-bone-dim) !important; }

.age-gate__submit,
.age-gate__button--submit,
.age-gate button {
	background-color: var(--sh-brass) !important;
	color: var(--sh-nearblack) !important;
	border: 0 !important;
	border-radius: var(--sh-radius) !important;
	font-weight: 600 !important;
	padding: 0.85em 1.8em !important;
	cursor: pointer;
}

.age-gate__button--exit,
.age-gate__submit--no {
	background: transparent !important;
	color: var(--sh-bone-dim) !important;
	border: 1px solid var(--sh-hairline) !important;
}

/* ==========================================================================
   Tables
   ========================================================================== */

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
	margin-block: 1.75rem;
}

.entry-content th,
.entry-content td {
	border-bottom: 1px solid var(--sh-hairline);
	padding: 0.85rem 1rem;
	text-align: left;
}

.entry-content th {
	color: var(--sh-brass);
	font-family: var(--sh-font-body);
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ==========================================================================
   Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.sh-card:hover,
	.sh-btn:hover { transform: none; }
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 767px) {
	body { font-size: 1rem; }
	.sh-card { padding: 1.5rem; }
	.sh-event { padding: 1.25rem 1.25rem; }
	.sh-hero { padding-block: 3.5rem; }
	.sh-hero h1 { max-width: none; }
}