/* =========================================================
   Trees A Crowd — Homepage 2026 (clean), October 2026
   Loaded after homepage-2026.css (shared colours, buttons, chips,
   mini player) and only by homepage-clean.php. Scoped to .tac-clean.
   ========================================================= */

/* Skip link: hidden until it receives keyboard focus */
.tac-skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 3000;
  padding: 10px 16px;
  border-radius: 6px;
  background: #fff;
  color: #404040;
  font-family: "Encode Sans", sans-serif;
  font-weight: 700;
  text-decoration: none;
}
.tac-skip:focus { left: 16px; outline: 3px solid #404040; outline-offset: 2px; }
.tac-clean:focus { outline: none; }

.tac-clean { background: var(--tac-cream); }

/* ---------- The show (top of the page) ---------- */

.tac-c-hero {
  /* clears the hanging logo from menu.php */
  padding: 56px 0 44px;
}
.tac-c-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.tac-c-cover {
  margin: 0;
  width: 100%;
  max-width: 420px;
}
.tac-c-cover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 14px 32px rgba(40, 26, 12, 0.22), 0 2px 6px rgba(40, 26, 12, 0.12);
}
.tac-c-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.tac-clean .tac-c-kicker {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a63a0c; /* 5.9:1 on cream */
}
.tac-clean .tac-c-title {
  font-size: clamp(30px, 7vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--tac-text);
  text-wrap: balance;
}
.tac-clean .tac-c-intro {
  font-size: 18px;
  line-height: 1.5;
  max-width: 30em;
  color: var(--tac-text);
}
.tac-clean .tac-c-play {
  margin-top: 6px;
  min-height: 58px;
}
.tac-clean .tac-c-now {
  margin-top: -4px;
  font-size: 15px;
  color: var(--tac-brown);
}
.tac-clean .tac-c-now a,
.tac-clean .tac-c-now a:visited {
  font-weight: 700;
  color: var(--tac-brown);
  text-decoration: underline;
  text-decoration-color: rgba(241, 101, 34, 0.6);
  text-underline-offset: 3px;
}
.tac-clean .tac-c-now a:hover { color: #a63a0c; }

.tac-c-apps {
  position: relative; /* the #listen anchor sits just above */
  margin-top: 8px;
}
.tac-clean .tac-c-apps__label {
  font-size: 15px;
  font-weight: 700;
  color: var(--tac-text);
  margin: 0 0 10px;
}
.tac-c-apps__list,
.tac-c-more__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tac-c-more summary { list-style: none; cursor: pointer; }
.tac-c-more summary::-webkit-details-marker { display: none; }
.tac-c-more summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.tac-c-more details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
/* summary styled as a chip (the shared chip rule only covers links) */
.tac-clean summary.tac-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--tac-white);
  border: 1.5px solid rgba(93, 74, 54, 0.3);
  color: var(--tac-brown);
  font-size: 15px;
  font-weight: 700;
}
.tac-clean summary.tac-chip:hover { border-color: var(--tac-brown); }
.tac-clean .tac-c-more__list { margin-top: 8px; } /* beats the shared .tac-home ul reset */
/* opening "More apps" gives the extra apps a full row of their own */

/* ---------- Sections ---------- */

.tac-c-sec { padding: 40px 0 8px; }
.tac-c-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 14px;
}
.tac-clean .tac-c-h2 {
  font-size: 26px;
  line-height: 1.15;
  color: var(--tac-text);
}

