/* tibu-afrika theme.css */

/*
 * Everything the Tibu Afrika brand needs that theme.json cannot express.
 *
 * Loaded on the front end (wp_enqueue_scripts) and registered as an editor
 * style (add_editor_style), so the Site Editor canvas shows what visitors see.
 * Colours, families and spacing come only from theme.json presets
 * (var(--wp--preset--*)); tints use color-mix() over a preset. No hex values,
 * no Tailwind utilities and no reset of any kind live in this file.
 */

/* ---- Base (ported from src/styles/global.css) ---- */

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---- Stepped presets and gutters ---- */

/*
 * theme.json cannot express breakpoints, so the two stepped font-size presets
 * and the root gutter step here, reproducing the Astro responsive classes:
 * section-title 30px, 36px from 640px, 48px from 768px; display 36px, 48px
 * from 640px, 60px from 1024px; .container-x gutters 16px, 24px from 640px,
 * 32px from 1024px.
 *
 * Global styles print preset variables on :root (0,1,0) and the root padding
 * variables on body (0,0,1). :root:root (0,2,0) and body:is(body) (0,0,2) win
 * whichever stylesheet loads last, on the front end and in the unscoped editor
 * iframe alike, without a compound html/body root selector.
 */

@media (min-width: 640px) {
  :root:root {
    --wp--preset--font-size--section-title: var(--wp--preset--font-size--xx-large);
    --wp--preset--font-size--display: 48px;
  }

  body:is(body) {
    --wp--style--root--padding-right: var(--wp--preset--spacing--6);
    --wp--style--root--padding-left: var(--wp--preset--spacing--6);
  }
}

@media (min-width: 768px) {
  :root:root {
    --wp--preset--font-size--section-title: 48px;
  }
}

@media (min-width: 1024px) {
  :root:root {
    --wp--preset--font-size--display: 60px;
  }

  body:is(body) {
    --wp--style--root--padding-right: var(--wp--preset--spacing--8);
    --wp--style--root--padding-left: var(--wp--preset--spacing--8);
  }
}

/* ---- Skip link ---- */

/*
 * Core 7.0 prints the only skip link (Don't Hand-Roll: skip link); this gives
 * it the Astro .skip-link look on focus. The doubled class outranks core's
 * .skip-link.screen-reader-text:focus, and position needs !important because
 * core pins it absolute with !important.
 */
.skip-link.skip-link.screen-reader-text:focus {
  position: fixed !important;
  top: var(--wp--preset--spacing--4);
  left: var(--wp--preset--spacing--4);
  z-index: 100000;
  width: auto;
  height: auto;
  /* Core's hidden state carries margin: -1px, which would shift the box off the 16px mark. */
  margin: 0;
  padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
  border-radius: var(--wp--preset--border-radius--sm);
  background-color: var(--wp--preset--color--surface-0);
  box-shadow: var(--wp--preset--shadow--card);
  color: var(--wp--preset--color--brand-maroon);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--base);
  font-weight: 400;
  line-height: 1.5;
  white-space: nowrap;
}

/* ---- Focus ring ---- */

/*
 * Deliberate deviation from Astro's brand-blue ring (2.79:1 on white): the
 * same 2px ring at 2px offset, in brand-blue-dark on light surfaces and white
 * on the maroon footer (06-UI-SPEC Focus indicator; Phase 9 parity note).
 */
:focus-visible {
  outline: 2px solid var(--wp--preset--color--brand-blue-dark);
  outline-offset: 2px;
}

.tibu-footer :focus-visible {
  outline-color: var(--wp--preset--color--surface-0);
}

/* ---- Buttons ---- */

/* The default button is .btn-primary (theme.json styles.elements.button). */
.wp-element-button,
.wp-block-button__link {
  transition: color 150ms, background-color 150ms, border-color 150ms;
}

/* Outline = .btn-secondary; the 2px border sits outside the primary padding, as in Astro. */
.wp-block-button.is-style-outline > .wp-block-button__link {
  padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--6);
  border: 2px solid var(--wp--preset--color--brand-maroon);
  background-color: var(--wp--preset--color--surface-0);
  color: var(--wp--preset--color--brand-maroon);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--brand-maroon);
  color: var(--wp--preset--color--surface-0);
}

