/*
Theme Name: Shepherd
Theme URI: https://coreyshepherdofficial.com
Author: Corey Shepherd
Description: Custom block theme for Corey Shepherd — speaker, author, Navy veteran, educator. Every section is editable in the Site Editor. Signature motif: the closed loop.
Version: 1.0.1
Requires at least: 6.6
Tested up to: 7.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: shepherd
*/

/* ---------- Eyebrow labels (mono, letterspaced, amber tick) ---------- */
.cs-eyebrow {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--amber-deep);
}
.cs-eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.5em;
  height: 1px;
  background: var(--wp--preset--color--amber);
  vertical-align: middle;
  margin-right: 0.75em;
}
.cs-on-dark .cs-eyebrow,
.cs-hero .cs-eyebrow { color: var(--wp--preset--color--amber); }

/* ---------- Hero with loop signature ---------- */
.cs-hero {
  position: relative;
  overflow: hidden;
}
.cs-hero .cs-loop {
  position: absolute;
  top: 50%;
  right: -8rem;
  transform: translateY(-50%);
  width: min(46vw, 560px);
  height: auto;
  pointer-events: none;
  opacity: 0.9;
}
.cs-loop circle {
  fill: none;
  stroke: var(--wp--preset--color--amber);
  stroke-width: 1.5;
  stroke-linecap: round;
  /* circumference of r=230 is ~1445; leave a gap that closes */
  stroke-dasharray: 1445;
  stroke-dashoffset: 130;
  transform-origin: center;
  transform: rotate(-65deg);
}
@media (prefers-reduced-motion: no-preference) {
  .cs-loop circle {
    animation: cs-close-loop 2.4s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
  }
  @keyframes cs-close-loop {
    from { stroke-dashoffset: 320; }
    to { stroke-dashoffset: 8; }
  }
}
.cs-loop .cs-loop-point {
  fill: var(--wp--preset--color--amber);
  stroke: none;
}
@media (max-width: 781px) {
  .cs-hero .cs-loop { right: -14rem; opacity: 0.35; }
}

.cs-hero h1 {
  max-width: 17ch;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.cs-hero h1 em {
  font-style: italic;
  color: var(--wp--preset--color--amber);
}

/* ---------- Subline ---------- */
.cs-roles {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--mist);
}

/* ---------- The works ledger (five-part project) ---------- */
.cs-ledger { counter-reset: none; }
.cs-ledger .cs-row {
  border-top: 1px solid #D8D4C9;
  padding: 1.75rem 0;
}
.cs-ledger .cs-row:last-child { border-bottom: 1px solid #D8D4C9; }
.cs-row .cs-num {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.8125rem;
  color: var(--wp--preset--color--amber-deep);
}
.cs-row h3 { margin: 0; font-weight: 500; }
.cs-row h3 a { text-decoration: none; }
.cs-row h3 a:hover { color: var(--wp--preset--color--amber-deep); }
.cs-status {
  display: inline-block;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3em 0.8em;
  border-radius: 2px;
  border: 1px solid #C9C4B6;
  color: var(--wp--preset--color--slate);
  white-space: nowrap;
}
.cs-status.is-published {
  background: var(--wp--preset--color--amber);
  border-color: var(--wp--preset--color--amber);
  color: var(--wp--preset--color--ink);
}

/* ---------- Dark sections ---------- */
.cs-on-dark a { color: var(--wp--preset--color--white); }
.cs-on-dark a:hover { color: var(--wp--preset--color--amber); }

/* ---------- Testimonials ---------- */
.cs-quote {
  border-left: 2px solid var(--wp--preset--color--amber);
  padding-left: 1.5rem;
}
.cs-quote p:first-child {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.25rem;
  line-height: 1.5;
  font-style: italic;
}
.cs-quote cite {
  font-style: normal;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--wp--preset--color--slate);
}

/* ---------- Timeline (About) ---------- */
.cs-timeline .cs-row { border-top: 1px solid #D8D4C9; padding: 1.5rem 0; }
.cs-timeline .cs-row:last-child { border-bottom: 1px solid #D8D4C9; }
.cs-timeline .cs-year {
  font-family: var(--wp--preset--font-family--mono);
  color: var(--wp--preset--color--amber-deep);
  font-size: 0.9375rem;
}

/* ---------- Header ---------- */
.cs-header {
  border-bottom: 1px solid rgba(236, 233, 225, 0.12);
}
.cs-header .wp-block-site-title a {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.9375rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 600;
}
.cs-header .wp-block-navigation a {
  font-size: 0.9375rem;
}

/* ---------- Footer ---------- */
.cs-footer {
  border-top: 1px solid rgba(236, 233, 225, 0.12);
}
.cs-footer .wp-block-heading {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--mist);
  font-weight: 500;
}
.cs-footer p, .cs-footer li { font-size: 0.9375rem; }
.cs-footer a { text-decoration: none; }
.cs-footer a:hover { color: var(--wp--preset--color--amber); }

/* ---------- Forms (plugin-rendered) inherit the system ---------- */
.cs-form input[type="text"],
.cs-form input[type="email"],
.cs-form select,
.cs-form textarea {
  font-family: var(--wp--preset--font-family--body);
  border: 1px solid #C9C4B6;
  border-radius: 2px;
  padding: 0.7em 0.9em;
  width: 100%;
  background: var(--wp--preset--color--white);
}
.cs-form input:focus, .cs-form select:focus, .cs-form textarea:focus {
  outline: 2px solid var(--wp--preset--color--amber);
  outline-offset: 1px;
}

/* ---------- Focus visibility everywhere ---------- */
a:focus-visible, button:focus-visible, .wp-element-button:focus-visible {
  outline: 2px solid var(--wp--preset--color--amber-deep);
  outline-offset: 2px;
}