/*
Theme Name: Pair and Play Blog
Theme URI: https://getpairandplay.com/
Author: Pair and Play
Author URI: https://getpairandplay.com/
Description: A lightweight block theme for the Pair and Play blog, designed around the SILENT SALES SCREEN™ brand and content-led SEO publishing.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: pair-and-play-blog
Tags: blog, block-patterns, full-site-editing, custom-colors, featured-images, wide-blocks
*/

:root {
  --pp-blue: #0b63f6;
  --pp-blue-dark: #074fc4;
  --pp-navy: #07162d;
  --pp-navy-2: #0b2143;
  --pp-ink: #12213a;
  --pp-muted: #5d6b80;
  --pp-line: #dfe6ef;
  --pp-soft: #f4f7fb;
  --pp-white: #ffffff;
  --pp-radius: 22px;
  --pp-shadow: 0 18px 55px rgba(7,22,45,.10);
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { text-underline-offset: .16em; }

.pp-site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(16px);
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid rgba(223,230,239,.85);
}
.admin-bar .pp-site-header { top: 32px; }

.pp-brand { display:flex; align-items:center; gap:11px; text-decoration:none !important; color:var(--pp-navy); }
.pp-brand-mark {
  width:42px; height:42px; border-radius:10px; display:grid; place-items:center;
  background:var(--pp-blue); color:white; font-weight:900; font-size:11px; line-height:.84;
  letter-spacing:-.03em; box-shadow:0 8px 20px rgba(11,99,246,.22);
}
.pp-brand-mark span { display:block; text-align:center; }
.pp-brand-copy strong { display:block; font-size:17px; letter-spacing:-.025em; line-height:1.05; }
.pp-brand-copy small { display:block; margin-top:3px; font-size:9px; letter-spacing:.11em; font-weight:800; color:var(--pp-blue); }

.pp-header-inner { min-height:78px; }
.pp-header-nav a { text-decoration:none; font-weight:700; color:var(--pp-ink); font-size:14px; }
.pp-header-nav a:hover { color:var(--pp-blue); }
.pp-header-cta a { border-radius:999px !important; box-shadow:0 8px 20px rgba(11,99,246,.18); }

