/*
Theme Name: Tooba Library
Theme URI: https://toobalibrary.com
Author: Tooba Library
Author URI: https://toobalibrary.com
Description: A fast, SEO-friendly, mobile-first custom block theme built for the Tooba Library blog (migrated from Blogger). No page builder, no jQuery, no external font dependency by default.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.6
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tooba-library
Tags: blog, custom-background, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, block-patterns, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.
*/

/* -----------------------------------------------------------
   Base / fallback styles.
   Most visual design lives in theme.json (block theme).
   This file covers things theme.json can't express:
   utility classes, TOC, cards, author box, related posts, etc.
------------------------------------------------------------ */

/* Skip link */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--wp--preset--color--primary, #2f4538);
	color: #fff;
	padding: .75em 1.25em;
	z-index: 100000;
	border-radius: 0 0 6px 0;
}
.skip-link:focus {
	left: 0;
}

/* Focus visibility (accessibility) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent, #c98a3e);
	outline-offset: 2px;
}

/* Touch targets */
a, button, input[type="submit"] {
	min-height: 44px;
}
.wp-block-navigation a {
	min-height: auto;
}

/* -------------------- Header -------------------- */
.site-header {
	border-bottom: 1px solid var(--wp--preset--color--border, #e4dfd6);
}
.site-header.is-sticky {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--wp--preset--color--background, #fdfbf7);
	backdrop-filter: saturate(1.1);
}
.menu-toggle {
	display: none;
	background: none;
	border: 2px solid currentColor;
	border-radius: 6px;
	padding: .5em .75em;
	cursor: pointer;
}
@media (max-width: 767px) {
	.menu-toggle { display: inline-flex; align-items: center; gap: .5em; }
	.primary-navigation { display: none; }
	.primary-navigation.is-open { display: block; }
}

/* -------------------- Post cards -------------------- */
.post-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--wp--preset--color--border, #e4dfd6);
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	transition: box-shadow .2s ease, transform .2s ease;
}
.post-card:hover,
.post-card:focus-within {
	box-shadow: 0 8px 24px rgba(20,20,20,.08);
	transform: translateY(-2px);
}
.post-card__media { aspect-ratio: 3 / 2; overflow: hidden; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card__body { padding: 1.1rem 1.25rem 1.4rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.post-card__category {
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-weight: 600;
	color: var(--wp--preset--color--primary, #2f4538);
}
.post-card__title { margin: 0; font-size: 1.15rem; line-height: 1.3; }
.post-card__title a { text-decoration: none; color: inherit; }
.post-card__excerpt { color: var(--wp--preset--color--muted, #6b6559); font-size: .95rem; }
.post-card__meta { font-size: .8rem; color: var(--wp--preset--color--muted, #6b6559); display: flex; gap: .75rem; flex-wrap: wrap; }

.post-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
}
@media (max-width: 991px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .post-grid { grid-template-columns: 1fr; } }

/* -------------------- Table of contents -------------------- */
.toc-box {
	border: 1px solid var(--wp--preset--color--border, #e4dfd6);
	background: var(--wp--preset--color--surface, #f7f4ee);
	border-radius: 10px;
	padding: 1rem 1.25rem;
	margin: 1.5rem 0 2rem;
}
.toc-box summary {
	cursor: pointer;
	font-weight: 700;
	list-style: none;
}
.toc-box summary::-webkit-details-marker { display: none; }
.toc-box summary::after {
	content: "▾";
	float: right;
	transition: transform .2s ease;
}
.toc-box[open] summary::after { transform: rotate(180deg); }
.toc-box ol { margin: .75rem 0 0; padding-left: 1.25rem; }
.toc-box ol ol { padding-left: 1.1rem; margin-top: .25rem; }
.toc-box a { text-decoration: none; }
.toc-box a:hover { text-decoration: underline; }

/* -------------------- Post meta / reading time -------------------- */
.post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem .9rem;
	font-size: .9rem;
	color: var(--wp--preset--color--muted, #6b6559);
	margin: .5rem 0 1.25rem;
}
.post-meta__updated { font-style: italic; }

/* -------------------- Author box -------------------- */
.author-box {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	border: 1px solid var(--wp--preset--color--border, #e4dfd6);
	border-radius: 10px;
	padding: 1.25rem;
	margin: 2.5rem 0;
	background: var(--wp--preset--color--surface, #f7f4ee);
}
.author-box img { border-radius: 50%; width: 64px; height: 64px; flex-shrink: 0; }
.author-box h3 { margin: 0 0 .25rem; font-size: 1.05rem; }
.author-box .author-social { display: flex; gap: .6rem; margin-top: .5rem; }

/* -------------------- Related posts -------------------- */
.related-posts h2 { margin-bottom: 1rem; }

/* -------------------- Post navigation -------------------- */
.post-navigation {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 2.5rem 0;
	border-top: 1px solid var(--wp--preset--color--border, #e4dfd6);
	padding-top: 1.5rem;
}
.post-navigation a { text-decoration: none; max-width: 48%; }
.post-navigation span { display: block; font-size: .8rem; color: var(--wp--preset--color--muted, #6b6559); }

/* -------------------- Share buttons (no external JS) -------------------- */
.share-buttons { display: flex; gap: .6rem; flex-wrap: wrap; margin: 1.5rem 0; }
.share-buttons a {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	padding: .5em .9em;
	border: 1px solid var(--wp--preset--color--border, #e4dfd6);
	border-radius: 6px;
	text-decoration: none;
	font-size: .85rem;
}

/* -------------------- Pagination -------------------- */
.pagination {
	display: flex;
	gap: .4rem;
	justify-content: center;
	margin: 2.5rem 0;
	flex-wrap: wrap;
}
.pagination a, .pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	border-radius: 6px;
	border: 1px solid var(--wp--preset--color--border, #e4dfd6);
	text-decoration: none;
}
.pagination .current {
	background: var(--wp--preset--color--primary, #2f4538);
	color: #fff;
	border-color: var(--wp--preset--color--primary, #2f4538);
}

/* -------------------- Back to top -------------------- */
.back-to-top {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary, #2f4538);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease;
	z-index: 50;
}
.back-to-top.is-visible { opacity: 1; pointer-events: auto; }

/* -------------------- Breadcrumbs -------------------- */
.breadcrumbs { font-size: .85rem; color: var(--wp--preset--color--muted, #6b6559); margin-bottom: 1rem; }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }

/* -------------------- Newsletter CTA -------------------- */
.newsletter-cta {
	background: var(--wp--preset--color--primary, #2f4538);
	color: #fff;
	border-radius: 12px;
	padding: 2.5rem;
	text-align: center;
}
.newsletter-cta h2 { color: #fff; }

/* -------------------- Responsive tables & embeds -------------------- */
.wp-block-table { overflow-x: auto; display: block; }
.wp-block-embed iframe { max-width: 100%; }

/* -------------------- Utility -------------------- */
.screen-reader-text {
	border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute; width: 1px; word-wrap: normal;
}