/*
Theme Name: TailPress Child
Theme URI: https://example.com/
Description: Child theme for TailPress.
Author: Your Name
Author URI: https://example.com/
Template: tailpress
Version: 1.1.1
Text Domain: tailpress-child
*/

/* Add your child theme overrides below */

/* Global link presentation */
a,
a:visited {
	color: var(--color-link);
	text-decoration: none;
}

a:hover,
a:focus-visible {
	color: var(--color-link-hover);
	text-decoration: none;
}

/* Brand design tokens (mobile-first, WordPress-safe)
   Derived from shared app palette. These CSS variables are available
   globally (front-end + editor) and used by utility classes below. */
:root {
	/* Typography scale */
	--font-size-xs: 0.8125rem;
	--font-size-sm: 0.875rem;
	--font-size-base: 1rem;
	--font-size-md: 1.125rem;
	--font-size-lg: 1.25rem;
	--font-size-xl: 1.5rem;
	--line-height-tight: 1.25;
	--line-height-base: 1.5;
	--line-height-relaxed: 1.65;
	--control-target-block-size: 2.75rem;

	/* Neutral scale */
	--color-gray-25: #fcfcfd;
	--color-gray-50: #f9fafb;
	--color-gray-100: #f2f4f7;
	--color-gray-200: #e4e7ec;
	--color-gray-300: #d0d5dd;
	--color-gray-400: #98a2b3;
	--color-gray-500: #667085;
	--color-gray-600: #475467;
	--color-gray-700: #344054;
	--color-gray-800: #1d2939;
	--color-gray-900: #101828;

	/* Brand scale */
	--color-brand-50: #f3f7fc;
	--color-brand-100: #e7eff7;
	--color-brand-200: #c9ddee;
	--color-brand-300: #99c2e0;
	--color-brand-400: #62a2ce;
	--color-brand-500: #3e87bb; /* primary */
	--color-brand-600: #2d6a9c;
	--color-brand-700: #25567f;
	--color-brand-800: #22496a;
	--color-brand-900: #213e59;
	--color-brand-950: #16283b;

	/* Intent scales */
	--color-green-50: #f0fdf4;
	--color-green-100: #dcfce7;
	--color-green-200: #bbf7d0;
	--color-green-300: #86efac;
	--color-green-400: #4ade80;
	--color-green-500: #22c55e;
	--color-green-600: #16a34a;
	--color-green-700: #15803d;

	--color-amber-50: #fffbeb;
	--color-amber-100: #fef3c7;
	--color-amber-200: #fde68a;
	--color-amber-300: #fcd34d;
	--color-amber-400: #fbbf24;
	--color-amber-500: #f59e0b;
	--color-amber-600: #d97706;
	--color-amber-700: #b45309;

	--color-red-50: #fef2f2;
	--color-red-100: #fee2e2;
	--color-red-200: #fecaca;
	--color-red-300: #fca5a5;
	--color-red-400: #f87171;
	--color-red-500: #ef4444;
	--color-red-600: #dc2626;
	--color-red-700: #b91c1c;

	--color-blue-50: #eff6ff;
	--color-blue-100: #dbeafe;
	--color-blue-200: #bfdbfe;
	--color-blue-300: #93c5fd;
	--color-blue-400: #60a5fa;
	--color-blue-500: #3b82f6;
	--color-blue-600: #2563eb;
	--color-blue-700: #1d4ed8;

	/* Semantic tokens */
	--color-bg: var(--color-gray-25);
	--color-surface: #ffffff;
	--color-surface-alt: var(--color-gray-50);
	--color-surface-muted: var(--color-gray-100);
	--color-surface-raised: #ffffff;
	--color-border: var(--color-gray-300);
	--color-border-strong: var(--color-gray-400);
	--color-divider: var(--color-gray-200);
	--color-overlay: rgba(0, 0, 0, 0.55);
	--gradient-hero-overlay: linear-gradient(180deg, rgba(5, 10, 18, 0) 0%, rgba(5, 10, 18, 0.07) 45%, rgba(5, 10, 18, 0.4) 72%, rgba(5, 10, 18, 0.7) 100%);

	--color-text: var(--color-gray-900);
	--color-text-subtle: var(--color-gray-600);
	--color-text-inverse: #ffffff;
	--color-text-on-primary: #ffffff;

	--color-primary: var(--color-brand-500);
	--color-primary-hover: var(--color-brand-600);
	--color-primary-active: var(--color-brand-700);
	--color-primary-subtle: var(--color-brand-100);
	--color-primary-subtle-hover: var(--color-brand-200);

	--color-link: var(--color-brand-600);
	--color-link-hover: var(--color-brand-500);

	--color-success: var(--color-green-600);
	--color-success-hover: var(--color-green-500);
	--color-success-subtle: var(--color-green-50);

	--color-warning: var(--color-amber-500);
	--color-warning-hover: var(--color-amber-400);
	--color-warning-subtle: var(--color-amber-50);

	--color-danger: var(--color-red-600);
	--color-danger-hover: var(--color-red-500);
	--color-danger-subtle: var(--color-red-50);

	--color-info: var(--color-blue-600);
	--color-info-hover: var(--color-blue-500);
	--color-info-subtle: var(--color-blue-50);

	--color-muted: var(--color-gray-500);
	--color-focus-ring: var(--color-brand-500);
	--color-ring: var(--color-brand-500);

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
	--shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

	/* Layout offsets */
	--competition-nav-offset: 4rem; /* match sticky header height */
}

