/*
 * Theme Name: AvengerHub Child
 * Theme URI: https://avengerhub.com
 * Description: Premium dark cyberpunk child theme for Porto — AvengerHub design system v2.1
 * Author: AvengerHub
 * Template: porto
 * Version: 2.1.0
 * Text Domain: avengerhub-child
 */

/* ============================================================
   PORTO → AVENGERHUB DESIGN TOKEN BRIDGE
   Remaps Porto's --porto-* variables to --av-* tokens.
   Loads AFTER porto-stylesheet (guaranteed by enqueue dependency).
============================================================ */

:root {
  --porto-primary-color:   var(--av-color-accent);
  --porto-secondary-color: var(--av-color-secondary);
  --porto-body-color:      var(--av-color-bg);
  --porto-text-color:      var(--av-color-text);
  --porto-heading-color:   var(--av-color-heading);
  --porto-font-family:     var(--av-font-primary);
}

/* ============================================================
   GLOBAL DARK BASELINE
   Porto hard-codes light backgrounds — override globally.
============================================================ */

body {
  background-color: var(--av-color-bg) !important;
  color: var(--av-color-text) !important;
  font-family: var(--av-font-primary) !important;
  font-size: var(--av-text-base);
  line-height: var(--av-leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Override Porto's white page wrappers */
.page-wrapper,
#main,
.main-content,
.site-content,
.content-area,
.page-content {
  background-color: var(--av-color-bg) !important;
}

/* ============================================================
   HEADING HIERARCHY
============================================================ */

h1, h2 {
  font-size: var(--av-text-3xl);
  font-weight: 700;
  line-height: var(--av-leading-tight);
  color: var(--av-color-heading);
  letter-spacing: -0.02em;
}

h3, h4 {
  font-size: var(--av-text-xl);
  font-weight: 700;
  line-height: var(--av-leading-snug);
  color: var(--av-color-heading);
}

h5, h6 {
  font-size: var(--av-text-md);
  font-weight: 600;
  line-height: 1.4;
  color: var(--av-color-heading);
}

/* ============================================================
   FOCUS RING — ACCESSIBILITY
============================================================ */

:focus-visible {
  outline: 2px solid var(--av-color-accent);
  outline-offset: 2px;
}

/* ============================================================
   LINKS
============================================================ */

a {
  color: var(--av-color-accent);
  transition: color var(--av-duration-fast) var(--av-ease-out);
}

a:hover {
  color: var(--av-color-accent-hover);
}

/* ============================================================
   PORTO-SPECIFIC DARK OVERRIDES
   Catch remaining white backgrounds Porto injects
============================================================ */

/* Porto sidebar */
.sidebar,
.porto-sidebar {
  background: var(--av-color-bg) !important;
}

/* Porto widgets */
.sidebar .widget,
.porto-sidebar .widget {
  background: var(--av-color-surface);
  border: 1px solid var(--av-color-border);
  border-radius: var(--av-radius-lg);
  padding: var(--av-spacing-lg);
  margin-bottom: var(--av-spacing-lg);
}

.sidebar .widget-title,
.porto-sidebar .widget-title {
  color: var(--av-color-heading);
  font-size: var(--av-text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-bottom: var(--av-spacing-sm);
  border-bottom: 1px solid var(--av-color-border);
  margin-bottom: var(--av-spacing-md);
}

/* Porto tabs/panels */
.nav-tabs > li > a,
.porto-tabs .nav-tabs > li > a {
  color: var(--av-color-text-soft) !important;
  background: transparent !important;
}

.nav-tabs > li.active > a,
.porto-tabs .nav-tabs > li.active > a {
  color: var(--av-color-heading) !important;
  border-bottom-color: var(--av-color-accent) !important;
}

/* Porto popover / tooltip */
.popover,
.tooltip-inner {
  background: var(--av-color-surface-raised);
  color: var(--av-color-text);
  border-color: var(--av-color-border);
}

/* Porto slider arrows */
.owl-carousel .owl-nav [class*="owl-"],
.porto-carousel .owl-nav button {
  background: var(--av-color-surface) !important;
  color: var(--av-color-text) !important;
  border: 1px solid var(--av-color-border) !important;
  border-radius: var(--av-radius-md) !important;
  transition: var(--av-transition);
}

.owl-carousel .owl-nav [class*="owl-"]:hover,
.porto-carousel .owl-nav button:hover {
  background: var(--av-color-accent-soft) !important;
  border-color: var(--av-color-accent) !important;
  color: var(--av-color-accent) !important;
}

/* Porto dots */
.owl-dots .owl-dot span {
  background: var(--av-color-border) !important;
}

.owl-dots .owl-dot.active span {
  background: var(--av-color-accent) !important;
}