/* ON6UB — club branding on top of Quark2.
 *
 * The palette is lifted from the 2014 site so the club recognises its own
 * website: navy #113040, radio blue #3696c9, sky #82bede / #bfddee.
 * Quark2 drives everything from CSS custom properties, so overriding those is
 * enough — no need to fight its stylesheet.
 */

:root {
  --on6ub-navy: #113040;
  --on6ub-blue: #3696c9;
  --on6ub-sky: #82bede;
  --on6ub-mist: #bfddee;
  --on6ub-slate: #6b8b94;

  --accent-color: var(--on6ub-blue);
  --color-accent: var(--on6ub-blue);
  --link-color: #24607f;
  --link-hover-color: var(--on6ub-navy);
}

/* Header: the club's navy, not Quark's default. */
#header,
.navbar {
  background-color: var(--on6ub-navy);
  border-bottom: 3px solid var(--on6ub-blue);
}

/* Only the TOP-LEVEL bar sits on the navy header, so only those links go white.
 *
 * Do not blanket this as `#header a`: the dropdown panel underneath uses
 * Quark2's own light surface (--q2-bg-elev), and an id-based selector outranks
 * Quark2's `.dropmenu a`, which paints the submenu links white on white and
 * makes them invisible. Submenu links are left to the theme's own variables so
 * they stay readable in both light and dark mode.
 */
#header .navbar-brand,
.dropmenu > ul.navigation > li > a {
  color: #fff;
}

.dropmenu > ul.navigation > li > a:hover,
.dropmenu > ul.navigation > li > a:focus {
  color: var(--on6ub-sky);
  background: rgba(255, 255, 255, 0.1);
}

.dropmenu > ul.navigation > li > a.active {
  color: var(--on6ub-navy);
  background: var(--on6ub-sky);
}

.dropmenu > ul.navigation > li > a.active:hover {
  color: var(--on6ub-navy);
  background: #fff;
}

/* The caret Quark2 draws on parent items must follow the white text. */
.dropmenu > ul.navigation > li.has-children > a::after {
  border-top-color: currentColor;
  color: inherit;
}

/* Submenu: keep Quark2's surface, just tint the hover with the club blue. */
.dropmenu li > ul a:hover {
  background: var(--on6ub-mist);
  color: var(--on6ub-navy);
}

[data-theme="dark"] .dropmenu li > ul a:hover {
  background: rgba(54, 150, 201, 0.24);
  color: #fff;
}

/* The club emblem. Circular, so give it room to breathe and keep it crisp. */
.navbar-brand img {
  height: 58px;
  width: auto;
  transition: height 0.2s ease;
}

@media (max-width: 768px) {
  .navbar-brand img {
    height: 44px;
  }
}

/* Callsign wordmark next to the emblem. */
.on6ub-wordmark {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 0.75rem;
  line-height: 1.15;
  color: #fff;
}

.on6ub-wordmark strong {
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.on6ub-wordmark span {
  font-size: 0.78rem;
  color: var(--on6ub-mist);
  letter-spacing: 0.02em;
}

@media (max-width: 560px) {
  /* On a phone the emblem alone carries the identity. */
  .on6ub-wordmark span {
    display: none;
  }
}

/* Headings in club navy. */
h1, h2, h3, h4 {
  color: var(--on6ub-navy);
}

/* Photos of activities are the point of this site — let them look like photos,
   not like boxes of pixels. */
main img,
.blog-content img,
article img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(17, 48, 64, 0.16);
}

/* A post that is mostly photos reads far better as a grid than as a single
   endless column. Consecutive images flow into one. */
article p:has(> img:only-child) {
  display: inline-block;
  width: min(100%, 340px);
  margin: 0.4rem;
  vertical-align: top;
}

/* Footer: club identity, not the theme vendor's. */
#footer {
  background-color: var(--on6ub-navy);
  color: var(--on6ub-mist);
  border-top: 3px solid var(--on6ub-blue);
}

#footer a {
  color: var(--on6ub-sky);
}

#footer a:hover {
  color: #fff;
}

.on6ub-footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem 2rem;
  text-align: left;
}

.on6ub-footer-grid h4 {
  color: #fff;
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.on6ub-footer-grid p {
  margin: 0 0 0.3rem;
  font-size: 0.92rem;
}

.on6ub-colophon {
  margin-top: 1.75rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.82rem;
  color: var(--on6ub-slate);
}

/* The club frequency, treated like the piece of data it is. */
.on6ub-freq {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--on6ub-sky);
}

/* Registration forms: make the required fields and the submit button obvious. */
.form-input:focus,
.form-select:focus {
  border-color: var(--on6ub-blue);
  outline: 2px solid rgba(54, 150, 201, 0.28);
}

button[type="submit"],
.button.contrast {
  background-color: var(--on6ub-blue);
  border-color: var(--on6ub-blue);
  color: #fff;
}

button[type="submit"]:hover,
.button.contrast:hover {
  background-color: var(--on6ub-navy);
  border-color: var(--on6ub-navy);
}

/* Dark mode: Quark2 ships a toggle. Keep the club blue readable against it. */
@media (prefers-color-scheme: dark) {
  :root {
    --link-color: var(--on6ub-sky);
  }

  h1, h2, h3, h4 {
    color: var(--on6ub-mist);
  }
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4 {
  color: var(--on6ub-mist);
}

[data-theme="dark"] {
  --link-color: var(--on6ub-sky);
}