/* ============================================================
   Aurum Arcana — Theme Styles
   ============================================================ */

/* ============================================================
   BASE RESET & ASTRA OVERRIDES
   ============================================================ */
html {
  font-size: 16px;
}

body,
.ast-container,
.site-content,
#page {
  background: var(--bg-base) !important;
  color: var(--text-body) !important;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-soft);
}
a:hover { color: var(--accent-hover); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* Astra default overrides */
.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-inner-post {
  background: var(--surface-card) !important;
  border: 1px solid var(--hairline) !important;
}
.ast-separate-container { background: var(--bg-base) !important; }
.site-header { display: none !important; }
.site-footer .ast-footer-wrap { display: none !important; }
.footer-widget-area { display: none !important; }
.ast-pagination-wrap { display: none !important; }

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.aa-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

@media (max-width: 768px) {
  .aa-container { padding-inline: var(--space-5); }
}

/* ============================================================
   TYPOGRAPHY — headings & body
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  color: var(--text-body);
  line-height: var(--leading-snug);
  text-wrap: balance;
  margin-top: 0;
}

p { margin-top: 0; }

/* ============================================================
   HEADER
   ============================================================ */
.aa-hdr {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 16px 40px;
  border-bottom: 1px solid var(--hairline);
  background: rgba(14, 13, 15, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: padding var(--dur-base) var(--ease-soft),
              background var(--dur-base) var(--ease-soft);
}

.aa-hdr--stuck {
  padding: 10px 40px;
  background: rgba(14, 13, 15, 0.92);
  box-shadow: 0 1px 0 var(--hairline);
}

.aa-hdr__logo {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--accent);
  text-decoration: none;
  transition: opacity var(--dur-base) var(--ease-soft);
}
.aa-hdr__logo:hover { opacity: 0.85; color: var(--accent); }

/* Custom logo (Appearance → Customize → Site Identity → Logo): compact mark tight
   against the wordmark, overriding Astra's default logo sizing/margins. */
.aa-hdr__logo .custom-logo-link {
  display: inline-flex;
  align-items: center;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0;
}
.aa-hdr__logo .custom-logo {
  display: block;
  width: auto !important;
  height: 40px !important;
  max-width: none !important;
  margin: 0 !important;
}

.aa-hdr__sigil {
  flex: 0 0 auto;
  color: var(--accent);
}

.aa-hdr__word {
  font-family: var(--font-logo);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 18px;
  color: var(--accent);
  white-space: nowrap;
}

@media (max-width: 1024px) {
  .aa-hdr__word { display: none; }
}

.aa-hdr__nav {
  justify-self: center;
}

/* Primary nav row (up to 3 levels) */
.aa-nav {
  display: flex;
  gap: 26px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.aa-nav__item {
  position: relative;
  list-style: none;
}

.aa-hdr__link {
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 4px 0;
  position: relative;
  transition: color var(--dur-base) var(--ease-soft);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}

.aa-hdr__link:hover,
.aa-nav__item:focus-within > .aa-hdr__link { color: var(--accent-hover); }

.aa-hdr__link.current-menu-item,
.aa-hdr__link[aria-current="page"] {
  color: var(--accent);
}

.aa-hdr__link.current-menu-item::after,
.aa-hdr__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -3px;
  height: 1px;
  background: var(--accent);
}

/* Caret on items that have a dropdown */
.aa-nav__item--has-children > .aa-hdr__link i {
  font-size: 13px;
  transition: transform var(--dur-base) var(--ease-soft);
}
.aa-nav__item--has-children:hover > .aa-hdr__link i,
.aa-nav__item--has-children:focus-within > .aa-hdr__link i { transform: rotate(180deg); }

/* Dropdown panel (level 2) */
.aa-submenu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 240px;
  background: var(--surface-card);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-soft),
              transform var(--dur-base) var(--ease-soft);
  z-index: calc(var(--z-sticky) + 1);
}
/* Transparent bridge across the gap so hover survives the trip into the panel. */
.aa-submenu::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}
.aa-nav__item:hover > .aa-submenu,
.aa-nav__item:focus-within > .aa-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.aa-submenu__list,
.aa-submenu__sub { list-style: none; margin: 0; padding: 0; }
.aa-submenu__item { list-style: none; }
.aa-submenu__link {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft);
}
.aa-submenu__link:hover,
.aa-submenu__link.current-menu-item {
  background: rgba(200, 162, 74, 0.08);
  color: var(--accent);
}

/* Accordion row (level 3): label link + caret toggle */
.aa-submenu__row { display: flex; align-items: center; gap: 2px; }
.aa-submenu__caret {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft);
}
.aa-submenu__caret:hover { background: rgba(200, 162, 74, 0.08); color: var(--accent); }
.aa-submenu__caret i { transition: transform var(--dur-base) var(--ease-soft); }
.aa-submenu__item.is-open > .aa-submenu__row > .aa-submenu__caret i { transform: rotate(180deg); }

/* Nested branch (level 3) — indented with a hairline tree line */
.aa-submenu__sub {
  margin: 2px 0 4px 10px;
  padding-left: 10px;
  border-left: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.aa-submenu__sub[hidden] { display: none; }
.aa-submenu__sub .aa-submenu__link { font-size: 11px; padding: 8px 10px; }

.aa-hdr__right {
  display: flex;
  align-items: center;
  gap: 18px;
  justify-self: end;
}

.aa-hdr__icon {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 22px;
  display: inline-flex;
  transition: color var(--dur-base) var(--ease-soft);
  padding: 0;
}
.aa-hdr__icon:hover { color: var(--accent); }

/* Mobile nav toggle */
.aa-hdr__mobile-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 24px;
  padding: 0;
  transition: color var(--dur-base) var(--ease-soft);
}
.aa-hdr__mobile-toggle:hover { color: var(--accent); }

/* Mobile menu overlay */
.aa-mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-sticky) + 1);
  background: rgba(14, 13, 15, 0.97);
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow-y: auto;
  padding: 96px 24px 48px;
}

.aa-mobile-nav.is-open { display: flex; }

/* The walker markup renders nested levels inline on mobile (no hover panels). */
.aa-mobile-nav .aa-nav {
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 420px;
}
.aa-mobile-nav .aa-nav__item { position: static; width: 100%; text-align: center; }

