/*
Theme Name: Deboncoeur
Theme URI: https://dandydandelion.com
Author: Metzae.Media
Description: Single-page personal site for Daniel Deboncoeur. Built from the Broadsheet design system export, converted to a standalone WordPress theme.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: deboncoeur
*/

/* --- design tokens, from the Broadsheet export --- */
:root {
  --color-bg: #141312;
  --color-surface: #1e1c1b;
  --color-text: #f2f0ee;
  --color-divider: rgba(242, 240, 238, 0.16);
  --color-accent: #62c5ee;
  --color-accent-600: #99e0ff;
  --color-accent-700: #cbeeff;
  --color-flag: #ff458e;
  --font-heading: "Space Grotesk", system-ui, sans-serif;
  --font-heading-weight: 500;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --radius-md: 2px;
  --space-2: 10px;
  --space-3: 15px;
}

html {
  scroll-behavior: smooth;
  background: var(--color-bg);
}

body {
  margin: 0;
  text-wrap: pretty;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-600); }
a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

img { max-width: 100%; height: auto; }

/* screen-reader-only, for the skip link and the visually hidden page title */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.screen-reader-text:focus {
  z-index: 100;
  top: 8px;
  left: 8px;
  width: auto;
  height: auto;
  clip-path: none;
  padding: 10px 16px;
  background: var(--color-surface);
  color: var(--color-text);
}

/* --- buttons, lifted from the design system's styles.css --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 14px;
  line-height: 1.2;
  color: var(--color-text);
  background: transparent;
  border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn-primary { background: var(--color-accent); color: var(--color-bg) !important; }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }

/* --- halftone portrait treatment, from the design system --- */
.halftone {
  position: relative;
  filter: grayscale(0.35) contrast(1.15);
  overflow: hidden;
}
.halftone::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.22) 30%, transparent 32%);
  background-size: 3px 3px;
  mix-blend-mode: multiply;
}
.halftone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The export sized the portrait with aspect-ratio: 4/5, width: auto and
   max-height: 34vh. As a flex item in the column-direction rail it stretches to
   the rail's full width instead, and max-height then squashes it into a wide
   letterbox, roughly 1.94:1 rather than 0.8:1. Stopping the stretch and driving
   the box from its height restores the design's proportion. !important is
   needed because the export's sizing is inline, and the inline styles are kept
   verbatim so future exports still diff cleanly. */
[data-portrait] {
  align-self: start !important;
  height: 34vh !important;
  max-height: 34vh !important;
  width: auto !important;
}

/* the export carried hover state on a style-hover attribute, which no browser reads */
[data-work-row]:hover {
  padding-left: 14px;
  background: rgba(242, 240, 238, 0.03);
}

/* --- Covenant Code rule 1c: normalize video embeds --- */
.wp-block-embed iframe,
iframe[src*="youtube.com"],
iframe[src*="youtube-nocookie.com"],
iframe[src*="vimeo.com"] {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

@media (max-width: 900px) {
  [data-shell] { grid-template-columns: 1fr !important; }
  [data-rail] {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-bottom: 8px !important;
    gap: 40px;
  }
  /* stacked layout: size the portrait from its width, not the viewport height */
  [data-portrait] {
    height: auto !important;
    max-height: none !important;
    width: min(62%, 260px) !important;
  }
  [data-work-row] { grid-template-columns: 1fr !important; }
  [data-work-row] [data-years] { line-height: 20px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-work-row] { transition: none; }
}