/*
Theme Name: TechUpdate24 Child
Description: Minimal GeneratePress child theme foundation for TechUpdate24, a publication covering Cloud & DevOps, Cloud Security, Agentic AI & LLMs, and Tech News.
Template: generatepress
Version: 1.3.5
Requires at least: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: techupdate24-child
*/

/* Design tokens. System fonts only; component classes are opt-in. */
:root {
	--tu24-navy: #101d33;
	--tu24-background: #f6f8fb;
	--tu24-surface: #ffffff;
	--tu24-text: #202c3d;
	--tu24-muted: #526176;
	--tu24-border: #d6dee8;
	--tu24-orange: #b84308;
	--tu24-orange-hover: #923406;
	--tu24-orange-soft: #fff3e8;
	--tu24-cloud: #175cd3;
	--tu24-cloud-soft: #eff6ff;
	--tu24-security: #b42318;
	--tu24-security-soft: #fff1f0;
	--tu24-ai: #6938b8;
	--tu24-ai-soft: #f5f0ff;
	--tu24-on-dark: #f8fafc;
	--tu24-muted-on-dark: #c5cfdf;
	--tu24-accent-on-dark: #ffb477;
	--tu24-focus: #175cd3;
	--tu24-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--tu24-font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
	--tu24-text-small: 0.875rem;
	--tu24-text-body: 1.0625rem;
	--tu24-h1: clamp(2rem, 1.5rem + 2vw, 3rem);
	--tu24-h2: clamp(1.625rem, 1.3rem + 1.3vw, 2.25rem);
	--tu24-h3: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
	--tu24-h4: 1.25rem;
	--tu24-h5: 1.125rem;
	--tu24-h6: 1rem;
	--tu24-leading-body: 1.7;
	--tu24-leading-heading: 1.2;
	--tu24-space-1: 0.25rem;
	--tu24-space-2: 0.5rem;
	--tu24-space-3: 0.75rem;
	--tu24-space-4: 1rem;
	--tu24-space-5: 1.5rem;
	--tu24-space-6: 2rem;
	--tu24-space-7: 3rem;
	--tu24-space-8: 4rem;
	--tu24-radius-small: 0.375rem;
	--tu24-radius-card: 0.75rem;
	--tu24-radius-pill: 999px;
	--tu24-shadow-small: 0 2px 8px rgb(16 29 51 / 5%);
	--tu24-shadow-card: 0 6px 20px rgb(16 29 51 / 8%);
	--tu24-container: 75rem;
	--tu24-reading-width: 46rem;
	--tu24-gutter: 1rem;
	--tu24-transition: 150ms ease;
}

/* Front-end defaults. Do not reset block colors, alignment, or GP geometry. */
body {
	background-color: var(--tu24-background);
	color: var(--tu24-text);
	font-family: var(--tu24-font-sans);
	font-size: var(--tu24-text-body);
	line-height: var(--tu24-leading-body);
}

/* Low specificity lets Gutenberg's explicit typography utilities take priority. */
:where(.site-main, .tu24-container) :is(h1, h2, h3, h4, h5, h6) {
	font-family: var(--tu24-font-sans);
	font-weight: 700;
	line-height: var(--tu24-leading-heading);
	overflow-wrap: break-word;
}

:where(.site-main, .tu24-container) h1 { font-size: var(--tu24-h1); }
:where(.site-main, .tu24-container) h2 { font-size: var(--tu24-h2); }
:where(.site-main, .tu24-container) h3 { font-size: var(--tu24-h3); }
:where(.site-main, .tu24-container) h4 { font-size: var(--tu24-h4); }
:where(.site-main, .tu24-container) h5 { font-size: var(--tu24-h5); }
:where(.site-main, .tu24-container) h6 { font-size: var(--tu24-h6); }

a {
	color: var(--tu24-orange);
	text-underline-offset: 0.18em;
	text-decoration-thickness: 0.08em;
}

a:hover {
	color: var(--tu24-orange-hover);
}

:where(.entry-content, .entry-summary) a:not(.wp-element-button):not(.wp-block-button__link):not(.tu24-button) {
	text-decoration-line: underline;
}

.entry-meta,
.tu24-meta {
	color: var(--tu24-muted);
	font-size: var(--tu24-text-small);
	line-height: 1.6;
}

.entry-meta a,
.tu24-meta a {
	color: inherit;
	text-decoration: underline;
}

