/* RecycleOn state sites — extras on top of the DePoly system in style.css:
   the state's palette colour as an accent, labelled image placeholders, the county/provider directory accordion. */

body.state-oregon { --state: #325025; }
body.state-colorado { --state: #002868; }
body.state-oregon .tag::before, body.state-colorado .tag::before { background: var(--state); }
body.state-oregon .tag.tag-blue::before, body.state-colorado .tag.tag-blue::before { background: var(--blue); }
body.state-oregon .tag.tag-ink::before, body.state-colorado .tag.tag-ink::before { background: var(--ink); }
.big-title .l-line.accent-state.is-on { color: var(--state); }
.hero-title em { font-style: normal; color: var(--state); }

/* ---- placeholders (swap for licensed photography) ---- */
.ph {
  position: relative; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-radius: .5vw; overflow: hidden; color: var(--ink-70); text-decoration: none;
  background-color: var(--ghost);
  background-image: repeating-linear-gradient(135deg, rgba(11, 34, 48, .06) 0 1px, transparent 1px 11px), linear-gradient(135deg, var(--ghost) 0%, var(--bg) 100%);
}
.ph-label {
  font-family: var(--mono); font-size: 3.2vw; letter-spacing: .08em; text-transform: uppercase; line-height: 1;
  padding: 2vw 3.4vw; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(255, 255, 255, .75); white-space: nowrap;
}
.ph-sm { aspect-ratio: 4 / 3; width: 100%; margin-bottom: 1.5vw; }
.ph-avatar { width: 12vw; height: 12vw; border-radius: 50%; flex: 0 0 auto; font-family: var(--mono); font-size: 3.4vw; letter-spacing: .06em; color: var(--ink); }
.ph-video, .ph-map { aspect-ratio: 16 / 9; width: 100%; flex-direction: column; gap: 4vw; }
.ph-video .btn { position: relative; z-index: 1; }
.ph-video:hover { border-color: var(--ink); }

/* materials list: illustration placeholder above each item; glass sits apart from the bin items */
.item-list.materials .item.item-glass { box-shadow: inset 0 0 0 1px var(--line-strong); border-radius: .5vw; }
.item-list.materials .item.item-glass .item-cat { color: var(--blue-deep); }
.guide-row { display: flex; flex-wrap: wrap; align-items: center; gap: 3vw; margin-top: 4vw; }
.guide-row select { flex: 1 1 60%; min-width: 200px; max-width: 420px; }
.team-member { align-items: center; }
.team-member .team-who { display: flex; align-items: center; gap: 3.5vw; min-width: 0; }

/* ---- directory accordion (counties / service providers) ---- */
.dir-acc { border-top: 1px solid var(--line-strong); }
.s-acc-item { border-bottom: 1px solid var(--line-strong); }
.acc-head {
  width: 100%; display: flex; align-items: center; gap: 3.5vw; padding: 4.5vw 0; margin: 0;
  background: none; border: 0; text-align: left; font: inherit; color: var(--ink); cursor: pointer;
  font-size: 4.8vw; letter-spacing: -.02em; line-height: 1.2; font-weight: 500;
}
.acc-head .acc-no { font-family: var(--mono); font-size: 3.2vw; letter-spacing: .06em; color: var(--ink-70); min-width: 3em; }
.acc-head svg { width: 4.5vw; height: 4.5vw; margin-left: auto; flex: 0 0 auto; transition: transform .45s var(--ease); }
.acc-head:hover { color: var(--state); }
.s-acc-item.open .acc-head svg { transform: rotate(180deg); }
.acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.s-acc-item.open .acc-body { grid-template-rows: 1fr; }
.acc-body > div { overflow: hidden; }
.acc-inner { padding: 0 0 5vw calc(3em + 3.5vw); font-size: 3.7333vw; line-height: 1.55; color: var(--ink-70); }
.acc-inner p, .acc-inner ul { margin: 0 0 1em; }
.acc-inner ul { padding-left: 1.2em; list-style: disc; }
.acc-inner a { color: var(--blue-deep); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.acc-inner a:hover { color: var(--green-deep); }
.acc-inner h5, .acc-inner h6, .acc-inner strong { color: var(--ink); font-weight: 500; }
.acc-inner h5, .acc-inner h6 { font-size: 1.05em; margin: 1.2em 0 .4em; }
.acc-inner > div > :first-child, .acc-inner > :first-child { margin-top: 0; }

/* rich accordion bodies (timeline, EPR phases) */
.enhanced-desc p, .enhanced-m--desc p { margin: 0 0 .8em; }
.enhanced-desc ul, .enhanced-m--desc ul { list-style: disc; padding-left: 1.2em; margin: 0; display: grid; gap: .5em; }
.enhanced-desc strong, .enhanced-m--desc strong { color: var(--ink); font-weight: 500; }
.enhanced-desc a, .enhanced-m--desc a { color: var(--blue-deep); text-decoration: underline; text-underline-offset: .18em; }

/* news cards with a thumbnail (state sites only) */
.card-thumb { display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: .5vw; margin-bottom: 1.5vw; background: var(--ghost); }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); }
.card:hover .card-thumb img { transform: scale(1.04); }

@media (min-width: 1024px) {
  .ph-label { font-size: clamp(10px, .75vw, 13px); padding: .55vw 1vw; }
  .ph-sm { margin-bottom: .6vw; }
  .ph-avatar { width: 3.2vw; height: 3.2vw; font-size: clamp(10px, .8vw, 14px); }
  .ph-video, .ph-map { gap: 1.2vw; }
  .ph-map { aspect-ratio: 21 / 9; }
  .guide-row { gap: 1vw; margin-top: 1.5vw; }
  .team-member .team-who { gap: 1.2vw; }
  .acc-head { gap: 1.2vw; padding: 1.5vw 0; font-size: clamp(16px, 1.35vw, 26px); }
  .acc-head .acc-no { font-size: clamp(11px, .9375vw, 16px); }
  .acc-head svg { width: 1.2vw; height: 1.2vw; }
  .acc-inner { padding: 0 0 1.8vw calc(3em + 1.2vw); font-size: clamp(13px, .95vw, 17px); max-width: 60vw; }
  .card-thumb { margin-bottom: .6vw; }
}