/* ==========================================================================
   Sugar Hill Hop - Frontend Styles
   These extend what theme.json cannot handle: custom block styles,
   animations, and fine-grained component styles.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Smooth scrolling & selection
   -------------------------------------------------------------------------- */
html {
	scroll-behavior: smooth;
}

::selection {
	background-color: var(--wp--preset--color--shh-gold-light);
	color: var(--wp--preset--color--shh-rich-brown);
}

/* --------------------------------------------------------------------------
   Block Style: Callout boxes (gold / sage / burgundy)
   -------------------------------------------------------------------------- */
.is-style-shh-callout-gold {
	background-color: var(--wp--preset--color--shh-cream);
	border-left: 3px solid var(--wp--preset--color--shh-gold);
	border-radius: 8px;
	padding: 20px 24px;
}

.is-style-shh-callout-sage {
	background-color: var(--wp--preset--color--shh-cream);
	border-left: 3px solid var(--wp--preset--color--shh-sage);
	border-radius: 8px;
	padding: 20px 24px;
}

.is-style-shh-callout-burgundy {
	background-color: var(--wp--preset--color--shh-cream);
	border-left: 3px solid var(--wp--preset--color--shh-deep-burgundy);
	border-radius: 8px;
	padding: 20px 24px;
}

/* --------------------------------------------------------------------------
   Block Style: Emphasis box (top border gradient)
   -------------------------------------------------------------------------- */
.is-style-shh-emphasis-box {
	background-color: var(--wp--preset--color--shh-cream);
	border-top: 3px solid var(--wp--preset--color--shh-deep-burgundy);
	border-radius: 8px;
	padding: 24px 28px;
}

/* --------------------------------------------------------------------------
   Block Style: Card column
   -------------------------------------------------------------------------- */
.is-style-shh-card {
	background-color: var(--wp--preset--color--shh-warm-white);
	border-radius: 8px;
	padding: 24px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.is-style-shh-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 20px rgba(27, 42, 74, 0.08);
}

/* --------------------------------------------------------------------------
   Block Style: Do / Don't columns
   -------------------------------------------------------------------------- */
.is-style-shh-do-dont {
	gap: 24px;
}

.is-style-shh-do-col {
	background-color: var(--wp--preset--color--shh-cream);
	border-left: 3px solid var(--wp--preset--color--shh-sage);
	border-radius: 8px;
	padding: 24px;
}

.is-style-shh-dont-col {
	background-color: var(--wp--preset--color--shh-cream);
	border-left: 3px solid var(--wp--preset--color--shh-terracotta);
	border-radius: 8px;
	padding: 24px;
}

/* --------------------------------------------------------------------------
   Block Style: Guideline cards container
   -------------------------------------------------------------------------- */
.is-style-shh-guideline-cards {
	gap: 24px;
}

.is-style-shh-guideline-cards > .wp-block-column {
	background-color: var(--wp--preset--color--shh-warm-white);
	border-radius: 8px;
	padding: 24px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.is-style-shh-guideline-cards > .wp-block-column:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 20px rgba(27, 42, 74, 0.08);
}

/* --------------------------------------------------------------------------
   Block Style: Check / Cross lists
   -------------------------------------------------------------------------- */
.is-style-shh-check-list {
	list-style: none;
	padding-left: 0;
}

.is-style-shh-check-list li {
	position: relative;
	padding-left: 1.6em;
}

.is-style-shh-check-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--wp--preset--color--shh-sage);
	font-weight: 700;
}

.is-style-shh-cross-list {
	list-style: none;
	padding-left: 0;
}

.is-style-shh-cross-list li {
	position: relative;
	padding-left: 1.6em;
}