/* On dark = .btn-ghost-light, for buttons on maroon or gradient bands. */
.wp-block-button.is-style-on-dark > .wp-block-button__link {
  padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--6);
  border: 2px solid var(--wp--preset--color--surface-0);
  background-color: transparent;
  color: var(--wp--preset--color--surface-0);
}

.wp-block-button.is-style-on-dark > .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--surface-0);
  color: var(--wp--preset--color--brand-maroon);
}

/* ---- Text block styles ---- */

/* Section title = .section-title: the stepped section-title preset, 800, maroon. */
.is-style-section-title {
  color: var(--wp--preset--color--brand-maroon);
  font-size: var(--wp--preset--font-size--section-title);
  font-weight: 800;
  line-height: 1.1;
}

/* Eyebrow: the small uppercase Poppins line above a section title. */
.is-style-eyebrow {
  color: var(--wp--preset--color--brand-blue);
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---- Singular ---- */

/* A long title wraps inside the h1; nothing truncates it. */
.tibu-main--singular .wp-block-post-title {
  overflow-wrap: break-word;
}

/* ---- Document frame ---- */

/*
 * Header to main is 0 and main to footer is 64px (Astro's mt-16 on the
 * footer). The root block gap must not add space anywhere else in the frame.
 */
.wp-site-blocks > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

.wp-site-blocks > footer.wp-block-template-part {
  margin-block-start: var(--wp--preset--spacing--16);
}

/* ---- Page frame ---- */

/*
 * Page routes (templates/page-*.html) hand the whole width to the Page's own
 * sections (07-UI-SPEC Page Frame). The main adds no padding, and
 * core/post-content neither caps nor pads its children, so each full-width
 * section spans the viewport and sits flush against the next: the gap between
 * top-level sections is 0 because every section carries its own padding. The
 * root gutters (16px, 24px from 640px, 32px from 1024px) stay on each
 * section through root padding-aware alignment, and a section's own content
 * is capped at the wide size. Each selector outranks the core layout rule it
 * replaces (0,2,0 or more against 0,1,0 and 0,2,0), so no !important is used.
 */
.tibu-main.tibu-main--page {
  padding: 0;
}

.tibu-main--page > .wp-block-post-content {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

.tibu-main--page > .wp-block-post-content > .tibu-section {
  max-width: none;
  margin-block: 0;
  margin-inline: 0;
}

.tibu-section.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: var(--wp--style--global--wide-size);
}

/* ---- Sections ---- */

/*
 * The section rhythm (07-UI-SPEC Section rhythm): a standard section pads
 * 64px, then 96px from 768px (Astro py-16, py-24 at its md step); a page
 * hero pads 80px, then 112px from 768px (py-20, then py-28). Text wraps
 * everywhere and nothing clamps.
 */
.tibu-section {
  padding-block: var(--wp--preset--spacing--16);
}

.tibu-section--gradient-hero {
  padding-block: var(--wp--preset--spacing--20);
}

.tibu-section :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd) {
  overflow-wrap: break-word;
}

/*
 * Inner-page hero h1: 36px, then 60px from 768px, 800, 1.1 (UI-SPEC
 * Typography, the component-scoped rule for Astro text-4xl, then text-6xl
 * at its md step). The 60px step is a literal inside this rule, never a
 * preset variable (D-13). The lead is 18px in white at 90%, capped at 42rem
 * (Astro mt-4 max-w-2xl).
 */
.tibu-section--gradient-hero h1 {
  max-width: 48rem;
  margin-block: 0;
  font-size: var(--wp--preset--font-size--xx-large);
  font-weight: 800;
  line-height: 1.1;
}

.tibu-section--gradient-hero .has-lead-font-size {
  max-width: 42rem;
  margin-block: var(--wp--preset--spacing--4) 0;
  color: color-mix(in srgb, var(--wp--preset--color--surface-0) 90%, transparent);
  line-height: 1.556;
}

