@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.8.0
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 Varisbles    */
  /* ==================== */
  --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: #3d3d43; /* Primary text */
  --color-text-muted: #6c6d70; /* Secondary text , used for main menu links*/
  --color-pure: #ffffff; /* Added for absolute white */

  /* Backgrounds */
  --color-body-bg: #fcfcfc;
  --color-background-main: #fcfcfc;
  --color-background-overlay: #ffffff99;
  --color-background-alt: #ffffff50;
  --color-content-bg: transparent;
  --color-highlight: #ffffff50;
  --color-highlight-vivid: #0000000f;
  /* Table TDs */
  --color-background-soft: #ffffff40;
  --color-accent: #c90032;

  /* ========================= */
  /* Main Menu – Component Vars */
  /* ========================= */
  /* Top-Level Menu Items (LI + A) */
  --menu-bar-bg: #00000000;
  --menu-bar-border: #d9d9d9;
  --menu-item-text: #222222;
  --menu-item-text-hover: #000000;
  --menu-item-text-active: #000000;

  --menu-item-bg: #00000000;
  --menu-item-bg-hover: #f2f2f2;
  --menu-item-bg-active: #e6e6e6;

  --menu-item-border: #d9d9d9;

  /* Submenu Container (UL) */
  --submenu-bg: #ffffff;
  --submenu-border: #d9d9d9;

  /* Submenu Items (LI + A) */
  --submenu-item-text: #222222;
  --submenu-item-text-hover: #000000;
  --submenu-item-text-active: #000000;

  --submenu-item-bg: #ffffff;
  --submenu-item-bg-hover: #f0f0f0;

  /** ------------------------------------
   * Break Points
   * ------------------------------------- */
  /* Breakpoints (desktop‑first) */
  --bp-lg: 1024px; /* tablets / small laptops */
  --bp-md: 768px; /* large phones */
  --bp-sm: 480px; /* small phones */

  /* End menu  */
  /* full bleed shell background colors */
  --color-bg-shell-header: ;
  --color-bg-shell-content: ;
  --color-bg-shell-footer: ;

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

  /* 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 */
  --site-background-color: var(--color-body-bg);
  --color-title-bg: var(--color-background-main);
  --body-textarea: var(--color-pure);
  --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);
  --color-border-article: var(--color-background-alt);

  /* 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-background-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);

  /* Layout defaults (safe fallbacks if customizer doesn't provide them) */
  --header-max-width: 1120px;
  --content-max-width: 1120px;
  --footer-max-width: 1120px;

  --frame-padding-horizontal: 0px;
  --frame-padding-vertical: 0px;

  --shell-header-bg: var(--color-bg-shell-header);
  --shell-content-bg: var(--color-bg-shell-content);
  --shell-footer-bg: var(--color-bg-shell-footer);

  --shell-frame-bg: var(--color-content-bg);
}

/*--------------------------------------------------------------
# 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: 4px 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);
}

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 columns, outer 2 act as gutters */
.site {
  display: grid;
  grid-template-columns: var(--frame-padding-horizontal) auto var(
      --frame-padding-horizontal
    );
  grid-template-rows: auto auto auto;
  width: 100%;
  min-height: 100vh;
}

/* ============================
   SECTION SHELLS (full‑bleed)
   ============================ */
.shell-header,
.shell-content,
.shell-footer {
  grid-column: 1 / -1;
}

.shell-header {
  grid-row: 1;
}

.shell-content {
  grid-row: 2;
}

.shell-footer {
  grid-row: 3;
}

/* -------------------------------------------------------------- 
   SHELL FRAME (inner content column)
   Constrained width + padding 
-------------------------------------------------------------- */
.shell-frame {
  background-color: var(--shell-frame-bg);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--frame-padding-horizontal);
  margin-bottom: 0;
  padding-top: clamp(0px, var(--frame-padding-vertical), 128px);
  padding-bottom: clamp(0px, var(--frame-padding-vertical), 128px);
}

/* -------------------------------------------------------------- 
   SECTION-SPECIFIC MAX-WIDTHS (Customizer variables)
-------------------------------------------------------------- */
.shell-header .shell-frame {
  max-width: var(--header-max-width);
}

.shell-content .shell-frame {
  max-width: var(--content-max-width);
  display: flex;
  /* padding-top: 24px; */
}

.shell-footer .shell-frame {
  max-width: var(--footer-max-width);
}

/* --------------------------------------------------------------
   SECTION BACKGROUNDS (Customizer variables)
-------------------------------------------------------------- */
.shell-header {
  background: var(--shell-header-bg, transparent);
}

.shell-content {
  background: var(--shell-content-bg, transparent);
}

.shell-footer {
  background: var(--shell-footer-bg, transparent);
}

/* Site Header  */
.site-header {
  position: relative;
  z-index: 900;
  width: 100%;
  border-bottom: var(--divider-height) solid var(--color-background-alt);
}

.site-header.wideheader {
  padding-bottom: 16px;
}

.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;
  width: 100%;
  overflow: hidden;
}

.header-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

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

/* CONTENT AREA */

.site-main {
  flex: 1 1 0%;
  min-width: 0;
  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;
}

/* .hentry:last-child {
} */

