/* PodcaCity - the site's footer (includes/site-footer.php), in its three
   layouts: the home page's (.pc-footer--page), the app screens' compact bar
   (.pc-footer--bar) and the menu drawer's (.pc-footer--drawer). The markup is
   the same in all three - logo, address and mail, links and copyright - and
   the layouts reorder it. From 1024px the page and the bar are the same
   one-line footer: links and copyright at the start, the address and mail
   centred, the logo at the end. */

.pc-footer { color: #C8CCD0; }
.pc-footer__link { color: #C8CCD0; text-decoration: none; }
.pc-footer__link:hover { color: #66F0FF; }
.pc-footer__sep { display: block; width: 1px; background: #1E2530; }
.pc-footer__copy { margin: 0; color: #A3B2C2; }
.pc-footer__mail { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 5px; }
.pc-footer__maillabel { color: #C8CCD0; }
.pc-footer__maillink { font-weight: 700; color: #00E5FF; text-decoration: none; }
/* The address takes the line above the mail, on every width. */
.pc-footer__addr { flex: 0 0 100%; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.pc-footer__links { display: flex; align-items: center; justify-content: center; }

.pc-footer__logo { font-family: 'Exo 2', sans-serif; font-weight: 900; line-height: 1; }
.pc-footer__podca, .pc-footer__city {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.pc-footer__podca { background-image: linear-gradient(135deg, #00E5FF, #00AACC); }
.pc-footer__city  { background-image: linear-gradient(135deg, #FF2D8C, #CC1A6B); }

/* ── The home page, on a phone: stacked and centred ─────────────────────── */
.pc-footer--page { margin-top: 28px; border-top: 1px solid #1E2530; background: #0A0D12; padding: 18px 16px 10px; text-align: center; }
.pc-footer--page .pc-footer__logo { font-size: 18px; }
.pc-footer--page .pc-footer__mail { margin-top: 22px; gap: 6px; }
.pc-footer--page .pc-footer__addr { margin-bottom: 2px; font-size: 13px; }
.pc-footer--page .pc-footer__maillabel { font-size: 13px; }
.pc-footer--page .pc-footer__maillink { font-size: 15px; border-bottom: 1px solid rgba(0,229,255,0.35); }
.pc-footer--page .pc-footer__meta { display: contents; }
.pc-footer--page .pc-footer__links { margin-top: 14px; gap: 12px; font-size: 13px; }
.pc-footer--page .pc-footer__sep { height: 12px; }
.pc-footer--page .pc-footer__copy { margin-top: 22px; font-size: 12.5px; line-height: 1.6; }

/* ── The app screens: nothing on a phone - the menu drawer carries it ───── */
.pc-footer--bar { display: none; }

/* ── The menu drawer: a column pinned to the drawer's bottom, no logo ───── */
.pc-footer--drawer {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid #1E2530;
  display: flex;
  flex-direction: column;
  gap: 9px;
  text-align: center;
}
.pc-footer--drawer .pc-footer__addr { font-size: 12px; }
.pc-footer--drawer .pc-footer__maillabel { font-size: 12px; }
.pc-footer--drawer .pc-footer__maillink { font-size: 12.5px; }
.pc-footer--drawer .pc-footer__meta { display: flex; flex-direction: column; gap: 9px; }
.pc-footer--drawer .pc-footer__links { flex-wrap: wrap; gap: 6px 10px; margin-top: 2px; }
.pc-footer--drawer .pc-footer__link { font-size: 12.5px; }
.pc-footer--drawer .pc-footer__sep { height: 11px; }
.pc-footer--drawer .pc-footer__copy { font-size: 11px; margin-top: 2px; }

/* ── From 1024px: the page and the bar are one line ─────────────────────── */
@media (min-width: 1024px) {
  .pc-footer--page,
  .pc-footer--bar {
    display: grid;
    flex: none;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 24px;
    margin: 0;
    padding: 7px max(32px, calc((100% - 860px) / 2)) 8px;
    border-top: 1px solid #1E2530;
    background: #0A0D12;
    text-align: start;
  }
  /* The home page holds its content to its 1080 column, after a gap. */
  .pc-footer--page { margin-top: 60px; padding-inline: max(48px, calc((100% - 1080px) / 2)); }

  .pc-footer--page .pc-footer__meta,
  .pc-footer--bar .pc-footer__meta { order: 1; display: flex; align-items: center; gap: 10px; font-size: 11.5px; }
  .pc-footer--page .pc-footer__links,
  .pc-footer--bar .pc-footer__links { margin: 0; gap: 10px; font-size: inherit; }
  .pc-footer--page .pc-footer__sep,
  .pc-footer--bar .pc-footer__sep { height: 10px; background: #3A4450; }
  /* The bar before the copyright - a separator in the markup would also show
     in the phone's stacked footer, so this layout draws its own. */
  .pc-footer--page .pc-footer__copy,
  .pc-footer--bar .pc-footer__copy { display: flex; align-items: center; gap: 10px; margin: 0; font-size: inherit; }
  .pc-footer--page .pc-footer__copy::before,
  .pc-footer--bar .pc-footer__copy::before { content: ''; width: 1px; height: 10px; background: #3A4450; }

  .pc-footer--page .pc-footer__mail,
  .pc-footer--bar .pc-footer__mail { order: 2; margin: 0; gap: 5px; row-gap: 2px; font-size: 11.5px; }
  .pc-footer--page .pc-footer__addr,
  .pc-footer--bar .pc-footer__addr { margin: 0; font-size: inherit; white-space: nowrap; }
  .pc-footer--page .pc-footer__maillabel,
  .pc-footer--bar .pc-footer__maillabel { font-size: inherit; white-space: nowrap; }
  /* No underline at rest - it appears on hover as the mouse indication. */
  .pc-footer--page .pc-footer__maillink,
  .pc-footer--bar .pc-footer__maillink { font-size: 12px; border-bottom: 1px solid transparent; }
  .pc-footer--page .pc-footer__maillink:hover,
  .pc-footer--bar .pc-footer__maillink:hover { border-bottom-color: rgba(0,229,255,0.35); }

  /* justify-self: end is the left edge here - the document is RTL. */
  .pc-footer--page .pc-footer__logo,
  .pc-footer--bar .pc-footer__logo { order: 3; justify-self: end; font-size: 14px; }
}