/*
Theme Name: Twenty Twenty-Five Child
Theme URI: https://mariadb.org/
Author: MariaDB
Author URI: https://mariadb.org/
Description: MariaDB.org custom theme, built as a child of Twenty Twenty-Five.
Requires at least: 6.7
Requires PHP: 7.2
Version: 0.250.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive-child
Template: twentytwentyfive
*/

:root {
	--mariadb-card-shadow-color: rgba(27, 60, 83, 0.18);
	--mariadb-card-bg: color-mix(in srgb, var(--wp--preset--color--tertiary) 8%, var(--wp--preset--color--background) 92%);
}

/* Suppresses the focus outline on mouse click while keeping it for keyboard
   navigation (:focus-visible only matches keyboard/programmatic focus). */
:focus:not(:focus-visible) {
	outline: none;
}

.mariadb-single-title {
	font-size: var(--wp--preset--font-size--x-large);
}

/* Scoped to post-content so homepage/section headings are unaffected. */
.wp-block-post-content :is(h1, h2, h3, h4, h5, h6) {
	margin-top: 2.5rem;
	margin-bottom: 1rem;
	font-weight: 700;
}

.wp-block-post-content h1 {
	font-size: 1.75rem;
}

.wp-block-post-content h2 {
	font-size: 1.5rem;
}

.wp-block-post-content h3 {
	font-size: 1.25rem;
}

.wp-block-post-content h5 {
	font-size: var(--wp--preset--font-size--medium);
}

.wp-block-post-content a,
.wp-block-post-excerpt a {
	font-weight: 600;
	text-decoration: underline;
	color: color-mix(in srgb, var(--wp--preset--color--primary) 70%, var(--wp--preset--color--secondary) 30%);
}

.mariadb-header-branding {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-shrink: 0;
}

.mariadb-site-logo img {
	width: 200px;
	height: auto;
}

/* display kept out of the sizing rule above deliberately — it has higher
   specificity (class+element) than these single-class toggles, and would
   otherwise force both logo variants visible regardless of theme. Dark
   mode's override in dark-mode.css is a higher-specificity attribute
   selector, so it wasn't affected by this — only the light-mode default was. */
.mariadb-site-logo-light {
	display: block;
}

.mariadb-site-logo-dark {
	display: none;
}

.mariadb-header-search {
	display: flex;
	align-items: center;
	background: color-mix(in srgb, var(--wp--preset--color--tertiary) 15%, var(--wp--preset--color--background) 85%);
	border: 1px solid var(--wp--preset--color--secondary);
	border-radius: 8px;
	padding-inline-start: 0.75rem;
}

.mariadb-header-search-input {
	border: none;
	background: transparent;
	color: var(--wp--preset--color--primary);
	font-size: 0.9rem;
	/* Shrinks with the window while it shares the row with the logo and socials. */
	width: clamp(150px, 24vw, 320px);
	padding-block: 0.4rem;
}

.mariadb-header-search-input:focus {
	outline: none;
}

.mariadb-header-search-clear {
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	color: var(--wp--preset--color--primary);
	cursor: pointer;
	padding: 0.25rem;
	visibility: hidden;
}

.mariadb-header-search-clear.is-visible {
	visibility: visible;
}

.mariadb-header-search-clear:hover {
	color: var(--wp--preset--color--accent);
}

.mariadb-header-search-clear svg {
	width: 14px;
	height: 14px;
}

.mariadb-header-search-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	color: var(--wp--preset--color--primary);
	cursor: pointer;
	padding: 0.5rem 0.75rem;
}

.mariadb-header-search-submit svg {
	width: 16px;
	height: 16px;
}

