/*
Theme Name: Preparedness Economy
Theme URI: https://preparedness-economy.com
Author: Arunte Financial
Author URI: https://arunte.tech
Description: Editorial / institutional WordPress theme for Preparedness Economy, built directly from Brand Guidelines v1.0 (Archivo / IBM Plex Sans / IBM Plex Mono; Ink, Signal Orange, Graphite Blue, Paper; seven capability colours; square corners, no shadows).
Version: 1.0.0
Requires at least: 6.2
Requires PHP: 7.4
Text Domain: prepecon
*/

/* ==========================================================================
   1. DESIGN TOKENS (from Brand Guidelines v1.0)
   ========================================================================== */
:root{
  /* core palette */
  --pe-ink:        #0E1116;
  --pe-orange:     #C9631E; /* signal orange — accent, max 10% of layout except openers/panels */
  --pe-graphite:   #2C3944;
  --pe-paper:      #F2F3F0;

  /* chart / comparison greys */
  --pe-grey-1:     #E0E1DC;
  --pe-grey-2:     #C8CCC7;
  --pe-grey-3:     #8E948C;

  /* seven capability colours, in fixed order */
  --pe-cap-01:     #A9762A; /* Energy & Power — ochre */
  --pe-cap-02:     #6E7A4A; /* Resources & Basic Security — olive */
  --pe-cap-03:     #5B6570; /* Critical Infrastructure — steel */
  --pe-cap-04:     #3D6E9E; /* Security & Defence — signal blue */
  --pe-cap-05:     #4E8C7D; /* Health Preparedness — teal */
  --pe-cap-06:     #1F2A33; /* Connectivity & Digital Continuity — deep navy */
  --pe-cap-07:     #C9631E; /* Supply, Logistics & Response — orange (= shock line) */

  /* type */
  --pe-font-display: 'Archivo', sans-serif;
  --pe-font-body:    'IBM Plex Sans', sans-serif;
  --pe-font-mono:    'IBM Plex Mono', monospace;

  /* layout */
  --pe-max-width: 1440px;
  --pe-unit: 8px;
  --pe-gutter: calc(var(--pe-unit) * 3);
}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
*, *::before, *::after{ box-sizing:border-box; border-radius:0 !important; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--pe-paper);
  color:var(--pe-ink);
  font-family:var(--pe-font-body);
  font-weight:300;
  font-size:16px;
  line-height:1.65;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
a:hover{ color:var(--pe-orange); }
button, input, textarea, select{ font-family:inherit; border-radius:0; }
ul{ margin:0; padding:0; list-style:none; }
hr{ border:none; border-top:2px solid var(--pe-ink); margin:0; }

.pe-container{
  max-width:var(--pe-max-width);
  margin:0 auto;
  padding:0 var(--pe-gutter);
}
.pe-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--pe-gutter);
}
@media (max-width:900px){
  .pe-grid{ grid-template-columns:repeat(4,1fr); }
}

/* site frame: keeps the whole layout off the browser edge, so full-bleed
   sections (ink, orange) stop short of the viewport instead of running
   edge to edge. Adjust --pe-page-margin to taste. */
:root{ --pe-page-margin:clamp(14px, 3vw, 40px); }
.pe-page{ padding:0 var(--pe-page-margin); }
body{ background:var(--pe-paper); }

/* no rounded corners, no shadows anywhere */
img, .pe-card, .pe-btn, .pe-tag, input, textarea{ box-shadow:none !important; }

/* ==========================================================================
   3. TYPOGRAPHY SCALE
   ========================================================================== */
h1,h2,h3,h4,h5,h6{ font-family:var(--pe-font-display); margin:0 0 var(--pe-unit); font-weight:500; }

.pe-display{ font-family:var(--pe-font-display); font-weight:600; font-size:44px; line-height:48px; letter-spacing:-0.03em; }
@media (max-width:640px){ .pe-display{ font-size:32px; line-height:36px; } }

.pe-title{ font-family:var(--pe-font-display); font-weight:500; font-size:26px; line-height:32px; letter-spacing:-0.02em; }

.pe-lead{ font-family:var(--pe-font-body); font-weight:300; font-size:17px; line-height:26px; }

.pe-label{
  font-family:var(--pe-font-mono);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.1em;
}

.pe-mono{ font-family:var(--pe-font-mono); }