.aa-mobile-nav .aa-hdr__link {
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-2xl);
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-body);
  padding: 8px 0;
}
.aa-mobile-nav .aa-hdr__link:hover,
.aa-mobile-nav .aa-hdr__link.current-menu-item { color: var(--accent); }
.aa-mobile-nav .aa-nav__item--has-children > .aa-hdr__link i { font-size: 18px; }

/* Dropdown panel collapses to a static, always-visible block on mobile. */
.aa-mobile-nav .aa-submenu {
  position: static;
  transform: none;
  opacity: 1;
  visibility: visible;
  min-width: 0;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 4px 0 12px;
}
.aa-mobile-nav .aa-submenu::before { display: none; }
.aa-mobile-nav .aa-submenu__list { display: flex; flex-direction: column; align-items: center; }
.aa-mobile-nav .aa-submenu__link {
  text-align: center;
  font-size: 13px;
}
.aa-mobile-nav .aa-submenu__row { justify-content: center; }
.aa-mobile-nav .aa-submenu__sub { align-items: center; border-left: none; margin-left: 0; padding-left: 0; }

.aa-mobile-nav__close {
  position: absolute;
  top: 24px;
  right: 24px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 28px;
  padding: 0;
  z-index: 1;
}

@media (max-width: 880px) {
  .aa-hdr__nav { display: none; }
  .aa-hdr { padding: 14px 20px; }
  .aa-hdr--stuck { padding: 10px 20px; }
  .aa-hdr__mobile-toggle { display: inline-flex; }
}

/* ============================================================
   SIGIL (inline SVG helper)
   ============================================================ */
.aa-sigil {
  color: var(--accent);
  display: inline-flex;
}

/* ============================================================
   DIVIDER — ornamental four-point star + hairlines
   ============================================================ */
.aa-divider {
  display: flex;
  justify-content: center;
  color: var(--accent);
}
.aa-divider svg { max-width: 100%; }

/* ============================================================
   LABEL — letterspaced small-caps eyebrow
   ============================================================ */
.aa-label {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin: 0;
  font-family: var(--label-font);
  font-size: var(--label-size);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  color: var(--accent);
}

.aa-label::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--hairline-strong);
  display: inline-block;
}

.aa-label--flanked::after {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--hairline-strong);
  display: inline-block;
}

.aa-label--plain::before { display: none; }

/* ============================================================
   BUTTONS
   ============================================================ */
.aa-btn {
  --_bg: var(--accent);
  --_fg: var(--on-accent);
  --_bd: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--font-label);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  border: 1px solid var(--_bd);
  background: var(--_bg);
  color: var(--_fg);
  padding: 0.9em 1.6em;
  transition: background var(--dur-base) var(--ease-soft),
              color var(--dur-base) var(--ease-soft),
              border-color var(--dur-base) var(--ease-soft),
              box-shadow var(--dur-base) var(--ease-soft),
              transform var(--dur-fast) var(--ease-soft);
}

.aa-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.aa-btn:active { transform: translateY(1px); }

.aa-btn--sm { font-size: var(--text-xs); padding: 0.7em 1.2em; }
.aa-btn--lg { font-size: var(--text-base); padding: 1.05em 2em; letter-spacing: var(--tracking-label); }

.aa-btn--primary:hover {
  --_bg: var(--accent-hover);
  --_bd: var(--accent-hover);
  box-shadow: var(--glow-soft);
  color: var(--on-accent);
}
.aa-btn--primary:active {
  --_bg: var(--accent-pressed);
  --_bd: var(--accent-pressed);
}

.aa-btn--secondary {
  --_bg: transparent;
  --_fg: var(--accent);
  --_bd: var(--hairline-strong);
}
.aa-btn--secondary:hover {
  --_fg: var(--accent-hover);
  --_bd: var(--accent-hover);
  box-shadow: var(--glow-soft);
  color: var(--accent-hover);
}

.aa-btn--ghost {
  --_bg: transparent;
  --_fg: var(--accent);
  --_bd: transparent;
  padding-inline: 0.4em;
}
.aa-btn--ghost:hover {
  color: var(--accent-hover);
  box-shadow: inset 0 -1px 0 var(--accent-hover);
  border-radius: 0;
}

.aa-btn[disabled] { opacity: 0.42; cursor: not-allowed; box-shadow: none !important; transform: none !important; }

/* ============================================================
   TAGS (category chips)
   ============================================================ */
.aa-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-pill);
  padding: 0.42em 0.9em;
  line-height: 1;
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-soft),
              border-color var(--dur-base) var(--ease-soft),
              background var(--dur-base) var(--ease-soft);
  cursor: pointer;
}

a.aa-tag:hover,
button.aa-tag:hover {
  color: var(--accent-hover);
  border-color: var(--accent-hover);
  background: rgba(200, 162, 74, 0.06);
}

.aa-tag--solid {
  background: rgba(200, 162, 74, 0.10);
  border-color: transparent;
}

.aa-tag--muted {
  color: var(--text-muted);
  border-color: var(--border-neutral);
}

/* ============================================================
   BADGE
   ============================================================ */
.aa-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: 1;
  padding: 0.3em 0.6em;
  border-radius: var(--radius-sm);
  background: rgba(200, 162, 74, 0.12);
  color: var(--accent);
  border: 1px solid var(--hairline);
}

.aa-badge--oxblood {
  background: rgba(90, 42, 42, 0.35);
  color: #E0A89E;
  border-color: rgba(122, 58, 55, 0.5);
}

.aa-badge--dot::before {
  content: "";
  width: 0.42em;
  height: 0.42em;
  border-radius: 50%;
  background: currentColor;
}

/* ============================================================
   CARD
   ============================================================ */
.aa-card {
  background: var(--surface-card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  color: var(--text-body);
  transition: border-color var(--dur-base) var(--ease-soft),
              box-shadow var(--dur-base) var(--ease-soft),
              transform var(--dur-base) var(--ease-out);
}

.aa-card--hover:hover {
  border-color: var(--hairline-strong);
  box-shadow: var(--shadow-card), var(--glow-soft);
  transform: translateY(-2px);
}

.aa-card--flush { padding: 0; overflow: hidden; }

.aa-card--inset {
  background: var(--surface-1);
  box-shadow: var(--glow-inset);
}

/* ============================================================
   ARTICLE CARD
   ============================================================ */
.aa-article {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--text-body);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-base) var(--ease-soft),
              box-shadow var(--dur-base) var(--ease-soft),
              transform var(--dur-base) var(--ease-out);
}

