/*
Theme Name: NC Cryptids
Theme URI: https://example.com
Author: Custom
Description: A field-report styled theme for cataloguing North Carolina cryptid sightings, organized by Mountains, Piedmont, and Coastal Plain regions. Built to file every sighting into a master log on the homepage while automatically sorting it into its regional dossier.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nc-cryptids
*/

/* =========================================================
   TOKENS
   Void black   #0a0d0c   background
   Deep teal    #0d2b2a   panels / cards
   Signal teal  #1f6f6b   accent, links, glow
   Bright teal  #3fa79f   hover / active accent
   Bone         #d8d4c4   body text (aged paper)
   Fog          #8fa7a4   muted / secondary text
   Rust stamp   #7a3b2e   "confirmed" stamp accent, used sparingly
   ========================================================= */

:root{
  --void:#0a0d0c;
  --panel:#0f1e1c;
  --panel-2:#122824;
  --teal:#1f6f6b;
  --teal-bright:#3fa79f;
  --bone:#d8d4c4;
  --fog:#8fa7a4;
  --rust:#7a3b2e;
  --line: rgba(63,167,159,0.25);
  --font-display: 'Special Elite', 'Courier New', monospace;
  --font-body: 'EB Garamond', Georgia, serif;
  --font-mono: 'Courier Prime', 'Courier New', monospace;
}

*{box-sizing:border-box;}

html{background:var(--void);}

body{
  background-color:var(--void);
  background-image:
    radial-gradient(ellipse at 20% -10%, rgba(31,111,107,0.16), transparent 55%),
    radial-gradient(ellipse at 90% 10%, rgba(31,111,107,0.10), transparent 45%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 3px);
  color:var(--bone);
  font-family:var(--font-body);
  font-size:19px;
  line-height:1.7;
  margin:0;
  min-height:100vh;
}

a{color:var(--teal-bright); text-decoration:none;}
a:hover{color:var(--bone); text-shadow:0 0 8px rgba(63,167,159,0.6);}

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--bone);
  letter-spacing:0.02em;
  line-height:1.25;
  margin:0 0 0.5em;
  text-transform:uppercase;
}

h1{font-size:2.4rem;}
h2{font-size:1.6rem;}
h3{font-size:1.15rem;}

p{margin:0 0 1.1em;}

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

.container{max-width:1120px; margin:0 auto; padding:0 28px;}

/* =========================================================
   FOG LAYER — ambient atmosphere, fixed, behind everything
   ========================================================= */
.fog-layer{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(1200px 500px at 10% 100%, rgba(31,111,107,0.10), transparent 60%),
    radial-gradient(900px 500px at 95% 0%, rgba(122,59,46,0.05), transparent 60%);
  animation:drift 40s ease-in-out infinite alternate;
}
@keyframes drift{
  from{ transform:translateY(0px);}
  to{ transform:translateY(-24px);}
}
@media (prefers-reduced-motion: reduce){
  .fog-layer{animation:none;}
}

/* =========================================================
   SITE HEADER — ledger / case-log masthead
   ========================================================= */
.site-header{
  position:relative; z-index:2;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(15,30,28,0.9), rgba(10,13,12,0.4));
  padding:26px 0 20px;
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
}
.site-branding{display:flex; flex-direction:column; gap:2px;}
.site-title{
  margin:0; font-size:1.9rem; letter-spacing:0.08em;
}
.site-title a{color:var(--bone);}
.site-title a:hover{color:var(--teal-bright); text-shadow:none;}
.site-eyebrow{
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.22em;
  color:var(--teal); text-transform:uppercase;
}
.site-description{
  font-family:var(--font-mono); font-size:0.85rem; color:var(--fog); margin-top:4px;
}

.primary-nav ul{
  list-style:none; display:flex; gap:26px; margin:0; padding:0; flex-wrap:wrap;
}
.primary-nav a{
  font-family:var(--font-mono); font-size:0.82rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--fog); padding:6px 0; border-bottom:1px solid transparent;
}
.primary-nav a:hover, .primary-nav .current-menu-item a{
  color:var(--teal-bright); border-bottom-color:var(--teal);
}

/* =========================================================
   HERO
   ========================================================= */
