/* ==========================================================================
   Radio Tucson — site chrome: the sticky header bar and the footer bar.

   Hand-written replacement (Sep 2026) for the Zyro/astro generated markup,
   which used opaque variable names (--v5ef47fbb for "logo height") and
   duplicated the whole nav twice per page, once for desktop and once for
   mobile. Everything tunable now lives in the :root block below.

   Breakpoint: 920px. Below it the bar becomes burger-left / logo-right and
   the nav collapses into a dropdown driven by a checkbox — no JavaScript
   runs on this site, so the :checked sibling selector is what opens it.
   ========================================================================== */

:root{
  /* bar */
  --rt-bar-h: 67px;               /* header and desktop footer are the same height */
  --rt-bar-bg: rgb(34,34,34);
  --rt-container: 1224px;
  --rt-gutter: 16px;

  /* logo */
  --rt-logo-w: 86px;
  --rt-logo-h: 59px;             /* 4px padding + 59 + 4px = the 67px bar */

  /* nav links — sized to match the hero tagline on the home page */
  --rt-nav-size: 20px;
  --rt-nav-tracking: .06em;
  --rt-nav-line: 30px;
  --rt-nav-color: rgb(241,241,241);
  --rt-nav-color-hover: rgb(184,192,204);
  --rt-nav-gap-mobile: 20px;

  /* footer */
  --rt-footer-email-size: 18px;
  --rt-btn-bg: rgb(136,136,136);
  --rt-btn-color: rgb(0,0,0);
  --rt-btn-h: 43px;
  --rt-btn-radius: 5px;
}

/* ---------- header ------------------------------------------------------ */

