/*
  Magnetar Core - shared design system
  Loaded by every page. Keep page-specific layout in the page.
  v20260630-1
*/

/* Reset */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  min-block-size: 100%;
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  min-block-size: 100%;
  margin: 0;
  overflow-x: hidden;
}

img,
picture,
svg,
canvas,
video {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
summary,
[role="button"] {
  touch-action: manipulation;
}

/* Design tokens */
[id^="mag-"] {
  --sky: #87cefa;
  --sky-hover: #aee0ff;
  --sky-active: #6ab8e0;
  --accent: #238dca;
  --accent-strong: #43aef0;
  --button-ink: #111820;
  --ink: #111820;
  --paper: #fbf7ec;
  --paper-cool: #eef8fd;
  --chalk: #fffdf7;
  --muted: #5f6c75;
  --rule: rgba(17, 24, 32, 0.18);
  --rule-strong: rgba(17, 24, 32, 0.82);
  --error: #c85858;
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
  --wrap: 1080px;
  --gutter: clamp(22px, 5vw, 58px);
  --target-size: 44px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-media: 18px;
  --shadow-card: 0 8px 24px rgba(17, 24, 32, 0.08);
  --shadow-menu: 0 4px 20px rgba(17, 24, 32, 0.1);
  --shadow-button: 0 8px 20px rgba(17, 24, 32, 0.1);
  --focus-ring: rgba(135, 206, 250, 0.42);
  --nav-bg: rgba(251, 247, 236, 0.92);
  --grid-line-x: rgba(17, 24, 32, 0.035);
  --grid-line-y: rgba(17, 24, 32, 0.03);
  --motion-fast: 180ms ease;
  --motion-medium: 220ms ease;

  inline-size: 100%;
  background:
    linear-gradient(90deg, var(--grid-line-x) 1px, transparent 1px),
    linear-gradient(180deg, var(--grid-line-y) 1px, transparent 1px),
    var(--paper);
  background-size: 42px 42px, 42px 42px, auto;
  color: var(--ink);
  color-scheme: light;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Base elements */
[id^="mag-"] a {
  color: inherit;
  text-underline-offset: 0.18em;
}

[id^="mag-"] :where(h1, h2, h3, h4, p, li, dt, dd) {
  overflow-wrap: break-word;
}

[id^="mag-"] :where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
  box-shadow: 0 0 0 7px var(--focus-ring);
}

[id^="mag-"] ::selection {
  background: rgba(135, 206, 250, 0.35);
  color: #111820;
}

[id^="mag-"] .honeypot {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

[id^="mag-"] .skip-link {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-start: var(--gutter);
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target-size);
  padding-inline: 16px;
  background: var(--ink);
  border-radius: var(--radius-sm);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(calc(-100% - 14px));
  transition: transform var(--motion-fast);
}

[id^="mag-"] .skip-link:focus {
  transform: translateY(0);
}

/* Layout primitives */
[id^="mag-"] .wrap {
  inline-size: 100%;
  max-inline-size: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

[id^="mag-"] :where(
  .topnav-inner,
  .hero,
  .hero-grid,
  .hero-layout,
  .about-grid,
  .resume-layout,
  .section-head,
  .request-grid,
  .booking-grid,
  .form-layout,
  .cta-inner,
  .post-card,
  .field-row,
  .hero-actions,
  .button-row,
  .contact-links,
  .project-card,
  .tool-card,
  .career-card,
  .service-card,
  .outcome-card,
  .pain-card,
  .proof-card,
  .process-card,
  .faq-item,
  .booking-card,
  .step,
  .ledger-list div
) > * {
  min-inline-size: 0;
}

[id^="mag-"] :where(section[id], main[id], .hero[id]) {
  scroll-margin-top: 86px;
}

[id^="mag-"] :where(
  .service-card,
  .stack-card,
  .project-card,
  .outcome-card,
  .tool-card,
  .career-card,
  .sidebar-card,
  .hero-card,
  .pain-card,
  .proof-card,
  .process-card,
  .faq-item,
  .form-card,
  .conversion-card,
  .booking-wrap,
  .booking-card,
  .form-message,
  .success-msg,
  .issue-node,
  .issue-bridge,
  form
) {
  border-radius: var(--radius-lg);
}

/* Typography primitives */
[id^="mag-"] .eyebrow,
[id^="mag-"] .section-tag {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0;
  text-transform: uppercase;
}

[id^="mag-"] .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-block-end: 24px;
}

[id^="mag-"] .eyebrow::before {
  content: '';
  inline-size: 42px;
  block-size: 3px;
  flex: 0 0 auto;
  background: var(--sky);
}

[id^="mag-"] .section-tag {
  margin-block-end: 12px;
}

/* Navigation */
[id^="mag-"] .topnav {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: var(--nav-bg);
  border-block-end: 1px solid var(--rule);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

[id^="mag-"] .topnav-inner {
  min-block-size: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

[id^="mag-"] .wordmark {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
}

[id^="mag-"] .nav-links {
  display: flex;
  align-items: center;
  gap: clamp(18px, 4vw, 46px);
}

[id^="mag-"] .nav-links a {
  position: relative;
  min-block-size: var(--target-size);
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0;
  text-decoration: none;
  transition: color var(--motion-fast);
}

[id^="mag-"] .nav-links a::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: 12px;
  block-size: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--motion-medium);
}

[id^="mag-"] .nav-links a.nav-cta::after {
  display: none;
}

[id^="mag-"] .nav-links a:where(:hover, .active, [aria-current="page"]) {
  color: var(--ink);
}

[id^="mag-"] .nav-links a:where(:hover, .active, [aria-current="page"])::after {
  transform: scaleX(1);
}

[id^="mag-"] .nav-links a:where(.active, [aria-current="page"]) {
  font-weight: 700;
}

/* Buttons */
[id^="mag-"] :where(.btn-primary, .btn, .submit-btn, .btn-outline, .booking-btn, .nav-cta) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--target-size);
  padding-inline: 22px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--sky);
  color: var(--button-ink) !important;
  cursor: pointer;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  transition:
    transform var(--motion-fast),
    background var(--motion-fast),
    border-color var(--motion-fast),
    box-shadow var(--motion-fast),
    color var(--motion-fast);
}