.tu24-label {
	color: var(--tu24-muted);
	font-size: var(--tu24-text-small);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.025em;
}

/* Surface colors only: retain parent header, navigation, and footer layout. */
.site-header,
.site-footer,
.site-footer .footer-widgets,
.site-footer .site-info {
	background-color: var(--tu24-navy);
	color: var(--tu24-on-dark);
}

.site-header .main-title a,
.site-footer .widget-title {
	color: var(--tu24-on-dark);
}

.site-header .site-description {
	color: var(--tu24-muted-on-dark);
}

.site-header .header-widget a:not(.button):not(.wp-element-button):not(.wp-block-button__link):not(.tu24-button):not(.tu24-badge),
.site-footer .footer-widgets a:not(.button):not(.wp-element-button):not(.wp-block-button__link):not(.tu24-button):not(.tu24-badge),
.site-footer .site-info a:not(:where(.tu24-footer a)):not(.button):not(.wp-element-button):not(.wp-block-button__link):not(.tu24-button):not(.tu24-badge) {
	color: var(--tu24-accent-on-dark);
	text-decoration: underline;
}

.site-header .main-title a:hover,
.site-header .header-widget a:not(.button):not(.wp-element-button):not(.wp-block-button__link):not(.tu24-button):not(.tu24-badge):hover,
.site-footer .footer-widgets a:not(.button):not(.wp-element-button):not(.wp-block-button__link):not(.tu24-button):not(.tu24-badge):hover,
.site-footer .site-info a:not(:where(.tu24-footer a)):not(.button):not(.wp-element-button):not(.wp-block-button__link):not(.tu24-button):not(.tu24-badge):hover {
	color: var(--tu24-on-dark);
}

/* A two-color focus ring stays visible on both light and dark surfaces. */
body :focus-visible {
	outline: 3px solid var(--tu24-focus);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--tu24-surface);
}

/* Use on a link for navigation or a native button for actions. */
.tu24-button,
a.tu24-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--tu24-space-2);
	min-height: 44px;
	min-width: 44px;
	max-width: 100%;
	padding: var(--tu24-space-3) var(--tu24-space-5);
	border: 1px solid transparent;
	border-radius: var(--tu24-radius-small);
	background-color: var(--tu24-orange);
	color: var(--tu24-surface);
	font: 600 1rem/1.4 var(--tu24-font-sans);
	text-align: center;
	text-decoration: none;
	white-space: normal;
	overflow-wrap: anywhere;
	cursor: pointer;
	transition: background-color var(--tu24-transition), border-color var(--tu24-transition);
}

.tu24-button:hover,
.tu24-button:focus-visible {
	background-color: var(--tu24-orange-hover);
	color: var(--tu24-surface);
	text-decoration: none;
}

.tu24-button.tu24-button--secondary {
	border-color: var(--tu24-orange);
	background-color: var(--tu24-surface);
	color: var(--tu24-orange);
}

.tu24-button.tu24-button--secondary:hover {
	background-color: var(--tu24-orange-soft);
}

.tu24-button:disabled {
	border-color: var(--tu24-border);
	background-color: var(--tu24-background);
	color: var(--tu24-muted);
	cursor: not-allowed;
}

/* Opt-in containers; never override .grid-container, .site-content or alignfull. */
.tu24-container {
	width: 100%;
	max-width: var(--tu24-container);
	margin-inline: auto;
	padding-inline: var(--tu24-gutter);
}

.tu24-container--reading {
	max-width: var(--tu24-reading-width);
}

/* Apply to an article wrapper. Keep links inside it; do not nest links. */
.tu24-card {
	min-width: 0;
	padding: var(--tu24-space-5);
	border: 1px solid var(--tu24-border);
	border-radius: var(--tu24-radius-card);
	background-color: var(--tu24-surface);
	color: var(--tu24-text);
	box-shadow: var(--tu24-shadow-small);
	overflow-wrap: anywhere;
}

.tu24-card__title {
	margin-block: var(--tu24-space-3);
	font-size: var(--tu24-h3);
	line-height: var(--tu24-leading-heading);
}

.tu24-card__title a {
	color: inherit;
	text-decoration: none;
}

.tu24-card__title a:hover {
	color: var(--tu24-orange);
	text-decoration: underline;
}

