/**
 × style_css v2.12 × updated 2026-10-07 ×
 × created 2025-12-03 × raimundo p. solar ×
 × Theme header, global variables, reset, base typography, links, focus ×
 *
 * Theme Name: CSG × r p. solar
 * Author: raimundo p. solar
 * Description: Canid Specialist Group homemade with love wordpress theme
 * Version: 2.04
 * Text Domain: csg-x-rps
 **/

/****
        Reset.
 ****/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote::before,
blockquote::after,
q::before,
q::after {
  content: none;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

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

/****
        Global variables.
 ****/

:root {
  --color-black: #141414;
  --color-gray: #333;
  --color-white: #f5f2ec; /* warm paper white: still reads as white, softer */
  --color-orange: #d97652; /* base: footer background */
  --color-s-orange: #d36036; /* highlight: hovers, active states, text selection */
  --color-primary-alpha03: rgba(0, 0, 0, 0.03);
  --font-size-base: 16px;
  --font-size-h1: 3.5rem;
  --font-size-h2: 2.2rem;
  --font-size-h3: 1.75rem;
  --font-size-h4: 1.5rem;
  --font-size-h5: 1.25rem;
  --font-size-h6: 1rem;
  --line-height-base: 1.5;
  --spacing-base: 1rem;
  --spacing-medium: 1.5rem;
  --spacing-more: 2rem;
  --spacing-big: 3rem;
  --max-width-site: 1200px;
  --max-width-big: 1400px;
  --shadow: 10px 10px 30px rgba(0, 0, 0, 0.1);
}

/****
        Base typography.
 ****/

body {
  color: var(--color-black);
  background: var(--color-white);
  font-family: var(--font-sans);
  line-height: 1.4rem;
}

h1,
h2 {
  margin-bottom: var(--breche-s);
  font-family: var(--font-sans);
  line-height: 1.4em;
}

h3 {
  line-height: 1.4em;
}

h4 {
  margin: 0 0 0.1em;
}

p {
  margin: 0 0 1em;
  line-height: 1.5em;
}

p:last-child {
  margin-bottom: 0;
}

address {
  color: var(--color-gray);
  font-style: normal;
}

/* --------------------------------------------------
   TEXT SELECTION
-------------------------------------------------- */

::selection {
  color: var(--color-white);
  background: var(--color-s-orange);
}

::-moz-selection {
  color: var(--color-white);
  background: var(--color-s-orange);
}

/****
        Rich text emphasis.

        The reset removes browser defaults from
        strong / b / em / i. .rich-text is the
        canonical utility for formatted backend text.

        The component selectors remain as compatibility
        aliases while templates migrate to .rich-text.
 ****/

:is(.rich-text, .species-description, .pwg-single__presentation) strong,
:is(.rich-text, .species-description, .pwg-single__presentation) b {
  font-weight: 500;
}

:is(.rich-text, .species-description, .pwg-single__presentation) em,
:is(.rich-text, .species-description, .pwg-single__presentation) i {
  font-style: italic;
}

/****
        Base links.
 ****/

a {
  color: var(--color-black);
  text-decoration: none;
}

a:visited {
  color: inherit;
}

/****
        Keyboard focus.
        One visible ring for every focusable element.
        :focus-visible keeps it off mouse clicks.
 ****/

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/****
        Text fields: no ring, the typing caret is the
        sign of focus — s-orange everywhere, drawn 3px
        thick by assets/js/caret.js.
 ****/

input[type="search"],
input[type="text"],
input[type="email"],
textarea {
  caret-color: var(--color-s-orange);
}

input[type="search"]:focus-visible,
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
textarea:focus-visible {
  outline: none;
}

/* Native caret hidden while caret.js draws its own (one caret only). */
input.has-ps-caret,
textarea.has-ps-caret {
  caret-color: transparent !important;
}

.ps-caret {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;

  width: 3px;

  background: var(--color-s-orange);

  pointer-events: none;

  animation: ps-caret-blink 1.06s steps(1, end) infinite;
}

.ps-caret[hidden] {
  display: none;
}

@keyframes ps-caret-blink {
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ps-caret {
    animation: none;
  }
}

/****
        Screen-reader-only text.
        Visually hidden, still read aloud.
 ****/

.screen-reader-text {
  position: absolute;

  width: 1px;
  height: 1px;

  padding: 0;
  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0;
}

/****
        Skip link.
        Hidden until it receives keyboard focus.
 ****/

.skip-link {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 1000;

  padding: 0.6rem 1rem;

  color: var(--color-white);
  background: var(--color-black);

  transform: translateY(-200%);
}

.skip-link:focus,
.skip-link:visited {
  color: var(--color-white);
}

.skip-link:focus {
  transform: none;
}

#site-content:focus {
  outline: none;
}

/****
        Link underline.
        Canonical underline hover utility.
 ****/

.link-under a,
a.link-under,
.link-orange a,
a.link-orange {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 0.075em;
  text-underline-offset: 0.16em;
  transition: text-decoration-color 180ms ease;
}

.link-under a:hover,
.link-under a:focus-visible,
a.link-under:hover,
a.link-under:focus-visible,
.link-orange a:hover,
.link-orange a:focus-visible,
a.link-orange:hover,
a.link-orange:focus-visible {
  text-decoration-color: var(--color-s-orange);
}

/****
        Link color hover.
 ****/

.link-hover a,
a.link-hover {
  transition: color 180ms ease;
}

.link-hover a:hover,
.link-hover a:focus-visible,
a.link-hover:hover,
a.link-hover:focus-visible {
  color: var(--color-s-orange);
}

/****
        Highlighted link.

        Persistent underline:
        - black text + underline at rest
        - orange text + underline on hover/focus

        Use on a parent or directly on the anchor.
 ****/

