/*
Theme Name: PRL Newsroom
Theme URI: https://newsroom.prometheusrl.com
Author: Prometheus Research Labs
Description: Block theme for the Prometheus Research Labs newsroom. Design tokens
  are taken verbatim from @prometheus-rl-inc/prl-pds so the newsroom reads as the
  same system as alphaagent.prometheusrl.com. Do not hand-edit colours or radii
  here — change theme.json, which is generated from the PDS token set.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 8.1
Version: 0.2.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: prl-newsroom
Tags: blog, news, block-theme, full-site-editing
*/

/* ---------------------------------------------------------------------------
   Everything structural lives in theme.json. This file carries only what
   theme.json cannot express: hover/active states, pseudo-elements, and the
   PDS interaction physics (lift on hover, compress on press).
   --------------------------------------------------------------------------- */

:root {
  --prl-ease: cubic-bezier(0.2, 0, 0, 1);
  --prl-ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
  --prl-fast: 120ms;
  --prl-base: 200ms;
  --prl-slow: 300ms;
}

/* --- PDS interaction physics ---------------------------------------------
   From prl-pds/dist/style.css: .pds-button and .pds-list-item lift 2px on
   hover and compress to 0.98 on press. Post cards inherit the same feel. */

.wp-block-button__link,
.prl-card {
  transition: all var(--prl-base) var(--prl-ease);
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.wp-block-button__link:hover:not(:disabled),
.prl-card:hover {
  transform: translateY(-2px) translateZ(0);
}

.wp-block-button__link:active:not(:disabled),
.prl-card:active {
  transform: scale(0.98) translateZ(0);
}

/* --- Header: PRL lockup, nothing else ------------------------------------
   PRL_Logo_v1.0-orangewhite-bold from the PDS package — the same variant and
   the same 38px height the marketing header uses, so the two sites read as
   one brand. Ships at 422x114 (3x) to stay crisp on retina. No nav, no CTA
   and no wordmark: the hero H1 says "Newsroom" loudly enough, and repeating
   it in the header only competed with it. --------------------------------- */

.prl-brand {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  line-height: 0;
}

.prl-brand img {
  height: 38px;
  width: auto;
  max-width: 100%;
  display: block;
}

@media (max-width: 600px) {
  .prl-brand img { height: 30px; }
}

/* --- Post card (mirrors PDS BlogCard) ------------------------------------ */

.prl-card {
  height: 100%;
  overflow: hidden;
  border-radius: 15px;
  background: var(--wp--preset--color--prl-charcoal);
  /* PDS: 1px solid ${colors.prlPrimary.base}20 */
  border: 1px solid rgb(243 237 227 / 0.125);
}

.prl-card:hover {
  border-color: rgb(243 237 227 / 0.28);
  box-shadow: 0 8px 12px rgba(20, 18, 13, 0.3);
}

/* PDS BlogCard hero image sits at paddingTop:56% */
.prl-card .wp-block-post-featured-image {
  margin: 0;
}

.prl-card .wp-block-post-featured-image img {
  aspect-ratio: 25 / 14;
  object-fit: cover;
  width: 100%;
  border-radius: 0;
}

/* PDS overlays the image with a dark gradient at 80% alpha */
.prl-card .wp-block-post-featured-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 3 16 / 0.5);
  pointer-events: none;
}

.prl-card .wp-block-post-featured-image {
  position: relative;
}

/* --- Eyebrow / category label -------------------------------------------- */

.prl-eyebrow,
.prl-eyebrow a {
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--wp--preset--color--prl-cream-strong);
  text-decoration: none;
}

.prl-eyebrow a:hover {
  color: var(--wp--preset--color--prl-coral);
}

/* --- Meta line (date • reading time) at 60% opacity, per PDS ------------- */

.prl-meta {
  font-size: 11px;
  color: var(--wp--preset--color--prl-light);
  opacity: 0.6;
}

/* --- Tag pills (PDS: 1px solid cream at 40%, radius pill) ---------------- */

.prl-tags .wp-block-post-terms__separator {
  display: none;
}

.prl-tags a {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--wp--preset--color--prl-cream);
  border: 1px solid rgb(243 237 227 / 0.25);
  border-radius: 500px;
  padding: 5px 12px;
  margin: 0 6px 6px 0;
  text-decoration: none;
  transition: all var(--prl-base) var(--prl-ease);
}

.prl-tags a:hover {
  border-color: var(--wp--preset--color--prl-cream);
  background: rgb(243 237 227 / 0.08);
  color: var(--wp--preset--color--prl-cream);
}

/* --- Category tabs (mirrors PDS CategoryTabs) ----------------------------
   PDS: pill buttons in a prlDark.base container with card radius. Active is
   cream fill on dark text; inactive is transparent with a light 40% border. */

.prl-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  background: var(--wp--preset--color--prl-dark);
  padding: 10px;
  border-radius: 15px;
  margin-bottom: var(--wp--preset--spacing--50);
}

.prl-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  color: var(--wp--preset--color--prl-light);
  background: transparent;
  border: 1px solid rgb(255 253 251 / 0.25);
  border-radius: 500px;
  padding: 9px 16px;
  text-decoration: none;
  transition: all var(--prl-base) var(--prl-ease);
}

.prl-tab:hover {
  border-color: var(--wp--preset--color--prl-cream);
  transform: translateY(-2px);
}

.prl-tab.is-active {
  background: var(--wp--preset--color--prl-cream);
  border-color: var(--wp--preset--color--prl-cream);
  color: var(--wp--preset--color--prl-dark);
}

.prl-tab .count {
  font-size: 14px;
  font-weight: 600;
}

/* --- Article hero (mirrors PDS BlogHero) --------------------------------- */

.prl-hero {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  background: var(--wp--preset--color--prl-charcoal);
}

/* PDS: filter brightness(0.45) on the image */
.prl-hero .wp-block-cover__image-background {
  filter: brightness(0.45);
}

/* PDS: linear-gradient(135deg, #000310dd 0%, #000310aa 60%, transparent 100%) */
.prl-hero .wp-block-cover__background {
  background: linear-gradient(
    135deg,
    rgb(0 3 16 / 0.87) 0%,
    rgb(0 3 16 / 0.67) 60%,
    rgb(0 0 0 / 0) 100%
  ) !important;
}

@media (max-width: 767px) {
  .prl-hero { min-height: 320px; }
}

/* --- Author box ---------------------------------------------------------- */

.prl-authorbox {
  border-radius: 15px;
  background: var(--wp--preset--color--prl-charcoal);
  border: 1px solid rgb(243 237 227 / 0.125);
}

.prl-authorbox .wp-block-avatar img {
  border-radius: 500px;
}

/* --- Footer legal line ----------------------------------------------------
   Capped so the trademark and registered-address text wraps to a readable
   column instead of running the full 1200px and colliding with the links. -- */

.prl-footer-legal {
  margin: 0;
  max-width: 62ch;
}

/* --- Skip link ----------------------------------------------------------- */

.skip-link:focus {
  background: var(--wp--preset--color--prl-cream);
  color: var(--wp--preset--color--prl-dark);
  padding: 12px 20px;
  border-radius: 8px;
  z-index: 9999;
}

/* --- Focus visibility: cream ring, never removed ------------------------- */

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--wp--preset--color--prl-cream);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Respect reduced motion ---------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .prl-card:hover,
  .wp-block-button__link:hover:not(:disabled) {
    transform: none;
  }
}