.log-hero{
  position:relative; z-index:2;
  padding:64px 0 40px;
  border-bottom:1px dashed var(--line);
}
.log-hero .stamp{
  display:inline-block; font-family:var(--font-mono); font-size:0.72rem;
  letter-spacing:0.2em; color:var(--rust); border:1px solid var(--rust);
  padding:4px 10px; border-radius:2px; transform:rotate(-2deg); margin-bottom:18px;
}
.log-hero h1{font-size:clamp(2rem, 5vw, 3.2rem); max-width:16ch;}
.log-hero .lede{
  font-family:var(--font-body); font-style:italic; color:var(--fog);
  max-width:60ch; font-size:1.1rem;
}
.log-hero .region-links{
  display:flex; gap:14px; margin-top:28px; flex-wrap:wrap;
}
.region-links a{
  font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--bone); border:1px solid var(--line);
  padding:9px 16px; border-radius:2px; background:rgba(31,111,107,0.06);
}
.region-links a:hover{ border-color:var(--teal-bright); color:var(--teal-bright); text-shadow:none; background:rgba(31,111,107,0.14);}

/* =========================================================
   ARCHIVE GRID — the case-file cards
   ========================================================= */
.homepage-intro{
  position:relative; z-index:2; padding:34px 0 6px;
  border-bottom:1px dashed var(--line);
}
.homepage-intro .container{ max-width:78ch; }
.homepage-intro p{
  color:var(--fog); font-size:1.02rem; line-height:1.75; margin-bottom:0.9em;
}
.homepage-intro p:last-child{margin-bottom:0;}

.archive-intro{ position:relative; z-index:2; padding:40px 0 0;}
.archive-intro .count-line{
  font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.12em; color:var(--fog);
  text-transform:uppercase; border-top:1px solid var(--line); padding-top:12px;
}

.case-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr));
  gap:28px; padding:32px 0 80px;
}

.case-file{
  position:relative;
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
  border:1px solid var(--line);
  border-radius:3px;
  overflow:hidden;
  transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.case-file:hover{
  transform:translateY(-4px);
  border-color:var(--teal-bright);
  box-shadow:0 12px 30px rgba(0,0,0,0.5), 0 0 0 1px rgba(63,167,159,0.15);
}
.case-file .thumb{
  aspect-ratio:16/10; overflow:hidden; background:var(--void);
  display:flex; align-items:center; justify-content:center;
}
.case-file .thumb img{
  width:100%; height:100%; object-fit:contain;
  filter:grayscale(35%) contrast(1.05) brightness(0.85);
}
.case-file .thumb.no-image{
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:0.75rem; color:var(--fog); letter-spacing:0.12em;
}
.case-body{padding:20px 20px 22px;}
.case-region{
  display:inline-block; font-family:var(--font-mono); font-size:0.68rem;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--teal-bright);
  border:1px solid var(--teal); padding:3px 8px; border-radius:2px; margin-bottom:10px;
}
.case-file h2{font-size:1.25rem; margin-bottom:8px;}
.case-file h2 a{color:var(--bone);}
.case-file h2 a:hover{color:var(--teal-bright); text-shadow:none;}
.case-excerpt{color:var(--fog); font-size:0.95rem; margin-bottom:10px;}
.case-meta{
  font-family:var(--font-mono); font-size:0.7rem; color:var(--fog);
  letter-spacing:0.08em; text-transform:uppercase; border-top:1px dashed var(--line); padding-top:10px;
}

/* =========================================================
   REGION DOSSIER PAGES — topographic texture varies by region
   ========================================================= */
.region-dossier .log-hero{padding-bottom:30px;}
.terrain-mountains{
  background-image:
    radial-gradient(ellipse at 20% -10%, rgba(31,111,107,0.16), transparent 55%),
    repeating-linear-gradient(115deg, rgba(63,167,159,0.05) 0px, rgba(63,167,159,0.05) 2px, transparent 2px, transparent 26px),
    repeating-linear-gradient(65deg, rgba(63,167,159,0.04) 0px, rgba(63,167,159,0.04) 2px, transparent 2px, transparent 34px);
}
.terrain-piedmont{
  background-image:
    radial-gradient(ellipse at 20% -10%, rgba(31,111,107,0.16), transparent 55%),
    repeating-radial-gradient(circle at 50% 120%, rgba(63,167,159,0.05) 0px, rgba(63,167,159,0.05) 2px, transparent 2px, transparent 40px);
}
.terrain-coastal{
  background-image:
    radial-gradient(ellipse at 20% -10%, rgba(31,111,107,0.16), transparent 55%),
    repeating-linear-gradient(0deg, rgba(63,167,159,0.05) 0px, rgba(63,167,159,0.05) 1px, transparent 1px, transparent 22px);
}

