/**
 * data-centered.com - Polish CSS
 *
 * Shared refinements for all pages.
 * Include after page-specific styles to apply polish layer.
 *
 * Contents:
 * 1. Smooth Scroll + Reduced Motion
 * 2. Focus States
 * 3. External Link Indicators
 * 4. Font Rendering
 * 5. Print Styles
 */

/* ══════════════════════════════════════════════════════
   1. SMOOTH SCROLL + REDUCED MOTION
   ══════════════════════════════════════════════════════ */

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ══════════════════════════════════════════════════════
   2. FOCUS STATES
   ══════════════════════════════════════════════════════ */

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--accent, #d4a84b);
  outline-offset: 3px;
  border-radius: 2px;
}

button:focus-visible,
[role="button"]:focus-visible {
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════
   3. EXTERNAL LINK INDICATORS
   ══════════════════════════════════════════════════════ */

/* Add arrow to external links */
a[href^="http"]:not([href*="data-centered.com"])::after {
  content: " ↗";
  font-size: 0.75em;
  opacity: 0.4;
  transition: opacity 0.15s;
}

a[href^="http"]:not([href*="data-centered.com"]):hover::after {
  opacity: 0.7;
}

/* Exclude nav and utility links from arrows */
.site-nav a[href^="http"]::after,
.intro-links a[href^="http"]::after,
.header-nav a[href^="http"]::after,
.footer a[href^="http"]::after,
nav a[href^="http"]::after,
[data-no-external-indicator] a[href^="http"]::after {
  content: none;
}

/* ══════════════════════════════════════════════════════
   4. FONT RENDERING
   ══════════════════════════════════════════════════════ */

body {
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Selection color - uses page's accent if defined */
::selection {
  background: var(--accent, #d4a84b);
  color: var(--bg, #0a0a0a);
}

::-moz-selection {
  background: var(--accent, #d4a84b);
  color: var(--bg, #0a0a0a);
}

/* ══════════════════════════════════════════════════════
   5. PRINT STYLES
   ══════════════════════════════════════════════════════ */

@media print {
  body {
    background: white !important;
    color: black !important;
    font-size: 12pt;
  }

  /* Hide navigation and interactive elements */
  .site-nav,
  .header-nav,
  nav,
  .theme-toggle,
  .footer-stats,
  .footer-dot,
  .back-to-top,
  button:not([type="submit"]) {
    display: none !important;
  }

  /* Reset container width */
  .container {
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* Style links for print */
  a {
    color: inherit !important;
    text-decoration: underline !important;
  }

  /* Show full URLs for external links */
  a[href^="http"]::after {
    content: " (" attr(href) ")" !important;
    font-size: 0.8em !important;
    opacity: 1 !important;
  }

  /* Clean borders */
  .site-header,
  .header {
    border-bottom: 1px solid #ccc !important;
  }

  /* Ensure content doesn't break awkwardly */
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
  }

  p, li {
    orphans: 3;
    widows: 3;
  }

  /* Hide decorative elements */
  .section-line {
    background: #ccc !important;
  }
}