/* Keep visible category text: color must never be the only identifier. */
.tu24-badge {
	--tu24-category: var(--tu24-orange);
	--tu24-category-soft: var(--tu24-orange-soft);
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	padding: var(--tu24-space-1) var(--tu24-space-3);
	border: 1px solid currentColor;
	border-radius: var(--tu24-radius-pill);
	background-color: var(--tu24-category-soft);
	color: var(--tu24-category);
	font-size: var(--tu24-text-small);
	font-weight: 600;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.tu24-badge--cloud {
	--tu24-category: var(--tu24-cloud);
	--tu24-category-soft: var(--tu24-cloud-soft);
}

.tu24-badge--security {
	--tu24-category: var(--tu24-security);
	--tu24-category-soft: var(--tu24-security-soft);
}

.tu24-badge--ai {
	--tu24-category: var(--tu24-ai);
	--tu24-category-soft: var(--tu24-ai-soft);
}

a.tu24-badge,
button.tu24-badge {
	min-height: 44px;
	min-width: 44px;
	text-decoration: none;
}

a.tu24-badge:hover,
button.tu24-badge:hover {
	background-color: var(--tu24-category-soft);
	color: var(--tu24-category);
	text-decoration: underline;
}

.tu24-section-heading {
	margin-block: 0 var(--tu24-space-5);
	padding-inline-start: var(--tu24-space-4);
	border-inline-start: 4px solid var(--tu24-orange);
	font-size: var(--tu24-h2);
	font-weight: 700;
	line-height: var(--tu24-leading-heading);
}

/* Pair with a visible heading. Static callouts do not need role="alert". */
.tu24-callout {
	padding: var(--tu24-space-5);
	border: 1px solid var(--tu24-border);
	border-inline-start: 4px solid var(--tu24-cloud);
	border-radius: var(--tu24-radius-small);
	background-color: var(--tu24-cloud-soft);
	color: var(--tu24-text);
	overflow-wrap: anywhere;
}

.tu24-callout--alert {
	border-inline-start-color: var(--tu24-security);
	background-color: var(--tu24-security-soft);
}

.tu24-callout > :last-child {
	margin-block-end: 0;
}

/* Mobile first: scale only opt-in component spacing, never parent columns. */
@media (min-width: 48rem) {
	:root {
		--tu24-gutter: 1.5rem;
	}

	.tu24-card,
	.tu24-callout {
		padding: var(--tu24-space-6);
	}
}

@media (min-width: 75rem) {
	:root {
		--tu24-gutter: 2rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--tu24-transition: 0s;
	}
}

@media (forced-colors: active) {
	body :focus-visible {
		outline-color: Highlight;
	}
}

/* Phase 3: publication header only. The primary menu and toggle remain GP's. */
#masthead {
	background-color: var(--tu24-navy);
	color: var(--tu24-on-dark);
}

#masthead .inside-header {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	gap: var(--tu24-space-2);
	max-width: var(--tu24-container);
	margin-inline: auto;
	padding: var(--tu24-space-3) var(--tu24-gutter);
	text-align: start;
}

#masthead .inside-header::before,
#masthead .inside-header::after {
	display: none;
}

#masthead .site-branding,
#masthead .site-logo,
#masthead .site-branding-container {
	grid-column: 1;
	grid-row: 1;
	min-width: 0;
	margin: 0;
	float: none;
}

#masthead .site-branding-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--tu24-space-3);
}

/* Legacy GP logo settings can render branding as a separate sibling. */
#masthead .inside-header:has(> .site-logo) > .site-branding {
	grid-row: 2;
}

#masthead .main-title {
	font: 750 clamp(1.125rem, 1rem + 0.6vw, 1.5rem)/1.25 var(--tu24-font-sans);
	overflow-wrap: anywhere;
}

#masthead .main-title a,
#masthead .site-logo a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	max-width: 100%;
	color: var(--tu24-on-dark);
}

#masthead .site-logo .header-image {
	display: block;
	width: auto;
	max-width: min(100%, 11rem);
	height: auto;
	max-height: 44px;
	object-fit: contain;
}

#masthead .site-description {
	color: var(--tu24-muted-on-dark);
	font-size: var(--tu24-text-small);
	overflow-wrap: anywhere;
}

/* Existing header widgets remain available on their own row. */
#masthead .header-widget {
	grid-column: 1 / -1;
	grid-row: auto;
	max-width: 100%;
	margin: 0;
}

