/* ============================================================
   WiredMe homepage styles — paste into Appearance > Customize >
   Additional CSS (or a Code Snippets plugin, CSS-type snippet).
   Pairs with wiredme-wp-block-markup.txt pasted into the page
   via the block editor's Code Editor view.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Figtree:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root{
  --wm-ink:#162139;
  --wm-ink-70: rgba(19,34,66,.7);
  --wm-paper:#EEF2F6;
  --wm-paper-line: rgba(19,34,66,.06);
  --wm-card:#FFFFFF;
  --wm-yellow:#F9D462;
  --wm-blue:#1A5FC4;
  --wm-coral:#C2432F;
  --wm-blue-light:#E9F1FE;
  --wm-coral-light:#FBE7E3;
  --wm-yellow-light:#FEF3D8;
}

/* Neutralize Twenty Twenty-Five's automatic block-gap spacing between
   top-level blocks — without this, the theme inserts extra vertical
   margin between every section on top of the padding below. */
.wm-section, .wm-torn, .wm-signup, .wm-hero{
  margin-top:0 !important;
  margin-bottom:0 !important;
}

/* Base */
.wm-section{ padding:60px 24px; background: var(--wm-paper); font-family:'Figtree', sans-serif; color: var(--wm-ink); }
.wm-section.wm-bg-card{ background: var(--wm-card); }
.wm-wrap{ max-width:1160px; margin:0 auto; }
.wm-center-head{ text-align:center; }
.wm-section h2, .wm-section h3, .wm-section h1{ font-family:'Fraunces', serif; letter-spacing:-0.01em; color: var(--wm-ink); }
.wm-section a{ color: inherit; }

