/*
Theme Name: SCE Program Theme
Theme URI: https://scecruises.com
Author: Signature Cruise Experiences
Author URI: https://scecruises.com
Description: Base WordPress theme for SCE charter cruise programs. Generic and brand-agnostic. All brand-specific values (colors, fonts, copy) are placeholder tokens to be replaced per program. Includes templates for Home, Lineup, Experience, Ports of Call, The Ship, Staterooms, Venues, Amenities, and Generic pages.
Version: 0.1.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: sce-theme
*/

/* ==========================================================================
   DESIGN TOKENS — PLACEHOLDER VALUES
   Replace every value in this block per brand. Do not change variable names;
   templates and block patterns reference these names directly.
   ========================================================================== */
:root {
	/* Brand color tokens — PLACEHOLDER. Awaiting design team hex codes per master reference Section visual-standards.md */
	--sce-color-primary: #1a1a1a;       /* PLACEHOLDER_PRIMARY */
	--sce-color-secondary: #555555;     /* PLACEHOLDER_SECONDARY */
	--sce-color-accent: #b08d57;        /* PLACEHOLDER_ACCENT */
	--sce-color-neutral: #f5f3ef;       /* PLACEHOLDER_NEUTRAL */
	--sce-color-text: #1a1a1a;          /* PLACEHOLDER_TEXT */
	--sce-color-text-inverse: #ffffff;
	--sce-color-background: #ffffff;

	/* Typography tokens — PLACEHOLDER */
	--sce-font-heading: "PLACEHOLDER_HEADING_FONT", Georgia, serif;
	--sce-font-body: "PLACEHOLDER_BODY_FONT", Helvetica, Arial, sans-serif;

	/* Spacing scale */
	--sce-space-xs: 0.5rem;
	--sce-space-sm: 1rem;
	--sce-space-md: 2rem;
	--sce-space-lg: 4rem;
	--sce-space-xl: 6rem;

	/* Layout */
	--sce-container-width: 1200px;
	--sce-radius: 4px;
}

/* ==========================================================================
   BASE
   ========================================================================== */
* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--sce-font-body);
	color: var(--sce-color-text);
	background: var(--sce-color-background);
	line-height: 1.6;
}

h1, h2, h3, h4 {
	font-family: var(--sce-font-heading);
	line-height: 1.2;
	margin: 0 0 var(--sce-space-sm);
}

a { color: var(--sce-color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

.sce-container {
	width: 100%;
	max-width: var(--sce-container-width);
	margin: 0 auto;
	padding: 0 var(--sce-space-md);
}

.sce-section {
	padding: var(--sce-space-xl) 0;
}

/* Program name styling — italicized per master reference Section 6.2 */
.sce-program-name {
	font-style: italic;
}

/* Artist/personality first-mention styling — web equivalent of "bold first mention" */
.sce-name-highlight {
	font-weight: 700;
}

/* ==========================================================================
   HEADER / FOOTER
   ========================================================================== */

/* Utility nav — top-most bar, scrolls away normally (not sticky) */
.sce-utility-nav {
	background: var(--sce-color-neutral);
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	font-size: 0.75rem;
}

.sce-utility-nav__inner {
	display: flex;
	justify-content: flex-end;
	gap: var(--sce-space-md);
	padding: 0.5rem var(--sce-space-md);
}

.sce-utility-nav a {
	color: var(--sce-color-secondary);
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.sce-utility-nav a:hover {
	color: var(--sce-color-text);
	text-decoration: none;
}

/* Primary nav — sticky as the page scrolls */
.sce-site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sce-space-md);
	padding: var(--sce-space-xs) var(--sce-space-md);
	background: var(--sce-color-background);
	border-bottom: 1px solid var(--sce-color-neutral);
}

.sce-site-header__logo img { max-height: 56px; }

.sce-nav {
	flex: 1;
}

.sce-nav ul {
	display: flex;
	gap: var(--sce-space-md);
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.sce-nav a {
	font-size: 0.9rem;
	color: var(--sce-color-text);
	white-space: nowrap;
}

.sce-nav a:hover {
	color: var(--sce-color-accent);
	text-decoration: none;
}

/* Anchor offset so in-page jumps (omnipage sections) land below the sticky
   header instead of underneath it. Apply to any section with an id used as
   a nav/anchor target. */
.sce-anchor-offset {
	scroll-margin-top: 84px;
}

/* Persistent back-to-top button */
.sce-back-to-top {
	position: fixed;
	right: var(--sce-space-md);
	bottom: var(--sce-space-md);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--sce-color-primary);
	color: var(--sce-color-text-inverse);
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transform: translateY(8px);
	transition: opacity 0.2s, transform 0.2s;
	z-index: 99;
	font-size: 1.1rem;
}

.sce-back-to-top.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.sce-back-to-top:hover {
	background: var(--sce-color-accent);
}

.sce-site-footer {
	background: var(--sce-color-primary);
	color: var(--sce-color-text-inverse);
	padding: var(--sce-space-lg) 0;
}

/* ==========================================================================
   REUSABLE BLOCKS
   ========================================================================== */

/* CTA hierarchy — Book Now primary, others secondary per master reference 6.2 */
.sce-cta-row {
	display: flex;
	gap: var(--sce-space-sm);
	flex-wrap: wrap;
	align-items: center;
}

.sce-cta {
	display: inline-block;
	padding: 0.85rem 1.75rem;
	border-radius: var(--sce-radius);
	font-weight: 600;
	text-decoration: none;
}

.sce-cta--primary {
	background: var(--sce-color-accent);
	color: var(--sce-color-text-inverse);
}

.sce-cta--secondary {
	background: transparent;
	color: var(--sce-color-text);
	border: 1px solid var(--sce-color-secondary);
}

.sce-cta--tertiary {
	background: transparent;
	color: var(--sce-color-secondary);
	text-decoration: underline;
}

/* Trust stat block */
.sce-trust-stat {
	background: var(--sce-color-neutral);
	padding: var(--sce-space-md);
	border-radius: var(--sce-radius);
	text-align: center;
}

.sce-trust-stat__number {
	font-family: var(--sce-font-heading);
	font-size: 2.5rem;
	display: block;
}

/* Pricing disclaimer — italic, promo code bold, per master reference 6.2 */
.sce-pricing-disclaimer {
	font-style: italic;
	font-size: 0.8rem;
	color: var(--sce-color-secondary);
	margin-top: var(--sce-space-sm);
}

.sce-pricing-disclaimer strong {
	font-style: normal;
}

/* Two-show note */
.sce-two-show-note {
	font-size: 0.9rem;
	color: var(--sce-color-secondary);
}

/* Artist card */
.sce-artist-card {
	display: flex;
	flex-direction: column;
	gap: var(--sce-space-xs);
}

.sce-artist-card__photo {
	border-radius: var(--sce-radius);
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.sce-artist-card__name {
	font-weight: 700;
}

.sce-artist-card__tag {
	font-size: 0.75rem;
	text-transform: uppercase;
	color: var(--sce-color-secondary);
}

/* Venue card */
.sce-venue-card {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sce-space-md);
	align-items: center;
}

.sce-venue-card__photo {
	border-radius: var(--sce-radius);
}

/* Grid utility for Lineup / Venues / Amenities listings */
.sce-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--sce-space-md);
}

@media (max-width: 700px) {
	.sce-venue-card { grid-template-columns: 1fr; }
	.sce-nav ul { gap: var(--sce-space-sm); flex-wrap: wrap; }
}