.aa-article:hover {
  border-color: var(--hairline-strong);
  box-shadow: var(--shadow-card), var(--glow-soft);
  transform: translateY(-3px);
  color: var(--text-body);
}

.aa-article__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ink-600);
}

.aa-article__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.85) contrast(1.02);
  transition: transform var(--dur-slow) var(--ease-out);
}

.aa-article:hover .aa-article__media img { transform: scale(1.04); }

.aa-article__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(14, 13, 15, 0.55));
  pointer-events: none;
}

.aa-article__cat {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 1;
}

.aa-article__cat .aa-tag {
  background: rgba(14, 13, 15, 0.70);
  backdrop-filter: blur(2px);
}

.aa-article__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.aa-article__title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--text-body);
  margin: 0;
  transition: color var(--dur-base) var(--ease-soft);
  text-wrap: balance;
}

.aa-article:hover .aa-article__title { color: var(--accent-hover); }

.aa-article__excerpt {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-muted);
  margin: 0;
}

.aa-article__meta {
  margin-top: auto;
  padding-top: var(--space-3);
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
  border-top: 1px solid var(--hairline);
  display: flex;
  gap: 0.6em;
  align-items: center;
}

/* ============================================================
   THEME TILE (four-column mystery grid)
   ============================================================ */
.aa-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-5);
  background: var(--surface-card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--text-body);
  position: relative;
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-soft),
              box-shadow var(--dur-base) var(--ease-soft),
              transform var(--dur-base) var(--ease-out);
}

.aa-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--texture-starfield);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-soft);
  pointer-events: none;
}

.aa-tile:hover {
  border-color: var(--hairline-strong);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card), var(--glow-soft);
}

.aa-tile:hover::before { opacity: 0.8; }

.aa-tile__icon {
  color: var(--accent);
  font-size: 38px;
  line-height: 1;
  display: inline-flex;
  transition: color var(--dur-base) var(--ease-soft);
}

.aa-tile:hover .aa-tile__icon { color: var(--accent-hover); }

.aa-tile__title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  color: var(--text-body);
  margin: 0;
}

.aa-tile__desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
  line-height: var(--leading-normal);
}

/* ============================================================
   CALLOUT (article aside)
   ============================================================ */
.aa-callout {
  position: relative;
  margin: var(--space-6) 0;
  padding: var(--space-5) var(--space-6);
  background: rgba(200, 162, 74, 0.05);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}

.aa-callout__label {
  display: flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-2);
}

.aa-callout__label i { font-size: 1.2em; }
.aa-callout p { margin: 0; }

.aa-callout--oxblood {
  background: rgba(90, 42, 42, 0.16);
  border-color: rgba(122, 58, 55, 0.55);
}
.aa-callout--oxblood .aa-callout__label { color: #E0A89E; }

/* ============================================================
   HERO SECTION
   ============================================================ */
.aa-hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 120px 24px 110px;
  background: var(--bg-base);
  background-image: var(--texture-starfield), var(--texture-vignette);
}

.aa-hero__emblem {
  color: var(--accent);
  filter: drop-shadow(var(--glow-strong));
  margin: 0 auto 30px;
  display: flex;
  justify-content: center;
  max-width: 96px;
}
.aa-hero__emblem img {
  display: block;
  width: 96px;
  height: auto;
}

.aa-hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(48px, 7vw, 88px);
  line-height: 1.05;
  color: var(--text-body);
  margin: 18px auto 0;
  max-width: 16ch;
  text-wrap: balance;
}

.aa-hero h1 em {
  font-style: italic;
  color: var(--accent);
}

.aa-hero p {
  font-family: var(--font-body);
  font-size: 21px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 54ch;
  margin: 22px auto 0;
}

.aa-hero__cta {
  margin-top: 38px;
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   SECTION HEAD
   ============================================================ */
.aa-sec__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  margin-bottom: 48px;
}

.aa-sec__head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 4.5vw, 52px);
  color: var(--text-body);
  margin: 0;
  line-height: 1.1;
  text-wrap: balance;
}

/* ============================================================
   HOME SECTIONS LAYOUT
   ============================================================ */
.aa-sec {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 96px 40px;
}

.aa-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.aa-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Signature offering block */
.aa-offering {
  background: var(--ink-850);
  border-block: 1px solid var(--hairline);
}

.aa-offering__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 90px 40px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
}

.aa-offering__media {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--hairline-strong);
  box-shadow: var(--shadow-card);
}

.aa-offering__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.8) contrast(1.05);
}

.aa-offering h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 4vw, 46px);
  color: var(--text-body);
  margin: 14px 0 0;
  line-height: 1.1;
}

.aa-offering p {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 18px 0 0;
}

.aa-offering ul {
  list-style: none;
  padding: 0;
  margin: 24px 0 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.aa-offering li {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--text-secondary);
  display: flex;
  gap: 12px;
  align-items: center;
}

/* Gold check marker for the native list block (no inline icon needed). */
.aa-offering li::before {
  content: "\2713";
  flex: none;
  color: var(--accent);
  font-size: 18px;
  line-height: 1;
}

.aa-offering li i { color: var(--accent); font-size: 20px; }

/* About teaser */
.aa-about {
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  gap: 56px;
  align-items: center;
}

.aa-about__media {
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--hairline-strong);
}

.aa-about__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.78) contrast(1.04) brightness(0.92);
}

.aa-about h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 4vw, 44px);
  color: var(--text-body);
  margin: 14px 0 0;
  line-height: 1.12;
}

.aa-about p {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 18px 0 26px;
}

/* ============================================================
   BLOG / ARCHIVE PAGE
   ============================================================ */
.aa-page-head {
  text-align: center;
  padding: 90px 24px 40px;
  background: var(--bg-base);
  background-image: var(--texture-vignette);
}

.aa-page-head h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 6vw, 72px);
  color: var(--text-body);
  margin: 16px 0 0;
  line-height: 1.05;
}

.aa-page-head p {
  font-family: var(--font-body);
  font-size: 19px;
  color: var(--text-muted);
  max-width: 52ch;
  margin: 18px auto 0;
  line-height: 1.6;
}

.aa-chips {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 8px 24px 0;
}

