/**
 * weblogg-ed: WordPress-specific overrides + skip-link + sr-only.
 *
 * The bulk of the design lives in design.css. This file adds rules the
 * React/Tailwind source didn't cover (skip link, prose, comment list) and
 * strong resets against GeneratePress parent-theme defaults that would
 * otherwise leak through (link underlines, button pills, list bullets,
 * heading colors, paragraph margins).
 */

/* ============================================================
 * GeneratePress parent-theme overrides
 *
 * GP applies link underlines, button backgrounds, and heading colors with
 * higher selector specificity than Tailwind utility classes can match. We
 * scope every reset under `.weblogged-body` so we never disturb the WP admin
 * bar or other plugin-injected UI.
 * ============================================================ */

/* Strip GP/browser link underlines from chrome (header, footer, cards, nav).
   Prose links re-add their own underline below. */
.weblogged-body header a,
.weblogged-body footer a,
.weblogged-body main a,
.weblogged-body nav a {
	text-decoration: none;
	box-shadow: none;
	color: inherit;
}
.weblogged-body header a:hover,
.weblogged-body footer a:hover,
.weblogged-body main a:hover,
.weblogged-body nav a:hover {
	text-decoration: none;
}

/* GP underlines headings inside links via .entry-title styling. Kill it. */
.weblogged-body h1 a,
.weblogged-body h2 a,
.weblogged-body h3 a,
.weblogged-body h4 a,
.weblogged-body a h1,
.weblogged-body a h2,
.weblogged-body a h3,
.weblogged-body a h4 {
	text-decoration: none;
	color: inherit;
}

/* GP gives every <button> a dark background pill, default padding, default
   font-weight. Reset only the visual decoration — leave padding/margin/font
   alone so Tailwind utilities (px-6, py-3, etc.) and inline styles win.
   Wrapped in :where() for zero specificity so any utility class beats us. */
:where(.weblogged-body button) {
	background: transparent;
	border: 0;
	color: inherit;
	font-family: inherit;
	font-weight: inherit;
	cursor: pointer;
	border-radius: 0;
	box-shadow: none;
	min-height: 0;
	-webkit-appearance: none;
	appearance: none;
}
:where(.weblogged-body button:hover, .weblogged-body button:focus) {
	background: transparent;
	color: inherit;
	box-shadow: none;
}

/* GP adds list bullets and indents to every <ul>. Our nav menus and card grids
   use <ul> as a layout container — strip the visual list styling. */
