/*
Theme Name: Unrestricted Humans
Theme URI: https://www.unrestricted-humans.com
Author: Unrestricted Humans
Description: The Unrestricted Humans brand system for WordPress — fonts, colors, and reusable component styles (buttons, cards, dividers, readouts, framework steps) with no page content built in. White and black lettering are dominant; blue and green are available as accents and full-fill section backgrounds. Build pages with the block editor or your own templates and this theme supplies the look.
Version: 2.3.2
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: unrestricted-humans
*/

/* ==========================================================================
   TOKENS
   ========================================================================== */

:root{
  --black:      #333333; /* UH black — full-fill sections further down the page, lettering */
  --white:      #FFFFFF; /* UH white — page background, the top of the page, cards */
  --blue:       #0A7FB2; /* UH blue — full-fill sections further down, links, borders, nav accents */
  --blue-deep:  #086790; /* blue, one step darker — hover state only */
  --green:      #749931; /* UH green — buttons and small accent details, never a full section */
  --green-deep: #61801F; /* green, one step darker — hover state only */

  --ink:        #333333; /* default text — dark unless on a black or blue section */
  --ink-soft:   rgba(0,0,0,0.68);
  --on-dark:    #FFFFFF; /* text on black or blue sections */
  --on-dark-soft: rgba(255,255,255,0.75);

  --paper:      #FFFFFF;
  --paper-white:#FFFFFF;

  --line:         rgba(0,0,0,0.14);
  --line-on-dark: rgba(255,255,255,0.24);

  /* Unified on Lato site-wide (the header wordmark is the one exception —
     it's set directly to Arvo). These three variables are kept separate so
     the rest of the stylesheet's per-element rules don't need to change,
     but they now all resolve to the same family. */
  --font-display: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --container: 1440px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 2px;
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
button{ font-family: inherit; cursor: pointer; }

h1, h2, h3, h4{
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
  color: var(--ink);
}
h1{ font-size: clamp(2.6rem, 2rem + 3vw, 4.6rem); }
h2{ font-size: clamp(2rem, 1.6rem + 2vw, 3.1rem); }
h3{ font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.7rem); }

em, i{ font-style: italic; color: var(--green); }
/* On a blue full-fill section, green loses contrast — emphasis switches to white with a green underline */
.on-blue em, .on-blue i,
.framework em, .framework i{ color: var(--white); text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 2px; text-underline-offset: 3px; }

p{ margin: 0 0 1.1em; }

.container{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

.screen-reader-text{
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px,1px,1px,1px); white-space: nowrap; border: 0;
}
.skip-link{
  position: absolute; left: -999px; top: 0; z-index: 999;
  background: var(--green); color: var(--black); padding: .75em 1.25em;
}
.skip-link:focus{ left: 1rem; top: 1rem; }

/* Eyebrow / label — small accent detail, blue on white, white on black/blue */
.eyebrow{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: 1em;
}
.eyebrow::before{
  content: "";
  width: 0.55em; height: 0.55em;
  border: 1px solid var(--blue);
  border-radius: 50%;
  display: inline-block;
}
.on-dark .eyebrow, .on-blue .eyebrow, .framework .eyebrow, .final-cta .eyebrow{ color: var(--green); }
.on-dark .eyebrow::before, .on-blue .eyebrow::before, .framework .eyebrow::before, .final-cta .eyebrow::before{ border-color: var(--green); }

/* Buttons */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.95em 1.6em;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
/* Primary action — always UH green, on any background */
.btn-green{
  background: var(--green);
  border-color: var(--green);
  color: var(--black);
}
.btn-green:hover{ background: var(--green-deep); border-color: var(--green-deep); transform: translateY(-1px); }

/* Secondary button on white sections — blue outline */
.btn-ghost{
  background: transparent;
  color: var(--blue);
  border-color: var(--blue);
}
.btn-ghost:hover{ background: var(--blue); color: var(--white); }

/* Secondary button on black or blue full-fill sections — white outline */
.on-dark .btn-ghost, .on-blue .btn-ghost, .framework .btn-ghost, .final-cta .btn-ghost{
  color: var(--white);
  border-color: var(--line-on-dark);
}
.on-dark .btn-ghost:hover, .on-blue .btn-ghost:hover, .framework .btn-ghost:hover, .final-cta .btn-ghost:hover{
  background: var(--green); border-color: var(--green); color: var(--black);
}
.btn-arrow::after{ content: "→"; font-family: var(--font-body); }

/* ==========================================================================
   HORIZON DIVIDER — signature element, thin accent line at section seams
   ========================================================================== */