.rt-header{
  position: sticky; top: 0; z-index: 18;
  background: var(--rt-bar-bg);
}
.rt-header__inner{
  max-width: var(--rt-container);
  margin: 0 auto;
  padding: 4px var(--rt-gutter);
  box-sizing: border-box;
  min-height: var(--rt-bar-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* logo | nav | (balance) */
  align-items: center;
}
.rt-header__logo{
  grid-column: 2 / 3;
  display: block;
  width: var(--rt-logo-w); height: var(--rt-logo-h);
}
.rt-header__logo img{ width:100%; height:100%; object-fit:contain; vertical-align:middle; display:block }

/* ---------- nav --------------------------------------------------------- */

.rt-nav ul{
  display: flex; align-items: center;
  list-style: none; margin: 0; padding: 0;
}
.rt-nav a{
  display: inline-block;
  font-size: var(--rt-nav-size);
  line-height: var(--rt-nav-line);
  letter-spacing: var(--rt-nav-tracking);
  color: var(--rt-nav-color);
  text-decoration: none;
  white-space: nowrap;
}
.rt-nav a:hover,
.rt-nav a:focus-visible,
.rt-nav a[aria-current="page"]{
  color: var(--rt-nav-color-hover);
  text-decoration: underline;
  text-underline-offset: 7px;
}

/* the checkbox that drives the mobile menu: clipped, not display:none, so it
   stays keyboard-focusable and Space still toggles the menu */
.rt-nav-toggle{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
.rt-burger{ display:none }

/* ---------- desktop (>=920) --------------------------------------------- */

@media (min-width:920px){
  .rt-header__logo{ grid-column: 1 / 2; justify-self: start }
  .rt-nav{ grid-column: 2 / 3 }
  /* Link gaps ramp 28 -> 64px across 920..1180 so the centred nav never
     collides with the logo on narrow desktops and iPads. */
  .rt-nav ul{ gap: clamp(28px, calc(28px + (100vw - 920px) * 0.1385), 64px) }
}

/* ---------- mobile (<920) ----------------------------------------------- */

@media (max-width:919px){
  .rt-header{ padding: 0 var(--rt-gutter) }   /* burger/logo sit 32px in on phones */
  .rt-header__inner{ grid-template-columns: auto 1fr }
  .rt-burger{ grid-column: 1 / 2; justify-self: start }
  .rt-header__logo{ grid-column: 2 / 3; justify-self: end }

  .rt-burger{
    display:block; position:relative;
    width:24px; height:18px; cursor:pointer;
    transition: transform .4s ease-in-out .1s;
  }
  .rt-burger span{
    position:absolute; left:0; display:block;
    width:100%; height:2px; border-radius:2px;
    background: var(--rt-nav-color);
    transform-origin: 0;
    transition: transform .25s ease-in-out .1s, opacity .25s ease-in-out .1s, width .25s ease-in-out .1s;
  }
  .rt-burger span:nth-child(1){ top:0 }
  .rt-burger span:nth-child(2){ top:8px }
  .rt-burger span:nth-child(3){ top:16px }
  .rt-nav-toggle:focus-visible ~ .rt-burger{ outline:2px solid var(--rt-nav-color); outline-offset:4px }

  /* dropdown: positioned against .rt-header (sticky counts as positioned) so
     it spans the full viewport width, not the centred inner container */
  .rt-nav{
    position:absolute; top:100%; left:0; right:0;
    background: var(--rt-bar-bg);
    max-height:0; padding:0 var(--rt-gutter);
    visibility:hidden; overflow:hidden;
    transition: max-height .3s ease-out .1s, padding .5s .1s, visibility .6s;
  }
  .rt-nav ul{ flex-direction:column; align-items:flex-end; gap:var(--rt-nav-gap-mobile) }

  .rt-nav-toggle:checked ~ .rt-nav{
    visibility:visible;
    max-height: calc(100svh - var(--rt-bar-h));
    padding: 24px var(--rt-gutter);
    overflow-y:auto;
    box-shadow:0 6px 14px -10px #0000001a;
  }
  .rt-nav-toggle:checked ~ .rt-burger span:nth-child(1){ top:-1px; transform:rotate(45deg) }
  .rt-nav-toggle:checked ~ .rt-burger span:nth-child(2){ opacity:0; width:0 }
  .rt-nav-toggle:checked ~ .rt-burger span:nth-child(3){ transform:rotate(-45deg) }
}

/* ---------- footer ------------------------------------------------------ */

.rt-footer{ background: var(--rt-bar-bg) }
.rt-footer__inner{
  max-width: calc(var(--rt-container) + 2 * var(--rt-gutter));
  margin: 0 auto;
  padding: 0 var(--rt-gutter);
  box-sizing: border-box;
  min-height: var(--rt-bar-h);
  display: grid;
  grid-template-columns: 25% 23% 23% 23%;
  gap: 0 2%;
  align-items: center;
}
.rt-footer__email{
  font-size: var(--rt-footer-email-size);
  line-height: 1.3;
  color: var(--rt-nav-color);
  /* Between 920 and ~1255 the address is wider than its 25% column. It wraps
     to two lines (47px, still inside the 67px bar) at the <wbr> after the @,
     rather than the mirror's mid-word "...GMAIL.CO / M" break. */
  overflow-wrap: break-word;
}
.rt-footer__btn{
  display:flex; align-items:center; justify-content:center;
  height: var(--rt-btn-h);
  margin: 10px;                       /* the 20px this adds keeps the bar at 67px */
  border-radius: var(--rt-btn-radius);
  background: var(--rt-btn-bg);
  color: var(--rt-btn-color);
  font-size:16px; text-align:center; text-decoration:none;
}
.rt-footer__btn:hover,.rt-footer__btn:focus-visible{
  background: var(--rt-bar-bg);
  color:#fff;
  outline:1px solid var(--rt-btn-bg);
}

@media (min-width:920px){
  /* pinned to the viewport bottom; index.html overrides this to static so the
     hero can own the full screen */
  .rt-footer{ position:fixed; bottom:0; left:0; right:0; z-index:200 }
  main{ padding-bottom: var(--rt-bar-h) }
}

@media (max-width:919px){
  /* scrolls in flow on phones, stacked and centred */
  .rt-footer__inner{
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 32px var(--rt-gutter);
    justify-items:center; text-align:center;
  }
  .rt-footer__email{ font-size:16px; margin-bottom:10px }
  .rt-footer__btn{ width:187px; height:54px; margin:0 }
}