/* ==========================================================================
   4. LOGO / WORDMARK
   ========================================================================== */
.pe-logo{ display:flex; align-items:center; gap:12px; }
.pe-logo__mark{ width:32px; height:32px; flex:0 0 auto; }
.pe-logo__wordmark{ font-family:var(--pe-font-display); line-height:1; }
.pe-logo__wordmark strong{ display:block; font-weight:600; font-size:15px; letter-spacing:-0.02em; }
.pe-logo__wordmark span{ display:block; font-weight:400; font-size:15px; letter-spacing:-0.02em; }

/* custom logo, uploaded via Customize → Site Identity */
.pe-logo--custom{ display:flex; align-items:center; }
.pe-logo--custom img{ max-height:56px; width:auto; display:block; }
.pe-logo--custom .custom-logo-link{ display:block; }

/* signature bar: seven equal segments, fixed order, 2px gap, once per page */
.pe-signature-bar{ display:flex; gap:2px; width:100%; height:8px; }
.pe-signature-bar span{ flex:1 1 0; }
.pe-signature-bar span:nth-child(1){ background:var(--pe-cap-01); }
.pe-signature-bar span:nth-child(2){ background:var(--pe-cap-02); }
.pe-signature-bar span:nth-child(3){ background:var(--pe-cap-03); }
.pe-signature-bar span:nth-child(4){ background:var(--pe-cap-04); }
.pe-signature-bar span:nth-child(5){ background:var(--pe-cap-05); }
.pe-signature-bar span:nth-child(6){ background:var(--pe-cap-06); }
.pe-signature-bar span:nth-child(7){ background:var(--pe-cap-07); }

/* ==========================================================================
   5. HEADER / NAV
   ========================================================================== */