.pp-hero {
  overflow:hidden;
  background:
    radial-gradient(circle at 15% 0%, rgba(11,99,246,.24), transparent 36%),
    linear-gradient(135deg, #07162d 0%, #0b2143 58%, #09295b 100%);
  color:white;
}
.pp-eyebrow { letter-spacing:.13em; text-transform:uppercase; font-weight:850; font-size:12px; }
.pp-hero h1 { max-width:870px; letter-spacing:-.055em; }
.pp-hero p { color:#cbd8eb; }
.pp-hero-media img { border-radius:26px; box-shadow:0 28px 80px rgba(0,0,0,.34); border:1px solid rgba(255,255,255,.14); }
.pp-trust-strip { color:#cbd8eb; font-size:13px; font-weight:700; }

.pp-section-kicker { color:var(--pp-blue); letter-spacing:.12em; text-transform:uppercase; font-weight:850; font-size:12px; }
.pp-section-title { letter-spacing:-.04em; }
.pp-card {
  height:100%; border:1px solid var(--pp-line); border-radius:var(--pp-radius); background:white;
  overflow:hidden; box-shadow:0 8px 30px rgba(7,22,45,.055); transition:transform .18s ease, box-shadow .18s ease;
}
.pp-card:hover { transform:translateY(-3px); box-shadow:var(--pp-shadow); }
.pp-card .wp-block-post-featured-image img { aspect-ratio:16/9; object-fit:cover; }
.pp-card .wp-block-post-title a { text-decoration:none; }
.pp-card .wp-block-post-title a:hover { color:var(--pp-blue); }
.pp-card .wp-block-post-excerpt { color:var(--pp-muted); }

.pp-industry-card {
  min-height:150px; padding:24px; border-radius:18px; border:1px solid var(--pp-line);
  background:linear-gradient(145deg,#fff,#f7f9fd); text-decoration:none !important;
  display:flex; flex-direction:column; justify-content:space-between; transition:all .18s ease;
}
.pp-industry-card:hover { border-color:#bcd3fb; transform:translateY(-2px); box-shadow:0 12px 30px rgba(7,22,45,.08); }
.pp-industry-card strong { color:var(--pp-navy); font-size:17px; }
.pp-industry-card span { color:var(--pp-blue); font-weight:800; font-size:13px; }

.pp-media-band { border-radius:28px; overflow:hidden; box-shadow:var(--pp-shadow); }
.pp-media-band img { width:100%; display:block; }

.pp-article-shell { max-width:780px !important; }
.pp-article-shell > * { margin-top:1.35em; margin-bottom:1.35em; }
.pp-article-shell > h2 { margin-top:2.25em; letter-spacing:-.035em; }
.pp-article-shell > h3 { margin-top:1.8em; letter-spacing:-.025em; }
.pp-article-shell p, .pp-article-shell li { line-height:1.8; }
.pp-article-shell a { color:var(--pp-blue); font-weight:650; }
.pp-article-shell img { border-radius:18px; box-shadow:0 12px 35px rgba(7,22,45,.08); }
.pp-article-shell blockquote { border-left:4px solid var(--pp-blue); padding:10px 0 10px 24px; color:#33445f; }
.pp-article-shell table { border-collapse:separate; border-spacing:0; border:1px solid var(--pp-line); border-radius:14px; overflow:hidden; }
.pp-article-shell th { background:var(--pp-soft); color:var(--pp-navy); }
.pp-article-shell th, .pp-article-shell td { padding:14px 16px; border-bottom:1px solid var(--pp-line); }
.pp-article-shell tr:last-child td { border-bottom:0; }

.pp-post-hero { background:linear-gradient(180deg,#f7faff,#fff); border-bottom:1px solid var(--pp-line); }
.pp-post-hero .wp-block-post-title { letter-spacing:-.055em; }
.pp-post-meta { color:var(--pp-muted); font-size:14px; }
.pp-post-feature img { border-radius:24px; box-shadow:var(--pp-shadow); max-height:650px; object-fit:cover; }

.pp-callout {
  border-radius:18px; padding:24px 26px; background:#eef5ff; border:1px solid #cfe0ff;
}
.pp-callout strong { color:var(--pp-navy); }
.pp-callout p:last-child { margin-bottom:0; }

.pp-cta {
  position:relative; overflow:hidden; border-radius:26px; padding:42px;
  background:linear-gradient(135deg,var(--pp-navy),#0b2a59); color:white; box-shadow:var(--pp-shadow);
}
.pp-cta:after { content:""; position:absolute; width:260px; height:260px; border-radius:50%; right:-90px; top:-110px; background:rgba(11,99,246,.25); }
.pp-cta > * { position:relative; z-index:1; }
.pp-cta .pp-cta-kicker { color:#84b6ff; text-transform:uppercase; letter-spacing:.13em; font-weight:850; font-size:11px; }
.pp-cta h2 { color:white; margin:.35rem 0 .75rem; font-size:clamp(28px,4vw,42px); letter-spacing:-.04em; }
.pp-cta p { color:#cbd8eb; max-width:690px; font-size:17px; }
.pp-cta .pp-cta-button { display:inline-block; margin-top:10px; padding:14px 21px; border-radius:999px; background:var(--pp-blue); color:white; font-weight:850; text-decoration:none; }
.pp-cta .pp-cta-button:hover { background:#2776f7; }
.pp-cta .pp-cta-notes { margin-top:15px; color:#9fb2cd; font-size:12px; }

.pp-related { margin-top:64px; }
.pp-related-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.pp-related-card { border:1px solid var(--pp-line); border-radius:18px; overflow:hidden; background:#fff; }
.pp-related-card img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.pp-related-card-body { padding:18px; }
.pp-related-card a { color:var(--pp-navy); text-decoration:none; font-weight:800; line-height:1.3; }
.pp-related-card a:hover { color:var(--pp-blue); }
.pp-related-card p { margin:.5rem 0 0; color:var(--pp-muted); font-size:13px; }

.pp-footer { background:var(--pp-navy); color:#cbd8eb; }
.pp-footer a { color:white; text-decoration:none; }
.pp-footer a:hover { color:#8dbaff; }
.pp-footer-title { color:white; font-weight:850; }
.pp-footer-fine { color:#8395af; font-size:12px; }

@media (max-width: 900px) {
  .pp-related-grid { grid-template-columns:1fr; }
  .pp-cta { padding:30px 24px; }
}
@media (max-width: 782px) {
  .admin-bar .pp-site-header { top:46px; }
  .pp-site-header { position:relative; top:auto !important; }
  .pp-header-nav { display:none !important; }
  .pp-hero { text-align:left; }
}