.is-style-shh-cross-list li::before {
	content: "✗";
	position: absolute;
	left: 0;
	color: var(--wp--preset--color--shh-terracotta);
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   Separator override - thin gold line
   -------------------------------------------------------------------------- */
.wp-block-separator.is-style-wide {
	border-bottom-width: 1px;
	opacity: 0.4;
}

/* --------------------------------------------------------------------------
   Navigation - subtle hover effect
   -------------------------------------------------------------------------- */
.wp-block-navigation a:hover {
	opacity: 0.8;
}

/* --------------------------------------------------------------------------
   Navigation - accessible focus ring (keyboard / assistive tech)
   Applies to header + footer nav links and the mobile open/close buttons.
   -------------------------------------------------------------------------- */
.wp-block-navigation a:focus-visible,
.wp-block-navigation button:focus-visible,
.wp-block-navigation__responsive-container-open:focus-visible,
.wp-block-navigation__responsive-container-close:focus-visible {
	outline: 2px solid var(--wp--preset--color--shh-gold);
	outline-offset: 3px;
	border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Mobile navigation overlay (hamburger menu, <= 781px)
   Only the header nav opens an overlay (the footer is overlayMenu:never), so
   these .is-menu-open rules are header-only in practice. Goal: comfortable,
   thumb-friendly tap targets and a clean vertical list - not shrunk desktop
   links. (Full-width / left-align come from theme.json's core/navigation css.)
   -------------------------------------------------------------------------- */

/* Larger, 44px-min tap target for the hamburger + close icons. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
	width: 28px;
	height: 28px;
}

/* Breathing room inside the open overlay panel. */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
	padding-top: 1.5rem;
}

/* Each item: bigger type, generous height, hairline divider for scannability. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	border-bottom: 1px solid rgba(255, 252, 247, 0.14);
}
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item:last-child {
	border-bottom: 0;
}
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
	font-size: 1.25rem;
	min-height: 52px;
	padding-top: 0.4rem;
	padding-bottom: 0.4rem;
	align-items: center;
}

/* --------------------------------------------------------------------------
   Cover block - ensure good text contrast
   -------------------------------------------------------------------------- */
.wp-block-cover .wp-block-cover__inner-container {
	z-index: 1;
}

/* --------------------------------------------------------------------------
   Responsive refinements
   -------------------------------------------------------------------------- */
@media (max-width: 781px) {
	.is-style-shh-do-dont {
		flex-direction: column;
	}

	/* Home "Private Lessons / Workshops / Building Culture" feature columns:
	   once stacked they share one gradient panel with no separation, so each
	   section's heading, text and button blur into the next. Add a clear gap and
	   a faint divider (light, for the dark gradient) between each stacked section. */
	.shh-feature-cols > .wp-block-column + .wp-block-column {
		margin-top: 2rem;
		padding-top: 2rem;
		border-top: 1px solid rgba(255, 255, 255, 0.22);
	}
}

/* --------------------------------------------------------------------------
   Accessibility - focus visible
   -------------------------------------------------------------------------- */
*:focus-visible {
	outline: 2px solid var(--wp--preset--color--shh-gold);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Screen reader text
   -------------------------------------------------------------------------- */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	word-wrap: normal !important;
}

/* --------------------------------------------------------------------------
   "pending" placeholder for [shh_email]: a gentle pulse to suggest it is
   loading. Targets only the pre-reveal state (while data-a is present); the JS
   removes data-a on reveal, so the address itself never animates.
   -------------------------------------------------------------------------- */
.shh-correspondence[data-a] {
	animation: shh-pending-pulse 1.2s ease-in-out infinite;
}

@keyframes shh-pending-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.35; }
}

@media ( prefers-reduced-motion: reduce ) {
	.shh-correspondence[data-a] { animation: none; }
}

/* --------------------------------------------------------------------------
   Events table ([next_event template="table"]) - brand styling
   The Sugar Hill Hop - Events plugin ships neutral, theme-agnostic table CSS; these
   rules dress it in the Sugar Hill Hop palette + Playfair titles. Selectors use
   the .seb-table.seb-event compound so they out-specify the plugin's inline CSS
   regardless of load order. Structure + responsiveness stay in the plugin.
   -------------------------------------------------------------------------- */
.seb-table.seb-event {
	font-size: 1rem;
	border: 0;
}
.seb-table.seb-event thead th {
	background: var(--wp--preset--color--shh-navy);
	color: var(--wp--preset--color--shh-warm-white);
	border-bottom: 0;
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 12px 16px;
}
.seb-table.seb-event td {
	padding: 14px 16px;
	border-bottom: 1px solid rgba(27, 42, 74, 0.1);
	vertical-align: middle;
}
.seb-table.seb-event tbody tr:last-child td {
	border-bottom: 0;
}
.seb-table.seb-event tbody tr {
	transition: background-color 0.15s ease;
}
.seb-table.seb-event tbody tr:hover {
	background: rgba(200, 169, 81, 0.1);
}
.seb-table.seb-event .seb-table-title a {
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--shh-navy);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
}
.seb-table.seb-event .seb-table-title a:hover {
	color: var(--wp--preset--color--shh-deep-burgundy);
	text-decoration: none;
}
.seb-table.seb-event .seb-table-location,
.seb-table.seb-event .seb-table-price {
	color: var(--wp--preset--color--shh-text-body);
}

/* Per-row call-to-action button -> brand gold, navy on hover. */
.seb-table.seb-event .seb-details-btn {
	background: var(--wp--preset--color--shh-gold);
	color: var(--wp--preset--color--shh-navy);
	border: 1px solid var(--wp--preset--color--shh-gold);
	border-radius: 6px;
	padding: 9px 16px;
	font-weight: 600;
	font-size: 0.95rem;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.seb-table.seb-event .seb-details-btn:hover {
	background: var(--wp--preset--color--shh-navy);
	color: var(--wp--preset--color--shh-warm-white);
	border-color: var(--wp--preset--color--shh-navy);
	opacity: 1;
}
.seb-table.seb-event .seb-details-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--shh-navy);
	outline-offset: 2px;
}

/* Stacked cards: give each row card a brand lift. (Breakpoint matches the
   plugin's table->cards transform so the multi-column table only shows where it
   comfortably fits.) */
@media ( max-width: 900px ) {
	.seb-table.seb-event tr {
		border: 1px solid rgba(27, 42, 74, 0.12);
		box-shadow: 0 2px 8px rgba(61, 43, 31, 0.06);
		background: var(--wp--preset--color--shh-warm-white);
	}
	.seb-table.seb-event tbody tr:hover {
		background: var(--wp--preset--color--shh-warm-white);
	}
	/* In a card the title is the heading, so it earns prominence (unlike the
	   table row, where it stays at body size and leans on weight/serif/colour). */
	.seb-table.seb-event .seb-table-title a {
		font-size: 1.2rem;
	}
}