/*!
Theme Name: Blocksy
Theme URI: https://creativethemes.com/blocksy/
Author: CreativeThemes
Author URI: https://creativethemes.com
Description: Blocksy is a fast, modern WordPress theme with advanced WooCommerce support and full compatibility with the block editor.
Version: 2.1.27
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Copyright: (c) 2019 CreativeThemes.
Requires at least: 6.5
Requires PHP: 7.0
Tested up to: 6.9
Text Domain: blocksy
Blocksy Minimum Companion Version: 2.0.74-beta1
Tags: accessibility-ready, blog, block-patterns, e-commerce, wide-blocks, block-styles, grid-layout, one-column, two-columns, three-columns, four-columns, right-sidebar, left-sidebar, translation-ready, custom-colors, custom-logo, custom-menu, featured-images, footer-widgets, full-width-template, theme-options, threaded-comments
*/

/* Custom Styles from Cyber Child Theme */
/*
Theme Name: Blocksy Cyber Child
Template: blocksy
Version: 1.0.0
Description: Cyber-modern child theme for Blocksy (affiliate tech site).
*/
 @import url('https://fonts.googleapis.com/css2?family=Anta&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700|Orbitron:wght@500;600;700&display=swap');
/* -------------------------------
   0) Design tokens (palette)
---------------------------------*/
:root{
  /* Base */
  --bg: #0B0F14;         /* page background */
  --surface: #111827;    /* cards / sections */
  --surface-2: #0F172A;  /* deeper surface */
  --border: #233044;     /* borders/dividers */

  /* Text */
  --text: #E6EAF2;       /* primary text */
  --muted: #A7B0C0;      /* secondary text */

  /* Accents */
  --accent: #00E5FF;     /* electric cyan */
  --accent-2: #D800FF;   /* neon purple */
  --accent-3: #FF3D81;   /* warm neon (sparingly) */

  /* States */
  --focus: rgba(0, 229, 255, 0.35);
  --shadow: 0 10px 30px rgba(0,0,0,.35);

  /* Rounding */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;

  /* Layout rhythm */
  --gap: 16px;
  --gap-lg: 24px;
}

/* -------------------------------
   1) Global background + text
---------------------------------*/
html, body{
  background: var(--bg);
  color: var(--text);
}

body{
  /* Body font will be set in functions.php (Roboto) */
  line-height: 1.6;
}

/* Blocksy often wraps content in containers; keep it consistent */
.ct-container,
.content-area,
.site-main{
  color: var(--text);
}

/* -------------------------------
   2) Links
---------------------------------*/
a{
  color: var(--accent);
  text-decoration: none;
}

a:hover,
a:focus{
  color: var(--accent-2);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

a:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px var(--focus);
  border-radius: 8px;
}

/* -------------------------------
   3) Headings
---------------------------------*/
h1,h2,h3,h4,h5,h6{
  color: var(--text);
  letter-spacing: 0.3px;
}

/* Optional subtle “tech” effect without being unreadable */
h1{
  text-shadow: 0 0 18px rgba(0,229,255,.08);
}

