/*!
Theme Name: gopetr-classic
Theme URI: https://svahabyte.com/gopetr
Author: Svahabyte
Author URI: https://svahabyte.com
Description: Classic (PHP template) edition of the gopetr magazine theme for pet owners — dog & cat news, how-tos and care guides. Warm cream/terracotta design, no block editor templates.
Version: 1.8.2
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: gopetr
Tags: blog, news, two-columns, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

@font-face { font-family: "Lora"; src: url("fonts/lora-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lora"; src: url("fonts/lora-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lora"; src: url("fonts/lora-400italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
	--g-base: #fdfaf5;
	--g-contrast: #211d17;
	--g-secondary: #6b6258;
	--g-border: #eadfd2;
	--g-subtle: #f7f0e6;
	--g-accent: #b4531c;
	--g-accent-dark: #8f3f12;
	--g-radius: 10px;
	--g-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
	--g-font-serif: "Lora", Georgia, "Times New Roman", serif;
	--g-fs-sm: 0.875rem;
	--g-fs-md: 1.0625rem;
	--g-fs-lg: clamp(1.25rem, 1rem + 1vw, 1.5rem);
	--g-fs-xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem);
	--g-fs-xxl: clamp(2.25rem, 1.6rem + 2.5vw, 3.5rem);
	--g-s1: 0.5rem;
	--g-s2: 1rem;
	--g-s3: 1.5rem;
	--g-s4: 2.5rem;
	--g-s5: 4rem;
	--g-s6: 6rem;
	--g-s7: 8rem;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--g-base); color: var(--g-contrast); font-family: var(--g-font); font-size: var(--g-fs-md); line-height: 1.7; }
img { max-width: 100%; height: auto; }
a { color: var(--g-contrast); text-decoration: underline; transition: color 0.15s ease, background-color 0.15s ease; }
a:hover { color: var(--g-secondary); text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--g-font-serif); font-weight: 700; line-height: 1.25; letter-spacing: 0; margin: 0 0 var(--g-s2); }
h1 { font-size: var(--g-fs-xxl); }
h2 { font-size: var(--g-fs-xl); }
h3 { font-size: var(--g-fs-lg); }
p { margin: 0 0 var(--g-s2); }
main { margin-top: var(--g-s4); }
hr, .wp-block-separator { border: 0; border-top: 1px solid var(--g-border); margin: var(--g-s5) 0; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.has-text-align-center { text-align: center; }

.container { max-width: 720px; margin-inline: auto; padding-inline: var(--g-s3); }
.container-wide { max-width: 1140px; margin-inline: auto; padding-inline: var(--g-s3); }

.button, .wp-element-button { display: inline-block; background: var(--g-accent); color: #fff; border: 0; border-radius: var(--g-radius); padding: 0.75rem 1.5rem; font-size: var(--g-fs-sm); font-weight: 500; text-decoration: none; cursor: pointer; }
.button:hover, .wp-element-button:hover { background: var(--g-accent-dark); color: #fff; }

/* ---- Header: topbar / brand row / nav bar ---- */
.site-header { border-bottom: 0; }
.site-topbar { background: var(--g-contrast); color: var(--g-base); font-size: var(--g-fs-sm); }
.site-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--g-s2); padding-block: 0.45rem; }
.site-topbar a { color: var(--g-base); text-decoration: none; }
.site-topbar a:hover { color: #fff; text-decoration: underline; }
.site-topbar__account { display: flex; align-items: center; gap: var(--g-s2); }
.site-brand-row { display: flex; align-items: center; justify-content: space-between; gap: var(--g-s3); padding-block: var(--g-s3); }
.site-brand { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.site-brand a { text-decoration: none; color: var(--g-contrast); font-weight: 700; font-size: var(--g-fs-lg); font-family: var(--g-font-serif); }
.site-brand .custom-logo-link { display: inline-block; line-height: 0; }
.site-brand img.custom-logo { max-height: 72px; width: auto; height: auto; }
.site-brand-row__ad { flex: 0 1 728px; min-width: 0; }
@media (max-width: 900px) {
	.site-brand-row__ad { display: none; }
	.site-brand-row { justify-content: center; }
	.site-brand img.custom-logo { max-height: 80px; }
}
.site-navbar { border-top: 1px solid var(--g-border); border-bottom: 1px solid var(--g-border); }
.site-navbar__inner { display: flex; align-items: center; gap: var(--g-s3); }
.site-nav__list { list-style: none; display: flex; gap: var(--g-s3); margin: 0; padding: 0; align-items: center; }
.site-nav__list a { display: inline-block; text-decoration: none; font-size: var(--g-fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.85rem 0; border-bottom: 2px solid transparent; }
.site-nav__list a:hover { color: var(--g-accent); border-bottom-color: var(--g-accent); }
.site-nav__list .current-menu-item > a, .site-nav__list .current_page_item > a { color: var(--g-accent); border-bottom-color: var(--g-accent); }
/* ---- Submenus (dropdown on desktop) ---- */
.site-nav__list .menu-item-has-children { position: relative; }
.site-nav__list .menu-item-has-children > a::after { content: ""; display: inline-block; width: 0.4em; height: 0.4em; margin-left: 0.4em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-0.15em); vertical-align: middle; }
.site-nav__list .sub-menu { list-style: none; margin: 0; padding: var(--g-s1) 0; position: absolute; top: 100%; left: 0; min-width: 210px; background: var(--g-base); border: 1px solid var(--g-border); border-radius: var(--g-radius); box-shadow: 0 8px 24px rgba(33, 29, 23, 0.1); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s; z-index: 60; }
.site-nav__list .menu-item-has-children:hover > .sub-menu, .site-nav__list .menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.site-nav__list .sub-menu li { display: block; }
.site-nav__list .sub-menu a { display: block; padding: 0.5rem var(--g-s2); font-size: var(--g-fs-sm); font-weight: 500; text-transform: none; letter-spacing: 0; border-bottom: 0; white-space: nowrap; }
.site-nav__list .sub-menu a:hover { color: var(--g-accent); background: var(--g-subtle); border-bottom: 0; }
.site-nav__list .sub-menu .menu-item-has-children > a::after { transform: rotate(-45deg) translateX(0.1em); }
.site-nav__list .sub-menu .sub-menu { top: -1px; left: 100%; }
.g-search { margin-left: auto; position: relative; }
.g-search summary { list-style: none; cursor: pointer; display: inline-flex; padding: 0.6rem 0; line-height: 0; }
.g-search summary::-webkit-details-marker { display: none; }
.g-search svg { width: 18px; height: 18px; fill: none; stroke: var(--g-contrast); stroke-width: 2; stroke-linecap: round; }
.g-search[open] svg, .g-search summary:hover svg { stroke: var(--g-accent); }
.g-search__panel { position: absolute; right: 0; top: 100%; background: var(--g-base); border: 1px solid var(--g-border); border-radius: var(--g-radius); padding: var(--g-s2); box-shadow: 0 8px 24px rgba(33, 29, 23, 0.08); z-index: 50; width: min(320px, 80vw); }
.g-search .search-form { margin: 0; max-width: none; }
.g-nav-burger, .g-nav-close { display: none; }
/* Checkbox stays in the focus order (keyboard-operable) but visually hidden. */
.g-nav-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
@media (min-width: 782px) { .g-nav-toggle { display: none; } }
@media (max-width: 781px) {
	.g-nav-burger { display: inline-flex; align-items: center; cursor: pointer; padding: 0.6rem 0; line-height: 0; }
	.g-nav-burger svg { width: 24px; height: 24px; fill: none; stroke: var(--g-contrast); stroke-width: 2.5; stroke-linecap: round; }
	.g-nav-burger:hover svg { stroke: var(--g-accent); }
	.site-nav { position: fixed; inset: 0; background: var(--g-base); padding: var(--g-s7) var(--g-s4) var(--g-s5); overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateX(-100%); visibility: hidden; pointer-events: none; transition: transform 0.2s ease, visibility 0.2s ease; z-index: 99998; }
	.g-nav-toggle:checked ~ .site-nav { transform: translateX(0); visibility: visible; pointer-events: auto; }
	.g-nav-close { display: inline-flex; position: absolute; top: var(--g-s3); right: var(--g-s3); font-size: 1.75rem; cursor: pointer; }
	.site-nav__list { flex-direction: column; align-items: flex-start; gap: var(--g-s2); }
	.site-nav__list a { font-size: var(--g-fs-lg); padding: 0.2rem 0; border-bottom: 0; }
	/* Submenus: static, indented; collapsed until the parent is tapped open (JS toggles .is-open). */
	.site-nav__list .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: none; border: 0; border-left: 2px solid var(--g-border); border-radius: 0; min-width: 0; margin: var(--g-s1) 0 var(--g-s1) var(--g-s1); padding: 0 0 0 var(--g-s2); display: none; flex-direction: column; gap: var(--g-s2); }
	.site-nav__list .menu-item-has-children.is-open > .sub-menu { display: flex; }
	.site-nav__list .sub-menu a { font-size: var(--g-fs-md); padding: 0.2rem 0; white-space: normal; }
	.site-nav__list .menu-item-has-children > a::after { transition: transform 0.15s ease; }
	.site-nav__list .menu-item-has-children.is-open > a::after { transform: rotate(-135deg) translateY(0.05em); }
	/* Search panel: full-width strip anchored to the nav bar. */
	.site-navbar { position: relative; }
	.g-search { position: static; }
	.g-search__panel { left: 0; right: 0; top: 100%; width: auto; border-radius: 0; border-left: 0; border-right: 0; }
}

/* ---- Footer ---- */
.site-footer { border-top: 1px solid var(--g-border); margin-top: var(--g-s6); padding: var(--g-s5) 0; }
.site-footer__inner { display: flex; flex-direction: column; align-items: center; gap: var(--g-s2); text-align: center; }
.site-footer__title { display: inline-flex; line-height: 0; font-weight: 700; font-size: var(--g-fs-lg); text-decoration: none; color: var(--g-contrast); font-family: var(--g-font-serif); }
.site-footer__logo { height: 52px; width: auto; }
.site-footer__nav { list-style: none; display: flex; gap: var(--g-s3); margin: 0; padding: 0; flex-wrap: wrap; justify-content: center; }
.site-footer__nav a { font-size: var(--g-fs-sm); text-decoration: none; }
.site-footer__copy { font-size: var(--g-fs-sm); color: var(--g-secondary); margin: 0; }

/* ---- Post grid + card ---- */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g-s5) var(--g-s4); }
@media (max-width: 781px) { .post-grid { grid-template-columns: 1fr 1fr; } }
/* Phones: compact horizontal list rows instead of stacked full-width cards. */
@media (max-width: 480px) {
	.post-grid { grid-template-columns: 1fr; gap: var(--g-s3); }
	.card { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: min-content min-content min-content; align-content: center; column-gap: var(--g-s2); row-gap: 0.15rem; }
	.card__media { grid-row: 1 / 4; aspect-ratio: 1 / 1; margin-bottom: 0; border-radius: 8px; align-self: center; }
	.card__cat, .card__title, .card__date { grid-column: 2; }
	.card:not(:has(.card__media)) { grid-template-columns: 1fr; }
	.card:not(:has(.card__media)) .card__cat,
	.card:not(:has(.card__media)) .card__title,
	.card:not(:has(.card__media)) .card__date { grid-column: 1; }
	.card__cat { font-size: 0.65rem; }
	.card__title { font-size: 1.05rem; margin: 0; }
	.card__title a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
	.card__date { font-size: 0.78rem; }
}
.card { min-width: 0; }
.card__media { display: block; margin-bottom: var(--g-s2); overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--g-radius); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.card:hover .card__media img { transform: scale(1.03); }
.card__cat { font-size: var(--g-fs-sm); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; color: var(--g-accent); margin: 0; }
.card__cat a { color: inherit; text-decoration: none; }
.card__cat a:hover { text-decoration: underline; }
.card__title { font-size: var(--g-fs-lg); font-weight: 700; line-height: 1.2; margin: var(--g-s1) 0; }
.card__title a { text-decoration: none; color: var(--g-contrast); }
.card__title a:hover { text-decoration: underline; }
.card__date { font-size: var(--g-fs-sm); color: var(--g-secondary); margin: 0; }

