@charset "UTF-8";
/*
Theme Name: Rural Blog
Theme URI: https://owldraft.com/themes/rural-blog
Author: Owl Draft
Author URI: https://owldraft.com
Description: Rural Blog is a minimal blog WordPress theme for blogger, writer, personal website, freelancer, reviewer, traveler, instagram creator, photographer and anybody who wants a simple yet powerful blog site. It focuses on readability, minimalism and loading speed. Theme performance is 99/100 on mobile and desktop. Accessibility tested & passed. The theme requires zero plugins, no Google fonts, only self-hosted built-in WordPress font libs, tiny CSS and Javascript, just your words. Rural is a classic WordPress theme (ie. not FSE theme) with Theme Customizer panel to customize header, footer, typography, layout.. View live demo at: https://rural-blog.owldraft.com/.
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.0
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rural-blog
Tags: one-column, two-columns, left-sidebar, right-sidebar, grid-layout, custom-colors, custom-menu, custom-logo, editor-style, featured-images, theme-options, threaded-comments, translation-ready, blog, custom-background
*/
/* ============================================================================
   TABLE OF CONTENTS
   ----------------------------------------------------------------------------
   All SCSS lives in this single file. Compile with:  sass style.scss style.css

   00. Mixins ........ responsive breakpoint mixin + CSS custom properties
   01. Normalize ..... normalize.css v8.0.1
   02. Setup ......... base reset/setup shared across themes
   03. Elements ...... html, body, headings, media, links, blockquote,
                       forms, buttons, code, lists
   04. Blocks ........ WordPress core blocks
   05. Header ........ site header, primary nav, offcanvas menu, hamburger
   06. Footer ........ site footer
   07. Single ........ single post / page content
   08. Archives ...... archive / index layout
   09. Widgets ....... widget area
   10. Reduced motion  honour prefers-reduced-motion
   ========================================================================== */
/* ============================================================================
   00. MIXINS
   ========================================================================== */
/* ============================================================================
   01. NORMALIZE
   ========================================================================== */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
  text-decoration-thickness: 1px;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration-style: dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

/* ============================================================================
   02. SETUP
   ========================================================================== */
/**
 * Responsive Styles
 */
/**
 * a11y
 */
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
  word-break: normal;
}

.skip-link:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
  outline: 0;
}

/* ============================================================================
   03. ELEMENTS
   ========================================================================== */
:root {
  /* Layout */
  --narrow-width: 620px;
  --wide-width: 900px; /* alignwide width, between reading and full */
  --container-width: 94%;
  --container-max-width: 1400px; /* the cap .container never grows past */
  --sidebar-width: 300px; /* the .secondary column on the sidebar layouts */
  --layout-gap: 3.5rem; /* space between .primary and .secondary */
  --grid-gap: 2.5rem; /* space between cards in the grid display */
}
@media only screen and (max-width: 821.98px) {
  :root {
    --container-width: 96%;
  }
}
:root {
  /* Font Size */
  --font-size-base: 1rem;
  --font-size-xs: 1rem;
  --font-size-sm: 1.125rem;
  --font-size-md: 1.25rem;
  --font-size-lg: 1.5rem;
  --font-size-xl: 2.25rem;
  --font-size-xxl: 4rem;
  --font-size-xxxl: 5rem;
  --font-size-page-title: var(--font-size-xxl);
  /* Colors */
  --color-accent: #4c9c66;
  --color-black: #000;
  --color-gray: #777;
  --color-gray-light: #aaa;
  --color-white: #fff;
  --color-border: #e0e0e0;
  --color-border-hover: #d0d0d0;
  --color-link: #4c9c66;
  --color-link-hover: var(--color-link);
  --selection-color: black;
  --selection-bg-color: #ffd;
  --color-light-gray: #f0f0f0;
  --color-light-gray-darker: #e0e0e0;
  /* Body */
  --body-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body-font-size: var(--font-size-base);
  --body-line-height: 1.5;
  --body-font-weight: 400;
  --body-letter-spacing: 0;
  --body-text-transform: none;
  --body-color: var(--color-black);
  --body-background: var(--color-white);
  /* Heading */
  --heading-font: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --heading-line-height: 1.25;
  --heading-font-weight: 600;
  --heading-letter-spacing: 0;
  --heading-text-transform: uppercase;
  --heading-font-size-h6: var(--font-size-xs);
  --heading-font-size-h5: var(--font-size-sm);
  --heading-font-size-h4: var(--font-size-lg);
  --heading-font-size-h3: calc(1.1 * var(--font-size-lg));
  --heading-font-size-h2: var(--font-size-xl);
  --heading-font-size-h1: 2.8em;
  /* H2 is the one level that steps down on its own. It lives here as a token
     rather than a font-size on h2 itself so Design > Typography > Heading sizes
     can override it: that option writes the same token from a later stylesheet,
     which a plain font-size rule on the element would always have out-ranked. */
}
@media only screen and (max-width: 591.98px) {
  :root {
    --heading-font-size-h2: 1.8em;
  }
}
:root {
  --heading-color: var(--color-black);
  /* Nav — a secondary role: anything left unset in Design > Header follows the
     heading role rather than freezing a value here, so a site that restyles its
     headings carries the menu with it. Same idea as --nav-font below. */
  --nav-font: var(--heading-font);
  --nav-font-size: 11px;
  --nav-line-height: 1.5;
  --nav-letter-spacing: 1px;
  --nav-font-weight: var(--heading-font-weight);
  --nav-text-transform: var(--heading-text-transform);
  /* Header */
  --color-header-background: var(--body-background);
  --color-header-text: var(--body-color);
  --color-header-border: rgba(0,0,0,.05);
  --header-height: 60px;
  --subheader-height: 48px; /* the second (menu) row on the Nav-below header layout */
  --logo-height: 44px;
  --site-title-font-size: 1.2em; /* the text logo; responsive from Site Identity */
  --color-header-link: inherit;
  --color-header-link-hover: #767676;
  --color-nav-dropdown-bg: #f0f0f0;
  --color-nav-dropdown: var(--color-header-link);
  --color-nav-dropdown-hover: #777;
  /* Footer */
  --color-footer-background: var(--body-background);
  --color-footer-text: var(--body-color);
  --footer-padding-top: 4em;
  --footer-padding-bottom: 4em;
  /* Spacing */
  --spacing-unit: 20px;
  --spacing-horizontal: 25px;
  --spacing-vertical: 50px;
}
@media only screen and (max-width: 591.98px) {
  :root {
    --spacing-vertical: 30px;
  }
}
:root {
  --spacing-huge: 100px;
  --spacing-big: 60px;
  --spacing-medium: 40px;
  --spacing-small: 20px;
  /* Content */
  --single-content-font: inherit;
  --single-content-font-size: 1.1em;
  /* Single post title — Design > Single post. The three that the customizer can
     leave unset var() at the heading role instead of restating its numbers: the
     post title is a heading, so making the heading uppercase (or dropping the
     uppercase) has to reach it. The literals below are the ones with no heading
     equivalent — h1-h6 are sized individually, so the title owns its own size. */
  --single-title-font: var(--heading-font);
  --single-title-font-size: 1.6em;
  --single-title-font-weight: var(--heading-font-weight);
  --single-title-letter-spacing: 0;
  --single-title-text-transform: var(--heading-text-transform);
  --single-title-line-height: 1.25;
  /* Single post subtitle — Design > Single post. Same arrangement against the
     body role, which is the one it reads as a part of. */
  --single-subtitle-font: var(--body-font);
  --single-subtitle-font-size: 1.1em;
  --single-subtitle-font-weight: var(--body-font-weight);
  --single-subtitle-letter-spacing: 0;
  --single-subtitle-text-transform: var(--body-text-transform);
  --single-subtitle-line-height: 1.5;
  /* Forms */
  --form--color-text: var(--color-black);
  --form--spacing-unit: 10px;
  --form--border-color: #767676;
  /* Admin-bar height */
  --admin-bar--height: 0px;
}

@media screen and (max-width: 700px) {
  :root {
    --narrow-width: 100%;
  }
}
@media only screen and (max-width: 1089.98px) {
  :root {
    --footer-padding-top: 4em;
  }
}
@media only screen and (max-width: 591.98px) {
  :root {
    --footer-padding-top: 2em;
    --footer-padding-bottom: 2em;
  }
}
::-moz-selection {
  color: var(--selection-color);
  background-color: var(--selection-bg-color);
}
::selection {
  color: var(--selection-color);
  background-color: var(--selection-bg-color);
}

.admin-bar {
  --admin-bar--height: 32px;
}
@media only screen and (max-width: 782px) {
  .admin-bar {
    --admin-bar--height: 46px;
  }
}

#page {
  overflow: hidden;
}

/* has line top
------------------------------ */
/* pagination
------------------------------ */
.wp-block-query-pagination-numbers, .page-links, .nav-links {
  display: flex;
  align-items: center;
  flex-flow: row wrap;
  justify-content: center;
}
.wp-block-query-pagination-numbers > a, .page-links > a, .nav-links > a {
  color: inherit;
  display: block;
}
.wp-block-query-pagination-numbers > span, .page-links > span, .nav-links > span {
  opacity: 0.5;
}
.wp-block-query-pagination-numbers > * + *, .page-links > * + *, .nav-links > * + * {
  margin-left: 10px;
}
.wp-block-query-pagination-numbers > *, .page-links > *, .nav-links > * {
  display: block;
  text-align: center;
  line-height: 32px;
  height: 32px;
  padding: 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.9em;
  text-decoration: none;
}
.wp-block-query-pagination-numbers > *.next, .page-links > *.next, .nav-links > *.next, .wp-block-query-pagination-numbers > *.prev, .page-links > *.prev, .nav-links > *.prev {
  display: flex;
  align-items: center;
  width: auto;
}
.wp-block-query-pagination-numbers > *.next svg, .page-links > *.next svg, .nav-links > *.next svg, .wp-block-query-pagination-numbers > *.prev svg, .page-links > *.prev svg, .nav-links > *.prev svg {
  width: 16px;
  height: 16px;
}
.wp-block-query-pagination-numbers > *.next svg, .page-links > *.next svg, .nav-links > *.next svg {
  margin-left: 4px;
}
.wp-block-query-pagination-numbers > *.prev svg, .page-links > *.prev svg, .nav-links > *.prev svg {
  margin-right: 4px;
}

/* link hover
------------------------------ */
.author-title a, .wp-block-query-pagination-numbers > a, .page-links > a, .nav-links > a {
  color: inherit;
}
.author-title a:hover, .wp-block-query-pagination-numbers > a:hover, .page-links > a:hover, .nav-links > a:hover {
  text-decoration: underline;
  text-decoration-thickness: 3px;
}

