/*
Theme Name: Excess Matters — The Field Guide
Theme URI: https://excessmatters.com
Description: Field Notes from a Fat Girl. Child theme of Twenty Twenty-Five.
Author: Brooke Barnett
Author URI: https://excessmatters.com
Template: twentytwentyfive
Version: 3.0.0
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: excess-matters-child
*/

/* ═══════════════════════════════════════════════
   THE FIELD GUIDE — VISUAL SYSTEM
   Just the paint job. You build the layout.
   ═══════════════════════════════════════════════ */

:root {
  --em-cream: #F5F0E1;
  --em-cream-dark: #EDE6D3;
  --em-sage: #8A9A7B;
  --em-sage-light: #A8B89A;
  --em-sage-dark: #6B7D5E;
  --em-dusty-rose: #C9A192;
  --em-dusty-rose-light: #D9BDB2;
  --em-ochre: #C69B3E;
  --em-ochre-light: #D4B06A;
  --em-burnt-orange: #BE5634;
  --em-charcoal: #3D3B3C;
  --em-charcoal-light: #5A5758;
  --em-warm-brown: #8B7355;
}

/* ── Grid Paper Background (on body itself) ──── */
body {
  background-color: var(--em-cream) !important;
  background-image:
    linear-gradient(rgba(138,154,123,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(138,154,123,0.12) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
  background-attachment: fixed !important;
}

::selection {
  background: var(--em-ochre);
  color: var(--em-cream);
}

/* ── Header border + shadow line ──────────────── */
header.wp-block-template-part > .wp-block-group {
  position: relative;
  border-bottom: 2px solid var(--em-charcoal);
}

header.wp-block-template-part > .wp-block-group::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0; right: 0;
  height: 2px;
  background: var(--em-charcoal);
  opacity: 0.25;
}

/* ═══════════════════════════════════════════════
   CSS CLASSES YOU CAN ADD TO ANY BLOCK
   (Block sidebar → Advanced → Additional CSS class)
   ═══════════════════════════════════════════════ */

/* ── em-accent ─────────────────────────────────
   Use on a <span> inside headings for burnt-orange emphasis.
   Example: WHAT WE <span class="em-accent">STAND FOR</span> */
.em-accent { font-weight: 400; color: var(--em-burnt-orange); }
.em-accent-light { font-weight: 400; color: var(--em-ochre-light); }

/* ── em-handwritten ────────────────────────────
   Add to any paragraph for Caveat handwriting font. */
.em-handwritten { font-family: var(--wp--preset--font-family--caveat); }

/* ── em-label ──────────────────────────────────
   Small uppercase tracking label. Add to a paragraph.
   "FIELD NOTES FROM A FAT GIRL" / "ABOUT THE TRAIL" */
.em-label {
  font-weight: 500;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--em-warm-brown);
}

/* ── em-color-stripe ───────────────────────────
   Add to an empty Group block for the 5-color stripe accent.
   Set the group's padding to 0. */
.em-color-stripe {
  height: 8px;
  background: repeating-linear-gradient(90deg,
    var(--em-sage) 0px, var(--em-sage) 20%,
    var(--em-dusty-rose) 20%, var(--em-dusty-rose) 40%,
    var(--em-ochre) 40%, var(--em-ochre) 60%,
    var(--em-burnt-orange) 60%, var(--em-burnt-orange) 80%,
    var(--em-warm-brown) 80%, var(--em-warm-brown) 100%
  );
}

/* ── em-about ──────────────────────────────────
   Add to a Group block for the sage section with striped top accent.
   Set background to Sage in the block settings. */
.em-about { position: relative; }
.em-about::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: repeating-linear-gradient(90deg, var(--em-charcoal) 0px, var(--em-charcoal) 2px, transparent 2px, transparent 6px);
  opacity: 0.2;
}
.em-about em { font-style: normal; font-weight: 400; color: var(--em-ochre-light); }

/* ── em-grid-paper ─────────────────────────────
   Add to a Group block for grid paper + ruled notebook texture. */
.em-grid-paper { position: relative; overflow: hidden; }
.em-grid-paper::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--em-sage-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--em-sage-light) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.12;
  pointer-events: none;
}
.em-grid-paper::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(transparent 39px, var(--em-dusty-rose) 39px, var(--em-dusty-rose) 40px);
  background-size: 100% 40px;
  opacity: 0.08;
  pointer-events: none;
}
.em-grid-paper > * { position: relative; z-index: 2; }

/* ── em-diagonal-stripes ───────────────────────
   Subtle diagonal stripe texture on any Group. */
.em-diagonal-stripes { position: relative; overflow: hidden; }
.em-diagonal-stripes::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-45deg, transparent, transparent 20px, var(--em-cream-dark) 20px, var(--em-cream-dark) 21px);
  opacity: 0.5;
  pointer-events: none;
}
.em-diagonal-stripes > * { position: relative; z-index: 2; }

/* ── em-cross-stitch ───────────────────────────
   Subtle cross-stitch/dot texture. */
.em-cross-stitch { position: relative; }
.em-cross-stitch::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--em-warm-brown) 0.5px, transparent 0.5px);
  background-size: 16px 16px;
  opacity: 0.04;
  pointer-events: none;
}
.em-cross-stitch > * { position: relative; z-index: 2; }

/* ── em-chevron ────────────────────────────────
   Herringbone/chevron texture. Nice on dark backgrounds. */
.em-chevron { position: relative; overflow: hidden; }
.em-chevron::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, var(--em-cream) 25%, transparent 25%) -10px 0,
    linear-gradient(225deg, var(--em-cream) 25%, transparent 25%) -10px 0,
    linear-gradient(315deg, var(--em-cream) 25%, transparent 25%),
    linear-gradient(45deg, var(--em-cream) 25%, transparent 25%);
  background-size: 20px 10px;
  background-position: 0 0, 0 0, 10px 5px, 10px 5px;
  opacity: 0.03;
  pointer-events: none;
}
.em-chevron > * { position: relative; z-index: 2; }

/* ── em-topo ───────────────────────────────────
   Topographic contour line texture. Great on charcoal. */
.em-topo { position: relative; overflow: hidden; }
.em-topo::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='400' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23F5F0E1' stroke-width='0.8'%3E%3Cpath d='M0 50 C50 30 100 60 150 40 C200 20 250 55 300 35 C350 15 400 45 400 45'/%3E%3Cpath d='M0 65 C50 45 100 75 150 55 C200 35 250 70 300 50 C350 30 400 60 400 60'/%3E%3Cpath d='M0 80 C50 60 100 90 150 70 C200 50 250 85 300 65 C350 45 400 75 400 75'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 400px 100px;
  opacity: 0.06;
  pointer-events: none;
}
.em-topo > * { position: relative; z-index: 2; }

/* ── em-article-card ───────────────────────────
   Add to a Group block inside a query loop for hover effects. */
.em-article-card {
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 8px rgba(61,59,60,0.06);
}
.em-article-card:hover {
  transform: translateY(-6px) rotate(-0.5deg);
  box-shadow: 0 12px 32px rgba(61,59,60,0.12);
}

/* ═══════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════ */
@media (min-width: 600px) {
  .em-newsletter-form { flex-direction: row; }
}

/* ═══════════════════════════════════════════════
   ACCESSIBILITY
   ═══════════════════════════════════════════════ */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--em-ochre);
  outline-offset: 3px;
}