/* ---- Pagination ---- */
.pagination { margin-top: var(--g-s6); display: flex; justify-content: center; }
.pagination .nav-links { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.page-numbers { display: inline-block; padding: 0.5rem 0.9rem; border: 1px solid var(--g-border); text-decoration: none; font-size: var(--g-fs-sm); border-radius: 6px; }
.page-numbers.current { background: var(--g-accent); color: #fff; border-color: var(--g-accent); }
.page-numbers:not(.current):hover { background: var(--g-subtle); }

/* ---- Search form ---- */
.search-form { display: flex; max-width: 420px; margin: var(--g-s3) auto 0; }
.search-field { flex: 1; padding: 0.65rem 0.75rem; border: 1px solid var(--g-border); border-right: 0; font-size: var(--g-fs-md); border-radius: var(--g-radius) 0 0 var(--g-radius); }
.search-submit { border: 0; background: var(--g-accent); color: #fff; padding: 0 1.25rem; font-size: var(--g-fs-sm); cursor: pointer; border-radius: 0 var(--g-radius) var(--g-radius) 0; }
.search-submit:hover { background: var(--g-accent-dark); }

/* ---- Archive / page headers ---- */
.archive-header { text-align: left; margin-bottom: var(--g-s5); }
.archive-title { display: flex; flex-direction: column; gap: 0.15rem; font-size: var(--g-fs-xl); }
.archive-eyebrow { font-size: var(--g-fs-sm); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; color: var(--g-accent); }
.archive-name { font-family: var(--g-font-serif); }
.archive-desc { color: var(--g-secondary); margin-top: var(--g-s2); max-width: 70ch; }
.single-page__title { text-align: center; margin-bottom: var(--g-s4); }
/* --------------------------------------------------------------
   Hero mosaic (bento featured area)
   -------------------------------------------------------------- */
/* Outer: two query loops side by side (big | the three smaller). */
.gopetr-hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--g-s2);
	height: 600px;
}
.gopetr-hero > .wp-block-query {
	height: 100%;
	min-width: 0;
	margin: 0;
}

/* Reset the post-template lists. */
.gopetr-hero__main,
.gopetr-hero__rest {
	margin: 0;
	padding: 0;
	height: 100%;
	list-style: none;
}
.gopetr-hero__main {
	display: block;
}
.gopetr-hero__main > li {
	margin: 0;
	height: 100%;
	overflow: hidden;
}

/* The three smaller cards: one wide on top, two below. */
.gopetr-hero__rest {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	grid-template-areas:
		"b b"
		"c d";
	gap: var(--g-s2);
}
.gopetr-hero__rest > li {
	margin: 0;
	min-width: 0;
	overflow: hidden;
}
.gopetr-hero__rest > li:nth-child(1) { grid-area: b; }
.gopetr-hero__rest > li:nth-child(2) { grid-area: c; }
.gopetr-hero__rest > li:nth-child(3) { grid-area: d; }

/* Cover fills its cell. */
.gopetr-hero .wp-block-cover {
	height: 100%;
	min-height: 100%;
	border-radius: var(--g-radius);
}
.gopetr-hero .wp-block-cover__image-background {
	transition: transform 0.5s ease;
}
.gopetr-hero .wp-block-cover:hover .wp-block-cover__image-background {
	transform: scale(1.04);
}

/* Make the whole card clickable: dedicated overlay link below the text layer
   (inner-container sits at z-index 2, so title and badge stay clickable). */
.gopetr-hero__card-link {
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Category badge pill — kept above the stretched link so it stays clickable. */
.gopetr-hero__badge {
	position: relative;
	z-index: 2;
	display: inline-block;
	background-color: var(--g-accent);
	padding: 0.25em 0.6em;
	font-size: 0.7rem !important;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 999px;
}
.gopetr-hero__badge,
.gopetr-hero__badge a {
	color: #fff !important;
	text-decoration: none;
}

/* Overlaid titles in white. */
.gopetr-hero .wp-block-post-title,
.gopetr-hero .wp-block-post-title a {
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	line-height: 1.2;
}
.gopetr-hero .wp-block-post-title a:hover {
	text-decoration: underline;
}
.gopetr-hero__main .wp-block-post-title {
	font-size: clamp(1.6rem, 3vw, 2.25rem);
}
.gopetr-hero__rest .wp-block-post-title {
	font-size: clamp(1rem, 1.6vw, 1.25rem);
}

/* Meta (author + date) appears only on the big card. */
.gopetr-hero__meta,
.gopetr-hero__meta * {
	color: rgba(255, 255, 255, 0.85) !important;
}

/* Mobile: big card on top, three smaller cards as a horizontal swipe row. */
@media (max-width: 781px) {
	.gopetr-hero {
		display: block;
		height: auto;
	}
	.gopetr-hero > .wp-block-query {
		height: auto;
	}
	.gopetr-hero__main > li {
		height: 340px;
	}
	.gopetr-hero__main .wp-block-post-title {
		font-size: 1.35rem;
	}
	.gopetr-hero__meta {
		font-size: var(--g-fs-sm);
	}
	.gopetr-hero__rest {
		display: flex;
		grid-template: none;
		flex-wrap: nowrap;
		gap: var(--g-s2);
		margin-top: var(--g-s2);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		cursor: grab;
		scrollbar-width: none; /* Firefox */
	}
	.gopetr-hero__rest::-webkit-scrollbar {
		display: none; /* WebKit */
	}
	.gopetr-hero__rest.is-dragging {
		cursor: grabbing;
		scroll-snap-type: none;
	}
	.gopetr-hero__rest > li {
		grid-area: auto !important;
		flex: 0 0 78%;
		height: 200px;
		scroll-snap-align: start;
	}
	.gopetr-hero__rest .wp-block-cover {
		border-radius: var(--g-radius);
	}
}

/* ---- Hero: cover base (replaces core block CSS) ---- */
.gopetr-hero .wp-block-cover { position: relative; display: flex; align-items: flex-end; padding: var(--g-s3); overflow: hidden; background-color: var(--g-secondary); }
.gopetr-hero .wp-block-cover__image-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.gopetr-hero .wp-block-cover__background { position: absolute; inset: 0; z-index: 1; }
.gopetr-hero .wp-block-cover__inner-container { position: relative; z-index: 2; width: 100%; }
.gopetr-hero .wp-block-post-title { margin: var(--g-s1) 0 0; }
.gopetr-hero__meta { display: flex; gap: var(--g-s1); }
.g-sep-wide { margin: var(--g-s4) 0; }
.g-latest-title { font-size: var(--g-fs-lg); margin-bottom: var(--g-s4); }
/* --------------------------------------------------------------
   Ad placeholder slots
   -------------------------------------------------------------- */
.gopetr-ad {
	background-color: var(--g-subtle);
	border: 1px dashed var(--g-border);
	width: 100%;
	border-radius: var(--g-radius);
}
.gopetr-ad--leaderboard {
	min-height: 90px;
}
.gopetr-ad--filled {
	min-height: 0;
	padding: 0;
	background: none;
	border: 0;
}
.gopetr-ad--filled a {
	display: block;
	line-height: 0;
	width: 100%;
}
.gopetr-ad__banner {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--g-radius);
}
.gopetr-ad--rectangle {
	min-height: 250px;
}
.gopetr-ad__label {
	margin: 0;
	font-size: var(--g-fs-sm);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--g-secondary);
}
/* --------------------------------------------------------------
   Comments
   -------------------------------------------------------------- */