/* meta
------------------------------ */
.widget_nav_menu nav > ul ul,
.widget_nav_menu nav > ul ol,
.wp-block-archives-list ul,
.wp-block-archives-list ol,
.wp-block-categories-list ul,
.wp-block-categories-list ol,
.wp-block-latest-posts__list ul,
.wp-block-latest-posts__list ol,
.wp-block-page-list ul,
.wp-block-page-list ol,
.wp-block-rss ul,
.wp-block-rss ol,
.widget_rss ul ul,
.widget_rss ul ol,
.widget_archive ul ul,
.widget_archive ul ol,
.widget_nav_menu ul ul,
.widget_nav_menu ul ol,
.widget_meta ul ul,
.widget_meta ul ol,
.widget_recent_comments ul ul,
.widget_recent_comments ul ol,
.widget_recent_entries ul ul,
.widget_recent_entries ul ol,
.widget_pages ul ul,
.widget_pages ul ol,
.widget_categories ul ul,
.widget_categories ul ol,
.widget_product_categories ul ul,
.widget_product_categories ul ol, .widget_nav_menu nav > ul,
.wp-block-archives-list,
.wp-block-categories-list,
.wp-block-latest-posts__list,
.wp-block-page-list,
.wp-block-rss,
.widget_rss ul,
.widget_archive ul,
.widget_nav_menu ul,
.widget_meta ul,
.widget_recent_comments ul,
.widget_recent_entries ul,
.widget_pages ul,
.widget_categories ul,
.widget_product_categories ul, .wp-block-latest-comments__comment-meta, .entry-meta, #reply-title,
.comments-title, .reply, .comment-metadata, .entry-tags, .offcanvas-close span, blockquote cite,
blockquote footer {
  font-family: var(--heading-font);
  font-size: 11px;
  text-transform: uppercase;
  font-weight: var(--heading-font-weight);
  letter-spacing: 0.3px;
}
.wp-block-archives-list ul a,
.wp-block-archives-list ol a,
.wp-block-categories-list ul a,
.wp-block-categories-list ol a,
.wp-block-latest-posts__list ul a,
.wp-block-latest-posts__list ol a,
.wp-block-page-list ul a,
.wp-block-page-list ol a,
.wp-block-rss ul a,
.wp-block-rss ol a,
.widget_rss ul ul a,
.widget_rss ul ol a,
.widget_archive ul ul a,
.widget_archive ul ol a,
.widget_nav_menu ul ul a,
.widget_nav_menu ul ol a,
.widget_meta ul ul a,
.widget_meta ul ol a,
.widget_recent_comments ul ul a,
.widget_recent_comments ul ol a,
.widget_recent_entries ul ul a,
.widget_recent_entries ul ol a,
.widget_pages ul ul a,
.widget_pages ul ol a,
.widget_categories ul ul a,
.widget_categories ul ol a,
.widget_product_categories ul ul a,
.widget_product_categories ul ol a,
.wp-block-archives-list a,
.wp-block-categories-list a,
.wp-block-latest-posts__list a,
.wp-block-page-list a,
.wp-block-rss a,
.widget_rss ul a,
.widget_archive ul a,
.widget_nav_menu ul a,
.widget_meta ul a,
.widget_recent_comments ul a,
.widget_recent_entries ul a,
.widget_pages ul a,
.widget_categories ul a,
.widget_product_categories ul a, .wp-block-latest-comments__comment-meta a, .entry-meta a, #reply-title a,
.comments-title a, .reply a, .comment-metadata a, .entry-tags a, .offcanvas-close span a, blockquote cite a,
blockquote footer a {
  color: inherit;
  text-decoration: none;
  transition: all 0.1s;
}
.wp-block-archives-list a:hover,
.wp-block-categories-list a:hover,
.wp-block-latest-posts__list a:hover,
.wp-block-page-list a:hover,
.wp-block-rss a:hover,
.widget_rss ul a:hover,
.widget_archive ul a:hover,
.widget_nav_menu ul a:hover,
.widget_meta ul a:hover,
.widget_recent_comments ul a:hover,
.widget_recent_entries ul a:hover,
.widget_pages ul a:hover,
.widget_categories ul a:hover,
.widget_product_categories ul a:hover, .wp-block-latest-comments__comment-meta a:hover, .entry-meta a:hover, #reply-title a:hover,
.comments-title a:hover, .reply a:hover, .comment-metadata a:hover, .entry-tags a:hover, .offcanvas-close span a:hover, blockquote cite a:hover,
blockquote footer a:hover {
  opacity: 0.6;
  text-decoration: none;
}

/* button
------------------------------ */
.header-button, .wp-block-button.is-style-outline .wp-block-button__link, .wp-block-button__link, button,
input[type=submit],
.button {
  position: relative;
  background: none;
  text-decoration: none;
  text-align: center;
  font-weight: var(--heading-font-weight);
  text-transform: var(--heading-text-transform);
  font-size: 10px;
  letter-spacing: 2px;
  padding: 13px 40px;
  line-height: 24px;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  transition: all 0.1s ease-out;
  cursor: pointer;
  font-family: var(--heading-font);
}
.header-button:hover, .wp-block-button.is-style-outline .wp-block-button__link:hover, .wp-block-button__link:hover, button:hover,
input[type=submit]:hover,
.button:hover {
  background: var(--color-black);
  border-color: var(--color-black);
  color: white;
}

.header-button--outline, .wp-block-button.is-style-outline .wp-block-button__link {
  color: inherit;
  border: 1px solid;
  padding-top: 12px;
  padding-bottom: 12px;
}
.header-button--outline:hover, .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: none;
  color: inherit;
  border: 1px solid;
}

.header-button--black, .wp-block-button__link, button,
input[type=submit],
.button {
  color: white;
  background-color: black;
}

.header-button {
  padding: 8px 30px;
}

.header-button--outline {
  padding: 6px 30px;
}

/* box sizing
https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
------------------------------------------------- */
html {
  /* Apply border-box across the entire page. */
  box-sizing: border-box;
  font-family: var(--body-font);
  line-height: var(--body-line-height);
}

/**
 * Relax the definition a bit, to allow components to override it manually.
 */
*, *::before, *::after {
  box-sizing: inherit;
}

html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
form,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
  padding: 0;
  margin: 0;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

/* body
------------------------------------------------- */
body {
  background: var(--body-background);
  text-align: left;
  font-family: var(--body-font);
  font-size: var(--body-font-size);
  font-weight: var(--body-font-weight);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  text-transform: var(--body-text-transform);
  color: var(--body-color);
}
@media only screen and (max-width: 591.98px) {
  body {
    font-size: 0.9em;
  }
}

/* heading
------------------------------------------------- */
h1, h2, h3, h4, h5, h6, .heading-font, .comment-list .fn {
  font-family: var(--heading-font);
  font-weight: var(--heading-font-weight);
  letter-spacing: var(--heading-letter-spacing);
  line-height: var(--heading-line-height);
  text-transform: var(--heading-text-transform);
  color: var(--heading-color);
}

h1 {
  font-size: var(--heading-font-size-h1);
}

h2 {
  font-size: var(--heading-font-size-h2);
}

h3 {
  font-size: var(--heading-font-size-h3);
}

h4 {
  font-size: var(--heading-font-size-h4);
}

h5 {
  font-size: var(--heading-font-size-h5);
}

h6 {
  font-size: var(--heading-font-size-h6);
}

/* misc
------------------------------------------------- */
b,
strong {
  font-weight: bolder;
}

dfn,
cite,
em,
i {
  font-style: italic;
}

pre {
  white-space: pre;
  overflow-x: auto;
}

.entry-content > code {
  display: block;
}

/* helpful classes
------------------------------------------------- */
.rural-blog-warning {
  background: red;
  color: white;
  padding: 10px;
}
.rural-blog-warning p {
  margin: 0;
}
.rural-blog-warning p a {
  color: inherit;
}

.hide {
  display: none;
}

/* link
------------------------------------------------- */
a {
  cursor: pointer;
  text-decoration: underline;
  color: var(--color-link);
}

a:hover {
  text-decoration: none;
}

.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
  outline: 2px dotted;
}

/* media
------------------------------------------------- */
img {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

.entry-content img {
  max-width: 100%;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object,
video {
  max-width: 100%;
}

/* Media captions */
figcaption,
.wp-caption,
.wp-caption-text,
.wp-block-embed figcaption {
  font-size: 1em;
  line-height: var(--heading-line-height);
  margin-top: calc(0.5 * var(--spacing-unit));
  margin-bottom: var(--spacing-unit);
  text-align: center;
  opacity: 0.7;
}
.alignleft figcaption, .alignright figcaption,
.alignleft .wp-caption,
.alignright .wp-caption,
.alignleft .wp-caption-text,
.alignright .wp-caption-text,
.alignleft .wp-block-embed figcaption,
.alignright .wp-block-embed figcaption {
  margin-bottom: 0;
}
figcaption a,
.wp-caption a,
.wp-caption-text a,
.wp-block-embed figcaption a {
  color: var(--color-black);
  text-decoration: none;
  text-transform: uppercase;
}
figcaption a:hover,
.wp-caption a:hover,
.wp-caption-text a:hover,
.wp-block-embed figcaption a:hover {
  text-decoration: underline;
}

/* WP Smiley */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
  border: none;
  margin-bottom: 0;
  margin-top: 0;
  padding: 0;
}

/* Table
-------------------- */
table {
  width: 100%;
  border: 1px solid var(--color-border);
  border-collapse: collapse;
}

td, th {
  border: 1px solid var(--color-border);
  padding: 0.5em;
  text-align: center;
}

/* classic gallery
------------------------------------------------- */
.gallery {
  display: flex;
  flex-flow: row wrap;
  margin: 0 -4px 24px;
}

.gallery-item {
  display: block;
  text-align: center;
  padding: 4px;
  margin: 0;
}

.gallery-columns-2 .gallery-item {
  width: 50%;
}

.gallery-columns-3 .gallery-item {
  width: 33.33%;
}

.gallery-columns-4 .gallery-item {
  width: 25%;
}

.gallery-columns-5 .gallery-item {
  width: 20%;
}

.gallery-columns-6 .gallery-item {
  width: 16.66%;
}

.gallery-columns-7 .gallery-item {
  width: 14.28%;
}

.gallery-columns-8 .gallery-item {
  width: 12.5%;
}

.gallery-columns-9 .gallery-item {
  width: 11.11%;
}

.gallery-columns-10 .gallery-item {
  width: 10%;
}

/* blockquote
------------------------------------------------- */
blockquote {
  padding: 0;
  position: relative;
  border: 0;
  text-transform: uppercase;
  font-family: var(--heading-font);
  letter-spacing: 1px;
  font-weight: 600;
}
blockquote a {
  color: inherit;
}
blockquote cite,
blockquote footer {
  margin-top: 1em;
  display: block;
}
blockquote cite:before,
blockquote footer:before {
  content: "—";
  margin-right: 10px;
}

blockquote cite {
  font-size: 11px;
}

/* embeds
------------------------------------------------- */
.wp-block-embed-twitter.alignwide {
  margin-left: auto;
  margin-right: auto;
}

/* form
------------------------------------------------- */
input[type=text],
input[type=email],
input[type=url],
input[type=password],
input[type=search],
input[type=number],
input[type=tel],
input[type=date],
input[type=month],
input[type=week],
input[type=time],
input[type=datetime],
input[type=datetime-local],
input[type=color],
.site textarea {
  border: 0;
  border-radius: 0;
  color: var(--form--color-text);
  max-width: 100%;
  background: rgba(0, 0, 0, 0.07);
  transition: color 0.15s, background 0.15s, border 0.15s;
  font-size: 16px;
  padding: 13px 16px;
  line-height: 24px;
}
@media only screen and (max-width: 591.98px) {
  input[type=text],
  input[type=email],
  input[type=url],
  input[type=password],
  input[type=search],
  input[type=number],
  input[type=tel],
  input[type=date],
  input[type=month],
  input[type=week],
  input[type=time],
  input[type=datetime],
  input[type=datetime-local],
  input[type=color],
  .site textarea {
    padding: 8px 12px;
  }
}
input[type=text],
input[type=email],
input[type=url],
input[type=password],
input[type=search],
input[type=number],
input[type=tel],
input[type=date],
input[type=month],
input[type=week],
input[type=time],
input[type=datetime],
input[type=datetime-local],
input[type=color],
.site textarea {
  font-family: var(--body-font);
  width: 400px;
}
@media only screen and (max-width: 591.98px) {
  input[type=text],
  input[type=email],
  input[type=url],
  input[type=password],
  input[type=search],
  input[type=number],
  input[type=tel],
  input[type=date],
  input[type=month],
  input[type=week],
  input[type=time],
  input[type=datetime],
  input[type=datetime-local],
  input[type=color],
  .site textarea {
    width: 100%;
  }
}
input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=number]:focus,
input[type=tel]:focus,
input[type=date]:focus,
input[type=month]:focus,
input[type=week]:focus,
input[type=time]:focus,
input[type=datetime]:focus,
input[type=datetime-local]:focus,
input[type=color]:focus,
.site textarea:focus {
  color: var(--form--color-text);
  outline: 2px dotted var(--form--border-color);
  outline-offset: 2px;
  background: rgba(0, 0, 0, 0.1);
}
input[type=text]:disabled,
input[type=email]:disabled,
input[type=url]:disabled,
input[type=password]:disabled,
input[type=search]:disabled,
input[type=number]:disabled,
input[type=tel]:disabled,
input[type=date]:disabled,
input[type=month]:disabled,
input[type=week]:disabled,
input[type=time]:disabled,
input[type=datetime]:disabled,
input[type=datetime-local]:disabled,
input[type=color]:disabled,
.site textarea:disabled {
  opacity: 0.7;
}