.aa-blog-grid {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 48px 40px 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Pagination */
.aa-pag {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  padding: 24px 0 96px;
}

.aa-pag a,
.aa-pag span {
  width: 44px;
  height: 44px;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.aa-pag a:hover { border-color: var(--accent); color: var(--accent); }
.aa-pag .current { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.aa-pag .prev,
.aa-pag .next { width: auto; padding: 0 16px; }

/* ============================================================
   SINGLE ARTICLE
   ============================================================ */
.aa-art__hero {
  position: relative;
  height: clamp(360px, 52vh, 560px);
  overflow: hidden;
}

.aa-art__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.8) contrast(1.05) brightness(0.8);
}

.aa-art__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14,13,15,.45) 0%, rgba(14,13,15,.15) 40%, rgba(14,13,15,.96) 100%);
  pointer-events: none;
}

.aa-art__head {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  text-align: center;
  padding: 0 24px 52px;
}

.aa-art__head h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(38px, 5.5vw, 68px);
  color: var(--text-body);
  margin: 16px auto 0;
  max-width: 18ch;
  line-height: 1.06;
  text-wrap: balance;
}

.aa-art__meta {
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.aa-art__meta b { color: var(--accent); font-weight: var(--weight-medium); }

/* Article body prose */
.aa-art__body {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 64px 24px 24px;
}

.aa-art__body p {
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.78;
  color: var(--text-secondary);
  margin: 0 0 26px;
}

.aa-art__body h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 34px;
  color: var(--text-body);
  margin: 44px 0 18px;
}

.aa-art__body p.lead::first-letter {
  font-family: var(--font-display);
  font-weight: 600;
  float: left;
  font-size: 78px;
  line-height: 0.78;
  padding: 6px 14px 0 0;
  color: var(--accent);
}

/* Entry content (WordPress default) */

/* Page body text. The width comes from the parent .aa-container (1200px on
   desktop, padded on mobile) — no per-template inline max-width needed. */
.entry-content {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

.aa-art__body .entry-content p {
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.78;
  color: var(--text-secondary);
  margin: 0 0 26px;
}

.aa-art__body .entry-content h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 34px;
  color: var(--text-body);
  margin: 44px 0 18px;
}

.aa-art__body .entry-content h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  color: var(--text-body);
  margin: 32px 0 14px;
}

.aa-art__body .entry-content blockquote {
  margin: 40px 0;
  padding: 8px 0 8px 28px;
  border-left: 2px solid var(--accent);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 30px;
  line-height: 1.3;
  color: var(--text-body);
}

.aa-art__body .entry-content blockquote p { font-size: inherit; color: inherit; margin: 0; }

.aa-art__body .entry-content img { max-width: 100%; border-radius: var(--radius-lg); }

.aa-art__body .entry-content a { color: var(--accent); }
.aa-art__body .entry-content a:hover { color: var(--accent-hover); }

/* Pull quote standalone */
.aa-pull {
  margin: 40px 0;
  padding: 8px 0 8px 28px;
  border-left: 2px solid var(--accent);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 30px;
  line-height: 1.3;
  color: var(--text-body);
}

/* Article tags row */
.aa-art__tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 24px 0;
  margin-top: 16px;
  border-top: 1px solid var(--hairline);
}

/* Related articles */
.aa-related {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 48px 40px 16px;
}

.aa-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}

/* ============================================================
   ABOUT / SERVICES PAGE
   ============================================================ */
.aa-ab-hero {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 90px 40px 40px;
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 56px;
  align-items: center;
}

.aa-ab-hero__media {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--hairline-strong);
  box-shadow: var(--shadow-card);
}

.aa-ab-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.78) contrast(1.05) brightness(0.9);
}

.aa-ab-hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(38px, 5vw, 64px);
  color: var(--text-body);
  margin: 16px 0 0;
  line-height: 1.06;
}

.aa-ab-hero p {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.75;
  color: var(--text-secondary);
  margin: 20px 0 0;
}

/* Services/pricing section */
.aa-svc {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 72px 40px;
}

.aa-svc__head {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 44px;
}

.aa-svc__head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 4.5vw, 50px);
  color: var(--text-body);
  margin: 0;
}

.aa-svc__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Pricing card internals */
.aa-price {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
}

.aa-price__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  color: var(--text-body);
}

.aa-price__cost {
  font-family: var(--font-display);
  font-size: 40px;
  color: var(--accent);
  line-height: 1;
  margin: 6px 0 4px;
}

.aa-price__cost small {
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.aa-price__desc {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.6;
}

.aa-price ul {
  list-style: none;
  padding: 0;
  margin: 14px 0 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.aa-price li {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-secondary);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.aa-price li i { color: var(--accent); font-size: 18px; margin-top: 2px; }

.aa-price__cta { margin-top: auto; }

/* Testimonials */
.aa-test { background: var(--ink-850); border-block: 1px solid var(--hairline); }

.aa-test__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 80px 40px;
  text-align: center;
}

.aa-test__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
  text-align: left;
}

.aa-test blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  line-height: 1.45;
  color: var(--text-body);
  margin: 0 0 16px;
}

.aa-test cite {
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-style: normal;
}

/* ============================================================
   FOOTER
   ============================================================ */
.aa-ftr {
  background: var(--ink-850);
  border-top: 1px solid var(--hairline);
  padding: 64px 40px 32px;
}

.aa-ftr__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.aa-ftr__cols {
  max-width: var(--container-max);
  margin: 40px auto 0;
  width: 100%;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
}

.aa-ftr__brand p {
  font-family: var(--font-body);
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.6;
  max-width: 34ch;
  margin: 14px 0 0;
}

.aa-ftr h4 {
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 16px;
  font-weight: var(--weight-medium);
}

.aa-ftr ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.aa-ftr a {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-secondary);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dur-base) var(--ease-soft);
}

.aa-ftr a:hover { color: var(--accent-hover); }

.aa-ftr__social {
  display: flex;
  gap: 16px;
  font-size: 22px;
  margin-top: 6px;
}

.aa-ftr__social a { color: var(--text-muted); }
.aa-ftr__social a:hover { color: var(--accent); }