[id^="mag-"] :where(.btn-ghost) {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target-size);
  padding-block-end: 0;
  border-block-end: 1px solid var(--ink);
  color: var(--ink) !important;
  text-decoration: none;
  transition:
    color var(--motion-fast),
    border-color var(--motion-fast);
}

[id^="mag-"] :where(input, textarea, select, .checkbox-item) {
  border-radius: var(--radius-sm) !important;
}

@media (hover: hover) {
  [id^="mag-"] :where(.btn-primary, .btn, .submit-btn, .btn-outline, .booking-btn, .nav-cta):hover {
    background: var(--sky-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-button);
  }

  [id^="mag-"] :where(.btn-ghost):hover {
    color: var(--accent) !important;
    border-block-end-color: var(--accent);
  }
}

[id^="mag-"] :where(.btn-primary, .btn, .submit-btn, .btn-outline, .booking-btn, .nav-cta):active {
  background: var(--sky-active);
  transform: translateY(0);
  box-shadow: none;
  transition: none;
}

[id^="mag-"] :where(.submit-btn, button):disabled {
  cursor: not-allowed;
}

/* Footer */
[id^="mag-"] :where(.mag-footer, .magnetar-footer) {
  padding-block: 28px;
  background: var(--ink);
  color: var(--paper);
  text-align: center;
}

[id^="mag-"] :where(.mag-footer, .magnetar-footer) a {
  color: var(--sky);
  text-decoration: none;
}

[id^="mag-"] .footer-text {
  color: var(--paper);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0;
}

/* Mobile navigation */
[id^="mag-"] .nav-mobile {
  display: none;
}

@media (max-width: 820px) {
  [id^="mag-"] .nav-links {
    display: none;
  }

  [id^="mag-"] .nav-mobile {
    position: relative;
    display: block;
  }

  [id^="mag-"] .nav-mobile > summary {
    min-block-size: var(--target-size);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    color: var(--muted);
    cursor: pointer;
    font-family: var(--mono);
    font-size: 0.72rem;
    list-style: none;
    user-select: none;
    transition:
      background var(--motion-fast),
      color var(--motion-fast),
      border-color var(--motion-fast);
  }

  [id^="mag-"] .nav-mobile > summary::after {
    content: '';
    inline-size: 0.45rem;
    block-size: 0.45rem;
    border-inline-end: 1px solid currentColor;
    border-block-end: 1px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--motion-fast);
  }

  [id^="mag-"] .nav-mobile[open] > summary {
    background: var(--chalk) !important;
    border-color: var(--rule-strong) !important;
    color: var(--ink) !important;
  }

  [id^="mag-"] .nav-mobile[open] > summary::after {
    transform: rotate(225deg) translate(-1px, -1px);
  }

  [id^="mag-"] .nav-mobile > summary::-webkit-details-marker {
    display: none;
  }

  [id^="mag-"] .nav-mobile[open] .nav-mobile-links {
    position: absolute;
    inset-block-start: calc(100% + 6px);
    inset-inline-end: 0;
    z-index: 55;
    min-inline-size: 10rem;
    max-inline-size: min(20rem, calc(100vw - (var(--gutter) * 2)));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-block: 6px;
    overflow: hidden;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-menu);
    animation: mag-menu-drop var(--motion-fast);
  }

  [id^="mag-"] .nav-mobile[open] .nav-mobile-links a {
    display: flex;
    align-items: center;
    min-block-size: var(--target-size);
    padding: 10px 16px;
    color: var(--muted);
    font-size: 0.78rem;
    text-decoration: none;
  }

  [id^="mag-"] .nav-mobile[open] .nav-mobile-links a:where(:hover, .active, [aria-current="page"]) {
    color: var(--ink);
  }
}