.site textarea {
  width: 100%;
}

input[type=color] {
  padding: calc(var(--form--spacing-unit) / 2);
  height: calc(4 * var(--form--spacing-unit));
}

input[type=email],
input[type=url] {
  /*rtl:ignore*/
  direction: ltr;
}

select {
  border: 1px solid var(--form--border-color);
  color: var(--form--color-text);
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  line-height: var(--body-line-height);
  padding: var(--form--spacing-unit) calc(3 * var(--form--spacing-unit)) var(--form--spacing-unit) var(--form--spacing-unit);
  background: var(--color-white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%2328303d'><polygon points='0,0 10,0 5,5'/></svg>") no-repeat;
  background-position: right var(--form--spacing-unit) top 60%;
}
select:focus {
  outline-offset: 2px;
  outline: 2px dotted var(--form--border-color);
}

textarea {
  width: 100%;
}

label {
  font-family: var(--heading-font);
  font-size: 0.7em;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 0.5px;
}

/**
https://css-tricks.com/custom-styling-form-inputs-with-modern-css-features/
https://codepen.io/aaroniker/pen/ZEYoxEY by Aaron Iker.
License: MIT.
*/
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
  input[type=checkbox],
  input[type=radio] {
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    width: 25px;
    height: 25px;
    border: var(--form--border-width) solid var(--form--border-color);
    background: #ddd;
  }
  input[type=checkbox]:disabled,
  input[type=radio]:disabled {
    opacity: 0.7;
  }
  input[type=checkbox]:focus {
    outline-offset: 2px;
    outline: 2px dotted var(--form--border-color);
  }
  input[type=checkbox]:after {
    content: "";
    opacity: 0;
    display: block;
    left: 8px;
    top: 4px;
    position: absolute;
    width: 7px;
    height: 13px;
    border: 3px solid var(--form--color-text);
    border-top: 0;
    border-left: 0;
    transform: rotate(30deg);
  }
  input[type=checkbox]:checked {
    color: var(--form--color-text);
  }
  input[type=checkbox]:checked:after {
    opacity: 1;
  }
  input[type=radio] {
    border-radius: 50%;
  }
  input[type=radio]:focus {
    outline-offset: 2px;
    outline: 2px dotted var(--form--border-color);
  }
  input[type=radio]:after {
    content: "";
    opacity: 0;
    display: block;
    left: 3px;
    top: 3px;
    position: absolute;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--form--color-text);
  }
  input[type=radio]:checked {
    border: 4px solid var(--form--border-color);
  }
  input[type=radio]:checked:after {
    opacity: 1;
  }
  input[type=radio]:checked:focus {
    outline-offset: 4px;
    outline: 2px dotted var(--form--border-color);
  }
}
input[type=checkbox] + label,
input[type=radio] + label {
  display: inline;
  padding-left: 10px;
  vertical-align: top;
}

fieldset {
  display: grid;
  border-color: var(--color-secondary);
  padding: var(--spacing-horizontal);
}
fieldset legend {
  font-size: var(--font-size-lg);
}
fieldset input[type=submit] {
  max-width: -moz-max-content;
  max-width: max-content;
}
fieldset input:not([type=submit]) {
  margin-bottom: var(--spacing-unit);
}
fieldset input[type=radio], fieldset input[type=checkbox] {
  margin-bottom: 0;
}
fieldset input[type=radio] + label, fieldset input[type=checkbox] + label {
  font-size: var(--form--font-size);
  padding-left: 0;
  margin-bottom: var(--spacing-unit);
}

::-moz-placeholder {
  opacity: 1;
}

.post-password-message {
  font-size: var(--font-size-xs);
}

.post-password-form {
  display: flex;
  flex-wrap: wrap;
}
.post-password-form__label {
  width: 100%;
  margin-bottom: 0;
}
.post-password-form input[type=password] {
  flex-grow: 1;
  margin-top: calc(var(--spacing-vertical) / 3);
  margin-right: calc(0.66 * var(--spacing-horizontal));
}
.post-password-form__submit {
  margin-top: calc(var(--spacing-vertical) / 3);
}
@media only screen and (max-width: 821.98px) {
  .post-password-form__submit {
    margin-left: calc(0.4 * var(--spacing-horizontal));
  }
}

/* button
------------------------------------------------- */
button,
input[type=submit],
.button {
  cursor: pointer;
}

/* pre
------------------------------------------------- */
code,
kbd,
tt,
var,
samp,
pre {
  font-family: Inconsolata, monospace;
  hyphens: none;
}

pre {
  background-color: transparent;
  background-color: rgba(0, 0, 0, 0.07);
  background-color: whitesmoke;
  border: 1px dashed #bababa;
  font-size: 14px;
  border: 0;
  line-height: 1.6;
  margin-bottom: 1.6em;
  max-width: 100%;
  overflow: auto;
  padding: 1.2em;
  border-radius: 0;
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.wp-block-code,
.wp-block-preformatted {
  border: 0;
  border-radius: 0;
}

mark {
  background: #ffd;
  padding: 0 5px;
}

/* list
------------------------------------------------- */
ul,
ol {
  margin: 0;
  padding-left: 1.5em;
  line-height: 1.45;
}
ul.aligncenter,
ol.aligncenter {
  list-style-position: inside;
  padding: 0;
}
ul.alignright,
ol.alignright {
  list-style-position: inside;
  text-align: right;
  padding: 0;
}

li {
  margin-bottom: 0.3em;
}

ul ul,
ul ol,
ol ul,
ol ol {
  padding-left: 2em;
  margin-top: 0.2em;
}
ul ul li,
ul ol li,
ol ul li,
ol ol li {
  margin-bottom: 0;
}

ul {
  list-style-type: square;
}

ol {
  list-style-type: decimal;
}
ol ul {
  list-style-type: circle;
}

dt {
  font-family: var(--definition-term--font-family);
  font-weight: bold;
}

dd {
  margin: 0;
  padding-left: calc(2 * var(--spacing-horizontal));
}

/* clearing
------------------------------------------------- */
.container:before,
.container:after,
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
  content: "";
  display: table;
  table-layout: fixed;
}

.container:after,
.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
  clear: both;
}

/* site layout
------------------------------------------------- */
/* The max() is a floor on the customizer's Container width: whatever the setting
   says, .container never caps below 800px. It guards a half-typed value (the
   preview refreshes on "128" on the way to "1280px") and a saved silly one. It
   is unit-agnostic — max() compares 80%, 60rem and 900px alike. No media query
   needed: width is 94%/96%, so on any viewport under 800px the percentage still
   wins and nothing overflows. */
.container {
  width: var(--container-width);
  display: block;
  max-width: max(var(--container-max-width), 800px);
  margin: 0 auto;
}

/* spacing
------------------------------------------------- */
.site-main > article > *,
.site-main > .not-found > *,
.entry-content > *,
[class*=inner-container] > *,
.wp-block-template-part > *,
.wp-block-post-template :where(li > *) {
  margin-top: calc(0.666 * var(--spacing-vertical));
  margin-bottom: calc(0.666 * var(--spacing-vertical));
}
@media only screen and (max-width: 591.98px) {
  .site-main > article > *,
  .site-main > .not-found > *,
  .entry-content > *,
  [class*=inner-container] > *,
  .wp-block-template-part > *,
  .wp-block-post-template :where(li > *) {
    margin-top: var(--spacing-vertical);
    margin-bottom: var(--spacing-vertical);
  }
}
.site-main > article > *:first-child,
.site-main > .not-found > *:first-child,
.entry-content > *:first-child,
[class*=inner-container] > *:first-child,
.wp-block-template-part > *:first-child,
.wp-block-post-template :where(li > *):first-child {
  margin-top: 0;
}
.site-main > article > *:last-child,
.site-main > .not-found > *:last-child,
.entry-content > *:last-child,
[class*=inner-container] > *:last-child,
.wp-block-template-part > *:last-child,
.wp-block-post-template :where(li > *):last-child {
  margin-bottom: 0;
}

/* ============================================================================
   04. BLOCKS
   ========================================================================== */
/* ---------------------------- general align */
@media only screen and (min-width: 482px) {
  .entry-content > .alignright,
  .entry-content > .alignleft,
  .entry-content > .blocks-gallery-grid:not(.has-nested-images).alignleft,
  .entry-content > .blocks-gallery-grid:not(.has-nested-images).alignright,
  .entry-content > .wp-block-gallery:not(.has-nested-images).alignleft,
  .entry-content > .wp-block-gallery:not(.has-nested-images).alignright {
    max-width: 50%;
  }
  .alignright,
  .blocks-gallery-grid:not(.has-nested-images).alignright,
  .wp-block-gallery:not(.has-nested-images).alignright {
    float: right;
    margin-top: 0.5em;
    margin-bottom: 1em;
    margin-left: 1em;
  }
  .alignleft,
  .blocks-gallery-grid:not(.has-nested-images).alignleft,
  .wp-block-gallery:not(.has-nested-images).alignleft {
    float: left;
    margin-top: 0.5em;
    margin-bottom: 1em;
    margin-right: 1em;
  }
}
/* ---------------------------- gallery */
.wp-block-gallery:not(.has-nested-images) {
  margin: 2em 0;
}

/* ---------------------------- blockquote */
blockquote.wp-block-quote {
  position: relative;
  font-size: 1em;
  border: 0;
}
blockquote.wp-block-quote:before {
  content: "“";
  font-size: 2em;
  font-family: serif;
}
blockquote.wp-block-quote cite {
  font-size: 11px;
  font-style: normal;
}
blockquote.wp-block-quote p {
  font-size: 1.1em;
}

/* ---------------------------- pull quote */
.wp-block-pullquote {
  font-size: 1em;
  padding-top: 2em;
  padding-bottom: 2em;
}

/* ---------------------------- separator */
/* ---------------------------- button */
/* ---------------------------- gallery */
.gallery-caption {
  font-size: 0.8em;
  text-align: left;
}

.blocks-gallery-caption {
  color: inherit;
}

/* ---------------------------- image */
.entry-content > figure:not(.alignwide):not(.alignfull) {
  max-width: 100%;
}

.wp-block-image {
  text-align: center;
}
.wp-block-image .alignright {
  margin-left: calc(var(--spacing-horizontal));
}
.wp-block-image .alignleft {
  margin-right: calc(var(--spacing-horizontal));
}
.wp-block-image a:focus img {
  outline-offset: 2px;
}

.entry-content > *[class=wp-block-image],
.entry-content [class*=inner-container] > *[class=wp-block-image] {
  margin-top: 0;
}
.entry-content > *[class=wp-block-image] + *,
.entry-content [class*=inner-container] > *[class=wp-block-image] + * {
  margin-top: 0;
}

/* alignwide / alignfull - centered breakout, only when the screen is wide enough */
@media only screen and (min-width: 822px) {
  .alignwide,
  .wp-block-gallery:not(.has-nested-images).alignwide {
    width: var(--wide-width);
    max-width: 90vw;
    margin-left: 50%;
    transform: translateX(-50%);
  }
  .alignwide figcaption,
  .alignwide .wp-element-caption,
  .wp-block-gallery:not(.has-nested-images).alignwide figcaption,
  .wp-block-gallery:not(.has-nested-images).alignwide .wp-element-caption {
    max-width: var(--narrow-width);
    margin-inline: auto;
  }
}

