@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Playfair+Display:wght@400;700&family=Raleway:wght@300;400;600&display=swap');

body { font-family: 'Raleway', sans-serif; background-color: #0b0b0b; color: #f8fafc; }
.title-font { font-family: 'Playfair Display', serif; }

/* Decorative mask */
/* removed mask-pattern background overlay */

/* Hero */
:root { /* Place your image at img/hero.jpg to override the default */
	--hero-bg-url: url('img/hero.jpg');
	/* Theme variables (can be updated at runtime) */
	--header-height: 112px;
	--primary: #dc2626; /* fallback brand red */
	--primary-600: #b91c1c; /* darker variant */
	--accent: #ef4444; /* optional accent */
	--secondary: #22c55e; /* fallback green (will be overridden) */
	--secondary-600: #16a34a;
	--secondary-accent: #34d399;
	--dark: #0b0b0b;
	--light: #f8fafc;
	--shows-card-bg: #1f2937; /* default card bg, can be overridden by theme.js */
	/* Hero overlay tuning */
	--hero-overlay-center: rgba(0,0,0,.6);
	--hero-overlay-edges: rgba(0,0,0,.82);
	--hero-center-glow: rgba(255,255,255,.06);
    /* Logo text line colors (adjust to match your logo exactly) */
		--logo-line1-color: #ffffff;
	--logo-line2-color: #ffffff;
	--logo-line3-color: var(--primary-600);
}
.hero { 
	background-image:
		radial-gradient(ellipse at center, var(--hero-center-glow) 0%, rgba(255,255,255,0) 50%),
		radial-gradient(ellipse at center, var(--hero-overlay-center) 0%, var(--hero-overlay-edges) 70%),
		var(--hero-bg-url, url('https://images.unsplash.com/photo-1517519014922-8fc06b814d0e?auto=format&fit=crop&w=1470&q=80'));
	background-size:cover; background-position:center; background-repeat:no-repeat; min-height:70vh; 
}

/* On small screens, brighten the center more to keep the logo readable */
@media (max-width: 640px) {
	:root { 
		--hero-overlay-center: rgba(0,0,0,.45);
		--hero-center-glow: rgba(255,255,255,.08);
	}
}

/* Buttons */
.btn { display:inline-flex; align-items:center; font-weight:700; border-radius:.5rem; transition:.3s; text-decoration:none; }
.btn-primary { background: var(--primary, #dc2626); color:#fff; }
.btn-primary:hover { background: var(--primary-600, #b91c1c); }
.btn-outline-light { background:transparent; color: var(--primary, #dc2626); border:1px solid var(--primary, #dc2626); }
.btn-outline-light:hover { background: var(--primary, #dc2626); color:#fff; border-color: var(--primary, #dc2626); }

/* Zebra contrast sections */
#about a.link-arrow { color: var(--primary, #dc2626); }
#about a.link-arrow:hover { color: var(--accent, #ef4444); }

/* Logo-like display font for big headings */
.logo-font {
	font-family: 'Bebas Neue', 'Playfair Display', serif;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Classic title font (as before) */
.title-font { font-family: 'Playfair Display', serif; }

/* Multiline logo text sizing and colors */
.text-logo-line1 { color: var(--logo-line1-color); font-size: clamp(28px, 7vw, 72px); line-height: .9; white-space: nowrap; }
.text-logo-line2 { color: var(--logo-line2-color); font-size: clamp(28px, 7vw, 72px); line-height: .9; white-space: nowrap; }
.text-logo-line3 { color: var(--logo-line3-color); font-size: clamp(28px, 7vw, 72px); line-height: .9; white-space: nowrap; }

/* Full-bleed section background (edge-to-edge inside centered containers) */
.full-bleed {
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	width: 100vw;
}
.btn-block { width:100%; justify-content:center; }

/* Cards */
.card { background: var(--shows-card-bg, #1f2937); border-radius:.5rem; overflow:hidden; box-shadow:0 10px 15px -3px rgba(0,0,0,.3),0 4px 6px -4px rgba(0,0,0,.3); }
.card-hover { transition:transform .3s; }
.card-hover:hover { transform:scale(1.03); }

/* Link underline */
.link-underline { position:relative; }
.link-underline::after { content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background: var(--primary, #dc2626); transition:width .3s; }

/* Bridge Tailwind utility classes to theme vars for dynamic color updates */
.bg-primary { background-color: var(--primary, #dc2626) !important; }
.text-primary { color: var(--primary, #dc2626) !important; }
.bg-secondary { background-color: var(--secondary, #22c55e) !important; }
.text-secondary { color: var(--secondary, #22c55e) !important; }
.border-secondary { border-color: var(--secondary, #22c55e) !important; }

/* Deep black backgrounds for dark contrast sections */
.bg-darkest { background-color: #000 !important; }

/* Site logo in header */
.site-logo { height: var(--header-height); width: auto; display: block; object-fit: contain; }

/* Soft hero image overlay for dark sections */
.bg-hero-soft { position: relative; overflow: hidden; }
.bg-hero-soft::before { content: ""; position: absolute; inset: 0; background-image: var(--hero-bg-url); background-size: cover; background-position: center; opacity: .09; filter: saturate(110%); pointer-events: none; }
.bg-hero-soft::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 70%); pointer-events: none; }
.bg-hero-soft > * { position: relative; z-index: 1; }
.link-underline:hover::after { width:100%; }

/* Arrow link */
.link-arrow { display:inline-flex; align-items:center; font-weight:500; }
.link-arrow::after { content:""; width:1rem; height:1rem; margin-left:.25rem; background:currentColor; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M14 5l7 7-7 7M21 12H3'/%3E%3C/svg%3E") center/contain no-repeat; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M14 5l7 7-7 7M21 12H3'/%3E%3C/svg%3E") center/contain no-repeat; }

/* Newsletter input focus */
input[type=email]:focus { outline:2px solid #1f2937; outline-offset:2px; }

/* Credit badge */
.credit-badge { border-radius:8px; text-align:center; font-size:12px; color:#fff; position:fixed; left:8px; bottom:8px; z-index:10; background:rgba(0,0,0,.8); padding:4px 8px; }
.credit-badge img { width:16px; height:16px; vertical-align:middle; display:inline-block; margin-right:3px; filter:brightness(0) invert(1); }
.credit-badge a { color:#fff; text-decoration:underline; }

/* Optional palette inspired by updated logo (coral + teal) */
.theme-coral-teal {
	--primary: #ff6b6b;       /* coral */
	--primary-600: #e85656;   /* deeper coral */
	--accent: #ffc0c0;        /* light coral for hovers */
	--secondary: #14b8a6;     /* teal */
	--secondary-600: #0d9488; /* deeper teal */
	--secondary-accent: #2dd4bf;
	--logo-line3-color: var(--primary);
}

/* Hero subtext: emphasize the 'U' in DURF to 2x size (keeps baseline alignment) */
.logo-subtext .subtext-u {
	display: inline-block;
	/* 2x width, 1.4x height preserves balance under SCÈNE */
	transform: scale(2, 1.4);
	transform-origin: baseline;
	margin: 0 0.12em;
}

/* Multi-step form styles */
.form-step {
	display: none;
}

.form-step.active {
	display: block;
	animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

.step-indicator {
	flex: 1;
	text-align: center;
	font-size: 0.875rem;
	color: #9ca3af;
	font-weight: 500;
	transition: color 0.3s;
}

.step-indicator.active {
	color: var(--primary, #dc2626);
	font-weight: 700;
}

.step-indicator.completed {
	color: #10b981;
}

/* Form input focus states */
input:focus, select:focus, textarea:focus {
	outline: 2px solid var(--primary, #dc2626);
	outline-offset: 2px;
}

/* Checkbox styling */
input[type="checkbox"] {
	width: 1.25rem;
	height: 1.25rem;
	cursor: pointer;
}

input[type="checkbox"]:checked {
	background-color: var(--primary, #dc2626);
	border-color: var(--primary, #dc2626);
}