/* ==========================================================================
   Ubuntu Auditors — supplemental styles
   Components not covered by the base Tailwind build (ua.css).
   All colours reference the existing design tokens defined in ua.css
   (--primary, --secondary, --accent ... as HSL triplets).
   ========================================================================== */

:root { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* keep anchored sections clear of the fixed top-bar + nav */
[id] { scroll-margin-top: 8rem; }

/* --- Top utility bar (brief section 6.6) --------------------------------- */
.top-bar { background: hsl(var(--primary)); color: hsl(0 0% 100% / .82); font-size: .76rem; line-height: 1; }
.top-bar .container { min-height: 38px; padding-top: .5rem; padding-bottom: .5rem; }
.top-bar .tb-item { display: inline-flex; align-items: center; gap: .4rem; color: hsl(0 0% 100% / .82); white-space: nowrap; }
.top-bar a.tb-item { transition: color .15s; }
.top-bar a.tb-item:hover { color: hsl(var(--secondary)); }
@media (max-width: 1024px) { .top-bar .tb-hide-md { display: none; } }
@media (max-width: 640px)  { .top-bar .tb-hide-sm { display: none; } }

/* --- Accessibility: skip link + visible focus (A.6.6) --------------------- */
.skip-link {
  position: absolute; left: 1rem; top: -3rem; z-index: 200;
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
  padding: .65rem 1.1rem; border-radius: .5rem; font-weight: 600;
  transition: top .18s ease;
}
.skip-link:focus { top: 1rem; }
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible,
summary:focus-visible {
  outline: 3px solid hsl(var(--secondary));
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- Navigation: dropdowns + active state + mobile panel ------------------ */
.nav-item { position: relative; }
.nav-link.is-active { color: hsl(var(--primary)); }
.nav-link.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: hsl(var(--secondary)); border-radius: 2px;
}
.nav-dropdown {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(6px);
  min-width: 260px; background: hsl(var(--card)); color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border)); border-radius: var(--radius);
  box-shadow: 0 16px 48px -12px hsl(var(--primary) / .28);
  padding: .5rem; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease; z-index: 60;
}
/* Invisible bridge across the gap so the menu stays open as the cursor moves
   from the nav link down into the dropdown (fixes menus closing too early). */
.nav-dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 18px; }
.nav-item:hover > .nav-dropdown,
.nav-item:focus-within > .nav-dropdown,
.nav-dropdown[data-open="true"] {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.nav-dropdown a {
  display: block; padding: .6rem .75rem; border-radius: .5rem; font-size: .9rem;
  color: hsl(var(--foreground)); transition: background .15s, color .15s;
}
.nav-dropdown a:hover, .nav-dropdown a:focus-visible {
  background: hsl(var(--muted)); color: hsl(var(--primary));
}
.nav-dropdown a span { display: block; font-size: .75rem; color: hsl(var(--muted-foreground)); margin-top: 2px; }
.nav-caret { transition: transform .2s ease; }
.nav-item:hover .nav-caret, .nav-item:focus-within .nav-caret { transform: rotate(180deg); }

/* Mobile menu */
.mobile-menu { display: none; }
.mobile-menu.is-open { display: block; }
.mobile-menu a, .mobile-menu .mm-group > button {
  display: block; width: 100%; text-align: left; padding: .8rem 0;
  border-bottom: 1px solid hsl(var(--border)); color: hsl(var(--foreground)); font-weight: 500;
}
.mobile-menu .mm-sub a { padding-left: 1rem; font-size: .9rem; color: hsl(var(--muted-foreground)); border-bottom: none; }

/* --- Orange accent surfaces (logo orange; near-black text passes 4.5:1 across
   the whole gradient). No gold anywhere, per the 15 June master brief. --- */
.btn-grad, .num-disc {
  background-image: linear-gradient(135deg, hsl(14 60% 59%) 0%, hsl(12 52% 50%) 100%);
  color: hsl(var(--primary-foreground));
  font-weight: 600;
}
.btn-grad:hover { opacity: .92; }

/* --- Breadcrumbs (A.5.4 BreadcrumbList) ----------------------------------- */
.breadcrumbs { font-size: .8rem; color: hsl(var(--muted-foreground)); }
.breadcrumbs a { color: hsl(var(--muted-foreground)); }
.breadcrumbs a:hover { color: hsl(var(--secondary)); }
.breadcrumbs .sep { margin: 0 .5rem; opacity: .6; }

/* --- Floating WhatsApp button (A.5.10) ------------------------------------ */
.wa-float {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 90;
  width: 58px; height: 58px; border-radius: 9999px; background: #25D366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px -6px rgba(37,211,102,.55); color: #fff;
  transition: transform .18s ease, box-shadow .18s ease;
}
.wa-float:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 14px 36px -6px rgba(37,211,102,.65); }
.wa-float svg { width: 30px; height: 30px; }
@media (max-width: 640px){ .wa-float{ width: 54px; height: 54px; bottom: 1rem; right: 1rem; } }