/* alignfull */
@media only screen and (min-width: 822px) {
  .alignfull,
  .wp-block-gallery:not(.has-nested-images).alignfull {
    width: 96vw;
    margin-left: 50%;
    transform: translateX(-50%);
  }
  .alignfull figcaption,
  .alignfull .wp-element-caption,
  .wp-block-gallery:not(.has-nested-images).alignfull figcaption,
  .wp-block-gallery:not(.has-nested-images).alignfull .wp-element-caption {
    max-width: var(--narrow-width);
    margin-inline: auto;
  }
}

.alignleft figcaption {
  text-align: left;
}

.alignright figcaption {
  text-align: left;
}

.entry-content .wp-block-image figcaption {
  font-size: 0.8em;
}
.entry-content .wp-block-image figure.alignleft {
  max-width: 50%;
}

@media only screen and (max-width: 591.98px) {
  .entry-content > .wp-block-image > .alignleft,
  .entry-content > .wp-block-image > .alignright {
    max-width: 50%;
  }
}

/* ---------------------------- drop cap */
.has-drop-cap:not(:focus):first-letter {
  float: left;
  font-size: 4em;
  font-style: normal;
  font-weight: var(--heading-font-weight);
  line-height: 0.7;
  margin: 0.2em 0.2em 0 0;
}

/* ---------------------------- cover */
.wp-block-cover .wp-block-cover__inner-container .wp-block-heading {
  text-transform: uppercase;
  letter-spacing: 1px;
}
.wp-block-cover > img {
  transition: all 0.2s;
}
.wp-block-cover:hover > img {
  transform: scale(1.02);
}

/* ---------------------------- details */
.wp-block-details summary {
  font-family: var(--heading-font);
  text-transform: uppercase;
}

/* ---------------------------- media text */
@media only screen and (max-width: 591.98px) {
  .wp-block-media-text > .wp-block-media-text__content {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 20px;
  }
}

.wp-block-media-text__content .wp-block-heading {
  text-transform: uppercase;
  letter-spacing: 1px;
}
.wp-block-media-text__content p {
  margin: 1em 0;
}
.wp-block-media-text__content .wp-block-buttons {
  margin-top: 2em;
}

/* ============================================================================
   05. HEADER
   ========================================================================== */
/* ---------------------------- header layout */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background-color: var(--color-header-background);
  border-bottom: 1px solid var(--color-header-border);
  color: var(--color-header-text);
}
.site-header .container {
  display: flex;
  align-items: center;
  position: relative;
  height: var(--header-height);
  /* The bar is flex, never floated, so it wants none of the global
     clearfix. Its :before/:after would otherwise blockify into two stray
     flex items — which is exactly why the default bar leans on auto margins
     instead of gap. Dropping them here lets the layouts below use `gap` and
     absolute side-runs cleanly. */
}
.site-header .container:before, .site-header .container:after {
  content: none;
}
.site-header svg path {
  fill: currentColor;
}

.admin-bar .site-header {
  top: 32px;
}

body {
  padding-top: var(--header-height);
}

@media screen and (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }
}
/* ---------------------------- branding */
@media only screen and (min-width: 1090px) {
  .site-branding {
    display: block;
    display: flex;
    align-items: center;
  }
}
.site-branding {
  max-width: 50%;
  max-height: 100%;
  overflow: hidden;
}
.site-branding img {
  height: var(--logo-height);
  max-height: 400px;
  width: auto;
  display: block;
}

.site-title {
  font-family: var(--heading-font);
  font-weight: var(--heading-font-weight);
  text-transform: uppercase;
  font-size: var(--site-title-font-size);
  letter-spacing: 1px;
  margin: 0;
  color: inherit;
  line-height: 1.1;
}
@media only screen and (max-width: 591.98px) {
  .site-title {
    letter-spacing: 0;
  }
}
.site-title a {
  color: inherit;
  text-decoration: none;
}

.site-description {
  margin: 0;
  line-height: 1.2;
  font-size: 0.8em;
}
@media only screen and (min-width: 1090px) {
  .site-description {
    margin-left: 14px;
    padding-left: 14px;
    border-left: 1px solid rgba(0, 0, 0, 0.2);
  }
}
@media only screen and (max-width: 591.98px) {
  .site-description {
    font-size: 0.9em;
  }
}

/* ---------------------------- primary navigation */
/* ---------------------------- header actions (menu + social + search + button) */
/* The right-hand half of the bar. One flex row, so `gap` owns the spacing between
   the four pieces and each of them can stay ignorant of what sits next to it. */
.header-actions {
  display: flex;
  align-items: center;
  /* Full bar height, so .header-search can stretch through it and hang its
     panel off the header's bottom edge rather than the icon's. */
  align-self: stretch;
  gap: 20px;
  /* Where the group sits is the layout's call, not the base's — the default
     bar pushes branding's margin instead (see the header-layout rules below),
     Logo-center pins the group absolute-right, Nav-below spreads it across the
     top row. So no auto margin here anymore. */
  /* Every piece hides at this breakpoint anyway — dropping the group instead
     leaves the mobile bar as just branding + hamburger. */
}
@media only screen and (max-width: 821.98px) {
  .header-actions {
    display: none;
  }
}

/* ---------------------------- header layouts
   Three arrangements of the same five pieces (branding, primary nav, social,
   search, button), chosen in Header and hung on .site-header as
   .header-layout-{default|logo-center|nav-below}. The bar is one flex .container
   whose clearfix pseudos are dropped above, so the side layouts can absolutely
   position their left/right runs and leave the logo genuinely centred.

   The SAME class is also mirrored onto <body> — but purely so the Nav-below rule
   can grow the page's padding-top from above the header (see the body rule below).
   That is why every arrangement rule here is scoped .site-header.header-layout-*
   (both classes on ONE element), NOT the bare .header-layout-* the class name
   suggests: .container / .site-branding are generic — the bare descendant selector
   would match through the <body> copy and restyle the content and footer
   containers site-wide. Compound-scoping keeps these rules inside the bar.

   Everything here is desktop-only: below the tablet breakpoint every layout
   collapses to the same branding + hamburger bar (the actions/nav/social all
   hide), so the two-row and centred rules never reach a phone. */
/* Default — logo left, then nav + actions pushed hard right. branding's auto
   margin does the split (an auto margin on the group would strand the nav in the
   middle when both are present), and the container gap spaces nav from actions. */
.site-header.header-layout-default .container {
  -moz-column-gap: 20px;
       column-gap: 20px;
}
.site-header.header-layout-default .site-branding {
  margin-right: auto;
}

/* Logo center — nav on the left, the actions trio on the right, logo centred
   between them. Both side runs are absolute (per the brief) so neither one's
   width can shove the logo off centre; the branding centres itself in the
   remaining flow. The primary nav can't stay display:flex once absolute or it
   collapses to its content width mid-bar, which is fine — it hugs the left edge. */