/* Global placeholder and focus styles */
[x-cloak] { display: none !important; }
input::placeholder,
textarea::placeholder { color: var(--color-placeholder, var(--color-gray-400)); opacity: 1; }
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder { color: var(--color-placeholder, var(--color-gray-400)); opacity: 1; }
input::-moz-placeholder,
textarea::-moz-placeholder { color: var(--color-placeholder, var(--color-gray-400)); opacity: 1; }
input:-ms-input-placeholder,
textarea:-ms-input-placeholder { color: var(--color-placeholder, var(--color-gray-400)); opacity: 1; }
input::-ms-input-placeholder,
textarea::-ms-input-placeholder { color: var(--color-placeholder, var(--color-gray-400)); opacity: 1; }

:where(input, textarea, select) { color: inherit !important; }

:where(a,button,input,textarea,select,summary,[role="button"]):focus-visible {
	outline: 2px solid var(--color-focus-ring);
	outline-offset: 2px;
}

/* Lightweight badge helpers fallback (ensures LIVE dot works without build) */
/* Live: red dot before text (no animation) */
.badge-live { position: relative; padding-left: calc(0.75rem + 0.45rem + 0.35rem); }
.badge-live::before {
	content: "";
	position: absolute;
	left: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 9999px;
	background-color: var(--color-danger);
	z-index: 1;
}
/* Force absolute when used on overlays and clear conflicting offsets */
.absolute.badge-live { position: absolute; top: unset; right: unset; }

/* Light radar ring behind the dot (fallback) */
.badge-live::after {
	content: "";
	position: absolute;
	left: calc(0.75rem + 0.225rem);
	top: 50%;
	transform: translate(-50%, -50%) scale(0.8);
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 9999px;
	border: 2px solid var(--color-danger);
	background: transparent;
	opacity: 0.35;
	z-index: 0;
	will-change: transform, opacity;
	animation: badge-live-radar 1.8s ease-out infinite;
	pointer-events: none;
}
@keyframes badge-live-radar {
	0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.35; }
	70% { transform: translate(-50%, -50%) scale(1.8); opacity: 0.0; }
	100% { opacity: 0.0; }
}
.badge-danger-subtle { background-color: var(--color-danger-subtle); color: var(--color-danger); }

/* Normalize button height to align with form controls */
.wp-block-button .wp-block-button__link,
.wp-element-button {
	--button-line-height: var(--line-height-base);
	--button-block-size: max(var(--control-target-block-size), 1lh);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-width: 1px;
	border-style: solid;
	border-color: transparent;
	line-height: var(--button-line-height);
	min-block-size: var(--button-block-size);
	padding-block: 0;
}