#masthead #site-navigation {
	grid-column: 3;
	grid-row: 1;
	position: static;
	min-width: 0;
	margin: 0;
	clear: none;
	float: none;
	background-color: var(--tu24-navy);
	color: var(--tu24-on-dark);
}

#masthead #site-navigation .inside-navigation {
	position: static;
	display: flex;
	padding: 0;
}

#masthead #site-navigation .mobile-menu-control-wrapper {
	display: flex;
	margin: 0;
}

#masthead #site-navigation .menu-toggle,
#masthead .tu24-header-search > summary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: var(--tu24-space-2);
	border: 1px solid transparent;
	border-radius: var(--tu24-radius-small);
	background-color: transparent;
	color: var(--tu24-on-dark);
	font: 600 var(--tu24-text-small)/1.5 var(--tu24-font-sans);
	cursor: pointer;
}

#masthead #site-navigation .menu-toggle .mobile-menu {
	padding-left: var(--tu24-space-1);
}

#masthead #site-navigation .main-nav {
	display: none;
}

#masthead #site-navigation.toggled .main-nav {
	position: absolute;
	inset-inline: 0;
	top: 100%;
	z-index: 100;
	display: block;
	max-height: min(70vh, 32rem);
	overflow-y: auto;
	padding: var(--tu24-space-3) var(--tu24-gutter);
	background-color: var(--tu24-navy);
	box-shadow: var(--tu24-shadow-card);
}

#masthead #site-navigation.toggled .main-nav > ul {
	display: block;
}

#masthead #site-navigation .main-nav ul li a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: var(--tu24-space-2) var(--tu24-space-3);
	border-radius: var(--tu24-radius-small);
	background-color: var(--tu24-navy);
	color: var(--tu24-on-dark);
	font: 600 var(--tu24-text-small)/1.5 var(--tu24-font-sans);
	white-space: normal;
	overflow-wrap: anywhere;
}

#masthead #site-navigation .main-nav ul li a:hover,
#masthead #site-navigation .main-nav ul li a:focus-visible,
#masthead #site-navigation .menu-toggle:hover,
#masthead .tu24-header-search > summary:hover,
#masthead .tu24-header-search[open] > summary {
	background-color: var(--tu24-navy);
	color: var(--tu24-accent-on-dark);
	text-decoration: underline;
}

#masthead #site-navigation .main-nav li.current-menu-item > a,
#masthead #site-navigation .main-nav li.current-menu-ancestor > a,
#masthead #site-navigation .main-nav a[aria-current="page"] {
	color: var(--tu24-accent-on-dark);
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

#masthead #site-navigation .main-nav ul ul {
	background-color: var(--tu24-navy);
}

#masthead #site-navigation .dropdown-menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	margin-inline-start: auto;
	padding: 0;
}

/* One native search disclosure shared by both viewport sizes. */
#masthead .tu24-header-search * {
	box-sizing: border-box;
}

#masthead .tu24-header-search {
	grid-column: 2;
	grid-row: 1;
}

#masthead .tu24-header-search > summary {
	list-style: none;
}

#masthead .tu24-header-search > summary::-webkit-details-marker {
	display: none;
}

#masthead .tu24-header-search__form {
	position: absolute;
	inset-inline-end: var(--tu24-gutter);
	top: 100%;
	z-index: 110;
	width: min(26rem, calc(100% - 2 * var(--tu24-gutter)));
	padding: var(--tu24-space-4);
	border: 1px solid var(--tu24-border);
	border-radius: var(--tu24-radius-small);
	background-color: var(--tu24-surface);
	color: var(--tu24-text);
	box-shadow: var(--tu24-shadow-card);
}

#masthead .tu24-header-search__form label {
	display: block;
	margin-block-end: var(--tu24-space-2);
	font-weight: 600;
}

#masthead .tu24-header-search__fields {
	display: flex;
	gap: var(--tu24-space-2);
}

#masthead .tu24-header-search__fields input {
	width: 100%;
	min-width: 0;
	min-height: 44px;
	padding: var(--tu24-space-2);
	border: 1px solid var(--tu24-muted);
	border-radius: var(--tu24-radius-small);
	background-color: var(--tu24-surface);
	color: var(--tu24-text);
	font: 1rem/1.5 var(--tu24-font-sans);
}

