/*
Theme Name: Pentest Testing Corp - Dark
Theme URI: https://www.pentesttesting.com/
Description: Dark, terminal-themed child theme for Pentest Testing Corp. Built on Astra. Adds a site-wide dark rebrand plus reusable block patterns (terminal hero, stats, services, FAQ, CTA).
Author: Pentest Testing Corp
Template: astra
Version: 1.3.0
Text Domain: ptc-dark
*/

/* ---------------------------------------------------------------
   1. Brand tokens
   These mirror theme.json so plain CSS and the block editor agree.
--------------------------------------------------------------- */
:root {
  --ptc-void: #05070A;
  --ptc-surface: #10141B;
  --ptc-surface-raised: #151A22;
  --ptc-ink: #F4F6F8;
  --ptc-ink-muted: #8B98A5;
  --ptc-border: #1B212B;
  --ptc-border-soft: rgba(255, 255, 255, 0.07);
  --ptc-signal-blue: #2580B8;
  --ptc-signal-blue-tint: rgba(37, 128, 184, 0.12);
  --ptc-signal-red: #E2574A;
  --ptc-signal-green: #4FD68C;
  --ptc-signal-amber: #EF9F27;

  --ptc-font-display: 'Space Grotesk', 'Segoe UI', Arial, sans-serif;
  --ptc-font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --ptc-font-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace;

  /* Best-effort mapping onto Astra's own global color variables.
     Verify slot numbers in Customizer > Global > Colors on your install -
     direct selectors below are the reliable layer, this is a bonus. */
  --ast-global-color-0: var(--ptc-signal-blue) !important;
  --ast-global-color-1: var(--ptc-ink) !important;
  --ast-global-color-2: var(--ptc-ink-muted) !important;
  --ast-global-color-3: var(--ptc-void) !important;
}

/* Belt-and-suspenders: force the page wrapper itself dark regardless
   of any Site Background / Footer Builder background image or color
   left over in the Customizer from before this theme was installed. */
html,
body,
#page,
.site,
.ast-container,
.ast-separate-container,
.ast-footer-wrap,
.footer-adv,
.ast-small-footer {
  background-image: none !important;
  background-color: var(--ptc-void) !important;
}

/* ---------------------------------------------------------------
   2. Base
   !important is deliberate here: Astra outputs its own Customizer
   colors as dynamically-generated CSS with !important flags, so it
   wins the cascade over a plain child-theme rule regardless of
   load order. Matching that is the only reliable way to override it.
--------------------------------------------------------------- */
body {
  background-color: var(--ptc-void) !important;
  color: var(--ptc-ink) !important;
  font-family: var(--ptc-font-body);
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
  color: var(--ptc-ink) !important;
  font-family: var(--ptc-font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
}

p { color: var(--ptc-ink-muted) !important; line-height: 1.7; }

a { color: var(--ptc-signal-blue) !important; text-decoration: none; }
a:hover { color: #4aa3d8 !important; }

/* Explicit fallbacks for the theme.json color palette utility
   classes. WordPress core normally generates these automatically,
   but without !important they lose to Astra's dynamic CSS, so they
   are defined directly here as the reliable path. */
.has-ptc-void-background-color { background-color: var(--ptc-void) !important; }
.has-ptc-surface-background-color { background-color: var(--ptc-surface) !important; }
.has-ptc-ink-color { color: var(--ptc-ink) !important; }
.has-ptc-ink-muted-color { color: var(--ptc-ink-muted) !important; }
.has-ptc-signal-blue-color { color: var(--ptc-signal-blue) !important; }
.has-ptc-signal-blue-background-color { background-color: var(--ptc-signal-blue) !important; }
.has-ptc-signal-red-color { color: var(--ptc-signal-red) !important; }
.has-ptc-signal-green-color { color: var(--ptc-signal-green) !important; }

::selection { background: var(--ptc-signal-blue); color: #fff; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.wp-block-button__link:focus-visible {
  outline: 2px solid var(--ptc-signal-blue);
  outline-offset: 2px;
}

hr, .wp-block-separator { border-color: var(--ptc-border); }

blockquote, .wp-block-quote {
  background: var(--ptc-surface);
  border-left: 3px solid var(--ptc-signal-blue);
  border-radius: 0;
  padding: 1.25rem 1.5rem;
  color: var(--ptc-ink);
}

code, pre, kbd, .wp-block-code {
  font-family: var(--ptc-font-mono);
  background: var(--ptc-surface);
  color: var(--ptc-ink);
  border: 0.5px solid var(--ptc-border-soft);
}

table, .wp-block-table table {
  border-color: var(--ptc-border);
  color: var(--ptc-ink-muted);
}
table th, .wp-block-table th {
  color: var(--ptc-ink);
  border-color: var(--ptc-border);
  font-family: var(--ptc-font-mono);
  font-weight: 400;
  font-size: 0.85rem;
}
table td, .wp-block-table td { border-color: var(--ptc-border); }

input, textarea, select {
  background: var(--ptc-surface);
  border: 1px solid var(--ptc-border);
  color: var(--ptc-ink);
}
input::placeholder, textarea::placeholder { color: var(--ptc-ink-muted); }

/* ---------------------------------------------------------------
   3. Buttons
--------------------------------------------------------------- */
.ast-button,
button,
input[type="submit"],
.wp-block-button__link {
  background: var(--ptc-signal-blue) !important;
  color: #fff !important;
  border-radius: 6px;
  border: none;
  font-family: var(--ptc-font-body);
  font-weight: 500;
  transition: transform 0.15s ease, background 0.15s ease;
}
.ast-button:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
  background: #1d6a99 !important;
  color: #fff !important;
}
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  border: 1px solid var(--ptc-border);
  color: var(--ptc-ink) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  border-color: var(--ptc-signal-blue);
  color: var(--ptc-signal-blue) !important;
}