@media (min-width: 768px) {
  .tibu-section {
    padding-block: var(--wp--preset--spacing--24);
  }

  .tibu-section--gradient-hero {
    padding-block: var(--wp--preset--spacing--28);
  }

  .tibu-section--gradient-hero h1 {
    font-size: 60px;
  }
}

/* ---- Section buttons ---- */

/*
 * The Astro trailing arrow (lucide ArrowRight, 16px, 8px after the label) on
 * default and outline buttons inside a section: an empty ::after painted
 * currentColor through the theme's arrow mask, so it follows the button's
 * text colour on hover and is part of neither the accessible name nor the
 * label an Editor edits. On-dark buttons carry no arrow, as in Astro.
 */
.tibu-section .wp-block-button:not(.is-style-on-dark) > .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--2);
}

.tibu-section .wp-block-button:not(.is-style-on-dark) > .wp-block-button__link::after {
  content: "";
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-image: url(../icons/arrow-right.svg);
  mask-image: url(../icons/arrow-right.svg);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* ---- Brand block ---- */

.tibu-brand,
.tibu-brand__link {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--3);
}

.tibu-brand__link {
  color: inherit;
  text-decoration: none;
}

.tibu-brand__logo {
  display: block;
  flex: none;
  border-radius: 50%;
}

.tibu-brand__wordmark,
.tibu-brand__name {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.tibu-brand__wordmark {
  color: var(--wp--preset--color--brand-maroon);
  font-size: 18px;
  line-height: 28px;
}

.tibu-brand__name {
  font-size: 20px;
  line-height: 28px;
}

.tibu-brand--footer .tibu-brand__logo {
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  padding: var(--wp--preset--spacing--1);
  background-color: color-mix(in srgb, var(--wp--preset--color--surface-0) 10%, transparent);
}

@media (min-width: 768px) {
  .tibu-brand__wordmark {
    font-size: 20px;
  }
}

/* ---- Header bar ---- */

/*
 * Sticky sits on the header template-part wrapper itself (research A4): on
 * an inner group it would be confined to the wrapper's own box and never
 * stick. Below a showing admin bar it uses core's own offset, which is 0 at
 * 600px and below where the admin bar scrolls away (Pitfall 9).
 */
.wp-site-blocks > header.wp-block-template-part {
  --tibu-admin-bar-offset: var(--wp-admin--admin-bar--height, 0px);
  position: sticky;
  top: var(--tibu-admin-bar-offset);
  z-index: 40;
  background-color: color-mix(in srgb, var(--wp--preset--color--surface-0) 95%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: var(--wp--preset--shadow--subtle);
}

@media (max-width: 600px) {
  .wp-site-blocks > header.wp-block-template-part {
    --tibu-admin-bar-offset: 0px;
  }
}

.tibu-header__bar {
  min-height: 64px;
}

/* A long wordmark wraps inside the brand link; the navigation never shrinks. */
.tibu-header__bar > .tibu-brand {
  min-width: 0;
}

.tibu-header__bar > nav.tibu-nav-header {
  flex: none;
}

@media (min-width: 768px) {
  .tibu-header__bar {
    min-height: 80px;
  }
}

/* ---- Header navigation ---- */

/*
 * Links: Inter 500 16/24 in ink, maroon on hover and when aria-current is set
 * (exact page or a page under a non-home item, includes/navigation.php).
 */
nav.tibu-nav-header .wp-block-navigation-item__content.wp-block-navigation-item__content {
  color: var(--wp--preset--color--ink-900);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--base);
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  transition: color 150ms;
}

nav.tibu-nav-header .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
nav.tibu-nav-header .wp-block-navigation-item__content.wp-block-navigation-item__content[aria-current] {
  color: var(--wp--preset--color--brand-maroon);
}

/* The disclosure toggle exists only below 768px. */
.tibu-nav-toggle {
  display: none;
}

@media (min-width: 768px) {
  nav.tibu-nav-header > .wp-block-navigation__container.wp-block-navigation__container {
    flex-wrap: nowrap;
    gap: var(--wp--preset--spacing--8);
  }

  nav.tibu-nav-header > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
    white-space: nowrap;
  }

  /* Chevron: a 12px glyph 8px from the label inside a 24px hit area. */
  nav.tibu-nav-header .has-child > .wp-block-navigation-submenu__toggle.wp-block-navigation__submenu-icon {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin: 0 0 0 2px;
    padding: 0;
    border: 0;
    background-color: transparent;
    color: var(--wp--preset--color--ink-900);
  }

  nav.tibu-nav-header .has-child > .wp-block-navigation-submenu__toggle > svg {
    width: 12px;
    height: 12px;
    margin: 0;
    transition: transform 150ms;
  }

  /*
   * Panel: directly below its parent and visually 8px lower, with an
   * invisible bridge over that 8px so the pointer never crosses a dead gap.
   */
  nav.tibu-nav-header .has-child > .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
    top: calc(100% + 8px);
    left: 0;
    box-sizing: border-box;
    padding: var(--wp--preset--spacing--2);
    border: 1px solid color-mix(in srgb, var(--wp--preset--color--brand-grey) 40%, transparent);
    border-radius: var(--wp--preset--border-radius--xl);
    background-color: var(--wp--preset--color--surface-0);
    box-shadow: var(--wp--preset--shadow--card);
  }

  nav.tibu-nav-header .has-child > .wp-block-navigation__submenu-container::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    height: 12px;
  }

  nav.tibu-nav-header .has-child:hover > .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container,
  nav.tibu-nav-header .has-child > .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
    width: max-content;
    min-width: 224px;
    max-width: 320px;
  }

  nav.tibu-nav-header .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content.wp-block-navigation-item__content {
    padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
    border-radius: var(--wp--preset--border-radius--lg);
    white-space: normal;
    overflow-wrap: anywhere;
  }

  nav.tibu-nav-header .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
  nav.tibu-nav-header .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible {
    background-color: color-mix(in srgb, var(--wp--preset--color--brand-maroon) 5%, transparent);
    color: var(--wp--preset--color--brand-maroon);
  }

  /* Escape, a click outside or focus leaving closed it: no hover re-reveal until the pointer leaves. */
  nav.tibu-nav-header .has-child[data-tibu-dismissed] > .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
    visibility: hidden;
    opacity: 0;
  }
}

