/* ZCraft Studios — performance/aesthetic polish
   Small final layer for stronger reddish premium style, layout stability, and cheaper paint work. */

:root {
  --red-1: #ff6b6b;
  --red-2: #ef4444;
  --red-3: #991b1b;
  --red-soft: rgba(239, 68, 68, 0.13);
  --red-line: rgba(239, 68, 68, 0.34);
  --red-glow: rgba(239, 68, 68, 0.34);
  --panel-blur: 18px;
}

html {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  accent-color: var(--red-2);
  background-color: #090b0e;
}

body::before,
body::after {
  contain: strict;
}

/* stronger red identity without turning the whole site bright */
.topbar-logo,
.page-label,
.hero-prompt,
.resource-status,
.contact-kicker,
.window-title span,
.featured-pill,
.tag:hover {
  color: var(--red-1) !important;
}

.topbar-logo-img,
.resource-card img,
.blog-card img,
.team-member-avatar,
.resource-detail img,
.blog-detail img {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 20px 54px -34px var(--red-glow);
}

.window,
.resource-card,
.blog-card,
.contact-platform-card,
.contact-item,
.contact-note-card,
.team-member-card,
.legal-card,
.comparison-card,
.request-form-card,
.resource-detail,
.blog-detail,
.legal-detail {
  position: relative;
  isolation: isolate;
  contain: layout paint;
}

.window::before,
.resource-card::before,
.blog-card::before,
.contact-platform-card::before,
.contact-item::before,
.team-member-card::before,
.comparison-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(circle at 18% 0%, rgba(239, 68, 68, 0.14), transparent 34%),
    radial-gradient(circle at 90% 12%, rgba(103, 232, 249, 0.06), transparent 28%);
  opacity: .75;
  pointer-events: none;
}

.window::after,
.resource-card::after,
.blog-card::after,
.contact-platform-card::after,
.contact-item::after,
.team-member-card::after,
.comparison-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.08), transparent 24%, transparent 76%, rgba(239,68,68,.08));
  opacity: .55;
}

.window:hover,
.resource-card:hover,
.blog-card:hover,
.contact-platform-card:hover,
.contact-item:hover,
.team-member-card:hover,
.comparison-card:hover {
  border-color: var(--red-line) !important;
}

.btn-primary,
button[type='submit'],
.request-form button {
  background-image: linear-gradient(135deg, #ff8a8a 0%, #ef4444 46%, #f97316 100%) !important;
  color: #160708 !important;
  border: 0 !important;
}

.btn-primary:active,
.btn:active,
button:active {
  transform: translateY(0) scale(.99) !important;
}

.btn-ghost:hover,
.topbar-nav a:hover,
.topbar-nav a.active {
  border-color: rgba(239,68,68,.24);
}

/* improve perceived load and scrolling performance */
.resource-card,
.blog-card,
.window,
.team-member-card,
.contact-platform-card,
.contact-item,
.comparison-card,
.legal-card {
  content-visibility: auto;
  contain-intrinsic-size: 260px;
}

.blog-detail,
.legal-detail,
.resource-detail {
  content-visibility: auto;
  contain-intrinsic-size: 900px;
}

/* better blog SEO/readability UX: headings and internal anchors are easier to scan */
.blog-body h2,
.legal-detail h2,
.resource-detail h2 {
  padding-top: .2rem;
  border-top: 1px solid rgba(239,68,68,.13);
}

.blog-body h2::before,
.legal-detail h2::before,
.resource-detail h2::before {
  content: '#';
  color: var(--red-1);
  margin-right: .45rem;
  font-family: var(--mono);
  font-size: .82em;
}

.blog-body a,
.legal-detail a,
.resource-detail a,
.page-copy a {
  color: #fca5a5;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.blog-body a:hover,
.legal-detail a:hover,
.resource-detail a:hover,
.page-copy a:hover {
  color: #fecaca;
}

/* reserve media space to reduce layout shift */
.resource-card img,
.blog-card img,
.resource-detail img,
.blog-detail img,
.team-member-avatar img,
.topbar-logo-img {
  background: linear-gradient(135deg, rgba(239,68,68,.08), rgba(255,255,255,.03));
}

.blog-card img,
.resource-card img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* mobile polish: more app-like, less cramped */
@media (max-width: 720px) {
  body {
    background:
      radial-gradient(circle at 20% 0%, rgba(239,68,68,.13), transparent 19rem),
      linear-gradient(180deg, #080a0d, #0c0e10 46%, #080a0d);
  }

  body::before,
  body::after {
    display: none !important;
  }

  .topbar {
    background: rgba(8,10,13,.92);
  }

  .page-hero::after,
  .hero::after {
    width: 100%;
  }

  .window,
  .resource-card,
  .blog-card,
  .contact-platform-card,
  .contact-item,
  .team-member-card,
  .comparison-card,
  .legal-card,
  .request-form-card,
  .resource-detail,
  .blog-detail,
  .legal-detail {
    box-shadow: 0 18px 60px -46px rgba(0,0,0,.95);
  }
}

@media (min-width: 900px) {
  body[data-page='blogs'] .blog-card:first-child h2,
  body[data-page='blogs'] .blog-card:first-child h3,
  body[data-page='blogs'] .blog-card:first-child .blog-card-title {
    font-size: clamp(28px, 3.4vw, 44px);
  }
}