/*
Theme Name: Wild Lemon
Author: Suman Basuli
Author URI: https://heysuman.com/
Description: A warm editorial blogging theme built entirely on core blocks — query loops, post templates, pullquotes, and navigation. Newsreader for reading, Schibsted Grotesk for the interface, and a single lemon accent. No plugin dependencies.
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wild-lemon
Tags: blog, one-column, accessibility-ready, custom-colors, custom-menu, editor-style, featured-images, full-site-editing, block-patterns, block-styles, threaded-comments, translation-ready, wide-blocks
*/

/*
 * Structural rules that block attributes cannot express live here.
 * Everything token-based (colors, type, spacing) belongs in theme.json.
 */

/* ---------- Logo: lemon dot after the site title ---------- */

.wl-logo a::after {
	content: "";
	display: inline-block;
	width: 0.33em;
	height: 0.33em;
	margin-inline-start: 0.08em;
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent);
}

/* ---------- Post titles: underline on hover only ---------- */

.wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.wp-block-post-title a:hover,
.wp-block-post-title a:focus {
	text-decoration: underline;
	text-underline-offset: 3px;
	color: inherit;
}

/* ---------- Author links ---------- */

.wp-block-post-author-name a {
	color: inherit;
	text-decoration: none;
}

.wp-block-post-author-name a:hover,
.wp-block-post-author-name a:focus {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Term pills ---------- */

.wl-pill a,
.is-style-wild-lemon-pill a {
	display: inline-block;
	background-color: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--contrast);
	border-radius: 99px;
	padding: 5px 12px;
	font-family: var(--wp--preset--font-family--schibsted-grotesk);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
}

.wl-pill-outline a,
.is-style-wild-lemon-pill-outline a {
	display: inline-block;
	border: 1px solid #dcd5c4;
	color: var(--wp--preset--color--muted);
	border-radius: 99px;
	padding: 7px 16px;
	font-family: var(--wp--preset--font-family--schibsted-grotesk);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.wl-pill-outline a:hover,
.wl-pill-outline a:focus,
.is-style-wild-lemon-pill-outline a:hover,
.is-style-wild-lemon-pill-outline a:focus {
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
}

/* ---------- Topic pills (tag cloud) ---------- */

.wl-topic-pills.wp-block-tag-cloud a {
	display: inline-block;
	background-color: var(--wp--preset--color--base);
	border: 1px solid #e0d6ae;
	border-radius: 99px;
	padding: 8px 18px;
	margin: 0;
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
	text-decoration: none;
	transition: border-color 0.15s ease;
}

.wl-topic-pills.wp-block-tag-cloud a:hover,
.wl-topic-pills.wp-block-tag-cloud a:focus {
	border-color: var(--wp--preset--color--contrast);
}

/* ---------- Header search: pill button ---------- */

.wl-search-pill .wp-block-search__button {
	background: transparent;
	border: 1px solid #dcd5c4;
	border-radius: 99px;
	padding: 8px 18px;
	color: var(--wp--preset--color--muted);
	font-weight: 500;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.wl-search-pill .wp-block-search__button:hover,
.wl-search-pill .wp-block-search__button:focus {
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
}

.wl-search-pill .wp-block-search__input {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 99px;
	padding: 8px 16px;
	background-color: var(--wp--preset--color--base);
}

/* ---------- Search block on content pages ---------- */

.wl-search-form .wp-block-search__input {
	border: 1px solid #dcd5c4;
	border-radius: 99px;
	padding: 10px 20px;
	background-color: var(--wp--preset--color--base);
}

/* ---------- Query pagination: circled numbers ---------- */

.wl-pagination {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.wl-pagination .wp-block-query-pagination-numbers .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	border: 1px solid #dcd5c4;
	border-radius: 50%;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	transition: border-color 0.15s ease;
}

.wl-pagination .wp-block-query-pagination-numbers .page-numbers:hover,
.wl-pagination .wp-block-query-pagination-numbers .page-numbers:focus {
	border-color: var(--wp--preset--color--contrast);
}

.wl-pagination .wp-block-query-pagination-numbers .page-numbers.current {
	background-color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-weight: 600;
}

.wl-pagination .wp-block-query-pagination-numbers .page-numbers.dots {
	border: none;
}

.wl-pagination .wp-block-query-pagination-previous,
.wl-pagination .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	height: 40px;
	border: 1px solid #dcd5c4;
	border-radius: 99px;
	padding: 0 20px;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	transition: border-color 0.15s ease;
}

.wl-pagination .wp-block-query-pagination-previous:hover,
.wl-pagination .wp-block-query-pagination-next:hover,
.wl-pagination .wp-block-query-pagination-previous:focus,
.wl-pagination .wp-block-query-pagination-next:focus {
	border-color: var(--wp--preset--color--contrast);
}

/* ---------- Text-forward archive rows (home) ---------- */

.wl-row-link {
	display: grid;
	grid-template-columns: 110px 1fr auto;
	gap: 28px;
	align-items: baseline;
	transition: background-color 0.15s ease;
}

.wl-row-link:hover {
	background-color: #f7f4ea;
}

.wl-row-link:hover .wp-block-post-title a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wl-archive-list .wp-block-post:last-child .wl-row-link {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

@media ( max-width: 640px ) {
	.wl-row-link {
		grid-template-columns: 1fr;
		gap: 6px;
	}
}

/* ---------- Homepage hero ---------- */

/* Collapse the image column when the featured post has no featured image. */
.wl-hero > .wp-block-column:last-child:not( :has(.wp-block-post-featured-image) ) {
	display: none;
}

/* ---------- Media rows (archive, author, search, index) ---------- */

.wl-media-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--50);
	align-items: center;
}

