/*
 * Rorz Cards overrides for the Katen theme. Loaded after Katen's styles and
 * its Customizer color CSS (see includes/rorzcards-site.php).
 *
 * Palette: navy #203656 (headings, Katen's own), gold #D98D1B (logo/brand).
 * Text colors are chosen for WCAG AA contrast on white.
 */
:root {
	--rz-navy: #203656;
	--rz-gold: #d98d1b;
	--rz-gold-text: #9a5700;   /* gold dark enough for text on white: 5.6:1 */
	--rz-text: #3b4758;        /* article text: 9.4:1 */
	--rz-text-soft: #4a5a70;   /* UI text: 7.0:1 */
	--rz-text-muted: #5f6b7d;  /* meta, captions: 5.4:1 */
}

/* ---------- 1. Contrast, links, buttons, focus ---------- */

body,
.widget {
	color: var(--rz-text-soft);
}

.post-single .post-content,
.page-content {
	color: var(--rz-text);
}

.slogan,
.post .meta,
.post .meta a,
.breadcrumb li a,
.breadcrumb li.active,
.wp-caption-text,
.wp-element-caption,
figcaption {
	color: var(--rz-text-muted);
}

.post-single .post-content a:not(.btn):not(.wp-block-button__link),
.page-content a:not(.btn):not(.wp-block-button__link) {
	color: var(--rz-gold-text);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: rgba(154, 87, 0, 0.45);
}

.post-single .post-content a:not(.btn):not(.wp-block-button__link):hover,
.page-content a:not(.btn):not(.wp-block-button__link):hover {
	color: var(--rz-navy);
	text-decoration-color: currentColor;
}

/* Katen paints these with a gold-to-pale-gold gradient and white text
   (as low as 1.6:1). Solid gold with navy text is 4.5:1. */
.btn-default,
.wp-block-search button[type=submit],
.widget .searchform input[type=submit],
.comment-reply-link,
.post-password-form input[type=submit],
input[type=submit],
.navbar-nav li .nav-link.active,
.nav-pills .nav-link.active,
.icon-button,
.page-item .page-numbers.current,
.page-numbers:hover,
.page-links li {
	background: var(--rz-gold);
	color: var(--rz-navy);
}

.btn-default:hover,
.wp-block-search button[type=submit]:hover,
.widget .searchform input[type=submit]:hover,
input[type=submit]:hover,
.icon-button:hover {
	background: var(--rz-navy);
	color: #fff;
}

.btn-default,
.wp-block-search button[type=submit],
.widget .searchform input[type=submit],
input[type=submit] {
	font-weight: 500;
}

/* Katen sets the active nav pill's white text with !important. */
.navbar-nav li .nav-link.active {
	color: var(--rz-navy) !important;
}

