@charset "UTF-8";
/*!
Theme Name: Technocrat Child Theme
Template: technocrat
Theme URI: https://technocrat.cc
Author: KODX.DEV
Author URI: https://technocrat.cc
Description: This is a blogging theme with projects
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-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-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;
}

.site-footer {
  border-top: 0 !important;
  --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;
}

/* =====================================================
   Always-on hamburger / off-canvas navigation
   Replaces the horizontal desktop nav at all widths.
   ===================================================== */

/* Show the hamburger toggle at all viewport sizes */
.responsive-controls {
  position: fixed;
  top: 100px;
  right: -18px;
  display: flex !important;
  flex-direction: column;
  gap: 4px;
  z-index: 1250;
  background: #000000;
  border-radius: 8px;
  border: 1px solid #ffffff96;
}

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

.panel-toggle:hover,
.panel-toggle:focus,
.panel-toggle:active {
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: pointer;
}

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

/* Overlay is unused — close is handled by the document click listener */
.offcanvas-overlay {
  display: none !important;
}

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

/* Off-canvas panel: always active, overrides desktop horizontal nav */
.main-navigation {
  grid-row: unset !important;
  grid-column: unset !important;
  align-self: unset !important;
  width: min(420px, 86vw) !important;
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  height: 100vh !important;
  background: var(--submenu-bg) !important;
  border-left: 1px solid var(--menu-bar-border) !important;
  transform: translateX(100%) !important;
  transition: transform 0.28s ease !important;
  z-index: 1400 !important;
  padding: 72px 18px 18px !important;
  overflow-y: auto !important;
  text-transform: uppercase;
}

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

/* Stack nav items vertically inside the panel */
.main-navigation ul {
  display: flex !important;
  flex-flow: column nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0 !important;
}

.main-navigation li {
  position: relative;
  padding: 0 !important;
  white-space: normal !important;
  border-bottom: 1px solid var(--menu-item-border);
}

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

/* Submenus: collapse by default, expand on .sub-opened */
.main-navigation ul ul,
.main-navigation ul ul ul {
  position: static !important;
  left: auto !important;
  top: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  display: none !important;
  border: 0 !important;
  border-top: 1px solid var(--submenu-border) !important;
  margin: 0 0 0 14px !important;
  background: transparent !important;
}

.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 {
  display: none !important;
}

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

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

/* Collapse site-branding to 2 columns (logo + social); nav is gone from grid.
   Only applies on desktop — mobile stacking is handled by the parent's
   @media (max-width: 1024px) rules which must not be overridden. */
@media only screen and (min-width: 1025px) {
  .site-branding {
    grid-template-columns: minmax(0, 1fr) minmax(0, auto) !important;
  }

  .logobrand {
    grid-row: 1 !important;
    grid-column: 1 !important;
  }

  .social-media {
    grid-row: 1 !important;
    grid-column: 2 !important;
  }
}