/* Semantic utility helpers to complement Tailwind */
.bg-avatar-fallback { background-color: var(--color-avatar-fallback, var(--color-gray-400)); }
.text-on-avatar-fallback { color: var(--color-on-avatar-fallback, #fff); }

.bg-primary { background-color: var(--color-primary); }
.bg-primary-subtle { background-color: var(--color-primary-subtle); }
.bg-success { background-color: var(--color-success); }
.bg-success-subtle { background-color: var(--color-success-subtle); }
.bg-warning { background-color: var(--color-warning); }
.bg-warning-subtle { background-color: var(--color-warning-subtle); }
.bg-danger { background-color: var(--color-danger); }
.bg-danger-subtle { background-color: var(--color-danger-subtle); }
.bg-info { background-color: var(--color-info); }
.bg-info-subtle { background-color: var(--color-info-subtle); }

.text-link { color: var(--color-link); }
.text-link:hover { color: var(--color-link-hover); }
.text-muted { color: var(--color-text-subtle); }
.text-on-primary { color: var(--color-text-on-primary); }
.text-danger { color: var(--color-danger); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-info { color: var(--color-info); }

/* Competition local navigation: full-width, centered, subtle */
/* Competition local navigation: full-width, centered; JS handles fixed-on-scroll */
.competition-nav-shell {
	position: relative;
	margin-block: 2rem 2.5rem;
	overflow: visible;
}

.competition-article__overlap {
	margin-top: 0;
	padding-bottom: 0;
}

.competition-nav-shell--fixed {
	position: sticky;
	top: var(--competition-nav-offset, 4rem);
	z-index: 40;
	margin-block: 0 2.5rem;
	overflow: visible;
}

.competition-nav {
	list-style: none;
	margin: 0;
	padding: 0.65rem 1rem;
	display: flex;
	gap: 0.5rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: 9999px;
	background-color: var(--color-surface);
	box-shadow: var(--shadow-md);
	border: 1px solid var(--color-border);
}

.competition-nav--stack {
	justify-content: center;
}

.competition-nav__item {
	flex: 0 0 auto;
}

.competition-nav__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-inline: 0.8rem;
	padding-block: 0.4rem;
	border-radius: 9999px;
	font-size: var(--font-size-xs);
	font-weight: 500;
	color: var(--color-text-subtle);
	position: relative;
	white-space: nowrap;
	transition: background-color 160ms ease-out, color 160ms ease-out;
}

.competition-nav__link:hover {
	background-color: var(--color-primary-subtle);
}

.competition-nav__item--current .competition-nav__link {
	color: var(--color-text-on-primary);
	background-color: var(--color-primary);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

@media (min-width: 1024px) {
	.competition-nav__link {
		font-size: var(--font-size-sm);
	}
}

.competition-nav-shell__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	padding-inline: 0;
}


.border-default { border-color: var(--color-border); }
.border-strong { border-color: var(--color-border-strong); }
.divide-default > :not([hidden]) ~ :not([hidden]) { border-color: var(--color-divider); }

.ring-brand { --tw-ring-color: var(--color-ring); }
.ring-ring { --tw-ring-color: var(--color-ring); }
.ring-border { --tw-ring-color: var(--color-border); }
.shadow-surface { box-shadow: var(--shadow); }
.shadow-surface-md { box-shadow: var(--shadow-md); }
.shadow-surface-lg { box-shadow: var(--shadow-lg); }

.bg-surface { background-color: var(--color-surface); }
.bg-surface-alt { background-color: var(--color-surface-alt); }
.bg-surface-muted { background-color: var(--color-surface-muted); }
.bg-surface-raised { background-color: var(--color-surface-raised); }
.text-on-inverse { color: var(--color-text-inverse); }
.bg-app { background-color: var(--color-bg); }

/* Accessible typography helpers */
.text-accessible-base { font-size: var(--font-size-base); line-height: var(--line-height-base); }
.text-accessible-md { font-size: var(--font-size-md); line-height: var(--line-height-base); }
.text-accessible-lg { font-size: var(--font-size-lg); line-height: var(--line-height-tight); }
.text-accessible-xl { font-size: var(--font-size-xl); line-height: var(--line-height-tight); }

/* Apply Tailwind Typography via utility class on content containers */
:where(.entry-content, .wp-block-post-content, .wp-block-group.is-layout-constrained) {
	color: inherit;
}

/* If the dist CSS is present, map prose styles */
:where(.entry-content, .wp-block-post-content, .wp-block-group.is-layout-constrained).prose {
  color: var(--color-text);
}
:where(.entry-content, .wp-block-post-content, .wp-block-group.is-layout-constrained).prose a {
  color: var(--color-link);
}
:where(.entry-content, .wp-block-post-content, .wp-block-group.is-layout-constrained).prose a:hover {
  color: var(--color-link-hover);
}

/* Editor parity */
:where(.editor-styles-wrapper .block-editor-block-list__layout).prose {
  color: var(--color-text);
}

/* Base element tweaks to align with Tailwind defaults when prose is not applied */
.entry-content p { margin-top: 1rem; margin-bottom: 1rem; }
.entry-content ul { list-style: disc; padding-left: 1.5rem; margin: 1rem 0; }
.entry-content ol { list-style: decimal; padding-left: 1.5rem; margin: 1rem 0; }
.entry-content li { margin: 0.25rem 0; }
.entry-content table { width: 100%; border-collapse: collapse; border-color: var(--color-divider); }
.entry-content th, .entry-content td { border: 1px solid var(--color-divider); padding: 0.5rem 0.75rem; }
.entry-content thead th { background: var(--color-surface-muted); }
.entry-content blockquote { border-left: 4px solid var(--color-border); padding-left: 1rem; color: var(--color-text-subtle); }

/* Editor: make sure editor content area matches front-end spacing */
.editor-styles-wrapper .block-editor-block-list__layout {
	color: inherit;
}

/* Ensure fixed header sits below WP admin bar when logged-in */
body.admin-bar header[data-header] {
  top: 32px; /* default desktop admin bar height */
}
@media screen and (max-width: 782px) {
  body.admin-bar header[data-header] {
    top: 46px; /* mobile admin bar height */
  }
}

/* Helpers: line clamp */
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }


/* Sponsors section styling (uses theme.json tokens) */
.competition-section--sponsors {
	background-color: var(--color-gray-500);
	color: var(--wp--preset--color--surface);
	/* Compact vertical padding compared to default layout-section rhythm */
	padding-block: 1.5rem;
}

/* Ensure internal card frames remain light regardless of section text color */
.competition-section--sponsors .bg-surface {
	background-color: var(--wp--preset--color--surface);
}

/* Optional: headings keep strong contrast on the dark section */
.competition-section--sponsors .competition-section__title,
.competition-section--sponsors h3 {
	color: var(--wp--preset--color--surface);
}

/* Compact internal vertical rhythm */
.competition-section--sponsors .layout-stack {
	/* If layout-stack uses CSS grid gap, tighten it */
	gap: 0.75rem !important;
}

/* Reduce space-y-5 between tier header and logos */
.competition-section--sponsors article.space-y-5 > * + * {
	margin-top: 0.5rem !important;
}

/* Tighten gaps between sponsor items (overrides gap-x/y utilities) */
.competition-section--sponsors .flex.flex-wrap.items-stretch {
	column-gap: 0.75rem !important; /* ~md:gap-x-3 */
	row-gap: 0.75rem !important;    /* ~gap-y-3 */
}

/* Reduce vertical padding on each item wrapper (overrides py-4 md:py-6) */
.competition-section--sponsors .flex.items-center.justify-start {
	padding-top: 0.25rem !important;  /* ~py-1 */
	padding-bottom: 0.25rem !important;
}

/* Shrink inner frame padding (overrides p-3 md:p-4) */
.competition-section--sponsors .inline-flex.items-center.justify-center.bg-surface {
	padding: 0.25rem 0.5rem !important; /* ~py-1 px-2 */
}