.burger-icon:before,
.burger-icon:after {
	background-color: currentColor;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.btn:focus-visible {
	outline: 2px solid var(--rz-navy);
	outline-offset: 2px;
	box-shadow: none;
}

/* ---------- 2. Compact header ---------- */

/* Inner pages on desktop: the mascot at 300px pushes every article down. */
@media (min-width: 768px) {
	body:not(.home) .header-personal .header-top {
		padding-top: 16px;
		padding-bottom: 12px;
	}

	body:not(.home) .header-personal .navbar-brand img {
		width: 110px;
		height: auto;
	}

	body:not(.home) .header-personal .text-logo {
		font-size: 24px;
	}

	.home .header-personal .navbar-brand img {
		width: 200px;
		height: auto;
	}
}

/* Phones: one row of logo, name and buttons instead of a full screen of header. */
@media (max-width: 767.98px) {
	.header-personal .header-top {
		padding-top: 12px;
		padding-bottom: 12px;
	}

	/* AdSense Auto ads can inject elements into this row or the logo column.
	   Nothing here may force a width: known columns share the first line and
	   anything else wraps to a full-width line below, clipped to the screen. */
	.header-personal .header-top .row {
		flex-wrap: wrap;
	}

	.header-personal .header-top .row > .text-center {
		flex: 1 1 0;
		min-width: 0;
		width: auto;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: 12px;
		align-items: center;
		text-align: left !important;
	}

	.header-personal .header-top .row > :not(.col-md-4):not(.col-4),
	.header-personal .header-top .row > .text-center > :not(.navbar-brand):not(.text-logo):not(.slogan) {
		flex: 0 0 100%;
		grid-column: 1 / -1;
		order: 10;
		min-width: 0;
		max-width: 100%;
		overflow: hidden;
	}

	.header-personal .navbar-brand {
		grid-row: span 2;
		margin: 0;
		padding: 0;
	}

	.header-personal .navbar-brand img {
		width: 60px;
		height: auto;
	}

	.header-personal .text-logo {
		font-size: 20px;
		margin: 0;
		align-self: end;
	}

	.header-personal .text-logo .dot {
		font-size: 26px;
		margin-left: 2px;
	}

	.header-personal .slogan {
		font-size: 13px;
		line-height: 1.3;
		align-self: start;
	}

	.header-personal .header-top .row > .col-md-4:not(.text-center) {
		flex: 0 0 auto;
		width: auto;
		align-self: flex-start;
		margin-top: 8px; /* centers 44px buttons on the 60px logo */
	}

	.header-personal .header-buttons {
		margin-top: 0 !important;
		display: flex;
		gap: 8px;
	}

	.header-personal .header-buttons .burger-menu {
		float: none !important;
		margin-left: 0 !important;
	}

	/* 44px tap targets */
	.header-personal .icon-button {
		width: 44px;
		height: 44px;
	}
}

/* ---------- Mailchimp signup bar ---------- */

/* The plugin prints its own colors with !important after this file, so every
   rule here is scoped to #mailchimp-top-bar to win on specificity. */
#mailchimp-top-bar .mctb-bar,
#mailchimp-top-bar .mctb-response,
#mailchimp-top-bar .mctb-close {
	background: var(--rz-navy) !important;
	color: #fff !important;
}

#mailchimp-top-bar .mctb-bar {
	padding: 10px 16px;
}

#mailchimp-top-bar form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 12px;
}

#mailchimp-top-bar.mctb-big .mctb-label {
	color: #fff !important;
	font-family: "Poppins", sans-serif;
	font-size: 15px;
	font-weight: 500;
	margin: 0;
	padding: 0 !important;
}

#mailchimp-top-bar.mctb-big .mctb-email {
	font-size: 16px; /* 16px stops iOS zooming on focus */
	font-weight: 400;
	color: var(--rz-navy);
	border: 0;
	border-radius: 999px;
	margin: 0 !important;
	padding: 8px 16px !important;
	max-width: 260px !important;
}

#mailchimp-top-bar.mctb-big .mctb-email::placeholder {
	color: var(--rz-text-muted);
}

#mailchimp-top-bar.mctb-big .mctb-button {
	background: var(--rz-gold) !important;
	border: 0 !important;
	border-color: var(--rz-gold) !important;
	color: var(--rz-navy) !important;
	font-family: "Poppins", sans-serif;
	font-size: 15px;
	font-weight: 600;
	border-radius: 999px;
	margin: 0 !important;
	padding: 8px 20px !important;
	transition: background-color 0.15s ease-in-out;
}

#mailchimp-top-bar.mctb-big .mctb-button:hover {
	background: #fff !important;
}

#mailchimp-top-bar .mctb-email:focus-visible,
#mailchimp-top-bar .mctb-button:focus-visible {
	outline: 2px solid var(--rz-gold) !important;
	outline-offset: 2px;
}

/* Hide/show toggle: a small chevron tab instead of a big square. */
#mailchimp-top-bar.mctb-big .mctb-close {
	font-size: 11px !important;
	line-height: 1;
	padding: 6px 10px;
	margin-right: 16px;
	border-radius: 0 0 6px 6px;
	opacity: 0.85;
}

#mailchimp-top-bar .mctb-close:hover {
	opacity: 1;
}

/* On narrow screens the plugin hangs the toggle below the bar, where it
   covers the header's search/menu buttons. The bar isn't sticky, so it
   scrolls away without needing a hide button. */
@media (max-width: 767.98px) {
	#mailchimp-top-bar .mctb-close {
		display: none !important;
	}
}

@media (max-width: 580px) {
	#mailchimp-top-bar .mctb-bar {
		padding: 10px 12px;
	}

	#mailchimp-top-bar.mctb-big .mctb-label {
		flex: 1 0 100%;
		font-size: 14px;
		line-height: 1.35;
	}

	#mailchimp-top-bar.mctb-big .mctb-email {
		flex: 1 1 0;
		width: auto !important;
		min-width: 0;
		max-width: none !important;
	}

	#mailchimp-top-bar.mctb-big .mctb-button {
		flex: 0 0 auto;
		width: auto !important;
	}
}

