/*
  Clergy Equip Platform Front Door Styles
  Purpose: Styles the static .com page for the full Clergy Equip platform.
  Owner: Bishop Robert Warren Lyons, Jr.
  Maintenance: Shared visual tokens live in :root. The design keeps the clean
  structure of the first index while using the warmer image direction from
  Index_3.
*/

:root {
  --charcoal: #171713;
  --green: #25382c;
  --green-deep: #17251d;
  --green-soft: #e6eadf;
  --ivory: #f8f4ea;
  --white: #ffffff;
  --gold: #b9923d;
  --gold-soft: #ddc78a;
  --wood: #6f4d32;
  --ink: #1d221e;
  --muted: #686d64;
  --line: rgba(37, 56, 44, 0.16);
  --line-light: rgba(248, 244, 234, 0.18);
  --shadow: 0 24px 70px rgba(23, 23, 19, 0.16);
  --max-width: 1160px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--ivory);
  font-family: "Lato", "Segoe UI", Arial, sans-serif;
  line-height: 1.65;
}

a {
  color: inherit;
  text-decoration: none;
}

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

p,
h1,
h2,
h3 {
  margin: 0;
}

/* Header */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px clamp(18px, 4vw, 54px);
  color: var(--ivory);
  background: linear-gradient(180deg, rgba(23, 23, 19, 0.82), rgba(23, 23, 19, 0.2));
  backdrop-filter: blur(6px);
}

.brand,
.site-nav {
  display: inline-flex;
  align-items: center;
}

.brand {
  flex-shrink: 0;
  gap: 10px;
  font-weight: 900;
}

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(221, 199, 138, 0.72);
  border-radius: 50%;
  color: var(--gold-soft);
  font-size: 12px;
  letter-spacing: 1px;
}

.brand-name {
  font-size: 15px;
}

.site-nav {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  color: rgba(248, 244, 234, 0.86);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* phones carry short room names; the full names return at tablet width */
.site-nav .full { display: none; }
.site-nav .short { display: inline; }

.site-nav a {
  transition: color 220ms ease;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--gold-soft);
}

.nav-action {
  color: var(--gold-soft);
}

/* Hero */
.hero {
  position: relative;
  min-height: 88svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--ivory);
  background: var(--charcoal);
}

.hero-image,
.hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-image {
  object-fit: cover;
}

.hero-shade {
  background:
    linear-gradient(90deg, rgba(23, 23, 19, 0.9), rgba(23, 23, 19, 0.58), rgba(23, 23, 19, 0.22)),
    linear-gradient(180deg, rgba(23, 23, 19, 0.08), rgba(23, 23, 19, 0.92));
}