.horizon{ position: relative; height: 1px; background: var(--line); }
.horizon::after{
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 8px; height: 8px;
  background: var(--white);
  border: 1.5px solid var(--blue);
  border-radius: 50%;
  transform: translate(-50%,-50%);
}

/* ==========================================================================
   SITE HEADER — white, black lettering, blue accents (matches the live site)
   ========================================================================== */

.site-header{
  position: sticky; top: 0; z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.site-header .container{
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 0.65rem;
}
.site-branding{ margin: 0; font-size: 1.35rem; color: var(--black); letter-spacing: 0.01em; }
.site-branding a{ display: flex; align-items: center; gap: 0.6em; }
/* Cap the uploaded logo's rendered height — the theme's flex-height custom-logo
   support otherwise lets an oversized image stretch the whole header taller. */
.site-branding img{ max-height: 40px; width: auto; }
/* Wordmark sits to the right of the logo/mark, sized off the same 1.35rem
   scale the branding block already uses so it reads proportionate to the logo. */
.site-branding .brand-name{ font-family: "Arvo", Georgia, "Times New Roman", serif; font-size: 1em; }
.site-branding .mark{ width: 1.6rem; height: 1.6rem; border: 1.5px solid var(--blue); border-radius: 50%; position: relative; flex: none; }
.site-branding .mark::before{
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 60%; height: 1.5px; background: var(--blue);
  transform: translate(-50%,-50%) rotate(-18deg);
}

.primary-nav ul{ display: flex; gap: 2rem; align-items: center; }
.primary-nav a{
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--black); transition: color .15s ease; padding: 0.4em 0; border-bottom: 1px solid transparent;
}
.primary-nav a:hover, .primary-nav a:focus-visible{ color: var(--blue); border-color: var(--blue); }
.primary-nav .current-menu-item > a{ color: var(--blue); border-color: var(--blue); }

.nav-toggle{
  display: none; background: none; border: 1px solid var(--line);
  color: var(--black); padding: 0.5em 0.8em;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em;
}

@media (max-width: 860px){
  .nav-toggle{ display: inline-flex; }
  .primary-nav{ position: absolute; inset: 100% 0 auto 0; background: var(--white); border-bottom: 1px solid var(--line); display: none; }
  .primary-nav.is-open{ display: block; }
  .primary-nav ul{ flex-direction: column; align-items: flex-start; gap: 0; padding: 0.5rem var(--gutter) 1.5rem; }
  .primary-nav li{ width: 100%; }
  .primary-nav a{ display: block; padding: 0.85em 0; border-bottom: 1px solid var(--line); }
}

/* ==========================================================================
   HERO — white with black lettering, matching the live homepage.
   Blue/green are accents only here, never a fill.
   ========================================================================== */

.hero{
  background: var(--white);
  color: var(--black);
  padding-block: clamp(3.5rem, 6vw, 6.5rem) clamp(3rem, 5vw, 5rem);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero::before{
  content: "";
  position: absolute; left: 50%; bottom: -55%;
  width: 140%; aspect-ratio: 1; transform: translateX(-50%);
  border-radius: 50%;
  border: 1px solid rgba(10,127,178,0.14);
  pointer-events: none;
}
.hero .container{ position: relative; display: grid; gap: 2.5rem; grid-template-columns: 1.15fr 0.85fr; align-items: end; }
.hero h1{ color: var(--black); max-width: 16ch; }
.hero .lede{ font-size: 1.15rem; color: var(--ink-soft); max-width: 46ch; }
.hero .meta-line{
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.03em;
  color: var(--blue); border-top: 1px solid var(--line);
  padding-top: 1.1rem; margin-top: 1.6rem; max-width: 46ch;
}
.hero-actions{ display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

/* Quote card — a small black full-fill block, the one accent moment inside an otherwise white hero */
.hero-quote{
  background: var(--black);
  border-left: 3px solid var(--green);
  padding: 1.8rem 1.9rem;
}
.hero-quote p{ font-family: var(--font-display); font-size: 1.3rem; font-style: italic; color: var(--white); margin-bottom: 0.9rem; }
.hero-quote cite{ font-family: var(--font-mono); font-style: normal; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-dark-soft); }

@media (max-width: 900px){ .hero .container{ grid-template-columns: 1fr; align-items: start; } }

/* ==========================================================================
   INSTRUMENT READOUTS (stats) — UH black, full fill
   ========================================================================== */

.readouts{ background: var(--black); padding-bottom: clamp(3rem, 5vw, 5rem); }
.readouts .container{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-on-dark); border: 1px solid var(--line-on-dark); }
.readout{ background: var(--black); padding: 2rem 1.5rem; text-align: center; }
.readout .dial{
  width: 4.5rem; height: 4.5rem; margin: 0 auto 1rem; border-radius: 50%;
  border: 1px solid rgba(116,153,49,0.55); display: flex; align-items: center; justify-content: center; position: relative;
}
.readout .dial::before{ content: ""; position: absolute; top: -1px; left: 50%; width: 1px; height: 8px; background: var(--green); transform-origin: bottom center; }
.readout:nth-child(1) .dial::before{ transform: translateX(-50%) rotate(35deg); }
.readout:nth-child(2) .dial::before{ transform: translateX(-50%) rotate(160deg); }
.readout:nth-child(3) .dial::before{ transform: translateX(-50%) rotate(-70deg); }
.readout .value{ font-family: var(--font-mono); font-size: 1.05rem; color: var(--green); }
.readout .label{ font-size: 0.85rem; color: var(--on-dark-soft); margin-top: 0.6rem; }

