/*
Theme Name: JBigler Media Productions
Theme URI: https://jbiglermedia.com
Author: JBigler Media Productions
Description: Custom block theme for JBigler Media Productions using the approved camera/aperture logo, outlined wordmark, nickel-silver typography, purple brand palette, and red accents.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: jbiglermedia
License: GNU General Public License v2 or later
*/

:root {
  --jb-purple: #A38DB8;
  --jb-purple-mid: #6A5781;
  --jb-purple-deep: #3F3150;
  --jb-purple-ink: #2B2038;
  --jb-nickel: #B7B7B7;
  --jb-red: #CC0000;
  --jb-white: #FFFFFF;
  --jb-black: #121016;
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

.jb-texture {
  background-color: var(--jb-purple-deep);
  background-image:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.08), transparent 30%),
    radial-gradient(circle at 80% 85%, rgba(0,0,0,.22), transparent 35%),
    linear-gradient(135deg, rgba(255,255,255,.025) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.025) 50%, rgba(255,255,255,.025) 75%, transparent 75%);
  background-size: auto, auto, 14px 14px;
}

.jb-metal {
  color: var(--jb-nickel);
  text-shadow: 0 2px 0 rgba(255,255,255,.25), 0 5px 12px rgba(0,0,0,.4);
}

.jb-rule {
  height: 2px;
  background: var(--jb-red);
  border: 0;
  margin: 1.1rem 0;
}

.jb-card {
  border: 1px solid rgba(183,183,183,.24);
  background: rgba(255,255,255,.035);
  box-shadow: 0 18px 45px rgba(0,0,0,.18);
  backdrop-filter: blur(2px);
}

.jb-service-icon {
  width: 52px;
  height: 52px;
  border: 1px solid var(--jb-nickel);
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--jb-nickel);
  font-size: 1.35rem;
  margin-bottom: 1rem;
}

.jb-section-kicker {
  letter-spacing: .28em;
  text-transform: uppercase;
  font-size: .78rem;
  color: var(--jb-red);
  font-weight: 700;
}

.jb-contact-row {
  display: flex;
  gap: .75rem;
  align-items: center;
  margin: .6rem 0;
}

.jb-contact-row a { color: inherit; text-decoration: none; }
.jb-contact-row a:hover { color: var(--jb-red); }

.jb-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--jb-nickel);
  border-radius: 10px;
  color: var(--jb-nickel);
  text-decoration: none;
  font-weight: 700;
}

@media (max-width: 780px) {
  .jb-hero-grid { grid-template-columns: 1fr !important; }
  .jb-hero-logo { max-width: 260px !important; margin-inline: auto; }
}