/* Rochdale Daily: Mobile Hamburger Menu (namespaced with .rd-) */
/* Safe to load AFTER your existing styles. */

.rd-header, .site-header { position: relative; z-index: 10; }

/* Simple header bar layout */
.rd-header-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
}

/* Logo placeholder (use your image/logo styles if you have them) */
.rd-logo {
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  font-weight: 700;
  letter-spacing: 1px;
  color: #ffffff;
  text-decoration: none;
  font-size: 22px;
}

/* Spacer pushes toggle to the right if needed */
.rd-spacer { flex: 1 1 auto; }

/* Accessibility helper */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,1px,1px); white-space: nowrap; border: 0;
}

/* Desktop defaults */
.rd-menu-toggle {
  display: none;
  border: 0; background: transparent; cursor: pointer;
  padding: .5rem; line-height: 1; color: #fff;
}

/* Nav list base (desktop) */
.rd-menu { background: transparent; position: static; }
.rd-nav-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap;
}
.rd-nav-list a {
  text-decoration: none; color: #dbe4ff;
}
.rd-nav-list a:hover { text-decoration: underline; }

/* Mobile */
@media (max-width: 900px) {
  .rd-menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
  /* position the toggle at top-right of header */
  .rd-header { position: relative; }
  .rd-menu-toggle {
    position: absolute; right: 12px; top: 12px; z-index: 1001;
  }

  .rd-menu {
    display: none; position: absolute; left: 0; right: 0; top: 60px;
    background: #0f1115; border-top: 1px solid #222; padding: 12px;
    z-index: 1000;
  }
  .rd-menu.open { display: block; }

  .rd-nav-list { flex-direction: column; gap: 0; }
  .rd-nav-list a { display: block; padding: 12px 16px; border-radius: 12px; }
  .rd-nav-list a:active { background: #1a1d24; }

  /* If your breaking ticker sits directly below header, this creates space */
  .breaking-ticker { margin-top: 8px; }
}

/* Desktop */
@media (min-width: 901px) {
  .rd-menu-toggle { display: none; }
  .rd-menu { display: block; position: static; padding: 0; }
  .rd-nav-list { flex-direction: row; gap: 1.2rem; }
}