.site-header.header-layout-logo-center .container {
  justify-content: center;
}
.site-header.header-layout-logo-center {
  /* Logo over tagline, both centred — the base bar sits them side by side with
     a divider, which reads wrong under a centred logo. display:flex is set here,
     not left to the base rule: the base only turns branding into a flex box at
     ≥1090px, so between the tablet breakpoint (822px) and there the column
     stacking would silently fall back to left-aligned blocks. */
}
.site-header.header-layout-logo-center .site-branding {
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.site-header.header-layout-logo-center .primary-navigation {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.site-header.header-layout-logo-center .header-actions {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* Nav below — two rows. Top row: social left, logo centred, search + button
   right (the two side runs absolute again). Bottom row: the primary nav, full
   width and centred. The container grows to hold both rows, so --header-height
   sizes the top row via min-height and body.header-layout-nav-below (below) pads
   the page for the whole thing. */
.site-header.header-layout-nav-below .container {
  flex-wrap: wrap;
  height: auto;
  min-height: var(--header-height);
  justify-content: center;
}
.site-header.header-layout-nav-below {
  /* Logo over tagline, both centred and vertically centred in the top row —
     same reasoning as Logo-center. */
}
.site-header.header-layout-nav-below .site-branding {
  max-width: none;
  min-height: var(--header-height);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.site-header.header-layout-nav-below {
  /* The actions group spans the top row so its own margin can split it: social
     to the left of the logo, search + button to the right. Spanning edge to
     edge means the (absolute) group lies on top of the centred logo beneath it,
     so the box itself has to be click-through — otherwise the empty gap between
     social and search swallows every click on the site title/logo link. The
     children take their own clicks back. */
}
.site-header.header-layout-nav-below .header-actions {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--header-height);
  pointer-events: none;
}
.site-header.header-layout-nav-below .header-actions > * {
  pointer-events: auto;
}
.site-header.header-layout-nav-below .header-actions .social-navigation {
  margin-right: auto;
}
.site-header.header-layout-nav-below {
  /* Second row: the menu, centred, on its own strip under the top row. */
}
.site-header.header-layout-nav-below .primary-navigation {
  flex: 1 0 100%;
  display: flex;
  justify-content: center;
  border-top: 1px solid var(--color-header-border);
}
.site-header.header-layout-nav-below .primary-navigation ul.menu-wrapper {
  justify-content: center;
  min-height: var(--subheader-height);
}

/* Pad the page for the extra menu row so the fixed two-row bar never covers the
   top of the content. Mirrors --header-height's job for the single-row bars. This
   is the ONE rule that genuinely wants the <body> class — the page box is above
   the header in the tree, so it can't read the header's own class. */
body.header-layout-nav-below {
  padding-top: calc(var(--header-height) + var(--subheader-height));
  /* Below the breakpoint the menu row is gone (nav hides with the rest), so the
     bar is a single row again and only needs --header-height of clearance. */
}
@media only screen and (max-width: 821.98px) {
  body.header-layout-nav-below {
    padding-top: var(--header-height);
  }
}

/* Stacked branding: drop the tagline's side divider and left padding (a
   horizontal-row treatment) and let it sit centred under the logo instead. */
.site-header.header-layout-logo-center .site-description,
.site-header.header-layout-nav-below .site-description {
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
}

/* Mobile: every layout is the same plain bar — branding on the left, hamburger
   on the right, and nothing else. Undo the desktop nav/branding placement so a
   centred or two-row layout doesn't leak onto small screens. */
@media only screen and (max-width: 821.98px) {
  /* Scoped to each layout class, not the bare `.site-header .primary-navigation`:
     Nav-below's own rule above sets display:flex through TWO classes on the bar,
     and a media query adds no specificity — so the one-class version lost and the
     menu row kept rendering under the mobile bar. */
  .site-header.header-layout-default .primary-navigation,
  .site-header.header-layout-logo-center .primary-navigation,
  .site-header.header-layout-nav-below .primary-navigation {
    display: none;
  }
  .site-header.header-layout-logo-center .container,
  .site-header.header-layout-nav-below .container {
    justify-content: flex-start;
    flex-wrap: nowrap;
    height: var(--header-height);
    min-height: 0;
  }
  .site-header.header-layout-logo-center,
  .site-header.header-layout-nav-below {
    /* Back to the default bar's block branding — logo then tagline, left
       aligned — so the stacked/centred desktop treatment doesn't leak down. */
  }
  .site-header.header-layout-logo-center .site-branding,
  .site-header.header-layout-nav-below .site-branding {
    display: block;
    min-height: 0;
    text-align: left;
  }
}
.primary-navigation {
  font-family: var(--nav-font);
}

.primary-navigation ul.menu-wrapper {
  display: flex;
  align-items: center;
  flex-flow: row wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.primary-navigation ul.menu-wrapper a {
  transition: all 0.1s ease-out;
}
.primary-navigation ul.menu-wrapper li {
  margin: 0;
}
.primary-navigation ul.menu-wrapper > li {
  display: flex;
  align-items: center;
  position: relative;
}
.primary-navigation ul.menu-wrapper > li + li {
  margin-left: 20px;
}
.primary-navigation ul.menu-wrapper > li a {
  display: block;
  color: var(--color-header-link);
  text-decoration: none;
  text-transform: var(--nav-text-transform);
  font-size: var(--nav-font-size);
  letter-spacing: var(--nav-letter-spacing);
  font-weight: var(--nav-font-weight);
  line-height: var(--nav-line-height);
  padding: 5px 0;
  transition: all 0.1s;
}
.primary-navigation ul.menu-wrapper > li a:hover {
  color: var(--color-header-link-hover);
}
.primary-navigation ul.menu-wrapper > li.current-menu-item > a, .primary-navigation ul.menu-wrapper > li.current-menu-ancestor > a {
  color: var(--color-header-link-hover);
}
.primary-navigation ul.menu-wrapper > li ul {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  width: 180px;
  z-index: 20;
  background: var(--color-nav-dropdown-bg);
  list-style: none;
  margin: 0;
  padding: 18px 0;
}
.primary-navigation ul.menu-wrapper > li ul > li {
  position: relative;
}
.primary-navigation ul.menu-wrapper > li ul .sub-menu-toggle {
  display: none;
}
.primary-navigation ul.menu-wrapper > li ul a {
  transition: all 0.1s;
  padding: 3px 18px;
  opacity: 0;
  visibility: hidden;
  transition-delay: 0.05s;
  color: var(--color-nav-dropdown);
}
.primary-navigation ul.menu-wrapper > li ul a:hover {
  color: var(--color-nav-dropdown-hover);
}
.primary-navigation ul.menu-wrapper > li ul ul {
  top: 0;
  left: 100%;
}
.primary-navigation ul.menu-wrapper > li:hover > ul, .primary-navigation ul.menu-wrapper > li:focus-within > ul, .primary-navigation ul.menu-wrapper > li.is-open > ul,
.primary-navigation ul.menu-wrapper > li li:hover > ul,
.primary-navigation ul.menu-wrapper > li li:focus-within > ul,
.primary-navigation ul.menu-wrapper > li li.is-open > ul {
  opacity: 1;
  visibility: visible;
}
.primary-navigation ul.menu-wrapper > li:hover > ul a, .primary-navigation ul.menu-wrapper > li:focus-within > ul a, .primary-navigation ul.menu-wrapper > li.is-open > ul a,
.primary-navigation ul.menu-wrapper > li li:hover > ul a,
.primary-navigation ul.menu-wrapper > li li:focus-within > ul a,
.primary-navigation ul.menu-wrapper > li li.is-open > ul a {
  transform: translate(0, 0);
  opacity: 1;
  visibility: visible;
}

.sub-menu-toggle {
  border: 0;
  padding: 0;
  margin: 0;
  outline: 0;
  background: none;
  color: var(--color-header-link);
  padding-left: 5px;
  display: block;
  opacity: 0.4;
  background: none;
}
.sub-menu-toggle:hover {
  color: currentColor;
  background: none;
  border: 0;
}
.sub-menu-toggle:focus {
  outline: 2px dotted;
}
.sub-menu-toggle span {
  display: block;
}
.sub-menu-toggle svg {
  width: 12px;
  height: 12px;
}

.sub-menu-toggle .iconup {
  display: none;
}

.primary-navigation ul.menu-wrapper > li:hover > .sub-menu-toggle .iconup,
.primary-navigation ul.menu-wrapper > li:focus-within > .sub-menu-toggle .iconup,
.primary-navigation ul.menu-wrapper > li.is-open > .sub-menu-toggle .iconup {
  display: block;
}
.primary-navigation ul.menu-wrapper > li:hover > .sub-menu-toggle .icondown,
.primary-navigation ul.menu-wrapper > li:focus-within > .sub-menu-toggle .icondown,
.primary-navigation ul.menu-wrapper > li.is-open > .sub-menu-toggle .icondown {
  display: none;
}

/* ---------------------------- social */
.social-navigation {
  margin-left: auto;
}
.social-navigation svg path {
  fill: currentColor;
}

/* In the bar it's one item in the .header-actions row — the gap spaces it, and
   the auto margin above (which the footer still wants) would fight that. */
.header-actions .social-navigation {
  margin-left: 0;
}

.social-navigation .social-navigation-wrapper {
  display: flex;
  align-items: center;
  flex-flow: row wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.social-navigation .social-navigation-wrapper > li {
  display: block;
  margin: 0;
}
.social-navigation .social-navigation-wrapper > li > a {
  display: block;
  height: 20px;
  line-height: 20px;
  text-decoration: none;
  padding: 0 8px;
  transition: all 0.2s;
}
.social-navigation .social-navigation-wrapper > li > a svg {
  width: 14px;
  height: 14px;
}

.social-navigation a {
  color: inherit;
}

.site-header .social-navigation a {
  color: var(--color-header-link);
}
.site-header .social-navigation a:hover {
  color: var(--color-header-link-hover);
}

/* ---------------------------- header search */
/* The wrapper is the positioning context; main.js flips .is-open on it. It sits
   at the right end of the header bar — margin-left:auto when it's the only thing
   on that side, a plain gap when the social nav already claimed the space. */
.header-search {
  position: relative;
  /* Full bar height, so the panel's top:100% lands on the header's bottom
     edge instead of the icon's — and the icon gets a comfortable hit area. */
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  flex: none;
  /* No room on the mobile bar — the hamburger takes the right end and the
     off-canvas panel carries the search form instead. */
}
@media only screen and (max-width: 821.98px) {
  .header-search {
    display: none;
  }
}

/* The toggle pads itself 8px a side to keep a comfortable hit area. Pull that
   padding back out of the row so the icon lands on the group's 20px rhythm
   rather than 28px, and sits flush with the container edge when it's last. */
.header-actions .header-search {
  margin-left: -8px;
  margin-right: -8px;
}

/* Toggle holds both icons stacked; .is-open swaps the magnifier for a close. */
button.header-search-toggle {
  background: none;
  outline: 0;
  padding: 0 8px;
  border: 0;
  margin: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--color-header-link);
  transition: color 0.2s;
}
button.header-search-toggle:hover {
  color: var(--color-header-link-hover);
}
button.header-search-toggle:focus-visible {
  outline: 2px dotted currentColor;
  outline-offset: 2px;
}
button.header-search-toggle svg {
  width: 16px;
  height: 16px;
  display: block;
  fill: currentColor;
}

.header-search-close-icon {
  display: none;
}

.header-search.is-open .header-search-toggle .header-search-icon {
  display: none;
}
.header-search.is-open .header-search-toggle .header-search-close-icon {
  display: block;
}

/* Panel — drops directly under the icon, anchored to the toggle's right edge
   (the search sits at the right end of the bar), so it extends leftward and
   never runs off-screen. */
.header-search-panel {
  position: absolute;
  z-index: 200;
  top: 100%;
  right: 0;
  width: 320px;
  max-width: calc(100vw - 2rem);
  padding: 16px;
  background-color: var(--color-header-background);
  border: 1px solid var(--color-border);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}
.header-search-panel[hidden] {
  display: none;
}
.header-search-panel input[type=search] {
  min-width: 0;
}

/* ---------------------------- header button */
/* The optional call-to-action from the customizer Header section. This rule is
   the look only — it's shared with the off-canvas copy, which is laid out by the
   panel, not by the bar. */
.header-button {
  /* No room on the mobile bar — the off-canvas panel carries the button
     instead (see .header-button--block), so the CTA survives the breakpoint
     rather than disappearing. */
}
@media only screen and (max-width: 821.98px) {
  .header-button {
    display: none;
  }
}

/* Bar placement: last item in the .header-actions row, spaced by its gap. */
.header-actions .header-button {
  flex: none;
}

/* Every variant keeps the padding %_button_small set, so switching style never
   resizes the button — only the outline one trades its fill for a border. */
.header-button--primary {
  color: var(--body-color);
  background-color: var(--color-accent);
}

.header-button--white {
  color: var(--color-black);
  background-color: var(--color-white);
}

/* Outline follows the header text rather than naming a color, so it stays
   legible on the light skin, the dark skin, and any custom header color. */
.header-button--outline {
  background: none;
}

/* The off-canvas copy — full width under the stacked menu, and exempt from the
   mobile hide above (the panel only ever opens on mobile). */
.header-button--block {
  display: block;
  width: 100%;
  white-space: normal;
}
@media only screen and (max-width: 821.98px) {
  .header-button--block {
    display: block;
  }
}

/* ---------------------------- hamburger */
button.offcanvas-open-btn {
  background: none;
  outline: 0;
  padding: 0;
  border: 0;
  margin: 0;
  display: block;
  width: 40px;
  height: 32px;
  text-align: right;
  cursor: pointer;
  display: none;
  color: inherit;
  margin-left: auto;
  flex: none;
}
@media only screen and (max-width: 821.98px) {
  button.offcanvas-open-btn {
    display: block;
  }
}
button.offcanvas-open-btn:focus-visible {
  outline: 2px dotted currentColor;
  outline-offset: 2px;
}

/* ---------------------------- offcanvas */
.offcanvas {
  position: fixed;
  top: 0;
  right: 0;
  width: 90%;
  max-width: 320px;
  height: 100vh;
  min-height: 100%;
  z-index: 999;
  background: inherit;
  padding: 0 32px;
  padding-top: 60px;
  padding-bottom: 60px;
  overflow-y: scroll;
  display: block;
  transition: all 0.2s ease-out;
  transform: translate(102%, 0);
  visibility: hidden;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

.admin-bar .offcanvas {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .offcanvas {
    top: 46px;
  }
}
.offcanvas::-webkit-scrollbar {
  display: none;
}

.offcanvas-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.5);
  z-index: 990;
  transition: all 0.2s ease-out;
  opacity: 0;
  visibility: hidden;
}

.html-offcanvas-open .offcanvas {
  transform: translate(0, 0);
  visibility: visible;
}
.html-offcanvas-open .offcanvas-overlay {
  opacity: 1;
  visibility: visible;
}

.offcanvas-close {
  background: none;
  color: inherit;
  padding: 0;
  border: 0;
  margin: 0;
  display: flex;
  align-items: center;
  padding: 0 10px;
  height: 48px;
  cursor: pointer;
  position: absolute;
  top: 5px;
  right: 5px;
}
.offcanvas-close:focus-visible {
  outline: 2px dotted currentColor;
  outline-offset: 2px;
}
.offcanvas-close span {
  margin-right: 4px;
  font-size: 14px;
}
.offcanvas-close svg {
  width: 18px;
  height: 18px;
}
.offcanvas-close:hover {
  background: none;
  color: inherit;
}

.offcanvas-element + .offcanvas-element {
  margin-top: 2em;
}

/* The mobile stand-in for the header search icon — no reveal, the form is just
   there at the top of the panel. */
.offcanvas-search .search-form input[type=search] {
  min-width: 0;
  font-size: 16px;
}

.offcanvas-primary-navigation {
  font-family: var(--nav-font);
  font-weight: var(--nav-font-weight);
  text-transform: var(--nav-text-transform);
  letter-spacing: var(--nav-letter-spacing);
  font-size: calc(var(--nav-font-size) + 1px);
}

.offcanvas-primary-navigation > div > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.offcanvas-primary-navigation > div > ul a {
  text-decoration: none;
  color: inherit;
  display: block;
  padding: 10px 0;
  line-height: 24px;
}
.offcanvas-primary-navigation > div > ul li {
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  display: flex;
  align-items: center;
  flex-flow: row wrap;
  margin-bottom: 0;
}
.offcanvas-primary-navigation > div > ul li a {
  width: 100%;
}
.offcanvas-primary-navigation > div > ul li ul {
  width: 100%;
}
.offcanvas-primary-navigation > div > ul li.menu-item-has-children > .sub-menu-toggle {
  display: none;
}
.offcanvas-primary-navigation > div > ul ul > li {
  padding-left: 20px;
}
.offcanvas-primary-navigation > div > ul ul {
  list-style: none;
  margin: 0;
  padding: 0;
  transition: all 0.2s ease-out;
}

.offcanvas .social-navigation-wrapper > li + li {
  margin-left: 4px;
}
.offcanvas .social-navigation .social-navigation-wrapper > li > a svg {
  width: 20px;
  height: 20px;
}

/* ============================================================================
   06. FOOTER
   ========================================================================== */
.site-footer {
  background-color: var(--color-footer-background);
  color: var(--color-footer-text);
}

.site-footer .container {
  padding: var(--footer-padding-top) 0 var(--footer-padding-bottom);
}

/* copyright
-------------------------------- */
.copyright {
  font-size: 0.9em;
  text-align: center;
  margin: 0 auto 1em;
  max-width: var(--narrow-width);
}
@media only screen and (max-width: 591.98px) {
  .copyright {
    margin-bottom: 20px;
    text-align: center;
  }
}
.copyright a {
  color: inherit;
}

/* footer menu
-------------------------------- */
.footer-navigation {
  font-family: var(--nav-font);
  margin: 0 auto 1em;
}
@media only screen and (max-width: 591.98px) {
  .footer-navigation {
    margin-bottom: 20px;
  }
}
.footer-navigation .menu-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5em 1.5em;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-navigation li {
  margin: 0;
}
.footer-navigation a {
  display: block;
  color: inherit;
  text-decoration: none;
  text-transform: var(--nav-text-transform);
  font-size: 0.7em;
  letter-spacing: var(--nav-letter-spacing);
  font-weight: var(--nav-font-weight);
  line-height: var(--nav-line-height);
  padding: 5px 0;
  transition: all 0.1s;
}
.footer-navigation a:hover, .footer-navigation a:focus {
  color: var(--color-header-link-hover);
}

/* social
-------------------------------- */
.site-footer .social-navigation {
  flex: none;
}
.site-footer .social-navigation .social-navigation-wrapper {
  justify-content: center;
}
.site-footer .social-navigation .social-navigation-wrapper > li > a svg {
  margin-top: 3px;
  width: 14px;
  height: 14px;
}

/* ============================================================================
   07. SINGLE
   ========================================================================== */
h1.entry-title {
  margin-bottom: 0;
  /* The single-post title's own typography — Design > Single post. Defaults match
     the heading role, so this is a no-op until someone changes it. */
  font-family: var(--single-title-font);
  font-size: var(--single-title-font-size);
  font-weight: var(--single-title-font-weight);
  letter-spacing: var(--single-title-letter-spacing);
  text-transform: var(--single-title-text-transform);
  line-height: var(--single-title-line-height);
}

.entry-content {
  margin-top: 2em;
}
.entry-content:first-child {
  margin-top: 0;
}
.entry-content {
  font-family: var(--single-content-font);
  font-size: var(--single-content-font-size);
  counter-reset: footnotes;
}
.entry-content p > a,
.entry-content li > a,
.entry-content figcaption > a,
.entry-content td > a,
.entry-content th > a,
.entry-content dd > a {
  text-underline-offset: 3px;
  color: inherit;
  transition: all 0.1s;
}
.entry-content p > a:hover,
.entry-content li > a:hover,
.entry-content figcaption > a:hover,
.entry-content td > a:hover,
.entry-content th > a:hover,
.entry-content dd > a:hover {
  text-decoration: underline;
  text-decoration-thickness: 4px;
}

/* Pages link
---------------------------------------- */
.page-links-label {
  display: block;
  margin-right: 20px;
}

/* author bio
---------------------------------------- */
.author-bio {
  background: rgba(0, 0, 0, 0.05);
  padding: 30px;
  margin-top: 2em;
}
@media only screen and (max-width: 591.98px) {
  .author-bio {
    padding: 10px;
  }
}
.author-bio {
  display: flex;
  align-items: flex-start;
}
.author-bio > img.avatar {
  width: 80px;
}
@media only screen and (max-width: 591.98px) {
  .author-bio > img.avatar {
    width: 60px;
  }
}
.author-bio > img.avatar {
  display: block;
  flex: none;
  margin: 0 1em 0 0;
}
@media only screen and (max-width: 591.98px) {
  .author-bio > img.avatar {
    width: 60px;
    margin-right: 10px;
  }
}

.author-title {
  font-size: 1em;
  margin: 0;
}
.author-title a {
  text-decoration: none;
  color: inherit;
}

.author-description {
  line-height: 1.4;
  margin-top: 0.5em;
}

/* tags
---------------------------------------- */
.entry-tags {
  margin-top: 3em;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
.entry-tags a {
  display: block;
  margin-right: 10px;
  margin-top: 2px;
  margin-bottom: 2px;
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 6px;
}

.tags-label {
  display: block;
  margin-right: 20px;
}
@media only screen and (max-width: 591.98px) {
  .tags-label {
    margin-right: 10px;
  }
}

/* Comments
---------------------------------------- */
:root {
  --comment-avatar-width: 56px;
  --comment-avatar-text-spacing: 16px;
}
@media only screen and (max-width: 821.98px) {
  :root {
    --comment-avatar-width: 48px;
  }
}
@media only screen and (max-width: 591.98px) {
  :root {
    --comment-avatar-width: 30px;
    --comment-avatar-text-spacing: 8px;
  }
}

.comments-area {
  margin-top: 3em;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.comment-body {
  position: relative;
}
.comment-body > a,
.comment-body .edit-link > a {
  color: inherit;
}

li.parent > .comment-body:before {
  content: "";
}

.comment-list .children {
  position: relative;
  padding-left: var(--comment-avatar-width);
}

/* Commentlist
--------------------------------------------- */
.no-comments {
  margin-top: 2em;
  border: 1px dashed;
  padding: 10px;
}

.comment-list {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}
.comment-list li.comment {
  overflow: hidden;
  position: relative;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  padding-top: var(--spacing-medium);
  margin-top: var(--spacing-medium);
}
@media only screen and (max-width: 591.98px) {
  .comment-list li.comment {
    padding-top: var(--spacing-small);
    margin-top: var(--spacing-small);
  }
}
.comment-list > li:first-child {
  border-top: 0;
  padding-top: 0;
}
.comment-list {
  /* main body */
}
.comment-list li + li > .comment-body {
  padding: 0;
  display: block;
  position: relative;
}
.comment-list {
  /* author */
}
.comment-list .comment-author img {
  float: left;
  margin-right: var(--comment-avatar-text-spacing);
  width: var(--comment-avatar-width);
  display: block;
  margin-top: 3px;
}
.comment-list .fn {
  font-size: 0.8em;
  line-height: 1.1;
  position: relative;
  display: table;
  margin-bottom: 4px;
}
.comment-list .fn a {
  color: inherit;
  text-decoration: none;
}
.comment-list {
  /* by post author */
}
.comment-list li.bypostauthor .fn:after {
  color: green;
  margin-left: 6px;
  font-size: 8px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  text-align: center;
  line-height: 11px;
  background: #08c;
  color: white;
  display: block;
  position: absolute;
  top: 50%;
  right: -20px;
  margin-top: -5px;
}
.comment-list {
  /* nested */
}
.comment-list ul.children {
  margin: 0;
  list-style: none;
}
.comment-metadata .edit-link {
  margin-left: 16px;
}

.reply {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  font-size: 12px;
}

.reply a {
  text-decoration: none;
  font-style: normal;
}
.comment-metadata,
.comment .reply,
.comment-content,
.comment .comment-respond {
  padding-left: calc(var(--comment-avatar-width) + var(--comment-avatar-text-spacing));
}

.comment-content {
  padding-top: 0.7em;
}
@media only screen and (max-width: 591.98px) {
  .comment-content {
    font-size: 0.9em;
  }
}
.comment-content > * {
  margin: 1.2rem 0;
}
.comment-content > *:first-child {
  margin-top: 0;
}
.comment-content > *:last-child {
  margin-bottom: 0;
}
.comment-content p > a,
.comment-content li > a,
.comment-content figcaption > a,
.comment-content td > a,
.comment-content th > a,
.comment-content dd > a {
  text-underline-offset: 3px;
  color: inherit;
  transition: all 0.1s;
}
.comment-content p > a:hover,
.comment-content li > a:hover,
.comment-content figcaption > a:hover,
.comment-content td > a:hover,
.comment-content th > a:hover,
.comment-content dd > a:hover {
  text-decoration: underline;
  text-decoration-thickness: 4px;
}

.says {
  display: none;
}

.comment-awaiting-moderation {
  color: red;
}

.comments-pagination {
  margin-top: var(--spacing-medium);
}

/* Comment Form
---------------------------------------- */
#reply-title,
.comments-title {
  font-size: 1.2em;
  margin-bottom: var(--spacing-small);
  margin-top: 2em;
}

#reply-title small {
  display: block;
  font-size: 12px;
  margin-top: 12px;
}
#reply-title small a {
  text-decoration: underline;
}

.comment #respond:before {
  left: calc(var(--comment-avatar-width) + var(--comment-avatar-text-spacing));
}

.logged-in-as,
.comment-notes {
  font-size: 0.8125em;
}
.logged-in-as a,
.comment-notes a {
  color: inherit;
}

#commentform .logged-in-as,
#commentform .comment-notes {
  margin-bottom: 1.5em;
}

#commentform p {
  margin: 0 0 1em;
}
#commentform p input[type=text],
#commentform p input[type=url],
#commentform p input[type=email],
#commentform p input[type=password],
#commentform p input[type=number] {
  width: 100%;
}