/* =========================================================
   SINGLE POST — sighting report
   ========================================================= */
.sighting-report{position:relative; z-index:2; padding:50px 0 90px;}
.sighting-report .report-header{
  border-bottom:1px dashed var(--line); padding-bottom:24px; margin-bottom:32px;
}
.sighting-report .case-region{margin-bottom:14px;}
.sighting-report h1{font-size:clamp(1.8rem,4vw,2.6rem);}
.sighting-report .report-meta{
  font-family:var(--font-mono); font-size:0.75rem; color:var(--fog);
  letter-spacing:0.1em; text-transform:uppercase; margin-top:10px;
}
.sighting-report .featured-image{
  margin:0 0 34px; border:1px solid var(--line); filter:grayscale(30%) contrast(1.05) brightness(0.88);
}
.sighting-report .entry-content{font-size:1.08rem;}
.sighting-report .entry-content h2,
.sighting-report .entry-content h3{margin-top:1.4em;}
.sighting-report .entry-content blockquote{
  border-left:2px solid var(--teal); margin:1.6em 0; padding:4px 0 4px 20px;
  font-style:italic; color:var(--fog);
}
.sighting-report .tags-line{
  margin-top:40px; padding-top:20px; border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:0.75rem; letter-spacing:0.08em; color:var(--fog);
}

.post-promo{
  margin-top:46px; padding-top:6px;
}
.post-promo .widget{
  border:1px dashed var(--teal); background:rgba(31,111,107,0.06);
  text-align:center;
}
.post-promo .widget img{ margin:0 auto 14px; }
.post-promo .widget-title{
  text-align:center; border-bottom:none; font-size:0.78rem; color:var(--teal-bright);
}

/* =========================================================
   PAGE (generic)
   ========================================================= */
.standard-page{position:relative; z-index:2; padding:56px 0 90px;}
.standard-page h1{margin-bottom:24px;}
.standard-page .entry-content{font-size:1.08rem;}

/* =========================================================
   PAGINATION
   ========================================================= */
.log-pagination{
  position:relative; z-index:2; display:flex; gap:16px; justify-content:center;
  padding:0 0 70px; font-family:var(--font-mono); font-size:0.8rem; letter-spacing:0.1em; text-transform:uppercase;
}
.log-pagination a, .log-pagination span{
  border:1px solid var(--line); padding:8px 16px; border-radius:2px; color:var(--fog);
}
.log-pagination a:hover{border-color:var(--teal-bright); color:var(--teal-bright);}
.log-pagination .current{border-color:var(--teal); color:var(--bone);}

/* =========================================================
   WIDGETS / SIDEBAR
   ========================================================= */
.site-sidebar{position:relative; z-index:2;}
.widget{
  border:1px solid var(--line); background:rgba(15,30,28,0.5);
  padding:20px; margin-bottom:24px; border-radius:3px;
}
.widget h2, .widget .widget-title{
  font-size:0.9rem; letter-spacing:0.14em; border-bottom:1px solid var(--line);
  padding-bottom:10px; margin-bottom:12px;
}
.widget ul{list-style:none; margin:0; padding:0;}
.widget li{padding:6px 0; border-bottom:1px dotted var(--line); font-size:0.9rem;}
.widget li:last-child{border-bottom:none;}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  position:relative; z-index:2;
  border-top:1px solid var(--line);
  padding:34px 0; margin-top:20px;
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.08em;
  color:var(--fog); text-transform:uppercase;
}
.site-footer .container{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:640px){
  .site-header .container{flex-direction:column; align-items:flex-start;}
  .log-hero{padding:44px 0 30px;}
  .case-grid{grid-template-columns:1fr; gap:20px;}
  body{font-size:17px;}
}

/* Accessible focus states */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--teal-bright); outline-offset:2px;
}