/* Recent episodes */
.tac-c-rows {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tac-c-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  border-radius: 10px;
  background: var(--tac-white);
}
.tac-c-row__art {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--tac-peach);
}
.tac-c-row__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tac-c-row__text { flex: 1 1 auto; min-width: 0; }
.tac-clean .tac-c-row__title {
  font-size: 18px;
  line-height: 1.25;
}
.tac-clean .tac-c-row__title a,
.tac-clean .tac-c-row__title a:visited {
  color: var(--tac-text);
  text-decoration: none;
}
/* the whole row is clickable through the title link; the play button stays on top */
.tac-clean .tac-c-row__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
}
.tac-clean .tac-c-row:hover .tac-c-row__title a {
  text-decoration: underline;
  text-decoration-color: var(--tac-orange);
  text-underline-offset: 3px;
}
.tac-clean .tac-c-row__meta {
  margin-top: 4px;
  font-size: 14px;
  color: var(--tac-brown);
}
.tac-c-row__play {
  position: relative;
  z-index: 1;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--tac-orange);
  background: var(--tac-white);
  color: var(--tac-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.tac-c-row__play:hover,
.tac-c-row__play.is-playing {
  background: var(--tac-orange);
  color: var(--tac-white);
}

/* Explore */
.tac-c-tiles {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tac-clean a.tac-c-tile,
.tac-clean a.tac-c-tile:visited {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: var(--tac-white);
  color: var(--tac-text);
  text-decoration: none;
}
.tac-c-tile img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.tac-c-tile__title {
  display: block;
  padding: 16px 18px 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--tac-text);
}
.tac-c-tile__text {
  display: block;
  padding: 6px 18px 18px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--tac-brown);
}
.tac-clean a.tac-c-tile:hover .tac-c-tile__title {
  text-decoration: underline;
  text-decoration-color: var(--tac-orange);
  text-underline-offset: 4px;
}

/* Support */
.tac-c-support {
  margin-top: 48px;
  background: var(--tac-peach);
}
.tac-c-support__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 36px;
  padding-bottom: 36px;
}
.tac-clean .tac-c-support p {
  margin-top: 6px;
  font-size: 17px;
  color: var(--tac-text);
}
.tac-c-support__btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* Visible keyboard focus everywhere on the page */
.tac-clean a:focus-visible,
.tac-clean button:focus-visible,
.tac-clean summary:focus-visible {
  outline: 3px solid var(--tac-text);
  outline-offset: 3px;
}
.tac-clean .tac-c-row__title a:focus-visible { outline: none; }
.tac-clean .tac-c-row__title a:focus-visible::after { outline: 3px solid var(--tac-text); outline-offset: 2px; }

/* ---------- Phones and tablets: Play straight under the cover ----------
   so the cover and the Play button fit on the first screen. The words follow.
   (Only the order on screen changes; screen readers still meet the heading first,
   and the Play button is still the first thing a keyboard reaches.) */
@media (max-width: 55.99em) {
  .tac-c-hero__grid { gap: 0; }
  .tac-c-copy { display: contents; }
  .tac-c-hero__grid > * { justify-self: start; }
  .tac-c-cover { order: 1; margin-bottom: 18px; }
  .tac-clean .tac-c-play { order: 2; margin-top: 0; width: 100%; max-width: 420px; justify-self: stretch; }
  /* phones: fewer lines – the cover already says "The nature podcast", and Recent episodes names the latest */
  .tac-clean .tac-c-now,
  .tac-clean .tac-c-kicker { display: none; }
  .tac-clean .tac-c-title { order: 5; margin-top: 32px; }
  .tac-clean .tac-c-intro { order: 6; margin-top: 14px; }
  .tac-c-apps { order: 7; margin-top: 30px; justify-self: stretch; }
}
@media (min-width: 40em) and (max-width: 55.99em) {
  .tac-clean .tac-c-play,
  .tac-c-apps { max-width: 380px; } /* same width as the cover */
}

/* App buttons, every screen size: an even grid – two across, "More apps" full width,
   the extra three in a row – 420px wide at most (380px on tablets, the width of the cover) */
.tac-c-apps { width: 100%; max-width: 420px; }
.tac-clean .tac-c-apps__label { margin-bottom: 12px; }
.tac-c-apps__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tac-c-apps__list > li.tac-c-more { grid-column: 1 / -1; }
.tac-clean .tac-c-more__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.tac-clean .tac-c-apps .tac-chip { width: 100%; justify-content: center; min-height: 48px; padding: 0 10px; }

/* ---------- Larger screens ---------- */

@media (min-width: 40em) {
  .tac-c-hero { padding-top: 72px; }
  .tac-c-cover { max-width: 380px; }
  .tac-c-sec { padding-top: 56px; }
  .tac-clean .tac-c-h2 { font-size: 30px; }
  .tac-c-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 56em) {
  .tac-c-hero { padding: 40px 0 24px; }
  .tac-c-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
    gap: 56px;
    align-items: center;
  }
  .tac-c-cover { order: 2; max-width: none; }
  .tac-c-copy { order: 1; padding-top: 60px; } /* keeps the words clear of the hanging logo */
  .tac-c-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64em) {
  .tac-c-copy { padding-top: 72px; }
}