/* ---------- 3. Article reading width, sticky sidebar ---------- */

.post-single .post-content {
	font-size: 18px;
	line-height: 1.75;
}

/* Post text sits in article.post-content > div.clearfix; images stay full width. */
.post-single .post-content > .clearfix > :is(p, ul, ol, blockquote, h2, h3, h4) {
	max-width: 34em; /* ~72 characters per line */
}

@media (max-width: 767.98px) {
	.post-single .post-content {
		font-size: 17px;
	}
}

/* Keep "Browse posts" in view while reading. The sidebar has to fill its
   column for the last widget to have room to stick. */
@media (min-width: 992px) {
	.col-md-4 > .sidebar {
		height: 100%;
	}

	.sidebar .widget:last-child {
		position: sticky;
		top: 90px;
		background: #fff;
	}

	.admin-bar .sidebar .widget:last-child {
		top: 122px;
	}
}

/* ---------- Glossary "Related terms" box (includes/rorzcards-glossary.php) ---------- */

.rz-glossary-box {
	margin: 40px 0 8px;
	padding: 24px 28px;
	border: 1px solid #ebebeb;
	border-top: 3px solid var(--rz-gold);
	border-radius: 8px;
}

.post-single .post-content .rz-glossary-box__title {
	font-size: 20px;
	margin: 0 0 16px;
	color: var(--rz-navy);
}

.rz-glossary-box__terms {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
}

.post-single .post-content .rz-glossary-box__terms,
.post-single .post-content .rz-glossary-box__terms li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.post-single .post-content .rz-glossary-box__terms li::before,
.post-single .post-content .rz-glossary-box__terms li::marker {
	content: none;
	display: none;
}

.post-single .post-content .rz-glossary-box .rz-glossary-box__terms a {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid #e3d3bd;
	border-radius: 999px;
	color: var(--rz-navy);
	font-family: "Poppins", sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
}

.post-single .post-content .rz-glossary-box .rz-glossary-box__terms a:hover {
	border-color: var(--rz-gold);
	background: #fdf6ec;
}

.rz-glossary-box__all {
	margin: 0;
	font-size: 16px;
}

/* Glossary hub: letter jump links. Extra specificity beats the underlined
   content-link rule (.page-content a:not(.btn):not(...)). */
.page-content .rz-glossary-jump a:not(.btn):not(.wp-block-button__link) {
	display: inline-block;
	min-width: 36px;
	margin: 0 2px 6px 0;
	padding: 4px 10px;
	border: 1px solid #e3d3bd;
	border-radius: 6px;
	text-align: center;
	text-decoration: none;
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	color: var(--rz-navy);
}

.page-content .rz-glossary-jump a:not(.btn):not(.wp-block-button__link):hover {
	border-color: var(--rz-gold);
	background: #fdf6ec;
}

.page-content h2[id],
.page-content h3[id] {
	scroll-margin-top: 110px;
}

/* Glossary hub: letters as section markers, terms as compact headings */
.rz-glossary-hub .page-content h2[id] {
	font-size: 28px;
	margin: 40px 0 8px;
	padding-bottom: 6px;
	border-bottom: 2px solid var(--rz-gold);
}

.rz-glossary-hub .page-content h3[id] {
	font-size: 21px;
	margin: 20px 0 6px;
}

.rz-glossary-hub .page-content h3[id] + p {
	margin-bottom: 8px;
}

/* Share icons and tags sit inside .post-content; keep them out of the
   underlined content-link style above. */
.post-single .post-content .post-bottom a:not(.btn):not(.wp-block-button__link) {
	color: var(--rz-text-muted);
	text-decoration: none;
}

.post-single .post-content .post-bottom a:not(.btn):not(.wp-block-button__link):hover {
	color: var(--rz-navy);
}

/* Katen bug: the footer row's wide gutter (gx-5, -24px margins) sticks out
   12px past its container, so phones can scroll sideways. Match the gutter to
   the container padding. */
.footer .container-xl > .row.gx-5 {
	--bs-gutter-x: 1.5rem;
}