.gopetr-comment {
	margin-bottom: var(--g-s3);
	padding-bottom: var(--g-s3);
	border-bottom: 1px solid var(--g-border);
}
.gopetr-comment .wp-block-avatar {
	flex: 0 0 auto;
}
.gopetr-comment .wp-block-avatar img {
	display: block;
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: 50%;
}
/* Name + date on one line; date pushed right and muted. */
.gopetr-comment__head .wp-block-comment-author-name,
.gopetr-comment__head .wp-block-comment-author-name a {
	font-weight: 600;
	text-decoration: none;
	color: var(--g-contrast);
}
.gopetr-comment__head .wp-block-comment-date,
.gopetr-comment__head .wp-block-comment-date a {
	color: var(--g-secondary);
	text-decoration: none;
	font-size: var(--g-fs-sm);
}
.gopetr-comment .wp-block-comment-content {
	margin: 0;
	line-height: 1.6;
}
.gopetr-comment .wp-block-comment-reply-link {
	margin-top: 0.5rem;
}
.gopetr-comment .wp-block-comment-reply-link a {
	color: var(--g-accent);
	font-weight: 600;
	font-size: var(--g-fs-sm);
	text-decoration: none;
}
.gopetr-comment .wp-block-comment-reply-link a:hover {
	color: var(--g-accent-dark);
	text-decoration: underline;
}

