@charset "UTF-8";
/*!
Theme Name: technocrat
Theme URI: https://technocrat.cc
Author: KODX.DEV
Author URI: https://technocrat.cc
Description: This is a multi-urpose blogging theme with custom front page templates, dark and light switcher, two header variants, built-in social media integrations and more.
Version: 1.6.2
Tested up to: 5.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: technocrat
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

technocrat is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* --------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments
--------------------------------------------------------------*/
/*
 
 88     88  dP""b8 88  88 888888     Yb    dP 888888 88""Yb .dP"Y8 88  dP"Yb  88b 88      dP"Yb  88b 88 88     Yb  dP 
 88     88 dP   `" 88  88   88        Yb  dP  88__   88__dP `Ybo." 88 dP   Yb 88Yb88     dP   Yb 88Yb88 88      YbdP  
 88  .o 88 Yb  "88 888888   88         YbdP   88""   88"Yb  o.`Y8b 88 Yb   dP 88 Y88     Yb   dP 88 Y88 88  .o   8P   
 88ood8 88  YboodP 88  88   88          YP    888888 88  Yb 8bodP' 88  YbodP  88  Y8      YbodP  88  Y8 88ood8  dP    
 
*/

/** Dark varian styles are in /css/darkmode.css */

:root {
  /* ==================== */
  /* Core Color Tokens    */
  /* ==================== */
  --color-primary: #c90032; /* Accent/actions, links, title link hovercolor button hovercolor */
  --color-secondary: #010107; /* High contrast used for buttons, hover and current menu text links, article title links*/

  /* Text */
  --color-text-base: #55555e; /* Primary text */
  --color-text-muted: #6c6d70; /* Secondary text , used for main menu links*/
  --color-pure: #ffffff; /* Added for absolute white */

  /* Backgrounds */
  --color-background-main: #fcfcfc; /* background color for entire cotent area of main site. */
  --color-background-alt: #f5f5f5; /* Secondary surfaces border, dividers, dropdown menu background over widget li backgrounds */
  --body-bg-color: #f5f5f5; /* Body background color */

  --color-highlight: #f1f1f1; /* Dropdowns, soft lines dropdown menu border*/
  --color-highlight-vivid: #ffffff; /* Dropdowns, soft lines dropdown menu border*/
  --color-highlight-soft: #f9f9f9; /* Table TDs */
  --color-accent: #c90032; /* Accents like price discounts etc in woocommerce */

  /* Font Size Tokens */
  --font-size-xxl: 64px;
  --font-size-xl: 48px;
  --font-size-lg: 36px;
  --font-size-md: 28px;
  --font-size-sm: 18px;
  --font-size-xs: 17px;
  --font-size-xxs: 16px;
  --font-size-xxxs: 14px;

  /* Line Height Tokens */
  --line-height-xxl: 1.8;
  --line-height-xl: 1.28;
  --line-height-lg: 1.25;
  --line-height-md: 1.24;
  --line-height-sm: 1.2;
  --line-height-xs: 1.2;

  /* Letter Spacing Tokens */
  --letter-spacing-xxl: -3px;
  --letter-spacing-xl: -2px;
  --letter-spacing-lg: -1.4px;
  --letter-spacing-md: -1px;
  --letter-spacing-sm: 0.5px;
  --letter-spacing-xs: 0;

  /* font family */
  --font-family-primary: "IBM Plex Sans", sans-serif;
  --font-family-secondary: "Source Sans 3", sans-serif;

  /* ================================== */
  /* Final Component Variables          */
  /* ================================== */
  --h1-font-size: var(--font-size-xxl);
  --h1-line-height: var(--line-height-md);
  --h1-letter-spacing: var(--letter-spacing-xxl);

  --h2-font-size: var(--font-size-xl);
  --h2-line-height: var(--line-height-xl);
  --h2-letter-spacing: var(--letter-spacing-xl);

  --h3-font-size: var(--font-size-lg);
  --h3-line-height: var(--line-height-lg);
  --h3-letter-spacing: var(--letter-spacing-lg);

  --h4-font-size: var(--font-size-md);
  --h4-line-height: var(--line-height-lg);
  --h4-letter-spacing: var(--letter-spacing-md);

  --h5-font-size: var(--font-size-sm);
  --h5-line-height: var(--line-height-sm);
  --h5-letter-spacing: var(--letter-spacing-sm);

  --h6-font-size: var(--font-size-xxs);
  --h6-line-height: var(--line-height-xs);
  --h6-letter-spacing: var(--letter-spacing-xs);

  /* Site Identity */
  --site-title-a: var(--color-primary);
  --site-title-hover: var(--color-primary);

  /* Layout & Backgrounds */
  --content-bg: var(--color-background-main);
  --body-textarea: var(--color-background-alt);
  --m-social-media-bg: var(--color-background-alt);

  /* Typography */
  --heading-font: var(--font-family-primary);
  --heading-font-weight: 700;
  --body-font: var(--font-family-secondary);
  --body-font-size: 1.1875rem;
  --body-font-weight: 400;
  --heading-color: var(--color-secondary);
  --heading-link-a: var(--color-secondary);
  --heading-link-hover: var(--color-primary);
  --body-text-color: var(--color-text-base);
  --meta-font-color: var(--color-text-muted);
  /** body medium, used rarely for some elements */
  --body-font-m: 1rem;
  /** body small, used rarely for some elements */
  --body-font-s: 0.875rem;

  /* Navigation */
  --main-nav-font: var(--font-family-primary);
  --main-nav-medium: 400;
  --main-nav-font-size: var(--font-size-xxxs);
  --main-nav-a: var(--color-text-muted);
  --main-nav-hover: var(--color-secondary);
  --sub-nav-a-bg: var(--color-highlight-vivid);
  --sub-nav-hover: var(--color-highlight);
  --color-border-mainnav: var(--color-background-alt);
  --color-border-article: var(--color-background-alt);
  --color-border-dropdown-menu: var(--color-highlight);

  /* Widgets */
  --widget-font-size: var(--font-size-xs);
  --widget-font-weight: 400;
  --widget-font-line-height: var(--line-height-lg);
  --widget-table-td: var(--color-highlight-soft);
  --widget-table-th: var(--color-background-alt);
  --color-widget-bg-li: var(--color-background-alt);
  --color-widget-li-accent: var(--color-pure);

  /* Forms & Buttons */
  --submit-btn-bg: var(--color-secondary);
  --submit-btn-hover: var(--color-primary);
  --submit-btn-text: var(--color-pure);
  --submit-btn-border: 3px solid transparent;

  /* Special Elements */
  --social-icon-a: var(--color-secondary);
  --social-icon-hover: var(--color-primary);
  --divider-height: 16px;
  --meta-font-size: var(--font-size-xxs);

  /** invert image of social media */
  --img-invert-on: invert(100%);
  --img-invert-off: invert(0%);
}

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/** forms buttons and such tedious stuff
 * Affects mobile dropdown menu
 */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  border-radius: 3px;
  background: var(--submit-btn-bg);
  color: var(--submit-btn-text);
  border: var(--submit-btn-border);
  line-height: 1;
  padding: 1em 2em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
  background: var(--submit-btn-hover);
  color: var(--submit-btn-text);
  border: var(--submit-btn-border);
  cursor: pointer;
}