/* --- Floating Request a Proposal button (brief section 2) ----------------- */
.proposal-float {
  position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: 90;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.05rem; border-radius: 9999px; font-size: .85rem; font-weight: 600;
  background-image: linear-gradient(135deg, hsl(14 60% 59%), hsl(12 52% 50%)); color: hsl(var(--primary-foreground));
  box-shadow: 0 10px 30px -8px hsl(14 60% 45% / .5);
  transition: transform .18s ease, box-shadow .18s ease;
}
.proposal-float:hover { transform: translateY(-3px); box-shadow: 0 14px 36px -8px hsl(14 60% 45% / .6); }
.proposal-float:active { transform: translateY(0) scale(.97); }
@media (max-width: 640px) { .proposal-float span { display: none; } .proposal-float { padding: .85rem; } }

/* --- Cookie consent banner (Namibia Data Protection Act 2023) ------------- */
.cookie-banner {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 120;
  max-width: 640px; margin: 0 auto;
  background: hsl(var(--card)); color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border)); border-radius: var(--radius);
  box-shadow: 0 20px 60px -15px hsl(var(--primary) / .45);
  padding: 1.25rem 1.35rem; transform: translateY(140%); transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.cookie-banner.is-visible { transform: translateY(0); }
.cookie-banner h2 { font-size: 1rem; font-weight: 700; margin-bottom: .35rem; color: hsl(var(--foreground)); }
.cookie-banner p { font-size: .82rem; color: hsl(var(--muted-foreground)); line-height: 1.55; margin-bottom: .9rem; }
.cookie-banner p a { color: hsl(var(--primary)); text-decoration: underline; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.cookie-actions button { font-size: .82rem; font-weight: 600; padding: .55rem 1rem; border-radius: .55rem; cursor: pointer; transition: opacity .15s, background .15s; }
.ck-accept { background-image: linear-gradient(to right, hsl(var(--secondary)), hsl(var(--accent))); color: hsl(var(--secondary-foreground)); }
.ck-accept:hover { opacity: .9; }
.ck-reject { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.ck-manage { background: transparent; color: hsl(var(--muted-foreground)); text-decoration: underline; }
.cookie-prefs { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid hsl(var(--border)); display: none; }
.cookie-prefs.is-open { display: block; }
.cookie-prefs label { display: flex; gap: .6rem; align-items: flex-start; font-size: .8rem; color: hsl(var(--foreground)); margin-bottom: .6rem; }
.cookie-prefs input { margin-top: 3px; }

/* --- Forms: status + validation ------------------------------------------ */
.form-status { font-size: .85rem; padding: .75rem 1rem; border-radius: .55rem; margin-top: .85rem; display: none; }
.form-status.is-shown { display: block; }
.form-status.ok  { background: hsl(140 60% 95%); color: hsl(150 70% 22%); border: 1px solid hsl(145 50% 80%); }
.form-status.err { background: hsl(0 80% 96%); color: hsl(0 70% 40%); border: 1px solid hsl(0 70% 85%); }
.field-error { border-color: hsl(var(--destructive)) !important; }

/* --- Trust strip / logos (A.2.2, A.6.10) ---------------------------------- */
.trust-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1.1rem; border: 1px solid hsl(var(--border)); border-radius: 9999px;
  background: hsl(var(--card)); font-weight: 600; font-size: .85rem; color: hsl(var(--primary));
}
.body-badge { /* professional body badge chip */
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
  padding: 1.1rem .75rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius);
  background: hsl(var(--card)); text-align: center; transition: border-color .2s, box-shadow .2s;
}
.body-badge:hover { border-color: hsl(var(--secondary)); box-shadow: 0 8px 24px -10px hsl(var(--primary) / .25); }
.body-badge .bb-mark { width: 46px; height: 46px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-weight: 800; color: hsl(var(--primary-foreground)); background-image: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-glow))); font-size: .8rem; letter-spacing: .02em; }
.body-badge .bb-name { font-size: .72rem; font-weight: 600; color: hsl(var(--foreground)); line-height: 1.25; }

/* --- Article prose (Insights detail pages, A.2.7) ------------------------- */
.prose { color: hsl(var(--foreground)); font-size: 1.05rem; line-height: 1.75; }
.prose > p { margin: 0 0 1.25rem; color: hsl(var(--muted-foreground)); }
.prose > p:first-child { font-size: 1.15rem; color: hsl(var(--foreground)); }
.prose h2 { font-size: 1.6rem; font-weight: 700; color: hsl(var(--foreground)); margin: 2.25rem 0 1rem; }
.prose h3 { font-size: 1.2rem; font-weight: 700; color: hsl(var(--foreground)); margin: 1.75rem 0 .75rem; }
.prose ul { margin: 0 0 1.5rem; padding-left: 0; list-style: none; }
.prose ul li { position: relative; padding-left: 1.75rem; margin-bottom: .65rem; color: hsl(var(--muted-foreground)); }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 9999px; background-image: linear-gradient(135deg, hsl(var(--secondary)), hsl(var(--accent))); }
.prose blockquote { border-left: 4px solid hsl(var(--secondary)); padding: .5rem 0 .5rem 1.5rem; margin: 1.75rem 0; font-style: italic; color: hsl(var(--foreground)); font-size: 1.15rem; }
.prose strong { color: hsl(var(--foreground)); font-weight: 700; }

