/*
Theme Name: WordCountOfficial
Theme URI: https://wordcountofficial.com
Author: WordCountOfficial
Description: A fast, plain theme for WordCountOfficial.com. Mobile-first, no external fonts or libraries. Works with the WCO Tools plugin for the word counter, contact form and ad slots.
Version: 1.1.1
Requires at least: 6.3
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wordcountofficial
*/

:root {
	--ink: var(--wp--preset--color--ink, #1a1f2b);
	--muted: var(--wp--preset--color--muted, #4b5563);
	--primary: var(--wp--preset--color--primary, #0a4fd6);
	--surface: var(--wp--preset--color--surface, #f4f6fa);
	--line: var(--wp--preset--color--line, #d9dee7);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0; color: var(--ink); background: #fff;
	font-family: var(--wp--preset--font-family--system, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
	font-size: 1rem; line-height: 1.65; overflow-wrap: break-word;
}
img, video, iframe { max-width: 100%; height: auto; }
a { color: var(--primary); text-underline-offset: .15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
h1, h2, h3, h4 { line-height: 1.25; margin: 1.75em 0 .6em; }
h1 { font-size: 1.75rem; margin-top: 0; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.2rem; }
p, ul, ol, table, pre, blockquote { margin: 0 0 1.25rem; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link:focus {
	position: fixed !important; top: .5rem; left: .5rem; z-index: 100; width: auto; height: auto; margin: 0; padding: .75rem 1rem;
	clip: auto; clip-path: none; background: #fff; color: var(--ink); border: 2px solid var(--primary); border-radius: 6px;
}

.wrap { width: 100%; max-width: 70rem; margin: 0 auto; padding: 0 1rem; }
.wrap--narrow { max-width: 48rem; }
.site-main { padding: 1.5rem 0 3rem; min-height: 60vh; }

/* Header and navigation */
.site-header { border-bottom: 1px solid var(--line); background: #fff; }
.site-header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding-top: .75rem; padding-bottom: .75rem; }
.site-brand { display: flex; align-items: center; gap: .75rem; }
.site-brand img { max-height: 44px; width: auto; }
.site-title { font-size: 1.25rem; font-weight: 700; color: var(--ink); text-decoration: none; }
.nav-toggle { display: none; font: inherit; font-weight: 600; min-height: 44px; padding: .4rem 1rem; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.nav-ready .nav-toggle { display: inline-block; }
.site-nav { flex-basis: 100%; }
.nav-ready .site-nav { display: none; }
.nav-ready .site-nav.is-open { display: block; }
.menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.menu li { margin: 0; }
.menu a { display: block; padding: .65rem 0; color: var(--ink); text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--line); }
.menu a:hover, .menu a[aria-current="page"], .menu .current-menu-item > a { color: var(--primary); }
.menu .sub-menu { list-style: none; margin: 0; padding-left: 1rem; }

@media (min-width: 48rem) {
	.nav-ready .nav-toggle { display: none; }
	.site-nav, .nav-ready .site-nav { display: block; flex-basis: auto; }
	.menu { flex-direction: row; gap: 1.5rem; }
	.menu a { padding: .5rem 0; border-bottom: 0; }
	h1 { font-size: 2.25rem; }
	h2 { font-size: 1.6rem; }
}

/* Breadcrumbs */
.breadcrumbs { margin: 0 0 1.25rem; font-size: .9rem; color: var(--muted); }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem; }
.breadcrumbs li + li::before { content: "/"; margin-right: .25rem; }
.breadcrumbs a { color: var(--muted); }

/* Articles and pages */
.entry__title { margin: 0 0 .5rem; }
.entry__meta { margin: 0 0 1.5rem; font-size: .9rem; color: var(--muted); }
.entry__meta a { color: var(--muted); }
.entry__image { display: block; width: 100%; margin: 0 0 1.5rem; border-radius: 6px; }
.entry__content > :last-child { margin-bottom: 0; }
.entry__content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.entry__content th, .entry__content td { padding: .5rem .75rem; border: 1px solid var(--line); }
.entry__content pre { overflow-x: auto; padding: 1rem; background: var(--surface); border-radius: 6px; }
.entry__content blockquote { margin-left: 0; padding-left: 1rem; border-left: 4px solid var(--line); color: var(--muted); }
.entry__content .alignleft { float: left; margin: 0 1rem 1rem 0; }
.entry__content .alignright { float: right; margin: 0 0 1rem 1rem; }
.entry__content .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption, .wp-element-caption { font-size: .9rem; color: var(--muted); }
.wco-ad { margin: 1.5rem 0; min-height: 1px; }

.author-box { margin: 2.5rem 0 0; padding: 1rem 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.author-box__name { margin: 0 0 .5rem; font-size: 1.1rem; }
.author-box p:last-child { margin-bottom: 0; }

.related { margin-top: 3rem; }
.post-navigation { margin-top: 2rem; }
.post-navigation .nav-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }

/* Lists and cards */
.list-header { margin-bottom: 1.5rem; }
.list-desc { color: var(--muted); }
.card-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.card { padding: 1rem; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.card__image { display: block; margin: -1rem -1rem 1rem; }
.card__image img { display: block; width: 100%; border-radius: 6px 6px 0 0; }
.card__title { margin: 0 0 .25rem; font-size: 1.2rem; }
.card__title a { color: var(--ink); text-decoration: none; }
.card__title a:hover { color: var(--primary); text-decoration: underline; }
.card__meta { margin: 0 0 .5rem; font-size: .85rem; color: var(--muted); }
.card__excerpt p:last-child { margin-bottom: 0; }
@media (min-width: 40rem) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .card-grid { grid-template-columns: repeat(3, 1fr); } }

.pagination { margin-top: 2rem; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.pagination .page-numbers { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 .75rem; color: var(--ink); text-decoration: none; border: 1px solid var(--line); border-radius: 6px; }
.pagination .current { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Search form */
.search-form { display: flex; gap: .5rem; max-width: 28rem; margin: 0 0 1.25rem; }
.search-form__input { flex: 1; min-width: 0; min-height: 44px; padding: .5rem .75rem; font: inherit; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.search-form__button { min-height: 44px; padding: .5rem 1rem; font: inherit; font-weight: 600; color: #fff; background: var(--primary); border: 0; border-radius: 6px; cursor: pointer; }

/* Footer */
.site-footer { padding: 2rem 0; background: var(--surface); border-top: 1px solid var(--line); }
.footer-nav .menu { flex-direction: row; flex-wrap: wrap; gap: .25rem 1.25rem; margin-bottom: 1.25rem; }
.footer-nav .menu a { padding: .4rem 0; border-bottom: 0; font-weight: 400; }
.site-footer__note { margin: 0; font-size: .9rem; color: var(--muted); }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }