/* ============================================================
   Mamaglück — Component & Layout Styles
   Depends on tokens.css for custom properties.
   ============================================================ */

/* ---------- Layout primitives ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
/*.section { padding-block: var(--section-y); position: relative; }*/
.section--home { padding-block: var(--section-y); position: relative; }
.section--blush { background: var(--bg-alt); padding-block: var(--section-y);}
.section--teal  { background: var(--teal-tint); padding-block: var(--section-y);}
.section-head { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-7); }
.section-head .eyebrow { color: var(--coral); }
.section-head h2 { max-width: 18ch; }
.section-head p { max-width: 56ch; color: var(--text-muted); }
.center { text-align: center; align-items: center; }
.center p, .center h2 { margin-inline: auto; }

/* ---------- Buttons (pill) ---------- */
.btn {
  --_bg: var(--primary); --_fg: var(--on-primary); --_bd: transparent;
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display); font-weight: 500; font-size: 1.0625rem;
  padding: 0.78em 1.5em; border-radius: var(--r-pill);
  background: var(--_bg); color: var(--_fg); border: 2px solid var(--_bd);
  cursor: pointer; line-height: 1; white-space: nowrap;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.btn svg { width: 1.15em; height: 1.15em; }
.btn--primary { box-shadow: var(--shadow-coral); }
.btn--primary:hover { background: var(--primary-hover); transform: translateY(-2px); box-shadow: 0 18px 34px rgba(255,122,89,0.34); }
.btn--primary:active { transform: translateY(0) scale(0.985); }
.btn--ghost { --_bg: transparent; --_fg: var(--ink); --_bd: var(--blush-deep); }
.btn--ghost:hover { --_bd: var(--coral); --_fg: var(--coral-deep); transform: translateY(-2px); background: var(--white); }
.btn--ghost:active { transform: translateY(0) scale(0.985); }
.btn--yellow { --_bg: var(--yellow); --_fg: var(--ink); box-shadow: 0 14px 28px rgba(255,194,71,0.34); }
.btn--yellow:hover { --_bg: var(--yellow-deep); transform: translateY(-2px); }
.btn--white { --_bg: var(--white); --_fg: var(--coral-deep); }
.btn--white:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--sm { padding: 0.6em 1.15em; font-size: 0.95rem; }