.pe-header{ background:var(--pe-paper); border-bottom:2px solid var(--pe-ink); }
.pe-header__inner{ display:flex; align-items:center; justify-content:space-between; padding:var(--pe-unit) 0; min-height:72px; }
.pe-nav ul{ display:flex; gap:calc(var(--pe-unit)*3); }
.pe-nav a{ font-family:var(--pe-font-mono); font-size:12px; text-transform:uppercase; letter-spacing:0.1em; }
.pe-nav a.current{ color:var(--pe-orange); }
.pe-nav-toggle{ display:none; background:none; border:1px solid var(--pe-ink); padding:8px 12px; font-family:var(--pe-font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
@media (max-width:900px){
  .pe-nav{ display:none; width:100%; }
  .pe-nav.is-open{ display:block; }
  .pe-nav ul{ flex-direction:column; gap:var(--pe-unit); padding:var(--pe-unit) 0; }
  .pe-nav-toggle{ display:inline-block; }
  .pe-header__inner{ flex-wrap:wrap; }
}

/* ==========================================================================
   6. BUTTONS / TAGS / CARDS
   ========================================================================== */
.pe-btn{
  display:inline-block;
  font-family:var(--pe-font-mono);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  padding:12px 20px;
  border:1px solid var(--pe-ink);
  background:transparent;
  cursor:pointer;
}
.pe-btn:hover{ background:var(--pe-ink); color:var(--pe-paper); }
.pe-btn--solid{ background:var(--pe-ink); color:var(--pe-paper); }
.pe-btn--solid:hover{ background:var(--pe-orange); color:var(--pe-ink); }
.pe-btn--orange{ background:var(--pe-orange); color:var(--pe-ink); border-color:var(--pe-orange); }

.pe-tag{
  display:inline-block;
  font-family:var(--pe-font-mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  padding:4px 8px;
  color:#fff;
}

.pe-card{ border:1px solid var(--pe-grey-2); padding:calc(var(--pe-unit)*3); background:#fff; }
.pe-card--ink{ background:var(--pe-ink); color:var(--pe-paper); border-color:var(--pe-ink); }
.pe-card--orange{ background:var(--pe-orange); color:var(--pe-ink); border-color:var(--pe-orange); }

/* ==========================================================================
   7. SECTIONS
   ========================================================================== */
.pe-section{ padding:calc(var(--pe-unit)*8) 0; }
.pe-section--ink{ background:var(--pe-ink); color:var(--pe-paper); }
.pe-section--tight{ padding:calc(var(--pe-unit)*4) 0; }

/* hero carousel: 3 selected Insight articles, full-bleed photo with a dark
   scrim over roughly the left half, title/summary/button overlaid on top. */
.pe-hero{ position:relative; }
.pe-hero--photo{
  /* breaks out of the .pe-page side margins so the photo runs edge to edge,
     like the rest of the site keeps its frame. */
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

.pe-hero-carousel.is-fullbleed{ position:relative; overflow:hidden; }
.pe-hero-carousel.is-fullbleed .pe-hero-carousel__track{
  display:flex;
  width:calc(100% * var(--pe-slides,1));
  transition:transform .7s cubic-bezier(.65,0,.35,1);
}
.pe-hero-carousel.is-fullbleed.is-single .pe-hero-carousel__track{ transition:none; }

.pe-hero-slide{
  position:relative;
  flex:0 0 calc(100% / var(--pe-slides,1));
  max-width:calc(100% / var(--pe-slides,1));
  min-height:640px;
  display:flex;
  align-items:center;
  background:var(--pe-ink);
  overflow:hidden;
}
@media (max-width:900px){ .pe-hero-slide{ min-height:560px; } }
@media (max-width:640px){ .pe-hero-slide{ min-height:480px; } }

.pe-hero-slide__media{ position:absolute; inset:0; }
.pe-hero-slide__media img{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* dark scrim, strongest on the left where the text sits, clearing toward the right */
.pe-hero-slide__scrim{
  position:absolute; inset:0;
  background:linear-gradient(90deg,
    rgba(14,17,22,.92) 0%,
    rgba(14,17,22,.80) 28%,
    rgba(14,17,22,.35) 52%,
    rgba(14,17,22,0) 68%);
}

.pe-hero-slide__content{
  position:relative;
  z-index:1;
  padding-top:calc(var(--pe-unit)*6);
  padding-bottom:calc(var(--pe-unit)*10);
  color:var(--pe-paper);
}
.pe-hero-slide__content .pe-tag{ margin-bottom:var(--pe-unit); }
.pe-hero-slide__title{
  font-family:var(--pe-font-display);
  font-weight:600;
  font-size:44px;
  line-height:48px;
  letter-spacing:-0.03em;
  max-width:640px;
  margin:8px 0 0;
}
.pe-hero-slide__title a{ color:var(--pe-paper); }
.pe-hero-slide__title a:hover{ color:var(--pe-orange); }
@media (max-width:640px){ .pe-hero-slide__title{ font-size:30px; line-height:34px; } }

.pe-hero-slide__summary{
  font-family:var(--pe-font-body); font-weight:300; font-size:17px; line-height:26px;
  max-width:520px; margin-top:16px; color:var(--pe-paper); opacity:.92;
}
.pe-hero-slide__cta{ margin-top:calc(var(--pe-unit)*3); border-color:var(--pe-paper); }

.pe-hero-carousel__controls--overlay{
  position:absolute; left:0; right:0; bottom:calc(var(--pe-unit)*3);
  display:flex; align-items:center; justify-content:space-between;
  z-index:2; pointer-events:none;
}
.pe-hero-carousel__controls--overlay > *{ pointer-events:auto; }
.pe-hero-carousel__dots{ display:flex; gap:10px; }
.pe-hero-carousel__dot{
  width:8px; height:8px; border:1px solid var(--pe-paper); background:transparent; padding:0; cursor:pointer;
}
.pe-hero-carousel__dot.is-active{ background:var(--pe-orange); border-color:var(--pe-orange); }
.pe-hero-carousel__arrows{ display:flex; gap:8px; }
.pe-hero-carousel__arrow{
  background:transparent; border:1px solid var(--pe-paper); color:var(--pe-paper);
  width:36px; height:36px; font-family:var(--pe-font-mono); cursor:pointer; line-height:1;
}
.pe-hero-carousel__arrow:hover{ background:var(--pe-orange); border-color:var(--pe-orange); color:var(--pe-ink); }

/* explainer / audience tiles */
.pe-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--pe-ink); }
@media (max-width:768px){ .pe-tiles{ grid-template-columns:1fr; } }
.pe-tile{ background:var(--pe-paper); padding:calc(var(--pe-unit)*5); min-height:220px; display:flex; flex-direction:column; justify-content:space-between; }
.pe-tile:hover{ background:var(--pe-ink); color:var(--pe-paper); }
.pe-tile:hover a.pe-btn{ border-color:var(--pe-paper); }
.pe-tile:hover a.pe-btn:hover{ background:var(--pe-orange); color:var(--pe-ink); border-color:var(--pe-orange); }

/* newsletter */
.pe-newsletter form{ display:flex; gap:var(--pe-unit); max-width:520px; margin-top:var(--pe-unit); flex-wrap:wrap; }
.pe-newsletter input[type=email]{ flex:1 1 260px; padding:12px; border:1px solid var(--pe-ink); background:transparent; color:inherit; font-family:var(--pe-font-body); }
.pe-newsletter--ink input[type=email]{ border-color:var(--pe-paper); color:var(--pe-paper); }
.pe-newsletter small{ display:block; margin-top:var(--pe-unit); opacity:.7; font-family:var(--pe-font-mono); font-size:11px; }

/* capability grid (about page, library filters) */
.pe-cap-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--pe-ink); }
@media (max-width:900px){ .pe-cap-grid{ grid-template-columns:repeat(2,1fr); } }
.pe-cap-grid__item{ background:var(--pe-paper); padding:calc(var(--pe-unit)*3); min-height:140px; }
.pe-cap-grid__item .pe-label{ display:block; margin-bottom:6px; }
.pe-cap-grid__swatch{ width:20px; height:20px; margin-bottom:var(--pe-unit); }

/* insight archive / index */
.pe-post-list{ display:grid; grid-template-columns:1fr; gap:0; border-top:2px solid var(--pe-ink); }
.pe-post-row{ display:grid; grid-template-columns:120px 1fr 160px; gap:var(--pe-gutter); padding:calc(var(--pe-unit)*3) 0; border-bottom:1px solid var(--pe-grey-2); align-items:baseline; }
@media (max-width:768px){ .pe-post-row{ grid-template-columns:1fr; gap:6px; } }
.pe-post-row__date{ font-family:var(--pe-font-mono); font-size:12px; }
.pe-post-row__title{ font-family:var(--pe-font-display); font-size:20px; }

/* library grid */
.pe-library-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--pe-gutter); }
@media (max-width:900px){ .pe-library-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .pe-library-grid{ grid-template-columns:1fr; } }
.pe-library-item{ border:1px solid var(--pe-grey-2); padding:var(--pe-unit)*2; padding:calc(var(--pe-unit)*2); display:flex; flex-direction:column; gap:var(--pe-unit); }
.pe-library-item__meta{ display:flex; gap:var(--pe-unit); align-items:center; }

