/* ============================================================================
   Shared theme for delgadoliveira.github.io
   ----------------------------------------------------------------------------
   Single source of truth for palette and typography. Every page links this
   before its own page-specific rules, so a restyle happens in one place.

   Visual direction: printed journal rather than product marketing. Paper
   stock, ink-dark text, a serif display face, hairline rules, and one
   restrained accent reserved for links and data.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Paper and ink */
  --cp-bg: #efeee8;
  --cp-bg-elevated: #f6f5f0;
  --cp-surface: #fcfbf8;
  --cp-surface-soft: #e8e6de;
  --cp-border: #d4d1c6;
  --cp-border-strong: #9b978a;
  --cp-text: #14161a;
  --cp-text-muted: #474c54;
  --cp-text-soft: #6c7178;

  /* Single accent: deep petrol blue, used for links and emphasis only */
  --cp-accent: #12506b;
  --cp-accent-hover: #0d3d52;
  --cp-accent-soft: rgba(18, 80, 107, 0.08);
  --cp-accent-fg: #fcfbf8;
  --cp-link: #12506b;

  /* Semantic, desaturated to sit alongside ink rather than shout */
  --cp-success: #1f6f43;
  --cp-danger: #a32424;
  --cp-warning: #8a6100;

  --cp-shadow: 0 1px 2px rgba(20, 22, 26, 0.06);
  --cp-overlay: rgba(239, 238, 232, 0.86);
  --cp-panel: rgba(252, 251, 248, 0.9);
  --cp-panel-strong: rgba(252, 251, 248, 0.97);
  --cp-sheen: rgba(255, 255, 255, 0.5);
  --cp-highlight: rgba(18, 80, 107, 0.1);

  --cp-font-display: "Iowan Old Style", "Palatino Linotype", Palatino,
    "Book Antiqua", Georgia, "Times New Roman", serif;
  --cp-font-body: "Segoe UI", Aptos, Calibri, -apple-system,
    BlinkMacSystemFont, sans-serif;
  --cp-font-mono: Consolas, "Cascadia Mono", "Courier New", Courier, monospace;
}

html[data-theme="dark"] {
  color-scheme: dark;

  --cp-bg: #15181c;
  --cp-bg-elevated: #1a1e23;
  --cp-surface: #1e2329;
  --cp-surface-soft: #252b32;
  --cp-border: #343b43;
  --cp-border-strong: #4e565f;
  --cp-text: #e9e7e1;
  --cp-text-muted: #a8adb4;
  --cp-text-soft: #868c94;

  --cp-accent: #7ab8d4;
  --cp-accent-hover: #96c8de;
  --cp-accent-soft: rgba(122, 184, 212, 0.12);
  --cp-accent-fg: #14161a;
  --cp-link: #7ab8d4;

  --cp-success: #5fbc85;
  --cp-danger: #e07a7a;
  --cp-warning: #d6a545;

  --cp-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --cp-overlay: rgba(21, 24, 28, 0.88);
  --cp-panel: rgba(30, 35, 41, 0.78);
  --cp-panel-strong: rgba(30, 35, 41, 0.97);
  --cp-sheen: rgba(255, 255, 255, 0.03);
  --cp-highlight: rgba(122, 184, 212, 0.12);
}

/* ---------------------------------------------------------------------------
   Typography. Selectors are intentionally prefixed with `html` so they win
   against the plain element rules inside each page's own <style> block,
   regardless of source order.
   ------------------------------------------------------------------------ */

html body {
  font-family: var(--cp-font-body);
}

html h1,
html h2,
html h3,
html .brand {
  font-family: var(--cp-font-display);
  font-weight: 600;
  letter-spacing: -0.012em;
}

html h1 {
  line-height: 1.06;
}

/* Mono is reserved for labels, identifiers, and numbers. */
html .kicker,
html .section-number,
html .layer-number,
html .track-num,
html .item-meta,
html .meta,
html .sub,
html .status,
html .badge,
html .project-meta,
html .writing-meta,
html .writing-type,
html .card-kicker,
html .verdict b,
html .call,
html .control .value,
html .stat-row span:last-child {
  font-family: var(--cp-font-mono);
}

/* Hairline rules read as typographic, not as UI chrome. */
html hr,
html .rule {
  border: none;
  border-top: 1px solid var(--cp-border);
  margin: 40px 0;
}