/* -------------------------------
   4) Cards / Sections / Widgets
---------------------------------*/
.ct-sidebar .widget,
.wp-block-group.is-style-card,
.wp-block-group.alignwide,
.wp-block-post,
article,
.ct-related-posts,
.ct-box,
.ct-panel{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

/* Common padding improvements */
.widget,
article,
.wp-block-group.is-style-card{
  padding: var(--gap-lg);
  box-shadow: var(--shadow);
}

/* Reduce excessive shadows in some places */
.ct-sidebar .widget{
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}

/* Sidebar "Quick Links" menu hover color */
.ct-sidebar .widget_nav_menu a:hover,
.ct-sidebar .widget_nav_menu a:focus,
.ct-sidebar .wp-block-navigation a:hover,
.ct-sidebar .wp-block-navigation a:focus{
  color: #ff00ff !important;
}

/* Category template custom Quick links (category.php) */
.td-category-sidebar > .cyber-card:first-child a:hover,
.td-category-sidebar > .cyber-card:first-child a:focus{
  color: #ff00ff !important;
}

/* Sidebar "On this page" links (About, Contact, Terms, Privacy, etc.) */
.ct-sidebar .on-this-page-card a:hover,
.ct-sidebar .on-this-page-card a:focus,
.ct-sidebar .ez-toc-container a:hover,
.ct-sidebar .ez-toc-container a:focus,
.ct-sidebar [aria-label*="On this page" i] a:hover,
.ct-sidebar [aria-label*="On this page" i] a:focus{
  color: #ff00ff !important;
}

/* -------------------------------
   5) Buttons (Gutenberg + common)
---------------------------------*/
button,
input[type="submit"],
.wp-element-button,
.wp-block-button__link{
  background: var(--accent);
  color: #061017;
  border: 1px solid rgba(0,229,255,.35);
  border-radius: 14px;
  padding: 12px 16px;
  font-weight: 700;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
  box-shadow: 0 14px 30px rgba(0,229,255,.10);
}

button:hover,
input[type="submit"]:hover,
.wp-element-button:hover,
.wp-block-button__link:hover{
  background: var(--accent-2);
  border-color: rgba(216,0,255,.45);
  color: #07010A;
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(216,0,255,.12);
}

/* Secondary button style (add class="is-style-outline" in blocks) */
.is-style-outline .wp-block-button__link{
  background: transparent;
  color: var(--accent);
  border: 1px solid rgba(0,229,255,.55);
  box-shadow: none;
}
.is-style-outline .wp-block-button__link:hover{
  color: var(--accent-2);
  border-color: rgba(216,0,255,.55);
}

/* -------------------------------
   6) Form inputs
---------------------------------*/
input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
textarea,
select{
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 12px;
}

input:focus,
textarea:focus,
select:focus{
  outline: none;
  border-color: rgba(0,229,255,.55);
  box-shadow: 0 0 0 4px var(--focus);
}

/* -------------------------------
   7) Tables (important for comparisons)
---------------------------------*/
table{
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
}

th, td{
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

th{
  text-align: left;
  color: var(--text);
  background: rgba(0,229,255,.06);
}

tr:hover td{
  background: rgba(216,0,255,.05);
}

/* -------------------------------
   8) Lists, code, quotes
---------------------------------*/
ul, ol{
  color: var(--text);
}

code, pre{
  background: #0A121C;
  border: 1px solid rgba(0,229,255,.12);
  border-radius: 12px;
  color: #D7F9FF;
}

blockquote{
  border-left: 3px solid var(--accent);
  padding-left: 14px;
  color: var(--muted);
}

/* -------------------------------
   9) Header / navigation tweaks (light touch)
---------------------------------*/
.site-header,
.ct-header{
  background: rgba(11,15,20,.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(35,48,68,.8);
}

/* Menu links */
.ct-header [class*="menu"] a{
  color: var(--text);
}
.ct-header [class*="menu"] a:hover{
  color: var(--accent);
}

/* -------------------------------
   10) Footer
---------------------------------*/
.site-footer,
.ct-footer{
  background: #070B10;
  border-top: 1px solid rgba(35,48,68,.8);
  color: var(--muted);
}

/* -------------------------------
   11) Utility classes you can use in blocks
---------------------------------*/
.cyber-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: var(--gap-lg);
}

.cyber-glow{
  box-shadow: 0 0 0 1px rgba(0,229,255,.18),
              0 18px 44px rgba(0,229,255,.08);
}

.cyber-divider{
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,229,255,.75), rgba(216,0,255,.75), transparent);
  border: 0;
}

/* Ensure comments anchor exists visually */
#comments { scroll-margin-top: 90px; }

/* =========================
   Header background (dark)
   ========================= */

.ct-header,
.site-header,
header#masthead{
  background: var(--bg) !important;
  border-bottom: 1px solid rgba(35,48,68,.85);
}

/* If Blocksy uses transparent header layers */
.ct-header [data-row],
.ct-header .ct-header-inner{
  background: transparent !important;
}

/* Menu link colors */
.ct-header [class*="menu"] a{
  color: var(--text) !important;
}

.ct-header [class*="menu"] a:hover,
.ct-header [class*="menu"] a:focus{
  color: var(--accent) !important;
}

/* Header icons (search, etc.) */
.ct-header svg,
.ct-header .ct-icon{
  color: var(--text) !important;
  fill: currentColor !important;
}

/* Sticky header (when scrolling) */
.ct-header[data-sticky="yes"],
.ct-header .ct-sticky-container{
  background: rgba(11,15,20,.92) !important;
  backdrop-filter: blur(10px);
}

/* ==========================================
   Responsive fix for custom templates sidebar
   ========================================== */

