/*
Theme Name: Sex Product List
Theme URI: https://sexproductlist.com
Author: D-Engine
Description: Brand child theme of Directory Theme for sexproductlist.com: SPL burgundy palette for light and dark mode, logo, icons, header with category bar, footer and landing page.
Template: directory-theme
Requires at least: 6.8
Tested up to: 7.1
Requires PHP: 8.2
Version: 0.8.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sexproductlist-theme
*/

/* Header ---------------------------------------------------------------------------- */

.spl-header :where(.wp-block-site-title a) {
	text-decoration: none;
}

/* Main menu: plain links (no Navigation block, so no automatic page-list fallback). */
.spl-menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	list-style: none;
	font-weight: 600;
}

.spl-menu a {
	text-decoration: none;
}

.spl-menu a:hover,
.spl-menu a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.spl-menu-toggle {
	display: none;
	border: 0;
	padding: 0;
}

.spl-menu-toggle > summary {
	padding: 0.5rem 0.75rem;
	border: 1px solid currentcolor;
	border-radius: var(--wp--custom--radius--medium);
	font-weight: 600;
	cursor: pointer;
}

.spl-menu--mobile {
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	padding-block: var(--wp--preset--spacing--30);
}

.spl-header :focus-visible {
	outline-color: var(--wp--preset--color--brand-contrast);
}

.spl-header .wp-block-site-logo img {
	border-radius: 8px;
}

/* Category bar: one line, scrolls sideways on small screens. */
.spl-catbar__list {
	display: flex;
	gap: var(--wp--preset--spacing--40);
	margin-block: 0;
	padding: 0;
	overflow-x: auto;
	list-style: none;
	white-space: nowrap;
	scrollbar-width: thin;
}

.spl-catbar__list a {
	display: inline-block;
	padding-block: 0.5rem;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
}

.spl-catbar__list a:hover,
.spl-catbar__list a:focus-visible {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

/* Hero ------------------------------------------------------------------------------ */

.spl-hero__quick {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.spl-hero__quick span {
	color: var(--wp--preset--color--muted);
}

.spl-hero__quick a {
	padding: 0.375rem 0.875rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.spl-hero__quick a:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.spl-hero__promise {
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--raised);
}

/* Guide cards: the image runs to the card's edges. */
.spl-guide-card {
	overflow: hidden;
}

.spl-guide-card .wp-block-post-featured-image {
	margin: 0;
}

.spl-guide-card .wp-block-post-title a {
	text-decoration: none;
}

/* Footer and brand band --------------------------------------------------------------- */

.spl-footer__links {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 2;
}

.spl-footer__links a,
.spl-footer :where(.wp-block-site-title a) {
	text-decoration: none;
}

.spl-footer__links a:hover {
	text-decoration: underline;
}

.spl-footer__rule {
	border-color: color-mix(in srgb, currentcolor 25%, transparent);
	opacity: 1;
}

.spl-footer :focus-visible,
.spl-brand-cta :focus-visible {
	outline-color: var(--wp--preset--color--brand-contrast);
}

.spl-footer .wp-block-site-logo img {
	border-radius: 8px;
}

/* The brand band before the footer sits flush against it. */
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* Small screens ------------------------------------------------------------------------- */

@media (max-width: 781px) {

	/* Logo and menu button on one row, search below. */
	.spl-header .alignwide {
		flex-wrap: wrap;
	}

	/* Beats WordPress' `body .is-layout-flex { display: flex }`. */
	.spl-header .spl-header__right {
		display: contents;
	}

	.spl-header .alignwide > .wp-block-group:first-child {
		flex: 1 1 0;
		min-width: 0;
	}

	.spl-header .spl-header__right > .spl-menu {
		display: none;
	}

	.spl-header .spl-menu-toggle {
		display: block;
		order: 2;
	}

	/* The opened menu drops down below the button. */
	.spl-header {
		position: relative;
		z-index: 60;
	}

	.spl-header .spl-menu-toggle {
		position: relative;
	}

	.spl-header .spl-menu--mobile {
		position: absolute;
		inset-inline-end: 0;
		inset-block-start: calc(100% + 0.5rem);
		min-inline-size: 13rem;
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
		border-radius: var(--wp--custom--radius--medium);
		background: var(--wp--preset--color--brand);
		box-shadow: var(--wp--preset--shadow--raised);
	}

	.spl-header__search {
		flex: 1 1 100%;
		min-width: 0;
		order: 3;
	}

	/* The block stores a fixed width for wide screens. */
	.spl-header__search .wp-block-search__inside-wrapper {
		box-sizing: border-box;
		width: 100% !important;
		max-width: 100%;
	}

	.spl-brand-cta .wp-block-buttons {
		justify-content: flex-start;
	}
}