.aa-ftr__bottom {
  max-width: var(--container-max);
  margin: 48px auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.aa-reveal {
  opacity: 1;
  transform: none;
}

.aa-reveal.is-hidden {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}

.aa-reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */
@media (max-width: 1024px) {
  .aa-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 880px) {
  .aa-grid-4,
  .aa-grid-3,
  .aa-blog-grid { grid-template-columns: 1fr 1fr; }

  .aa-offering__inner,
  .aa-about,
  .aa-ab-hero,
  .aa-svc__grid,
  .aa-test__grid,
  .aa-related__grid { grid-template-columns: 1fr; }

  .aa-offering__inner { gap: 36px; }
  .aa-ab-hero { gap: 32px; padding: 60px 20px 32px; }

  .aa-sec { padding: 64px 20px; }
  .aa-ftr__cols { grid-template-columns: 1fr 1fr; }
  .aa-ftr__bottom { flex-direction: column; text-align: center; }
  .aa-blog-grid { padding: 32px 20px; }
  .aa-related__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .aa-grid-4,
  .aa-grid-3,
  .aa-blog-grid { grid-template-columns: 1fr; }

  .aa-hero { padding: 80px 20px 72px; }
  .aa-ftr { padding: 48px 20px 24px; }
  .aa-ftr__cols { grid-template-columns: 1fr; }
  .aa-related__grid { grid-template-columns: 1fr; }
  .aa-svc__grid { grid-template-columns: 1fr; }
  .aa-test__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   GUTENBERG BLOCK COMPATIBILITY
   The home page is built from block patterns (see inc/block-patterns.php)
   so a non-technical owner can edit every section in the editor. These rules
   let native core blocks (buttons, columns, image, group) reproduce the same
   composition the PHP template parts render for the demo fallback.
   ============================================================ */

/* Native core/button rendered as the gold aa-btn family.
   Applied via the is-style-aa-* block styles registered in inc/block-support.php. */
.wp-block-button.is-style-aa-primary > .wp-block-button__link,
.wp-block-button.is-style-aa-secondary > .wp-block-button__link,
.wp-block-button.is-style-aa-ghost > .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--font-label);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: 1;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  padding: 0.9em 1.6em;
  text-decoration: none;
  transition: background var(--dur-base) var(--ease-soft),
              color var(--dur-base) var(--ease-soft),
              border-color var(--dur-base) var(--ease-soft),
              box-shadow var(--dur-base) var(--ease-soft),
              transform var(--dur-fast) var(--ease-soft);
}
.wp-block-button.is-style-aa-primary > .wp-block-button__link {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.wp-block-button.is-style-aa-primary > .wp-block-button__link:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--on-accent);
  box-shadow: var(--glow-soft);
}
.wp-block-button.is-style-aa-secondary > .wp-block-button__link {
  background: transparent;
  color: var(--accent);
  border-color: var(--hairline-strong);
}
.wp-block-button.is-style-aa-secondary > .wp-block-button__link:hover {
  color: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: var(--glow-soft);
}
.wp-block-button.is-style-aa-ghost > .wp-block-button__link {
  background: transparent;
  color: var(--accent);
  border-color: transparent;
  padding-inline: 0.4em;
}
.wp-block-button.is-style-aa-ghost > .wp-block-button__link:hover {
  color: var(--accent-hover);
  box-shadow: inset 0 -1px 0 var(--accent-hover);
  border-radius: 0;
}
.wp-block-button.aa-btn--lg > .wp-block-button__link {
  font-size: var(--text-base);
  padding: 1.05em 2em;
  letter-spacing: var(--tracking-label);
}
.wp-block-button.is-style-aa-primary > .wp-block-button__link:active,
.wp-block-button.is-style-aa-secondary > .wp-block-button__link:active,
.wp-block-button.is-style-aa-ghost > .wp-block-button__link:active { transform: translateY(1px); }

/* Section-head group (label + heading) stays centered even if WP wraps
   children in an inner container. */
.aa-sec__head > .wp-block-group__inner-container { display: contents; }
.aa-sec__head .wp-block-heading { margin: 0; }

/* Flush variant for stacked sections (e.g. latest dispatches). */
.aa-sec--flush { padding-top: 0; }

/* Four-doors tiles built with core/columns: force the 4-up grid (and let the
   responsive .aa-grid-4 breakpoints take over) instead of flex columns. */
.wp-block-columns.aa-grid-4 { display: grid; align-items: stretch; }
.aa-grid-4 > .wp-block-column { flex-basis: auto; margin: 0; }

/* Two-column bands built with core/columns: force the grid composition over
   the default flex columns (higher specificity wins regardless of load order). */
.wp-block-columns.aa-offering__inner { display: grid; }
.wp-block-columns.aa-about { display: grid; }
.aa-offering__inner.wp-block-columns,
.aa-about.wp-block-columns { gap: 64px; }
.aa-about.wp-block-columns { gap: 56px; }
.aa-offering__inner > .wp-block-column,
.aa-about > .wp-block-column { flex-basis: auto; }

/* Image frames (offering media, about media, portrait) fill their aspect box. */
.aa-offering__media .wp-block-image,
.aa-about__media .wp-block-image,
.aa-offering__media figure,
.aa-about__media figure { margin: 0; height: 100%; }
.aa-offering__media .wp-block-image img,
.aa-about__media .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Existing .aa-offering h2/p and .aa-about h2/p element rules already style the
   native heading/paragraph blocks — no extra spacing rules needed here. */

/* ============================================================
   SIDEBAR — Astra "Seitenleiste" control (Design → Customizer)
   Position: astra_page_layout()  ·  Width: site-sidebar-width
   Style:    astra_is_sidebar_style_boxed()
   Own class names on purpose: Astra ships #primary/#secondary width,
   float and padding rules that would fight this grid.
   ============================================================ */

.aa-layout__main { min-width: 0; }
.aa-sidebar      { min-width: 0; }

.aa-layout--left,
.aa-layout--right {
  display: grid;
  align-items: start;
  column-gap: clamp(2rem, 4vw, 4rem);
  row-gap: var(--space-8);
}

/* --aa-main-col / --aa-side-col come from the theme's
   *_output_sidebar_css(). Fallbacks match Astra's 30% default.
   minmax(0,…) stops long words, <pre> and wide images blowing the track out. */
.aa-layout--right {
  grid-template-columns: minmax(0, var(--aa-main-col, 70fr)) minmax(0, var(--aa-side-col, 30fr));
}
.aa-layout--left {
  grid-template-columns: minmax(0, var(--aa-side-col, 30fr)) minmax(0, var(--aa-main-col, 70fr));
}

/* Article stays first in the DOM for reading order and SEO; the grid
   places it visually for the left-sidebar case. */