.weblogged-body header ul,
.weblogged-body footer ul,
.weblogged-body nav ul,
.weblogged-body .weblogged-topics-panel + ul,
.weblogged-body .weblogged-mobile-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* GP renders nav items with their own padding/border/separator. Disable. */
.weblogged-body nav li {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

/* GP injects a default body font. Force ours so the parent stylesheet
   loading order can't override the masthead/body typography. */
.weblogged-body {
	font-family: var(--font-serif);
	font-weight: 400;
	background-color: #FAFAF7;
	color: #1A1A2E;
}

/* Headings used to wear browser-default font-weight: bold (700). The design
   uses 600 throughout. Set the baseline so any heading without an explicit
   inline weight gets the right value. Inline `font-weight:600` still wins. */
.weblogged-body h1,
.weblogged-body h2,
.weblogged-body h3,
.weblogged-body h4,
.weblogged-body h5,
.weblogged-body h6 {
	font-weight: 600;
}

/* GP's site container wraps everything in .site / #page with its own padding
   and max-width. Neutralise so our own max-w-7xl wrappers control width. */
.weblogged-body .site,
.weblogged-body #page,
.weblogged-body .site-content,
.weblogged-body .container,
.weblogged-body .grid-container {
	max-width: none;
	padding: 0;
	margin: 0;
}

/* GP injects a default site header above ours when the "Disable Primary
   Navigation" customizer toggle is missed. Hide it defensively. */
.weblogged-body .site-header:not(:first-of-type),
.weblogged-body .main-navigation:not(.weblogged-keep) {
	display: none !important;
}

/* GP styles the search button with a colored background. Our forms use
   styled <button> elements — make sure their inline bg wins. */
.weblogged-body input[type="search"] {
	background: #ffffff;
	color: #1A1A2E;
}

/* GP applies max-width and centering to every `.entry-content`. Our prose
   wrapper handles its own measure. */
.weblogged-body .entry-content,
.weblogged-body .entry-summary {
	max-width: none;
	margin: 0;
}

/* ----- Skip link (visually hidden until focused) -------------------------- */
.screen-reader-text,
.sr-only {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}
.screen-reader-text:focus,
.sr-only:focus,
.skip-link:focus {
	background-color: #1A1A2E;
	border-radius: 0;
	box-shadow: 0 0 2px 2px rgba(177, 74, 62, 0.6);
	clip: auto !important;
	-webkit-clip-path: none;
	clip-path: none;
	color: #FAFAF7;
	display: block;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.875rem;
	font-weight: 600;
	height: auto;
	left: 1rem;
	letter-spacing: 0.05em;
	line-height: 1;
	padding: 0.75rem 1rem;
	position: absolute;
	text-decoration: none;
	text-transform: uppercase;
	top: 1rem;
	width: auto;
	z-index: 100000;
}

/* ----- Admin bar offset --------------------------------------------------- */
.admin-bar header.sticky {
	top: 32px;
}
@media (max-width: 782px) {
	.admin-bar header.sticky {
		top: 46px;
	}
}

/* ----- Topics dropdown / mobile-nav open states -------------------------- */
.weblogged-topics-panel {
	display: none;
	z-index: 60;  /* above sticky header (z-50) */
}
.weblogged-topics-panel.is-open { display: block; }

/* JS-disabled (or pre-JS) fallback: open on hover or keyboard focus anywhere
   inside the wrapper. The wrapper uses padding-top inside the panel so the
   cursor never leaves the hit area on its way to the items. */
.weblogged-body .weblogged-topics-wrap:hover .weblogged-topics-panel,
.weblogged-body .weblogged-topics-wrap:focus-within .weblogged-topics-panel {
	display: block;
}

.weblogged-mobile-nav { display: none; }
.weblogged-mobile-nav.is-open { display: block; }
@media (min-width: 768px) {
	.weblogged-mobile-nav,
	.weblogged-mobile-nav.is-open { display: none; }
}

/* JS-disabled fallback for mobile nav: a <details> wrapper would be nicer,
   but keeping consistent markup, unhide when the toggle has focus or active. */
.weblogged-body [data-mobile-toggle]:focus + .weblogged-mobile-nav,
.weblogged-body [data-mobile-toggle][aria-expanded="true"] + .weblogged-mobile-nav {
	display: block;
}

/* ----- Pagination links --------------------------------------------------- */
.weblogged-page-link a,
.weblogged-page-link span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	padding: 0.5rem 1rem;
	border: 1px solid rgba(26, 26, 46, 0.2);
	color: #1A1A2E;
	text-decoration: none;
	transition: background-color 0.2s;
}
.weblogged-page-link a:hover {
	background-color: #F2EFEA;
}
.weblogged-page-link .current {
	background-color: #1A1A2E;
	color: #FAFAF7;
	border-color: #1A1A2E;
}

/* ----- Post-body prose ---------------------------------------------------- */
.weblogged-prose p {
	margin: 0 0 1.5rem;
}
/* Drop cap only on single posts, never on Pages (About / Privacy / Contact /
   Newsletter etc., which use `.weblogged-prose.weblogged-page-prose`). */
.weblogged-prose:not(.weblogged-page-prose) p:first-of-type::first-letter {
	float: left;
	font-size: 4rem;
	line-height: 1;
	margin: 0.25rem 0.5rem 0 0;
	font-weight: 600;
}
.weblogged-prose h2 {
	margin: 2.5rem 0 1rem;
	font-size: 1.75rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}
.weblogged-prose h3 {
	margin: 2rem 0 0.75rem;
	font-size: 1.375rem;
	font-weight: 600;
}
.weblogged-prose blockquote {
	margin: 2.5rem 0;
	padding: 1.5rem 0;
	border-top: 2px solid #B14A3E;
	border-bottom: 2px solid #B14A3E;
	font-size: 1.5rem;
	font-style: italic;
	font-weight: 300;
	line-height: 1.4;
	text-align: center;
}
.weblogged-prose ul,
.weblogged-prose ol {
	margin: 0 0 1.5rem 1.5rem;
}
.weblogged-prose li {
	margin: 0 0 0.5rem;
}
.weblogged-prose a {
	color: #1A1A2E;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}
.weblogged-prose a:hover {
	color: #B14A3E;
}
.weblogged-prose figure {
	margin: 2rem 0;
}
.weblogged-prose figure img {
	max-width: 100%;
	height: auto;
}
.weblogged-prose figcaption {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	font-style: italic;
	color: #5A5A60;
}
.weblogged-prose code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.9em;
	background: #F2EFEA;
	padding: 0.1em 0.35em;
}
.weblogged-prose pre {
	background: #F2EFEA;
	padding: 1rem;
	overflow-x: auto;
	margin: 1.5rem 0;
}

/* ----- Native WP block alignment within prose ---------------------------- */
.weblogged-prose .alignwide,
.weblogged-prose .alignfull {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 100vw;
}
.weblogged-prose .alignfull img {
	width: 100%;
}

/* ----- Form-element resets ----------------------------------------------- */
button {
	cursor: pointer;
	background: none;
	border: 0;
	font: inherit;
	color: inherit;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
}