@charset "UTF-8";
/*!
Theme Name: technocrat child theme
Template: technocrat
Theme URI: http://kodx.me
Author: KODX
Author URI: http://kodx.me
Description: This is a blogging theme with projects
Version: 1.6.0
Tested up to: 5.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: technocrat-child-theme
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/
*/

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

/** --------------------- EDIT BELOW THIS LINE ----------------------------- */

/** YOU CAN CHANGE ROOT VARIABLE VALUES AND THAT WAY ACHIEVE EASILY THE CUSTOM  COLORS ETC. */

/*--------------------------------------------------------------
# Root Variables
--------------------------------------------------------------*/
:root {
  /* ==================== */
  /* Core Color Tokens    */
  /* ==================== */
  /*--color-primary: #c90032;  Accent/actions, links, title link hovercolor button hovercolor */
  --color-primary: #548240; /* 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: #333333; /* Primary text */
  /*--color-text-muted: #6c6d70;  Secondary text , used for main menu links*/
  --color-text-muted: #666666; /* 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 */

  --sub-nav-a: #f4e09c;
  --sub-nav-a-hover: #f4e09c;
  --sub-nav-a-bg: #231f20;
  --sub-nav-hover: #231f20;
  --main-nav-a: #f4e09c;
}

/* 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;
  /* background-color: #ffffff; */
  margin-top: 16px;
}

/* *****************  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.75em;
  position: relative;
  z-index: 1;
}

.main-navigation li {
  position: relative;
  padding: 0;
  white-space: nowrap;
}

.main-navigation a {
  display: flex;
  text-decoration: none;
  cursor: pointer;
  justify-content: center; /* Centers horizontally */
  align-items: center;
  padding: 0 1.125em;
  margin: 0 8px;
  border-radius: 8px;
}

.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-a-hover);
  cursor: pointer;
  background-color: #5c4f36;
}

/* First level only  */
/* .main-navigation ul li.current-menu-item > a {
	color: var(--main-nav-hover);
} */

.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a,
.main-navigation .current-menu-ancestor > a {
  color: #231f20;
  background: #f4e09c;
}

/* 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: transparent;
  text-underline-offset: 6px;
  text-decoration-thickness: 3px;
}

.current-item a {
  color: green;
}

/* *****************  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(--divider-color);
  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;
  line-height: 24px;
  border-radius: 0 0 16px 16px;
  row-gap: 6px;
}

.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(--divider-color);
  flex-grow: 1;
  background-color: var(--sub-nav-a-bg);
  font-weight: var(--body-font-weight);
  cursor: pointer;
  color: var(--sub-nav-a);
}

/* Add the hover style */

.main-navigation ul ul a:hover {
  background-color: var(--sub-nav-a-hover);
  color: var(--sub-nav-hover);
  border-bottom: 1px solid var(--divider-color);
}

.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: 1px 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: 0;
  border-top: 1px solid var(--divider-color);
  border-bottom: 1px solid var(--divider-color);
  margin-bottom: 0px;
  line-height: 48px;
  border: 5px solid #f4e09c;
  background-color: #231f20;
  border-radius: 24px;
}

/* 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-left: 5px;
  transition: transform 0.3s ease;
  font-size: 1em; /* Adjust size as needed */
  line-height: 55px; /* 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 */
  line-height: 1;
}

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

/* icon adjustment vertical align */
.menu-item i._mi {
    margin-top: 0;
}

/* ------------------------------------- 
   Header
------------------------------------- */
.site {
  padding: 16px 0px 0px;
}

.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;
  background-color: transparent;
  padding: 0 16px;
}

.site-header {
  grid-row: 1;
  grid-column: 1;

  position: relative;
  z-index: 900;
}

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

.site-title-wrap {
  grid-row: 1;
  grid-column: 2;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
}
.site-title {
  font-family: var(--heading-font);
  font-weight: var(--heading-font-weight);
  font-size: 62px;
  line-height: 70px;
  letter-spacing: -1px;
  margin: 0;
  text-transform: uppercase;
  text-shadow: -3px 0px 0px #fff, 3px 0px 0px #fff, 0px -3px 0px #fff,
    0px 3px 0px #fff;
}
p.site-title a,
p.site-title a:hover,
p.site-title a:active,
p.site-title a:focus {
  color: var(--heading-color);
  text-decoration: none;
}
.site-description {
  font-family: var(--body-font);
  font-weight: 500;
  font-size: 30px;
  line-height: 32px;
  letter-spacing: 0;
  margin: 0;
  text-shadow: -2px 0px 0px #fff, 2px 0px 0px #fff, 0px -2px 0px #fff,
    0px 2px 0px #fff;
}
.logobrand {
  grid-row: 1;
  grid-column: 1;
  justify-self: start;
  display: flex;
  min-height: 96px;
  align-items: center;
}
.custom-logo-link {
  width: 96px;
  height: 96px;
}
.content-wrapper {
  margin-top: 24px;
  grid-row: 2;
  grid-column: 1;
  padding: 48px;
  display: flex;
  flex-flow: row;
  background-color: #ffffff;
  border-radius: 24px;
  border-top: 0;
}
.site-footer {
  border-top: 16px solid transparent;
}
.site-footer-widget-wrap {
  border-bottom: var(--divider-height) solid transparent;
}

 .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: minmax(100px, auto);
        gap: 16px;
        width: 100%;
        padding: 16px;
        background-color: #ffffff;
    }

    .grid-item {
        background-color: #f5f7fa;
        border-radius: 16px;
        display: flex;
        flex-flow: column wrap;
        padding: 8px 24px 24px;
    }

    .front-h3 {
        font-size: 24px;
        color: #4A90E2;
    }

/* hiding page titles form viewer but not from google */
.screen-reader-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ppom-section-collapse {
    border-radius: 12px;
    background: #fffbee;
}


    @media (max-width: 768px) {
        .grid-container {
            grid-template-columns: 1fr;
        }
    }