#masthead .tu24-header-search__fields input::placeholder {
	color: var(--tu24-muted);
	opacity: 1;
}

#masthead .tu24-header-search__fields button {
	min-width: 44px;
	min-height: 44px;
	padding: var(--tu24-space-2) var(--tu24-space-3);
	border: 1px solid transparent;
	border-radius: var(--tu24-radius-small);
	background-color: var(--tu24-orange);
	color: var(--tu24-surface);
	font: 600 1rem/1.5 var(--tu24-font-sans);
}

#masthead .tu24-header-search__fields button:hover {
	background-color: var(--tu24-orange-hover);
}

#masthead :focus-visible {
	outline: 3px solid var(--tu24-focus);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--tu24-surface);
}

/* Keep this breakpoint aligned with techupdate24_child_menu_media_query(). */
@media (min-width: 1024px) {
	#masthead .inside-header {
		gap: var(--tu24-space-4);
	}

	#masthead #site-navigation {
		grid-column: 2;
		position: relative;
	}

	#masthead .tu24-header-search {
		grid-column: 3;
	}

	#masthead #site-navigation .menu-toggle {
		display: none;
	}

	#masthead #site-navigation .main-nav,
	#masthead #site-navigation.toggled .main-nav {
		display: block;
		position: static;
		max-height: none;
		overflow: visible;
		padding: 0;
		box-shadow: none;
	}

	#masthead #site-navigation .main-nav > ul {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	#masthead #site-navigation .main-nav li:focus-within > ul {
		left: auto;
		opacity: 1;
		height: auto;
		visibility: visible;
		overflow: visible;
		pointer-events: auto;
	}

	/* Open deeper submenus inward so they stay within the viewport. */
	#masthead #site-navigation .main-nav ul ul li:is(:hover, :focus-within, .sfHover) > ul {
		left: auto;
		right: 100%;
		top: 0;
	}
}

@media (forced-colors: active) {
	#masthead :focus-visible {
		outline-color: Highlight;
	}
}

/* Publication footer: retain GeneratePress's footer shell and widget hooks. */
.site-footer .site-info {
	background: var(--tu24-navy);
	color: var(--tu24-muted-on-dark);
}

.site-footer .inside-site-info {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--tu24-space-5);
	max-width: var(--tu24-container);
	margin-inline: auto;
	padding: var(--tu24-space-7) var(--tu24-gutter) var(--tu24-space-5);
	text-align: start;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.tu24-footer {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--tu24-space-6);
}

.tu24-footer > * { min-width: 0; }

.site-info .tu24-footer a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	max-width: 100%;
	color: var(--tu24-muted-on-dark);
	font-size: 0.9375rem;
	line-height: 1.6;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.site-info .tu24-footer .tu24-footer__name {
	color: var(--tu24-on-dark);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.035em;
	text-transform: uppercase;
}

.tu24-footer__brand p {
	max-width: 40ch;
	margin: var(--tu24-space-3) 0 0;
	font-size: 1rem;
	line-height: 1.65;
}

.site-info .tu24-footer h2 {
	margin: 0 0 var(--tu24-space-3);
	color: var(--tu24-on-dark);
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.tu24-footer ul { margin: 0; padding: 0; list-style: none; }

.site-info .tu24-footer a:is(:hover, :focus-visible) {
	color: var(--tu24-accent-on-dark);
	text-decoration: underline;
}

.site-info .tu24-footer a:focus-visible {
	outline: 3px solid var(--tu24-accent-on-dark);
	outline-offset: 3px;
}

.site-footer .copyright-bar {
	padding-block-start: var(--tu24-space-5);
	border-block-start: 1px solid var(--tu24-muted);
	font-size: var(--tu24-text-small);
	line-height: 1.6;
	overflow-wrap: anywhere;
}

@media (min-width: 640px) {
	.tu24-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tu24-footer__brand { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
	.tu24-footer { grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); }
	.tu24-footer__brand { grid-column: auto; }
}

@media (forced-colors: active) {
	.site-info .tu24-footer a:focus-visible { outline-color: Highlight; }
}

/* Override GP footer-bar alignment rules: publication first, copyright last. */
.site-footer .inside-site-info > .tu24-footer {
	order: 0;
	width: 100%;
}
.site-footer .inside-site-info > .copyright-bar {
	order: 20;
	width: 100%;
	float: none;
	margin: 0;
	text-align: start;
}