/* ---- Ad slot flex (replaces core block layout) ---- */
.gopetr-ad { display: flex; align-items: center; justify-content: center; }

/* ---- Single post ---- */
.single-post__header { text-align: left; margin-bottom: var(--g-s4); }
.single-post__cat { font-size: var(--g-fs-sm); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; color: var(--g-accent); margin: 0; }
.single-post__cat a { color: inherit; text-decoration: none; }
.single-post__title { margin: var(--g-s2) 0 var(--g-s3); }
.single-post__meta { font-size: var(--g-fs-sm); color: var(--g-secondary); display: flex; gap: var(--g-s2); justify-content: flex-start; margin: 0; flex-wrap: wrap; }
.single-post__dot { display: inline-flex; align-items: center; }
.single-post__dot .g-paw { width: 1.15em; height: 1.15em; margin: 0; fill: var(--g-accent); opacity: 0.6; }
.single-post__media { margin: 0 0 var(--g-s4); }
.single-post__media img { width: 100%; height: auto; border-radius: var(--g-radius); }
.single-post__layout { display: grid; grid-template-columns: minmax(0, 66fr) minmax(0, 34fr); gap: var(--g-s5); align-items: start; }
.single-post__content { min-width: 0; }
.entry-content { font-size: 1.125rem; line-height: 1.75; max-width: 68ch; margin-inline: auto; }
.entry-content > * { margin-bottom: var(--g-s2); }
.entry-content img { height: auto; }
.single-post__tags { font-size: var(--g-fs-sm); color: var(--g-secondary); }
@media (max-width: 781px) { .single-post__layout { grid-template-columns: 1fr; } }

/* ---- Sidebar ---- */
.sidebar { min-width: 0; align-self: stretch; }
.gopetr-sticky { position: sticky; top: 2rem; display: flex; flex-direction: column; gap: var(--g-s4); }
.sidebar__heading { font-size: var(--g-fs-lg); border-bottom: 1px solid var(--g-border); padding-bottom: var(--g-s1); margin-bottom: var(--g-s3); }
.sidebar__list { list-style: none; margin: 0; padding: 0; }
.sidebar__item { display: flex; gap: 1rem; margin-bottom: 1.25rem; }
.sidebar__thumb { flex: 0 0 auto; }
.sidebar__thumb img { display: block; width: 88px; height: 88px; object-fit: cover; border-radius: 8px; }
.sidebar__link { display: block; font-size: var(--g-fs-sm); font-weight: 500; text-decoration: none; line-height: 1.4; }
.sidebar__link:hover { text-decoration: underline; }
.sidebar__date { font-size: 0.8rem; color: var(--g-secondary); }
@media (max-width: 781px) { .gopetr-sticky { position: static; } }