@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  nav.tibu-nav-header .has-child > .wp-block-navigation-submenu__toggle[aria-expanded="true"] > svg {
    transform: none;
  }
}

/*
 * Below 768px the row becomes a disclosure panel under the bar. Every rule
 * is keyed on the server-injected toggle, so the editor canvas (which has no
 * toggle) keeps showing the list.
 */
@media (max-width: 767.98px) {
  /* The panel positions against the sticky header wrapper, not the nav. */
  nav.tibu-nav-header:has(> .tibu-nav-toggle) {
    position: static;
  }

  /* 44x44 hit area around a 24px icon, its edge on the gutter. */
  .tibu-nav-toggle {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0 -10px 0 0;
    padding: 10px;
    border: 0;
    background-color: transparent;
    color: var(--wp--preset--color--brand-maroon);
    cursor: pointer;
  }

  .tibu-nav-toggle__icon {
    display: block;
    width: 24px;
    height: 24px;
  }

  .tibu-nav-toggle[aria-expanded="true"] .tibu-nav-toggle__icon--open,
  .tibu-nav-toggle[aria-expanded="false"] .tibu-nav-toggle__icon--close {
    display: none;
  }

  nav.tibu-nav-header > .tibu-nav-toggle[aria-expanded="false"] ~ .wp-block-navigation__container {
    display: none;
  }

  nav.tibu-nav-header > .tibu-nav-toggle[aria-expanded="true"] ~ .wp-block-navigation__container.wp-block-navigation__container {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 1;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--wp--preset--spacing--3);
    max-height: calc(100vh - 64px - var(--tibu-admin-bar-offset, 0px));
    margin: 0;
    padding: var(--wp--preset--spacing--4) var(--wp--style--root--padding-right) var(--wp--preset--spacing--4) var(--wp--style--root--padding-left);
    overflow-y: auto;
    border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--brand-grey) 40%, transparent);
    background-color: var(--wp--preset--color--surface-0);
  }

  nav.tibu-nav-header > .tibu-nav-toggle ~ .wp-block-navigation__container .wp-block-navigation-item {
    display: block;
  }

  nav.tibu-nav-header > .tibu-nav-toggle ~ .wp-block-navigation__container .wp-block-navigation-item__content.wp-block-navigation-item__content {
    display: block;
    padding: var(--wp--preset--spacing--2) 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* Nested children: always expanded, indented 16px, no nested toggles. */
  nav.tibu-nav-header > .tibu-nav-toggle ~ .wp-block-navigation__container .has-child > .wp-block-navigation-submenu__toggle {
    display: none;
  }

  nav.tibu-nav-header > .tibu-nav-toggle ~ .wp-block-navigation__container .has-child > .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
    position: static;
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--3);
    width: auto;
    min-width: 0;
    height: auto;
    margin: var(--wp--preset--spacing--3) 0 0;
    padding: 0 0 0 var(--wp--preset--spacing--4);
    overflow: visible;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
  }

  nav.tibu-nav-header > .tibu-nav-toggle ~ .wp-block-navigation__container .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content {
    font-weight: 400;
  }
}