.aa-layout--right .aa-layout__main { grid-column: 1; grid-row: 1; }
.aa-layout--right .aa-sidebar      { grid-column: 2; grid-row: 1; }
.aa-layout--left  .aa-layout__main { grid-column: 2; grid-row: 1; }
.aa-layout--left  .aa-sidebar      { grid-column: 1; grid-row: 1; }

/* Sticky only when Astra's "Klebrige Seitenleiste" is on. */
body.ast-sticky-sidebar .aa-sidebar__inner {
  position: sticky;
  top: 96px;
  max-height: calc(100vh - 116px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

@media (max-width: 1040px) {
  .aa-layout--left,
  .aa-layout--right { display: block; }
  .aa-sidebar { margin-top: var(--space-8); }
  body.ast-sticky-sidebar .aa-sidebar__inner {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

/* ---- Widget rhythm ---- */
.aa-sidebar .widget { margin: 0 0 var(--space-7); }
.aa-sidebar .widget:last-child { margin-bottom: 0; }

/* ---- Boxed (Seitenleisten-Stil → Box-Layout) ---- */
.aa-sidebar--boxed .widget {
  background: var(--surface-card);
  border: 1px solid var(--border-neutral);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-5);
}

/* ---- Titles: classic (.widget-title) and block-based widgets ---- */
.aa-sidebar .widget-title,
.aa-sidebar .widget_block > h1,
.aa-sidebar .widget_block > h2,
.aa-sidebar .widget_block > h3,
.aa-sidebar .widget_block > h4,
.aa-sidebar .wp-block-heading {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-heading);
  margin: 0 0 var(--space-4);
  line-height: var(--leading-snug);
}

/* ---- Generic ---- */
.aa-sidebar ul,
.aa-sidebar ol { list-style: none; margin: 0; padding: 0; }
.aa-sidebar li { margin: 0 0 var(--space-3); line-height: var(--leading-snug); }
.aa-sidebar li:last-child { margin-bottom: 0; }
.aa-sidebar a {
  color: var(--text-body);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-soft);
}
.aa-sidebar a:hover,
.aa-sidebar a:focus-visible { color: var(--accent-hover); }
.aa-sidebar p {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: var(--leading-normal);
}
.aa-sidebar__inner > *:last-child { margin-bottom: 0; }
.aa-sidebar img { max-width: 100%; height: auto; }
.aa-sidebar select,
.aa-sidebar .wp-block-categories__dropdown {
  width: 100%;
  padding: 0.6rem 0.8rem;
  font: inherit;
  font-size: var(--text-sm);
  border: 1px solid var(--border-neutral);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  color: var(--text-body);
}

/* ---- Search: classic widget + core Search block ----
   Astra absolutely-positions the button and makes the submit text
   transparent so its own icon can overlay the field. Undo all of it. */
.aa-sidebar .search-form,
.aa-sidebar .wp-block-search__inside-wrapper {
  display: flex;
  gap: var(--space-2);
  position: relative;
}
.aa-sidebar .search-field,
.aa-sidebar .wp-block-search__input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  padding: 0.7rem 0.9rem;
  font: inherit;
  font-size: var(--text-sm);
  border: 1px solid var(--border-neutral);
  border-radius: var(--radius-pill);
  background: var(--surface-1);
  color: var(--text-body);
}
.aa-sidebar .search-field:focus-visible,
.aa-sidebar .wp-block-search__input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-ring);
  border-color: var(--accent);
}
.aa-sidebar .widget_search .search-form button,
.aa-sidebar .widget_search .search-form input[type="submit"],
.aa-sidebar .widget_search .search-form input[type="submit"]:hover,
.aa-sidebar .widget_search .search-form input[type="submit"]:focus,
.aa-sidebar .search-submit,
.aa-sidebar .wp-block-search__button {
  position: static;
  top: auto;
  right: auto;
  z-index: auto;
  max-width: none;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--ink-900);
  cursor: pointer;
}
.aa-sidebar .widget_search .search-form .search-field { padding-right: 0.9rem; }