.mariadb-header-actions {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.mariadb-header-controls-mobile,
.mariadb-header-menu-button {
	display: none;
}

.mariadb-header-menu-button {
	align-items: center;
	padding: 0.25rem;
	border: none;
	background: transparent;
	color: var(--wp--preset--color--primary);
	cursor: pointer;
}

/* Mouse only: on touch screens a tap would leave the button stuck in its hover color. */
@media (hover: hover) {
	.mariadb-header-menu-button:hover {
		color: var(--wp--preset--color--accent);
	}
}

/* A tap that is waiting for the menu script to load (inline script in functions.php). */
.mariadb-header-menu-button.is-pending {
	opacity: 0.45;
}

.mariadb-header-menu-button svg {
	width: 24px;
	height: 24px;
}

/* Below core's 600px mobile-menu breakpoint our menu button shows before the search box;
   core's own button stays in the DOM (it's what our button clicks) but is hidden, which
   leaves the nav row empty, so its gap goes too. The open overlay is position: fixed, so it
   still covers the page. Written as the exact inverse of core's (min-width: 600px), so
   fractional widths like 599.5px can't fall between the two. */
@media not all and (min-width: 600px) {
	.mariadb-header-menu-button {
		display: flex;
	}

	.mariadb-header-nav-row .wp-block-navigation__responsive-container-open {
		display: none !important;
	}

	.mariadb-header-nav-row {
		margin-block-start: 0 !important;
	}
}

/* Narrow screens: a grid, so nothing can drop out of place. Row one: logo | socials.
   Row two: search (fills the row) | reopen/theme controls.
   !important beats the layout's generated flex rules. */
@media (max-width: 768px) {
	.mariadb-header-row {
		display: grid !important;
		grid-template-columns: auto 1fr auto;
		align-items: center;
		gap: 0.75rem !important;
	}

	.mariadb-header-branding {
		grid-area: 1 / 1;
	}

	.mariadb-header-actions {
		grid-area: 1 / 2 / auto / -1;
		justify-self: end;
	}

	.mariadb-header-search-wrap {
		grid-area: 2 / 1 / auto / 3;
		gap: 0.75rem !important;
	}

	.mariadb-header-search {
		flex: 1;
		min-width: 0;
	}

	.mariadb-header-controls-mobile {
		grid-area: 2 / 3;
		display: flex;
		align-items: center;
	}

	.mariadb-header-controls {
		display: none !important;
	}

	.mariadb-header-search-input {
		flex: 1;
		width: auto;
		min-width: 0;
	}
}

/* Phones: three rows. Logo | controls, then the socials on their own line, then the search. */
@media (max-width: 480px) {
	.mariadb-site-logo img {
		width: 150px;
	}

	.mariadb-header-controls-mobile {
		grid-area: 1 / 2 / auto / -1;
		justify-self: end;
	}

	.mariadb-header-actions {
		grid-area: 2 / 1 / auto / -1;
		justify-self: center;
	}

	.mariadb-header-search-wrap {
		grid-area: 3 / 1 / auto / -1;
	}
}

.mariadb-social-links {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.mariadb-social-links a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.mariadb-social-links svg {
	width: 20px;
	height: 20px;
}

/* min-width + visibility (not display:none) reserves the space up front, so
   the header row doesn't reflow once the star count populates. */
.mariadb-github-stars {
	display: inline-block;
	min-width: 3rem;
	font-size: 0.8rem;
	font-weight: 600;
	visibility: hidden;
}

.mariadb-github-stars:not(:empty) {
	visibility: visible;
}

.mariadb-github-star-icon {
	color: #E3A82B;
}

/* On their own row there is room for wider spacing, which makes them easier to tap. */
@media (max-width: 480px) {
	.mariadb-social-links {
		gap: 1.75rem;
	}
}

/* WP core's navigation submenu defaults to a plain white background and
   right-anchored positioning (it auto-flips to prevent viewport overflow) —
   neither respects this theme's palette or matches the parent trigger's
   alignment, so both need overriding explicitly. !important is used
   deliberately here since the block library applies some of its defaults as
   inline styles, which only a stylesheet !important can reliably beat. */
.wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--background) !important;
	left: 0 !important;
	right: auto !important;
	border: 1px solid var(--wp--preset--color--secondary) !important;
	border-radius: 4px !important;
	overflow: hidden !important;
}

.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary) !important;
}

/* Set by js/nav-submenu.js when a dropdown would overflow the window's right edge. */
.wp-block-navigation__submenu-container.mariadb-submenu-flip {
	left: auto !important;
	right: 0 !important;
}

.wp-block-navigation__submenu-container .wp-block-navigation-item:not(:last-child) {
	border-bottom: 1px solid var(--wp--preset--color--secondary);
}

/* Accent link hover, site-wide (both light/dark, value set per mode). */
.wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent);
}

.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent) !important;
}

/* Mobile menu: a drawer sliding in from the left over a dimmed page, as wide as its longest
   link. The outer container is the dim backdrop, the inner wrapper is the drawer itself.
   !important beats core's overlay styles and the dropdown box styles above. */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: 0 !important;
	overflow: hidden !important;
	background-color: rgba(0, 0, 0, 0.5) !important;
	color: var(--wp--preset--color--primary) !important;
}

.is-menu-open .wp-block-navigation__responsive-close {
	box-sizing: border-box;
	width: fit-content !important;
	min-width: 16rem;
	max-width: 85vw !important;
	/* Full height and scrolls on its own, so the page behind stays put. */
	flex-shrink: 0;
	height: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
	margin: 0 !important;
	padding: 1.25rem 1.5rem 2rem;
	background: var(--wp--preset--color--background);
	border-right: 1px solid var(--wp--preset--color--secondary);
	box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
	animation: mariadb-menu-drawer-in 0.2s ease-out;
}

