/*
Theme Name:   UmbraCore
Theme URI:    https://umbracore.net
Author:       Dennis Cary / UmbraCore
Description:  House theme for UmbraCore — Technologies, Infrastructure & SHTF Solutions. Dark loam, brass and moss; self-hosted fonts; no external calls. Content lives in the block editor, layout lives here.
Version:      1.0.0
Requires at least: 6.4
Requires PHP: 8.1
License:      GPL-2.0-or-later
Text Domain:  umbracore
*/

/* ==========================================================================
   HOW THIS FILE IS ORGANIZED (read me when you want to change the look)
   1. Fonts       – self-hosted in assets/fonts (no Google calls)
   2. Tokens      – every color/size lives here as a CSS variable. Change a
                    color once in :root and the whole site follows.
   3. Base        – body, links, headings, text
   4. Header/nav  – top bar, dropdowns, mobile menu
   5. Content     – page width, alignwide/alignfull, blocks
   6. Components  – hero, project rows, field notes, career strata, schematic
   7. Footer
   8. Utilities / accessibility
   Quick tweaks without touching this file: Appearance → Customize →
   Additional CSS (it loads after this file and wins).
   ========================================================================== */

/* 1. Fonts ---------------------------------------------------------------- */
@font-face{font-family:"Saira Stencil One";src:url(assets/fonts/saira-stencil-one-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(assets/fonts/barlow-condensed-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(assets/fonts/barlow-condensed-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(assets/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(assets/fonts/ibm-plex-sans-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(assets/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}

/* 2. Tokens --------------------------------------------------------------- */
:root{
  /* palette: dug out of the ground, not out of a SaaS kit */
  --uc-loam:#1C1915;   /* page background */
  --uc-peat:#27221C;   /* raised surfaces */
  --uc-root:#3A3226;   /* hairlines, borders */
  --uc-moss:#8E9C68;   /* secondary accent, status */
  --uc-brass:#C29A5B;  /* primary accent, links, buttons */
  --uc-bone:#E6DED0;   /* body text */
  --uc-dust:#A39883;   /* muted text, dates */
  --uc-rust:#B4583A;   /* warnings only */

  --uc-stencil:"Saira Stencil One","Arial Narrow",sans-serif;
  --uc-display:"Barlow Condensed","Arial Narrow",sans-serif;
  --uc-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --uc-code:ui-monospace,"SFMono-Regular","DejaVu Sans Mono",Menlo,Consolas,monospace;

  --uc-measure:46rem;  /* reading width (~70 characters) */
  --uc-wide:72rem;     /* wide images, project rows, hero text block */
  --uc-gutter:clamp(1rem,4vw,2rem);
  --uc-space:clamp(2.5rem,6vw,4.5rem); /* vertical rhythm between sections */
}

/* 3. Base ----------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5rem}
body{margin:0;background:var(--uc-loam);color:var(--uc-bone);font-family:var(--uc-body);font-size:1.0625rem;line-height:1.65;overflow-x:hidden;text-rendering:optimizeLegibility}
img,svg,video,iframe{max-width:100%;height:auto}
a{color:var(--uc-brass);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--uc-bone)}
h1,h2,h3,h4{color:var(--uc-bone);line-height:1.1;text-wrap:balance;margin:var(--uc-space) 0 .6em}
h1{font-family:var(--uc-stencil);font-weight:400;font-size:clamp(2.4rem,6vw,4.2rem);letter-spacing:.01em;margin-top:0}
h2{font-family:var(--uc-display);font-weight:600;font-size:clamp(1.75rem,3.4vw,2.35rem);letter-spacing:.005em}
h3{font-family:var(--uc-display);font-weight:600;font-size:1.45rem;margin-top:2rem}
h4{font-family:var(--uc-display);font-weight:500;font-size:1.2rem;color:var(--uc-dust)}
p,ul,ol{margin:0 0 1.1em}
li{margin-bottom:.35em}
strong{font-weight:600;color:#F2EBDF}
hr,.wp-block-separator{border:0;border-top:1px solid var(--uc-root);margin:var(--uc-space) auto;max-width:var(--uc-measure);opacity:1}
blockquote,.wp-block-quote{margin:2rem 0;padding:.2rem 0 .2rem 1.25rem;border-left:3px solid var(--uc-moss);color:var(--uc-dust);font-style:italic}
code{font-family:var(--uc-code);font-size:.9em;background:var(--uc-peat);padding:.1em .35em;border-radius:2px}
pre,.wp-block-code{font-family:var(--uc-code);font-size:.88rem;line-height:1.55;background:#14110E;border:1px solid var(--uc-root);border-left:3px solid var(--uc-brass);padding:1rem 1.15rem;overflow-x:auto;border-radius:2px}
pre code,.wp-block-code code{background:none;padding:0}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{text-align:left;padding:.55rem .7rem;border-bottom:1px solid var(--uc-root);vertical-align:top}
th{font-family:var(--uc-display);font-weight:600;font-size:1.05rem;color:var(--uc-dust)}
figure{margin:2rem 0}
figcaption,.wp-element-caption{color:var(--uc-dust);font-size:.88rem;margin-top:.5rem}

/* 4. Header & navigation -------------------------------------------------- */
.uc-skip{position:absolute;left:-999px;top:0;background:var(--uc-brass);color:var(--uc-loam);padding:.6rem 1rem;z-index:100}
.uc-skip:focus{left:1rem;top:1rem}
.site-header{position:sticky;top:0;z-index:50;background:rgba(28,25,21,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--uc-root)}
.site-header__inner{max-width:calc(var(--uc-wide) + 2*var(--uc-gutter));margin:0 auto;padding:.7rem var(--uc-gutter);display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.uc-brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--uc-bone)}
.uc-brand img{width:38px;height:38px;display:block}
.uc-brand__name{font-family:var(--uc-stencil);font-size:1.55rem;letter-spacing:.04em;line-height:1}
.uc-brand:hover{color:var(--uc-brass)}
.uc-nav ul{list-style:none;margin:0;padding:0}
.uc-nav>ul{display:flex;gap:.25rem;align-items:center}
.uc-nav li{position:relative;margin:0}
.uc-nav a{display:block;padding:.5rem .8rem;font-family:var(--uc-display);font-weight:500;font-size:1.15rem;color:var(--uc-bone);text-decoration:none;letter-spacing:.02em}
.uc-nav a:hover,.uc-nav .current-menu-item>a,.uc-nav .current-menu-ancestor>a,.uc-nav .current_page_parent>a{color:var(--uc-brass)}
.uc-nav .sub-menu{position:absolute;left:0;top:100%;min-width:15rem;background:var(--uc-peat);border:1px solid var(--uc-root);border-top:2px solid var(--uc-brass);padding:.4rem 0;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .15s,transform .15s,visibility .15s}
.uc-nav li:hover>.sub-menu,.uc-nav li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none}
.uc-nav .sub-menu a{font-size:1.05rem;padding:.45rem 1rem}
.uc-nav .menu-item-has-children>a::after{content:"";display:inline-block;width:.4em;height:.4em;margin-left:.45em;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-.2em) rotate(45deg)}
.uc-menu-toggle{display:none;background:none;border:1px solid var(--uc-root);color:var(--uc-bone);font-family:var(--uc-display);font-size:1.1rem;padding:.35rem .8rem;border-radius:2px;cursor:pointer}
@media (max-width:860px){
  .uc-menu-toggle{display:block}
  .uc-nav{position:absolute;left:0;right:0;top:100%;background:var(--uc-loam);border-bottom:1px solid var(--uc-root);display:none;padding:.5rem var(--uc-gutter) 1rem}
  .uc-nav.is-open{display:block}
  .uc-nav>ul{flex-direction:column;align-items:stretch}
  .uc-nav .sub-menu{position:static;opacity:1;visibility:visible;transform:none;border:0;border-left:2px solid var(--uc-root);background:none;margin-left:.8rem;padding:0}
  .uc-nav .menu-item-has-children>a::after{display:none}
}

/* 5. Content layout -------------------------------------------------------- */
.site-main{padding:var(--uc-space) var(--uc-gutter) calc(var(--uc-space)*1.2)}
.uc-content>*{max-width:var(--uc-measure);margin-left:auto;margin-right:auto}
.uc-content>.alignwide,.uc-content>.uc-wide{max-width:var(--uc-wide)}
.uc-content>.alignfull{max-width:none;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw}
.uc-content>*:first-child{margin-top:0}
.uc-pagehead{max-width:var(--uc-measure);margin:0 auto 2.5rem}
.uc-pagehead--wide{max-width:var(--uc-wide)}
.uc-crumb{font-family:var(--uc-display);font-size:1.1rem;color:var(--uc-dust);margin:0 0 .6rem}
.uc-crumb a{color:var(--uc-dust);text-decoration:none}
.uc-crumb a:hover{color:var(--uc-brass)}
.uc-lede{font-size:1.2rem;color:var(--uc-dust);max-width:40rem}
.uc-feature{max-width:var(--uc-wide);margin:0 auto 3rem}
.uc-feature img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--uc-root)}

/* blocks */
.wp-block-columns{gap:2rem;margin-bottom:1.5rem}
.wp-block-image img{border:1px solid var(--uc-root)}
.wp-block-buttons{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.75rem auto}
.wp-block-button__link,.wp-element-button{display:inline-block;background:var(--uc-brass);color:var(--uc-loam);font-family:var(--uc-display);font-weight:600;font-size:1.15rem;letter-spacing:.02em;padding:.6rem 1.3rem;border-radius:2px;text-decoration:none;border:1px solid var(--uc-brass)}
.wp-block-button__link:hover{background:var(--uc-bone);border-color:var(--uc-bone);color:var(--uc-loam)}
.is-style-outline .wp-block-button__link{background:transparent;color:var(--uc-brass)}
.is-style-outline .wp-block-button__link:hover{background:transparent;color:var(--uc-bone);border-color:var(--uc-bone)}

/* 6. Components ------------------------------------------------------------ */

/* Hero (home page). It's an ordinary Group block with the class "uc-hero" —
   edit its text in the block editor; the terrain backdrop comes from here. */
.uc-hero{position:relative;margin-top:calc(var(--uc-space)*-1)!important;margin-bottom:var(--uc-space)!important;padding:clamp(5rem,14vh,9rem) var(--uc-gutter) clamp(4rem,10vh,7rem);background:var(--uc-loam) url(assets/img/terrain.svg) center/cover no-repeat;border-bottom:1px solid var(--uc-root)}
.uc-hero>*{max-width:var(--uc-wide);margin-left:auto;margin-right:auto}
.uc-hero h1{font-size:clamp(3.4rem,12.5vw,9.5rem);line-height:.92;letter-spacing:.015em;margin:0 auto .35em;color:var(--uc-bone)}
.uc-hero .uc-tagline{font-family:var(--uc-display);font-weight:500;font-size:clamp(1.35rem,2.6vw,2rem);color:var(--uc-brass);margin-bottom:1.4rem}
.uc-hero p{max-width:var(--uc-wide)}
.uc-hero p:not(.uc-tagline){font-size:1.15rem;color:var(--uc-bone)}
.uc-hero .uc-hero__text{padding-right:max(0px,calc(100% - 38rem))} /* keeps the intro to a readable width while staying aligned with the headline */
.uc-hero .wp-block-buttons{max-width:var(--uc-wide)}
@media (prefers-reduced-motion:no-preference){
  .uc-hero h1{animation:uc-surface 1.1s cubic-bezier(.2,.7,.2,1) both}
  @keyframes uc-surface{from{opacity:0;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
}

/* three pillars on the home page */
.uc-pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--uc-root)}
.uc-pillars>.wp-block-column{padding:1.5rem 1.5rem 0 0;margin:0}
.uc-pillars>.wp-block-column+.wp-block-column{padding-left:1.5rem;border-left:1px solid var(--uc-root)}
.uc-pillars h3{margin-top:0;color:var(--uc-brass)}
@media (max-width:781px){.uc-pillars{display:block}.uc-pillars>.wp-block-column+.wp-block-column{padding-left:0;border-left:0;border-top:1px solid var(--uc-root)}}

/* project rows ([uc_projects]) */
.uc-rows{list-style:none;padding:0;margin:2rem auto;max-width:var(--uc-wide)}
.uc-row{display:grid;grid-template-columns:minmax(0,18rem) 1fr;gap:1.75rem;align-items:start;padding:1.5rem 0;border-top:1px solid var(--uc-root);margin:0}
.uc-row:last-child{border-bottom:1px solid var(--uc-root)}
.uc-row__img{display:block;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--uc-root);background:var(--uc-peat)}
.uc-row__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.uc-row:hover .uc-row__img img{transform:scale(1.03)}
.uc-row h3{margin:0 0 .3rem;font-size:1.65rem}
.uc-row h3 a{color:var(--uc-bone);text-decoration:none}
.uc-row h3 a:hover{color:var(--uc-brass)}
.uc-row p{margin:.2rem 0 0;color:var(--uc-dust);max-width:40rem}
.uc-status{display:inline-block;font-family:var(--uc-display);font-size:1.05rem;color:var(--uc-moss);margin-bottom:.15rem}
.uc-status--planned{color:var(--uc-dust)}
.uc-status--building{color:var(--uc-brass)}
@media (max-width:640px){.uc-row{grid-template-columns:1fr;gap:1rem}}

