/* ==========================================================================
   Print Stylesheet — dspell.net
   Designed for the portfolio DOM rendered by index.js.
   Produces a clean, single-column resume optimised for PDF / @media print.
   ========================================================================== */

/* ── Page setup ───────────────────────────────────── */
@page {
  size: letter portrait;
  margin: 0.45in 0.55in 0.45in 0.55in;
  border: none;
  outline: none;
}

  /* ── Global reset for print ───────────────────── */
  *,
  *::before,
  *::after {
    color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    box-shadow: none !important;
    text-shadow: none !important;
    outline: none !important;
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    margin: 0 !important;
  }

  /* ── Force light color-scheme — prevents browser drawing a dark border ── */
  :root,
  [data-theme="dark"],
  [data-theme="light"] {
    color-scheme: light !important;
    --navy:        #fff;
    --navy-2:      #fff;
    --navy-card:   #fff;
    --navy-border: #d0d0d0;
    --blue:        #1a5cc8;
    --blue-light:  #1a5cc8;
    --blue-glow:   transparent;
    --blue-subtle: transparent;
    --white:       #000;
    --off-white:   #111;
    --text:        #333;
    --text-muted:  #666;
    --light-bg:    #fff;
    --light-text:  #111;
    --light-sub:   #444;
    --light-border:#d0d0d0;
    --shadow:      none;
    --shadow-card: none;
  }

  /* ── Body & base ───────────────────────────────── */
  html, body {
    background: #fff !important;
    color: #111 !important;
    border: none !important;
    outline: none !important;
    color-scheme: light !important;
    font-size: 9pt;
    line-height: 1.35;
    overflow: visible;
  }

  /* ── Elements to hide entirely ─────────────────── */
  #navbar,
  #page-loader,
  .hero-bg,
  .hero-overlay,
  .hero-grid,
  .hero-cta,
  .hero-badge,
  .scroll-down,
  .about-image-wrap,
  .about-links,
  .nav-actions,
  .section-tag,
  .contact-cta-box,
  #footer,
  .btn {
    display: none !important;
  }

  /* ── Section spacing ────────────────────────────── */
  section {
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    background: #fff !important;
  }

  section:not(#hero):not(.section-dark) {
    padding: 0 !important;
  }

  .section-dark {
    background: #fff !important;
    color: #111 !important;
    padding: 0 !important;
  }

  .section-header {
    margin: 0 0 4pt 0;
    text-align: left;
  }

  .section-header h2 {
    font-size: 10pt;
    font-weight: 700;
    color: #111;
    border-bottom: 1pt solid #1a5cc8;
    padding-bottom: 2pt;
    margin-bottom: 0;
  }

  .section-sub { display: none; }

  /* ── Container ──────────────────────────────────── */
  .container {
    max-width: 100%;
    padding: 0;
  }

  /* ── Hero / name header ─────────────────────────── */
  #hero {
    min-height: auto !important;
    display: block !important;
    padding: 0 !important;
    border-bottom: 1.5pt solid #1a5cc8;
  }
  
  .hero-content {
    position: static !important;
    padding: 0 !important;
    max-width: 100%;
    text-align: left;
  }

  .hero-name {
    font-size: 20pt;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 1pt;
    text-transform: uppercase;
  }

  .name-first { color: #111; }
  .name-last  { color: #1a5cc8; }

  .hero-tagline {
    font-size: 9pt;
    color: #444;
    margin: 0 0 2pt;
    max-width: 100%;
  }

  .hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 2pt 12pt;
    justify-content: flex-start;
  }

  .stat-num {
    font-size: 11pt;
    font-weight: 800;
    color: #111;
  }

  .stat-label {
    font-size: 6.5pt;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .stat-divider { display: none; }

  /* ── About ──────────────────────────────────────── */
  #about {
    background: #fff !important;
  }

  #about > * {
    margin-top: 10pt !important;
  }

  .about-grid {
    display: block !important;
  }

  .about-text p {
    font-size: 9.5pt;
    color: #333;
    margin: 0 0 6pt 0;
    padding-left: 8pt;
  }

  .about-highlights {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6pt;
    margin: 0;
  }

  .highlight-item {
    border: 0.5pt solid #d0d0d0;
    border-radius: 4pt;
    padding: 5pt 8pt;
    background: #fff;
    break-inside: avoid;
  }

  .highlight-item i { display: none; }

  .highlight-item strong {
    font-size: 8.5pt;
    color: #111;
  }

  .highlight-item span {
    font-size: 8pt;
    color: #555;
  }

  /* ── Skills ─────────────────────────────────────── */
  .skills-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5pt;
  }

  .skill-card {
    background: #fff !important;
    border: none !important;
    border-radius: 0;
    padding: 0 0 4pt 8pt;
    break-inside: avoid;
    border-bottom: 0.5pt solid #e0e0e0 !important;
  }

  .skill-icon { display: none; }

  .skill-card h3 {
    font-size: 7.5pt;
    font-weight: 700;
    color: #1a5cc8;
    margin-bottom: 2pt;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .skill-card ul {
    display: flex;
    flex-wrap: wrap;
    gap: 4pt;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .skill-card ul li {
    font-size: 7.5pt;
    color: #333;
    border-bottom: none;
    padding: 0;
    display: inline;
  }

  .skill-card ul li:not(:last-child)::after {
    content: ' \2022';
    margin-left: 4pt;
    color: #1a5cc8;
  }

  .skill-card ul li::before {
    display: none;
  }

  /* ── Experience ─────────────────────────────────── */
  #experience { background: #fff !important; }

  .timeline { max-width: 100%; }

  .timeline-item {
    display: block !important;
    margin-bottom: 6pt;
  }

  .timeline-marker { display: none; }

  .timeline-card {
    background: #fff !important;
    border: none !important;
    /* border-left: 1.5pt solid #1a5cc8 !important; */
    border-radius: 0 !important;
    padding: 2pt 0 2pt 8pt !important;
    margin-bottom: 0;
  }

  .tc-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: nowrap;
    margin-bottom: 2pt;
  }

  .tc-header h3 {
    font-size: 9.5pt;
    font-weight: 700;
    color: #111;
  }

  .tc-company {
    font-size: 8.5pt;
    color: #1a5cc8;
    font-weight: 600;
  }

  .tc-location {
    font-size: 7.5pt;
    color: #666;
  }

  .tc-date {
    font-size: 7pt;
    color: #666;
    background: none;
    border: none;
    padding: 0;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .tc-summary {
    font-size: 8pt;
    color: #444;
    font-style: italic;
    border-left: none;
    padding-left: 0;
    margin-bottom: 2pt;
  }

  .tc-bullets li {
    font-size: 8pt;
    color: #333;
    padding: 1pt 0 1pt 14pt;
  }

  .tc-bullets li::before {
    content: '–';
    color: #1a5cc8;
  }

  .tc-bullets li strong { color: #111; }

  /* ── Accomplishments ────────────────────────────── */
  .wins-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4pt;
  }

  .win-card {
    background: #fff !important;
    border: 0.5pt solid #d0d0d0 !important;
    border-radius: 4pt;
    padding: 4pt;
    break-inside: avoid;
  }

  .win-card::before { display: none; }
  .win-icon { display: none; }

  .win-year {
    font-size: 7pt;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 2pt;
  }

  .win-card h3 {
    font-size: 9.5pt;
    font-weight: 700;
    color: #111;
    margin-bottom: 2pt;
  }

  .win-card p {
    font-size: 8.5pt;
    color: #444;
    margin-bottom: 4pt;
  }

  .win-impact {
    font-size: 8pt;
    color: #333;
    background: none;
    border: none;
    /* border-left: 1.5pt solid #1a5cc8; */
    padding: 2pt 0 2pt 6pt;
    border-radius: 0;
  }

  .win-impact i { display: none; }
  .win-impact strong { color: #111; }

  /* ── Education ──────────────────────────────────── */
  #education { background: #fff !important; }

  .edu-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12pt;
    max-width: 100%;
  }

  .edu-col-title {
    font-size: 7.5pt;
    font-weight: 700;
    color: #1a5cc8;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 4pt;
  }

  .edu-col-title i { display: none; }

  .edu-item {
    border-left: none !important;
    padding-left: 6pt;
    margin-bottom: 5pt;
    break-inside: avoid;
  }

  .edu-item strong {
    font-size: 8.5pt;
    color: #111;
  }

  .edu-item span {
    font-size: 7.5pt;
    color: #555;
  }

  .cert-badge {
    background: #fff !important;
    border: none !important;
    border-radius: 0;
    padding: 2pt 0;
    font-size: 8pt;
    color: #333;
    break-inside: avoid;
    border-bottom: 0.5pt solid #eee !important;
    padding-left: 4pt;
  }

  .cert-badge i { color: #1a5cc8; }

  /* ── Contact ────────────────────────────────────── */
  #contact { background: #fff !important; }

  .contact-grid {
    display: block !important;
    padding-left: 8pt;
  }

  .contact-cards {
    display: flex !important;
    flex-wrap: wrap;
    gap: 3pt 18pt;
  }

  .contact-card {
    display: flex;
    align-items: center;
    gap: 5pt;
    background: #fff !important;
    border: none !important;
    padding: 2pt 0;
    flex: 1 1 45%;
    break-inside: avoid;
  }

  .cc-icon { display: none; }

  .contact-card strong {
    font-size: 7pt;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .contact-card span,
  .contact-card a {
    font-size: 8.5pt;
    color: #111;
    text-decoration: none;
  }

  /* ── Links ──────────────────────────────────────── */
  a {
    color: #111;
    text-decoration: none;
  }

  a[href^="http"]::after,
  a[href^="mailto"]::after {
    content: none;
  }