@media (max-width: 980px){

  /* Any of our template wrappers that use inline grid columns */
  .site-main div[style*="grid-template-columns: 1fr 340px"]{
    grid-template-columns: 1fr !important;
  }
  .site-main div[style*="grid-template-columns: 1fr 320px"]{
    grid-template-columns: 1fr !important;
  }
  .site-main div[style*="grid-template-columns: repeat(2"]{
    grid-template-columns: 1fr !important;
  }

  /* Ensure sidebar doesn't force width */
  .ct-sidebar{
    width: 100% !important;
  }

  /* Add breathing room when stacked */
  .ct-sidebar{
    margin-top: 20px;
  }
}

/* Category layout grid */
.td-category-layout{
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
  align-items: start;
}

@media (max-width: 980px){
  .td-category-layout{
    grid-template-columns: 1fr !important;
  }
}
/* =========================
   Footer (TechDesk cyber)
   ========================= */

.site-footer,
.ct-footer{
  background: #070B10 !important;
  border-top: 1px solid #233044 !important;
  color: var(--muted) !important;
}

.site-footer h1, .site-footer h2, .site-footer h3,
.ct-footer h1, .ct-footer h2, .ct-footer h3{
  color: var(--text) !important;
}

.site-footer a,
.ct-footer a{
  color: var(--accent) !important;
  text-decoration: none;
}

.site-footer a:hover,
.ct-footer a:hover{
  color: var(--accent-2) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Optional neon divider line at top of footer */
.ct-footer:before,
.site-footer:before{
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,229,255,.7), rgba(216,0,255,.7), transparent);
  opacity: .55;
}

/* Footer widgets/cards if Blocksy renders them */
.ct-footer .widget,
.site-footer .widget{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}



/* =========================
   Blocksy footer bottom row
   ========================= */

.ct-footer [data-row="bottom"]{
  background: #070B10 !important; /* deep footer */
  border-top: 1px solid #233044 !important;
}

.ct-footer [data-row="bottom"] .ct-container{
  background: transparent !important;
}

/* Copyright text + link colors */
.ct-footer .ct-footer-copyright{
  color: var(--muted) !important;
}

.ct-footer .ct-footer-copyright a{
  color: var(--accent) !important;
}

.ct-footer .ct-footer-copyright a:hover{
  color: var(--accent-2) !important;
}
.ct-footer [data-row="top"],
.ct-footer [data-row="middle"],
.ct-footer [data-row="bottom"]{
  background: #070B10 !important;
}
/* =========================
   Featured image layout
   ========================= */

/* Image inside post header columns */
.entry-content .wp-block-columns{
  gap: 20px;
}

.entry-content .wp-block-image img{
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}

/* Keep images from overpowering text */
.entry-content .wp-block-image{
  margin: 0;
}

/* Mobile: stack image above text */
@media (max-width: 780px){
  .entry-content .wp-block-columns{
    flex-direction: column;
  }
}

/* =========================
   News cards: thumbnail left
   ========================= */

