/*
 * UK Celebrity — component layer (plain CSS so it works with the compiled
 * Tailwind file and with the optional Tailwind Play CDN mode).
 * ukcelebrity.co.uk
 */

:root {
	--ink: #0b0b12;
	--paper: #faf7f2;
	--mist: #eeeae3;
	--accent: #d7263d;
	--gold: #e9b949;
	--royal: #1b3b8f;
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--font-display: "Fraunces", Georgia, "Times New Roman", serif;
	--font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}

html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
body { font-family: var(--font-sans); background: var(--paper); color: var(--ink); }
img, picture, video, canvas, svg { image-rendering: auto; }
img { max-width: 100%; height: auto; }
picture > img { display: block; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* ---------- Lazy media (IntersectionObserver) ---------- */
img.ukc-lazy { filter: blur(14px); transform: scale(1.03); transition: filter .7s var(--ease-out), transform .7s var(--ease-out); }
img.ukc-lazy.is-loaded { filter: none; transform: none; }
.group:hover img.ukc-lazy.is-loaded.group-hover\:scale-\[1\.04\] { transform: scale(1.04); }
.group:hover img.ukc-lazy.is-loaded.group-hover\:scale-\[1\.05\] { transform: scale(1.05); }
.group:hover img.ukc-lazy.is-loaded.group-hover\:scale-110 { transform: scale(1.1); }
.ukc-prose img.ukc-lazy { transform: none; }

/* Branded placeholder when a post has no featured image */
.ukc-ph {
	background:
		radial-gradient(circle at 20% 20%, rgba(255,255,255,.28), transparent 45%),
		radial-gradient(circle at 80% 70%, rgba(233,185,73,.35), transparent 50%),
		linear-gradient(135deg, var(--ph, var(--accent)), #0b0b12 120%);
}

/* ---------- Scroll reveal ---------- */
html.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
html.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Atoms ---------- */
.ukc-badge {
	display: inline-flex; align-items: center; gap: .4rem;
	padding: .3rem .7rem; border-radius: 999px;
	font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
	color: var(--badge, var(--accent));
	background: color-mix(in srgb, var(--badge, var(--accent)) 11%, transparent);
	transition: background .25s, color .25s;
	position: relative; z-index: 2;
}
.ukc-badge::before { content: ""; width: .4rem; height: .4rem; border-radius: 999px; background: currentColor; }
.ukc-badge:hover { background: var(--badge, var(--accent)); color: #fff; }
.ukc-badge-sm { font-size: .62rem; padding: .25rem .6rem; }
.ukc-badge-light { color: #fff; background: rgba(255,255,255,.14); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.ukc-badge-light::before { background: var(--badge, var(--accent)); }

.ukc-pill, .ukc-pill-light {
	display: inline-flex; align-items: center; gap: .35rem;
	padding: .5rem 1rem; border-radius: 999px;
	font-size: .82rem; font-weight: 700; line-height: 1;
	transition: background .25s, color .25s, box-shadow .25s, transform .25s var(--ease-out);
	cursor: pointer; white-space: nowrap;
}
.ukc-pill { background: #fff; color: rgba(11,11,18,.72); box-shadow: inset 0 0 0 1px rgba(11,11,18,.1); }
.ukc-pill:hover { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(11,11,18,.35); transform: translateY(-1px); }
.ukc-pill.is-active { background: var(--accent); color: #fff; box-shadow: 0 8px 20px -10px var(--accent); }
.ukc-pill-light { background: rgba(255,255,255,.12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); backdrop-filter: blur(8px); }
.ukc-pill-light:hover, .ukc-pill-light.is-active { background: #fff; color: var(--ink); }

.ukc-icon-btn {
	display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 999px;
	color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1px rgba(11,11,18,.1);
	transition: background .25s, color .25s, transform .25s var(--ease-out), box-shadow .25s;
}
.ukc-icon-btn:hover { background: var(--ink); color: #fff; transform: translateY(-1px); }
.ukc-icon-btn-dark { background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.ukc-icon-btn-dark:hover { background: #fff; color: var(--ink); }

.ukc-btn-primary {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	padding: .85rem 1.35rem; border-radius: 999px;
	background: var(--accent); color: #fff; font-weight: 800; font-size: .9rem;
	box-shadow: 0 10px 24px -12px var(--accent);
	transition: transform .25s var(--ease-out), box-shadow .25s, background .25s;
}
.ukc-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px var(--accent); }
.ukc-btn-primary[disabled] { opacity: .65; pointer-events: none; }
.ukc-btn-ghost {
	display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.6rem; border-radius: 999px;
	font-weight: 800; font-size: .9rem; color: var(--ink); background: #fff;
	box-shadow: inset 0 0 0 1.5px rgba(11,11,18,.15); transition: all .25s var(--ease-out);
}
.ukc-btn-ghost:hover { background: var(--ink); color: #fff; }

.ukc-input {
	width: 100%; padding: .85rem 1.1rem; border-radius: 1rem;
	background: #fff; color: var(--ink); font-size: .95rem;
	box-shadow: inset 0 0 0 1.5px rgba(11,11,18,.12);
	transition: box-shadow .25s;
	border: 0; outline: none;
}
.ukc-input:focus { box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.ukc-dark-form .ukc-input { background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18); }
.ukc-dark-form .ukc-input::placeholder { color: rgba(255,255,255,.45); }
.ukc-nl-msg.is-success { color: #10b981; }
.ukc-nl-msg.is-error { color: #f87171; }
.ukc-dark-form .ukc-nl-msg.is-success { color: #6ee7b7; }

/* Animated underlines on headline links */
.ukc-underline, .ukc-underline-light {
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0 2px; background-repeat: no-repeat; background-position: 0 100%;
	transition: background-size .45s var(--ease-out), color .25s;
	padding-bottom: 2px;
}
.group:hover .ukc-underline, .ukc-underline:hover, .ukc-underline:focus-visible,
.group:hover .ukc-underline-light, .ukc-underline-light:hover { background-size: 100% 2px; }

/* ---------- Header & navigation ---------- */
.ukc-header.is-scrolled { box-shadow: 0 10px 30px -18px rgba(11,11,18,.35); }
.ukc-navlink, .ukc-mainnav .menu-item > a {
	position: relative; display: inline-flex; align-items: center; gap: .3rem;
	padding: .65rem .95rem; border-radius: 999px;
	font-weight: 700; font-size: .92rem; color: rgba(11,11,18,.78);
	transition: color .25s, background .25s;
}
.ukc-navlink::after {
	content: ""; position: absolute; left: .95rem; right: 1.9rem; bottom: .35rem; height: 2px;
	background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out); border-radius: 2px;
}
.ukc-navlink:hover, .group:focus-within > .ukc-navlink { color: var(--ink); background: rgba(11,11,18,.04); }
.ukc-navlink:hover::after, .group:focus-within > .ukc-navlink::after { transform: scaleX(1); }
.ukc-drawer-open .ukc-drawer-panel { transform: translateX(0); }

/* Jump bar */
.ukc-jump {
	display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .95rem; border-radius: 999px;
	font-weight: 700; font-size: .85rem; color: rgba(11,11,18,.7); transition: all .25s var(--ease-out);
}
.ukc-jump:hover { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(11,11,18,.1); }
.ukc-jump.is-current { background: var(--ink); color: #fff; }

/* Hidden scrollbars on horizontal scrollers */
.ukc-scroller { scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; }
.ukc-scroller::-webkit-scrollbar { display: none; }

/* Marquee (header ticker) */
.ukc-marquee { mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ukc-marquee-track, [data-ec-track] { will-change: transform; }

/* ---------- Hero spotlight ---------- */
.ukc-slide { opacity: 0; visibility: hidden; transition: opacity 1.1s var(--ease-out), visibility 0s linear 1.1s; }
.ukc-slide.is-active { opacity: 1; visibility: visible; transition: opacity 1.1s var(--ease-out), visibility 0s; z-index: 1; }
.ukc-slide .ukc-slide-media { transform: scale(1.08); transition: transform 8s linear; }
.ukc-slide.is-active .ukc-slide-media { transform: scale(1); }
.ukc-slide .ukc-slide-copy > * { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.ukc-slide.is-active .ukc-slide-copy > * { opacity: 1; transform: none; }
.ukc-slide.is-active .ukc-slide-copy > *:nth-child(2) { transition-delay: .12s; }
.ukc-slide.is-active .ukc-slide-copy > *:nth-child(3) { transition-delay: .22s; }
.ukc-slide.is-active .ukc-slide-copy > *:nth-child(4) { transition-delay: .32s; }
.ukc-dot[aria-selected="true"] .ukc-dot-fill { animation: ukc-fill var(--hero-interval, 6000ms) linear forwards; }
.ukc-dot.is-done .ukc-dot-fill { transform: scaleX(1); }
.ukc-hero.is-paused .ukc-dot-fill { animation-play-state: paused; }
@keyframes ukc-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (min-width: 1024px) { .ukc-hero-tile { min-height: 0; } }

/* ---------- Sections ---------- */
.ukc-card.is-filtered-out { display: none; }
.ukc-card.is-filtered-in { animation: ukc-pop .5s var(--ease-out); }
.ukc-lead-hidden > [data-masonry] { grid-column: 1 / -1; }
@media (min-width: 1024px) { .ukc-lead-hidden > [data-masonry] { column-count: 3; } }
@keyframes ukc-pop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.ukc-row-dark .ukc-card h3, .ukc-row-dark .ukc-card h3 a { color: #fff; }
.ukc-row-dark .ukc-card .text-ink\/55, .ukc-row-dark .ukc-card .text-ink\/75 { color: rgba(255,255,255,.65); }
.ukc-row-dark .ukc-badge { color: #fff; background: rgba(255,255,255,.12); }

/* Trending ticker */
.ukc-trend-item.is-active { background: var(--mist); }
.ukc-trend-item.is-active .ukc-trend-bar { animation: ukc-fill 4000ms linear forwards; }
[data-trending].is-paused .ukc-trend-item.is-active .ukc-trend-bar { animation-play-state: paused; }

/* Back to top + toast */
.ukc-totop.is-visible { opacity: 1; transform: none; }
.ukc-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Single post typography ---------- */
.ukc-prose { font-size: 1.125rem; line-height: 1.8; color: rgba(11,11,18,.86); }
.ukc-prose > * + * { margin-top: 1.4em; }
.ukc-prose > p:first-of-type::first-letter {
	float: left; font-family: var(--font-display); font-weight: 800;
	font-size: 4.6em; line-height: .82; padding: .08em .12em 0 0; color: var(--accent);
}
.ukc-prose h2, .ukc-prose h3, .ukc-prose h4 { font-family: var(--font-display); color: var(--ink); line-height: 1.2; letter-spacing: -.01em; scroll-margin-top: 7rem; }
.ukc-prose h2 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.3rem); font-weight: 700; margin-top: 2.2em; }
.ukc-prose h3 { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.65rem); font-weight: 700; margin-top: 1.8em; }
.ukc-prose h4 { font-size: 1.2rem; font-weight: 700; }
.ukc-prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; transition: color .2s; }
.ukc-prose a:hover { color: var(--accent); }
.ukc-prose ul, .ukc-prose ol { padding-left: 1.4em; }
.ukc-prose ul { list-style: none; }
.ukc-prose ul > li { position: relative; }
.ukc-prose ul > li::before { content: ""; position: absolute; left: -1.1em; top: .72em; width: .45em; height: .45em; border-radius: 999px; background: var(--accent); }
.ukc-prose ol { list-style: decimal; }
.ukc-prose ol > li::marker { color: var(--accent); font-weight: 800; }
.ukc-prose li + li { margin-top: .5em; }
.ukc-prose blockquote, .ukc-prose .wp-block-quote, .ukc-prose .wp-block-pullquote {
	margin: 2.2em 0; padding: 1.6em 1.8em; border-radius: 1.5rem; background: #fff;
	border-left: 4px solid var(--accent);
	font-family: var(--font-display); font-size: 1.35em; line-height: 1.45; color: var(--ink);
	box-shadow: 0 1px 2px rgba(11,11,18,.04), 0 8px 24px -12px rgba(11,11,18,.18);
}
.ukc-prose blockquote cite { display: block; margin-top: .8em; font-family: var(--font-sans); font-size: .62em; font-style: normal; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(11,11,18,.5); }
.ukc-prose figure { margin: 2.2em 0; }
.ukc-prose figure img { border-radius: 1.25rem; }
.ukc-prose figcaption { margin-top: .7em; font-size: .85rem; color: rgba(11,11,18,.55); text-align: center; }
.ukc-prose .alignwide { margin-left: -6%; margin-right: -6%; max-width: 112%; }
.ukc-prose .alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; }
.ukc-prose table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.ukc-prose th, .ukc-prose td { padding: .75em 1em; border-bottom: 1px solid rgba(11,11,18,.1); text-align: left; }
.ukc-prose th { font-weight: 800; background: var(--mist); }
.ukc-prose code { font-size: .88em; padding: .15em .4em; border-radius: .4em; background: var(--mist); }
.ukc-prose pre { padding: 1.2em; border-radius: 1rem; background: var(--ink); color: #f5f5f5; overflow-x: auto; font-size: .9rem; }
.ukc-prose pre code { background: none; padding: 0; }
.ukc-prose hr { border: 0; height: 1px; background: rgba(11,11,18,.12); margin: 3em 0; }
.ukc-prose iframe, .ukc-prose video { max-width: 100%; border-radius: 1rem; }
.ukc-toc-link.is-current { background: #fff; color: var(--ink); box-shadow: inset 3px 0 0 var(--accent); }

/* Comments */
.ukc-comments .comment-body { padding: 1.2rem; border-radius: 1rem; background: var(--paper); }
.ukc-comments .children { margin: 1rem 0 0 1.5rem; display: grid; gap: 1rem; }
.ukc-comments .comment-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-size: .85rem; color: rgba(11,11,18,.6); }
.ukc-comments .comment-meta img { border-radius: 999px; }
.ukc-comments .comment-content { margin-top: .6rem; }
.ukc-comments .reply a { font-size: .8rem; font-weight: 800; color: var(--accent); }
.ukc-comments label { display: block; font-weight: 700; font-size: .85rem; margin-bottom: .35rem; }
.ukc-comments input[type="text"], .ukc-comments input[type="email"], .ukc-comments input[type="url"], .ukc-comments textarea {
	width: 100%; padding: .85rem 1rem; border-radius: 1rem; border: 0; background: var(--paper); box-shadow: inset 0 0 0 1.5px rgba(11,11,18,.12);
}
.ukc-comments p { margin-top: 1rem; }

/* Pagination */
.ukc-pagination .page-numbers { display: inline-grid; place-items: center; min-width: 2.8rem; height: 2.8rem; padding: 0 1rem; border-radius: 999px; font-weight: 800; background: #fff; box-shadow: inset 0 0 0 1px rgba(11,11,18,.1); transition: all .25s; }
.ukc-pagination .page-numbers.current, .ukc-pagination a.page-numbers:hover { background: var(--ink); color: #fff; }

/* WordPress core helpers */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
.alignleft { float: left; margin: .4em 1.5em 1em 0; }
.alignright { float: right; margin: .4em 0 1em 1.5em; }
.aligncenter { margin-left: auto; margin-right: auto; }
.wp-caption-text, .gallery-caption { font-size: .85rem; color: rgba(11,11,18,.55); }
.sticky, .bypostauthor { outline: 0; }
.custom-logo { max-height: 48px; width: auto; }
.ukc-widget ul { display: grid; gap: .5rem; }
.ukc-widget a:hover { color: var(--accent); }

/* Reduced motion: stop all automatic movement */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
	html.js [data-reveal] { opacity: 1; transform: none; }
	.ukc-slide .ukc-slide-media { transform: none; }
}

/* Utility visibility must win over component display values */
.ukc-icon-btn.hidden, .ukc-btn-primary.hidden, .ukc-btn-ghost.hidden, .ukc-pill.hidden { display: none; }
@media (min-width: 640px) { .ukc-btn-primary.sm\:inline-flex { display: inline-flex; } }
@media (min-width: 1024px) { .ukc-icon-btn.lg\:hidden { display: none; } }

/* Category gradient driven by the term's accent colour (term meta → --accent), so any
   category created later is styled automatically without new CSS classes. */
.ukc-grad {
	background:
		radial-gradient(circle at 85% 15%, rgba(255,255,255,.22), transparent 45%),
		linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 62%, #0b0b12) 100%);
}

/* wp_nav_menu() output states */
.ukc-navlink.is-current, .current-menu-item > .ukc-navlink, .current-menu-ancestor > .ukc-navlink { color: var(--ink); }
.ukc-navlink.is-current::after { transform: scaleX(1); }
.ukc-drawer-menu > li + li { margin-top: .15rem; }

/* Pages & contact form */
.ukc-prose-plain > p:first-of-type::first-letter { float: none; font: inherit; color: inherit; padding: 0; }
.ukc-label { display: block; margin-bottom: .4rem; font-size: .85rem; font-weight: 700; color: var(--ink); }
select.ukc-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0b12' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1rem; padding-right: 2.6rem; }
.ukc-input.is-invalid { box-shadow: inset 0 0 0 2px #e03131; }
.ukc-field-error { min-height: 1rem; margin-top: .35rem; font-size: .8rem; font-weight: 600; color: #e03131; }
.ukc-contact-msg.is-success { color: #0b7a5b; }
.ukc-contact-msg.is-error { color: #e03131; }
footer .menu-item a:hover { color: #fff; }

/* Header: let each top-level <li> fill the header height so the pointer can travel
   from the link into its dropdown without the panel closing. */
.ukc-mainnav > ul > li { display: flex; align-items: center; min-height: 72px; }
.ukc-mega-wide { top: 100%; }
@media (min-width: 1280px) { .ukc-btn-primary.xl\:inline-flex { display: inline-flex; } }
.ukc-navlink { white-space: nowrap; }
@media (max-width: 1279px) { .ukc-navlink { padding: .6rem .7rem; font-size: .88rem; } .ukc-navlink::after { left: .7rem; right: .7rem; } }