/*!
* Dark mode of the theme 
* Theme Name: technocrat child theme
* Description: Custom styles for the Technocrat Child Theme
* Author: kodx.dev
* Version: 1.8.0
* 
*/

/*
 
 8888b.     db    88""Yb 88  dP     8b    d8  dP"Yb  8888b.  888888      dP"Yb  88b 88 88     Yb  dP 
  8I  Yb   dPYb   88__dP 88odP      88b  d88 dP   Yb  8I  Yb 88__       dP   Yb 88Yb88 88      YbdP  
  8I  dY  dP__Yb  88"Yb  88"Yb      88YbdP88 Yb   dP  8I  dY 88""       Yb   dP 88 Y88 88  .o   8P   
 8888Y"  dP""""Yb 88  Yb 88  Yb     88 YY 88  YbodP  8888Y"  888888      YbodP  88  Y8 88ood8  dP    
 
*/

/** This edits dark mode of main theme, for woocommerce dark mode see /css/darkwoocommerce.css */

:root.darkmode {
  /* ==================== */
  /* Core Color Tokens    */
  /* ==================== */
  --color-primary: #6ead00;
  --color-secondary: #f1f1f1;
  --color-accent: #6ead00;

  --color-text-base: #f1f1f1;
  --color-text-muted: #a39f9f;
  --color-pure: #101010;

  --color-body-bg: #101010;
  --color-background-main: #1a1a1b;
  --color-background-alt: #ffffff12;
  --color-background-soft: #ffffff12;

  --color-highlight: #1f1f1f;
  --color-highlight-vivid: #191919;
  --body-font-weight: 300;

  /* ========================= */
  /* Main Menu – Component Vars */
  /* ========================= */

  /* Menu Bar (nav container) */
  --menu-bar-bg: #00000000; /* transparent */
  --menu-bar-border: #555555; /* mid-gray border */

  /* Top-Level Menu Items (LI + A) */
  --menu-item-text: #cccccc; /* light gray */
  --menu-item-text-hover: #ffffff; /* white */
  --menu-item-text-active: #ffffff;

  --menu-item-bg: #00000000; /* transparent */
  --menu-item-bg-hover: #333333; /* dark hover */
  --menu-item-bg-active: #444444; /* slightly lighter active */

  --menu-item-border: #555555; /* matches bar border */

  /* Submenu Container (UL) */
  --submenu-bg: #1a1a1a; /* deep gray */
  --submenu-border: #555555; /* consistent border */

  /* Submenu Items (LI + A) */
  --submenu-item-text: #cccccc; /* light gray */
  --submenu-item-text-hover: #ffffff; /* white */
  --submenu-item-text-active: #ffffff;

  --submenu-item-bg: #1a1a1a; /* matches container */
  --submenu-item-bg-hover: #333333; /* hover elevation */

  /* full bleed shell background colors */
  /* Intentionally left unset for Customizer/JS dynamic use */
  --color-bg-shell-header: ;
  --color-bg-shell-content: ;
  --color-bg-shell-footer: ;

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

/* Remove browser-default focus styles */
textarea:focus,
input:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-primary);
}

/** on desktop size */

.social-media img {
  filter: var(--img-invert-on);
}

.social-media a:hover img {
  filter: var(--img-invert-off);
}

/** ------------------------------------
 * TAILWIND TYPE STYLES FOR PRIVACY AND TERMS
 * ------------------------------------- */
/* Typography Refinement */
h2 {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 2.5rem;
  letter-spacing: -0.02em;
}

h3 {
  font-weight: 700;
  color: var(--accent-purple);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
}

p {
  margin-bottom: 1.5rem;
}

strong {
  color: #fff;
}

.bg-vault {
  background-color: var(--bg-primary);
}
.text-vault {
  color: var(--text-main);
}
.text-dim {
  color: var(--text-dim);
}

/* Proton Background Utility */
.proton-bg {
  background: radial-gradient(
    circle at 50% -10%,
    #221850 0%,
    #191333 35%,
    var(--bg-primary) 85%
  );
  background-color: var(--bg-primary);
  background-attachment: fixed;
  min-height: 100vh;
}

/* Container Utility */
.legal-container {
  max-width: 720px;
  margin: 0 auto 100px auto;
  padding: 48px;
  background: rgba(22, 27, 42, 0.4);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  border-radius: 1.5rem;
}

.legal-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 2.5rem;
  color: #fff;
  border-bottom: 1px solid rgba(168, 85, 247, 0.15);
  padding-bottom: 1.5rem;
}

.legal-section {
  margin-bottom: 2rem;
}
.legal-section h3 {
  color: var(--accent-purple);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

.btn-primary-vault {
  padding: 0.75rem 1.5rem;
  background: var(--accent-purple);
  border-radius: 0.5rem;
  color: #fff;
  font-weight: 600;
  transition: all 0.2s ease;
}

.card-glass {
  /* This creates the subtle radial light effect from the top-left */
  background: radial-gradient(
    circle at 0% 0%,
    rgba(168, 85, 247, 0.08) 0%,
    rgba(22, 27, 42, 0.95) 50%
  );
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-subtle);
  border-radius: 1rem;
  min-height: 330px; /* Updated to your 330px requirement */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition:
    transform 0.3s ease,
    border 0.3s ease;
}

/* Subtler, more focused glow */
.border-glow {
  border: 1px solid rgba(168, 85, 247, 0.2);
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.15);
}

/* Hover effect for that 'Slippery' feel */
.card-glass:hover {
  border: 1px solid rgba(168, 85, 247, 0.4);
  box-shadow: 0 0 25px rgba(168, 85, 247, 0.1);
  transform: translateY(-2px);
}

/* Buttons */
.btn-primary {
  background-color: var(--accent-purple);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 700;
  transition: all 0.2s ease;
  display: inline-block;
  text-align: center;
}

.btn-primary:hover {
  background-color: var(--accent-soft);
  box-shadow: var(--glow-shadow);
  transform: translateY(-1px);
}

/* Gradient Text Utility */
.text-gradient {
  background: var(--gradient-vault);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

/* Updated Button with Gradient */
.btn-primary {
  background: var(--gradient-vault);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 700;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

.btn-primary:hover {
  opacity: 0.9;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
  transform: translateY(-1px);
}

.card-glass {
  min-height: 230px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Ensures content stays at the top */
}

/* Footer Link Colors */
.footer-link {
  color: var(--text-dim);
  transition: color 0.2s ease;
}

.footer-link:hover {
  color: var(--accent-purple);
}

.animate-slide-in {
  animation: slide-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Comparison Table Styling */
table {
  width: 100%;
  border-collapse: collapse;
}
th,
td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
}
th {
  color: var(--accent-purple);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}
.highlight-row {
  background: rgba(168, 85, 247, 0.05);
  color: #fff;
  font-weight: bold;
}

article .entry-title {
  background: var(--color-background-alt);
}

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

/** ------------------------------------
 * END OF TAILWIND TYPE STYLES
 * ------------------------------------- */

.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: 0;
  border-bottom: 0;
  /* padding-bottom: 18px; */
}

@media only screen and (max-width: 1024px) {
  .social-media img {
    filter: var(--img-invert-off) !important;
  }

  .social-media a:hover img {
    filter: var(--img-invert-on);
  }
}

@media only screen and (max-width: 688px) {
  .social-media img {
    filter: var(--img-invert-off);
  }

  .social-media a:hover img {
    filter: var(--img-invert-on);
  }
}