/* END OF MENU TOGGLE */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
  color: var(--color-text-base) !important;
  border: 1px solid var(--color-highlight-vivid);
  border-radius: 3px;
  line-height: 2.5em;
  text-indent: 4px;
  caret-color: var(--color-text-base);
  background-color: var(--body-textarea);
}

/*
# Links
--------------------------------------------- */
a {
  color: var(--color-primary);
  text-decoration: none;
}

a:visited {
  color: var(--color-primary);
}

a:hover,
a:focus,
a:active {
  color: var(--color-primary);
  text-decoration: underline;
}

a:focus {
  outline: thin dotted;
}

a:hover,
a:active {
  outline: 0;
}

/** -------------------------------------------
  # Heading Typography
  ---------------------------------------------*/
:where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--heading-font);
  font-weight: var(--heading-font-weight);
  color: var(--heading-color);
  margin: 1em 0 0.5em 0;
}

:where(h1, h2, h3, h4, h5, h6) a,
:where(h1, h2, h3, h4, h5, h6) a:visited {
  text-decoration: none;
  color: var(--heading-link-a);
}

:where(h1, h2, h3, h4, h5, h6) a:hover,
:where(h1, h2, h3, h4, h5, h6) a:active,
:where(h1, h2, h3, h4, h5, h6) a:focus {
  color: var(--heading-link-hover);
  text-decoration: none;
  will-change: transform;
  transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

h1 {
  font-size: var(--h1-font-size);
  line-height: var(--h1-line-height);
  letter-spacing: var(--h1-letter-spacing);
}

h2 {
  font-size: var(--h2-font-size);
  line-height: var(--h2-line-height);
  letter-spacing: var(--h2-letter-spacing);
}

h3 {
  font-size: var(--h3-font-size);
  line-height: var(--h3-line-height);
  letter-spacing: var(--h3-letter-spacing);
}

h4 {
  font-size: var(--h4-font-size);
  line-height: var(--h4-line-height);
  letter-spacing: var(--h4-letter-spacing);
}

h5 {
  font-size: var(--h5-font-size);
  line-height: var(--h5-line-height);
  letter-spacing: var(--h5-letter-spacing);
}

h6 {
  font-size: var(--h6-font-size);
  line-height: var(--h6-line-height);
  letter-spacing: var(--h6-letter-spacing);
}

/** ---------------------------------------------------------
  * body fonts and colors
  ---------------------------------------------------------- */
/* body, button, input, select, optgroup, textarea */
body,
textarea {
  font-family: var(--body-font);
  font-size: var(--body-font-size);
  font-weight: var(--body-font-weight);
  color: var(--body-text-color);
}
body {
  background: var(--body-bg-color);
}
textarea {
  background-color: var(--body-textarea);
}

/* Lists
---------------------------------------------*/
ul {
  list-style: disc;
  margin-left: -1em;
}

ol {
  margin-left: -1em;
}

ul ul {
  margin-left: auto;
}

ol ol {
  margin-left: auto;
}

/*--------------------------------------------------------------
# Layouts - starts here
# GRID layout
--------------------------------------------------------------*/
/*parent grid. 3 colymns but outer 2 are used as paddings*/

.site {
  /*	Structure*/
  display: grid;
  grid-template-columns: minmax(24px, 1fr) auto minmax(24px, 1fr);
  grid-template-rows: minmax(0, 1fr);
  /*	Styling*/
  padding: 0;
  min-height: 100vh;
}

.site-inner-wrapper {
  grid-row: 1;
  grid-column: 2;
  display: grid;
  grid-template-columns: minmax(0, 1120px);
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  /* Ensures the grid container takes at least 100% of viewport height */
  background-color: var(--content-bg);
  padding: 0 56px;
}

/* SITE HEADER */

.site-header {
  grid-row: 1;
  grid-column: 1;
  position: relative;
  z-index: 900;
}

.site-header.wide-header {
  margin-bottom: 56px;
}

.site-branding {
  display: grid;
  grid-template-columns: minmax(0, auto) 1fr minmax(0, auto);
  grid-template-rows: auto;
  align-items: center;
  position: relative;
  min-height: 96px;
}

.logobrand {
  grid-row: 1;
  grid-column: 1;
  justify-self: start;
  display: flex;
  min-height: 96px;
  align-items: center;
}

.custom-logo-link {
  margin-right: 8px;
  width: 48px;
  height: 48px;
}

/* .site-title-wrap {} */

.site-title {
  font-family: var(--heading-font);
  font-weight: var(--heading-font-weight);
  font-size: 24px;
  line-height: 28.8px;
  letter-spacing: -1px;
  margin: 0;
}

h1.site-title a,
h1.site-title a:hover,
h1.site-title a:active,
h1.site-title a:focus {
  color: var(--site-title-a);
  text-decoration: none;
}

p.site-title a,
p.site-title a:hover,
p.site-title a:active,
p.site-title a:focus {
  color: var(--site-title-hover);
  text-decoration: none;
}

.site-description {
  font-family: var(--body-font);
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 0;
  margin: 0;
  padding-left: 2px;
}

.social-media {
  grid-row: 1;
  grid-column: 3;
  justify-self: end;
  align-self: center;
  margin-top: 0px;
  display: flex;
  column-gap: 8px;
}

.social-media a {
  color: unset;
  margin: 0;
  padding: 0;
  display: inline-block;
  background-color: var(--social-icon-a);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.social-media a:hover {
  background-color: var(--social-icon-hover);
}

.social-media a img {
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
}

.header-image {
  line-height: 0;
}

.header-image img {
  margin-bottom: 32px;
}

/* CONTENT AND SIDEBAR WRAPPER */
.content-wrapper {
  margin-top: 16px;
  grid-row: 2;
  grid-column: 1;
  padding: 8px 0 0 0;
  display: flex;
  flex-flow: row;
  border-top: var(--divider-height) solid var(--color-background-alt);
}

/* CONTENT AREA */

.site-main {
  flex: 1 0 718px;
  /* grow shirk flex-basis */
  display: flex;
  flex-flow: column nowrap;
}

/* ARTICLES */

/* Hentry is general styling for BOTH posts and pages on article html tag. 
.post .page .type-post and .type-page(more for default page template) classes can be used to differenciate how article looks and behaves.
In addition .has-post-thumbnail can be used to also modify looks when a post OR page has a featured image thumbnail.
*/
.hentry {
  width: auto;
  /* Width for regular hentry elements, sidebar width limits this from expanding. */
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-columns: 1fr;
  border-bottom: 16px solid var(--color-border-article);
}

.hentry:last-child {
  /* border-bottom: 1px solid transparent; */
}

/* Horizontal border only disappears on pages with featured image thumbnail */
.hentry.type-page.has-post-thumbnail {
  border-top: 0px solid transparent;
  padding: 0px;
}

/* Horizontal border only appears on pages without featured image thumbnail */
.hentry.type-page {
  border-top: 1px solid transparent;
  padding: 0;
}

.type-page .entry-title {
  margin: 0;
}

.post-thumbnail-wrapper {
  display: flex;
  flex-flow: column nowrap;
  position: relative;
}

.post-thumbnail {
  grid-row: 1;
  grid-column: 1;
  position: relative;
  z-index: 100;
  background: var(--content-bg);
  display: flex;
  overflow: hidden; /* Prevents overflow on zoom */
  border: 16px solid var(--color-background-alt);
}

.post-thumbnail img {
  max-width: 100%;
  height: auto;
  will-change: transform;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.post-thumbnail:hover img {
  transform: scale(1.05);
}

/* Targets ONLY thumbnails with our special class */
img.landingwide-thumb {
  max-width: min(1120px, 100%);
  width: 100%;
  height: auto;
}

.entry-header {
  grid-row: 1;
  grid-column: 1;
  align-self: end;
  position: relative;
  z-index: 200;
  max-width: 90%;
}

/* Equalizing H1 and H2 look on archives and single posts. */
article .entry-title {
  font-size: var(--h2-font-size);
  line-height: var(--h2-line-height);
  letter-spacing: var(--h2-letter-spacing);
  display: inline;
  text-decoration: none;
  background: var(--content-bg);
  padding: 0px 16px 0px 0.2em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  -o-box-decoration-break: clone;
  border-left: 16px solid var(--site-title-a);
}

/* Exclusive styling for wide pages increasing h1 size  */
.font-64-xl {
  font-size: var(--h1-font-size);
  line-height: var(--h1-line-height);
  letter-spacing: var(--h1-letter-spacing);
}

/* Only header withing Pages will be alignet to the top
instead of end of the grid container as is in posts. */
/* .type-page .entry-header {
	align-self: start;
} */
/* changed my mind, for now, ill place headers where post headers are by disabling this. */

.entry-meta {
  font-size: 16px;
  display: flex;
  flex-flow: row nowrap;
  column-gap: 16px;
  color: var(--meta-font-color);
  background-color: var(--content-bg);
  padding: 8px 4px 8px 0;
  text-decoration: none;
  margin-bottom: 0px;
  align-self: end;
  /* This way it sticks to the bottom of the header area when thumbnail is not present */
}

.meta-spacer {
  margin-bottom: 16px;
}

.entry-footer {
  font-size: var(--meta-font-size);
  color: var(--meta-font-color);
  display: flex;
  flex-flow: row wrap;
  gap: 16px;
  margin-bottom: 24px;
}

/* .cat-links {}
.tags-links{} */
.comments-link {
  margin-left: auto;
}

/* .edit-link {

} */

a.more-link {
  display: flex;
  margin-top: 12px;
  font-size: var(--main-nav-font-size);
  padding-right: 2px;
  justify-content: flex-end;
}

/** Currently i decided to hide this link in template, to avoid visual clutter.
 * post title and thumbnails are both clickable so this link seems extra
 */
a.more-link::after {
  content: "»";
  padding-left: 2px;
}

/* CATEGORY AND PAGE TITLES */
.page-category-title,
.page-title {
  display: inline-flex;
  font-family: var(--heading-font);
  font-weight: var(--heading-font-weight);
  font-size: var(--h5-font-size);
  letter-spacing: var(--h5-letter-spacing);
  line-height: calc(56px - 29px);
  padding: 0 0px 0 8px;
  margin: 14px 0 24px 2px;
  position: relative;
  border-left: 5px solid var(--color-primary);
}

/* Page Template on single page
*/
.page-spacer-top {
  padding: 16px 0;
  margin: 0;
  width: 100%;
  position: relative;
}

/* Not found area in search.php */
.no-results.not-found {
  flex: 1 1 auto;
}

.content-none {
  display: flex;
  flex-flow: column;
  align-items: center;
  min-height: auto;
  padding-bottom: 10em;
}

/** SIDEBAR */

.widget-area {
  flex: 0 1 338px;
  margin-left: 64px;
  max-width: 338px;
}

/* .widget {} */

/** this is shared between sidebar and footer widgets */
.widget-title {
  font-family: var(--heading-font);
  font-weight: var(--heading-font-weight);
  font-size: var(--h5-font-size);
  line-height: calc(56px - 29px);
  letter-spacing: var(--h5-letter-spacing);
  margin: 14px 0px 24px 2px;
  padding: 0 0 0 8px;
  position: relative;
  border-left: 5px solid var(--color-primary);
}

.widget-area,
.site-footer-widget {
  font-size: var(--widget-font-size);
  font-weight: var(--widget-font-weight);
  line-height: var(--widget-font-line-height);
}

.site-footer-widget ul,
.widget-area ul {
  font-size: var(--widget-font-size);
  font-weight: var(--widget-font-weight);
  line-height: var(--widget-font-line-height);
  list-style-position: outside;
  margin: 0 0 2.5em 0;
  padding: 0 0 0 1px;
  list-style-type: none;
}

.widget-area .widget li::before,
.site-footer-widget li::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 80%;
  background: var(--color-widget-li-accent);
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  transition: background-color 0.3s ease;
}

.widget-area .widget li,
.site-footer-widget li {
  margin: 0.5em 0;
  list-style: none;
  position: relative;
  padding: 0.5em 0.5em 0.5em 1em;
  border-radius: 2px;
  display: flow-root;
  width: 100%;
  background: var(--color-widget-bg-li);
}

.widget-area .widget li:hover::before,
.site-footer-widget li:hover::before {
  background-color: var(--color-primary);
  text-decoration: none;
}

.widget-area .widget li a,
.site-footer-widget li a {
  text-decoration: none;
  display: block;
}

.widget-area .widget li a:hover,
.site-footer-widget li a:hover {
  text-decoration: none;
}

/* ONLY FOOTER WIDGETS  */

.site-footer-widget ul {
  margin-left: 0;
}

.site-footer-widget ul a,
.site-footer-widget ul a:visited,
.widget-area ul a,
.widget-area ul a:visited {
  color: var(--color-primary);
}

.site-footer-widget ul a:hover,
.site-footer-widget ul a:active,
.site-footer-widget ul a:focus,
.widget-area ul a:hover,
.widget-area ul a:active,
.widget-area ul a:focus {
  color: var(--color-primary);
  text-decoration: none;
}

/** search form */
.search-form input.search-field {
  width: -moz-available;
  width: -webkit-fill-available;
  width: stretch;
  margin-bottom: 8px;
}

.search-form input.search-submit {
  width: -moz-available;
  width: -webkit-fill-available;
  width: stretch;
}

.wp-calendar-table {
  margin-bottom: 0.5em;
}

/** FOOTER 
 * footer widgets are mainly combined in styling with sidebar widgets
 * if you want to change the code , scroll up to .widget-area ul
*/
.site-footer {
  grid-row: 3;
  grid-column: 1;
  padding: 0;
  display: flex;
  flex-flow: column nowrap;
  justify-content: stretch;
  border-top: 16px solid var(--color-background-alt);
  padding-top: 32px;
}

.site-footer-widget-wrap {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: stretch;
  padding-bottom: 1em;
  border-bottom: var(--divider-height) solid var(--color-background-alt);
  gap: 2em;
}

.site-footer-widget {
  flex: 1 1 307px;
  position: relative;
  padding-left: 0;
}

.site-info {
  margin: 72px 0 64px;
  align-self: center;
  font-size: var(--body-font-s);
  line-height: 2;
  text-align: center;
}

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
/* Main Navigation */

.main-navigation {
  grid-row: 1;
  grid-column: 2;
  align-self: center;
  width: 100%;
  font-family: var(--main-nav-font);
  color: var(--main-nav-a);
  font-weight: var(--main-nav-medium);
  font-size: var(--main-nav-font-size);
  text-transform: uppercase;
  padding-top: 8px;
}

/* *****************  LEVEL 1 MENU **************** */
.main-navigation ul {
  display: flex;
  list-style: none;
  flex-flow: row wrap;
  justify-content: center;
  height: auto;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
}

.main-navigation li {
  position: relative;
  padding: 2px 9px;
  white-space: nowrap;
}

.main-navigation a {
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
}

.main-navigation a,
.main-navigation a:visited {
  color: var(--main-nav-a);
  text-decoration: none;
  transition: color 0.2s ease-in-out;
  /* Add a smooth transition */
}

/* Style for hover and active states */
.main-navigation a:hover,
.main-navigation a:active,
.main-navigation a:focus {
  color: var(--main-nav-hover);
  cursor: pointer;
}

/* First level only  */
.main-navigation ul li.current-menu-item > a {
  color: var(--main-nav-hover);
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-color: var(--color-primary);
  text-underline-offset: 6px;
  text-decoration-thickness: 3px;
}

/* *****************  LEVEL 2 MENU **************** */

.main-navigation ul ul {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  position: absolute;
  top: 100%;
  left: -999em;
  z-index: 99999;
  border: 1px solid var(--color-border-dropdown-menu);
  background-color: var(--sub-nav-a-bg);
  transition: opacity 0.1s ease-in-out, visibility 0.1s ease-in-out;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.main-navigation ul ul a {
  display: block;
  width: auto;
  padding: 8px 16px;
  min-width: 120px;
  background-color: transparent;
  /* Initial background color of the dropdown menu */
  border-bottom: 1px solid var(--color-border-dropdown-menu);
  flex-grow: 1;
  background-color: var(--sub-nav-a-bg);
  font-weight: var(--body-font-weight);
  cursor: pointer;
}

/* Add the hover style */
.main-navigation ul ul a:hover {
  background-color: var(--sub-nav-hover);
  /* New background color of the dropdown menu on mouse over */
  border-bottom: 1px solid var(--color-border-dropdown-menu);
}

.main-navigation ul ul li {
  padding: 0;
  display: flex;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
  left: auto;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  /* Enable interaction after the delay */
  transition-delay: 0.1s;
  /* Set the delay time */
}

.main-navigation li li:last-child {
  border-bottom: 0;
}

/* *****************  LEVEL 3 MENU **************** */

.main-navigation ul ul ul {
  left: -999em;
  top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
  display: flex;
  left: 100%;
}

/** targeting
 * first ul - last li - last ul
 */
.main-navigation ul li:last-child ul li:last-child:hover > ul,
.main-navigation ul li:last-child ul li:last-child.focus > ul {
  left: auto;
  right: 100%;
  /* Align to the right */
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  /* Enable interaction after the delay */
  transition-delay: 0.1s;
  /* Set the delay time */
}

/** for third level pop out menu also aligns
 * to the right so not to go off the page
 */
/* Style for the last child submenu */
.main-navigation ul ul li:last-child ul {
  /* left: auto;
	right: 100%; */
  top: -1px;
}

/** main navigation for alt header
 * without social icons and menu to the right
 */
.main-navigation.flex-end ul {
  justify-content: flex-end;
}

article.comment-body {
  margin-bottom: 1.2em;
  border-bottom: var(--divider-height) solid var(--color-background-alt);
  padding-bottom: 1em;
}

.comment-metadata {
  font-size: var(--body-font-m);
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
}

/** navigation for the third header wide menu on second grid row */
.main-navigation.wide {
  grid-row: 2;
  grid-column: 1 / -1;
  padding: 16px 0;
  margin-bottom: 0px;
}

/* Dropdown menu chevron
---------------------------------------------------- */
/* Base style for the chevron */
.main-navigation .menu-item-has-children > a::after {
  content: "⌄"; /* Unicode character for downwards arrowhead */
  display: inline-block;
  margin-top: -4px;
  margin-left: 5px;
  transition: transform 0.3s ease;
  font-size: 1em; /* Adjust size as needed */
  line-height: 1; /* Ensure line height matches font size */
  transform-origin: center center; /* Rotate around the center */
  vertical-align: middle; /* Ensure vertical alignment */
  min-height: 21px; /* this is necessary for chevron to find its middle */
}

/* Rotate chevron on hover for top-level parent items */
.main-navigation .menu-item-has-children:hover > a::after {
  transform: rotate(90deg); /* Rotate to point upwards */
}

/* Style for chevrons in submenus */
.main-navigation
  .menu-item-has-children
  .sub-menu
  .menu-item-has-children
  > a::after {
  content: "⌄"; /* Unicode character for right-pointing chevron */
  display: inline-block;
  margin-left: 5px;
  transition: transform 0.3s ease;
  font-size: 1em; /* Adjust size as needed */
  line-height: 1; /* Ensure line height matches font size */
  transform-origin: center center; /* Rotate around the center */
  vertical-align: middle; /* Ensure vertical alignment */
}
/* Rotate chevrons in submenus on hover */

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
  margin: 0 0 1.6em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
  display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
  flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
  text-align: end;
  flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
  display: block;
}

.post,
.page {
  margin: 0 0 1.6em;
}

.updated:not(.published) {
  display: none;
}

.page-content,
.entry-content,
.entry-summary {
  margin: 0;
}

/* ul ol li to have some distance between */
.page-content li,
.entry-content li {
  margin-bottom: 1.2em;
}

/** attachment age */
.content-attachment {
  margin: 32px 0;
}

.page-links {
  clear: both;
  margin: 0 0 1.5em;
}

/* /////////////////////////////////////////
  * 	Excerpt Formats
  * ///////////////////////////////////////// */
a.read-more {
  display: flex;
  font-size: 1rem;
  margin-top: 1em;
  padding: 8px 12px;
  border-radius: 3px;
  background-color: var(--color-background-alt);
  width: auto;
  justify-content: flex-end;
  text-decoration: none;
  gap: 5px;
  align-items: center;
}

/* Arrow indicator (new) */
a.read-more::after {
  content: "→";
  display: inline-block;
  transition: transform 0.2s ease;
}

/* Arrow animation ONLY (new) */
a.read-more:hover::after {
  transform: translateX(5px);
}
/* End Excerpts */

p {
  margin-bottom: 1.6em;
  margin-top: 0.7em;
}

/* Category Archives custom display */
.single-page-header {
  display: flex;
}

.page-header {
  width: 100%;
}

.category-archive {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-content: flex-start;
}

.category-article:last-child {
  border-bottom: var(--divider-height) solid var(--color-background-alt);
}

.category-article {
  flex: 0 0 calc(50% - 24px);
  margin-bottom: 33px;
  border-bottom: var(--divider-height) solid var(--color-background-alt);
}

.category-article .entry-title {
  font-size: var(--h3-font-size);
  letter-spacing: var(--h3-letter-spacing);
  line-height: var(--h3-line-height);
}

.posts-navigation {
  width: 100%;
}

.nav-links {
  display: flex;
  width: 100%;
  font-family: var(--heading-font);
  font-weight: var(--main-nav-medium);
  font-size: 16px;
  margin-top: 0;
  padding: 8px 0;
}

.nav-previous a::before {
  content: "‹ ";
}
.nav-next a::after {
  content: " ›";
}

/** Tables */
.wp-calendar-table td {
  text-align: center;
  padding: 0.5em 0;
  background-color: var(--widget-table-td);
}

.wp-calendar-table th {
  text-align: center;
  padding: 0.5em 0;
  background-color: var(--widget-table-th);
}

.wp-calendar-table caption {
  padding: 8px 0;
  background-color: var(--widget-table-td);
}

/* Comments
--------------------------------------------- */
.comments-area {
  border-top: var(--divider-height) solid var(--color-background-alt);
}

h2.comments-title {
  font-size: var(--h4-font-size);
  letter-spacing: var(--h4-letter-spacing);
  margin: 1.6em 0;
}

.comment-reply-title {
  font-size: var(--h4-font-size);
  letter-spacing: var(--h4-letter-spacing);
  line-height: var(--h4-line-height);
}

.comment-form label {
  min-width: 5em;
  display: inline-block;
}

.comment-form-cookies-consent {
  font-size: var(--body-font-m);
}

p.comment-form-cookies-consent {
  display: inline-flex;
}

.comment-form-cookies-consent input {
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 1em;
}

.navigation.post-navigation {
  margin-bottom: 1.6em;
}

.comment-content a {
  word-wrap: break-word;
}

.bypostauthor {
  display: block;
}

.comment-author.vcard img {
  border-radius: 50%;
}

b.fn {
  margin-left: 8px;
}

.form-submit {
  margin-bottom: 3.2em;
}

/* Widgets
--------------------------------------------- */
.widget {
  margin: 0 0 2em;
}

.widget select {
  max-width: 100%;
}

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

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
  display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
  margin-bottom: 1.5em;
  max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.wp-caption .wp-caption-text {
  margin: 0.8075em 0;
}

.wp-caption-text {
  text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
  margin-bottom: 1.5em;
  display: grid;
  grid-gap: 1.5em;
}

.gallery-item {
  display: inline-block;
  text-align: center;
  width: 100%;
}

.gallery-columns-2 {
  grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
  grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
  grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
  grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
  grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
  grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
  grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
  grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
  display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
  display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
  display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

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

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  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. */
#primary[tabindex="-1"]:focus {
  outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {
  /*rtl:ignore*/
  float: left;

  /*rtl:ignore*/
  margin-right: 1.5em;
  margin-bottom: 1.5em;
}

.alignright {
  /*rtl:ignore*/
  float: right;

  /*rtl:ignore*/
  margin-left: 1.5em;
  margin-bottom: 1.5em;
}

.aligncenter {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5em;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}
/** this style hides the top border only on landins-single template page */
.ls-only.hentry.type-page {
  border-top: 1px solid transparent;
}

/** ALL MEDIA QUERIES START HERE
 */

/**---------------------------------------------------
* MEDIA QUERIES 
*----------------------------------------------------*/
@media only screen and (max-width: 1024px) {
  .site {
    display: grid;
    grid-template-columns: minmax(0px, 1fr) auto minmax(0px, 1fr);
    padding: 0;
  }

  .site-footer-widget:first-child {
    margin-right: 1em;
  }

  .site-footer-widget {
    flex: 1;
    position: relative;
    margin-left: 0;
    padding-left: 0;
    margin-right: 1em;
    margin-bottom: 1.6em;
  }

  .site-footer-widget::before {
    content: none;
  }

  .site-footer-widget ul a {
    width: 100%;
    display: inline-block;
    padding: 0.2em 0.4em;
  }

  .site-info {
    margin: 32px 0;
  }

  /** header logo title social icons */
  .logobrand {
    grid-row: 1;
    grid-column: 1 / -1;
    margin-bottom: 0px;
    min-height: auto;
    margin-top: 16px;
    margin-bottom: 8px;
  }

  .header-image img {
    margin-bottom: 16px;
  }

  .main-navigation {
    grid-row: 2;
    grid-column: 1 / -1;
  }

  /** for wide menu header option */
  .main-navigation.wide {
    grid-row: 2;
    grid-column: 1 / -1;
    padding: 0;
    border-top: none;
    border-bottom: none;
    margin-bottom: 0;
  }

  .social-media {
    grid-row: 3;
    grid-column: 1 / -1;
    justify-self: unset;
    margin-top: 16px;
    margin-bottom: 16px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-evenly;
    background-color: var(--m-social-media-bg);
  }

  .social-media a {
    border-radius: 0px;
    background-color: var(--m-social-media-bg);
  }

  .social-media a:hover {
    background-color: var(--social-icon-hover);
  }

  /** inverting social icons form white to black */
  .social-media a img {
    max-width: 100%;
    height: auto;
    filter: var(--img-invert-on);
  }
  /** reversing inversion. icons form black to white */
  .social-media a:hover img {
    filter: var(--img-invert-off);
  }

  .site-main {
    flex: 1;
  }

  .page-category-title,
  .page-title,
  .hentry.type-page {
    border-top: 1px solid transparent;
  }

  .entry-title {
    font-size: var(--h3-font-size);
  }

  .entry-footer {
    display: flex;
    row-gap: 8px;
    flex-flow: column;
  }

  .comments-link {
    padding: 8px 16px;
    border: 1px solid var(--color-primary);
    border-radius: 3px;
    margin-left: unset;
    margin-bottom: 16px;
    margin-top: 16px;
    align-self: center;
  }

  .widget-area {
    display: none;
  }

  /** Footer Widget Area */
  /* .site-footer-widget-wrap {} */

  .site-footer-widget:first-child {
    margin-right: 1em;
  }

  .site-footer-widget {
    flex: 1;
    position: relative;
    margin-left: 0;
    padding-left: 0;
    margin-right: 1em;
  }

  .site-footer-widget::before {
    content: none;
  }

  .site-footer-widget ul a {
    width: 100%;
    display: inline-block;
    padding: 0.5em 1em;
  }

  .site-info {
    margin: 32px 0;
  }

  /* This is necessary to counter WP core forces links a
 to disply inline for some core widgets with !important
  so the spans line up horizontally, like in recent comments */
  .site-footer-widget span {
    padding: 0;
    display: inline-block;
  }

  .site-footer-widget ul a {
    width: 100%;
    padding: 0;
    display: inline-block;
  }
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (max-width: 688px) {
  body {
    font-size: var(--body-font-m);
  }

  .site {
    display: grid;
    grid-template-columns: minmax(0px, 1fr) auto minmax(0px, 1fr);
    padding: 0;
  }

  .site-branding {
    min-height: auto;
  }

  .site-inner-wrapper {
    padding: 0 16px;
  }

  .site-header {
    padding: 0;
  }

  .logobrand {
    grid-row: 1;
    grid-column: 1 / -1;
    margin-bottom: 8px;
  }

  .header-image img {
    margin-bottom: 8px;
  }

  .main-navigation {
    grid-row: 2;
    grid-column: 1 / -1;
  }

  /* mobile option */
  .main-navigation ul {
    display: flex;
    list-style: none;
    flex-flow: column nowrap;
    justify-content: center;
    height: auto;
    margin: 16px 0;
    padding: 0;
    position: relative;
    z-index: 1;
  }

  .main-navigation a {
    display: flex;
    text-decoration: none;
    cursor: pointer;
    min-height: 40px;
    border-top: 1px solid #767676;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-start;
    flex-direction: row;
  }

  .social-media {
    grid-row: 3;
    grid-column: 1 / -1;
    justify-self: unset;
    margin-top: 16px;
    margin-bottom: 8px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-evenly;
    border-radius: 3px;
    background-color: var(--m-social-media-bg);
  }

  .social-media a {
    border-radius: 0px;
    background-color: var(--m-social-media-bg);
  }

  .social-media a:hover {
    background-color: var(--social-icon-hover);
  }

  .social-media a img {
    max-width: 100%;
    height: auto;
    filter: invert(100%);
  }

  .social-media a:hover img {
    filter: invert(0%);
  }

  .site-main {
    flex: 1;
  }

  .entry-title {
    font-size: var(--h3-font-size);
  }

  .entry-footer {
    display: flex;
    row-gap: 8px;
    flex-flow: column;
  }

  .comments-link {
    padding: 8px 16px;
    border: 1px solid var(--color-primary);
    border-radius: 3px;
    margin-left: unset;
    margin-bottom: 16px;
    margin-top: 16px;
    align-self: center;
  }

  /** Sidebar Widget Area */
  .widget-area {
    display: none;
  }

  .site-main .comment-navigation,
  .site-main .posts-navigation,
  .site-main .post-navigation {
    margin: 0 0 1em;
  }

  .post,
  .page {
    margin: 0 0 1em;
  }

  /** Footer Widget Area */
  .site-footer-widget-wrap {
    flex-flow: column;
  }

  .site-footer-widget:first-child {
    margin-right: 0;
  }

  .site-footer-widget {
    flex: 1;
    position: relative;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
  }

  .site-info {
    margin: 32px 0;
  }

  .category-article .entry-title {
    font-size: var(--h4-font-size);
    letter-spacing: var(--h4-letter-spacing);
    line-height: var(--h4-line-height);
  }

  .category-archive {
    flex-flow: column wrap;
  }

  .category-article {
    flex: 1;
  }

  /** comments */
  .comment-reply-title {
    font-size: var(--h4-font-size);
    margin: 0 0 1rem;
  }
}