/*
Theme Name: RootsMagic
Theme URI: https://www.rootsmagic.com/
Author: RootsMagic, Inc.
Author URI: https://www.rootsmagic.com/
Description: The RootsMagic blog theme. It matches www.rootsmagic.com: the same header and menus, footer, breadcrumbs, colors, promotion bar, and Bootstrap 5 styling, with a sidebar for widgets.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.2
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rootsmagic
Tags: blog, two-columns, right-sidebar, custom-menu, featured-images, threaded-comments, translation-ready, wide-blocks
*/

/* =========================================================
   The site's own rules (from www.rootsmagic.com/css/StyleSheet.css), so the header, menus, breadcrumbs and buttons
   look the same. Bootstrap 5.3.3 is loaded first, from the same CDN the site uses.
   --------------------------------------------------------- */
:root {
	--rm-teal: #007e6c;
	--rm-teal-700: #006a5b;
	--rm-teal-800: #005246;
	--ph-blue: #2378bd;
	--fa-brown: #977347;
	--header-bg: #183939;
	--body-color: var(--bs-body-color, #212529);
	--muted-color: var(--bs-secondary-color, #6c757d);
	--hover-bg: var(--bs-dropdown-link-hover-bg, #f8f9fa);
	--chip-hover-bg: var(--bs-tertiary-bg, #f1f3f5);
	--bs-link-color: #0a58ca;
	--bs-link-color-rgb: 10, 88, 202;
	--bs-link-hover-color: #084298;
	--bs-link-hover-color-rgb: 8, 66, 152;
	--rm-tint: #eef6f4;
	--rm-border: #d9e2e1;
	--shadow-dropdown: 0 8px 16px rgba(0, 0, 0, .5);
}

.btn-outline-secondary { --bs-btn-color: #5c636a; --bs-btn-border-color: #5c636a; }
.btn-primary {
	--bs-btn-bg: var(--rm-teal-700);
	--bs-btn-border-color: var(--rm-teal-700);
	--bs-btn-hover-bg: var(--rm-teal-800);
	--bs-btn-hover-border-color: var(--rm-teal-800);
	--bs-btn-active-bg: var(--rm-teal-800);
	--bs-btn-active-border-color: var(--rm-teal-800);
	--bs-btn-disabled-bg: var(--rm-teal-700);
	--bs-btn-disabled-border-color: var(--rm-teal-700);
	--bs-btn-focus-shadow-rgb: 0, 106, 91;
}
.rmback { background-color: var(--rm-teal); }
.rmtext { color: var(--rm-teal-800); }
.phtext { color: var(--ph-blue); }
.fatext { color: var(--fa-brown); }
.text-small { font-size: .9375rem; }

/* Promotion bar */
.promo-link { display: block; }
.promo-bar { background: var(--rm-teal-700); color: #fff; margin-top: 0; border: 0; }
.site-header { padding: 0; margin: 0; }

/* Header: menu centered on large screens, dropdowns as on the site */
.navbar-nav { flex: 1; margin: auto !important; display: flex; justify-content: center; }
.dropdown-menu {
	background-color: #fff;
	border: 1px solid var(--header-bg);
	box-shadow: var(--shadow-dropdown);
	animation: rmFadeIn .2s ease-in;
}
.navbar .dropdown-menu { z-index: 1050; }
@keyframes rmFadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .dropdown-menu { animation: none; } }

.menu-products { min-width: 300px; }
.menu-products .menu-product-row {
	display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
	padding: .5rem 1rem; cursor: pointer; color: var(--bs-dropdown-link-color, var(--body-color));
}
.menu-products .menu-product-row:hover,
.menu-products .menu-product-row:focus-within { background-color: var(--hover-bg); }
.menu-products a, .menu-products a:hover, .menu-products a:focus { color: inherit !important; text-decoration: none; }
.menu-products .menu-product-link { white-space: nowrap; }
.menu-products .menu-actions { display: inline-flex; gap: 1rem; white-space: nowrap; }
.menu-products .menu-action { padding: .125rem .25rem; border-radius: .25rem; }
.menu-products .menu-action:hover,
.menu-products .menu-action:focus-visible { background-color: var(--chip-hover-bg); outline: 2px solid transparent; }
@media (max-width: 991.98px) {
	.menu-products { min-width: 100%; }
	.menu-products .menu-product-row { flex-direction: column; align-items: flex-start; }
	.menu-products .menu-actions { gap: .75rem; }
}

/* Breadcrumbs */
.rm-bc { margin-top: .25rem; }
.rm-bc .breadcrumb { --bs-breadcrumb-divider: '\203A'; --bs-breadcrumb-divider-color: var(--muted-color); margin: .25rem 0 .5rem; }
.rm-bc .breadcrumb-item + .breadcrumb-item::before { opacity: .5; }
.rm-bc .breadcrumb-item, .rm-bc .breadcrumb-item a { color: var(--body-color); }
.rm-bc .breadcrumb-item a { text-decoration: none; }
.rm-bc .breadcrumb-item.active { font-weight: 700; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-bc .rm-bc-link { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; padding: 0 .25rem; border-radius: .25rem; }
.rm-bc .rm-bc-link:hover, .rm-bc .rm-bc-link:focus-visible { background-color: var(--chip-hover-bg); outline: 2px solid transparent; }
.rm-bc .rm-bc-home { width: 1em; height: 1em; display: inline-block; vertical-align: -.125em; }
@media (max-width: 576px) {
	.rm-bc .breadcrumb-item:not(:first-child):not(:last-child) { display: none; }
	.rm-bc .breadcrumb-item:first-child::after { content: " \2026"; color: var(--muted-color); margin-left: .25rem; }
}

/* Buttons used on the site */
.btn-rm { color: var(--rm-teal); border: 1px solid var(--rm-teal); }
.btn-rm:hover, .btn-rm:focus { background-color: var(--rm-teal); color: #fff; border-color: var(--rm-teal); }
.btn-rm-primary { color: #fff; background-color: var(--rm-teal); border: 1px solid var(--rm-teal); }
.btn-rm-primary:hover, .btn-rm-primary:focus { color: #fff; background-color: var(--rm-teal-700); border-color: var(--rm-teal-700); }

/* =========================================================
   Blog
   --------------------------------------------------------- */

/* The WordPress toolbar (when logged in) sits above the fixed header */
body.admin-bar .navbar.fixed-top { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .navbar.fixed-top { top: 46px; } }

.skip-link:focus { position: fixed; top: .5rem; left: .5rem; z-index: 2000; background: #fff; padding: .5rem 1rem; border-radius: .375rem; }

/* "Blog" label beside the logo */
.rm-blog-label {
	display: inline-block; margin-left: .25rem; padding: .15rem .6rem; border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .45); color: #fff; font-size: .85rem; font-weight: 600; text-decoration: none;
	vertical-align: middle;
}
.rm-blog-label:hover, .rm-blog-label:focus { background: rgba(255, 255, 255, .12); color: #fff; }

/* Optional blog menu under the header */
.rm-blog-nav { background: var(--rm-tint); border-bottom: 1px solid var(--rm-border); }
.rm-blog-nav .menu { list-style: none; margin: 0; padding: .4rem 0; display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.rm-blog-nav a { color: var(--rm-teal-800); font-weight: 600; text-decoration: none; padding: .25rem .5rem; border-radius: .375rem; }
.rm-blog-nav a:hover, .rm-blog-nav .current-menu-item > a { background: #fff; }

/* Page headings */
.rm-page-header { margin: .5rem 0 1.75rem; }
.rm-page-header h1 { font-weight: 700; color: var(--header-bg); margin-bottom: .35rem; }
.rm-page-header .rm-lead { color: var(--muted-color); font-size: 1.15rem; margin: 0; }
.rm-eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--rm-teal-800); margin-bottom: .35rem; }
.rm-eyebrow a { color: inherit; text-decoration: none; }
.rm-eyebrow a:hover { text-decoration: underline; }

/* Post list */
.rm-post-card { padding: 0 0 2rem; margin: 0 0 2rem; border-bottom: 1px solid var(--rm-border); }
.rm-post-card:last-of-type { border-bottom: 0; }
.rm-post-thumb { display: block; border-radius: .75rem; overflow: hidden; box-shadow: 0 .5rem 1.25rem rgba(24, 57, 57, .12); }
.rm-post-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .2s ease; }
.rm-post-thumb:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .rm-post-thumb img { transition: none; } .rm-post-thumb:hover img { transform: none; } }
.rm-post-title { font-size: 1.5rem; font-weight: 700; line-height: 1.25; margin: 0 0 .35rem; }
.rm-post-title a { color: var(--header-bg); text-decoration: none; }
.rm-post-title a:hover { color: var(--rm-teal-800); text-decoration: underline; }
.rm-meta { color: var(--muted-color); font-size: .9rem; margin-bottom: .75rem; }
.rm-meta a { color: inherit; }
.rm-excerpt p { margin-bottom: .5rem; }
.rm-more { font-weight: 600; text-decoration: none; }
.rm-more:hover { text-decoration: underline; }
.sticky .rm-post-title::before {
	content: "Featured"; display: inline-block; margin-right: .5rem; padding: .1rem .5rem; border-radius: 999px;
	background: #f5c542; color: #1f2a2a; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: .3em;
}

/* Single post and page */
.rm-entry-header h1 { font-size: calc(1.5rem + 1.2vw); font-weight: 700; color: var(--header-bg); line-height: 1.2; }
@media (min-width: 1200px) { .rm-entry-header h1 { font-size: 2.35rem; } }
.rm-featured { margin: 0 0 1.5rem; border-radius: .9rem; overflow: hidden; }
.rm-featured img { display: block; width: 100%; height: auto; }

.entry-content { font-size: 1.0625rem; line-height: 1.7; overflow-wrap: break-word; }
.entry-content > * { margin-bottom: 1.15rem; }
.entry-content h2, .entry-content h3, .entry-content h4 { color: var(--header-bg); font-weight: 700; line-height: 1.3; margin-top: 2rem; margin-bottom: .75rem; }
.entry-content h2 { font-size: 1.6rem; }
.entry-content h3 { font-size: 1.3rem; }
.entry-content h4 { font-size: 1.1rem; }
.entry-content img { max-width: 100%; height: auto; border-radius: .5rem; }
.entry-content figure { margin-left: 0; margin-right: 0; }
.entry-content figcaption, .wp-caption-text, .wp-element-caption { color: var(--muted-color); font-size: .9rem; margin-top: .4rem; text-align: center; }
.entry-content blockquote, .wp-block-quote {
	border-left: 4px solid var(--rm-teal); background: var(--rm-tint); padding: 1rem 1.25rem; border-radius: 0 .5rem .5rem 0; margin-left: 0;
}
.entry-content blockquote p:last-child { margin-bottom: 0; }
.entry-content blockquote cite { display: block; color: var(--muted-color); font-size: .9rem; font-style: normal; margin-top: .5rem; }
.entry-content pre { background: #f6f8f8; border: 1px solid var(--rm-border); border-radius: .5rem; padding: 1rem; overflow-x: auto; }
.entry-content table { width: 100%; border-collapse: collapse; }
.entry-content th, .entry-content td { border-bottom: 1px solid var(--rm-border); padding: .5rem .65rem; text-align: left; }
.entry-content hr, .wp-block-separator { border: 0; border-top: 1px solid var(--rm-border); opacity: 1; margin: 2rem 0; }
.entry-content ul, .entry-content ol { padding-left: 1.4rem; }
.entry-content li { margin-bottom: .35rem; }

/* WordPress alignment classes, inside the main column */
.alignleft { float: left; margin: .35rem 1.5rem 1rem 0; max-width: 50%; }
.alignright { float: right; margin: .35rem 0 1rem 1.5rem; max-width: 50%; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; text-align: center; }
.alignwide, .alignfull { width: 100%; max-width: 100%; }
.entry-content::after { content: ""; display: table; clear: both; }
@media (max-width: 575.98px) { .alignleft, .alignright { float: none; margin: 0 0 1rem; max-width: 100%; } }
.wp-caption { max-width: 100%; }

/* Block buttons in the site teal */
.wp-block-button__link, .wp-element-button {
	background-color: var(--rm-teal-700); color: #fff; border-radius: .375rem; padding: .55rem 1.1rem; font-weight: 600; text-decoration: none;
}
.wp-block-button__link:hover, .wp-element-button:hover { background-color: var(--rm-teal-800); color: #fff; }
.wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: var(--rm-teal-700); border: 2px solid var(--rm-teal-700); }

/* Video embeds */
.wp-block-embed__wrapper iframe, .entry-content iframe { max-width: 100%; border: 0; border-radius: .5rem; }

/* Tags, post navigation */
.rm-tags { margin: 2rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.rm-tags a { display: inline-block; padding: .2rem .7rem; border-radius: 999px; background: var(--rm-tint); color: var(--rm-teal-800); text-decoration: none; font-size: .85rem; font-weight: 600; }
.rm-tags a:hover { background: #dcefeb; }
.rm-post-nav { margin: 2.5rem 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.rm-post-nav a { display: block; height: 100%; padding: 1rem 1.15rem; border: 1px solid var(--rm-border); border-radius: .75rem; text-decoration: none; color: var(--header-bg); }
.rm-post-nav a:hover { border-color: var(--rm-teal); background: var(--rm-tint); }
.rm-post-nav .rm-nav-label { display: block; color: var(--muted-color); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .25rem; }
.rm-post-nav .rm-nav-next { text-align: right; grid-column: 2; }
@media (max-width: 575.98px) { .rm-post-nav { grid-template-columns: 1fr; } .rm-post-nav .rm-nav-next { grid-column: 1; text-align: left; } }

/* Pagination */
.rm-pagination { margin: 1rem 0 2rem; }
.rm-pagination .page-link { color: var(--rm-teal-800); }
.rm-pagination .active > .page-link { background-color: var(--rm-teal-700); border-color: var(--rm-teal-700); color: #fff; }

/* Sidebar */
.rm-sidebar { position: relative; }
.rm-sidebar .widget, .rm-product-card {
	background: #fff; border: 1px solid var(--rm-border); border-radius: .75rem; padding: 1.15rem 1.25rem; margin-bottom: 1.25rem;
}
.rm-sidebar .widget-title, .rm-sidebar .wp-block-heading { font-size: 1.05rem; font-weight: 700; color: var(--header-bg); margin: 0 0 .75rem; }
.rm-sidebar ul { list-style: none; padding: 0; margin: 0; }
.rm-sidebar li { padding: .35rem 0; border-top: 1px solid #edf2f1; }
.rm-sidebar li:first-child { border-top: 0; padding-top: 0; }
.rm-sidebar li a { text-decoration: none; }
.rm-sidebar li a:hover { text-decoration: underline; }
.rm-sidebar .children, .rm-sidebar .sub-menu { padding-left: 1rem; margin-top: .35rem; }
/* Archives and Categories "Display as dropdown", in Bootstrap's .form-select look. */
.rm-sidebar select {
	width: 100%; padding: .375rem 2.25rem .375rem .75rem; font-size: 1rem; line-height: 1.5; color: var(--bs-body-color);
	background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat right .75rem center / 16px 12px;
	border: 1px solid var(--bs-border-color); border-radius: .375rem; appearance: none;
}
.rm-sidebar select:focus { border-color: var(--rm-teal); outline: 0; box-shadow: 0 0 0 .2rem rgba(0, 126, 108, .2); }
.rm-product-card { text-align: center; background: linear-gradient(170deg, #f1f8f6 0%, #dcefea 100%); }
.rm-product-card img { width: 150px; height: auto; margin: .25rem auto .75rem; display: block; }
.rm-product-card h2 { font-size: 1.2rem; font-weight: 700; color: var(--header-bg); margin: 0 0 .25rem; }
.rm-product-card p { color: #2f4f4c; margin: 0 0 .9rem; }
.rm-product-card .btn { margin: .2rem; }

/* Search form */
.rm-search .form-control:focus { border-color: var(--rm-teal); box-shadow: 0 0 0 .2rem rgba(0, 126, 108, .2); }

/* Comments */
.comments-area { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--rm-border); }
.comments-title, .comment-reply-title { font-size: 1.35rem; font-weight: 700; color: var(--header-bg); margin-bottom: 1.25rem; }
.comment-list, .comment-list .children { list-style: none; padding: 0; }
.comment-list .children { margin-left: 1.5rem; padding-left: 1rem; border-left: 2px solid var(--rm-border); }
.comment-body { margin-bottom: 1.5rem; }
.comment-meta { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: center; margin-bottom: .5rem; }
.comment-author { display: flex; align-items: center; gap: .6rem; font-weight: 700; }
.comment-author .avatar { border-radius: 50%; }
.comment-author .says { display: none; }
.comment-metadata, .comment-metadata a { color: var(--muted-color); font-size: .85rem; text-decoration: none; }
.comment-content p:last-child { margin-bottom: .25rem; }
.reply a { font-size: .9rem; font-weight: 600; text-decoration: none; }
.bypostauthor > .comment-body .comment-author b::after {
	content: "RootsMagic"; margin-left: .5rem; padding: .05rem .45rem; border-radius: 999px; background: var(--rm-tint); color: var(--rm-teal-800); font-size: .7rem; font-weight: 700;
}
.comment-form label { display: block; font-weight: 600; margin-bottom: .25rem; }
.comment-form .form-control:focus { border-color: var(--rm-teal); box-shadow: 0 0 0 .2rem rgba(0, 126, 108, .2); }
.comment-form-cookies-consent { display: flex; gap: .5rem; align-items: flex-start; }
.comment-form-cookies-consent label { font-weight: 400; }

/* Footer: the site's */
.site-footer h2 a:hover, .site-footer li a:hover { text-decoration: underline !important; }

/* Screen-reader text (WordPress core markup) */
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute !important; width: 1px; word-wrap: normal !important;
}