@charset "UTF-8";
/*!
Theme Name: kodxme
Theme URI: http://kodx.dev
Author: KODX
Author URI: http://kodx.dev
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.5.5
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: kodxme
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.

kodxme 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 Variables
--------------------------------------------------------------*/
:root {
  /** Root CSS settings. they will be provided in child-theme so one can edit override if needed */
  /** Fonts and colors */

  /** Site title is always a hyperlink */
  --site-title-a: #c90032;
  --site-title-hover: #c90032;

  /** Theme main content background color */
  --content-bg: #fcfcfc;

  /** Main font for headings and menu */
  --heading-font: "IBM Plex Sans", sans-serif;
  --heading-font-weight: 700;
  --heading-color: #010107;
  /** Headings that are also links typically post titles
 	* a and :visited are same color, :hover :active and :focus are another */
  --heading-link-a: #010107;
  --heading-link-hover: #c90032;

  /** Main body font settings */
  --body-font: "Source Sans 3", sans-serif;
  --body-font-size: 1.1875rem;
  --body-font-weight: 400;
  --body-text-color: #55555e;
  --body-bg-color: #f5f5f5;
  --body-textarea: #f5f5f5;
  /** body medium, used rarely for some elements */
  --body-font-m: 1rem;
  /** body small, used rarely for some elements */
  --body-font-s: 0.875rem;

  /** main body hyperlinks color */
  --body-links-a: #c90032;
  --body-links-hover: #c90032;

  /** Social icon background color of the link */
  --social-icon-a: #010107;
  /** changes background color of hover effect on top right social icons */
  --social-icon-hover: #c90032;
  /** Mobile Social media bar background  */
  --m-social-media-bg: #e7e7e7;
  /** invert image of social media */
  --img-invert-on: invert(100%);
  --img-invert-off: invert(0%);

  /** main site navigation  */
  --main-nav-font: "IBM Plex Sans", sans-serif;
  --main-nav-medium: 400;
  --main-nav-font-size: 14px;
  /** main nav colors */
  --main-nav-a: #646568;
  /** font color of menu link */
  --main-nav-hover: #010107;
  /** dropdown menu a background color */
  --sub-nav-a-bg: #ffffff;
  --sub-nav-hover: #f1f1f1;

  --color-border-mainnav: #f5f5f5;
  --color-border-article: #f5f5f5;

  /** Drop-down links background color on mouse over */
  --color-border-dropwodn-menu: #e0dbdb;

  /** Font settings for headins. */
  --h1-font-size: 64px;
  --h1-line-height: 1.24;
  --h1-letter-spacing: -3px;

  --h2-font-size: 48px;
  --h2-line-height: 1.3;
  --h2-letter-spacing: -2px;

  --h3-font-size: 36px;
  --h3-line-height: 1.25;
  --h3-letter-spacing: -1.4px;

  --h4-font-size: 28px;
  --h4-line-height: 1.25;
  --h4-letter-spacing: -1px;

  --h5-font-size: 18px;
  --h5-line-height: 1.2;
  --h5-letter-spacing: 0.5;

  --h6-font-size: 16px;
  --h6-line-height: 1.2;
  --h6-letter-spacing: 0;

  /** Widget font settings */
  --widget-font-size: 17px;
  --widget-font-weight: 400;
  --widget-font-line-height: 1.8;
  /** table widget */
  /** Table caption and td background */
  --widget-table-td: #fafafa;
  /** Table th background this color -> #7a292c; is also pretty cool redish for contrast but im sticking with grey tones */
  --widget-table-th: #f5f5f5;
  /** Widget Colors */
  --widget-link-a: #c90032;
  --widget-link-hover: #c90032;

  --widget-border: 16px;

  --color-widget-bg-li: #f7f7f7;
  --color-widget-li-accent: #ffffff;

  /** Utilities Misc. */
  /** Divider lines */
  --divider-color: #f5f5f5;
  --divider-height: 16px;

  /** Meta of the post font settings */
  --meta-font-size: 16px;
  --meta-font-color: #6c6d70;

  /** list link backgrounds on mobile to increase usability */
  --m-widget-li-a-bg: #f7f7f7;

  --submit-btn-bg: #010107;
  --submit-btn-hover: #292929;
  --submit-btn-text: #f1f1f1;
  --submit-btn-border: 3px solid transparent;

  /* tag bg and text color for wc product label
  same for dark and white. */
  --color-bg-discount-tag: #c90032;
  --color-font-discount-tag: #ffffff;
}

/*--------------------------------------------------------------
# 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: #666;
  border: 1px solid #ccc;
  border-radius: 3px;
  line-height: 2.5em;
  text-indent: 4px;
}

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

a:visited {
  color: var(--body-links-a);
}

a:hover,
a:focus,
a:active {
  color: var(--body-links-hover);
  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;
}

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-weight);
  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(--divider-color);
}

/* 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: auto 1fr;
  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 {
  /* it has a in blog and div in single post */
  grid-row: 1;
  grid-column: 1;
  position: relative;
  z-index: 100;
  background: var(--content-bg);
  display: flex;
}

.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. */
.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: 0 16px 8px 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  -o-box-decoration-break: clone;
}

/* 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 {
  /* this styles top category names in SINGLE POSTS only header area on <span> element */
  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: 14px 0px 15px;
  margin: 0;
  display: flex;
  column-gap: 4px;
}

/* this H1 styles category names on archive pages, similar styles for widget titles */
.page-title {
  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);
  color: var(--heading-color);
  padding: 14px 0px 15px;
  margin: 0;
}

/* 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 - 22px);
  letter-spacing: var(--h5-letter-spacing);
  padding: 14px 0px 8px;
  margin: 0px 0px 8px;
}

.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.3em 1em;
  border-radius: 2px;
  display: block;
  width: 100%;
  background: var(--color-widget-bg-li);
}

.widget-area .widget li:hover::before,
.site-footer-widget li:hover::before {
  background-color: var(--body-links-hover);
  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(--widget-link-a);
}

.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(--widget-link-hover);
  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;
}

.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(--divider-color);
}

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

.site-footer-widget::before {
  content: "";
  position: absolute;
  left: -32px;
  /* Position for border */
  top: 48px;
  bottom: 0;
  width: 0px;
  background-color: var(--divider-color);
}

/* Remove border for the first widget */
.site-footer-widget:first-child::before {
  display: none;
}

.site-footer-widget:first-child {
  padding: 0;
  margin: 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(--body-links-a);
  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-dropwodn-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-dropwodn-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-dropwodn-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(--divider-color);
  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;
}

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(--divider-color);
}

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

.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(--divider-color);
}

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 1.6em;
}

.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;
}

/* mainly for wooommerce product labels. 
same for light and dark */
mark,
ins {
  background: var(--color-bg-discount-tag);
  text-decoration: none;
  color: var(--color-font-discount-tag);
  padding: 0 0.25em;
}

/** 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(--body-links-a);
    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(--body-links-a);
    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;
  }
}