/* Components — hr, links, lists, project blocks, CV blocks, focus, motion. */

/* Horizontal rule */
hr {
  background: var(--color-rule);
  border: 0;
  height: 1px;
  display: block;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
}

/* Links */
a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-color: var(--color-link-underline);
  text-underline-offset: 0.2em;
}
a:hover {
  text-decoration-color: var(--color-link);
}
a:active,
.linked:active {
  opacity: 0.7;
}

/* Focus visible — global, applied across interactive elements. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Headings inside columns are visually inline with bodycopy and don't carry
   the link underline behavior. */
h1 a,
h2 a,
h3 a {
  text-decoration: none;
}

/* Vertical rhythm inside a column — paragraphs adjacent to each other get
   a single bodycopy-line gap; hr's own margin handles section breaks. */
.column p + p {
  margin-top: var(--space-md);
}

/* Long unbreakable strings (emails, URLs) inside narrow columns — break
   only when the word would overflow the container, leaving normal words
   untouched. word-break is a fallback for older Safari that doesn't
   support `overflow-wrap: anywhere`. Defensive selector list (covers
   p, li, dd, dt) instead of relying on inheritance from .column, in
   case any descendant later sets overflow-wrap explicitly. */
.column,
.column p,
.column li,
.column dd,
.column dt {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Lists — base styles re-introduce list semantics that reset.css zeros out. */
ol {
  margin: 0;
  padding: 0 0 0 2.5em;
  list-style-type: decimal-leading-zero;
}

/* Unordered lists render the marker as an en dash via ::before instead of
   the browser's default disc. ::marker `content` customization has uneven
   engine support (notably older Safari), so an absolutely-positioned
   pseudo-element gives full control across all modern browsers. */
ul {
  list-style-type: none;
  margin: 0;
  padding: 0 0 0 1.5em;
}

ul li {
  position: relative;
}

ul li::before {
  content: "–";
  position: absolute;
  left: -1.5em;
  color: var(--color-text);
}

/* Lineated variant — hanging indent without any marker. First line of each
   item sits flush at the natural left edge; wrapped lines indent 3em. */
ul.lineated {
  margin: 0 0 0 3em;
  padding: 0;
  list-style-type: none;
  text-indent: -3em;
}

ul.lineated li::before {
  content: none;          /* override the en-dash marker for this variant */
}

ul.lineated > li + li {
  margin-top: var(--space-xs);
}

/* Project block — middle column. Image spans the full width on row 1;
   row 2 splits 1fr/2fr between heading (number+title) and meta. */
.project {
  display: grid;
  grid-template-columns: 1fr 2fr;
  column-gap: var(--space-md);
  row-gap: var(--space-md);
}
.project + .project {
  margin-top: var(--space-xl);
}
.project__heading {
  /* Inherits h3 weight 500 + mono. Pure positional element on the grid. */
}
.project__meta > * + * {
  margin-top: var(--space-md);
}
/* Empty <div class="project__media"> renders the gray 4:3 placeholder
   for projects without a featured image. When wired with a real image
   the element is an <a> wrapping <img> — :not(:empty) drops the
   aspect-ratio reservation and the gray bg so the natural image ratio
   wins, and a.project__media kills the global underline so the link
   reads as a clickable card rather than a textual hyperlink. */
.project__media {
  grid-column: 1 / -1;
  aspect-ratio: 4 / 3;
  background: rgba(0, 0, 0, 0.05);
}

.project__media:not(:empty) {
  aspect-ratio: auto;
  background: transparent;
}

a.project__media {
  display: block;
  text-decoration: none;
}

.project__media img {
  display: block;
  width: 100%;
  height: auto;
}

/* Project heading link (number + title) is clickable too — keep heading
   typography intact (no default underline thanks to `h3 a` rule above)
   and add a subtle underline on hover to communicate clickability. */
.project__heading a:hover {
  text-decoration: underline;
  text-decoration-color: var(--color-link);
  text-underline-offset: 0.2em;
}

/* Empty-state placeholder shown when no projects are published yet. */
.projects-empty {
  color: var(--color-text-muted);
  font-style: italic;
}

/* In stack mode the visible <hr class="profile-trailing-rule"> below
   PROFILE provides the separation; in desktop that hr is display:none,
   so h2 sits flush against the bio's first paragraph. Reserve a clear
   gap there — only at desktop widths, scoped to the About column so
   MATERIAL and CV section labels are not affected. */
@media (min-width: 1024px) {
  .column--about > h2 {
    margin-bottom: var(--space-xl);
  }
}

/* CV section block — right column. Same 4/8 split. */
.cv-section {
  display: grid;
  grid-template-columns: 1fr 2fr;
  column-gap: var(--space-md);
  row-gap: var(--space-md);
}
.cv-section + .cv-section {
  margin-top: var(--space-lg);
}

/* Override the inherited `overflow-wrap: anywhere` (set on .column for
   long emails) — `break-word` lets headings like "Education" or
   "Employment" stay whole; mid-character breaks were happening at
   intermediate viewport widths because `anywhere` shrinks min-content
   to a single character. */
.cv-section__heading {
  overflow-wrap: break-word;
}

.cv-section__body > * + * {
  margin-top: var(--space-md);
}

/* Each item in Education / Employment / Referrals / Exhibitions / Awards /
   Press is wrapped in a <div class="cv-item"> by $render_section in
   column-cv.php. This rule gives 24px between items, distinct from the
   16px gap BETWEEN paragraphs INSIDE an item (which Employment generates
   when the details field wraps in multiple <p> via wpautop). The
   `.column p + p` rule in this file (line ~47) handles the in-item gap;
   this rule handles the between-item gap.
   Skills uses a <ul class="cv-skills__list"> as the only child of
   .cv-section__body — no .cv-item siblings → unaffected. */
.cv-section__body > .cv-item + .cv-item {
  margin-top: var(--space-lg);
}

/* Tighter gap between the meta <p> (role/org/year) and the first details
   <p> of an Employment item, vs. the standard 16px between subsequent
   details paragraphs. Hierarchy in stack:
     meta → details ¶1     :  8px (--space-sm)  ← this rule
     details ¶1 → ¶2       : 16px (.column p + p)
     last <p> of item N → next .cv-item : 24px (.cv-item + .cv-item)
   `> p:first-child + p` matches only the SECOND <p> in a .cv-item;
   third+ paragraphs fall back to the inherited 16px. Specificity 0,2,2
   beats `.column p + p` (0,1,2). */
.cv-item > p:first-child + p {
  margin-top: var(--space-sm);
}

/* Typography hierarchy inside Education, Employment and Referrals items.
   - title (Education) and role (Employment) → weight 500.
   - subtitle (Education) and org (Employment) → italic.
   - year → muted color (rgba(0,0,0,0.6)).
   The same class can style differently per section (e.g. cv-item__role:
   500 in Employment, italic in Referrals), so every rule is scoped to
   its section's modifier class. Year applies wherever it appears. */
.cv-section--education .cv-item__title,
.cv-section--employment .cv-item__role {
  font-weight: 500;
}

.cv-section--education .cv-item__subtitle {
  font-style: italic;
}

.cv-section--employment .cv-item__org {
  font-style: italic;
}

.cv-item__year {
  color: var(--color-text-tertiary);
}

/* Referrals ("Cultural credentials") mirrors Employment's ladder one
   step down (2026-09-13):
   - name → caps + 500, like Employment's role. Uppercase is applied
     here (not typed in the field) so the stored string stays natural-
     case for TranslatePress.
   - role → italic, like Employment's org.
   - org → tertiary color, like Employment's year (italic removed
     2026-09-13). */
.cv-section--referrals .cv-item__name {
  font-weight: 500;
  text-transform: uppercase;
}

.cv-section--referrals .cv-item__role {
  font-style: italic;
}

.cv-section--referrals .cv-item__org {
  color: var(--color-text-tertiary);
}

/* Screenings & Selections ("exhibitions") follows the same ladder
   (2026-09-13):
   - title → caps + 500. Uppercase applied here, not typed in the field,
     so the stored string stays natural-case for TranslatePress.
   - info (field key `details`) → italic.
   - year → tertiary via the global .cv-item__year rule above.
   The free-text description renders below as plain <p>s — no rule
   needed. */
.cv-section--exhibitions .cv-item__title {
  font-weight: 500;
  text-transform: uppercase;
}

.cv-section--exhibitions .cv-item__info {
  font-style: italic;
}

/* ---- Language switcher (TranslatePress integration) ---------------------
   Custom switcher rendered by cargo_render_lang_switcher() in helpers.php.
   Two contexts share the same atomic styling:
   - .lang-switcher--desktop: position:absolute in the CV column's top-right
     (mirror of the .site-title in About's top-left).
   - bare .lang-switcher (inside .site-nav-mobile): in-flow item below the
     section links, separated by a top border. */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  line-height: 1;
}