html a {
  color: var(--cp-link);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

html :focus-visible {
  outline: 2px solid var(--cp-accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html *,
  html *::before,
  html *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
   PRINT — the portfolio prints as a CV.
   ----------------------------------------------------------------------------
   Rather than maintaining a separate PDF that drifts out of date, Ctrl+P on the
   home page produces a plain, typeset curriculum vitae from the same source.
   Interactive chrome, promotional blocks and decorative surfaces are dropped;
   the substance (roles, publications, teaching, education) is kept and
   reflowed for paper.
   ========================================================================== */

@media print {
  @page {
    size: A4;
    margin: 16mm 15mm;
  }

  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 10.5pt;
    line-height: 1.42;
  }

  /* Reveal-on-scroll must never leave content invisible on paper. */
  .reveal,
  .reveal.is-visible,
  [class*="reveal"] {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  /* Screen-only chrome. */
  .site-header,
  .skip-link,
  .theme-toggle,
  .nav-links,
  .actions,
  .button,
  .text-link,
  .portrait-wrap,
  #tools,
  #practice,
  #writing,
  .writing-grid,
  body > footer,
  footer .nav-links {
    display: none !important;
  }

  main, .shell { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }

  /* Masthead: name, role, and where to find the full version. */
  .hero { padding: 0 0 10pt !important; border-bottom: 0.5pt solid #000; margin-bottom: 14pt; }
  .eyebrow { font-size: 8pt !important; letter-spacing: 0.08em; color: #444 !important; margin: 0 0 4pt !important; }
  .hero-name { font-size: 21pt !important; margin: 0 0 6pt !important; color: #000 !important; }
  .hero-name span, .hero-name b, .hero-name strong { color: #000 !important; }
  .hero-copy { font-size: 10pt !important; color: #222 !important; margin: 0 !important; max-width: none !important; }
  .status { font-size: 8.5pt !important; color: #444 !important; }

  .hero::after {
    content: "Full version, interactive tools and source: delgadoliveira.github.io";
    display: block;
    margin-top: 8pt;
    font-size: 8.5pt;
    color: #444;
  }

  /* Sections. */
  section { padding: 0 !important; margin: 0 0 14pt !important; border: none !important; background: none !important; }
  .section-head { margin-bottom: 7pt !important; }
  .section-number { font-size: 7.5pt !important; color: #666 !important; }
  .section-intro { font-size: 9.5pt !important; color: #333 !important; margin-bottom: 8pt !important; }

  h2 { font-size: 13pt !important; margin: 0 0 5pt !important; border-bottom: 0.5pt solid #999; padding-bottom: 3pt; }
  h3 { font-size: 10.5pt !important; margin: 0 0 2pt !important; }

  /* Entries: never split a role or publication across a page break. */
  .role, .publication, .education-item, .practice-card, .project-card, .profile-card, .module {
    break-inside: avoid;
    page-break-inside: avoid;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 9pt !important;
    border-radius: 0 !important;
  }

  .role { display: grid !important; grid-template-columns: 30mm 1fr !important; gap: 0 6mm !important; }
  .role-time { font-size: 8.5pt !important; color: #444 !important; }
  .role-company { font-size: 9.5pt !important; font-style: italic; color: #333 !important; margin: 0 0 2pt !important; }
  .role-description { font-size: 9.5pt !important; color: #000 !important; margin: 0 !important; }

  .publication { display: grid !important; grid-template-columns: 30mm 1fr !important; gap: 0 6mm !important; }
  .pub-year { font-size: 8.5pt !important; color: #444 !important; }

  /* Print the DOI rather than an unusable "DOI" link label. */
  .pub-link { display: none !important; }
  .publication a[href^="https://doi.org/"]::after,
  .publication a[href^="http"]::after { content: none; }

  .pill, .badge, .fact, .card-kicker, .practice-index, .writing-type { color: #333 !important; border-color: #999 !important; background: none !important; }

  /* Decorative panels keep their content but lose their surfaces. */
  .facts {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    display: block !important;
    margin-top: 6pt !important;
  }
  .facts .fact {
    display: block !important;
    margin: 0 0 3pt !important;
    font-size: 9.5pt !important;
  }
  .facts .fact strong {
    color: #000 !important;
    display: inline !important;
    font-size: 9.5pt !important;
    font-weight: 700 !important;
  }
  .facts .fact strong::after { content: ": "; }
  .facts .fact span { color: #222 !important; display: inline !important; font-size: 9.5pt !important; }

  /* The portrait is hidden; do not leave its grid track behind. */
  .hero { display: block !important; }

  a, a:visited { color: #000 !important; text-decoration: none !important; }

  /* Page-break discipline around major headings. */
  section, .section-head { break-after: avoid-page; }
  h2, h3 { break-after: avoid-page; page-break-after: avoid; }
}

/* Current-section indicator, set by the scrollspy on the home page. */
html .nav-links a {
  position: relative;
  transition: color 0.18s ease;
}
html .nav-links a.is-current {
  color: var(--cp-accent);
}
html .nav-links a.is-current::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--cp-accent);
}