/*
Theme Name: Ollie 2
Theme URI: olliewp.com
Author: Mike McAlister
Author URI: mikemcalister.com
Description: Ollie 2 is a customized derivative of the Ollie WordPress block theme, launched from a blazing-fast, pixel-perfect design system with over 50 beautiful pattern designs, 7 full-page pattern layouts, and fully-customizable Global Styles.
Tags: blog, portfolio, entertainment, grid-layout, one-column, two-columns, three-columns, four-columns, block-patterns, block-styles, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, full-width-template, rtl-language-support, style-variations, template-editing, theme-options, translation-ready, wide-blocks
Tested up to: 6.7.1
Requires PHP: 7.3
Version: 1.2.0
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ollie

Ollie 2, based on the Ollie WordPress Theme, (C) 2026 Mike McAlister.
Distributed under the terms of the GNU GPL.
*/

/* CSS Reset
---------------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

b,
strong {
	font-weight: var(--wp--custom--font-weight--semi-bold);
}

ol,
ul {
	padding: 0;
}

ol:where(:not([class*="wp-block"])),
ol:where(.wp-block-list),
ul:where(:not([class*="wp-block"])),
ul:where(.wp-block-list) {
	padding-inline-start: var(--wp--preset--spacing--medium);
}

div[class*="wp-block-"] figcaption {
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--x-small);
	margin-block-end: 0;
	margin-block-start: 20px;
	text-align: center;
}

img,
figure {
	max-inline-size: 100%;
	block-size: auto;
}

@media (prefers-color-scheme: dark) {
	img {
		filter: brightness(0.9) contrast(1.05);
	}
}

/* Manual light/dark theme switcher
--------------------------------------------- */

:root[data-theme="light"] {
	color-scheme: light;
}

:root[data-theme="dark"] {
	color-scheme: dark;
}

#ollie-theme-toggle {
	position: fixed;
	inset-block-end: var(--wp--preset--spacing--small);
	inset-inline-end: var(--wp--preset--spacing--small);
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75em;
	block-size: 2.75em;
	border-radius: 999px;
	border: solid 1px var(--wp--preset--color--border-light);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--main);
	box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
	cursor: pointer;

	&:hover {
		background-color: var(--wp--preset--color--tertiary);
	}
}

.ollie-theme-toggle-icon {
	inline-size: 1.2em;
	block-size: 1.2em;
}

.ollie-theme-toggle-icon--moon {
	display: none;
}

:root[data-theme="dark"] {
	.ollie-theme-toggle-icon--sun {
		display: none;
	}

	.ollie-theme-toggle-icon--moon {
		display: block;
	}
}

a {
	text-decoration-thickness: 0.1rem;
}

/* Standardize form styling
--------------------------------------------- */

input,
button,
textarea,
select {
	font: inherit;
}

input[type="button"],
input[type="email"],
input[type="search"],
input[type="submit"],
input[type="text"],
textarea {
	-webkit-appearance: none;
	appearance: none;
}

input:not([type="submit"]):not([type="radio"]),
select,
textarea,
.wp-block-post-comments-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.wp-block-post-comments-form textarea {
	color: var(--wp--preset--color--main);
	border-radius: 5px;
	border: solid 1px color-mix(in srgb, var(--wp--preset--color--tertiary) 100%, var(--wp--preset--color--main) 20%);
	padding: .5em 1em;
	font-size: var(--wp--preset--font-size--small);
	background-color: var(--wp--preset--color--base);
	box-shadow:
		0 1px 2px rgb(0 0 0 / 2%),
		0 0.5px 1px rgb(0 0 0 / 4%);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline-color: var(--wp--preset--color--main);
	outline-offset: 1px;
}

input[type="checkbox"],
input[type="image"],
input[type="radio"] {
	width: auto;
}

select {
	-webkit-appearance: none;
	appearance: none;
	background: var(--wp--preset--color--base) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItY2hldnJvbi1kb3duIj48cG9seWxpbmUgcG9pbnRzPSI2IDkgMTIgMTUgMTggOSI+PC9wb2x5bGluZT48L3N2Zz4=) no-repeat;
	background-size: 16px;
	background-position: calc(100% - 12px) 50%;
	padding-inline-end: 2.2em;
}

label {
	width: 100%;
	display: block;
}

::placeholder {
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.75;
}

/* Helper styles
---------------------------------------------------------------------------- */

a.more-link {
	display: block;
}

/* Inline code */
*:not(.wp-block-code) > code {
	background-color: var(--wp--preset--color--tertiary);
	padding: 3px 5px;
	position: relative;
	border-radius: 3px;
}

.wp-block-categories {
	position: relative;
}

/* Remove margin on term description on archive pages */
.wp-block-term-description p:last-child {
	margin-block-end: 0;
}

/* Remove last separator on post list */
.remove-border-and-padding .wp-block-post-template li:last-child .wp-block-separator {
	display: none;
}

/* Hide post meta div if no tags assigned */
.single .wp-block-group:has(> .post-meta:empty) {
	display: none;
}

.wp-block-group:empty:has(+ .comment-respond) {
	display: none;
}

.row-logos > figure {
	flex-shrink: 1 !important;
}

/* Sticky header */

body:not(.wp-admin) header:has(>.is-position-sticky) {
	position: sticky;
	inset-block-start: calc(0px + var(--wp-admin--admin-bar--height, 0px));
	z-index: 100;
}

/* Account for admin bar on mobile */

@media (width <= 600px) {
	header:has(>.is-position-sticky) {
		inset-block-start: 0;
	}
}

/* Mobile helper classes */

@media (width <= 781px) {
	.ollie-hide-on-mobile {
		display: none;
	}

	.ollie-unstick-mobile {
		position: static;
	}

	header:has(>.ollie-unstick-mobile) {
		position: static;
	}
}