/* ---------- Category pill / badge ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-label); letter-spacing: 0.02em;
  padding: 0.36em 0.85em; border-radius: var(--r-pill);
  background: var(--blush); color: var(--coral-deep);
}
.pill--teal   { background: var(--teal-tint);  color: var(--teal-deep); }
.pill--yellow { background: var(--yellow-tint); color: var(--yellow-deep); }
.pill--coral  { background: var(--blush);       color: var(--coral-deep); }

/* ---------- Decorative shapes ---------- */
.deco { position: absolute; pointer-events: none; z-index: 0; }
.dot  { border-radius: var(--r-pill); }
.float       { animation: float var(--float) var(--ease-soft) infinite; }
.float--slow { animation-duration: 11s; }
.float--rev  { animation-direction: alternate-reverse; }
@keyframes float {
  0%   { transform: translateY(0) rotate(0deg); }
  50%  { transform: translateY(-14px) rotate(6deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

/* ---------- Card ---------- */
.card {
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); overflow: hidden;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

/* ---------- Photo placeholder ---------- */
.photo {
  position: relative; display: block; width: 100%;
  background:
    radial-gradient(120% 120% at 15% 10%, rgba(255,255,255,0.5), transparent 50%),
    linear-gradient(135deg, var(--blush-deep), var(--blush));
  background-color: var(--blush);
  overflow: hidden;
}
.photo[data-tint="teal"]   { background: radial-gradient(120% 120% at 15% 10%, rgba(255,255,255,0.5), transparent 50%), linear-gradient(135deg, #BCE4DC, var(--teal-tint)); }
.photo[data-tint="yellow"] { background: radial-gradient(120% 120% at 15% 10%, rgba(255,255,255,0.55), transparent 50%), linear-gradient(135deg, #FFE2A6, var(--yellow-tint)); }
.photo[data-tint="coral"]  { background: radial-gradient(120% 120% at 15% 10%, rgba(255,255,255,0.5), transparent 50%), linear-gradient(135deg, #FFC4B2, var(--blush)); }
.photo .photo__label {
  position: absolute; inset: auto auto 12px 12px;
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--font-display); font-size: 0.75rem; font-weight: 500;
  color: rgba(43,42,61,0.5); background: rgba(255,255,255,0.6);
  padding: 0.3em 0.7em; border-radius: var(--r-pill); backdrop-filter: blur(2px);
}
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter: blur(10px);
  transition: box-shadow var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); background: color-mix(in srgb, var(--cream) 96%, transparent); }
.nav { display: flex; align-items: center; gap: var(--space-5); height: 78px; }
.brand { display: inline-flex; align-items: center; gap: 0.55em; font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; color: var(--ink); flex-shrink: 0; }
.brand img { height: 44px; width: auto; }
/* Custom logo (Site Identity → Logo): Astra-proof sizing. */
.brand .custom-logo { display: block; height: 44px !important; width: auto !important; max-width: none !important; margin: 0 !important; }
.brand .brand__mark {
  width: 38px; height: 38px; border-radius: 13px; flex: none;
  display: grid; place-items: center; color: #fff; font-size: 1.15rem;
  background: linear-gradient(135deg, var(--coral), var(--yellow));
  box-shadow: var(--shadow-coral); transform: rotate(-6deg);
}
.brand .brand__mark span { transform: rotate(6deg); display: block; }
.nav__links { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; list-style: none; padding: 0; margin-block: 0; }
.nav__item { position: relative; list-style: none; }
.nav__link { font-family: var(--font-display); font-weight: 500; font-size: 1.02rem; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 0.2em; padding: 0.5em 0.85em; border-radius: var(--r-pill); white-space: nowrap; cursor: pointer; transition: color var(--dur), background var(--dur); }
.nav__link:hover,
.nav__link.is-current,
.nav__link[aria-current="page"],
.nav__item--has-children:focus-within > .nav__link { color: var(--coral-deep); background: var(--blush); }
.nav__chevron { transition: transform var(--dur) var(--ease-out); }
.nav__item--has-children:hover > .nav__link .nav__chevron,
.nav__item--has-children:focus-within > .nav__link .nav__chevron { transform: rotate(180deg); }

/* ---- Dropdown panel (level 2) ---- */
.nav__submenu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 232px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: var(--space-2);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  z-index: 60;
}
/* Transparent bridge across the 8px gap so the pointer keeps hovering the
   .nav__item while travelling from the top-level link into the panel. */
.nav__submenu::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.nav__item:hover > .nav__submenu,
.nav__item:focus-within > .nav__submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__submenu-list, .nav__submenu-sub { list-style: none; margin: 0; padding: 0; }
.nav__submenu-item { list-style: none; }
.nav__submenu-link {
  display: block; flex: 1 1 auto; min-width: 0;
  font-family: var(--font-display); font-weight: 500; font-size: 0.96rem; color: var(--ink);
  padding: 0.55em 0.7em; border-radius: var(--r-md); text-decoration: none;
  transition: color var(--dur), background var(--dur);
}
.nav__submenu-link:hover,
.nav__submenu-link.is-current { color: var(--coral-deep); background: var(--blush); }

/* ---- Accordion row (level 3): label link + caret toggle ---- */
.nav__submenu-row { display: flex; align-items: center; gap: 0.1rem; }
.nav__submenu-caret {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; min-width: 32px; height: 32px; padding: 0;
  border: none; background: transparent; border-radius: var(--r-md);
  color: var(--text-muted); cursor: pointer; transition: color var(--dur), background var(--dur);
}
.nav__submenu-caret:hover { color: var(--coral-deep); background: var(--blush); }
.nav__submenu-item.is-open > .nav__submenu-row > .nav__submenu-caret .nav__chevron { transform: rotate(180deg); }

/* ---- Nested branch (level 3) — indented with a tree line ---- */
.nav__submenu-sub {
  margin: 0.15rem 0 0.3rem 0.6rem; padding-left: 0.6rem;
  border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 1px;
}
.nav__submenu-sub[hidden] { display: none; }
.nav__submenu-sub .nav__submenu-link { font-size: 0.9rem; padding: 0.5em 0.6em; }

.nav__cta { margin-left: var(--space-3); }
.nav__toggle { display: none; margin-left: auto; background: var(--white); border: 1px solid var(--line); width: 46px; height: 46px; border-radius: var(--r-md); place-items: center; cursor: pointer; box-shadow: var(--shadow-xs); }
.nav__toggle svg { width: 24px; height: 24px; color: var(--ink); }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; overflow: hidden; padding-block: clamp(2.5rem, 1rem + 5vw, 5rem) var(--section-y); }
.hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.hero__eyebrow { color: var(--teal-deep); display: inline-flex; align-items: center; gap: 0.5em; margin-bottom: var(--space-4); }
.hero__eyebrow::before { content: ""; width: 26px; height: 3px; border-radius: 3px; background: var(--teal); }
.hero h1.hero__title { font-size: var(--fs-display); line-height: var(--lh-tight); max-width: 15ch; text-wrap: pretty; }
.hero h1 .accent { color: var(--coral); }
.hero__sub { margin-top: var(--space-5); max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.hero__stats { display: flex; gap: var(--space-6); margin-top: var(--space-7); }
.hero__stat { display: flex; flex-direction: column; }
.hero__stat b { font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; color: var(--ink); }
.hero__stat span { font-size: var(--fs-small); color: var(--text-muted); }
/* hero__copy must be positioned so its z-index beats the halo (z-index:1),
   which is absolute and bleeds slightly left with negative inset. */
.hero__copy { position: relative; z-index: 3; }

.hero__media { position: relative; z-index: 2; justify-self: center; width: 100%; max-width: 480px; }
.hero__blob {
  position: relative; aspect-ratio: 1 / 1.05; z-index: 2;
  border-radius: 46% 54% 56% 44% / 52% 46% 54% 48%;
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.hero__blob .photo,
.hero__blob img { width: 100%; height: 100%; object-fit: cover; }
.hero__halo {
  position: absolute; inset: -8% -10% -6% -3%; z-index: 1;
  border-radius: 46% 54% 56% 44% / 52% 46% 54% 48%;
  background: var(--yellow-tint);
}
.hero__badge {
  position: absolute; z-index: 3; background: var(--white);
  border-radius: var(--r-lg); padding: 0.85em 1.1em; box-shadow: var(--shadow-md);
  display: flex; align-items: center; gap: 0.7em;
  font-family: var(--font-display); font-weight: 500;
}
.hero__badge svg { width: 22px; height: 22px; }
.hero__badge--tl { top: 4%; left: -6%; color: var(--teal-deep); }
.hero__badge--br { bottom: 8%; right: -5%; color: var(--coral-deep); }

/* ============================================================
   INTRO STRIP
   ============================================================ */
.intro { background: var(--bg-alt); }
.intro__grid { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: center; }
.intro__portrait { width: clamp(120px, 12vw, 168px); aspect-ratio: 1; border-radius: var(--r-pill); overflow: hidden; box-shadow: var(--shadow-md); border: 5px solid var(--white); }
.intro__portrait .photo,
.intro__portrait img { width: 100%; height: 100%; object-fit: cover; }
.intro__body h2 { margin-bottom: var(--space-3); }
.intro__body p { color: var(--text-muted); max-width: 60ch; }
.intro__sign { font-family: var(--font-script); font-weight: 700; font-size: 2.1rem; color: var(--coral); margin-top: var(--space-4); }

/* ============================================================
   TOPIC CATEGORIES
   ============================================================ */
.topics { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-4); }
.topic {
  position: relative; background: var(--surface); border-radius: var(--r-lg);
  padding: var(--space-6) var(--space-4) var(--space-5); text-align: center;
  box-shadow: var(--shadow-sm); overflow: hidden; display: block;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.topic::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 7px; background: var(--_accent, var(--coral)); }
.topic:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.topic__icon {
  width: 62px; height: 62px; border-radius: var(--r-md); margin: var(--space-2) auto var(--space-4);
  display: grid; place-items: center; color: var(--_accent, var(--coral));
  background: color-mix(in srgb, var(--_accent, var(--coral)) 14%, var(--white));
}
.topic__icon svg { width: 30px; height: 30px; }
.topic h3 { font-size: 1.12rem; }

/* ============================================================
   FEATURED + LATEST POSTS
   ============================================================ */
.posts-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-5); }
.post-feature { display: flex; flex-direction: column; }
.post-feature .photo { aspect-ratio: 16 / 11; }
.post-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.post-card { display: flex; flex-direction: column; }
.post-card .photo { aspect-ratio: 16 / 10; }
.post-card__body { padding: var(--space-4) var(--space-5) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.post-feature .post-card__body { padding: var(--space-5) var(--space-6) var(--space-6); }
.post-card__meta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.post-card__date { font-size: var(--fs-small); color: var(--text-faint); display: inline-flex; align-items: center; gap: 0.4em; }
.post-card__date svg { width: 15px; height: 15px; }
.post-card h3 { line-height: 1.22; }
.post-feature h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.post-card__excerpt { color: var(--text-muted); font-size: var(--fs-small); }
.read-more { font-family: var(--font-display); font-weight: 500; color: var(--coral-deep); display: inline-flex; align-items: center; gap: 0.4em; margin-top: auto; }
.read-more svg { width: 18px; height: 18px; transition: transform var(--dur) var(--ease-out); }
.post-card:hover .read-more svg { transform: translateX(4px); }

/* ============================================================
   POPULAR POSTS
   ============================================================ */
.popular { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.popular__item { display: flex; gap: var(--space-4); align-items: center; background: var(--surface); border-radius: var(--r-lg); padding: var(--space-4); box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.popular__item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.popular__num { font-family: var(--font-display); font-weight: 600; font-size: 2.4rem; line-height: 1; color: var(--blush-deep); flex: none; width: 1.4em; text-align: center; }
.popular__item:nth-child(1) .popular__num { color: var(--coral); }
.popular__item:nth-child(2) .popular__num { color: var(--teal); }
.popular__item:nth-child(3) .popular__num { color: var(--yellow-deep); }
.popular__txt .pill { margin-bottom: 0.5em; }
.popular__txt h3 { font-size: 1.08rem; line-height: 1.25; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.quote { background: var(--surface); border-radius: var(--r-xl); padding: var(--space-6); box-shadow: var(--shadow-sm); position: relative; display: flex; flex-direction: column; gap: var(--space-4); }
.quote::after { content: ""; position: absolute; bottom: -14px; left: 42px; width: 28px; height: 28px; background: var(--surface); border-radius: 0 0 0 8px; transform: rotate(45deg); box-shadow: var(--shadow-sm); clip-path: polygon(100% 0, 0 100%, 100% 100%); }
.quote__mark { font-family: var(--font-display); font-size: 2.6rem; line-height: 0.4; color: var(--teal); height: 0.5em; }
.quote p { color: var(--text); font-size: 1.05rem; }
.quote__author { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; }
.quote__avatar { width: 46px; height: 46px; border-radius: var(--r-pill); overflow: hidden; flex: none; box-shadow: var(--shadow-xs); }
.quote__avatar .photo { width: 100%; height: 100%; }
.quote__author b { font-family: var(--font-display); font-weight: 500; font-size: 0.98rem; }
.quote__author span { display: block; font-size: var(--fs-small); color: var(--text-faint); }

/* ============================================================
   INSTAGRAM STRIP
   ============================================================ */
.insta-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-3); }
.insta-tile { position: relative; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; cursor: pointer; }
.insta-tile .photo { width: 100%; height: 100%; }
.insta-tile__overlay { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: color-mix(in srgb, var(--coral) 75%, transparent); opacity: 0; transition: opacity var(--dur) var(--ease-out); }
.insta-tile__overlay svg { width: 26px; height: 26px; }
.insta-tile:hover .insta-tile__overlay { opacity: 1; }
.insta-handle { font-family: var(--font-display); font-weight: 500; color: var(--coral-deep); display: inline-flex; align-items: center; gap: 0.4em; }

/* ---- Block-editor Instagram gallery (native wp:gallery) ---- */
.wp-block-gallery.insta-gallery { gap: var(--space-3); }
.wp-block-gallery.insta-gallery.has-nested-images figure.wp-block-image { border-radius: var(--r-md); overflow: hidden; margin: 0; }
.wp-block-gallery.insta-gallery figure.wp-block-image img {
  aspect-ratio: 1; object-fit: cover; width: 100%; height: 100%;
  transition: transform var(--dur) var(--ease-out), filter var(--dur) var(--ease-out);
}
.wp-block-gallery.insta-gallery figure.wp-block-image:hover img { transform: scale(1.06); filter: saturate(1.12); }

/* ============================================================
   BLOCK-EDITOR TESTIMONIALS (native editable quote cards)
   ============================================================ */
.wp-block-group.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.wp-block-group.quotes.is-layout-flow > * { margin-block: 0; }
.wp-block-group.quote {
  background: var(--surface); border-radius: var(--r-xl); padding: var(--space-6);
  box-shadow: var(--shadow-sm); position: relative;
  display: flex; flex-direction: column; gap: var(--space-3);
}
.wp-block-group.quote.is-layout-flow > * { margin-block: 0; }
.wp-block-group.quote::before {
  content: "\201C"; font-family: var(--font-display); font-size: 2.6rem;
  line-height: 0.55; color: var(--teal);
}
.quote__text { color: var(--text); font-size: 1.05rem; }
.quote__by { margin-top: auto; }
.quote__by.is-layout-flow > * { margin-block: 0; }
.quote__name { font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; color: var(--ink); }
.quote__role { font-size: var(--fs-small); color: var(--text-faint); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--ink); color: #CFCEDB; padding-block: var(--space-9) var(--space-6); }
/* Flex-wrap so the footer adapts to any number of menu-driven columns. */
.footer-grid { display: flex; flex-wrap: wrap; gap: var(--space-7) var(--space-6); align-items: flex-start; }
.footer-grid > * { flex: 1 1 160px; min-width: 150px; }
.footer-grid > :first-child { flex: 1 1 280px; min-width: 240px; }
.site-footer .brand { color: #fff; margin-bottom: var(--space-4); }
.footer-about { color: #A9A7BC; max-width: 34ch; font-size: var(--fs-small); }
.footer-sign { font-family: var(--font-script); font-weight: 600; font-size: 1.7rem; color: var(--yellow); margin-top: var(--space-4); display: inline-block; }
.footer-col h4 { color: #fff; font-size: 1.05rem; margin-bottom: var(--space-4); }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.footer-col a { color: #A9A7BC; font-size: var(--fs-small); transition: color var(--dur); }
.footer-col a:hover { color: var(--coral); }
.footer-social { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.footer-social a { width: 42px; height: 42px; border-radius: var(--r-pill); display: grid; place-items: center; background: rgba(255,255,255,0.08); color: #fff; transition: background var(--dur), transform var(--dur); }
.footer-social a:hover { background: var(--coral); transform: translateY(-3px); }
.footer-social svg { width: 20px; height: 20px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); margin-top: var(--space-8); padding-top: var(--space-5); display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; font-size: var(--fs-small); color: #8d8ba0; }
.footer-bottom a { color: #8d8ba0; }
.footer-bottom a:hover { color: #fff; }

/* ============================================================
   ENTRANCE ANIMATION
   ============================================================ */
@keyframes reveal-in {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .reveal.intro-anim { animation: reveal-in var(--dur-slow) var(--ease-out) both; }
}

/* ============================================================
   BLOCK-EDITOR INTRO SECTION
   ============================================================ */
.wp-block-group.section.intro {
  background: var(--blush);
  padding-block: var(--section-y);
}
.wp-block-group.section.intro .eyebrow { color: var(--teal-deep); }
.section--teal .eyebrow { color: var(--teal-deep); }
.wp-block-group.section.intro .intro__sign {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 2.1rem;
  color: var(--coral);
  margin-top: var(--space-4);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { order: -1; max-width: 380px; }
  .topics { grid-template-columns: repeat(3, 1fr); }
  .posts-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-7) var(--space-6); }
}

@media (max-width: 720px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: grid; }
  .nav { height: 66px; }

  .nav.is-open .nav__links {
    display: flex; flex-direction: column; align-items: stretch; gap: var(--space-1);
    position: absolute; top: 66px; left: 0; right: 0;
    background: var(--white); padding: var(--space-4) var(--gutter) var(--space-5);
    box-shadow: var(--shadow-md); margin: 0;
    max-height: calc(100vh - 66px); overflow-y: auto;
  }
  .nav.is-open .nav__link { padding: 0.75em 0.9em; font-size: 1.1rem; justify-content: space-between; }
  .nav.is-open .nav__cta { display: block; margin: var(--space-3) var(--gutter) 0; }
  .nav.is-open .nav__cta .btn { width: 100%; justify-content: center; }

  /* Multi-level menu on mobile — dropdown panels expand inline as an accordion */
  .nav.is-open .nav__item { position: static; }
  .nav.is-open .nav__link .nav__chevron { display: none; }
  .nav.is-open .nav__submenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; padding: 0 0 var(--space-2) var(--space-4);
    border: none; border-radius: 0; box-shadow: none;
  }
  .nav.is-open .nav__submenu::before { display: none; }
  .nav.is-open .nav__submenu-link { font-size: 1.02rem; padding: 0.6em 0.7em; }
  .nav.is-open .nav__submenu-caret { width: 40px; min-width: 40px; height: 40px; }

  .hero__stats { gap: var(--space-5); flex-wrap: wrap; }
  .hero__badge--tl { left: 0; }
  .hero__badge--br { right: 0; }
  .intro__grid { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .topics { grid-template-columns: repeat(2, 1fr); }
  .post-grid-2 { grid-template-columns: 1fr; }
  .popular { grid-template-columns: 1fr; }
  .quotes, .wp-block-group.quotes { grid-template-columns: 1fr; }
  .insta-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid > * { flex-basis: 100%; }
}

/* ============================================================
   HERO — BLOCK EDITOR
   Mirrors the PHP template structure exactly:
     PHP:   <section.hero> → <div.container> → <div.hero__grid>
     Blocks: <div.wp-block-group.hero> → <div.wp-block-columns.hero__grid>
   The columns act as .container (max-width + padding).
   ============================================================ */

/* 1. Group = <section.hero>: full-width, vertical padding, no horizontal padding
      (horizontal padding goes on the inner columns, acting as .container)
      ::before = teal dot  (top:18% left:6%, float 7s)
      ::after  = yellow dot (top:30% left:14%, float 7s reverse) */
.wp-block-group.hero {
  padding-inline: 0;
  /*background-color: var(--cream);*/
  position: relative;
  overflow: hidden;
}
.wp-block-group.hero::before,
.wp-block-group.hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.wp-block-group.hero::before {
  width: 18px; height: 18px;
  background: var(--teal);
  top: 18%; left: 6%;
  animation: float 7s var(--ease-soft) infinite;
}
.wp-block-group.hero::after {
  width: 11px; height: 11px;
  background: var(--yellow);
  top: 30%; left: 14%;
  animation: float 7s var(--ease-soft) infinite alternate-reverse;
}

/* Coral dot on left column ::before  (bottom:22% left:4% of the copy column,
   which visually matches the PHP template's left:4% of the full hero). */
.wp-block-column.hero__copy::before {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  width: 14px; height: 14px;
  background: var(--coral);
  bottom: 22%; left: 4%;
  animation: float 11s var(--ease-soft) infinite;
}

/* 2. Columns = .container + .hero__grid combined */
.wp-block-columns.hero__grid {
  /* Container behaviour */
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  box-sizing: border-box;
  /* CSS grid replacing Gutenberg flex */
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}

/* Eyebrow */
.wp-block-column.hero__copy .hero__eyebrow {
  color: var(--teal-deep);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.wp-block-column.hero__copy .hero__eyebrow::before {
  content: '';
  width: 26px;
  height: 3px;
  border-radius: 3px;
  background: var(--teal);
  flex-shrink: 0;
}

/* H1 title */
.wp-block-column.hero__copy .hero__title {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  max-width: 15ch;
  text-wrap: pretty;
  margin-top: 0;
}
.wp-block-column.hero__copy .hero__title .accent { color: var(--coral); }

/* Subtitle */
.wp-block-column.hero__copy .hero__sub {
  margin-top: var(--space-5);
  max-width: 46ch;
  font-size: var(--fs-lead);
  color: var(--text-muted);
  font-weight: 500;
}

/* Buttons row */
.wp-block-column.hero__copy .wp-block-buttons.hero__actions {
  margin-top: var(--space-6);
  gap: var(--space-3);
}

/* Stats row */
.wp-block-columns.hero__stats {
  margin-top: var(--space-7);
  flex-wrap: nowrap;
  gap: var(--space-6);
  align-items: flex-start;
  padding: 0;
  max-width: none;
  margin-inline: 0;
}
.wp-block-columns.hero__stats > .wp-block-column {
  padding: 0;
  flex: 1;
}
/* Reset flow margins inside each stat cell */
.wp-block-columns.hero__stats .wp-block-column.is-layout-flow > * {
  margin-block: 0;
}
.hero__stat-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.6rem;
  color: var(--ink);
  line-height: 1;
}
.hero__stat-num strong { font-weight: 600; }
.hero__stat-lbl {
  font-size: var(--fs-small);
  color: var(--text-muted);
  margin-top: 0.2em;
}

/* 5. Right column (hero__media)
      max-width: 480px centred in its grid cell — matches PHP .hero__media
      ::before = animated yellow halo
      ::after  = coral blob placeholder (shown until user uploads a photo)
      .wp-block-image = uploaded photo with blob border-radius */
.wp-block-column.hero__media {
  position: relative;
  z-index: 2;
  justify-self: center;
  align-self: center;
  /* Square box — pseudo-element percentages stay circular */
  width: 450px;
  height: 450px;
}

/* Badges overlay inside the block version media column */
.hero__badges-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}
.hero__badges-overlay .hero__badge {
  pointer-events: auto;
}

/* Gallery inside hero__media — square blob-circle (clip + shape live here) */
.wp-block-column.hero__media .wp-block-gallery {
  display: block;     /* override Gutenberg's flex layout */
  width: 380px;
  height: 380px;
  margin: auto;
  position: relative;
  z-index: 3;
  border-radius: 46% 54% 56% 44% / 52% 46% 54% 48%;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
/* Inner image figures fill the gallery container.
   :not(#individual-image) mirrors Gutenberg's own selector to win specificity. */
.wp-block-column.hero__media .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  aspect-ratio: unset;
  overflow: hidden;
}
.wp-block-column.hero__media .wp-block-gallery .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-width: none;
  border-radius: 0;
}

/* Uploaded image gets blob shape */
.wp-block-column.hero__media .wp-block-image {
  position: relative;
  z-index: 3;
  margin: 0;
  border-radius: 46% 54% 56% 44% / 52% 46% 54% 48%;
  overflow: hidden;
  aspect-ratio: 1 / 1.05;
  box-shadow: var(--shadow-lg);
}
.wp-block-column.hero__media .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-width: none;
  border-radius: 0;
}

/* 6. Responsive */
@media (max-width: 980px) {
  .wp-block-columns.hero__grid {
    grid-template-columns: 1fr;
  }
  .wp-block-column.hero__media {
    order: -1;
    /* Square at mobile size — keeps halo and blob circular */
    width: min(280px, 90vw);
    height: min(280px, 90vw);
    margin: auto;
  }
  .wp-block-column.hero__media .wp-block-gallery {
    width: 100%;
    height: 100%;
  }
}

/* ============================================================
   ASTRA OVERRIDES
   Astra ships heavy inline CSS (loaded before ours) that overrides
   backgrounds, button colours, and heading colours via class and
   element selectors with various specificities. These rules win
   back the brand look.
   ============================================================ */

/* -- Section & page backgrounds -------------------------------- */
.hero,
.section,
.section:not(.section--blush):not(.section--teal) {
  /*background-color: var(--cream);*/
}
.section--blush { background-color: var(--blush); }
.section--teal  { background-color: var(--teal-tint); }
.intro          { background-color: var(--blush); }

/* -- PHP-template pill buttons (.btn class) --------------------
   Astra can set `a { color: <blue> }` and `button { border-radius: 4px }`.
   Our `.btn` selector has higher specificity, but add explicit resets
   for safety.                                                   */
a.btn,
button.btn {
  border-radius: var(--r-pill);
  text-decoration: none;
}
a.btn--primary,
button.btn--primary {
  background-color: var(--coral);
  color: #fff;
  border-color: transparent;
}
a.btn--ghost,
button.btn--ghost {
  background-color: transparent;
  color: var(--ink);
  border-color: var(--blush-deep);
}

/* -- Gutenberg block buttons (.wp-block-button__link) ----------
   Astra targets `.wp-block-button .wp-block-button__link` with
   specificity (0,2,0) and sets blue bg + 4px radius.
   Our selectors below all have specificity (0,3,0).             */
.wp-block-button.is-style-pill-primary .wp-block-button__link,
.wp-block-button.is-style-pill-primary .wp-block-button__link:hover,
.wp-block-button.is-style-pill-primary .wp-block-button__link:focus {
  background-color: var(--coral);
  border-color: var(--coral);
  color: #fff;
  border-radius: var(--r-pill);
  padding: 0.78em 1.5em;
  font-family: var(--font-display);
  font-weight: 500;
  box-shadow: var(--shadow-coral);
}

.wp-block-button.is-style-pill-ghost .wp-block-button__link,
.wp-block-button.is-style-pill-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-pill-ghost .wp-block-button__link:focus {
  background-color: transparent;
  border: 2px solid var(--blush-deep);
  color: var(--ink);
  border-radius: var(--r-pill);
  padding: 0.78em 1.5em;
  font-family: var(--font-display);
  font-weight: 500;
  box-shadow: none;
}
.wp-block-button.is-style-pill-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-pill-ghost .wp-block-button__link:focus {
  border-color: var(--coral);
  color: var(--coral-deep);
  background-color: var(--white);
}

/* -- Headings --------------------------------------------------
   Astra sets h1-h6 colour to its global dark colour. Keep ours. */
h1, h2, h3, h4, h5, h6,
.entry-content h1, .entry-content h2,
.entry-content h3, .entry-content h4 {
  color: var(--ink);
  font-family: var(--font-display);
}

/* ============================================================
   SINGLE POST / PAGE LAYOUT
   ============================================================ */

.page-entry-content,
.post-entry-content {
  margin: 2em auto;
  max-width: 1200px;
  padding-inline: var(--gutter);
}

@media (max-width: 768px) {
  .page-entry-content,
  .post-entry-content {
    margin: 1em auto;
  }
}

/* Title banner above the content */
.post-header {
  background: var(--bg-alt);
  padding-block: clamp(2.5rem, 1rem + 4vw, 4.5rem);
  border-bottom: 1px solid var(--line);
}
.post-header__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  /* Readable column width for the header text */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  max-width: 760px;
}
.post-header__title {
  font-size: clamp(1.9rem, 1.2rem + 2.5vw, 3rem);
  line-height: var(--lh-tight);
  text-wrap: pretty;
  margin: 0;
}
.post-header__meta {
  color: var(--text-muted);
  font-size: var(--fs-small);
  margin: 0;
}

/* Featured image */
.post-thumbnail {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--space-7);
}
.post-thumbnail__img {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  display: block;
}

/* Centered reading column — default blocks live here */
.entry-content {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* Vertical rhythm between blocks */
.entry-content > * + * {
  margin-top: var(--space-5);
}
.entry-content p {
  line-height: 1.75;
  color: var(--text);
}
.entry-content a {
  color: var(--coral-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.entry-content a:hover {
  color: var(--coral);
}
.entry-content ul,
.entry-content ol {
  padding-left: 1.5em;
  line-height: 1.75;
}
.entry-content blockquote {
  border-left: 4px solid var(--coral);
  padding-left: var(--space-5);
  margin-inline: 0;
  color: var(--text-muted);
  font-style: italic;
}
.entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-md);
}
.entry-content hr {
  border: none;
  border-top: 2px solid var(--line);
  margin-block: var(--space-7);
}
/* Figures & captions */
.entry-content figure {
  margin-inline: 0;
}
.entry-content figcaption {
  font-size: var(--fs-small);
  color: var(--text-muted);
  text-align: center;
  margin-top: var(--space-2);
}

/* Gutenberg alignment overrides
   alignwide  — stretches to the container (~1200 px)
   alignfull  — edge-to-edge                          */
.entry-content .alignwide {
  max-width: min(var(--container), 100vw);
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-inline: var(--gutter);
}
.entry-content .alignfull {
  max-width: 100vw;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}
.entry-content .alignleft {
  float: left;
  margin-right: var(--space-5);
  margin-bottom: var(--space-3);
}
.entry-content .alignright {
  float: right;
  margin-left: var(--space-5);
  margin-bottom: var(--space-3);
}
.entry-content .aligncenter {
  margin-inline: auto;
}

@media (max-width: 640px) {
  .entry-content .alignleft,
  .entry-content .alignright {
    float: none;
    margin-inline: 0;
  }
}

.page-entry-content, .post-entry-content {
  margin: 2em auto;
  max-width: 1200px;

}

/* ============================================================
   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.
   ============================================================ */

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

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

/* --mg-main-col / --mg-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. */
.mg-layout--right {
  grid-template-columns: minmax(0, var(--mg-main-col, 70fr)) minmax(0, var(--mg-side-col, 30fr));
}
.mg-layout--left {
  grid-template-columns: minmax(0, var(--mg-side-col, 30fr)) minmax(0, var(--mg-main-col, 70fr));
}

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

/* mamaglueck's article children centre themselves on their own max-widths —
   inside a sidebar column they must fill the track instead. */
.mg-article-body .post-entry-content,
.mg-article-body .page-entry-content,
.mg-article-body .post-thumbnail {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

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

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

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

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

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

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

/* ---- 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. */
.mg-sidebar .search-form,
.mg-sidebar .wp-block-search__inside-wrapper {
  display: flex;
  gap: var(--space-2);
  position: relative;
}
.mg-sidebar .search-field,
.mg-sidebar .wp-block-search__input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  padding: 0.7rem 0.9rem;
  font: inherit;
  font-size: var(--fs-small);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--text);
}
.mg-sidebar .search-field:focus-visible,
.mg-sidebar .wp-block-search__input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--blush);
  border-color: var(--coral);
}
.mg-sidebar .widget_search .search-form button,
.mg-sidebar .widget_search .search-form input[type="submit"],
.mg-sidebar .widget_search .search-form input[type="submit"]:hover,
.mg-sidebar .widget_search .search-form input[type="submit"]:focus,
.mg-sidebar .search-submit,
.mg-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(--r-pill);
  background: var(--coral);
  color: var(--white);
  cursor: pointer;
}
.mg-sidebar .widget_search .search-form .search-field { padding-right: 0.9rem; }

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

/* ---- Recent / Latest Posts ---- */
.mg-sidebar .wp-block-latest-posts__list,
.mg-sidebar .widget_recent_entries ul { display: grid; gap: var(--space-4); }
.mg-sidebar .wp-block-latest-posts__featured-image img {
  border-radius: var(--r-sm);
  width: 100%;
}
.mg-sidebar .wp-block-latest-posts__post-title,
.mg-sidebar .widget_recent_entries a {
  display: block;
  font-weight: 600;
  color: var(--text);
  line-height: var(--lh-snug);
}
.mg-sidebar .wp-block-latest-posts__post-date,
.mg-sidebar__meta {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-label);
  color: var(--text-muted);
}
.mg-sidebar .wp-block-latest-posts__post-excerpt {
  margin: 0.25rem 0 0;
  font-size: var(--fs-small);
  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. ---- */
.mg-sidebar .wp-block-tag-cloud a,
.mg-sidebar .tagcloud a {
  font-size: var(--fs-label) !important;
  display: inline-block;
  margin: 0 4px 6px 0;
  padding: 0.35em 0.8em;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg-alt);
  color: var(--text);
  line-height: 1.5;
}
.mg-sidebar .wp-block-tag-cloud a:hover,
.mg-sidebar .tagcloud a:hover {
  background: var(--blush);
  border-color: var(--coral);
  color: var(--coral-deep);
}

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

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

/* Promoted from inline style attributes on index.php. */
.mg-archive { padding-block: var(--section-y); }
.mg-archive__card { padding: var(--space-6); margin-bottom: var(--space-5); }