/* Astra's header/menu "button" item (e.g. the Contact button in nav)
   doesn't use .wp-block-button markup, it needs its own selector. */
.ast-header-button .ast-button,
.ast-header-button a.button,
.ast-header-button a,
.main-header-bar .menu-item.ast-button-link a,
.main-navigation .button {
  background: var(--ptc-signal-blue) !important;
  color: #fff !important;
  border-radius: 6px;
}
.ast-header-button .ast-button:hover,
.ast-header-button a.button:hover,
.ast-header-button a:hover {
  background: #1d6a99 !important;
  color: #fff !important;
}

/* ---------------------------------------------------------------
   4. Astra structural overrides: header, nav, footer
--------------------------------------------------------------- */
.ast-header-wrap, .main-header-bar, .main-header-bar-wrap {
  background-color: var(--ptc-void) !important;
  border-bottom: 0.5px solid var(--ptc-border-soft) !important;
}
.main-navigation, .main-navigation ul li a, .ast-header-navigation-1 a {
  color: var(--ptc-ink) !important;
}
.main-navigation ul li a:hover,
.main-header-bar-navigation .current-menu-item > a {
  color: var(--ptc-signal-blue) !important;
}
.main-navigation ul li ul.sub-menu,
.main-header-bar-navigation .sub-menu {
  background: var(--ptc-surface) !important;
  border: 0.5px solid var(--ptc-border-soft) !important;
}
.ast-mobile-menu-buttons-minimal svg, .menu-toggle-bar { background-color: var(--ptc-ink) !important; }

footer, .ast-footer-wrap, .footer-widget-area {
  background-color: var(--ptc-surface) !important;
  border-top: 0.5px solid var(--ptc-border-soft);
}
.ast-footer-wrap .widget-title, .footer-widget-area h2, .footer-widget-area h3 {
  color: var(--ptc-ink);
  font-family: var(--ptc-font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}
.ast-footer-wrap a { color: var(--ptc-ink-muted); }
.ast-footer-wrap a:hover { color: var(--ptc-signal-blue); }
.ast-small-footer { background-color: var(--ptc-void) !important; border-top: 0.5px solid var(--ptc-border-soft); }

/* ---------------------------------------------------------------
   5. Native accordion (FAQ pattern uses core/details, no JS needed)
--------------------------------------------------------------- */
.wp-block-details {
  background: var(--ptc-surface);
  border: 0.5px solid var(--ptc-border-soft);
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.75rem;
}
.wp-block-details summary {
  font-family: var(--ptc-font-body);
  font-weight: 500;
  color: var(--ptc-ink);
  cursor: pointer;
}
.wp-block-details summary::marker { color: var(--ptc-signal-blue); }

/* ---------------------------------------------------------------
   6. Component classes used inside the patterns
--------------------------------------------------------------- */
.ptc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ptc-font-mono);
  font-size: 0.8rem;
  color: var(--ptc-signal-blue);
  background: var(--ptc-signal-blue-tint);
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 1rem;
}