/* ---- Categories / Archives / Pages ---- */
.aa-sidebar .wp-block-categories-list,
.aa-sidebar .wp-block-archives-list,
.aa-sidebar .wp-block-page-list { list-style: none; margin: 0; padding: 0; }
.aa-sidebar .cat-item,
.aa-sidebar .wp-block-categories-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}
.aa-sidebar__count {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.aa-sidebar .children { margin-top: var(--space-2); padding-left: var(--space-4); }

/* ---- Recent / Latest Posts ---- */
.aa-sidebar .wp-block-latest-posts__list,
.aa-sidebar .widget_recent_entries ul { display: grid; gap: var(--space-4); }
.aa-sidebar .wp-block-latest-posts__featured-image img {
  border-radius: var(--radius-sm);
  width: 100%;
}
.aa-sidebar .wp-block-latest-posts__post-title,
.aa-sidebar .widget_recent_entries a {
  display: block;
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
  line-height: var(--leading-snug);
}
.aa-sidebar .wp-block-latest-posts__post-date,
.aa-sidebar__meta {
  display: block;
  margin-top: 2px;
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.aa-sidebar .wp-block-latest-posts__post-excerpt {
  margin: 0.25rem 0 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* ---- Tag cloud. Core inlines style="font-size:22.4pt" per tag, and an
        author !important declaration outranks a non-important inline. ---- */
.aa-sidebar .wp-block-tag-cloud a,
.aa-sidebar .tagcloud a {
  font-size: var(--text-xs) !important;
  display: inline-block;
  margin: 0 4px 6px 0;
  padding: 0.35em 0.8em;
  border: 1px solid var(--border-neutral);
  border-radius: var(--radius-pill);
  background: var(--surface-1);
  color: var(--text-body);
  line-height: 1.5;
}
.aa-sidebar .wp-block-tag-cloud a:hover,
.aa-sidebar .tagcloud a:hover {
  background: var(--surface-raised);
  border-color: var(--accent);
  color: var(--accent);
}

/* ---- Other blocks a site owner may drop in ---- */
.aa-sidebar .wp-block-group,
.aa-sidebar .widget_block > .wp-block-group { margin: 0; }
.aa-sidebar .wp-block-image { margin: 0 0 var(--space-3); }
.aa-sidebar .wp-block-image img { border-radius: var(--radius-md); }
.aa-sidebar .wp-block-buttons { margin: 0; }
.aa-sidebar .wp-block-button__link {
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
}
.aa-sidebar .wp-block-latest-comments,
.aa-sidebar .wp-block-latest-comments__comment {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}
.aa-sidebar .wp-block-calendar table,
.aa-sidebar .widget_calendar table { width: 100%; font-size: var(--text-sm); }
.aa-sidebar .wp-block-social-links { margin: 0; }
.aa-sidebar .wp-block-separator { margin: var(--space-5) 0; border-color: var(--border-neutral); }

/* ---- Starter-widget CTA + editor-only hint ---- */
.aa-sidebar__cta .btn,
.aa-sidebar__cta .aa-btn { width: 100%; justify-content: center; }
.aa-sidebar__hint {
  font-size: var(--text-xs);
  color: var(--text-faint);
  margin-top: var(--space-5);
}

/* .aa-art__body pins itself to --measure and centres; inside the layout the
   container owns the width, so it must fill the track instead. */
.aa-layout__main .aa-art__body {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

/* ============================================================
   HELLE STANDARDSEITEN: dunkle Schrift
   Startseite und dunkle Theme-Bereiche bleiben unverändert.
   ============================================================ */

body.page:not(.home) .entry-content {
  color: #443B2F !important;
}

body.page:not(.home) .entry-content p,
body.page:not(.home) .entry-content li,
body.page:not(.home) .entry-content dt,
body.page:not(.home) .entry-content dd,
body.page:not(.home) .entry-content figcaption,
body.page:not(.home) .entry-content blockquote,
body.page:not(.home) .entry-content h1,
body.page:not(.home) .entry-content h2,
body.page:not(.home) .entry-content h3,
body.page:not(.home) .entry-content h4,
body.page:not(.home) .entry-content h5,
body.page:not(.home) .entry-content h6 {
  color: #443B2F !important;
}

/* Links auf hellen Seiten */
body.page:not(.home) .entry-content a {
  color: #9A5158;
}

/* Dunkle Aurum-Elemente behalten ihre helle Schrift */
body.page:not(.home) .entry-content .aa-offering,
body.page:not(.home) .entry-content .aa-test,
body.page:not(.home) .entry-content .aa-card,
body.page:not(.home) .entry-content .aa-tile {
  color: #EDE6D6 !important;
}

body.page:not(.home) .entry-content .aa-offering p,
body.page:not(.home) .entry-content .aa-offering li,
body.page:not(.home) .entry-content .aa-offering h1,
body.page:not(.home) .entry-content .aa-offering h2,
body.page:not(.home) .entry-content .aa-offering h3,
body.page:not(.home) .entry-content .aa-test p,
body.page:not(.home) .entry-content .aa-test li,
body.page:not(.home) .entry-content .aa-test h1,
body.page:not(.home) .entry-content .aa-test h2,
body.page:not(.home) .entry-content .aa-test h3,
body.page:not(.home) .entry-content .aa-card p,
body.page:not(.home) .entry-content .aa-card li,
body.page:not(.home) .entry-content .aa-card h1,
body.page:not(.home) .entry-content .aa-card h2,
body.page:not(.home) .entry-content .aa-card h3,
body.page:not(.home) .entry-content .aa-tile p,
body.page:not(.home) .entry-content .aa-tile li,
body.page:not(.home) .entry-content .aa-tile h1,
body.page:not(.home) .entry-content .aa-tile h2,
body.page:not(.home) .entry-content .aa-tile h3 {
  color: #EDE6D6 !important;
}

/* ============================================================
   FIX: Mobiles Menü
   Verhindert seitliches Verschieben der Untermenüs.
   ============================================================ */

@media (max-width: 880px) {

  .aa-mobile-nav {
    inset: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    transform: none !important;
    overflow-x: hidden;
    overscroll-behavior: contain;
  }

  /* Desktop-Hover-Transformation auf Mobilgeräten deaktivieren */
  .aa-mobile-nav .aa-nav__item:hover > .aa-submenu,
  .aa-mobile-nav .aa-nav__item:focus-within > .aa-submenu,
  .aa-mobile-nav .aa-nav__item--has-children:hover > .aa-submenu,
  .aa-mobile-nav .aa-nav__item--has-children:focus-within > .aa-submenu {
    position: static;
    left: auto;
    transform: none !important;
    opacity: 1;
    visibility: visible;
    width: 100%;
  }

  .aa-mobile-nav .aa-nav,
  .aa-mobile-nav .aa-submenu,
  .aa-mobile-nav .aa-submenu__list,
  .aa-mobile-nav .aa-submenu__item {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100%;
    max-width: 100%;
    transform: none !important;
  }

  /* Alle Menütexte gut sichtbar und mittig */
  .aa-mobile-nav .aa-hdr__link {
    color: #EDE6D6 !important;
    text-align: center;
  }

  .aa-mobile-nav .aa-submenu__link {
    display: block;
    width: 100%;
    padding: 10px 12px;
    color: #D9D2C5 !important;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* Aktuelle Seite beziehungsweise aktiver Menüpunkt */
  .aa-mobile-nav .current-menu-item > .aa-hdr__link,
  .aa-mobile-nav .current-menu-parent > .aa-hdr__link,
  .aa-mobile-nav .current-menu-ancestor > .aa-hdr__link,
  .aa-mobile-nav .aa-hdr__link[aria-current="page"] {
    color: var(--accent) !important;
  }
}

/* Hintergrundseite nicht gleichzeitig scrollen */
body:has(.aa-mobile-nav.is-open) {
  overflow: hidden;
}
/* Überschriften in dunklen Artikelkarten immer sichtbar */
.aa-article .aa-article__title {
  color: #EDE6D6 !important;
}

/* Beim Mauszeigerkontakt weiterhin golden */
.aa-article:hover .aa-article__title,
.aa-article:focus .aa-article__title,
.aa-article:focus-within .aa-article__title {
  color: var(--accent-hover) !important;
}

/* Schlagwort- und Kategoriearchive: einfarbiger Kopfbereich */
body.archive .aa-page-head {
  background-color: #f2ece2 !important;
}

/* Fest eingebauten englischen Beschreibungstext ausblenden */
body.archive .aa-page-head > p {
  display: none !important;
}

body.archive .aa-page-head {
  background-image:
    linear-gradient(
      rgba(14, 13, 15, 0.58),
      rgba(14, 13, 15, 0.72)
    ),
    url("https://weltenlotse.de/home/footer-bild/") !important;

  background-size: cover !important;
  background-position: center !important;
}

/* Hauptüberschrift besser lesbar */
body.archive .aa-page-head h1 {
  color: #F6F0E6 !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75);
}

/* The Journal und dekorative Linien */
body.archive .aa-page-head .aa-label,
body.archive .aa-page-head .aa-label::before,
body.archive .aa-page-head .aa-label::after {
  color: #F0DDA0 !important;
}

body.archive .aa-page-head .aa-label::before,
body.archive .aa-page-head .aa-label::after {
  background-color: #F0DDA0 !important;
}

/* Trennlinie und Symbol */
body.archive .aa-page-head .aa-divider {
  color: #F0DDA0 !important;
}

body.archive .aa-page-head .aa-divider line,
body.archive .aa-page-head .aa-divider path,
body.archive .aa-page-head .aa-divider polygon {
  stroke: currentColor !important;
}

/* Filter-Schaltflächen */
body.archive .aa-page-head .aa-tag,
body.archive .aa-page-head .aa-btn {
  color: #F0DDA0 !important;
  border-color: rgba(240, 221, 160, 0.85) !important;
  background: rgba(14, 13, 15, 0.55) !important;
  backdrop-filter: blur(3px);
}

/* Aktiver Filter */
body.archive .aa-page-head .aa-tag.is-active,
body.archive .aa-page-head .aa-btn.is-active,
body.archive .aa-page-head [aria-current="page"] {
  color: #14110F !important;
  background: #F0DDA0 !important;
}

/* ============================================================
   BLOGARTIKEL: lesbare Schrift auf allen Beitragsbildern
   ============================================================ */

/* Gleichmäßiger dunkler Verlauf über dem Beitragsbild */
.aa-art__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(14, 13, 15, 0.20) 0%,
    rgba(14, 13, 15, 0.42) 38%,
    rgba(14, 13, 15, 0.78) 65%,
    rgba(14, 13, 15, 0.97) 100%
  ) !important;
  pointer-events: none;
}

/* Artikelüberschrift immer hell */
.aa-art__head h1 {
  color: #F6F0E6 !important;
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.85),
    0 4px 20px rgba(0, 0, 0, 0.55);
}

/* Autor, Datum und Lesezeit */
.aa-art__head .aa-art__meta {
  color: #EDE6D6 !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}

.aa-art__head .aa-art__meta b {
  color: #F0DDA0 !important;
}

/* Kategorie über der Überschrift */
.aa-art__head .aa-badge,
.aa-art__head .aa-tag {
  color: #F4C4BC !important;
  background: rgba(45, 18, 20, 0.78) !important;
  border-color: rgba(244, 196, 188, 0.65) !important;
  backdrop-filter: blur(4px);
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.8);
}

/* ============================================================
   SUCHERGEBNISSE: gleicher Bildkopf wie Kategorien
   ============================================================ */

body.search .aa-page-head {
  background-image:
    linear-gradient(
      rgba(14, 13, 15, 0.58),
      rgba(14, 13, 15, 0.72)
    ),
    url("https://weltenlotse.de/home/footer-bild/") !important;

  background-size: cover !important;
  background-position: center !important;
}

/* Englischen Beschreibungstext ausblenden */
body.search .aa-page-head > p {
  display: none !important;
}

/* Suchüberschrift */
body.search .aa-page-head h1 {
  color: #F6F0E6 !important;
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.85),
    0 4px 20px rgba(0, 0, 0, 0.55);
}

/* The Journal */
body.search .aa-page-head .aa-label {
  color: #F0DDA0 !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
}

body.search .aa-page-head .aa-label::before,
body.search .aa-page-head .aa-label::after {
  background-color: #F0DDA0 !important;
}

/* Trennlinie und Symbol */
body.search .aa-page-head .aa-divider {
  color: #F0DDA0 !important;
}

body.search .aa-page-head .aa-divider line,
body.search .aa-page-head .aa-divider path,
body.search .aa-page-head .aa-divider polygon {
  stroke: currentColor !important;
}

/* Kategorien unterhalb der Überschrift */
body.search .aa-page-head .aa-tag,
body.search .aa-page-head .aa-btn {
  color: #F0DDA0 !important;
  border-color: rgba(240, 221, 160, 0.85) !important;
  background: rgba(14, 13, 15, 0.58) !important;
  backdrop-filter: blur(3px);
}

body.search .aa-page-head a {
  color: #F0DDA0 !important;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.8);
}

/* Quizschrift auf allen Seiten lesbar */
.fbq-shell .fbq-app {
  color: var(--fbq-sand) !important;
}

.fbq-shell .fbq-app h2 {
  background: linear-gradient(
    180deg,
    var(--fbq-sand),
    var(--fbq-taupe-bright) 75%
  ) !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.fbq-shell .fbq-app h3,
.fbq-shell .fbq-app h4,
.fbq-shell .fbq-app .fbq-choice-name,
.fbq-shell .fbq-app .fbq-option-text strong {
  color: var(--fbq-sand) !important;
}

.fbq-shell .fbq-app p,
.fbq-shell .fbq-app li,
.fbq-shell .fbq-app label,
.fbq-shell .fbq-app .fbq-sub,
.fbq-shell .fbq-app .fbq-hint,
.fbq-shell .fbq-app .fbq-book-author,
.fbq-shell .fbq-app .fbq-counter,
.fbq-shell .fbq-app .fbq-option-text small,
.fbq-shell .fbq-app .fbq-result-why,
.fbq-shell .fbq-app .fbq-alt-title {
  color: var(--fbq-sand-dim) !important;
}

.fbq-shell .fbq-app .fbq-choice,
.fbq-shell .fbq-app .fbq-book-card,
.fbq-shell .fbq-app .fbq-option,
.fbq-shell .fbq-app .fbq-pill,
.fbq-shell .fbq-app .fbq-btn {
  color: var(--fbq-sand) !important;
}

.fbq-shell .fbq-app .fbq-btn.is-primary {
  color: #f6eded !important;
}

/* Buchcover behalten ihre dunkle Beschriftung */
.fbq-shell .fbq-app .fbq-book-cover,
.fbq-shell .fbq-app .fbq-result-cover,
.fbq-shell .fbq-app .fbq-alt-cover {
  color: rgba(22, 21, 26, 0.97) !important;
  -webkit-text-fill-color: rgba(22, 21, 26, 0.97) !important;
}