/* Reserve the thumbnail column only when the post actually has a featured image. */
.wl-media-row:has( > .wp-block-post-featured-image) {
	grid-template-columns: 200px 1fr;
}

@media ( max-width: 640px ) {
	.wl-media-row,
	.wl-media-row:has( > .wp-block-post-featured-image) {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--30);
	}
}

/* ---------- Post navigation (previous / next) ---------- */

.wl-post-nav .wp-block-post-navigation-link {
	max-width: 46%;
}

.wl-post-nav .wp-block-post-navigation-link .post-navigation-link__label {
	display: inline-block;
	font-family: var(--wp--preset--font-family--schibsted-grotesk);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted-2);
}

.wl-post-nav .wp-block-post-navigation-link .post-navigation-link__title {
	display: block;
	margin-top: 8px;
}

.wl-post-nav .wp-block-post-navigation-link .wp-block-post-navigation-link__arrow-previous,
.wl-post-nav .wp-block-post-navigation-link .wp-block-post-navigation-link__arrow-next {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted-2);
}

.wl-post-nav .wp-block-post-navigation-link a {
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: 21px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.wl-post-nav .wp-block-post-navigation-link a:hover,
.wl-post-nav .wp-block-post-navigation-link a:focus {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Pullquote citation ---------- */

.wp-block-pullquote cite {
	display: block;
	margin-top: 14px;
	font-family: var(--wp--preset--font-family--schibsted-grotesk);
	font-size: var(--wp--preset--font-size--x-small);
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted-2);
}

/* ---------- Inline text details ---------- */

mark,
.has-inline-color.has-accent-background-color {
	background: linear-gradient(transparent 62%, #f2de8a 62%);
	color: inherit;
}

p code,
li code {
	background-color: #dfdbd0;
	border-radius: 4px;
	padding: 1px 6px;
	font-size: 0.8em;
}

/* ---------- Avatars are always round ---------- */

.wp-block-avatar img {
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--line);
}

/* ---------- Footer ---------- */

.wl-footer a:hover,
.wl-footer a:focus {
	color: var(--wp--preset--color--accent);
}

.wl-footer-brand {
	max-width: 360px;
}

.wl-footer-list.wp-block-categories,
.wl-footer-list.wp-block-page-list {
	list-style: none;
	padding-left: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: var(--wp--preset--font-size--small);
}

.wl-footer-list ul {
	list-style: none;
	margin: 8px 0 0;
	padding-left: 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.wl-footer-list a {
	color: #ddd7c9;
	text-decoration: none;
}

/* ---------- 404 page ---------- */

.wl-404-numeral {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--newsreader);
	font-weight: 500;
	line-height: 0.82;
	letter-spacing: -0.04em;
	color: var(--wp--preset--color--contrast);
}

.wl-404-numeral .digit {
	font-size: clamp(150px, 9.4rem + 4vw, 240px);
}

.wl-404-numeral .o {
	position: relative;
	width: clamp(110px, 6.9rem + 3vw, 176px);
	aspect-ratio: 1;
	margin: 0 4px;
}

.wl-404-numeral .o .ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: clamp(15px, 0.9rem + 0.5vw, 22px) solid var(--wp--preset--color--contrast);
}

.wl-404-numeral .o .seed {
	position: absolute;
	top: 50%;
	left: 50%;
	width: clamp(26px, 1.6rem + 0.7vw, 40px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	transform: translate(-50%, -50%);
}

.wl-404-search {
	max-width: 420px;
	margin-top: 4px;
}

.wl-404-search .wp-block-search__inside-wrapper {
	border: 1px solid #dcd5c4;
	border-radius: 99px;
	padding: 6px 6px 6px 20px;
	background: #fff;
}

.wl-404-search .wp-block-search__input {
	border: none;
	background: transparent;
	padding: 8px 0;
	font-size: 15px;
	color: var(--wp--preset--color--contrast);
}

.wl-404-search .wp-block-search__input:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
	border-radius: 4px;
}

.wl-404-search .wp-block-search__button {
	border: none;
	border-radius: 99px;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	padding: 10px 22px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	cursor: pointer;
	margin-left: 10px;
}

.wl-404-search .wp-block-search__button:hover,
.wl-404-search .wp-block-search__button:focus {
	background: #3a342a;
}

.wl-chips .wp-block-button__link {
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--contrast);
	border-radius: 99px;
	padding: 7px 16px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.wl-chips .wp-block-button__link:hover,
.wl-chips .wp-block-button__link:focus {
	background: #efe0a0;
	color: var(--wp--preset--color--contrast);
}

/* ---------- Comments ---------- */

.wp-block-post-comments-form input[type="text"],
.wp-block-post-comments-form input[type="email"],
.wp-block-post-comments-form input[type="url"],
.wp-block-post-comments-form textarea {
	border: 1px solid #dcd5c4;
	border-radius: 10px;
	padding: 10px 14px;
	background-color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--schibsted-grotesk);
}