/* ==========================================================================
   Educabal — visual refinements on top of Overflow (Code Supply Co.)
   Same layout, same templates, same Customizer controls as the parent
   theme. This file only restyles color, type rhythm, shape and motion.
   Loaded after both the parent stylesheet and Kirki's dynamic output,
   so these rules win the cascade without needing !important everywhere.
   ========================================================================== */

:root {
	--edu-ink: #1b1b1b;
	--edu-ink-soft: #5b5b5b;
	--edu-ink-faint: #9a9a9a;
	--edu-paper: #ffffff;
	--edu-paper-alt: #f7f5f1;
	--edu-gold: #9c7a3f;
	--edu-gold-deep: #7e632f;
	--edu-border: #e7e3da;
	--edu-radius: 6px;
	--edu-shadow: 0 1px 3px rgba(20,20,20,0.04), 0 8px 24px rgba(20,20,20,0.06);
	--edu-shadow-hover: 0 4px 10px rgba(20,20,20,0.06), 0 18px 40px rgba(20,20,20,0.12);
}

/* ---------- Base type rhythm ---------- */
body {
	color: var(--edu-ink);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	letter-spacing: -0.01em;
}

a {
	transition: color 0.2s ease;
}

/* ---------- Crisper corners everywhere, replacing the stock bubbly 30px ---------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.pk-button,
.wp-block-button:not(.is-style-squared) .wp-block-button__link,
.archive-wrap .more-link,
.post-header .pk-share-buttons-wrap .pk-share-buttons-link,
.site-search [type="search"] {
	border-radius: var(--edu-radius) !important;
}

/* ---------- Buttons: quieter, more deliberate ---------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.pk-button-primary {
	background-color: var(--edu-ink);
	color: var(--edu-paper);
	letter-spacing: 0.08em;
	transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

button:hover, button:focus,
input[type="button"]:hover, input[type="button"]:focus,
input[type="reset"]:hover, input[type="reset"]:focus,
input[type="submit"]:hover, input[type="submit"]:focus,
.button:hover, .button:focus,
.pk-button-primary:hover, .pk-button-primary:focus {
	background-color: var(--edu-gold-deep);
	color: var(--edu-paper);
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(124, 99, 47, 0.25);
}

/* ---------- Category tags: from flat-color text to quiet bordered labels ---------- */
.post-categories a {
	display: inline-block;
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 3px 10px;
	border: 1px solid var(--edu-border);
	border-radius: var(--edu-radius);
	color: var(--edu-ink-soft);
	transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.post-categories a:hover, .post-categories a:focus {
	border-color: var(--edu-gold);
	color: var(--edu-gold-deep);
	background-color: var(--edu-paper-alt);
}

/* Categories shown over a photo (overlay cards) keep a solid readable chip instead */
.cs-overlay .post-categories a {
	border-color: rgba(255,255,255,0.55);
	color: #fff;
	background-color: rgba(20,20,20,0.35);
	backdrop-filter: blur(2px);
}
.cs-overlay .post-categories a:hover {
	border-color: var(--edu-gold);
	background-color: rgba(20,20,20,0.55);
	color: #fff;
}

/* ---------- Post cards: gentle lift instead of static ---------- */
.pk-post-item,
article.post,
.cs-overlay-hover {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.archive-grid article.post:hover,
.pk-post-item:hover {
	transform: translateY(-3px);
}

.post-media a,
.pk-post-thumbnail a,
.cs-overlay-background {
	border-radius: var(--edu-radius);
	overflow: hidden;
}

.post-media img,
.pk-post-thumbnail img {
	transition: transform 0.5s ease;
}

.post-media a:hover img,
.pk-post-thumbnail a:hover img {
	transform: scale(1.035);
}

/* ---------- Navigation: underline reveal instead of flat color swap ---------- */
.navbar-nav > li > a {
	position: relative;
	transition: color 0.2s ease;
}

.navbar-nav > li > a:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 0;
	height: 1px;
	background: var(--edu-gold);
	transition: width 0.25s ease;
}

.navbar-nav > li > a:hover:after,
.navbar-nav > li > a:focus:after {
	width: 100%;
}

/* ---------- Links inside post content ---------- */
.entry-content a {
	text-decoration-color: var(--edu-border);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	transition: text-decoration-color 0.2s ease;
}

.entry-content a:hover {
	text-decoration-color: var(--edu-gold);
}

/* ---------- "Read more" / text-action links ---------- */
.cs-link-more,
.archive-wrap .more-link,
.read-more {
	letter-spacing: 0.12em;
	transition: color 0.2s ease, letter-spacing 0.2s ease;
}

.cs-link-more:hover,
.archive-wrap .more-link:hover,
.read-more:hover {
	letter-spacing: 0.16em;
}

/* ---------- Subscribe / newsletter inputs: crisper, quieter ---------- */
.pk-subscribe-with-name input[type="text"],
.pk-subscribe-with-bg input[type="text"] {
	border: 1px solid var(--edu-border);
	border-radius: var(--edu-radius) !important;
}

.pk-subscribe-with-name button,
.pk-subscribe-with-bg button {
	border-radius: var(--edu-radius) !important;
}

/* ---------- Search field ---------- */
.cs-input-group input[type="search"] {
	border: 1px solid var(--edu-border);
}

.cs-input-group input[type="search"]:focus {
	border-color: var(--edu-gold);
	box-shadow: 0 0 0 3px rgba(156, 122, 63, 0.12);
}

/* ---------- Widget / section titles: thin rule instead of dotted stroke ---------- */
.title-block {
	color: var(--edu-ink);
}

.design-heading-stroke-line .title-stroke:after,
.design-title-stroke-line .title-stroke-block:after {
	background: var(--edu-border);
	height: 1px;
}

/* ---------- Footer ---------- */
.site-footer {
	border-top: 1px solid var(--edu-border);
}

.footer-copyright a {
	color: var(--edu-ink-soft);
}

.footer-copyright a:hover {
	color: var(--edu-gold-deep);
}

/* ---------- Reduced motion respected ---------- */
@media (prefers-reduced-motion: reduce) {
	.pk-post-item,
	article.post,
	.cs-overlay-hover,
	.post-media img,
	.pk-post-thumbnail img,
	button, .button, .pk-button-primary,
	.navbar-nav > li > a:after {
		transition: none !important;
		transform: none !important;
	}
}