/*
Theme Name: StackSide
Theme URI: https://stackside.io
Author: StackSide LLC
Author URI: https://stackside.io
Description: Block theme for StackSide LLC — Deep Ops palette, dark header, stackside.io.
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: stackside
Tags: block-theme, full-site-editing, dark
*/

/* Supplemental styles — most design tokens live in theme.json */

.wp-block-stackside-hero {
  margin-top: 0;
  /* Dark pool behind the mark so the glow sits in the page, not on a tile. */
  background-image: radial-gradient(
    ellipse 62% 50% at 50% 18%,
    #000000 0%,
    #0c1218 40%,
    transparent 72%
  );
  background-repeat: no-repeat;
}

.stackside-pillars .wp-block-column {
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 8px;
  padding: 1.5rem;
  background: rgba(16, 22, 28, 0.6);
}

.stackside-cta-band {
  border-radius: 8px;
}

.stackside-pricing-table {
  width: 100%;
  border-collapse: collapse;
}

.stackside-pricing-table th,
.stackside-pricing-table td {
  border: 1px solid var(--wp--preset--color--border);
  padding: 0.75rem 1rem;
  text-align: left;
}

.stackside-pricing-table th {
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--accent-blue);
}

/* --- Hero mark loop ---
   The clip and the header logo are painted on solid black. Screen drops that
   black out. Contrast pushes compressed near-black to real black first, or a
   gray rectangle shows around the glow. The radial mask feathers the frame
   so the square edge never meets the page. */
.ss-hero-mark {
  display: flex;
  justify-content: center;
  margin: 0 0 0.25rem;
}
.ss-hero-mark video {
  width: min(340px, 58vw);
  height: auto;
  display: block;
  mix-blend-mode: screen;
  filter: contrast(1.25) brightness(1.06);
  -webkit-mask-image: radial-gradient(
    ellipse 74% 82% at 50% 48%,
    #000 46%,
    rgba(0, 0, 0, 0.72) 64%,
    transparent 80%
  );
  mask-image: radial-gradient(
    ellipse 74% 82% at 50% 48%,
    #000 46%,
    rgba(0, 0, 0, 0.72) 64%,
    transparent 80%
  );
}

/* Header wordmark is the same black plate. Screen it into the #000 header. */
.wp-block-site-logo img {
  mix-blend-mode: screen;
  filter: contrast(1.12);
}

@media (prefers-reduced-motion: reduce) {
  .ss-hero-mark video {
    display: none;
  }
  .ss-hero-mark {
    width: min(340px, 58vw);
    min-height: min(340px, 58vw);
    margin-inline: auto;
    background: url(assets/video/stackside_mark_loop_poster.jpg) center /
      contain no-repeat;
    mix-blend-mode: screen;
    filter: contrast(1.25) brightness(1.06);
    -webkit-mask-image: radial-gradient(
      ellipse 74% 82% at 50% 48%,
      #000 46%,
      rgba(0, 0, 0, 0.72) 64%,
      transparent 80%
    );
    mask-image: radial-gradient(
      ellipse 74% 82% at 50% 48%,
      #000 46%,
      rgba(0, 0, 0, 0.72) 64%,
      transparent 80%
    );
  }
}