/* ---- Footer ---- */

/*
 * The Astro footer ported onto parts/footer.html (06-UI-SPEC Footer). Empty
 * columns never reach the page (includes/footer-omission.php), so the grid
 * only ever lays out real content; a brand column left on its own spans the
 * whole grid. The layout-flow margins WordPress puts between group children
 * are reset here so every gap below is the specified one.
 */
.tibu-footer .tibu-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--wp--preset--spacing--10);
  margin-block: 0;
  padding-block: var(--wp--preset--spacing--12);
}

.tibu-footer .tibu-footer__grid > *,
.tibu-footer .tibu-footer__brand > *,
.tibu-footer .tibu-footer__quick-links > *,
.tibu-footer .tibu-footer__contact > * {
  min-width: 0;
  margin-block: 0;
}

@media (min-width: 768px) {
  .tibu-footer .tibu-footer__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .tibu-footer .tibu-footer__grid > .tibu-footer__brand {
    grid-column: span 2;
  }

  .tibu-footer .tibu-footer__grid > .tibu-footer__brand:only-child {
    grid-column: 1 / -1;
  }
}

/* Brand column: logo and name row, description, tagline. */
.tibu-footer .tibu-footer__brand > .tibu-brand--footer {
  margin-block-end: var(--wp--preset--spacing--4);
}

.tibu-brand--footer .tibu-brand__name {
  min-width: 0;
}

.tibu-footer .tibu-footer__description {
  max-width: 28rem;
  color: color-mix(in srgb, var(--wp--preset--color--surface-0) 90%, transparent);
  font-size: var(--wp--preset--font-size--base);
  line-height: 1.5;
}

.tibu-footer .tibu-footer__brand > .tibu-footer__tagline {
  margin-block-start: var(--wp--preset--spacing--4);
  color: var(--wp--preset--color--brand-blue);
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--base);
  font-weight: 400;
  line-height: 1.5;
}

/* Column headings "Quick links" and "Contact". */
.tibu-footer .tibu-footer__grid .tibu-footer__heading {
  margin-block: 0 var(--wp--preset--spacing--4);
  color: var(--wp--preset--color--surface-0);
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--lead);
  font-weight: 700;
  line-height: 28px;
}

/* Footer links: white 90%, no underline; white with a 4px-offset underline on hover. */
.tibu-footer a:where(:not(.wp-element-button)) {
  color: color-mix(in srgb, var(--wp--preset--color--surface-0) 90%, transparent);
  text-decoration: none;
  text-underline-offset: 4px;
  transition: color 150ms;
}

.tibu-footer a:where(:not(.wp-element-button)):hover {
  color: var(--wp--preset--color--surface-0);
  text-decoration: underline;
}

/* Quick links: a vertical list, rows 8px apart, never a dropdown. */
nav.tibu-nav-footer > .wp-block-navigation__container.wp-block-navigation__container,
nav.tibu-nav-footer .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: var(--wp--preset--spacing--2);
  margin: 0;
  padding: 0;
}

nav.tibu-nav-footer .wp-block-navigation-item {
  display: block;
  max-width: 100%;
}

nav.tibu-nav-footer .wp-block-navigation-item__content.wp-block-navigation-item__content {
  display: inline;
  padding: 0;
  color: color-mix(in srgb, var(--wp--preset--color--surface-0) 90%, transparent);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--base);
  line-height: 1.5;
  text-decoration: none;
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
}

nav.tibu-nav-footer .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--surface-0);
  text-decoration: underline;
}

/* A nested footer item is listed under its parent, indented, always shown. */
nav.tibu-nav-footer .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
  position: static;
  width: auto;
  min-width: 0;
  height: auto;
  margin-block-start: var(--wp--preset--spacing--2);
  padding-inline-start: var(--wp--preset--spacing--4);
  overflow: visible;
  border: 0;
  background-color: transparent;
  box-shadow: none;
  color: inherit;
  opacity: 1;
  visibility: visible;
}

nav.tibu-nav-footer .wp-block-navigation-submenu__toggle {
  display: none;
}

/*
 * Contact column: the plugin's stacked rows (it ships no CSS, Phase 5 D-28).
 * In the footer only, each row's label is read by screen readers but not
 * shown and the WhatsApp row is not displayed, as in the Astro footer.
 */
.tibu-footer__contact .tibu-contact-details .tibu-list {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--2);
  margin: 0;
  padding: 0;
  color: color-mix(in srgb, var(--wp--preset--color--surface-0) 90%, transparent);
  list-style: none;
}

.tibu-footer__contact .tibu-contact-details .tibu-item {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.tibu-footer__contact .tibu-contact-details .tibu-contact-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.tibu-footer__contact [data-tibu-contact="whatsapp"] {
  display: none;
}

/* Social row: 24px icons 16px apart, 16px under the contact rows. */
.tibu-footer .tibu-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tibu-footer .tibu-footer__contact > .tibu-contact-details + .tibu-social-links {
  margin-block-start: var(--wp--preset--spacing--4);
}

.tibu-footer .tibu-social-links__item {
  display: flex;
  margin: 0;
}

.tibu-footer .tibu-social-links__link {
  display: block;
  color: var(--wp--preset--color--surface-0);
  transition: opacity 150ms;
}

.tibu-footer .tibu-social-links__link:hover {
  color: var(--wp--preset--color--surface-0);
  text-decoration: none;
  opacity: 0.8;
}

.tibu-social-links__icon {
  display: block;
  width: 24px;
  height: 24px;
}

/*
 * Bottom bar: a full-width 1px divider, then the copyright at the start and
 * the link row at the end. Stacked 16px apart below 640px, one row from
 * 640px. The link row wraps with 24px gaps.
 */
.tibu-footer .tibu-footer__bottom {
  margin-block: 0;
  border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--surface-0) 10%, transparent);
}

.tibu-footer .tibu-footer__bottom-row {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--4);
  margin-block: 0;
  padding-block: var(--wp--preset--spacing--6);
  color: color-mix(in srgb, var(--wp--preset--color--surface-0) 70%, transparent);
  font-size: var(--wp--preset--font-size--small);
  line-height: 20px;
}

.tibu-footer .tibu-footer__bottom-row > *,
.tibu-footer .tibu-footer__links > * {
  min-width: 0;
  margin-block: 0;
}

.tibu-footer .tibu-copyright {
  overflow-wrap: anywhere;
}

.tibu-footer .tibu-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--6);
}

.tibu-footer .tibu-footer__links a:where(:not(.wp-element-button)) {
  color: inherit;
}