.td-post-row{
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.td-thumb{
  flex: 0 0 180px;
  max-width: 180px;
}

.td-thumb img{
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
}

.td-post-body{
  flex: 1 1 auto;
  min-width: 0;
}


/* Mobile: stack image above text */
@media (max-width: 780px){
  .td-post-row{
    flex-direction: column;
  }

  .td-thumb{
    max-width: 100%;
    flex-basis: auto;
  }

  .td-thumb img{
    height: 180px;
  }
}
@media (max-width: 780px){
  .td-thumb img{
    height: 140px; /* was 180px */
  }
}
/* Remove auto affiliate disclosure text */
.ct-affiliate-disclosure,
.affiliate-disclaimer,
.post-disclaimer,
[class*="affiliate"][class*="disclaimer"]{
  display: none !important;
}

/* hero line*/
@media (max-width: 600px){
  .site-main .cyber-card p{
    letter-spacing: .2px;
  }
}


  
/* ==========================================
   Cyberpunk-style Site Title with Anta Font
   ========================================== */
@keyframes site-title-led-pulse {
  0%, 100% {
    color: #00f5ff;
    text-shadow:
      1px 1px 1px rgba(0, 0, 0, 0.6),
      0 0 15px rgba(0, 255, 255, 0.7),
      0 0 20px rgba(0, 255, 255, 0.7),
      0 0 30px rgba(0, 255, 255, 0.8);
  }
  50% {
    color: #ff00ff;
    text-shadow:
      1px 1px 1px rgba(0, 0, 0, 0.6),
      0 0 10px #ff00ff,
      0 0 20px #ff00ff,
      0 0 30px #ff00ff,
      0 0 40px rgba(255, 0, 255, 0.8);
  }
}

.site-title a {
  font-family: 'Anta', sans-serif !important;  /* Use Anta font */
  font-weight: 700;
  font-size: 36px;
  text-transform: none;  /* Keep it normal (not uppercase) */
  color: #00f5ff;
  letter-spacing: 3px;  /* Slightly more spacing between letters for the 3D effect */
  
  /* Rounded / 3D effect */
  text-shadow: 
    1px 1px 1px rgba(0, 0, 0, 0.6), /* Slight shadow to make it pop */
    0px 0px 15px rgba(0, 255, 255, 0.7), /* Neon-like glow */
    0 0 20px rgba(0, 255, 255, 0.7),  /* Neon glow effect */
    0 0 30px rgba(0, 255, 255, 0.8);  /* More glow */
    
  transform: translateZ(0);  /* Adds depth (subtle 3D effect) */
  transition: all 0.3s ease;
  animation: site-title-led-pulse 3.2s ease-in-out infinite;
}

/* Hover effect for site title */
.site-title a:hover {
  text-decoration: none;
  transform: scale(1.1);  /* Slight scaling on hover for extra emphasis */
}
/* Default Site Title (Desktop) */
.site-title a {
  font-size: 36px;  /* Example default size for desktop */
}

/* Mobile-Specific Site Title */
@media (max-width: 768px) {
  .site-title a {
    font-size: 24px !important;  /* Adjust to a smaller size for mobile */
  }
}
/* Make sure the table scrolls horizontally on mobile */
@media (max-width: 768px) {
  .cyber-card table {
    width: 100%;
    min-width: 600px;  /* Adjust this min-width if necessary */
  }

  .cyber-card div {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}



/* Main container for the Best Picks page */
.category-best-picks .cyber-card {
  width: 100%;
  box-sizing: border-box;
}

/* Ensure no section overflows on mobile */
@media (max-width: 768px) {
  .category-best-picks .cyber-card {
    width: 100%;
    margin: 0;
    padding: 12px;  /* Adjust padding on mobile */
    box-sizing: border-box;
  }

  /* Fix the sidebar positioning */
  .ct-sidebar {
    width: 100% !important;  /* Ensure sidebar takes full width */
    margin-top: 20px;        /* Add spacing between content and sidebar */
  }

  /* Ensure the content section is not extending beyond mobile view */
  .category-best-picks .entry-content {
    width: 100% !important;
    overflow: hidden;
  }

  /* Handle Overflow Issue in Specific Sections */
  .category-best-picks .quick-comparison,
  .category-best-picks .how-we-pick {
    width: 100%;
    overflow-x: hidden;
    margin-bottom: 20px;  /* Space between sections */
  }
}

/* Prevent overflow on mobile */
@media (max-width: 768px) {
  .category-best-picks {
    overflow-x: hidden;  /* Prevent horizontal scroll */
  }

  .category-best-picks .cyber-card {
    overflow: hidden;  /* Prevent any child element from overflowing */
  }

  .category-best-picks .quick-comparison, 
  .category-best-picks .how-we-pick {
    overflow-x: hidden;
  }

  /* Ensure that the page content doesn't stretch too wide */
  .category-best-picks .entry-content {
    max-width: 100% !important;
  }
}
/* Sidebar responsiveness */
@media (max-width: 768px) {
  .ct-sidebar {
    width: 100% !important;
    margin-top: 20px;  /* Add spacing between content and sidebar */
  }

  /* Prevent sidebar content from overflowing */
  .ct-sidebar .cyber-card {
    box-sizing: border-box;
    padding: 15px; /* Adjust padding for mobile */
    margin: 10px 0; /* Adjust margin between sidebar sections */
  }
}
/* No Best Picks Yet Section Styling */
@media (max-width: 768px) {
  .category-best-picks .no-best-picks {
    text-align: center;
    font-size: 16px;  /* Adjust text size for mobile */
    padding: 20px;
    margin-top: 20px;
  }
}
/* Quick Comparison and How We Pick */
@media (max-width: 768px) {
  .category-best-picks .quick-comparison,
  .category-best-picks .how-we-pick {
    display: block;
    width: 100%;
    margin-bottom: 20px;
    padding: 10px;
  }

  .category-best-picks .quick-comparison h3,
  .category-best-picks .how-we-pick h3 {
    font-size: 20px;
    text-align: center;
  }

  .category-best-picks .quick-comparison ul,
  .category-best-picks .how-we-pick ul {
    list-style-type: none;
    padding-left: 0;
  }
}