/* ---- Comment layout + form ---- */
.comments-area { margin-top: var(--g-s6); }
.comments-title { font-size: var(--g-fs-lg); margin-bottom: var(--g-s4); }
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-list .children { list-style: none; margin: var(--g-s3) 0 0; padding-left: var(--g-s3); border-left: 2px solid var(--g-border); }
.gopetr-comment__body { display: flex; gap: var(--g-s2); }
.gopetr-comment__head { display: flex; justify-content: flex-start; gap: 0.2rem var(--g-s2); align-items: baseline; flex-wrap: wrap; margin-bottom: 0.35rem; }
.gopetr-comment__main { min-width: 0; }
.comment-respond .comment-reply-title { font-size: var(--g-fs-lg); }
.comment-reply-title small { margin-left: 0.6em; }
.comment-reply-title small a { font-family: var(--g-font); font-size: var(--g-fs-sm); font-weight: 500; color: var(--g-accent); text-decoration: none; }
.comment-reply-title small a:hover { color: var(--g-accent-dark); text-decoration: underline; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 100%; padding: 0.65rem 0.75rem; border: 1px solid var(--g-border); border-radius: 8px; font-family: inherit; font-size: var(--g-fs-md); background: var(--g-base); color: var(--g-contrast); }
.comment-form textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.comment-form input:focus, .comment-form textarea:focus { outline: 2px solid var(--g-accent); outline-offset: 1px; border-color: var(--g-accent); }
.comment-form p { margin-bottom: var(--g-s2); }
.comment-form label { font-size: var(--g-fs-sm); font-weight: 600; }
.comment-form .comment-form-comment label { display: block; margin-bottom: 0.4rem; }
.comment-notes, .logged-in-as { font-size: var(--g-fs-sm); color: var(--g-secondary); }
.comment-notes a, .logged-in-as a { color: var(--g-accent); text-decoration: none; }
.comment-notes a:hover, .logged-in-as a:hover { color: var(--g-accent-dark); text-decoration: underline; }
.form-submit .submit, .comment-form input[type="submit"], .comment-form button[type="submit"] { display: inline-block; background: var(--g-accent); color: #fff; border: 0; border-radius: var(--g-radius); padding: 0.75rem 1.75rem; font-size: var(--g-fs-sm); font-weight: 600; cursor: pointer; transition: background-color 0.15s ease; }
.form-submit .submit:hover, .comment-form input[type="submit"]:hover, .comment-form button[type="submit"]:hover { background: var(--g-accent-dark); }
.gopetr-join { background: var(--g-subtle); border: 1px solid var(--g-border); border-left: 3px solid var(--g-accent); border-radius: var(--g-radius); padding: var(--g-s4); text-align: center; }
.gopetr-join__title { display: flex; align-items: center; justify-content: center; gap: 0.4em; font-family: var(--g-font-serif); font-weight: 700; font-size: var(--g-fs-lg); margin: 0 0 var(--g-s1); }
.gopetr-join__title .g-paw { width: 1em; height: 1em; }
.gopetr-join__text { color: var(--g-secondary); margin: 0 auto var(--g-s3); max-width: 44ch; }
.gopetr-join__actions { display: flex; gap: var(--g-s3); justify-content: center; align-items: center; flex-wrap: wrap; }
.gopetr-join__login { font-weight: 600; text-decoration: none; color: var(--g-accent); }
.gopetr-join__login:hover { color: var(--g-accent-dark); text-decoration: underline; }

/* --------------------------------------------------------------
   Auth modal (login / register popup)
   -------------------------------------------------------------- */
body.gopetr-modal-open { overflow: hidden; }
.gopetr-modal[hidden] { display: none; }
.gopetr-auth__panel[hidden] { display: none !important; }
.gopetr-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: var(--g-s3); }
.gopetr-modal__overlay { position: absolute; inset: 0; background: rgba(33, 29, 23, 0.55); }
.gopetr-modal__dialog { position: relative; width: 100%; max-width: 500px; max-height: 90vh; overflow-y: auto; background: var(--g-base); border-radius: var(--g-radius); padding: var(--g-s4); box-shadow: 0 20px 60px rgba(33, 29, 23, 0.25); }
.gopetr-modal__close { position: absolute; top: 0.75rem; right: 0.75rem; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; background: none; color: var(--g-contrast); cursor: pointer; }
.gopetr-modal__close:hover { color: var(--g-accent); }
.gopetr-auth__title { font-family: var(--g-font-serif); margin: 0 0 0.25rem; font-size: var(--g-fs-xl); font-weight: 700; line-height: 1.2; }
.gopetr-auth__sub { margin: 0 0 var(--g-s3); color: var(--g-secondary); font-size: var(--g-fs-sm); }
.gopetr-auth__field { display: block; margin-bottom: var(--g-s2); }
.gopetr-auth__field span { display: block; margin-bottom: 0.35rem; font-size: var(--g-fs-sm); font-weight: 500; }
.gopetr-auth__field input { width: 100%; padding: 0.65rem 0.75rem; border: 1px solid var(--g-border); border-radius: 8px; font-size: var(--g-fs-md); background: var(--g-base); color: var(--g-contrast); }
.gopetr-auth__field input:focus { outline: 2px solid var(--g-accent); outline-offset: 1px; border-color: var(--g-accent); }
.gopetr-auth__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.gopetr-auth__submit { width: 100%; margin-top: var(--g-s1); padding: 0.75rem 1rem; border: 0; border-radius: var(--g-radius); background: var(--g-accent); color: #fff; font-size: var(--g-fs-sm); font-weight: 600; cursor: pointer; }
.gopetr-auth__submit:hover { background: var(--g-accent-dark); }
.gopetr-auth__submit.is-loading { opacity: 0.6; cursor: progress; }
.gopetr-auth__or { display: flex; align-items: center; gap: var(--g-s2); margin: var(--g-s3) 0; color: var(--g-secondary); font-size: var(--g-fs-sm); }
.gopetr-auth__or::before, .gopetr-auth__or::after { content: ""; flex: 1; height: 1px; background: var(--g-border); }
.gopetr-auth__social { display: flex; flex-direction: column; gap: var(--g-s1); }
.gopetr-social { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 46px; padding: 0.6rem 2.75rem; border: 1px solid var(--g-border); border-radius: var(--g-radius); font-size: var(--g-fs-sm); font-weight: 600; text-decoration: none; transition: background-color 0.15s ease; }
.gopetr-social__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: inline-flex; }
.gopetr-social__icon svg { width: 18px; height: 18px; display: block; }
.gopetr-social__label { text-align: center; }
.gopetr-social--google { background: #fff; color: #1f1f1f; border-color: #dadce0; }
.gopetr-social--google:hover { background: #f6f7f8; }
.gopetr-social--facebook { background: #1877f2; color: #fff; border-color: #1877f2; }
.gopetr-social--facebook:hover { background: #166fe0; }
.gopetr-social--twitter { background: #000; color: #fff; border-color: #000; }
.gopetr-social--twitter:hover { background: #1a1a1a; }
.gopetr-auth__switch { margin: var(--g-s3) 0 0; text-align: center; font-size: var(--g-fs-sm); color: var(--g-secondary); }
.gopetr-auth__switch button { border: 0; background: none; padding: 0; color: var(--g-accent); font-weight: 600; text-decoration: underline; cursor: pointer; }
.gopetr-auth__switch button:hover { color: var(--g-accent-dark); }
.gopetr-auth__msg { margin-bottom: var(--g-s2); font-size: var(--g-fs-sm); }
.gopetr-auth__msg:empty { margin: 0; }
.gopetr-auth__msg.is-error { color: #c0392b; }
.gopetr-auth__msg.is-ok { color: #1e7d34; }
body.logged-in .gopetr-auth-login { display: none; }
@media (max-width: 600px) {
	.gopetr-modal { padding: var(--g-s3) var(--g-s1) var(--g-s1); }
	.gopetr-modal__dialog { padding: var(--g-s4) var(--g-s3) var(--g-s3); }
}

/* --------------------------------------------------------------
   Paw ornament + breadcrumbs
   -------------------------------------------------------------- */
.g-paw { width: 1em; height: 1em; fill: var(--g-accent); vertical-align: -0.08em; margin-right: 0.4em; }
.gopetr-crumbs { font-size: var(--g-fs-sm); color: var(--g-secondary); margin-bottom: var(--g-s2); }
.gopetr-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0.35em; margin: 0; padding: 0; text-align: left; }
.gopetr-crumbs li + li::before { content: "\203A"; margin-right: 0.35em; color: var(--g-secondary); }
.gopetr-crumbs a { color: inherit; text-decoration: none; }
.gopetr-crumbs a:hover { color: var(--g-accent); }
.gopetr-crumbs .is-current { color: var(--g-contrast); }

/* --------------------------------------------------------------
   Single post readability: TOC, content, post nav, author, related
   -------------------------------------------------------------- */
.single-post__updated { font-size: var(--g-fs-sm); color: var(--g-secondary); font-style: italic; margin: 0.35rem 0 0; }
.gopetr-toc { background: var(--g-subtle); border: 1px solid var(--g-border); border-left: 3px solid var(--g-accent); border-radius: var(--g-radius); padding: var(--g-s3); margin: 0 0 var(--g-s4); }
.gopetr-toc summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--g-s2); font-weight: 700; font-family: var(--g-font-serif); font-size: var(--g-fs-md); }
.gopetr-toc summary::-webkit-details-marker { display: none; }
.gopetr-toc summary::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid var(--g-secondary); border-bottom: 2px solid var(--g-secondary); transform: rotate(45deg); transition: transform 0.2s ease; }
.gopetr-toc[open] summary::after { transform: rotate(-135deg); }
.gopetr-toc[open] summary { border-bottom: 1px solid var(--g-border); padding-bottom: var(--g-s2); margin-bottom: var(--g-s2); }
.gopetr-toc ol { list-style: none; counter-reset: gopetr-toc; margin: 0; padding: 0; columns: 15rem; column-gap: var(--g-s4); font-size: var(--g-fs-sm); }
.gopetr-toc li { counter-increment: gopetr-toc; margin: 0 0 0.6rem; break-inside: avoid; }
.gopetr-toc a { display: flex; gap: 0.6em; align-items: baseline; text-decoration: none; color: var(--g-contrast); line-height: 1.4; }
.gopetr-toc a::before { content: counter(gopetr-toc); color: var(--g-accent); font-weight: 700; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.gopetr-toc a:hover { color: var(--g-accent-dark); }
.gopetr-toc a:hover::before { color: var(--g-accent-dark); }
.entry-content > * { min-width: 0; }
.entry-content h2 { margin-top: var(--g-s4); scroll-margin-top: var(--g-s3); }
.entry-content h3 { margin-top: var(--g-s3); scroll-margin-top: var(--g-s3); }
.entry-content a { color: var(--g-accent); }
.entry-content a:hover { color: var(--g-accent-dark); }
.entry-content blockquote { border-left: 3px solid var(--g-accent); background: var(--g-subtle); border-radius: 0 var(--g-radius) var(--g-radius) 0; margin: var(--g-s3) 0; padding: var(--g-s2) var(--g-s3); font-style: italic; }
.entry-content blockquote p:last-child { margin-bottom: 0; }
.entry-content blockquote a { color: var(--g-accent-dark); }
.entry-content ul, .entry-content ol { padding-left: 1.4rem; }
.entry-content li { margin-bottom: 0.4rem; }
.entry-content img { border-radius: var(--g-radius); }
.entry-content figcaption, .entry-content .wp-caption-text { font-size: var(--g-fs-sm); color: var(--g-secondary); text-align: center; margin-top: 0.5rem; }
.entry-content table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.entry-content th, .entry-content td { border: 1px solid var(--g-border); padding: 0.6rem 0.75rem; text-align: left; }
.entry-content tbody tr:nth-child(even) { background: var(--g-subtle); }
.entry-content pre { background: var(--g-subtle); border: 1px solid var(--g-border); border-radius: var(--g-radius); padding: var(--g-s2); overflow-x: auto; font-size: 0.9rem; }
.entry-content code { background: var(--g-subtle); padding: 0.1em 0.35em; border-radius: 4px; font-size: 0.92em; }
.entry-content pre code { background: none; padding: 0; }
.entry-content .wp-block-table { overflow-x: auto; }
.post-navigation { margin: var(--g-s4) 0; }
.post-navigation .nav-links { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g-s2); }
.post-navigation .nav-previous, .post-navigation .nav-next { border: 1px solid var(--g-border); border-radius: var(--g-radius); padding: var(--g-s2) var(--g-s3); min-width: 0; }
.post-navigation .nav-next { text-align: right; grid-column: 2; }
.post-navigation a { text-decoration: none; display: block; }
.gopetr-postnav__label { display: block; font-size: var(--g-fs-sm); color: var(--g-secondary); margin-bottom: 0.25rem; }
.gopetr-postnav__title { font-family: var(--g-font-serif); font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) {
	.post-navigation .nav-links { grid-template-columns: 1fr; }
	.post-navigation .nav-next { text-align: left; grid-column: auto; }
}
.gopetr-authorbox { display: flex; gap: var(--g-s2); align-items: flex-start; background: var(--g-subtle); border: 1px solid var(--g-border); border-radius: var(--g-radius); padding: var(--g-s3); margin: var(--g-s4) 0; }
.gopetr-authorbox img { border-radius: 50%; }
.gopetr-authorbox__name { font-family: var(--g-font-serif); font-weight: 700; font-size: var(--g-fs-md); margin: 0 0 0.25rem; }
.gopetr-authorbox__bio { font-size: var(--g-fs-sm); color: var(--g-secondary); margin: 0; }
.gopetr-related { margin-top: var(--g-s5); }
.gopetr-related__title { font-size: var(--g-fs-lg); margin-bottom: var(--g-s3); }
.gopetr-related .post-grid { gap: var(--g-s4) var(--g-s3); }

/* --------------------------------------------------------------
   Front-page category sections
   -------------------------------------------------------------- */
.gopetr-section { margin-top: var(--g-s5); }
.gopetr-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--g-s2); margin-bottom: var(--g-s3); }
.gopetr-section__title { font-size: var(--g-fs-lg); margin: 0; }
.gopetr-section__all { font-size: var(--g-fs-sm); font-weight: 600; color: var(--g-accent); text-decoration: none; white-space: nowrap; }
.gopetr-section__all:hover { color: var(--g-accent-dark); text-decoration: underline; }

/* --------------------------------------------------------------
   Trending Now ticker
   -------------------------------------------------------------- */
.gopetr-trending__inner { display: flex; align-items: center; gap: var(--g-s2); padding-block: 0.6rem; }
.gopetr-trending__chip { background: var(--g-contrast); color: var(--g-base); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.35em 0.7em; border-radius: 3px; white-space: nowrap; }
.gopetr-trending__items { position: relative; flex: 1; min-width: 0; height: 28px; }
.gopetr-trending__item { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; font-weight: 500; font-size: var(--g-fs-sm); line-height: 28px; }
.gopetr-trending__item.is-active { opacity: 1; visibility: visible; }
.gopetr-trending__item:hover { color: var(--g-accent); }
.gopetr-trending__nav { display: flex; gap: 0.4rem; }
.gopetr-trending__btn { border: 1px solid var(--g-border); background: var(--g-base); width: 28px; height: 28px; border-radius: 4px; cursor: pointer; font-size: 1.05rem; line-height: 1; color: var(--g-secondary); padding: 0; }
.gopetr-trending__btn:hover { color: var(--g-accent); border-color: var(--g-accent); }

/* --------------------------------------------------------------
   Header account link (topbar) + front-end profile editor
   -------------------------------------------------------------- */
.site-topbar__user { display: inline-flex; align-items: center; gap: 0.4rem; }
.site-topbar__avatar { width: 22px; height: 22px; border-radius: 50%; }
.gopetr-profile { max-width: 560px; margin: 0 auto; padding: var(--g-s4); border: 1px solid var(--g-border); border-radius: var(--g-radius); }
.gopetr-profile__guard { text-align: center; }
.gopetr-profile__notice { margin-bottom: var(--g-s3); padding: 0.75rem 1rem; border: 1px solid var(--g-border); border-radius: 8px; font-size: var(--g-fs-sm); }
.gopetr-profile__notice.is-ok { border-color: #1e7d34; color: #1e7d34; }
.gopetr-profile__notice.is-error { border-color: #c0392b; color: #c0392b; }
.gopetr-profile__avatar { display: flex; align-items: center; gap: var(--g-s3); margin-bottom: var(--g-s3); }
.gopetr-profile__avatar img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.gopetr-profile__avatar-field { flex: 1; }
.gopetr-profile__row { display: flex; gap: var(--g-s2); }
.gopetr-profile__row > .gopetr-profile__field { flex: 1; }
.gopetr-profile__field { display: block; margin-bottom: var(--g-s2); }
.gopetr-profile__field > span { display: block; margin-bottom: 0.35rem; font-size: var(--g-fs-sm); font-weight: 600; }
.gopetr-profile__field input, .gopetr-profile__field select, .gopetr-profile__field textarea { width: 100%; padding: 0.65rem 0.75rem; border: 1px solid var(--g-border); border-radius: 8px; font-size: var(--g-fs-md); font-family: inherit; background: var(--g-base); color: var(--g-contrast); }
.gopetr-profile__field input[type="file"] { padding: 0.5rem; font-size: var(--g-fs-sm); }
.gopetr-profile__field select { appearance: none; -webkit-appearance: none; padding-right: 2.5rem; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6258' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.85rem center; background-size: 16px; }
.gopetr-profile__field input:focus, .gopetr-profile__field select:focus, .gopetr-profile__field textarea:focus { outline: 2px solid var(--g-accent); outline-offset: 1px; border-color: var(--g-accent); }
.gopetr-profile__fieldset { margin: var(--g-s3) 0; padding: var(--g-s3); border: 1px solid var(--g-border); border-radius: var(--g-radius); }
.gopetr-profile__fieldset legend { padding: 0 0.5rem; font-weight: 600; font-size: var(--g-fs-sm); }
.gopetr-profile__hint { margin: 0 0 var(--g-s2); color: var(--g-secondary); font-size: var(--g-fs-sm); }
.gopetr-profile__actions { display: flex; align-items: center; gap: var(--g-s3); margin-top: var(--g-s3); }
.gopetr-profile__submit { padding: 0.75rem 1.75rem; border: 0; border-radius: var(--g-radius); background: var(--g-accent); color: #fff; font-size: var(--g-fs-sm); font-weight: 600; cursor: pointer; transition: background-color 0.15s ease; }
.gopetr-profile__submit:hover { background: var(--g-accent-dark); }
.gopetr-profile__logout { color: var(--g-secondary); font-size: var(--g-fs-sm); text-decoration: none; }
.gopetr-profile__logout:hover { color: var(--g-accent); text-decoration: underline; }
@media (max-width: 600px) { .gopetr-profile__row { flex-direction: column; gap: 0; } }

/* --------------------------------------------------------------
   Account / profile page (left-aligned, with identity hero)
   -------------------------------------------------------------- */
.gopetr-account-page__title { margin-bottom: var(--g-s4); }
.gopetr-account-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 280px); gap: var(--g-s5); align-items: start; margin-top: var(--g-s2); }
.gopetr-account-main { min-width: 0; }
.gopetr-account-main__title { font-size: var(--g-fs-xl); margin-bottom: var(--g-s3); }
.gopetr-account-page .gopetr-profile { max-width: none; margin: 0; }
.gopetr-account-side { min-width: 0; }
.gopetr-account-card { position: sticky; top: 2rem; text-align: center; padding: var(--g-s4) var(--g-s3); border: 1px solid var(--g-border); border-radius: var(--g-radius); background: linear-gradient(160deg, #f8efe3 0%, #f1ddca 100%); }
.gopetr-account-card__avatar img { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 4px 14px rgba(33, 29, 23, 0.14); }
.gopetr-account-card__name { font-family: var(--g-font-serif); font-weight: 700; font-size: var(--g-fs-lg); margin: var(--g-s2) 0 0.15rem; }
.gopetr-account-card__email { font-size: var(--g-fs-sm); color: var(--g-secondary); margin: 0 0 var(--g-s2); word-break: break-word; }
.gopetr-account-card__badge { display: inline-block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--g-accent); background: rgba(180, 83, 28, 0.12); padding: 0.25em 0.7em; border-radius: 999px; }
.gopetr-account-card__sep { border: 0; border-top: 1px solid var(--g-border); margin: var(--g-s3) 0; }
.gopetr-account-card__link { display: block; font-size: var(--g-fs-sm); font-weight: 600; text-decoration: none; color: var(--g-contrast); padding: 0.35rem 0; }
.gopetr-account-card__link:hover { color: var(--g-accent); }
.gopetr-account-card__logout { color: var(--g-secondary); }
@media (max-width: 781px) {
	.gopetr-account-layout { grid-template-columns: 1fr; gap: var(--g-s4); }
	.gopetr-account-card { position: static; }
}

/* Article vet disclaimer */
.gopetr-disclaimer { display: flex; gap: var(--g-s2); align-items: flex-start; margin: var(--g-s4) 0; padding: var(--g-s2) var(--g-s3); background: var(--g-subtle); border-left: 3px solid var(--g-accent); border-radius: 0 var(--g-radius) var(--g-radius) 0; }
.gopetr-disclaimer .g-paw { flex: 0 0 auto; width: 1.2em; height: 1.2em; margin: 0.15em 0 0; fill: var(--g-accent); }
.gopetr-disclaimer p { margin: 0; font-size: var(--g-fs-sm); color: var(--g-secondary); line-height: 1.6; }

/* Shared tool form chrome (Pet Age, Pregnancy, …)
-------------------------------------------------- */
.gopetr-tool { max-width: 720px; margin: var(--g-s4) auto; padding: var(--g-s3); background: var(--g-subtle); border: 1px solid var(--g-border); border-radius: var(--g-radius); }
.gopetr-tool__controls { display: grid; gap: var(--g-s3); grid-template-columns: 1fr; }
@media (min-width: 640px) { .gopetr-tool__controls { grid-template-columns: 1fr 1fr; } }
.gopetr-tool__field { display: flex; flex-direction: column; gap: var(--g-s1); }
.gopetr-tool__field[hidden] { display: none; }
.gopetr-tool__label { font-size: var(--g-fs-sm); font-weight: 600; color: var(--g-secondary); }
.gopetr-tool__toggle { display: inline-flex; gap: var(--g-s1); }
.gopetr-tool__pill { flex: 1; padding: 0.6rem 1rem; border: 1px solid var(--g-border); border-radius: var(--g-radius); background: var(--g-base); color: var(--g-contrast); font-size: var(--g-fs-sm); font-weight: 500; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.gopetr-tool__pill:hover { border-color: var(--g-accent); }
.gopetr-tool__pill:focus-visible { outline: 2px solid var(--g-accent); outline-offset: 1px; }
.gopetr-tool__pill.is-active { background: var(--g-accent); border-color: var(--g-accent); color: #fff; }
.gopetr-tool__select, .gopetr-tool__input { padding: 0.6rem 0.75rem; border: 1px solid var(--g-border); border-radius: var(--g-radius); background: var(--g-base); color: var(--g-contrast); font-size: var(--g-fs-md); font-family: inherit; line-height: 1.4; }
.gopetr-tool__select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 2.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6258' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.85rem center; background-size: 16px; }
.gopetr-tool__select::-ms-expand { display: none; }
.gopetr-tool__select:focus, .gopetr-tool__input:focus { border-color: var(--g-accent); outline: 2px solid var(--g-accent); outline-offset: 1px; }
.gopetr-tool__result { margin-top: var(--g-s3); padding-top: var(--g-s3); border-top: 1px solid var(--g-border); text-align: center; }
.gopetr-tool__number { font-family: var(--g-font-serif); font-size: var(--g-fs-xl); font-weight: 700; color: var(--g-accent); margin: 0 0 var(--g-s1); }
.gopetr-tool__note { font-size: var(--g-fs-sm); color: var(--g-secondary); margin: 0; }
.gopetr-petage-info { margin-top: var(--g-s4); }

/* Pet Pregnancy timeline
-------------------------------------------------- */
.gopetr-preg__timeline { list-style: none; margin: var(--g-s3) 0 0; padding: var(--g-s3) 0 0; border-top: 1px solid var(--g-border); display: flex; flex-direction: column; gap: var(--g-s2); }
.gopetr-preg__timeline[hidden] { display: none; }
.gopetr-preg__timeline li { display: flex; gap: var(--g-s2); align-items: baseline; padding-bottom: var(--g-s2); border-bottom: 1px solid var(--g-border); }
.gopetr-preg__timeline li:last-child { padding-bottom: 0; border-bottom: 0; }
.gopetr-preg__date { flex: 0 0 auto; min-width: 7.5rem; font-weight: 600; font-size: var(--g-fs-sm); color: var(--g-accent); }
.gopetr-preg__label { color: var(--g-contrast); }
.gopetr-preg__timeline li.is-due .gopetr-preg__label { font-weight: 700; }

/* Pet Memory Match game
-------------------------------------------------- */
.gopetr-mem { max-width: 720px; margin: var(--g-s4) auto; padding: var(--g-s3); background: var(--g-subtle); border: 1px solid var(--g-border); border-radius: var(--g-radius); }
.gopetr-mem__bar { display: flex; flex-wrap: wrap; gap: var(--g-s2); align-items: center; justify-content: space-between; margin-bottom: var(--g-s3); }
.gopetr-mem__restart { padding: 0.6rem 1.25rem; border: 1px solid var(--g-border); border-radius: var(--g-radius); background: var(--g-base); color: var(--g-contrast); font-size: var(--g-fs-sm); font-weight: 500; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; }
.gopetr-mem__restart:hover { border-color: var(--g-accent); color: var(--g-accent); }
.gopetr-mem__restart:focus-visible { outline: 2px solid var(--g-accent); outline-offset: 1px; }
.gopetr-mem__stats { display: flex; flex-wrap: wrap; gap: var(--g-s3); font-size: var(--g-fs-sm); color: var(--g-secondary); margin-bottom: var(--g-s2); }
.gopetr-mem__stats strong { color: var(--g-contrast); }
.gopetr-mem__win { margin: 0 0 var(--g-s2); padding: var(--g-s2); border-radius: var(--g-radius); background: var(--g-subtle); border: 1px solid var(--g-border); text-align: center; font-family: var(--g-font-serif); font-weight: 700; color: var(--g-accent); }
.gopetr-mem__win[hidden] { display: none; }
.gopetr-mem__board { display: grid; grid-template-columns: repeat(var(--mem-cols, 4), 1fr); gap: var(--g-s2); }
.gopetr-mem__card { position: relative; aspect-ratio: 1 / 1; padding: 0; border: 0; background: transparent; cursor: pointer; }
.gopetr-mem__face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--g-border); border-radius: var(--g-radius); }
.gopetr-mem__face--back { background: var(--g-accent); color: #fff; }
.gopetr-mem__face--front { background: var(--g-base); color: var(--g-accent); display: none; }
.gopetr-mem__card.is-flipped .gopetr-mem__face--front, .gopetr-mem__card.is-matched .gopetr-mem__face--front { display: flex; }
.gopetr-mem__card.is-flipped .gopetr-mem__face--back, .gopetr-mem__card.is-matched .gopetr-mem__face--back { display: none; }
.gopetr-mem__card.is-matched .gopetr-mem__face--front { border-color: var(--g-accent); background: rgba(180, 83, 28, 0.12); color: var(--g-accent); }
.gopetr-mem__card:focus-visible { outline: 2px solid var(--g-accent); outline-offset: 2px; }
.gopetr-mem__icon { width: 56%; height: 56%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gopetr-mem__face--back .gopetr-mem__icon { width: 44%; height: 44%; opacity: 0.85; }
@media (prefers-reduced-motion: no-preference) {
	.gopetr-mem__card { transition: transform 0.12s ease; }
	.gopetr-mem__card.is-flipped, .gopetr-mem__card.is-matched { transform: scale(1.03); }
}