.hero-content {
  position: relative;
  z-index: 2;
  width: min(940px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(84px, 12vw, 122px) 0 clamp(112px, 13vw, 138px);
}

.eyebrow,
.section-kicker {
  margin-bottom: 14px;
  color: var(--gold-soft);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.hero h1,
h2 {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-weight: 700;
}

.hero h1 {
  max-width: 870px;
  font-size: clamp(68px, 13vw, 136px);
  line-height: 0.96;
}

.hero-subtitle {
  max-width: 780px;
  margin-top: 8px;
  color: var(--gold-soft);
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(30px, 5vw, 56px);
  font-style: italic;
  line-height: 1.02;
}

.hero-copy {
  max-width: 660px;
  margin-top: 22px;
  color: rgba(248, 244, 234, 0.84);
  font-size: clamp(17px, 2vw, 21px);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

/* Clear the absolute platform strip: with two hero actions the wrapped
   row slid under the strip on narrow screens. The strip is 3 rows on
   phones, 2 rows to 1023px, 1 row from 1024px (no clearance needed).
   Scoped off .hero-compact -- the Library hero carries no strip. */
@media (max-width: 479px) {
  .hero:not(.hero-compact) {
    padding-bottom: 220px;
  }
}

@media (min-width: 480px) and (max-width: 1023px) {
  .hero:not(.hero-compact) {
    padding-bottom: 160px;
  }
}

.hero-note {
  position: absolute;
  right: clamp(18px, 5vw, 72px);
  bottom: clamp(90px, 10vw, 126px);
  z-index: 2;
  display: none;
  width: 210px;
  padding-left: 18px;
  border-left: 1px solid rgba(221, 199, 138, 0.52);
  color: rgba(248, 244, 234, 0.72);
}

.hero-note span {
  display: block;
  margin-bottom: 10px;
  color: var(--gold-soft);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.hero-note p {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: 22px;
  line-height: 1.14;
}

.hero-platform-strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid rgba(248, 244, 234, 0.2);
  background: rgba(23, 23, 19, 0.66);
  backdrop-filter: blur(8px);
}

.platform-leg {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 12px clamp(12px, 3vw, 28px);
  border-right: 1px solid rgba(248, 244, 234, 0.14);
  color: rgba(248, 244, 234, 0.86);
  transition: background 220ms ease, color 220ms ease;
}

.platform-leg:hover,
.platform-leg:focus-visible {
  color: var(--ivory);
  background: rgba(221, 199, 138, 0.12);
}

.platform-number {
  color: var(--gold-soft);
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(26px, 5vw, 42px);
  font-style: italic;
  line-height: 0.9;
}

.platform-label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

/* five legs: on the narrowest screens the strip runs 2 + 2 + 1,
   with the fifth leg carrying the full row */
.platform-leg:nth-child(5) {
  grid-column: 1 / -1;
}

/* Compact hero for interior pages (no platform strip) */
.hero-compact {
  min-height: 62svh;
}

.hero-compact h1 {
  font-size: clamp(52px, 9vw, 104px);
}

.hero-compact .hero-content {
  padding: clamp(110px, 15vw, 150px) 0 clamp(64px, 9vw, 96px);
}

/* Library hero jump-strip: reuses the .hero-platform-strip component as three
   category jump links. The compound .shelf-strip modifier (specificity 0,2,0)
   overrides the homepage's five-leg span choreography with a plain track --
   stacked on phones, three-up from 600px -- and neutralizes the platform-leg
   span rules. .hero-shelf adds bottom clearance on the hero content so the
   absolutely-positioned strip never covers the copy. The homepage clearance
   rules stay scoped to .hero:not(.hero-compact) and are untouched. */
.hero-platform-strip.shelf-strip {
  grid-template-columns: 1fr;
}

.hero-platform-strip.shelf-strip .platform-leg {
  grid-column: auto;
}

.hero-shelf .hero-content {
  padding-bottom: 220px;
}

@media (min-width: 600px) {
  .hero-platform-strip.shelf-strip {
    grid-template-columns: repeat(3, 1fr);
  }

  .hero-shelf .hero-content {
    padding-bottom: 124px;
  }
}

/* Buttons */
.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 13px 20px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.4px;
  transition: background 220ms ease, border-color 220ms ease, color 220ms ease;
}

.button-primary {
  color: var(--charcoal);
  background: var(--gold);
}

.button-primary:hover,
.button-primary:focus-visible {
  background: var(--gold-soft);
}

.button-secondary {
  color: var(--ivory);
  border-color: rgba(248, 244, 234, 0.42);
  background: rgba(248, 244, 234, 0.08);
}

.button-secondary:hover,
.button-secondary:focus-visible {
  border-color: var(--gold-soft);
  color: var(--gold-soft);
}

.button-dark {
  color: var(--ivory);
  background: var(--green);
}

.button-dark:hover,
.button-dark:focus-visible {
  background: var(--green-deep);
}

/* Shared Sections */
.section {
  padding: clamp(64px, 9vw, 108px) clamp(18px, 4vw, 48px);
}

.section-inner {
  width: min(var(--max-width), 100%);
  margin: 0 auto;
}

.section-heading {
  max-width: 760px;
  margin-bottom: 34px;
}

h2 {
  color: var(--green);
  font-size: clamp(36px, 6vw, 68px);
  line-height: 1;
}

h3 {
  color: var(--green);
  font-size: 22px;
  line-height: 1.2;
}

.section-lead {
  max-width: 620px;
  margin-top: 18px;
  color: var(--muted);
  font-size: clamp(17px, 2vw, 20px);
}

/* Platform Orientation */
.intro-section {
  background: var(--white);
}

.intro-grid {
  display: grid;
  gap: 26px;
}

.intro-copy {
  display: grid;
  gap: 18px;
  color: var(--muted);
  font-size: clamp(17px, 2vw, 20px);
}

/* Five Legs */
.legs-section {
  background: var(--ivory);
}

.legs-grid {
  display: grid;
  gap: 16px;
}

.leg-card {
  min-height: 304px;
  display: flex;
  flex-direction: column;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 12px 36px rgba(23, 23, 19, 0.06);
}

.leg-card-featured {
  border-color: rgba(185, 146, 61, 0.52);
  background:
    linear-gradient(135deg, rgba(221, 199, 138, 0.24), rgba(255, 255, 255, 0)),
    var(--white);
}

.leg-number {
  color: var(--wood);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 2px;
}

.leg-label {
  margin-top: 36px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.leg-card h3 {
  margin-top: 10px;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: 30px;
  line-height: 1.06;
}

.leg-card p:not(.leg-label) {
  margin-top: 14px;
  color: var(--muted);
}

.status-pill {
  width: fit-content;
  margin-top: auto;
  padding-top: 24px;
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.leg-link {
  width: fit-content;
  margin-top: 12px;
  color: var(--gold);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.4px;
  transition: color 220ms ease;
}

.leg-link:hover,
.leg-link:focus-visible {
  color: var(--wood);
}

/* Library shelf: download slot pinned to the card foot, like the status pill */
.packet-action {
  margin-top: auto;
  padding-top: 24px;
}

/* Library spine: the series overview and contents list now live inside the
   <details class="packet-more"> disclosure, not open on the card. The card
   itself reads as a compact "spine". Row-height equalization comes from the
   grid (align-items: stretch by default) plus the margin-top:auto on
   .packet-action, so the overview no longer needs the flex:1 0 auto equalizer
   it carried when it sat open on the card. */
.leg-card p.packet-overview {
  font-size: 15px;
}

.packet-contents {
  margin-top: 22px;
}

.leg-card p.packet-contents-title {
  margin-top: 0;
  color: var(--wood);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.packet-contents ul {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}

.packet-contents li {
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}

.leg-card p.packet-meta {
  margin-top: 12px;
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

/* Library spine: type/terms tag (e.g. "Pastor Packet . Free"). Set in the
   meta typographic vocabulary (letterspaced caps), never a colored chip.
   Uses --wood for WCAG AA contrast on white; the gold accent stays reserved
   for the Scripture leg-label, which is the card's scanning key. */
.leg-card p.packet-tag {
  margin-top: 10px;
  color: var(--wood);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

/* Library spine: the "About this series" disclosure. Native <details>, no JS.
   The summary reuses the gold .leg-link vocabulary; the caret is CSS-drawn
   from two borders (never a glyph or emoji) and rotates from a right chevron
   to a down chevron when the disclosure is [open]. The download button stays
   pinned to the card foot by .packet-action's margin-top:auto, so the closed
   disclosure sits in the info cluster and the action reads as the foot. */
.packet-more {
  margin-top: 18px;
}

.packet-more > summary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  color: var(--wood);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.4px;
  list-style: none;
  cursor: pointer;
  transition: color 220ms ease;
}

/* strip the native disclosure triangle in WebKit/Blink */
.packet-more > summary::-webkit-details-marker {
  display: none;
}

.packet-more > summary:hover {
  color: var(--gold);
}

/* visible keyboard focus ring on the disclosure control */
.packet-more > summary:focus-visible {
  outline: 2px solid var(--wood);
  outline-offset: 3px;
  border-radius: 2px;
}

/* CSS-drawn caret: the bottom-right corner of a box, rotated to a right
   chevron when closed and a down chevron when [open] */
.packet-caret {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 220ms ease;
}

.packet-more[open] .packet-caret {
  transform: rotate(45deg);
}

/* the disclosed overview + contents body */
.packet-more-body {
  padding-top: 16px;
}

/* =========================================================================
   Per-resource Library share pages  (library/<slug>.html) + card Share control
   ADDED in the shareable-URL pass. FLAGGED FOR BEZALEL SIGN-OFF. Introduces no
   new color token and no new type family: everything below reuses the existing
   :root palette (--green, --gold, --wood, --muted, --line, --ivory, --white)
   and the established type ramp. Two additions only:
     1. .share-link -- a subordinate, text-style Share button used beside the
        primary .button-dark download on both the library.html cards and the
        detail pages. A <button> is required because js/share.js wires any
        .share-btn; this resets native button chrome so it reads as the quiet
        gold text link the shelf already uses (same vocabulary as .leg-link),
        never competing with the green download CTA. display:flex makes it a
        block-level box so it stacks below the inline-flex .button download.
     2. .resource-detail -- a readable-measure wrapper (about 60-75 characters
        per line) that centers the single resource card on the detail page.
   ========================================================================= */
.share-link {
  display: flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--wood);
  font-family: inherit;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: color 220ms ease;
}

.share-link:hover,
.share-link:focus-visible {
  color: var(--gold);
}

/* visible keyboard focus ring, matching the .packet-more summary control */
.share-link:focus-visible {
  outline: 2px solid var(--wood);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Detail page: constrain the single resource card to a comfortable reading
   measure and center it in the section. */
.resource-detail {
  width: min(620px, 100%);
  margin: 0 auto;
}

/* Library category rooms: the fixed .site-header overlays the top of the
   page, so anchored jumps from the hero strip offset each room's heading
   clear of it (header height plus a little breathing room). */
.shelf-room {
  scroll-margin-top: 84px;
}

/* Library imprint line */
.imprint-section {
  padding-top: 0;
}

.imprint-line {
  max-width: 640px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

/* Scripture Anchor */
.scripture-section {
  padding: clamp(64px, 9vw, 108px) clamp(18px, 4vw, 48px);
  color: var(--ivory);
  background: var(--charcoal);
}

.scripture-inner {
  width: min(1040px, 100%);
  margin: 0 auto;
  text-align: center;
}

.scripture-section h2 {
  color: var(--ivory);
}

.scripture-section p:not(.section-kicker) {
  max-width: 760px;
  margin: 24px auto 0;
  color: rgba(248, 244, 234, 0.76);
  font-size: clamp(17px, 2vw, 21px);
}

.scripture-quote {
  max-width: 720px;
  margin: 34px auto 0;
  padding: 22px 26px;
  border-left: 2px solid var(--gold);
  text-align: left;
  background: rgba(248, 244, 234, 0.05);
}

.scripture-quote p {
  color: var(--ivory);
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(22px, 3vw, 30px);
  font-style: italic;
  line-height: 1.3;
}

.scripture-quote sup {
  color: var(--gold-soft);
  font-size: 0.55em;
  font-style: normal;
}

.scripture-quote cite {
  display: block;
  margin-top: 12px;
  color: var(--gold-soft);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* App Detail */
.app-section {
  background: var(--green-soft);
}

.app-grid {
  display: grid;
  gap: 32px;
}

.module-list {
  display: grid;
  border-top: 1px solid rgba(37, 56, 44, 0.18);
}

.module-item {
  display: grid;
  gap: 10px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(37, 56, 44, 0.18);
}

.module-item p {
  color: var(--muted);
}

/* Access */
.access-section {
  background:
    linear-gradient(135deg, rgba(221, 199, 138, 0.28), rgba(248, 244, 234, 0.56)),
    var(--ivory);
}

.access-panel {
  display: grid;
  gap: 26px;
  align-items: center;
  padding: clamp(28px, 5vw, 46px);
  border: 1px solid rgba(185, 146, 61, 0.42);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: var(--shadow);
}

.access-panel p:not(.section-kicker) {
  max-width: 700px;
  margin-top: 16px;
  color: var(--muted);
}

.access-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Footer */
.site-footer {
  padding: 28px 18px;
  color: rgba(248, 244, 234, 0.72);
  background: var(--charcoal);
  text-align: center;
  font-size: 13px;
}

.site-footer .footer-tag {
  margin-top: 8px;
  color: rgba(248, 244, 234, 0.46);
  font-size: 12px;
}

@media (min-width: 480px) {
  /* five legs in two balanced rows: three above, two below */
  .hero-platform-strip {
    grid-template-columns: repeat(6, 1fr);
  }

  .platform-leg {
    grid-column: span 2;
  }

  .platform-leg:nth-child(4),
  .platform-leg:nth-child(5) {
    grid-column: span 3;
  }
}

@media (min-width: 768px) {
  .site-nav {
    gap: 18px;
    font-size: 12px;
  }

  .site-nav .full { display: inline; }
  .site-nav .short { display: none; }

  .intro-grid,
  .app-grid {
    grid-template-columns: 0.9fr 1.1fr;
    align-items: start;
  }

  .legs-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Homepage only: the fifth leg card carries the full row at tablet width.
     Scoped :not(.packet-grid) so the library packet grid never inherits this
     placement -- that latent bug misplaced cards the moment a 5th packet
     landed. */
  .legs-grid:not(.packet-grid) .leg-card:nth-child(5) {
    grid-column: 1 / -1;
  }

  /* Library packet grid: plain two-up track at tablet; cards flow top-left in
     reading order with no nth-child choreography. */
  .packet-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .module-item {
    grid-template-columns: 0.42fr 1fr;
    gap: 28px;
  }

  .access-panel {
    grid-template-columns: 1fr auto;
  }

  .access-actions {
    justify-content: flex-end;
  }
}

@media (min-width: 1024px) {
  .hero-note {
    display: block;
  }

  /* one row of five in the hero strip */
  .hero-platform-strip {
    grid-template-columns: repeat(5, 1fr);
  }

  .platform-leg,
  .platform-leg:nth-child(4),
  .platform-leg:nth-child(5) {
    grid-column: auto;
  }

  /* Homepage five-leg choreography: three above, two centered below. Scoped
     :not(.packet-grid) so the library packet grid keeps its own plain track
     and never inherits the six-column span placement. */
  .legs-grid:not(.packet-grid) {
    grid-template-columns: repeat(6, 1fr);
  }

  .legs-grid:not(.packet-grid) .leg-card {
    grid-column: span 2;
  }

  .legs-grid:not(.packet-grid) .leg-card:nth-child(4) {
    grid-column: 2 / span 2;
  }

  .legs-grid:not(.packet-grid) .leg-card:nth-child(5) {
    grid-column: span 2;
  }

  /* Library packet grid: plain three-up track at desktop. */
  .packet-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1280px) {
  .site-header {
    padding-left: 64px;
    padding-right: 64px;
  }
}