@keyframes mariadb-menu-drawer-in {
	from {
		transform: translateX(-100%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.is-menu-open .wp-block-navigation__responsive-close {
		animation: none;
	}
}

.is-menu-open .wp-block-navigation__container {
	gap: 1rem !important;
	font-size: 1.2rem;
}

/* Each dropdown's links sit under its parent, along a guide line. */
.is-menu-open .wp-block-navigation__submenu-container {
	gap: 0.15rem !important;
	margin: 0.5rem 0 0 0.25rem;
	padding: 0 0 0 1rem !important;
	border: none !important;
	border-left: 2px solid color-mix(in srgb, var(--wp--preset--color--secondary) 60%, transparent) !important;
	border-radius: 0 !important;
	background: transparent !important;
	font-size: 1rem;
}

.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item:not(:last-child) {
	border-bottom: none;
}

.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.3rem 0 !important;
}

/* Parents that lead nowhere read as section labels: muted, with a rule running to the edge. */
.is-menu-open .mariadb-nav-inert-trigger {
	align-self: stretch;
}

.is-menu-open .mariadb-nav-inert-trigger > .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	align-self: stretch;
	color: color-mix(in srgb, var(--wp--preset--color--primary) 70%, var(--wp--preset--color--secondary) 30%);
	pointer-events: none;
}

.is-menu-open .mariadb-nav-inert-trigger > .wp-block-navigation-item__content::after {
	content: "";
	flex: 1;
	min-width: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--secondary);
}

/* Dropdown triggers with no real destination ("#") — don't hover-highlight
   like a real link, so they don't read as clickable. Only the trigger itself
   (direct child), not the real links inside its dropdown. */
.mariadb-nav-inert-trigger > .wp-block-navigation-item__content:hover {
	color: inherit !important;
}

a:not(.wp-block-button__link):not(.wp-element-button):hover,
a:not(.wp-block-button__link):not(.wp-element-button):focus-visible {
	color: var(--wp--preset--color--accent);
}

/* Border follows currentColor, so it always matches the current text color
   in both states — keeps filled buttons visible on hover even against a
   same-colored section background. */
.wp-block-button__link {
	border: 1px solid currentColor;
	border-radius: 8px;
	transition: color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.wp-block-button__link:hover {
	box-shadow: 0 4px 14px var(--mariadb-card-shadow-color);
	transform: translateY(-2px);
}

/* Hover color. Default filled buttons (primary background) switch to an accent fill, since
   accent text on the primary background is unreadable. Outline buttons and buttons with their
   own background color keep that background and get accent text (and border, via currentColor).
   !important beats the has-*-color utility classes, which core ships with !important;
   :where() keeps these rules weaker than any component's own button hover (hero, Get involved). */
:where(.wp-block-button:not(.is-style-outline)) > .wp-block-button__link:where(:not(.has-background)):hover {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--background) !important;
}

:where(.wp-block-button.is-style-outline) > .wp-block-button__link:hover,
.wp-block-button__link:where(.has-background):hover {
	color: var(--wp--preset--color--accent) !important;
}

/* "Discuss ... Sponsorship" buttons on /sponsor: saved with the old theme's purple inline. */
.discuss-sponsor-btn > .wp-block-button__link {
	background-color: var(--wp--preset--color--accent) !important;
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--background) !important;
}

.discuss-sponsor-btn > .wp-block-button__link:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--accent) 82%, black 18%) !important;
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 82%, black 18%);
	color: var(--wp--preset--color--background) !important;
}

/* Footer column headings (Community/Ecosystem/About) — bolded so they read
   as section labels, not just body-weight text. Not underlined: that would
   read as a link, the opposite of what's wanted. */
footer .wp-block-heading {
	font-weight: 700;
}

.mariadb-site-footer .wp-block-heading {
	margin-bottom: 0.25rem;
}

.mariadb-site-footer .wp-block-navigation {
	font-size: 0.9rem;
}

.mariadb-site-footer .wp-block-navigation .wp-block-navigation__container {
	gap: 0.35rem;
}

.mariadb-footer-bottom {
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--20);
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--secondary) 40%, transparent);
	font-size: 0.8rem;
}

.mariadb-footer-bottom p {
	margin: 0;
}

/* Once the logo no longer fits beside the three menus it takes its own row, centered.
   !important beats the layout's generated align-items. */
@media (max-width: 800px) {
	.mariadb-footer-brand {
		flex-basis: 100%;
		align-items: center !important;
	}
}

/* Phones: two balanced columns (Community + Ecosystem | About), logo centered below.
   !important beats the layout's generated flex rules. */