label[for=comment],
label[for=email] label[for=author],
label[for=url] {
  display: block;
  margin: 0 0 0.2em;
}

.comment-form-cookies-consent {
  display: flex;
  align-items: center;
}
.comment-form-cookies-consent input[type=checkbox] {
  flex: none;
}

#commentform .form-submit {
  margin-top: 2em;
}
#commentform .form-submit #submit {
  background-color: #e0e0e0;
  background: black;
  color: white;
  border: 0;
  display: block;
}
#commentform .form-submit #submit:hover {
  opacity: 0.9;
}

/* ============================================================================
   08. ARCHIVES
   ========================================================================== */
/* ---------------------------- layout */
/* The content column, paired with the .secondary aside — the classic-WP
   primary/secondary split. Not to be confused with <main class="site-main">,
   which is the single page-level landmark in header.php: .site-main wraps
   EVERYTHING between header and footer (archive header included), while
   .primary is just the column beside the sidebar, one per template. */
.primary {
  margin: 0 auto;
  width: var(--narrow-width);
  max-width: 100%;
}

/* .content-layout wraps .primary and the optional .secondary column. The narrow
   layout needs no rules of its own — .primary above already centres itself at
   reading width, which is what the theme has always done.

   Every rule is scoped to .content-layout on purpose. <body> carries the same
   information as has-layout-* / has-display-*, and an unscoped .layout-* here
   would turn the body into the two-column grid along with the wrapper. */
