/* --- imports must be first --- */
@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;600;700&display=swap');


/* Global tweaks */
:root {
  --am_max_width_px: 1200px;
  --am_logo_width: 180px;              /* you can tweak this anytime */
  --brand-text: #1f2937;               /* dark slate */
}

body {
  font-family: Karla, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  color: var(--brand-text);
}

/* Header stacking: logo → header slot (tagline + menu) → (hide default menu row) */
.am-header .am-header-content {
  display: grid;
  grid-template-areas:
    "logo"
    "header"
    "menu";
  row-gap: 8px;
}

.am-header-logo-wrapper { grid-area: logo; text-align: center; }
.am-header .am-header-content-content { grid-area: header; display: block; }  /* unhide slot */
.am-header .am-header-menu-wrapper { display: none; }                         /* hide aMember’s built-in menu row */

/* Logo sizing (with fallback + var to avoid the warning) */
.site-logo-img {
  max-width: 180px;                 /* fallback */
  max-width: var(--am_logo_width);  /* variable */
  height: auto;
  display: inline-block;
}

/* Tagline */
.site-header-block { text-align: center; }
.site-tagline {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.45;
  opacity: .9;
}

/* “Astra-ish” simple menu under the tagline */
.site-nav {
  margin-top: 10px;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  justify-content: center;
}

.site-nav a {
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  color: var(--brand-text);
  padding: 6px 10px;
  border-radius: 6px;
}

.site-nav a:hover { text-decoration: underline; }

/* Footer menu */
.am-footer .am-footer-content-content { text-align: center; }
.footer-nav {
  margin-top: 10px;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  justify-content: center;
}

.footer-nav a {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}

.footer-nav a:hover { text-decoration: underline; }