@media (max-width: 600px) {
	.mariadb-footer-columns {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto 1fr auto;
		gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30) !important;
	}

	.mariadb-footer-columns > :nth-child(1) {
		grid-area: 1 / 1;
	}

	.mariadb-footer-columns > :nth-child(2) {
		grid-area: 2 / 1;
	}

	.mariadb-footer-columns > :nth-child(3) {
		grid-area: 1 / 2 / span 2;
	}

	.mariadb-footer-brand {
		grid-area: 3 / 1 / auto / span 2;
		justify-self: center;
	}

	.mariadb-site-footer .wp-block-navigation {
		font-size: 0.85rem;
	}

	.mariadb-footer-bottom {
		margin-top: var(--wp--preset--spacing--30);
	}
}

/* Stops a wide child from pushing the column past its flex-basis. */
.wp-block-columns > .wp-block-column {
	min-width: 0;
}

.mariadb-btn-accent,
.mariadb-btn-accent.mariadb-downloads-submit,
.mariadb-btn-accent.mariadb-newsletter-submit {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--background);
}

.mariadb-btn-accent:hover,
.mariadb-btn-accent.mariadb-downloads-submit:hover,
.mariadb-btn-accent.mariadb-newsletter-submit:hover {
	background: color-mix(in srgb, var(--wp--preset--color--accent) 82%, black 18%);
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 82%, black 18%);
	color: var(--wp--preset--color--background) !important;
}

/* Fixed height, always reserved: showing/hiding only slides the bar, nothing below moves. */
:root {
	--mariadb-announcement-height: 28px;
}

.mariadb-announcement {
	box-sizing: border-box;
	height: var(--mariadb-announcement-height);
	background: var(--wp--preset--color--tertiary);
	transition: transform 0.4s ease-out, visibility 0s;
}

.mariadb-announcement-hidden .mariadb-announcement {
	transform: translateY(-100%);
	visibility: hidden;
	transition: transform 0.4s ease-in, visibility 0s 0.4s;
}

/* Same width and side padding as the header rows: text centered, close button at the right content edge. */
.mariadb-announcement-inner {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 1fr minmax(0, max-content) 1fr;
	align-items: center;
	gap: 0.5rem;
	height: 100%;
	max-width: calc(var(--wp--style--global--wide-size) + var(--wp--style--root--padding-left) + var(--wp--style--root--padding-right));
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
}

/* One line; long announcements get an ellipsis on narrow screens. */
.mariadb-announcement-text {
	grid-column: 2;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.4;
}

.mariadb-announcement-close {
	grid-column: 3;
	justify-self: end;
	display: flex;
	padding: 0.15rem;
	border: none;
	background: transparent;
	color: inherit;
	cursor: pointer;
	opacity: 0.75;
}

.mariadb-announcement-close:hover {
	opacity: 1;
	color: var(--wp--preset--color--accent);
}

.mariadb-announcement-close svg {
	width: 14px;
	height: 14px;
}

/* First page of a session (class set pre-paint in functions.php). */
.mariadb-announcement-intro .mariadb-announcement {
	animation: mariadb-announcement-in 0.5s ease-out 0.2s both;
}

@keyframes mariadb-announcement-in {
	from {
		transform: translateY(-100%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mariadb-announcement,
	.mariadb-announcement-hidden .mariadb-announcement {
		transition: none;
	}

	.mariadb-announcement-intro .mariadb-announcement {
		animation: none;
	}
}

/* Promo card (mariadb/promo-banner block): a linked image, light and dark versions. */
.mariadb-promo-banner {
	display: block;
	max-width: 300px;
	margin-inline: auto;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 4px 14px var(--mariadb-card-shadow-color);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.mariadb-promo-banner:hover {
	box-shadow: 0 8px 24px var(--mariadb-card-shadow-color);
	transform: translateY(-2px);
}

.mariadb-promo-banner img {
	display: block;
	width: 100%;
	height: auto;
}

/* "auto" variant shows the card that contrasts with the page; dark mode swaps them (dark-mode.css). */
.mariadb-promo-banner--auto .mariadb-promo-banner-light {
	display: none;
}

.mariadb-hero .mariadb-promo-banner {
	margin-top: var(--wp--preset--spacing--50);
}

.mariadb-announcement-reopen {
	display: none;
	align-items: center;
	margin-right: 0.75rem;
	/* 18px icon + 2 x 2px = the theme toggle's 22px, so showing it doesn't grow the row. */
	padding: 2px 0.25rem;
	border: none;
	background: transparent;
	color: var(--wp--preset--color--primary);
	cursor: pointer;
}

.mariadb-announcement-hidden .mariadb-announcement-reopen {
	display: inline-flex;
}

.mariadb-announcement-reopen:hover {
	color: var(--wp--preset--color--accent);
}

.mariadb-announcement-reopen svg {
	width: 18px;
	height: 18px;
}