@media (max-width: 700px){ .readouts .container{ grid-template-columns: 1fr; } }

/* ==========================================================================
   TICKER — UH green, full-width accent strip, dark text
   ========================================================================== */

.ticker{ background: var(--green); color: var(--black); overflow: hidden; white-space: nowrap; padding-block: 0.75rem; }
.ticker-track{ display: inline-flex; gap: 3rem; animation: ticker 32s linear infinite; font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
.ticker-track span{ display: inline-flex; align-items: center; gap: 3rem; }
.ticker-track .sep{ opacity: 0.55; }
@keyframes ticker{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .ticker-track{ animation: none; overflow-x: auto; } }

/* ==========================================================================
   SECTION SCAFFOLDING
   ========================================================================== */

.section{ padding-block: clamp(3.5rem, 6vw, 6rem); }
.section-head{ max-width: 60ch; margin-bottom: 3rem; }
.section-head h2{ margin-bottom: 0.6rem; }
.section-head .lede{ color: var(--ink-soft); font-size: 1.05rem; }

.section.on-dark, .section.on-blue{ color: var(--white); }
.section.on-dark{ background: var(--black); }
.section.on-blue{ background: var(--blue); }
.section.on-dark h2, .section.on-blue h2{ color: var(--white); }
.section.on-dark .section-head .lede, .section.on-blue .section-head .lede{ color: var(--on-dark-soft); }

/* ==========================================================================
   PAIN POINTS (Sound familiar) — UH black, full fill
   ========================================================================== */

.pain-list{ display: grid; gap: 0; border-top: 1px solid var(--line-on-dark); }
.pain-list li{
  padding: 1.3rem 0; border-bottom: 1px solid var(--line-on-dark);
  display: flex; gap: 1.2rem; align-items: baseline;
  font-family: var(--font-display); font-size: 1.25rem; color: var(--white);
}
.pain-list li::before{ content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; border: 1px solid var(--green); margin-top: 0.4em; }

/* ==========================================================================
   PILLAR CARDS — white, blue top border, green number
   ========================================================================== */

.pillars{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.pillar{ background: var(--white); padding: 2.2rem; border-top: 2px solid var(--blue); }
.pillar .num{ font-family: var(--font-mono); font-size: 0.78rem; color: var(--green); display: block; margin-bottom: 0.9rem; }
.pillar h3{ margin-bottom: 0.5rem; }
.pillar p{ color: var(--ink-soft); margin-bottom: 0; font-size: 0.98rem; }

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

/* ==========================================================================
   SERVICE CARDS — white, blue top border, green meta
   ========================================================================== */

.services{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.service{ background: var(--white); border: 1px solid var(--line); border-top: 2px solid var(--blue); padding: 2.2rem 1.8rem; display: flex; flex-direction: column; }
.service .eyebrow{ margin-bottom: 1.4rem; }
.service h3{ margin-bottom: 0.7rem; }
.service p{ color: var(--ink-soft); flex-grow: 1; }
.service .meta{ font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--green); border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 1rem; }

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

/* ==========================================================================
   FRAMEWORK STEPS — UH blue, full fill (a second brand-defining moment,
   deliberately not at the top of the page). Real 3-step sequence.
   ========================================================================== */

.framework{ background: var(--blue); color: var(--white); }
.framework-steps{ display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-on-dark); }
.framework-step{ padding: 2.4rem 2rem; border-right: 1px solid var(--line-on-dark); position: relative; }
.framework-step:last-child{ border-right: none; }
.framework-step .num{ font-family: var(--font-display); font-style: italic; font-size: 2.4rem; color: var(--white); display: block; margin-bottom: 1rem; }
.framework-step h3{ color: var(--white); }
.framework-step p{ color: rgba(255,255,255,0.85); margin-bottom: 0; font-size: 0.98rem; }
.framework-cta{ margin-top: 2.5rem; }

@media (max-width: 760px){
  .framework-steps{ grid-template-columns: 1fr; }
  .framework-step{ border-right: none; border-bottom: 1px solid var(--line-on-dark); }
}

/* ==========================================================================
   CASE STUDIES — white, hover to UH blue fill
   ========================================================================== */

.case-studies{ display: flex; flex-wrap: wrap; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.case-study{
  flex: 1 1 180px; background: var(--white); padding: 1.6rem 1.4rem;
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.03em; color: var(--black);
  display: flex; align-items: center; justify-content: space-between; gap: 0.8em;
  transition: background .15s ease, color .15s ease;
}
.case-study:hover{ background: var(--blue); color: var(--white); }
.case-study .go{ color: var(--green); }
.case-study:hover .go{ color: var(--white); }

/* ==========================================================================
   TESTIMONIALS — white, green citation
   ========================================================================== */

.testimonials{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.testimonial{ background: var(--white); padding: 1.8rem 1.5rem; }
.testimonial p{ font-family: var(--font-display); font-size: 1.05rem; font-style: italic; margin-bottom: 0.9rem; color: var(--black); }
.testimonial cite{ font-style: normal; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--green); }

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

/* ==========================================================================
   ABOUT / FOUNDERS — white, blue blockquote marker, green role labels
   ========================================================================== */

.about-intro{ max-width: 62ch; }
.about-intro blockquote{ font-family: var(--font-display); font-style: italic; font-size: 1.4rem; color: var(--black); border-left: 2px solid var(--blue); padding-left: 1.2rem; margin: 1.6rem 0; }
.founders{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem; margin-top: 3rem; }
.founder{ display: grid; grid-template-columns: 96px 1fr; gap: 1.2rem; align-items: start; }
.founder img{ border-radius: 50%; width: 96px; height: 96px; object-fit: cover; border: 1px solid var(--line); }
.founder h3{ margin-bottom: 0.15rem; font-size: 1.2rem; }
.founder .role{ font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--green); display: block; margin-bottom: 0.6rem; }
.founder p{ color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 0; }

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

/* ==========================================================================
   FINAL CTA — UH black, full fill, closing moment
   ========================================================================== */

.final-cta{ background: var(--black); color: var(--white); text-align: center; }
.final-cta h2{ color: var(--white); max-width: 24ch; margin-inline: auto; }
.final-cta-actions{ display: flex; justify-content: center; gap: 1.2rem; flex-wrap: wrap; margin-top: 2.2rem; }

/* ==========================================================================
   FOOTER — UH black, full fill
   ========================================================================== */

.site-footer{ background: var(--black); color: var(--on-dark-soft); padding-block: 2.5rem; font-family: var(--font-body); }
.site-footer .container{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.02em; }
.footer-links{ display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer-links a{ color: var(--on-dark-soft); border-bottom: 1px solid transparent; }
.footer-links a:hover{ color: var(--green); border-color: var(--green); }

/* ==========================================================================
   GENERIC PAGE / SINGLE POST (Blog, Policies, etc.) — white top, black lettering
   ========================================================================== */

.page-hero{ background: var(--white); color: var(--black); padding-block: 3.5rem 3rem; border-bottom: 1px solid var(--line); }
.page-hero h1{ color: var(--black); margin-bottom: 0; }
.page-hero .eyebrow{ color: var(--blue); }
.page-hero .eyebrow::before{ border-color: var(--blue); }
.content-area{ padding-block: clamp(2.5rem, 5vw, 4rem); }
/* Page/post frame widened so content fills a real majority of the viewport
   on laptop-size screens instead of sitting in a narrow center column.
   .entry-wrap keeps the actual reading content (image, text, pagination)
   comfortably wide, centered within the site's normal 1440px container. */
.entry-wrap{ max-width: 1040px; margin-inline: auto; }
.entry-content h2{ margin-top: 1.6em; }
.entry-content h3{ margin-top: 1.4em; }
.entry-content a{ color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.entry-content img{ margin-block: 1.5rem; }
.entry-meta{ font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--green); margin-bottom: 1rem; }

.post-list{ display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); max-width: 1040px; margin-inline: auto; }
.post-list article{ background: var(--white); padding: 1.8rem; }
.post-list h2{ font-size: 1.5rem; margin-bottom: 0.4rem; }
.post-list h2 a:hover{ color: var(--blue); }
.post-list .entry-summary{ color: var(--ink-soft); }

.pagination{ display: flex; justify-content: space-between; margin-top: 2.5rem; font-family: var(--font-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; max-width: 1040px; margin-inline: auto; }
.pagination a{ border-bottom: 1px solid var(--green); }

.error-404{ text-align: center; padding-block: 6rem; }