/* Inactive (default) — muted color, no underline. Reads clearly as
   "available alternate language". */
.lang-switcher__link {
  color: var(--color-text-muted);
  text-decoration: none;
}

/* Hover on an inactive link — color darkens to full text and a soft
   underline appears, signaling clickability. */
.lang-switcher__link:hover {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: var(--color-link-underline);
  text-underline-offset: 0.2em;
}

/* Active (current language) — full-strength contrast: text color, weight
   bumped, solid underline at full text color. Listed after the :hover
   rule so its values still apply on hover-of-active (active state stays
   the strongest visual; no hover escalation needed). */
.lang-switcher__link.is-active {
  color: var(--color-text);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--color-text);
  text-underline-offset: 0.2em;
}

.lang-switcher__sep {
  color: var(--color-text-muted);
  user-select: none;
}

/* Inline switcher inside the CV column header — sits next to "CV
   (SAMPLE)" and scrolls with the column. Visible only in desktop:
   stack mode hides it via the @media block below (the dropdown shows
   the un-modified switcher instead). */
.lang-switcher--inline {
  /* Inherits the base .lang-switcher styling; no additional rules
     needed. The .column__header flex layout handles positioning. */
}

@media (max-width: 1023px) {
  .lang-switcher--inline {
    display: none;
  }
}