/* footer */
.pe-footer{ background:var(--pe-ink); color:var(--pe-paper); padding-top:calc(var(--pe-unit)*5); }
.pe-footer__inner{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--pe-gutter); padding-bottom:calc(var(--pe-unit)*4); }
@media (max-width:768px){ .pe-footer__inner{ grid-template-columns:1fr; } }
.pe-footer a:hover{ color:var(--pe-orange); }
.pe-footer__disclaimer{ font-family:var(--pe-font-mono); font-size:11px; letter-spacing:.02em; opacity:.6; max-width:760px; padding:calc(var(--pe-unit)*3) 0; }
.pe-footer__bottom{ border-top:1px solid rgba(242,243,240,.2); padding:var(--pe-unit) 0 calc(var(--pe-unit)*3); font-family:var(--pe-font-mono); font-size:11px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--pe-unit); }

/* single post */
.pe-article-header{ border-bottom:2px solid var(--pe-ink); padding-bottom:calc(var(--pe-unit)*3); margin-bottom:calc(var(--pe-unit)*3); }
.pe-article-tags{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:var(--pe-unit); }
.pe-article-content{ max-width:760px; }
.pe-article-content p{ margin:0 0 1.2em; }
.pe-article-content h2,.pe-article-content h3{ margin-top:1.6em; }
.pe-article-content blockquote{ border-left:2px solid var(--pe-orange); padding-left:var(--pe-unit)*2; padding-left:calc(var(--pe-unit)*2); font-style:normal; color:var(--pe-graphite); }
.pe-article-content figure{ margin:0 0 1.5em; }

/* photography rule: no rounded corners / no filters applied by CSS */
.wp-block-image img, .pe-article-content img{ filter:none; }