.content-layout {
  /* The wrapper owns the page's outer vertical rhythm, both columns at once.
     It used to sit on .primary, which predates this wrapper by two releases
     (1.1 called that column .main and there was no sidebar to share with) —
     and .secondary then needed a padding-top hand-matched to it. One padding
     here can't drift, and the bottom follows whichever column is taller, so a
     sidebar longer than the content no longer runs into the footer.

     Top and bottom are deliberately different jobs, which is why they are not
     one shorthand: the bottom is always the same breathing room above the
     footer, while the top answers "what is directly above this?" and gets
     overridden by context below. */
  padding-top: var(--spacing-medium);
  padding-bottom: var(--spacing-big);
}
@media only screen and (max-width: 821.98px) {
  .content-layout {
    padding-top: var(--spacing-medium);
    padding-bottom: var(--spacing-medium);
  }
}
.content-layout.layout-fullwidth > .primary, .content-layout.layout-sidebar-left > .primary, .content-layout.layout-sidebar-right > .primary {
  width: 100%;
}
.content-layout {
  /* Below this the two columns stack, which is why the grid only starts here. */
}
@media only screen and (min-width: 822px) {
  .content-layout.layout-sidebar-left, .content-layout.layout-sidebar-right {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--sidebar-width);
    gap: var(--layout-gap);
    align-items: start;
  }
}
.content-layout.layout-sidebar-left, .content-layout.layout-sidebar-right {
  /* Stacked, .secondary draws a border-top to part it from the content, and
     that rule needs air on both sides — this is the half above it (the half
     below is .secondary's own margin-top). Padding, not margin: a margin
     here would collapse with .secondary's and halve the gap. Only on the
     sidebar layouts, and only stacked — in the grid there is nothing under
     .primary to separate it from. */
}
@media only screen and (max-width: 821.98px) {
  .content-layout.layout-sidebar-left > .primary, .content-layout.layout-sidebar-right > .primary {
    padding-bottom: var(--spacing-medium);
  }
}
.content-layout {
  /* Source order is always content-then-sidebar, so a left sidebar is a
     reorder rather than a second markup path. */
}
@media only screen and (min-width: 822px) {
  .content-layout.layout-sidebar-left {
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  }
  .content-layout.layout-sidebar-left > .primary {
    order: 2;
  }
  .content-layout.layout-sidebar-left > .secondary {
    order: 1;
  }
}

/* The three answers to "what is directly above the content wrapper?". The base
   padding-top above assumes the masthead — a single post or a page, where the
   title needs room to clear it. These three say otherwise, in rising specificity
   so the most particular case wins.

   Note what is NOT here any more: the top step used to key off .layout-fullwidth,
   so a single post set to full width got the same thin 20px as a block homepage
   purely because both were wide. Width is a horizontal choice; it has no business
   setting the vertical rhythm. Context does. */
/* 1. A listing puts its own header block above the columns, so the content sits
      closer to it than a bare page does to the masthead — the header and the
      posts under it read as one unit. Matches .search-header too; it carries
      .archive-header for exactly that reason. */
.archive-header + .content-layout {
  padding-top: var(--spacing-medium);
}
@media only screen and (max-width: 821.98px) {
  .archive-header + .content-layout {
    padding-top: var(--spacing-small);
  }
}

/* 2. The search header is already a tall block — title, result count and a
      search form — and ends with the form's own margin, so it needs nothing
      more. Wins over rule 1 above on specificity, which is the intent. */
body.search .content-layout {
  padding-top: 0;
}

/* 3. MANDATORY — the magazine homepage. A full-width page with its title hidden
      (Page options > Hide page title) is a block canvas, not an article: there is
      no title to give room to, so the first block has to start right under the
      header or the site reads as broken. Kept at the thin step on every screen
      size, which is why there is no tablet variant. See rural_blog_body_classes()
      in inc/template-functions.php for the flag. */
.has-hidden-page-title .content-layout.layout-fullwidth {
  padding-top: var(--spacing-small);
}

.rural-blog-post {
  margin-bottom: var(--spacing-huge);
}
@media only screen and (max-width: 821.98px) {
  .rural-blog-post {
    margin-bottom: var(--spacing-big);
  }
}
@media only screen and (max-width: 591.98px) {
  .rural-blog-post {
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    margin-bottom: var(--spacing-medium);
    padding-bottom: var(--spacing-medium);
  }
}

/* ---------------------------- display: list + grid, shared */
/* The stacked listing centres its meta and titles, which works when each post
   owns the full reading column. Beside or under a fixed-ratio image the same
   centring reads as ragged, so both card displays go left-aligned. */
@media only screen and (min-width: 592px) {
  .rural-blog-blog.display-list .entry-title,
  .rural-blog-blog.display-list .entry-subtitle,
  .rural-blog-blog.display-grid .entry-title,
  .rural-blog-blog.display-grid .entry-subtitle {
    text-align: left;
  }
  .rural-blog-blog.display-list .entry-meta,
  .rural-blog-blog.display-grid .entry-meta {
    justify-content: flex-start;
  }
}
.rural-blog-blog.display-list .post-thumbnail,
.rural-blog-blog.display-grid .post-thumbnail {
  text-align: left;
}
.rural-blog-blog.display-list,
.rural-blog-blog.display-grid {
  /* Undo the portrait cap for cards. rural_blog_post_classes() tags any post
     whose featured image is taller than it is wide with
     .post-has-thumbnail-vertical, and that rule pins .post-thumbnail to 360px
     (see it further down) — right for the stacked listing, where the image
     keeps its own shape and a portrait one would otherwise tower over the
     reading column. Both card displays already crop every thumbnail to a fixed
     ratio with object-fit, so here the cap fixes nothing and instead shrinks
     that one figure to 360px inside a full-width track: the card falls out of
     line with the rest of its row, which is the only way a grid of equal
     columns can still look ragged. The inline link goes back to block for the
     same reason — inline is what let the figure shrink-wrap in the first place. */
}
.rural-blog-blog.display-list .post-has-thumbnail-vertical .post-thumbnail,
.rural-blog-blog.display-grid .post-has-thumbnail-vertical .post-thumbnail {
  width: auto;
}
.rural-blog-blog.display-list .post-has-thumbnail-vertical .post-thumbnail > a,
.rural-blog-blog.display-grid .post-has-thumbnail-vertical .post-thumbnail > a {
  display: block;
}

/* ---------------------------- display: list */
/* Image left, text beside it. Flex rather than grid so a post with no featured
   image — or one hidden by the "Display post thumbnail" toggle — lets .entry-body
   take the whole row instead of leaving an empty column behind. */
.rural-blog-blog.display-list .rural-blog-post {
  margin-bottom: var(--spacing-big);
}
@media only screen and (min-width: 592px) {
  .rural-blog-blog.display-list .rural-blog-post {
    display: flex;
    gap: var(--grid-gap);
    align-items: center;
  }
}
.rural-blog-blog.display-list .post-thumbnail {
  margin: 0 0 1em;
}
@media only screen and (min-width: 592px) {
  .rural-blog-blog.display-list .post-thumbnail {
    flex: 0 0 38%;
    margin: 0;
  }
}
.rural-blog-blog.display-list .post-thumbnail img {
  width: 100%;
  aspect-ratio: 3/2;
  -o-object-fit: cover;
     object-fit: cover;
}
.rural-blog-blog.display-list .entry-body {
  flex: 1 1 auto;
  min-width: 0;
}
.rural-blog-blog.display-list .entry-excerpt {
  margin-bottom: 0;
}