/* 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;
  display: flex;
  overflow: hidden;
  border: 16px solid var(--color-background-alt);
  aspect-ratio: 3 / 2;
}

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

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

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

/* 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(--color-title-bg);
  padding: 0px 16px 0px 0.2em;
  box-decoration-break: clone;
  -webkit-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);
  padding: 8px 4px 8px 0px;
  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;
  padding-top: 16px;
  margin-bottom: 24px;
  border-top: 3px dotted var(--color-background-alt);
  border-bottom: 3px solid var(--color-primary);
  padding-bottom: 18px;
}

/* .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 340px;
  margin-left: 64px;
  /* max-width: 340px; */
}

/* .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.85em 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 {
  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(--menu-item-text);
  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(--menu-item-text);
  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(--menu-item-text-hover);
  cursor: pointer;
}

/* First level only  */
.main-navigation ul li.current-menu-item > a {
  color: var(--menu-item-text-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(--submenu-border);
  background-color: var(--submenu-item-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(--submenu-border);
  flex-grow: 1;
  background-color: var(--submenu-item-bg);
  font-weight: var(--body-font-weight);
  cursor: pointer;
}

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

.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: 0px;
}

.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;
  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-top: 16px;
    margin-bottom: 16px;
  }

  .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;
    margin: 0 0 16px 0;
  }

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

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

  /** ------------------------------------
  Footer Widget Area
  ------------------------------------- */
  .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: 768px) {
  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-header {
    padding: 0;
  }

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

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

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

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

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

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

  .post,
  .page {
    margin: 0;
  }

  /** 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;
  }
}

@media only screen and (max-width: 480px) {
  article .entry-title {
    font-size: var(--h4-font-size);
    line-height: var(--h4-line-height);
    letter-spacing: var(--h4-letter-spacing);
  }
}

/* --------------------------------------------------------------
   Off-canvas Responsive Panels
-------------------------------------------------------------- */
.responsive-controls,
.offcanvas-overlay,
.submenu-toggle {
  display: none;
}

body.offcanvas-active {
  overflow: hidden;
}

@media only screen and (max-width: 1024px) {
  .site-branding {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    row-gap: 12px;
  }

  .logobrand {
    grid-column: 1/-1;
    grid-row: 1;
    margin: 0;
    align-self: center;
    justify-self: center;
  }

  .responsive-controls {
    position: fixed;
    top: 40px;
    right: -8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 1250;
    background: #000000;
    border-radius: 8px;
  }

  .panel-toggle {
    width: 52px;
    height: 42px;
    padding: 2px 8px;
    background: transparent;
    border: none;
    box-shadow: none;
    text-align: center;
  }

  .panel-icon svg {
    display: block;
    width: 32px;
    height: 26px;
    stroke: #ffffff;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .social-media {
    grid-column: 1/-1;
    grid-row: 2;
    justify-self: center;
    align-self: center;
    margin: 4px;
  }

  .offcanvas-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 1300;
  }

  .offcanvas-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
  }

  .main-navigation {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(420px, 86vw);
    background: var(--submenu-bg);
    border-left: 1px solid var(--menu-bar-border);
    transform: translateX(100%);
    transition: transform 0.28s ease;
    z-index: 1400;
    padding: 72px 18px 18px;
    overflow-y: auto;
  }

  .main-navigation.panel-open {
    transform: translateX(0);
  }

  .main-navigation ul {
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
    gap: 0;
  }

  .main-navigation li {
    padding: 0;
    border-bottom: 1px solid var(--menu-item-border);
  }

  .main-navigation a {
    display: block;
    padding: 12px 6px;
    min-height: 44px;
  }

  .main-navigation ul ul,
  .main-navigation ul ul ul {
    position: static;
    left: auto;
    top: auto;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    display: none;
    border: 0;
    border-top: 1px solid var(--submenu-border);
    margin: 0 0 0 14px;
    background: transparent;
  }

  .main-navigation ul li:hover > ul,
  .main-navigation ul li.focus > ul,
  .main-navigation ul ul li:hover > ul,
  .main-navigation ul ul li.focus > ul {
    left: auto;
    display: none;
  }

  .main-navigation .menu-item-has-children > a::after {
    display: none;
  }

  .main-navigation .submenu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 6px;
    margin-left: auto;
    padding: 0;
    float: right;
    line-height: 1;
  }

  .main-navigation .menu-item-has-children.sub-opened > ul {
    display: block;
  }

  .offcanvas-sidebar {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    width: min(380px, 84vw);
    height: 100vh;
    margin: 0;
    padding: 72px 16px 22px;
    background: var(--color-background-main);
    border-left: 1px solid var(--color-border-article);
    transform: translateX(100%);
    transition: transform 0.28s ease;
    overflow-y: auto;
    z-index: 1400;
  }

  .offcanvas-sidebar.panel-open {
    transform: translateX(0);
  }
}

@media only screen and (max-width: 820px) {
  .main-navigation {
    width: min(360px, 90vw);
    padding: 64px 14px 16px;
  }

  .offcanvas-sidebar {
    width: min(340px, 90vw);
    padding: 64px 14px 18px;
  }

  .responsive-controls {
    top: 40px;
    right: -8px;
  }

  .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: 0 0 16px 0;
    position: relative;
    border-left: 5px solid var(--color-primary);
  }
}