/* field notes lists ([uc_field_notes], [uc_latest], blog index) */
.uc-notes{list-style:none;padding:0;margin:1.5rem auto 2rem}
.uc-note{display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;padding:1rem 0;border-top:1px solid var(--uc-root);margin:0}
.uc-note:last-child{border-bottom:1px solid var(--uc-root)}
.uc-note time{font-family:var(--uc-display);font-size:1.05rem;color:var(--uc-dust);padding-top:.15rem}
.uc-note h3{margin:0;font-size:1.4rem}
.uc-note h3 a{color:var(--uc-bone);text-decoration:none}
.uc-note h3 a:hover{color:var(--uc-brass)}
.uc-note p{margin:.25rem 0 0;color:var(--uc-dust);font-size:.98rem}
.uc-note__cat{font-family:var(--uc-display);font-size:1rem;color:var(--uc-moss);text-decoration:none}
.uc-empty{color:var(--uc-dust);border:1px dashed var(--uc-root);padding:1rem 1.2rem}
@media (max-width:560px){.uc-note{grid-template-columns:1fr;gap:.2rem}}

/* career strata (portfolio). Each era is a Group block with class "uc-era";
   the colored left edge steps down through the ground layers in order. */
.uc-era{position:relative;padding:.2rem 0 .6rem 1.5rem;border-left:6px solid var(--uc-root);margin-bottom:0!important}
.uc-era+.uc-era{padding-top:1.4rem}
.uc-era:nth-of-type(6n+1){border-left-color:#5B4A33}
.uc-era:nth-of-type(6n+2){border-left-color:#4E5A3A}
.uc-era:nth-of-type(6n+3){border-left-color:#6E5233}
.uc-era:nth-of-type(6n+4){border-left-color:#4A3B28}
.uc-era:nth-of-type(6n+5){border-left-color:#3B4430}
.uc-era:nth-of-type(6n+6){border-left-color:#3A3226}
.uc-era h3{margin:0 0 .1rem}
.uc-era .uc-years{font-family:var(--uc-display);font-size:1.1rem;color:var(--uc-brass);margin-bottom:.6rem}

/* key-value facts list, used on project pages */
.uc-facts{border-top:1px solid var(--uc-root)}
.uc-facts p{display:grid;grid-template-columns:9rem 1fr;gap:1rem;margin:0;padding:.55rem 0;border-bottom:1px solid var(--uc-root)}
.uc-facts strong{font-family:var(--uc-display);font-weight:500;font-size:1.08rem;color:var(--uc-dust)}
@media (max-width:560px){.uc-facts p{grid-template-columns:1fr;gap:0}}

/* embedded schematic ([uc_schematic]) */
.uc-schematic{max-width:var(--uc-wide)!important;margin:2rem auto}
.uc-schematic iframe{display:block;width:100%;height:80vh;min-height:520px;border:1px solid var(--uc-root);background:#0f151c}
.uc-schematic p{margin-top:.6rem;font-size:.95rem;color:var(--uc-dust)}

/* single post */
.uc-meta{font-family:var(--uc-display);font-size:1.12rem;color:var(--uc-dust)}
.uc-meta a{color:var(--uc-moss);text-decoration:none}
.uc-postnav{max-width:var(--uc-measure);margin:var(--uc-space) auto 0;display:flex;justify-content:space-between;gap:1rem;border-top:1px solid var(--uc-root);padding-top:1.2rem;font-family:var(--uc-display);font-size:1.15rem}
.uc-pagination{max-width:var(--uc-measure);margin:2rem auto 0;font-family:var(--uc-display);font-size:1.15rem}
.uc-pagination .page-numbers{padding:.2rem .5rem}

/* 7. Footer ----------------------------------------------------------------- */
.site-footer{border-top:1px solid var(--uc-root);background:linear-gradient(rgba(28,25,21,.9),rgba(28,25,21,.97)),url(assets/img/terrain.svg) center/cover;color:var(--uc-dust);font-size:.95rem}
.site-footer__inner{max-width:calc(var(--uc-wide) + 2*var(--uc-gutter));margin:0 auto;padding:3rem var(--uc-gutter) 2rem;display:grid;grid-template-columns:1.4fr 1fr;gap:2rem}
.site-footer .uc-brand__name{font-size:1.35rem}
.site-footer ul{list-style:none;margin:0;padding:0;columns:2;column-gap:2rem}
.site-footer li a{color:var(--uc-bone);text-decoration:none;font-family:var(--uc-display);font-size:1.1rem}
.site-footer li a:hover{color:var(--uc-brass)}
.site-footer__base{max-width:var(--uc-wide);margin:0 auto;padding:1rem 0 2rem;border-top:1px solid var(--uc-root);font-size:.85rem}
@media (max-width:700px){.site-footer__inner{grid-template-columns:1fr}}

/* 8. Utilities & accessibility --------------------------------------------- */
:focus-visible{outline:2px solid var(--uc-brass);outline-offset:3px}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}
.has-text-align-center{text-align:center}
.uc-muted{color:var(--uc-dust)}
.search-form{display:flex;gap:.5rem;max-width:var(--uc-measure);margin:1rem auto}
.search-form input[type=search]{flex:1;background:var(--uc-peat);border:1px solid var(--uc-root);color:var(--uc-bone);padding:.55rem .75rem;font:inherit;border-radius:2px}
.search-form input[type=submit]{background:var(--uc-brass);color:var(--uc-loam);border:0;padding:.55rem 1rem;font-family:var(--uc-display);font-size:1.1rem;border-radius:2px;cursor:pointer}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}