.ptc-badge {
  display: inline-block;
  font-family: var(--ptc-font-mono);
  font-size: 0.75rem;
  color: var(--ptc-ink-muted);
  border: 0.5px solid var(--ptc-border-soft);
  padding: 3px 9px;
  border-radius: 5px;
}

.ptc-card {
  background: var(--ptc-surface);
  border: 0.5px solid var(--ptc-border-soft);
  border-radius: 10px;
  padding: 1.5rem;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.ptc-card:hover { transform: translateY(-3px); border-color: var(--ptc-signal-blue); }
.ptc-card h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.ptc-card p { font-size: 0.92rem; margin-bottom: 0; }

.ptc-stat .ptc-stat__num {
  display: block;
  font-family: var(--ptc-font-display);
  font-size: 1.9rem;
  font-weight: 500;
  color: var(--ptc-ink);
}
.ptc-stat .ptc-stat__label {
  display: block;
  font-family: var(--ptc-font-mono);
  font-size: 0.78rem;
  color: var(--ptc-ink-muted);
  margin-top: 2px;
}

.ptc-section--surface { background: var(--ptc-surface); }
.ptc-section--void { background: var(--ptc-void); }

/* ---------------------------------------------------------------
   7. Terminal panel (hero + reusable component)
--------------------------------------------------------------- */
.ptc-terminal {
  background: var(--ptc-void);
  border: 0.5px solid var(--ptc-border-soft);
  border-radius: 10px;
  overflow: hidden;
}
.ptc-terminal__bar {
  height: 34px;
  background: var(--ptc-surface-raised);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border-bottom: 0.5px solid var(--ptc-border-soft);
}
.ptc-terminal__dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.ptc-terminal__dot--r { background: var(--ptc-signal-red); }
.ptc-terminal__dot--a { background: var(--ptc-signal-amber); }
.ptc-terminal__dot--g { background: var(--ptc-signal-green); }
.ptc-terminal__label {
  margin-left: 8px;
  font-family: var(--ptc-font-mono);
  font-size: 0.7rem;
  color: var(--ptc-ink-muted);
}
.ptc-terminal__live {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--ptc-font-mono);
  font-size: 0.65rem;
  color: var(--ptc-signal-green);
}
.ptc-terminal__live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ptc-signal-green);
  animation: ptc-pulse 1.4s ease-in-out infinite;
}
.ptc-terminal__body {
  height: 230px;
  padding: 14px;
  font-family: var(--ptc-font-mono);
  font-size: 0.8rem;
  line-height: 1.8;
  overflow: hidden;
}
.ptc-cursor { animation: ptc-blink 1s step-end infinite; }

@keyframes ptc-blink { 50% { opacity: 0; } }
@keyframes ptc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

@media (prefers-reduced-motion: reduce) {
  .ptc-cursor, .ptc-terminal__live::before, .ptc-card { animation: none !important; transition: none !important; }
}

@media (max-width: 600px) {
  .ptc-terminal__body { height: 190px; font-size: 0.72rem; }
}