@media (max-width: 520px) {
  [id^="mag-"] :where(.hero-actions, .button-row, .contact-links, .notfound-actions) {
    align-items: stretch;
  }

  [id^="mag-"] :where(.hero-actions, .button-row, .contact-links, .notfound-actions) > :where(a, button) {
    inline-size: 100%;
    justify-content: center;
  }
}

@keyframes mag-menu-drop {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Progressive enhancement */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [id^="mag-"] .topnav {
    background: var(--paper);
  }
}

@media (hover: none) {
  [id^="mag-"] :where(
    .btn-primary,
    .btn,
    .submit-btn,
    .btn-outline,
    .booking-btn,
    .nav-cta,
    .service-card,
    .project-card,
    .tool-card,
    .career-card,
    .post-card
  ):hover {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  [id^="mag-"] :where(
    .btn-primary,
    .btn,
    .submit-btn,
    .btn-outline,
    .booking-btn,
    .nav-cta,
    .service-card,
    .project-card,
    .tool-card,
    .career-card,
    .post-card,
    .hero-photo,
    #nug-floater
  ):hover {
    transform: none !important;
  }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  [id^="mag-"] {
    --paper: #1a1f27 !important;
    --paper-cool: #1e2430 !important;
    --chalk: #222833 !important;
    --ink: #e2ded5 !important;
    --muted: #a7adb5 !important;
    --rule: rgba(226, 222, 213, 0.14) !important;
    --rule-strong: rgba(226, 222, 213, 0.62) !important;
    --sky: #78bfe6 !important;
    --sky-hover: #96cdec !important;
    --sky-active: #5aa3ca !important;
    --accent: #79c8f4 !important;
    --accent-strong: #93d4fa !important;
    --button-ink: #111820 !important;
    --error: #e28585 !important;
    --focus-ring: rgba(120, 191, 230, 0.35) !important;
    --nav-bg: rgba(26, 31, 39, 0.92) !important;
    --grid-line-x: rgba(226, 222, 213, 0.045) !important;
    --grid-line-y: rgba(226, 222, 213, 0.035) !important;

    background:
      linear-gradient(90deg, var(--grid-line-x) 1px, transparent 1px),
      linear-gradient(180deg, var(--grid-line-y) 1px, transparent 1px),
      var(--paper) !important;
    background-size: 42px 42px, 42px 42px, auto !important;
    color-scheme: dark;
  }

  [id^="mag-"] .topnav {
    background: var(--nav-bg) !important;
  }

  [id^="mag-"] .nav-mobile[open] .nav-mobile-links {
    background: var(--paper) !important;
  }

  [id^="mag-"] :where(.mag-footer, .magnetar-footer) {
    background: #111418 !important;
    color: #c8c4ba !important;
  }

  [id^="mag-"] .footer-text {
    color: #c8c4ba !important;
  }

  [id^="mag-"] :where(.btn-secondary, .btn + .btn) {
    color: var(--ink) !important;
  }

  [id^="mag-"] :where(
    .service-card,
    .stack-card,
    .project-card,
    .outcome-card,
    .tool-card,
    .career-card,
    .sidebar-card,
    .hero-card,
    .pain-card,
    .proof-card,
    .process-card,
    .faq-item,
    .form-card,
    .conversion-card,
    .booking-wrap,
    .booking-card,
    .form-message,
    .success-msg,
    .issue-node,
    .article-body blockquote,
    .article-body pre
  ) {
    background: var(--chalk) !important;
  }

  [id^="mag-"] :where(.issue-bridge) {
    background: #111418 !important;
    color: var(--ink) !important;
  }

  [id^="mag-"] :where(input, textarea, select, .checkbox-item) {
    background: var(--paper) !important;
    border-color: var(--rule) !important;
    color: var(--ink) !important;
  }

  [id^="mag-"] :where(input:focus, textarea:focus, select:focus) {
    background: var(--paper-cool) !important;
    border-color: var(--rule-strong) !important;
  }

  [id^="mag-"] :where(input::placeholder, textarea::placeholder) {
    color: #aeb4bc !important;
  }

  [id^="mag-"] ::selection {
    background: rgba(120, 191, 230, 0.35);
    color: #f2eee6;
  }
}