.wm-eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-family:'Space Mono',monospace;
  font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color: var(--wm-blue);
  background: var(--wm-blue-light); padding:6px 12px; border-radius:999px; margin-bottom:14px;
}
.wm-eyebrow-inverse{ background: rgba(255,255,255,.12); color:#fff; }

/* Buttons */
.wm-btn-primary .wp-block-button__link{ background: var(--wm-coral); color:#fff; border-radius:999px; box-shadow:0 3px 0 #93331F; font-weight:700; }
.wm-btn-outline .wp-block-button__link{ background:transparent; color: var(--wm-ink); border:2px solid var(--wm-ink); border-radius:999px; font-weight:700; }
.wm-btn-outline .wp-block-button__link:hover{ background: var(--wm-ink); color:#fff; }
.wm-btn-yellow .wp-block-button__link{ background: var(--wm-yellow); color: var(--wm-ink); border-radius:999px; box-shadow:0 3px 0 #c79c2f; font-weight:700; }

/* Hero */
.wm-hero{ padding-top:48px; }
.wm-hero-columns{ align-items:center; gap:48px; }
.wm-hero-h1{ font-size:clamp(2.1rem, 4vw, 3.15rem); line-height:1.08; font-weight:600; }
.wm-hero-h1 em{ font-style:normal; color: var(--wm-coral); }
.wm-lede{ font-size:1.12rem; line-height:1.6; color: var(--wm-ink-70); max-width:46ch; }

/* Trust bar list -> pills */
.wm-trust{ padding-top:0; padding-bottom:26px; }
.wm-trust-list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.wm-trust-list li{
  display:flex; align-items:center; gap:8px; background: var(--wm-card);
  border:1px solid rgba(19,34,66,.1); padding:9px 16px; border-radius:999px; font-size:.86rem; font-weight:600;
}

/* Card grids */
.wm-card-grid{ gap:20px !important; margin-top:24px; }
.wm-card-grid-4 > .wp-block-column{ flex-basis: 24% !important; }
.wm-card, .wm-printcard, .wm-lessoncard{
  background: var(--wm-card); border-radius:14px; padding:26px 22px;
  box-shadow:0 12px 30px -22px rgba(19,34,66,.5);
}
.wm-card{ border-top:5px solid var(--wm-coral); }
.wm-card.wm-tone-coral{ border-top-color: var(--wm-coral); }
.wm-card.wm-tone-blue{ border-top-color: var(--wm-blue); }
.wm-card.wm-tone-yellow{ border-top-color: var(--wm-yellow); }
.wm-card:not(.wm-tone-coral):not(.wm-tone-blue):not(.wm-tone-yellow){ border-top-color: var(--wm-ink); }

.wm-card-link{ margin-top:12px; font-weight:700; font-size:.88rem; }
.wm-card-link a{ text-decoration:none; }
.wm-card-link.wm-tone-coral a{ color: var(--wm-coral); }
.wm-card-link.wm-tone-blue a{ color: var(--wm-blue); }
.wm-card-link.wm-tone-gold a{ color:#c79c2f; }

/* Printables */
.wm-printcard{ border:2px dashed rgba(19,34,66,.28); box-shadow:none; position:relative; }
.wm-tag{ font-family:'Space Mono',monospace; font-size:.68rem; color: var(--wm-ink-70); border-top:1px dashed rgba(19,34,66,.28); padding-top:10px; margin-top:14px; }

/* Query Loop post title / excerpt / featured image, used inside
   wm-printcard and wm-lessoncard when a section pulls real posts
   instead of the static cards in the block markup */
.wm-printcard .wp-block-post-title, .wm-lessoncard .wp-block-post-title{
  font-family:'Fraunces', serif; font-size:1.1rem; font-weight:600; margin:0 0 8px; line-height:1.3;
}
.wm-printcard .wp-block-post-title a, .wm-lessoncard .wp-block-post-title a{ color: var(--wm-ink); text-decoration:none; }
.wm-printcard .wp-block-post-excerpt, .wm-lessoncard .wp-block-post-excerpt{
  font-size:.9rem; color: var(--wm-ink-70); line-height:1.55;
}
.wm-printcard .wp-block-post-excerpt__more-link, .wm-lessoncard .wp-block-post-excerpt__more-link{
  font-weight:700; font-size:.85rem; color: var(--wm-coral); text-decoration:none;
}
.wm-lessoncard .wp-block-post-featured-image{ margin:-30px -30px 16px; }
.wm-lessoncard .wp-block-post-featured-image img{ border-radius:14px 14px 0 0; display:block; }

/* Lesson / resource cards */
.wm-lessoncard{ box-shadow:none; border:1px solid rgba(19,34,66,.08); }
.wm-cat{ font-family:'Space Mono',monospace; font-size:.7rem; color: var(--wm-blue); letter-spacing:.04em; text-transform:uppercase; margin-bottom:6px; }

/* Teach section */
.wm-teach-columns{ align-items:center; gap:52px; }
.wm-teach-list{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.wm-teach-list li{ background: var(--wm-card); border:1px solid rgba(19,34,66,.08); border-radius:12px; padding:14px 16px; font-weight:600; }

/* About */
.wm-about-columns{ align-items:center; gap:48px; }
.wm-quote{ font-family:'Fraunces',serif; font-size:1.4rem; line-height:1.4; font-weight:500; border-left:3px solid var(--wm-coral); padding-left:20px; margin:14px 0 20px; color: var(--wm-ink); }
.wm-about-placeholder{ background: var(--wm-blue-light); aspect-ratio:4/3; border-radius:20px; min-height:220px; display:flex; align-items:center; justify-content:center; padding:24px; }
.wm-about-placeholder-note{ text-align:center; color: var(--wm-ink-70); font-size:.85rem; font-style:italic; margin:0; }

/* Signup */
.wm-signup{ background: var(--wm-yellow); color: var(--wm-ink); border-radius:22px; padding:20px; margin:20px auto !important; max-width:1160px !important; }
.wm-signup h2{ color: var(--wm-ink); }
.wm-signup p{ color: rgba(22,33,57,.75); }
.wm-signup-columns{ align-items:center; gap:36px; }
.wm-eyebrow-inverse{ background: rgba(22,33,57,.1); color: var(--wm-ink); }
.wm-signup-perks{ list-style:none; margin:0 0 16px; padding:0; display:grid; gap:8px; }
.wm-signup-perks li{
  background: rgba(255,255,255,.55); border:1px solid rgba(22,33,57,.14);
  border-radius:10px; padding:10px 14px; font-size:.92rem; font-weight:600; color: var(--wm-ink);
}
.wm-signup-note{ font-size:.8rem; color: rgba(22,33,57,.6); margin-top:12px; margin-bottom:0; }

@media(max-width:781px){
  .wm-card-grid-4 > .wp-block-column{ flex-basis: 48% !important; }
}

/* Torn paper dividers */
.wm-torn{
  border:none; height:22px; width:100%; margin:0; padding:0;
  background:
    linear-gradient(135deg, transparent 75%, var(--wm-paper) 75%) 0 0/14px 14px repeat-x,
    linear-gradient(-135deg, transparent 75%, var(--wm-paper) 75%) 0 0/14px 14px repeat-x;
  background-color: var(--wm-card);
}
.wm-torn.wm-torn-flip{ transform: scaleY(-1); }

/* ============================================================
   Cipher wheel (Custom HTML block content — only piece that
   isn't a core block). JS for this lives separately in WPCode,
   see wiredme-wp-script-raw.js from earlier.
   ============================================================ */
.wm-cipher{
  background: var(--wm-card); border-radius:20px; padding:28px 26px 26px;
  box-shadow:0 1px 0 rgba(19,34,66,.05), 0 18px 40px -20px rgba(19,34,66,.35);
  border:1px solid rgba(19,34,66,.08);
  font-family:'Figtree', sans-serif; color: var(--wm-ink);
}
.wm-cipher h3{ font-family:'Fraunces', serif; font-size:1.05rem; font-weight:600; margin:0; }
.wm-cipher-head{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:6px; }
.wm-cipher-head p{ margin:4px 0 0; font-size:.88rem; color: var(--wm-ink-70); }
.wm-cipher-stamp{
  font-family:'Space Mono',monospace; font-size:.68rem; color: var(--wm-yellow); background: var(--wm-ink);
  padding:3px 8px; border-radius:8px; white-space:nowrap;
}
.wm-wheel-stage{ position:relative; width:236px; height:236px; margin:18px auto 6px; touch-action:none; }
.wm-wheel-ring-outer, .wm-wheel-ring-inner{ position:absolute; inset:0; border-radius:50%; }
.wm-wheel-ring-outer{ border:2px solid var(--wm-ink); background:#fff; }
.wheelLetter{
  position:absolute; width:22px; height:22px; margin:-11px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Mono',monospace; font-size:.72rem; font-weight:700; color: var(--wm-ink-70);
}
.wm-wheel-ring-inner{
  width:70%; height:70%; left:15%; top:15%; background: var(--wm-coral); border-radius:50%;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.35); cursor:grab;
}
.wm-wheel-ring-inner:active{ cursor:grabbing; }
.wm-wheel-ring-inner .wheelLetter{ color: rgba(255,255,255,.92); }
.wm-wheel-center{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:34%; height:34%; border-radius:50%; background: var(--wm-ink);
  display:flex; align-items:center; justify-content:center; pointer-events:none;
}
.wm-wheel-center svg{ width:44%; height:44%; }
.wm-decode-out{ margin-top:16px; text-align:center; font-family:'Space Mono',monospace; }
.wm-cipher-text{ font-size:.78rem; color: var(--wm-ink-70); letter-spacing:.06em; }
.wm-plain-text{ font-size:1rem; font-weight:700; letter-spacing:.06em; margin-top:6px; min-height:1.4em; color: var(--wm-ink); }
.wm-plain-text.solved{ color: var(--wm-blue); }
.wm-decode-hint{ font-size:.74rem; text-align:center; color: var(--wm-ink-70); margin-top:10px; }