/* ---------------------------------------------------------------
   8. Header: fixed in place, hides on scroll down, reveals on
   scroll up. Previous version applied position:fixed to four
   selectors at once (#masthead, .ast-header-break-point,
   .site-header, .main-header-bar-wrap). On this install two of
   those resolve to DIFFERENT, nested elements (an outer wrapper and
   an inner row), not aliases of the same node, so both became
   independently fixed and fought over the same top:0 spot, leaving
   the gap you saw. Fixed properly now: assets/js/header-scroll.js
   finds exactly one real header element at runtime and adds the
   .ptc-fixed-header class to that element only, so this rule can
   never apply to more than one node regardless of markup. The JS
   also sets `top` directly (covers the WP admin bar at whatever
   height it actually renders, instead of a guessed breakpoint).
--------------------------------------------------------------- */
.ptc-fixed-header {
  position: fixed !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 9999;
  transition: transform 0.3s ease;
}
.ptc-header-hidden {
  transform: translateY(-100%);
}
body {
  padding-top: var(--ptc-header-height, 86px);
}

/* ---------------------------------------------------------------
   9. Footer: the four link columns (Company / Compliance /
   Penetration Testing / Resources) are a single Custom HTML widget
   using .footer-cols > .footer-col, with zero CSS behind those
   classes, hence the unstyled vertical stack. Targets the real
   markup directly, confirmed from the widget's source.
--------------------------------------------------------------- */
.footer-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 5% 32px;
  text-align: left;
}
.footer-col h4 {
  color: var(--ptc-ink);
  font-family: var(--ptc-font-mono);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ptc-signal-blue);
  display: inline-block;
}
.footer-col ul,
.footer-col ul ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-col li {
  margin-bottom: 10px;
  list-style-type: none !important;
}
.footer-col a {
  color: var(--ptc-ink-muted);
  text-decoration: none;
  font-size: 14.5px;
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.footer-col a:hover {
  color: var(--ptc-signal-blue);
  padding-left: 4px;
}

/* "Above footer" row (review badge + Clutch badge): center both as
   an even two-up row instead of left-bunched with a dead gap. This
   targets Astra's builder row, which is separate from the
   .footer-cols widget above, if it still looks off after this
   round paste its source the same way you did for .footer-cols and
   I'll repoint it the same way. */
.footer-adv,
[class*="ast-builder-grid-row"][class*="footer"] {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 40px !important;
  flex-wrap: wrap !important;
  padding: 32px !important;
}

@media (max-width: 900px) {
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .footer-cols { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   10. Other pages: neutralize leftover light/gray section colors
   Any page built before this rebrand may still have its own custom
   section background baked in as an inline style (the cream FAQ
   band, the slate-gray compliance band, etc.). This catches those
   at the source rather than needing to fix every page individually.
--------------------------------------------------------------- */
.wp-block-group[style*="background-color"],
.wp-block-cover[style*="background-color"],
.wp-block-columns[style*="background-color"],
.wp-block-column[style*="background-color"] {
  background-color: var(--ptc-surface) !important;
  background-image: none !important;
}

/* Text contrast safety net: paragraphs/list items sometimes carry
   their own inline color from before the dark rebrand. Headings and
   base paragraphs are already forced via the rules above; this
   extends the same guarantee to list items inside any container. */
.wp-block-group li,
.wp-block-column li,
.wp-block-cover li,
.wp-block-columns li {
  color: var(--ptc-ink-muted) !important;
}

/* ---------------------------------------------------------------
   11. Legacy Rank Math FAQ block. Pages published before this
   theme existed (the homepage among them) use Rank Math's FAQ
   block, which sets its own colors through plugin classes instead
   of an inline style, so rule 10 above never reaches it. This
   covers every page still running that block, no content edits
   needed.
--------------------------------------------------------------- */
.wp-block-rank-math-faq-block,
.rank-math-block {
  background-color: transparent !important;
}
.rank-math-faq-item {
  background-color: var(--ptc-surface) !important;
  border: 0.5px solid var(--ptc-border-soft) !important;
  border-radius: 8px;
  margin-bottom: 0.75rem;
}
.rank-math-question {
  color: var(--ptc-ink) !important;
  font-family: var(--ptc-font-body);
  font-weight: 500;
}
.rank-math-answer {
  color: var(--ptc-ink-muted) !important;
}
.rank-math-toggle-icon,
.rank-math-toggle-icon svg {
  color: var(--ptc-signal-blue) !important;
  fill: var(--ptc-signal-blue) !important;
}