/* Column header: pairs the column's <h2> with an inline element (e.g.,
   the language switcher in CV) on the same baseline. Used only in CV
   currently; harmless if applied elsewhere later. */
.column__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
}

/* Switcher placed at the bottom of the dropdown nav: separator above
   (matches the section-link list visually) and consistent left padding
   with the section links. */
.site-nav-mobile .lang-switcher {
  padding: var(--space-md) var(--col-padding);
  margin-top: var(--space-sm);
  border-top: 1px solid var(--color-text-ghost);
}

/* Intermediate desktop range (1024–1280px): the CV column is still 25%
   of the viewport, but its inner 1fr/2fr split squeezes the heading
   track to ~70px — narrower than long labels need. Collapse to a single
   column there so the heading sits above its body, with full column
   width. Above 1280px the split has enough room to read as two columns;
   below 1024px responsive.css handles stack mode. */
@media (min-width: 1024px) and (max-width: 1280px) {
  .cv-section {
    grid-template-columns: 1fr;
    row-gap: var(--space-sm);
  }
}

/* Skills items render as a <ul> so the global en-dash bullet kicks in
   uniformly across all viewports — including ≥1281px where the
   cv-section grid is split into heading/body but Skills should still
   read as a list, not as plain lines. */

/* Last updated and footer text in the CV column */
.cv-last-updated {
  color: var(--color-text-muted);
}
.site-footer-text {
  color: var(--color-text);
}

/* Sub/sup baseline tweaks (preserved from K384) */
sub {
  position: relative;
  vertical-align: baseline;
  top: 0.3em;
}
sup {
  position: relative;
  vertical-align: baseline;
  top: -0.4em;
}

.small-caps {
  font-variant: small-caps;
  text-transform: lowercase;
}

/* Smooth anchor scrolling — applied to both scroll containers we have:
   `html` owns the scroll in stack mode, each `.column` owns it in desktop.
   Pure-CSS solution: anchor clicks let the browser walk to the nearest
   scrollable ancestor and animate the scroll. No JS needed. */
html,
.column {
  scroll-behavior: smooth;
}

/* Reduced motion — applied globally; any animation/transition is suppressed,
   smooth anchor scrolling falls back to instant. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
  html,
  .column {
    scroll-behavior: auto;
  }
}