/*
Theme Name: Knutts Child Theme
Theme URI: https://knutts.com
Description: A custom child theme for the GeneratePress theme, built for Knutts, LLC.
Author: Knutts, LLC.
Author URI: https://knutts.com
Template: generatepress
Version: 1.0.5
Text Domain: knutts
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 Resets & Base
2.0 Typography
3.0 Layout
4.0 Header & Navigation
5.0 Content
6.0 Sidebar
7.0 Footer
8.0 Components & Utilities
9.0 Responsive
--------------------------------------------------------------*/

/*--------------------------------------------------------------
1.0 RESETS & BASE
Global variables and base element resets.
--------------------------------------------------------------*/
*, *::before, *::after {
	box-sizing: border-box;
}
.site-main>* {
	margin-bottom: 0;
}
html {
	scroll-behavior: smooth;
}
:root {
	--kn-header-bg: #1e3e62;
	--kn-body-bg: #f0f0f0;
	--kn-body-text: #3a3a3a;
	--kn-link: #2f70a9;
	--kn-link-hover: #ff6000;
	--kn-surface-bg: #ffffff;
	--kn-surface-border: #d7d7d7;
	--kn-heading-text: #222222;
	--kn-button-bg: #2f70a9;
	--kn-button-text: #f7f8f9;
	--kn-meta-text: #686868;

	--kn-radius-sm: 4px;
	--kn-radius-md: 6px;

	--kn-transition-fast: 0.2s ease;
}

/*--------------------------------------------------------------
2.0 TYPOGRAPHY
Font faces, text elements, and interactive text styles.
--------------------------------------------------------------*/
@font-face {
	font-family: "Covered By Your Grace";
	src: url("assets/fonts/CoveredByYourGrace-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Nunito";
	src: url("assets/fonts/Nunito-VariableFont_wght.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Nunito";
	src: url("assets/fonts/Nunito-Italic-VariableFont_wght.woff2") format("woff2");
	font-weight: 400 700;
	font-style: italic;
	font-display: swap;
}
body {
	font-family: "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 16px;
	line-height: 2;
	font-weight: 400;
	background-color: var(--kn-body-bg);
	color: var(--kn-body-text);
}
h1, h2, h3 {
	font-family: "Covered By Your Grace", "Nunito", system-ui, -apple-system, BlinkMacSystemFont,
		"Segoe UI", sans-serif;
	font-weight: 400;
	color: var(--kn-heading-text);
}
h1 {
	font-size: 3.5em;
	line-height: 1.2;
	margin-bottom: 10px;
}
h2 {
	font-size: 2.5em;
	line-height: 1.3;
	margin-bottom: 10px;
}
h3 {
	font-size: 2em;
	line-height: 1.4;
	margin-bottom: 10px;
}
h4, h5, h6 {
	font-family: "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-weight: 700;
	color: var(--kn-heading-text);
}
strong {
	font-weight: 700;
}
a {
	color: var(--kn-link);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.12em;
	transition:
		color var(--kn-transition-fast),
		background-color var(--kn-transition-fast),
		border-color var(--kn-transition-fast),
		box-shadow var(--kn-transition-fast),
		transform var(--kn-transition-fast);
}
a:hover, a:focus-visible {
	color: var(--kn-link-hover);
}
p {
	margin-bottom: 1.15em;
}
button, input[type="submit"],
input[type="button"], input[type="reset"],
.button, .wp-block-button__link,
.wp-element-button, .kn-button {
	background-color: var(--kn-link);
	color: var(--kn-button-text);
	border-radius: var(--kn-radius-md);
	padding: 0.6em 1.4em;
	font-weight: 700;
	cursor: pointer;
	transition:
		color var(--kn-transition-fast),
		background-color var(--kn-transition-fast),
		border-color var(--kn-transition-fast),
		box-shadow var(--kn-transition-fast),
		transform var(--kn-transition-fast);
} 
button:hover, button:focus-visible, input[type="submit"]:hover,
input[type="submit"]:focus-visible, .button:hover, .button:focus-visible,
.wp-block-button__link:hover, .wp-block-button__link:focus-visible,
.wp-element-button:hover, .wp-element-button:focus-visible,
.kn-button:hover, .kn-button:focus-visible {
	background-color: var(--kn-link-hover);
	color: var(--kn-button-text);
	transform: translateY(-1px);
}
input:not([type="submit"]):not([type="button"]):not([type="reset"]),
select, textarea {
	color: var(--kn-body-text);
	background-color: var(--kn-surface-bg);
	border: 1px solid var(--kn-surface-border);
	border-radius: var(--kn-radius-md);
	transition:
		border-color var(--kn-transition-fast),
		box-shadow var(--kn-transition-fast),
		background-color var(--kn-transition-fast);
} 
input:not([type="submit"]):not([type="button"]):not([type="reset"]):hover,
select:hover, textarea:hover,
input:not([type="submit"]):not([type="button"]):not([type="reset"]):focus-visible,
select:focus-visible, textarea:focus-visible {
	outline: none;
	border-color: var(--kn-link);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--kn-link) 15%, transparent);
}
figcaption.wp-element-caption {
	font-size: 0.9em;
	color: var(--kn-meta-text);
	margin-top: 0.2em;
	text-align: center;
}