.link-highlighted a,
a.link-highlighted {
  color: var(--color-black);
  text-decoration-line: underline;
  text-decoration-color: var(--color-black);
  text-decoration-thickness: 0.075em;
  text-underline-offset: 0.16em;
  transition:
    color 180ms ease,
    text-decoration-color 180ms ease;
}

.link-highlighted a:hover,
.link-highlighted a:focus-visible,
a.link-highlighted:hover,
a.link-highlighted:focus-visible {
  color: var(--color-s-orange);
  text-decoration-color: var(--color-s-orange);
}

/****
        Arrow links: navigation chevron + underlined text
        (journal submissions, newsletter issues, IUCN Red
        List). The underline stays under the words only.
 ****/

/*
 * The chevron never parts from the label; a label too
 * long for its line (a web address on a phone) breaks
 * inside itself instead (after "www." first).
 */
.link-arrow {
  color: var(--color-black);
  text-decoration: none;
  white-space: nowrap;

  transition: color 180ms ease;
}

.link-arrow__icon {
  display: inline-block;

  width: auto;
  height: 0.6em;
  margin-right: 0.35em;

  vertical-align: 0.02em;
}

.link-arrow__label {
  white-space: normal;
  overflow-wrap: anywhere;
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 0.075em;
  text-underline-offset: 0.16em;
}

.link-arrow:hover,
.link-arrow:focus-visible {
  color: var(--color-s-orange);
}

/****
        PDF links.
 ****/

a.link-pdf,
a.link-pdf:link,
a.link-pdf:visited,
a.link-pdf:active {
  color: #e00000;
}

a.link-pdf.link-hover:hover,
a.link-pdf.link-hover:focus-visible {
  color: var(--color-s-orange);
}

a.link-pdf.link-hover:active {
  color: #e00000;
}

/* "[PDF]" never split over two lines. */
.feed-item__pdf {
  white-space: nowrap;
}

/****
        Archived — link-fire.

        .link-fire grows left → right.
        .link-fire-r grows right → left.
 ****/

.link-fire a,
.link-fire-r a {
  position: relative;
}

.link-fire a::after,
.link-fire-r a::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 0.075em;
  background: var(--color-s-orange);
  content: "";
  transform: scaleX(0);
  transition:
    transform 0.4s cubic-bezier(
      0.25,
      0.46,
      0.45,
      0.94
    );
}

.link-fire a::after {
  transform-origin: left center;
}

.link-fire-r a::after {
  transform-origin: right center;
}

.link-fire a:hover::after,
.link-fire a:focus-visible::after,
.link-fire-r a:hover::after,
.link-fire-r a:focus-visible::after {
  transform: scaleX(1);
}

.link-fire.text-m a::after,
.link-fire-r.text-m a::after {
  bottom: -0.15em;
}

.link-fire a:has(svg)::after,
.link-fire-r a:has(svg)::after {
  display: none;
}


/****
        Missing picture.
        Shown where a Canid has no photo yet:
        light grey box, dark grey wolf, invitation
        to send pictures. Same 16:9 box as photos;
        sizes follow the box (container units).
        Markup: ps_csg_missing_picture() in
        inc/get-shared.php.
 ****/

.missing-picture {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 100%;
  aspect-ratio: 16 / 9;

  overflow: hidden;

  container-type: inline-size;

  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--color-black);
  background: #e2e2e2;
}

/*
 * cq units below resolve against .missing-picture
 * (children only: a container can't size itself).
 * (0,2,0) also beats card rules such as .canid-item img.
 */
.missing-picture > .missing-picture__art {
  display: block;

  width: 42%;
  height: auto;

  aspect-ratio: 148 / 68.5;

  /* The wolf shape (SVG) filled with the current colour. */
  background: currentColor;

  -webkit-mask: var(--missing-art) center / contain no-repeat;
  mask: var(--missing-art) center / contain no-repeat;
}

/* Text always black (never the link's hover colour). */
.missing-picture > .missing-picture__text {
  color: var(--color-black);
}

/* Dark grey wolf; it turns orange on hover when the placeholder is a link. */
.missing-picture > .missing-picture__art {
  color: #333;

  transition: color 180ms ease;
}

a:is(:hover, :focus-visible) .missing-picture > .missing-picture__art,
.canid-navigation__card:hover .missing-picture > .missing-picture__art {
  color: var(--color-s-orange);
}

/* Project / working group pages: no hover effect. */
.pwg-single__canids a:is(:hover, :focus-visible) .missing-picture > .missing-picture__art {
  color: #333;
}

/*
 * Text above and below the wolf, the same gap on both
 * sides (--missing-gap, set per context).
 */
.missing-picture {
  --missing-gap: 5cqi;
}

.missing-picture > .missing-picture__text:first-child {
  margin-top: 0;
  margin-bottom: var(--missing-gap);
}

.missing-picture > .missing-picture__text {
  margin-top: var(--missing-gap);
  padding: 0 6%;

  font-size: clamp(0.45rem, 4cqi, 1.25rem);
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
}

/* Narrow boxes (mobile grid): smaller wolf and text. */
@container (max-width: 240px) {
  .missing-picture > .missing-picture__art {
    width: 34%;
  }

  /* (A container query styles the children, not the box itself.) */
  .missing-picture > .missing-picture__text {
    --missing-gap: 3cqi;

    font-size: 0.42rem;
  }
}

/* Full-height containers (Single Canid hero). */
.missing-picture--cover {
  height: 100%;

  aspect-ratio: auto;
}

.missing-picture--cover > .missing-picture__art {
  width: 26%;
}

.missing-picture--cover {
  --missing-gap: 2.5cqi;
}

.missing-picture--cover > .missing-picture__text {

  font-size: clamp(0.9rem, 1.8cqi, 1.6rem);
}