/*
 * Theme styling (design-system/MASTER.md §5): header, menu, page frame and footer in
 * the design system's colors and type. Everything is scoped to body.adg-theme, which the
 * plugin adds only when the theme is switched on (or previewed with ?adg_theme_preview=1),
 * so this file changes nothing until then. The !important flags only answer the old
 * Customizer CSS, which uses !important on the same properties.
 */

/* Header */
.adg-theme .site-header {
  background: var(--adg-color-bg-brand) !important;
  border-bottom: 3px solid var(--adg-teal-600);
  box-shadow: none;
}
.adg-theme .main-title,
.adg-theme .site-title,
.adg-theme .site-title a {
  font-family: var(--adg-font-heading) !important;
  font-weight: var(--adg-weight-bold);
  font-size: var(--adg-text-lg) !important;
  letter-spacing: 0.005em;
  color: var(--adg-color-text-on-brand) !important;
}

/* Menu */
.adg-theme .main-navigation,
.adg-theme .main-navigation ul ul { background: var(--adg-color-bg-brand); }
.adg-theme .main-navigation a,
.adg-theme .main-navigation .menu > li > a {
  font-family: var(--adg-font-ui) !important;
  font-size: var(--adg-text-sm) !important;
  font-weight: var(--adg-weight-semibold);
  letter-spacing: 0;
  text-transform: none;
  color: var(--adg-color-text-on-brand) !important;
}
.adg-theme .main-navigation a:hover,
.adg-theme .main-navigation .menu > li > a:hover {
  background: var(--adg-navy-700) !important;
  color: var(--adg-teal-200) !important;
}
.adg-theme .main-navigation .current-menu-item > a,
.adg-theme .main-navigation .current-menu-ancestor > a {
  box-shadow: inset 0 -3px 0 var(--adg-teal-600);
}
.adg-theme .menu-toggle { color: var(--adg-color-text-on-brand) !important; }
/* The old Customizer CSS forces the mobile menu button on at every width. */
@media (min-width: 769px) { .adg-theme .menu-toggle { display: none !important; } }

/* Page frame: a wider column so tools get their full width; prose is still capped by site.css. */
.adg-theme,
.adg-theme .site { background: var(--adg-color-bg-subtle); }
.adg-theme .site-content { max-width: 1040px; }
.adg-theme .inside-article {
  border-radius: var(--adg-radius-lg);
  box-shadow: var(--adg-shadow-sm);
  border: 1px solid var(--adg-color-border);
}

/* Footer (the widget strip above the copyright bar has its own background in the theme) */
.adg-theme .site-footer,
.adg-theme .footer-widgets,
.adg-theme .site-info {
  background: var(--adg-color-bg-brand) !important;
  color: var(--adg-color-text-on-brand-muted) !important;
  border-top: 3px solid var(--adg-teal-600);
  font-family: var(--adg-font-ui);
  font-size: var(--adg-text-sm);
}
.adg-theme .footer-widgets,
.adg-theme .site-info { border-top: 0; }
.adg-theme .footer-widgets { padding-block: var(--adg-space-8) var(--adg-space-4); }
.adg-theme .site-info { border-top: 1px solid var(--adg-navy-700); }
.adg-theme .site-footer a { color: var(--adg-color-text-on-brand) !important; text-decoration: underline; text-underline-offset: 0.15em; }
.adg-theme .site-footer a:hover { color: var(--adg-teal-200) !important; }

/* Focus rings in the action color (the old theme used gold). */
.adg-theme a:focus-visible,
.adg-theme button:focus-visible,
.adg-theme .menu-toggle:focus-visible { outline: 3px solid var(--adg-teal-200); outline-offset: 2px; }
.adg-theme .inside-article a:focus-visible { outline-color: var(--adg-color-focus); }