/* --- Google Map embed responsive (A.2.8) ---------------------------------- */
.map-embed { position: relative; width: 100%; border-radius: var(--radius); overflow: hidden; border: 1px solid hsl(var(--border)); }
.map-embed iframe { display: block; width: 100%; height: 380px; border: 0; }

/* --- Premium surface depth: navy-tinted shadows + press feedback ---------- */
.bg-card {
  box-shadow: 0 1px 2px hsl(var(--primary) / .05), 0 12px 30px -24px hsl(var(--primary) / .35);
  transition: box-shadow .3s cubic-bezier(.22,1,.36,1), border-color .3s, transform .3s cubic-bezier(.22,1,.36,1);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .bg-card:hover { box-shadow: 0 1px 2px hsl(var(--primary) / .06), 0 26px 56px -28px hsl(var(--primary) / .45); }
}
/* tactile press feedback on the primary gradient buttons + WhatsApp FAB */
.btn-grad { transition: opacity .2s ease, transform .12s ease, box-shadow .2s ease; }
.btn-grad:active { transform: translateY(1px) scale(.985); }
.wa-float:active { transform: translateY(0) scale(.96); }

/* --- Hero: dynamic viewport height + scroll cue --------------------------- */
.scroll-cue {
  position: absolute; left: 50%; bottom: 1.75rem; transform: translateX(-50%);
  display: inline-flex; flex-direction: column; align-items: center; gap: .4rem;
  color: hsl(0 0% 100% / .7); font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  z-index: 3;
}
.scroll-cue .mouse { width: 24px; height: 38px; border: 2px solid hsl(0 0% 100% / .5); border-radius: 14px; position: relative; }
.scroll-cue .mouse::before {
  content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; border-radius: 2px;
  background: hsl(var(--secondary)); transform: translateX(-50%);
}
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue .mouse::before { animation: cue-bob 1.6s var(--ease-out-quint, cubic-bezier(.22,1,.36,1)) infinite; }
}
@keyframes cue-bob { 0%,100% { transform: translate(-50%, 0); opacity: 1; } 50% { transform: translate(-50%, 9px); opacity: .35; } }

/* --- Footprint: global-connections panel (A.2.3) ------------------------- */
.footprint {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background:
    radial-gradient(60% 80% at 50% 0%, hsl(0 0% 100% / .06), transparent 70%),
    radial-gradient(circle at center, hsl(0 0% 100% / .10) 1px, transparent 1.4px);
  background-size: auto, 26px 26px;
  border: 1px solid hsl(0 0% 100% / .10);
}
.footprint svg { display: block; width: 100%; height: auto; }
.fp-arc { fill: none; stroke: hsl(var(--secondary) / .65); stroke-width: 1.6; stroke-linecap: round; }
@media (prefers-reduced-motion: no-preference) {
  .fp-arc { stroke-dasharray: 5 7; animation: fp-flow 2.4s linear infinite; }
}
@keyframes fp-flow { to { stroke-dashoffset: -120; } }
.fp-pin { fill: hsl(var(--secondary)); }
.fp-hub { fill: #fff; }
.fp-ring { fill: none; stroke: hsl(var(--secondary) / .55); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .fp-ring { animation: fp-pulse 2.8s ease-out infinite; }
  .fp-ring.d2 { animation-delay: .9s; }
  .fp-ring.d3 { animation-delay: 1.8s; }
}
@keyframes fp-pulse { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }
.fp-label { fill: #fff; font-weight: 700; font-size: 15px; }
.fp-label.sub { fill: hsl(0 0% 100% / .6); font-weight: 600; font-size: 11px; }

/* utility used by JS-toggled elements */
[hidden] { display: none !important; }

/* --- Hero layout (authoritative, not reliant on utility-class resolution) ----
   Column flex + justify-center MEANS: when the content fits it is vertically
   centred; when it is taller than the viewport the section GROWS (flex-col with
   min-height) so the content top-aligns below the fixed header instead of sliding
   up under it. padding-top reserves the fixed header height (~119px). ---------- */
.ua-hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 8rem;            /* 128px > header (119px) */
}
@media (min-width: 768px) { .ua-hero { padding-top: 9rem; } }

/* --- Auto-rotating image carousel (home "Rooted in Ubuntu") --------------- */
.ua-rotator { position: relative; aspect-ratio: 3 / 2; }
.ua-rotator-track { position: absolute; inset: 0; }
.ua-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .9s ease; }
.ua-slide.is-active { opacity: 1; }
.ua-slide > picture, .ua-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ua-rotator-dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 2; display: flex; gap: 8px; justify-content: center; }
.ua-rotator-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 9999px; background: hsl(0 0% 100% / .55); box-shadow: 0 1px 4px hsl(0 0% 0% / .45); cursor: pointer; transition: width .3s ease, background .3s ease; }
.ua-rotator-dots button[aria-selected="true"] { width: 26px; background: #fff; }
.ua-rotator-dots button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .ua-slide { transition: none; } }