/* ---------------------------- display: grid */
.rural-blog-blog.display-grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.rural-blog-blog.display-grid.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.rural-blog-blog.display-grid.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.rural-blog-blog.display-grid {
  /* Laptop widths still step four down to three on their own — that band sits
     above the tablet count, which takes over below 822px. */
}
@media only screen and (max-width: 1089.98px) {
  .rural-blog-blog.display-grid.grid-cols-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.rural-blog-blog.display-grid {
  /* The tablet and mobile counts are their own options (Customizer > Blog),
     printed as classes by index.php. Mobile comes last on purpose: both media
     queries match a phone, so source order is what lets it win. */
}
@media only screen and (max-width: 821.98px) {
  .rural-blog-blog.display-grid.grid-cols-tablet-1 {
    grid-template-columns: minmax(0, 1fr);
  }
  .rural-blog-blog.display-grid.grid-cols-tablet-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rural-blog-blog.display-grid.grid-cols-tablet-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media only screen and (max-width: 591.98px) {
  .rural-blog-blog.display-grid.grid-cols-mobile-1 {
    grid-template-columns: minmax(0, 1fr);
  }
  .rural-blog-blog.display-grid.grid-cols-mobile-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.rural-blog-blog.display-grid {
  /* The gap does the separating here, so the stacked spacing and the mobile
     rule underneath every post would both double up. */
}
.rural-blog-blog.display-grid .rural-blog-post {
  margin-bottom: 0;
}
@media only screen and (max-width: 591.98px) {
  .rural-blog-blog.display-grid .rural-blog-post {
    border-bottom: 0;
    padding-bottom: 0;
  }
}
.rural-blog-blog.display-grid {
  /* A fixed ratio is what keeps the rows level when the featured images are
     all different shapes. */
}
.rural-blog-blog.display-grid .post-thumbnail {
  margin: 0 0 1em;
}
.rural-blog-blog.display-grid .post-thumbnail img {
  width: 100%;
  aspect-ratio: 16/10;
  -o-object-fit: cover;
     object-fit: cover;
}
.rural-blog-blog.display-grid .entry-title {
  font-size: 1.35em;
}
.rural-blog-blog.display-grid .entry-excerpt {
  margin-bottom: 0;
}

.sticky-label {
  display: none;
  margin-bottom: 0.8em;
  line-height: 1;
  padding: 4px 10px;
  background: rgb(246, 148, 12);
  color: white;
  font-size: 0.6em;
}
@media only screen and (min-width: 592px) {
  .sticky-label {
    margin-left: auto;
    margin-right: auto;
  }
}

.sticky .sticky-label {
  display: table;
}

/* ---------------------------- thumbnail */
.post-thumbnail {
  margin: 1.5em auto 1em;
  position: relative;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
}
.post-thumbnail > figcaption {
  font-size: 0.85em;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 5px 10px;
  text-align: left;
  line-height: 1.3;
  transition: all 0.3s;
}
@media only screen and (min-width: 822px) {
  .post-thumbnail > figcaption {
    transform: translate(0, 32%);
    opacity: 0;
    visibility: hidden;
  }
}
@media only screen and (max-width: 591.98px) {
  .post-thumbnail > figcaption {
    line-height: 1.3;
    padding: 2px 4px;
  }
}
.post-thumbnail > figcaption a {
  color: inherit;
}
.post-thumbnail:hover > figcaption {
  transform: translate(0, 0);
  visibility: visible;
  opacity: 1;
}

.post-thumbnail > a {
  display: block;
  margin: 0;
  position: relative;
}

@media only screen and (min-width: 822px) {
  .post-has-thumbnail-vertical .post-thumbnail {
    width: 360px;
  }
  .post-has-thumbnail-vertical .post-thumbnail > a {
    display: inline;
  }
}

/* ---------------------------- title */
.entry-title {
  font-size: 1.4em;
  margin: 0 0 0.5em;
  position: relative;
  overflow-wrap: break-word;
}
@media only screen and (min-width: 592px) {
  .entry-title {
    text-align: center;
  }
}
.entry-title a {
  color: inherit;
  text-decoration: none;
  transition: all 0.1s;
}
.entry-title a:hover {
  opacity: 0.6;
  text-decoration: none;
}
@media only screen and (max-width: 591.98px) {
  .entry-title {
    font-size: 1.2em;
  }
}

.entry-meta + .entry-title {
  margin-top: 0.5em;
}

/* ---------------------------- subtitle */
.entry-subtitle {
  /* The post subtitle's own typography — Design > Single post. Defaults match the
     body role, so this stays a no-op until someone changes it. */
  font-family: var(--single-subtitle-font);
  font-size: var(--single-subtitle-font-size);
  font-weight: var(--single-subtitle-font-weight);
  letter-spacing: var(--single-subtitle-letter-spacing);
  text-transform: var(--single-subtitle-text-transform);
  line-height: var(--single-subtitle-line-height);
  margin: 0.2em 0 1.5em;
  opacity: 0.55;
  overflow-wrap: break-word;
}
@media only screen and (min-width: 592px) {
  .entry-subtitle {
    text-align: center;
  }
}

/* ---------------------------- excerpt */
.entry-excerpt p {
  margin: 0;
}

.continue-reading-link {
  color: inherit;
}
.continue-reading-link:hover {
  text-decoration: underline;
  text-decoration-thickness: 3px;
}

/* ---------------------------- meta */
.entry-meta {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  /* The comment count is an icon plus a number, so it stands taller than the
     plain-text items beside it — centre the row rather than let it stretch. */
  align-items: center;
}
@media only screen and (min-width: 592px) {
  .entry-meta {
    justify-content: center;
  }
}
.entry-meta > * {
  display: block;
}
.entry-meta > *:before {
  margin: 0 10px;
}
@media only screen and (max-width: 591.98px) {
  .entry-meta > *:before {
    margin: 0 5px;
  }
}
.entry-meta > * + *:before {
  content: "·";
}

/* ---------------------------- comment count */
/* Icon and number read as one unit, so they ride in their own inline flex row.
   The icon is sized in em to track the meta font instead of pinning itself to
   the 16px the SVG carries as an attribute. */
.rural-blog-meta-comments a {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
}
.rural-blog-meta-comments .svg-icon {
  display: block;
  width: 1.2em;
  height: 1.2em;
  /* Optically the bubble sits a hair high against the digits. */
  margin-top: -0.1em;
}

/* ---------------------------- pagination */
/* The listing's own bottom spacing belongs between posts, not under the last
   one — and the grid display has none at all — so the gap before the pagination
   is owned by the pagination itself. */
.rural-blog-blog > .rural-blog-post:last-child {
  margin-bottom: 0;
}

.pagination {
  margin-top: var(--spacing-big);
}
@media only screen and (max-width: 821.98px) {
  .pagination {
    margin-top: var(--spacing-medium);
  }
}

.wp-block-query-pagination {
  margin-top: 2em;
}

.wp-block-query-pagination-next {
  color: inherit;
}

/* ===================================================================================== archive */
/* The listing's own header, spanning the full width above the columns. Its
   padding-top is the space under the masthead; the space on its other side is
   .archive-header + .content-layout's padding-top. The two are a pair and have to
   step down together, or the header stops sitting centred in its own band — hence
   the tablet rule here mirroring the one on that selector. Bottom stays 0: the
   wrapper below owns that side. */
.archive-header {
  padding: var(--spacing-medium) 0 0;
  text-align: center;
}
@media only screen and (max-width: 821.98px) {
  .archive-header {
    padding-top: var(--spacing-small);
  }
}
.archive-header h1 {
  font-size: 1.8em;
  margin: 0;
}
@media only screen and (max-width: 591.98px) {
  .archive-header h1 {
    font-size: 1.4em;
  }
}

.archive-description {
  margin: 0.4em auto 0;
  line-height: 1.4;
  opacity: 0.6;
}
@media only screen and (min-width: 822px) {
  .archive-description {
    max-width: 500px;
  }
}
@media only screen and (max-width: 591.98px) {
  .archive-description {
    font-size: 0.9em;
  }
}
.archive-description p {
  margin: 0;
  line-height: 1.4;
}

/* search
--------------------------------------------- */
.search-page-title {
  margin: 0;
  font-size: 1.2em;
  letter-spacing: 0;
  text-transform: uppercase;
}

.search-result-count {
  margin: 0.2em 0 0;
  font-size: 0.95em;
  opacity: 0.7;
}
.search-result-count p {
  margin: 0;
}

/* Search is the one listing whose header owns BOTH sides of its band: the gap
   below is this margin-bottom, not the wrapper's padding-top, which is why
   body.search zeroes that. So the pair to keep level here is padding-top (which
   it inherits from .archive-header above, tablet step-down included) against this
   margin — they have to move together at every breakpoint, including the mobile
   bump that gives the title, the result count and the form a bit more room. */
.search-header {
  margin-bottom: var(--spacing-medium);
}
@media only screen and (max-width: 821.98px) {
  .search-header {
    margin-bottom: var(--spacing-small);
  }
}
@media only screen and (max-width: 591.98px) {
  .search-header {
    padding-top: 2em;
    margin-bottom: 2em;
  }
}
.search-header .search-form {
  margin-left: auto;
  margin-right: auto;
  margin-top: 1em;
  max-width: 100%;
}
@media only screen and (min-width: 592px) {
  .search-header .search-form {
    width: 300px;
  }
}

.rural-blog-search {
  margin: 0 0 4em;
}

.rural-blog-post-search + .rural-blog-post-search {
  margin-top: 2em;
  padding-top: 2em;
  border-top: 1px solid var(--color-border);
}

.rural-blog-post-search {
  overflow: hidden;
}
.rural-blog-post-search .entry-title {
  font-size: 1.1em;
  text-align: left;
}
.rural-blog-post-search .entry-excerpt {
  margin-top: 0.5em;
  font-size: 0.9em;
  opacity: 0.6;
}
@media only screen and (max-width: 591.98px) {
  .rural-blog-post-search .entry-excerpt {
    line-height: 1.3;
  }
}

.rural-blog-post-search-thumbnail {
  margin: 0 0 0 10px;
  width: 92px;
}
@media only screen and (max-width: 591.98px) {
  .rural-blog-post-search-thumbnail {
    width: 60px;
  }
}
.rural-blog-post-search-thumbnail {
  float: right;
}
.rural-blog-post-search-thumbnail a {
  display: block;
}
.rural-blog-post-search-thumbnail img {
  width: 100%;
  display: block;
}

.rural-blog-post-search-text {
  overflow: hidden;
}

strong.matched {
  font-weight: inherit;
  background: #ffc;
}

/* page 404
--------------------------------------------- */
.page-content-404 {
  width: var(--narrow-width);
  max-width: 100%;
  margin: 6em auto;
  text-align: center;
}
.page-content-404 .search-form {
  margin-top: 10px;
}
.page-content-404 input[type=search] {
  height: 60px;
  line-height: 60px;
  padding-left: 20px;
}
.page-content-404 p a {
  color: inherit;
  text-decoration: underline;
}
.page-content-404 p a:hover {
  text-decoration: none;
}

.error404 .archive-header h1 {
  width: 100%;
  text-align: center;
  max-width: none;
}

/* ============================================================================
   09. WIDGETS
   ========================================================================== */
/* ---------------------------- sidebar column */
/* The .secondary column on the sidebar layouts. Above the stacking breakpoint it
   is a grid item in .content-layout, which owns the top padding for both columns,
   so it needs nothing of its own — it used to carry a padding-top hand-matched to
   .primary's, two constants that had to be kept equal by hand. Below the
   breakpoint it's a block under the content and takes a rule to separate the two. */
.secondary {
  font-size: 0.95em;
}
@media only screen and (max-width: 821.98px) {
  .secondary {
    margin-top: var(--spacing-medium);
    padding-top: var(--spacing-medium);
    border-top: 1px solid rgba(0, 0, 0, 0.07);
  }
}
.secondary .widget {
  margin-bottom: var(--spacing-big);
}
.secondary .widget:last-child {
  margin-bottom: 0;
}
.secondary img {
  max-width: 100%;
  height: auto;
}

/* Shown in place of an empty sidebar, and only to a user who can fill it. */
.sidebar-placeholder {
  border: 1px dashed rgba(0, 0, 0, 0.25);
  padding: 1.5em;
  font-size: 0.9em;
  opacity: 0.75;
}
.sidebar-placeholder > p:first-child {
  margin-top: 0;
}
.sidebar-placeholder > p:last-child {
  margin-bottom: 0;
}

/* ---------------------------- general */
.widget-area .wp-block-heading,
.widget-area .widgettitle,
.widget-area .widget-title {
  text-transform: uppercase;
  font-size: 1em;
  letter-spacing: 1px;
  margin-bottom: 1em;
}
.widget-area .wp-block-heading a,
.widget-area .widgettitle a,
.widget-area .widget-title a {
  color: inherit;
}

/* ---------------------------- about */
.widget_block .wp-block-group .wp-block-image {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

/* ---------------------------- tagcloud */
.widget_tag_cloud a,
.tagcloud a {
  text-decoration: none;
  color: inherit;
}
.widget_tag_cloud a:hover,
.tagcloud a:hover {
  text-decoration: underline;
}

/* ---------------------------- calendar */
.wp-calendar-table a,
#wp-calendar a {
  color: inherit;
}

.wp-calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5em;
}

.wp-calendar-nav a {
  align-items: center;
  display: flex;
  align-content: center;
  color: inherit;
  text-decoration: none;
}

/* ---------------------------- search form */
.wp-block-search .wp-block-search__label {
  font-weight: var(--heading-font-weight);
}

.wp-block-search__button {
  border: 0;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 13px;
  padding-bottom: 13px;
  margin-left: 5px;
}

.search-form {
  display: block;
  position: relative;
}
.search-form input[type=search] {
  display: block;
  border: 0;
  padding-right: 40px;
  width: 100%;
  min-width: 200px;
}
.search-form button {
  background: none;
  color: inherit;
  outline: 0;
  padding: 0;
  margin: 0;
  border: 0;
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------------------------- comments */
.wp-block-latest-comments {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wp-block-latest-comments__comment,
.widget_recent_comments li {
  padding-bottom: 1em;
  margin-bottom: 1em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
.wp-block-latest-comments__comment:last-child,
.widget_recent_comments li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

.wp-block-latest-comments__comment-excerpt > *:last-child {
  margin-bottom: 0;
}

/* ---------------------------- latest posts */
.wp-block-latest-posts.wp-block-latest-posts__list li {
  margin-bottom: 1.5em;
  overflow: hidden;
  padding-bottom: 1.5em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
.wp-block-latest-posts.wp-block-latest-posts__list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* ---------------------------- widget menu */
.widget_nav_menu nav > ul,
.wp-block-archives-list,
.wp-block-categories-list,
.wp-block-latest-posts__list,
.wp-block-page-list,
.wp-block-rss,
.widget_rss ul,
.widget_archive ul,
.widget_nav_menu ul,
.widget_meta ul,
.widget_recent_comments ul,
.widget_recent_entries ul,
.widget_pages ul,
.widget_categories ul,
.widget_product_categories ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.widget_nav_menu nav > ul ul,
.wp-block-archives-list ul,
.wp-block-categories-list ul,
.wp-block-latest-posts__list ul,
.wp-block-page-list ul,
.wp-block-rss ul,
.widget_rss ul ul,
.widget_archive ul ul,
.widget_nav_menu ul ul,
.widget_meta ul ul,
.widget_recent_comments ul ul,
.widget_recent_entries ul ul,
.widget_pages ul ul,
.widget_categories ul ul,
.widget_product_categories ul ul {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: 20px;
}
/* ---------------------------- rss */
.wp-block-rss > li,
.widget_rss ul > li {
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  padding-bottom: 5px;
  margin-bottom: 5px;
}
.wp-block-rss > li .rssSummary,
.widget_rss ul > li .rssSummary {
  font-family: var(--body-font);
  text-transform: none;
  letter-spacing: 0;
}

/* ---------------------------- widget in .secondary */
.secondary .widget_block + .widget_block, .secondary .widget_block + .widget,
.secondary .widget + .widget_block,
.secondary .widget + .widget {
  margin-top: 2.5em;
}
.secondary p {
  font-size: 0.9em;
  margin: 0.2em 0;
}
.secondary p a {
  color: inherit;
}

/* ============================================================================
   10. REDUCED MOTION
   ----------------------------------------------------------------------------
   Respect users who ask for less motion (WCAG 2.3.3): drop transitions,
   animations and smooth scrolling. The off-canvas still opens/closes — it
   just snaps instead of sliding.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}/*# sourceMappingURL=style.css.map */