/*--------------------------------------------------------------
3.0 LAYOUT
Global structural containers and shell layout tweaks.
--------------------------------------------------------------*/
.site-header {
	background-color: var(--kn-header-bg);
}
.site-main {
	background-color: var(--kn-surface-bg);
	border: 1px solid var(--kn-surface-border);
	border-radius: var(--kn-radius-md);
}
div.menu-bar-items span.icon-search {
	color: var(--kn-button-text);
}

/*--------------------------------------------------------------
4.0 HEADER & NAVIGATION
Primary site header and menu styles.
--------------------------------------------------------------*/
header.site-header ul li.page_item a {
	color: var(--kn-surface-bg);
	font-family: "Covered By Your Grace", "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 1.25em;
	font-weight: 400;
}
header.site-header ul li.page_item a:hover {
	color: var(--kn-link-hover);
}

/*--------------------------------------------------------------
5.0 CONTENT
Article header, meta, breadcrumbs, and content helpers.
--------------------------------------------------------------*/
/* Entry header and taxonomy description */
.inside-article .entry-header {
	margin-top: 1.5rem;
}
main.site-main header.page-header {
	padding: 40px 40px 0;
}
main.site-main header.page-header div.taxonomy-description {
	font-size: 0.95em;
	line-height: 1.5;
}
/* Entry meta and reader disclosure */
.kn-entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
	font-size: 0.85em;
	font-weight: 400;
	color: var(--kn-meta-text);
	margin-bottom: 1.25rem;
}
.kn-entry-meta-date {
	white-space: nowrap;
}
.kn-entry-meta-separator {
	opacity: 0.7;
}
.kn-entry-meta-disclosure {
	font-size: inherit;
	font-weight: inherit;
	color: var(--kn-meta-text);
}
.kn-entry-meta-disclosure-label:hover {
	color: var(--kn-link-hover);
}
.kn-entry-meta-disclosure-summary {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	cursor: pointer;
	list-style: none;
}
.kn-entry-meta-disclosure[open] .kn-entry-meta-disclosure-body {
	margin-top: 0.75em;
	padding: 0.75em 1em;
	border: 1px solid var(--kn-link);
	border-radius: var(--kn-radius-md);
	max-height: 500px;
	opacity: 1;
	transform: translateY(0);
}
.kn-entry-meta-disclosure-body {
	font-weight: 400;
	display: flex;
	align-items: flex-start;
	gap: 0.75em;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transform: translateY(-4px);
	transition:
		max-height var(--kn-transition-fast),
		opacity var(--kn-transition-fast),
		transform var(--kn-transition-fast),
		margin-top var(--kn-transition-fast),
		padding var(--kn-transition-fast),
		border-color var(--kn-transition-fast),
		border-width var(--kn-transition-fast);
}
.kn-entry-meta-disclosure-icon .kn-icon-info {
	width: 30px;
	height: 30px;
	color: var(--kn-link);
}
.kn-entry-meta-disclosure-toggle-icon {
	display: none;
	margin-left: 0.35em;
}
.kn-entry-meta-disclosure-toggle-icon .kn-icon-close {
	width: 0.9em;
	height: 0.9em;
	color: var(--kn-link-hover);
}
.kn-entry-meta-disclosure[open] .kn-entry-meta-disclosure-toggle-icon {
	display: inline-flex;
}
/* Entry summary */
.inside-article .entry-summary {
	font-size: 1em;
	line-height: 1.6;
	color: var(--kn-body-text);
	margin-bottom: 2em;
}
/* Entry footer meta and navigation */
.kn-entry-footer {
	font-size: 0.9em;
	color: var(--kn-meta-text);
	margin-top: 2.5em;
}
.kn-entry-footer-taxonomy {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5em;
	margin-bottom: 1.5em;
}
.kn-entry-footer-taxonomy .gp-icon {
	margin-right: 0.25em;
}
.kn-entry-footer-taxonomy .kn-icon-folder,
.kn-entry-footer-taxonomy .kn-icon-tag {
	width: 1em;
	height: 1em;
}
.kn-entry-footer-nav {
	font-size: 1.2em;
	font-weight: 700;
}
.kn-entry-footer-nav .nav-links {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	row-gap: 0.75em;
}
.kn-entry-footer-nav .nav-previous,
.kn-entry-footer-nav .nav-next {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}
.kn-entry-footer-nav .nav-previous {
	justify-content: flex-start;
}
.kn-entry-footer-nav .nav-next {
	justify-content: flex-end;
}
.kn-entry-footer-nav .kn-nav-icon svg {
	width: 1em;
	height: 1em;
}
/* Hide legacy entry header/footer meta on single posts */
.single .inside-article > .entry-meta {
	display: none;
}
/* Breadcrumbs */
.kn-breadcrumbs {
	font-size: 0.85em;
	font-weight: 400;
	color: var(--kn-meta-text);
	padding: 0;
	margin: 0;
}
.kn-breadcrumbs a {
	color: var(--kn-meta-text);
}
.kn-breadcrumbs a:hover, .kn-breadcrumbs a:focus-visible {
	color: var(--kn-link-hover);
}
.kn-breadcrumbs-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35em;
	list-style: none;
	margin: 0 0 0.5em;
	padding: 0;
}
.kn-breadcrumbs-item, .kn-breadcrumbs-separator {
	display: flex;
	align-items: center;
}
.kn-breadcrumbs-icon, .kn-breadcrumbs-icon svg,
.kn-icon.kn-icon-separator, .kn-icon.kn-icon-home {
	width: .7em;
	height: .7em;
	fill: currentColor;
}
.kn-breadcrumbs-current {
	color: var(--kn-meta-text);
	font-weight: 700;
}
/* Content imagery */
.inside-article img {
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
	border-radius: var(--kn-radius-md);
}
div.featured-image {
	text-align: center;
}