.tibu-footer .tibu-footer__links a:where(:not(.wp-element-button)):hover {
  color: var(--wp--preset--color--surface-0);
}

@media (min-width: 640px) {
  .tibu-footer .tibu-footer__bottom-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ---- Diamond motif ---- */

/*
 * The MotifDiamonds.astro ornament as three Group block styles (06-UI-SPEC
 * Diamond Motif Contract, THEME-04). Each density is a generated SVG used as
 * a CSS mask (assets/motif/, fill keyword black, diamond alpha = its opacity)
 * and painted in the brand-blue preset, so no hex and no <img> ships.
 *
 * A rule needs both the approved-section marker and the style class: a motif
 * class typed onto any other block renders nothing (Pitfall 8). The motif is
 * a pseudo-element with pointer-events: none, so it is outside the
 * accessibility tree and cannot be focused, selected or clicked. It never
 * animates. Positions reproduce Hero.astro: dense and standard top-right,
 * sparse bottom-left, offset past the host's corner. Below 640px they shrink
 * and tuck in (D-10); no rule hides them on narrow screens. WordPress's
 * "Default" style removes the class and with it the motif (D-09).
 */
.tibu-motif-host.is-style-motif-sparse {
  position: relative;
}

.tibu-motif-host.is-style-motif-standard {
  position: relative;
}

.tibu-motif-host.is-style-motif-dense {
  position: relative;
}

.tibu-motif-host.is-style-motif-sparse::after,
.tibu-motif-host.is-style-motif-standard::after,
.tibu-motif-host.is-style-motif-dense::after {
  content: "";
  position: absolute;
  z-index: 1;
  display: block;
  pointer-events: none;
  background-color: var(--wp--preset--color--brand-blue);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Sparse: bottom-left, 72px at -12px, 96px at -24px from 640px, wrapper opacity 0.7. */
.tibu-motif-host.is-style-motif-sparse::after {
  bottom: -12px;
  left: -12px;
  width: 72px;
  height: 72px;
  opacity: 0.7;
  -webkit-mask-image: url(../motif/motif-sparse.svg);
  mask-image: url(../motif/motif-sparse.svg);
}

/* Standard: Astro's "default" density in the dense frame, top-right, 96px at -12px, 128px at -24px from 640px. */
.tibu-motif-host.is-style-motif-standard::after {
  top: -12px;
  right: -12px;
  width: 96px;
  height: 96px;
  opacity: 0.8;
  -webkit-mask-image: url(../motif/motif-standard.svg);
  mask-image: url(../motif/motif-standard.svg);
}

/* Dense: top-right, 96px at -12px, 128px at -24px from 640px, wrapper opacity 0.8. */
.tibu-motif-host.is-style-motif-dense::after {
  top: -12px;
  right: -12px;
  width: 96px;
  height: 96px;
  opacity: 0.8;
  -webkit-mask-image: url(../motif/motif-dense.svg);
  mask-image: url(../motif/motif-dense.svg);
}

@media (min-width: 640px) {
  .tibu-motif-host.is-style-motif-sparse::after {
    bottom: -24px;
    left: -24px;
    width: 96px;
    height: 96px;
  }

  .tibu-motif-host.is-style-motif-standard::after,
  .tibu-motif-host.is-style-motif-dense::after {
    top: -24px;
    right: -24px;
    width: 128px;
    height: 128px;
  }
}

/*
 * Stacking: the motif paints over the host's background and media (Astro
 * lays it over the image corners) and under every text box and control the
 * host holds.
 */
.tibu-motif-host:is(.is-style-motif-sparse, .is-style-motif-standard, .is-style-motif-dense) :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote, figcaption, a, button, input, select, textarea, label, .wp-block-buttons) {
  position: relative;
  z-index: 2;
}

/* Decorative only: a forced solid fill would obscure content. */
@media (forced-colors: active) {
  .tibu-motif-host.is-style-motif-sparse::after,
  .tibu-motif-host.is-style-motif-standard::after,
  .tibu-motif-host.is-style-motif-dense::after {
    display: none;
  }
}