/*
Theme Name: Paradox-H
Theme URI: https://paradox-h.com
Author: Redeploy
Author URI: https://redeploy.com
Description: A brutalist, lab-notebook style theme for paradox-h -- "a place to break things on purpose." Ships with an Experiments custom post type (status-tagged cards: ACTIVE / PROTOTYPE / ARCHIVED) and editable hero/footer copy via the Customizer. Converted from a static design export.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: paradox-h
*/

/* -----------------------------------------------------------------------
   Reset / base
------------------------------------------------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-display);
}

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

a:hover,
a:focus {
  color: var(--accent-green);
}

img {
  max-width: 100%;
  display: block;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.screen-reader-text {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

/* -----------------------------------------------------------------------
   Page frame
------------------------------------------------------------------------ */

.ph-page {
  width: 100%;
  max-width: var(--page-max-width);
  min-height: 1400px;
  margin: 0 auto;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-display);
  position: relative;
  box-sizing: border-box;
  padding: var(--page-padding);
}

.ph-coord {
  position: absolute;
  top: var(--page-padding);
  left: var(--page-padding);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--greige-4);
}

.ph-location {
  position: absolute;
  top: var(--page-padding);
  right: var(--page-padding);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--greige-4);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  text-align: right;
}

/* -----------------------------------------------------------------------
   Top bar: logo + badges
------------------------------------------------------------------------ */

.ph-topbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 1px solid var(--black);
  padding-bottom: var(--space-5);
  margin-top: var(--space-8);
}

.ph-logo {
  font-size: 20px;
  font-weight: var(--fw-heavy);
  letter-spacing: var(--tracking-tight);
}

.ph-logo a {
  color: inherit;
}

.ph-logo a:hover {
  color: var(--accent-green);
}

.ph-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  font-weight: var(--fw-bold);
}

.ph-tag,
.ph-badge {
  font-size: 12px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.ph-badge {
  color: var(--black);
  background: var(--accent-green);
  padding: 2px 8px;
}

.ph-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}

.ph-nav a {
  font-size: 12px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
}

/* -----------------------------------------------------------------------
   Hero / statement
------------------------------------------------------------------------ */

.ph-hero {
  margin-top: var(--space-10);
  max-width: 1100px;
}

.ph-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--greige-5);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.ph-hero-heading {
  font-size: clamp(40px, 6vw, 88px);
  line-height: var(--lh-tight);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

.ph-hero-text {
  font-size: 18px;
  line-height: var(--lh-base);
  color: var(--greige-5);
  margin-top: var(--space-6);
  max-width: 640px;
}

/* -----------------------------------------------------------------------
   Section header (used above the experiments grid)
------------------------------------------------------------------------ */

.ph-section-header {
  margin-top: var(--space-12);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--black);
  padding-bottom: var(--space-4);
}

.ph-section-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--greige-5);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.ph-section-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--greige-4);
}

/* -----------------------------------------------------------------------
   Experiments grid + card
------------------------------------------------------------------------ */

.ph-grid {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

@media (max-width: 900px) {
  .ph-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .ph-grid {
    grid-template-columns: 1fr;
  }
}

.exp-card {
  border: 1px solid var(--black);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 220px;
  box-sizing: border-box;
  background: var(--white);
}

a.exp-card {
  color: inherit;
}

.exp-card:hover,
.exp-card:focus-within {
  background: var(--black);
}

.exp-card:hover .exp-title,
.exp-card:focus-within .exp-title {
  color: var(--accent-green);
}

.exp-card:hover .exp-meta,
.exp-card:hover .exp-num,
.exp-card:focus-within .exp-meta,
.exp-card:focus-within .exp-num {
  color: var(--greige-2);
}

.exp-status {
  align-self: flex-start;
}

.exp-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--greige-5);
}

.exp-title {
  font-size: 22px;
  font-weight: var(--fw-bold);
}

.exp-meta {
  font-size: 13px;
  color: var(--greige-5);
}

.exp-status-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--greige-4);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  margin-top: auto;
}

.ph-empty-state {
  margin-top: var(--space-6);
  padding: var(--space-8);
  border: 1px dashed var(--greige-4);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--greige-5);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

/* -----------------------------------------------------------------------
   Footer strip
------------------------------------------------------------------------ */

.ph-footer {
  margin-top: var(--space-10);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid var(--black);
  padding-top: var(--space-5);
}

.ph-footer-left {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--greige-4);
}

.ph-footer-right {
  font-size: 12px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
}

/* -----------------------------------------------------------------------
   Single experiment page
------------------------------------------------------------------------ */

.ph-single-header {
  margin-top: var(--space-10);
  max-width: 800px;
}

.ph-single-title {
  font-size: clamp(32px, 5vw, 56px);
  line-height: var(--lh-tight);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--tracking-tight);
  margin: var(--space-3) 0 0;
}

.ph-single-content {
  margin-top: var(--space-6);
  max-width: 700px;
  font-size: 16px;
  line-height: var(--lh-base);
  color: var(--greige-5);
}

.ph-back-link {
  display: inline-block;
  margin-top: var(--space-8);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* -----------------------------------------------------------------------
   Generic page/post content (page.php, single.php fallback)
------------------------------------------------------------------------ */

.ph-basic-content {
  margin-top: var(--space-10);
  max-width: 800px;
  font-size: 16px;
  line-height: var(--lh-base);
}

.ph-basic-content h1,
.ph-basic-content h2,
.ph-basic-content h3 {
  font-weight: var(--fw-heavy);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
}

.ph-basic-content a {
  text-decoration: underline;
}