/*
Theme Name:  LlynLive
Theme URI:   https://llyn.live
Author:      Anything Digital
Description: Full Site Editing block theme for llyn.live. Every section of every page is editable in the Site Editor — no code, no redeploys. Pairs with the LlynLive Suite plugin for live data, the directory and community blocks. v1.1.0 restores the original teal/orange brand identity and circular sunset logo from the reference design.
Version:     1.2.1
Requires at least: 6.4
Requires PHP: 7.4
License:     GPL-2.0-or-later
Text Domain: llynlive-theme
*/

/* ── Brand variables (mirrors the original anythingdigital.co.uk/llynlive reference) ── */
:root {
	--ll-orange:       #E8762B;
	--ll-orange-light: #FFF3EB;
	--ll-orange-dark:  #C25D1A;
	--ll-teal:         #1A8B7F;
	--ll-teal-light:   #E6F5F3;
	--ll-teal-dark:    #146B62;
	--ll-dark:         #1A1A1A;
	--ll-charcoal:     #2C2C2A;
	--ll-warm-grey:    #F5F4F0;
	--ll-mid-grey:     #888888;
	--ll-light-border: #E5E4E0;
	--ll-white:        #FFFFFF;
	--ll-gold:         #D4AF37;
	--ll-gold-light:   #FEF7E0;
	--ll-red:          #E24B4A;
	--ll-grad-brand:   linear-gradient(135deg, #E8762B 0%, #D4AF37 100%);
	--ll-grad-hero:    linear-gradient(135deg, #1A1A1A 0%, #1A2A2A 50%, #146B62 100%);
	--ll-radius:       12px;
	--ll-shadow:       0 2px 10px rgba(26, 26, 26, 0.08);
}

body {
	background: var(--wp--preset--color--warm-grey, #F5F4F0);
	color: var(--wp--preset--color--charcoal, #2C2C2A);
	-webkit-font-smoothing: antialiased;
}

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

/* ── Header ── */
.ll-header {
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}
.ll-logo-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}
.ll-logo-link img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: block;
}
.ll-wordmark {
	color: var(--ll-white);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.5px;
	line-height: 1;
	margin: 0;
}
.ll-wordmark .ll-dot { color: var(--ll-orange); }

.ll-header .wp-block-navigation a {
	color: rgba(255, 255, 255, 0.72);
	font-size: 14px;
	font-weight: 600;
	transition: color 0.15s ease;
}
.ll-header .wp-block-navigation a:hover,
.ll-header .wp-block-navigation a[aria-current="page"] {
	color: var(--ll-white);
}

/* ── Hero (used by the "LlynLive: Brand Hero" pattern) ── */
.ll-hero {
	position: relative;
	overflow: hidden;
	background: var(--ll-grad-hero);
	color: var(--ll-white);
}
.ll-hero h1 { color: var(--ll-white); }
.ll-hero p  { color: rgba(255, 255, 255, 0.85); }
.ll-hero .ll-hero-accent { color: var(--ll-orange); }
.ll-wave {
	display: block;
	width: 100%;
	height: 48px;
	margin-bottom: -1px;
}

/* ── Section titles: orange-to-gold gradient text (matches the suite dashboard) ── */
.ll-grad-title,
.ll-grad-title strong {
	background: var(--ll-grad-brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ── Cards / surfaces ── */
.ll-card {
	background: var(--ll-white);
	border: 1px solid var(--ll-light-border);
	border-radius: var(--ll-radius);
	box-shadow: var(--ll-shadow);
}

/* ── Buttons ── */
.wp-block-button__link {
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(232, 118, 43, 0.35);
}
.ll-btn-outline .wp-block-button__link {
	background: transparent;
	border: 2px solid var(--ll-white);
	color: var(--ll-white);
}
.ll-btn-outline .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.1);
	box-shadow: none;
}

/* ── Footer ── */
.ll-footer a { color: rgba(255, 255, 255, 0.72); }
.ll-footer a:hover { color: var(--ll-white); }
.ll-footer .ll-footer-tag { color: var(--ll-mid-grey); font-size: 0.85rem; }

/* ── Accessibility & motion ── */
:focus-visible {
	outline: 3px solid var(--ll-orange);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link { transition: none; }
	.wp-block-button__link:hover { transform: none; }
}

/* Gradient headings placed via the brand gradient background (restored v1.0.0 class). */
.lls-gradient-heading.has-brand-gradient-background {
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	display: inline-block;
	padding: 0;
}

/* Cover-based hero: keep inner content centred and readable over any media. */
.ll-hero .wp-block-cover__inner-container { width: 100%; }
.ll-hero.wp-block-cover { overflow: hidden; }