/* Table
--------------------------------------------- */

.wp-block-table table {
	background: var(--wp--preset--color--base);
	border-radius: 5px;
	border: solid 1px var(--wp--preset--color--border-light);
	font-size: var(--wp--preset--font-size--x-small);
}
.wp-block-table.is-style-stripes {
	border-block-end: none;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background-color: var(--wp--preset--color--tertiary);
}

.wp-block-table td,
.wp-block-table th,
.wp-block-table thead {
	border: none;
	border-block-end: solid 1px color-mix(in srgb, var(--wp--preset--color--border-light) 50%, var(--wp--preset--color--base) 5%);
}

.wp-block-table th,
.wp-block-table tfoot {
	text-align: start;
	background-color: color-mix(in srgb, var(--wp--preset--color--tertiary) 75%, var(--wp--preset--color--base) 5%);
}

.wp-block-table td,
.wp-block-table th {
	padding: .8em 1em;
}

.wp-block-table tfoot {
	border-block-start: solid 1px var(--wp--preset--color--border-light);
}

.wp-block-table tfoot td {
	border-block-end: none;
}

/* Table of Contents template
---------------------------------------------------------------------------- */

#ollie-toc {
	inset-block-start: var(--wp--preset--spacing--large);
	max-height: calc(100vh - var(--wp--preset--spacing--large) * 2);
	overflow-block: auto;
	overflow-inline: hidden;
}

#ollie-toc-content {
	:is(h2, h3, h4) {
		scroll-margin-block-start: var(--wp--preset--spacing--large);
	}

	:is(p, li) {
		line-height: 1.35;
	}

	li {
		margin-block-end: 0.25em;
	}
}

/* Account for the logged-in admin bar so sticky positioning and anchor jumps aren't hidden behind it. */
body.admin-bar {
	#ollie-toc {
		inset-block-start: calc(var(--wp--preset--spacing--large) + 32px);
	}

	#ollie-toc-content :is(h2, h3, h4) {
		scroll-margin-block-start: calc(var(--wp--preset--spacing--large) + 32px);
	}

	@media (width <= 782px) {
		#ollie-toc {
			inset-block-start: calc(var(--wp--preset--spacing--large) + 46px);
		}

		#ollie-toc-content :is(h2, h3, h4) {
			scroll-margin-block-start: calc(var(--wp--preset--spacing--large) + 46px);
		}
	}
}

.ollie-toc-list {
	list-style: none;
	margin: 0;
	padding-inline-start: 0;

	ul {
		list-style: none;
		margin: 0;
		padding-inline-start: var(--wp--preset--spacing--small);
	}

	a {
		display: block;
		padding-block: 0.1em;
		line-height: 1.3;
		text-decoration: none;
		color: currentColor;
		border-inline-start: 2px solid transparent;
		padding-inline-start: 0.75em;

		&.is-active {
			text-shadow: 0 0 0.6px currentColor, 0 0 0.6px currentColor;
		}
	}
}

/*
 * A single sliding indicator that tracks the active link's position/height
 * (set inline by table-of-contents.js) instead of each link drawing its own
 * static border, so the highlight visibly glides between items.
 *
 * Deliberately physical (top/left/width), not logical inset/inline-size:
 * the script positions this via getBoundingClientRect(), which is always
 * viewport-physical, and the translate() it computes must stay in that same
 * physical coordinate space to line up correctly in RTL too.
 */
.ollie-toc-marker {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	width: 2px;
	background-color: currentColor;
	opacity: 0;
	pointer-events: none;

	@media (prefers-reduced-motion: no-preference) {
		transition: transform 0.25s ease, height 0.25s ease, opacity 0.15s ease;
	}
}

@media (prefers-reduced-motion: no-preference) {
	html:has(#ollie-toc) {
		scroll-behavior: smooth;
	}
}

/* Reading progress bar
---------------------------------------------------------------------------- */

.ollie-toc-progress {
	/* Physical top/left to match .ollie-toc-marker's coordinate space (see above). */
	position: absolute;
	top: 0;
	left: 0;
	inline-size: 100%;
	block-size: 2px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	opacity: 0.35;
	pointer-events: none;

	@media (prefers-reduced-motion: no-preference) {
		transition: transform 0.2s ease;
	}
}

/* Mobile collapsible drawer
---------------------------------------------------------------------------- */

.ollie-toc-toggle {
	display: none;
}

.ollie-toc-list-wrapper {
	display: grid;
	grid-template-rows: 1fr;
}

.ollie-toc-list-inner {
	overflow: hidden;
	min-block-size: 0;
}

@media (width <= 781px) {
	#ollie-toc > .wp-block-heading {
		display: none;
	}

	.ollie-toc-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--small);
		inline-size: 100%;
		margin: 0;
		padding: 0.5em 0;
		background: none;
		border: none;
		font-size: inherit;
		font-family: inherit;
		color: currentColor;
		text-align: start;
		cursor: pointer;

		&::after {
			content: "";
			flex-shrink: 0;
			inline-size: 0.5em;
			block-size: 0.5em;
			border-inline-end: 2px solid currentColor;
			border-block-end: 2px solid currentColor;
			transform: rotate(45deg);

			@media (prefers-reduced-motion: no-preference) {
				transition: transform 0.2s ease;
			}
		}

		&[aria-expanded="true"]::after {
			transform: rotate(-135deg);
		}
	}

	.ollie-toc-list-wrapper {
		grid-template-rows: 0fr;

		&.is-expanded {
			grid-template-rows: 1fr;
		}

		@media (prefers-reduced-motion: no-preference) {
			transition: grid-template-rows 0.25s ease;
		}
	}
}