/*--------------------------------------------------------------
6.0 SIDEBAR
--------------------------------------------------------------*/
.sidebar .widget {
	background-color: var(--kn-surface-bg);
	border: 1px solid var(--kn-surface-border);
	border-radius: var(--kn-radius-md);
	padding: 20px;
	margin-bottom: 30px;
}
.sidebar .widget h2.wp-block-heading {
	font-family: Nunito, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 1.1em;
	font-weight: 700;
	text-align: center;
	margin-bottom: 20px;
}
.sidebar .widget ul,
.sidebar .widget ol {
	list-style: none;
	margin: 0;
	padding: 0;
}
.sidebar .widget li {
	color: var(--kn-body-text);
	font-size: 0.95em;
	margin-top: 15px;
}
.sidebar .widget.widget_search {
	display: none;
}

/*--------------------------------------------------------------
7.0 FOOTER
Site footer components and utilities.
--------------------------------------------------------------*/
a.generate-back-to-top {
	font-weight: 700;
	border: 1px solid var(--kn-link);
}
a.generate-back-to-top:hover {
	color: var(--kn-surface-bg);
	background: var(--kn-link-hover);
	border: 1px solid var(--kn-link-hover);
}

/*--------------------------------------------------------------
8.0 COMPONENTS & UTILITIES
Reusable components: icons, loop cards, and search.
--------------------------------------------------------------*/
/* SVG icon utility */
.kn-icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: middle;
}
/* Loop card layout */
.kn-loop-card-inner {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	padding: 30px 0 0;
	margin: 40px;
	border-top: 1px solid var(--kn-surface-border);
}
.kn-loop-card-image-link {
	display: block;
	width: 180px;
	height: 180px;
	flex-shrink: 0;
	overflow: hidden;
	border-radius: var(--kn-radius-md);
}
.kn-loop-card-image-link img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
.kn-loop-card-content {
	flex: 1;
	text-align: left;
	display: flex;
	flex-direction: column;
}
.kn-loop-card-title {
	font-size: 1.5em;
	margin: 0;
	padding: 0;
	text-align: left;
}
.kn-loop-card-summary {
	flex: 1;
	padding-top: 10px;
	margin: 0;
	font-size: 1em;
	line-height: 1.6;
	color: var(--kn-body-text);
	text-align: left;
}
.kn-loop-card-footer {
	margin-top: 0.75em;
	text-align: right;
}
.kn-loop-card-readmore {
	font-size: .95em;
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
	font-weight: 700;
}
.kn-loop-card-readmore-icon {
	display: inline-flex;
	transition: transform var(--kn-transition-fast);
}
.kn-loop-card-readmore:hover .kn-loop-card-readmore-icon,
.kn-loop-card-readmore:focus-visible .kn-loop-card-readmore-icon {
	transform: translateX(2px);
}
/* Sidebar search component */
.kn-search-wrapper {
	padding-top: 15px;
	margin-bottom: 30px;
}
.kn-search-form {
	position: relative;
	padding-top: 0;
	margin: 0;
}
.kn-search-form .kn-search-field {
	width: 100%;
	padding: 0.5em 2.3em 0.5em 0.9em;
	border-radius: var(--kn-radius-md);
	border: 1px solid var(--kn-surface-border);
	background-color: var(--kn-surface-bg);
	font-size: 0.95em;
}
.kn-search-form .kn-search-field::placeholder {
	font-style: italic;
}
.kn-search-form .kn-search-submit {
	position: absolute;
	top: 50%;
	right: 0.7rem;
	transform: translateY(-50%);
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	border-radius: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	line-height: 1;
}
.kn-search-form .kn-icon-search {
	color: var(--kn-link);
	width: 1.1rem;
	height: 1.1rem;
}
.kn-search-form .kn-icon-search:hover {
	color: var(--kn-link-hover);
}

/*--------------------------------------------------------------
9.0 RESPONSIVE
--------------------------------------------------------------*/
@media (max-width: 767px) {
	/* Mobile styles */
}
@media (min-width: 768px) and (max-width: 1023px) {
	/* Tablet styles */
}
@media (min-width: 1024px) {
	/* Desktop styles */
}