/* ═══════════════════════════════════════════════════════════════════════════════
   HEADER (NAV) – glass bar, padding, alignment with main project
   ═══════════════════════════════════════════════════════════════════════════════ */
nav.glass-nav,
nav[class*="glass-nav"] {
  --nav-height: 56px;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
  /* Glass bar: frosted background matching main project */
  background-color: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
html.dark nav.glass-nav,
html.dark nav[class*="glass-nav"] {
  background-color: rgba(15, 23, 42, 0.92);
}

/* Header logo: smaller to fit reduced nav height */
nav.glass-nav > div > div > a > img[alt="CyberCaution™ Logo"],
nav[class*="glass-nav"] > div > div > a > img[alt="CyberCaution™ Logo"] {
  width: 2.25rem !important;
  height: 2.25rem !important;
  min-width: 2.25rem !important;
  min-height: 2.25rem !important;
}
@media (min-width: 640px) {
  nav.glass-nav > div > div > a > img[alt="CyberCaution™ Logo"],
  nav[class*="glass-nav"] > div > div > a > img[alt="CyberCaution™ Logo"] {
    width: 2.5rem !important;
    height: 2.5rem !important;
    min-width: 2.5rem !important;
    min-height: 2.5rem !important;
  }
}
@media (min-width: 768px) {
  nav.glass-nav > div > div > a > img[alt="CyberCaution™ Logo"],
  nav[class*="glass-nav"] > div > div > a > img[alt="CyberCaution™ Logo"] {
    width: 2.75rem !important;
    height: 2.75rem !important;
    min-width: 2.75rem !important;
    min-height: 2.75rem !important;
  }
}

/* Nav inner container: same horizontal padding as main content and footer */
nav.glass-nav > div,
nav[class*="glass-nav"] > div {
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px) {
  nav.glass-nav > div,
  nav[class*="glass-nav"] > div {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
@media (min-width: 1024px) {
  nav.glass-nav > div,
  nav[class*="glass-nav"] > div {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Nav row: minimal vertical padding, override Tailwind h-14/h-16 for a tighter header */
nav.glass-nav .flex.justify-between.items-center,
nav[class*="glass-nav"] .flex.justify-between.items-center {
  height: auto !important;
  min-height: 2.5rem; /* 40px, matches --nav-height on mobile */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
@media (min-width: 640px) {
  nav.glass-nav .flex.justify-between.items-center,
  nav[class*="glass-nav"] .flex.justify-between.items-center {
    min-height: 2.75rem; /* 44px, matches --nav-height on desktop */
  }
}

/* Keep mobile nav block (icons + hamburger) pinned to the right on small screens */
@media (max-width: 767px) {
  nav.glass-nav .flex.justify-between > div:last-child,
  nav[class*="glass-nav"] .flex.justify-between > div:last-child {
    margin-left: auto;
  }
}

/* Mobile: same size for all action buttons (Threat Radar, Profile, Theme, Hamburger) */
@media (max-width: 767px) {
  nav.glass-nav .flex.justify-between > div.flex.md\:hidden,
  nav[class*="glass-nav"] .flex.justify-between > div.flex.md\:hidden {
    gap: 0.25rem;
  }
  nav.glass-nav .flex.justify-between > div.flex.md\:hidden > a,
  nav.glass-nav .flex.justify-between > div.flex.md\:hidden > span.nav-theme-toggle-wrapper,
  nav.glass-nav .flex.justify-between > div.flex.md\:hidden > button,
  nav[class*="glass-nav"] .flex.justify-between > div.flex.md\:hidden > a,
  nav[class*="glass-nav"] .flex.justify-between > div.flex.md\:hidden > span.nav-theme-toggle-wrapper,
  nav[class*="glass-nav"] .flex.justify-between > div.flex.md\:hidden > button {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  nav.glass-nav .flex.justify-between > div.flex.md\:hidden .nav-theme-toggle-wrapper,
  nav[class*="glass-nav"] .flex.justify-between > div.flex.md\:hidden .nav-theme-toggle-wrapper {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }
  nav.glass-nav .flex.justify-between > div.flex.md\:hidden .nav-theme-toggle-wrapper button,
  nav[class*="glass-nav"] .flex.justify-between > div.flex.md\:hidden .nav-theme-toggle-wrapper button {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }
  nav.glass-nav .flex.justify-between > div.flex.md\:hidden svg,
  nav[class*="glass-nav"] .flex.justify-between > div.flex.md\:hidden svg {
    width: 0.875rem !important;
    height: 0.875rem !important;
  }
}

/* Brand text: exact layout per design – vibrant orange, dark/medium gray, tight vertical stack */
/* Increased nav header size for first two lines; proportion maintained */
nav.glass-nav .brand-text,
nav[class*="glass-nav"] .brand-text {
  font-size: 1.25em;
}
nav.glass-nav .brand-text .brand-name,
nav[class*="glass-nav"] .brand-text .brand-name {
  font-size: 1.1rem;
}
nav.glass-nav .brand-text .brand-tagline,
nav[class*="glass-nav"] .brand-text .brand-tagline {
  font-size: 0.7em; /* smaller so tagline matches first line length */
}
nav.glass-nav .brand-name,
nav[class*="glass-nav"] .brand-name,
footer .brand-name,
.brand-name {
  color: #FF8C00 !important;
  font-weight: 700;
}
/* Ensure brand name (and ™) not clipped by overflow:hidden from base styles */
nav.glass-nav .brand-name,
nav[class*="glass-nav"] .brand-name,
footer .brand-name {
  overflow: visible !important;
  text-overflow: clip;
}
nav.glass-nav .brand-text,
nav[class*="glass-nav"] .brand-text,
footer .brand-text {
  overflow: visible !important;
}

nav.glass-nav .brand-tagline,
nav[class*="glass-nav"] .brand-tagline,
footer .brand-tagline,
.brand-tagline {
  color: #333333 !important;
  font-weight: 400; /* normal, not bold */
  font-size: 0.75rem; /* reduced tagline size */
  max-width: 8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dark .brand-tagline,
html.dark nav.glass-nav .brand-tagline,
html.dark nav[class*="glass-nav"] .brand-tagline,
html.dark footer .brand-tagline {
  color: #E5E7EB !important;
}

nav.glass-nav .brand-attribution,
nav[class*="glass-nav"] .brand-attribution,
footer .brand-attribution,
.brand-attribution {
  color: #666666 !important;
  font-weight: 400;
}
.dark .brand-attribution,
html.dark nav.glass-nav .brand-attribution,
html.dark nav[class*="glass-nav"] .brand-attribution,
html.dark footer .brand-attribution {
  color: #9CA3AF !important;
}

/* Dark theme: header branding text (name stays orange for brand; tagline/attribution light) */
html.dark nav.glass-nav .brand-name,
html.dark nav[class*="glass-nav"] .brand-name {
  color: #FB923C !important; /* orange-400 for contrast on dark nav */
}

/* Nav/footer branding: reduced interline spacing, left-aligned stack */
nav.glass-nav .brand-text,
nav[class*="glass-nav"] .brand-text,
footer .brand-text {
  gap: 0.05rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
nav.glass-nav .brand-text .brand-name,
nav.glass-nav .brand-text .brand-tagline,
nav.glass-nav .brand-text .brand-attribution,
nav[class*="glass-nav"] .brand-text .brand-name,
nav[class*="glass-nav"] .brand-text .brand-tagline,
nav[class*="glass-nav"] .brand-text .brand-attribution,
footer .brand-text .brand-name,
footer .brand-text .brand-tagline,
footer .brand-text .brand-attribution {
  line-height: 1.1;
  margin: 0;
  padding: 0;
}

/* Footer brand text: match header size for visual alignment */
footer .footer-brand-row .brand-text,
footer .footer-branding .brand-text {
  font-size: 1.25em;
}
footer .footer-brand-row .brand-text .brand-name,
footer .footer-branding .brand-text .brand-name {
  font-size: 1.1rem;
}
footer .footer-brand-row .brand-text .brand-tagline,
footer .footer-branding .brand-text .brand-tagline {
  font-size: 0.7em;
  max-width: none;
}
footer .footer-brand-row .brand-text .brand-attribution,
footer .footer-branding .brand-text .brand-attribution {
  font-size: 0.65em;
}

nav.glass-nav > div,
nav[class*="glass-nav"] > div {
  min-width: 0;
  max-width: 100%;
}
nav.glass-nav > div > div,
nav[class*="glass-nav"] > div > div {
  min-width: 0;
}

nav.glass-nav .flex.justify-between,
nav[class*="glass-nav"] .flex.justify-between {
  min-width: 0;
  flex-wrap: nowrap;
}

/* Theme toggle wrapper: same size as user icon button (36×36) */
.nav-theme-toggle-wrapper {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}
.nav-theme-toggle-wrapper button {
  flex-shrink: 0;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  box-sizing: border-box;
  padding: 6px;
}

/* Theme toggle wrapper: no extra gap so icon doesn’t shift */
.nav-theme-toggle-wrapper {
  display: inline-flex;
  align-items: center;
}

/* Theme toggle button: same size as user icon button, sun/moon icons centered */
#themeToggle,
.theme-toggle-mobile,
button[aria-label*="Switch to Dark Mode"],
button[aria-label*="Switch to Light Mode"] {
  position: relative;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  box-sizing: border-box;
}
#themeToggle #sunIcon,
#themeToggle #moonIcon,
#themeToggle .theme-icon-sun,
#themeToggle .theme-icon-moon,
.theme-toggle-mobile .theme-icon-sun,
.theme-toggle-mobile .theme-icon-moon,
button[aria-label*="Switch to Dark Mode"] .theme-icon-sun,
button[aria-label*="Switch to Dark Mode"] .theme-icon-moon,
button[aria-label*="Switch to Light Mode"] .theme-icon-sun,
button[aria-label*="Switch to Light Mode"] .theme-icon-moon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  pointer-events: none;
}

/* Center the menu bar items in the nav (same as React app) */
@media (min-width: 768px) {
  /* Hide mobile-only block (icons + hamburger) on desktop */
  nav.glass-nav .flex.justify-between > div:nth-child(4),
  nav[class*="glass-nav"] .flex.justify-between > div:nth-child(4) {
    display: none !important;
  }
  nav.glass-nav .flex.justify-between,
  nav[class*="glass-nav"] .flex.justify-between {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.5rem 2rem; /* row gap, column gap – spacing between logo, nav, and actions */
  }
  nav.glass-nav .flex.justify-between > div:first-child,
  nav[class*="glass-nav"] .flex.justify-between > div:first-child {
    justify-self: start;
  }
  nav.glass-nav .flex.justify-between > div:nth-child(2),
  nav[class*="glass-nav"] .flex.justify-between > div:nth-child(2) {
    justify-self: center;
    align-self: center;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  /* Right-side block (Threat Radar, Profile, Theme) – extreme right, flush to edge */
  nav.glass-nav .flex.justify-between > div:nth-child(3),
  nav[class*="glass-nav"] .flex.justify-between > div:nth-child(3),
  nav.glass-nav .flex.justify-between > div:last-child,
  nav[class*="glass-nav"] .flex.justify-between > div:last-child {
    justify-self: end;
    display: flex;
    align-items: center;
  }
}

/* Allow nav links container to shrink on medium screens */
nav.glass-nav > div > div > div:nth-child(2) {
  min-width: 0;
  overflow: visible;
}

/* Ensure nav inner flex doesn't overflow */
nav.glass-nav a.nav-link {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Desktop nav links: same height as action icons (30px), reduced padding */
@media (min-width: 768px) {
  nav.glass-nav a.nav-link:not(.mobile-nav-link) {
    height: 30px !important;
    min-height: 30px !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
    padding-left: 0.375rem !important;
    padding-right: 0.375rem !important;
    font-size: 0.75rem;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  nav.glass-nav a.nav-link:not(.mobile-nav-link) svg {
    width: 0.875rem;
    height: 0.875rem;
  }
}

/* Top-right action buttons: Threat Radar (pill) + icon buttons (rounded square) */
.nav-action-threat-radar {
  background-color: rgb(255 237 225);
  color: rgb(255 107 0);
  min-height: 36px;
  flex-shrink: 0;
  white-space: nowrap;
}
.nav-action-threat-radar:hover {
  background-color: rgb(255 227 205);
  color: rgb(255 107 0);
}
html.dark .nav-action-threat-radar {
  background-color: rgb(255 107 0 / 0.18);
  color: rgb(255 158 88);
}
html.dark .nav-action-threat-radar:hover {
  background-color: rgb(255 107 0 / 0.25);
  color: rgb(255 158 88);
}

/* Nav link: reduce gap between icon and text */
nav.glass-nav .nav-link > * + *,
nav[class*="glass-nav"] .nav-link > * + * {
  margin-left: 0.25rem !important;
}

/* Profile and theme icon buttons: light grey rounded square */
.nav-action-icon {
  flex-shrink: 0;
}

/* All header action buttons (Threat Radar, Profile, Theme): compact 30×30 size, reduced padding */
nav.glass-nav .flex.justify-between > div:nth-child(3) .nav-action-icon,
nav[class*="glass-nav"] .flex.justify-between > div:nth-child(3) .nav-action-icon {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}
/* Header action icons (Threat Radar, theme toggle, user): same icon size for all */
nav.glass-nav .flex.justify-between > div:nth-child(3) .nav-action-icon svg,
nav[class*="glass-nav"] .flex.justify-between > div:nth-child(3) .nav-action-icon svg {
  width: 1rem !important;
  height: 1rem !important;
}
html.dark .nav-action-icon {
  background-color: hsl(217.2 32.6% 22%) !important;
  color: hsl(210 40% 98%);
}
html.dark .nav-action-icon:hover {
  background-color: hsl(217.2 32.6% 28%) !important;
}

/* Spacing between right-side actions (Threat Radar, Profile, Theme) – closer, same-size icons */
nav.glass-nav .flex.justify-between > div:nth-child(3),
nav[class*="glass-nav"] .flex.justify-between > div:nth-child(3) {
  gap: 0.25rem;
}
@media (min-width: 768px) {
  nav.glass-nav .flex.justify-between > div:nth-child(3),
  nav[class*="glass-nav"] .flex.justify-between > div:nth-child(3) {
    gap: 0.375rem;
  }
}

/* First action (Threat Radar): icon-only, same 30×30 size as Profile and Theme */
nav.glass-nav .flex.justify-between > div:nth-child(3) > a:first-of-type,
nav[class*="glass-nav"] .flex.justify-between > div:nth-child(3) > a:first-of-type {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
nav.glass-nav .flex.justify-between > div:nth-child(3) > a:first-of-type > span,
nav[class*="glass-nav"] .flex.justify-between > div:nth-child(3) > a:first-of-type > span {
  display: none !important;
}

/* Threat Radar action button: active state (on radar page) – solid primary, same 30×30 shape */
nav.glass-nav .flex.justify-between > div:nth-child(3) > a:first-of-type.nav-link-active,
nav.glass-nav .flex.justify-between > div:nth-child(3) > a:first-of-type.bg-primary,
nav[class*="glass-nav"] .flex.justify-between > div:nth-child(3) > a:first-of-type.nav-link-active,
nav[class*="glass-nav"] .flex.justify-between > div:nth-child(3) > a:first-of-type.bg-primary {
  background-color: rgb(255 107 0) !important;
  color: white !important;
  border-radius: 0.5rem !important;
}
nav.glass-nav .flex.justify-between > div:nth-child(3) > a:first-of-type.nav-link-active:hover,
nav.glass-nav .flex.justify-between > div:nth-child(3) > a:first-of-type.bg-primary:hover,
nav[class*="glass-nav"] .flex.justify-between > div:nth-child(3) > a:first-of-type.nav-link-active:hover,
nav[class*="glass-nav"] .flex.justify-between > div:nth-child(3) > a:first-of-type.bg-primary:hover {
  background-color: rgb(255 107 0) !important;
  color: white !important;
}

/* Theme toggle: prevent icon shift, clip overflow */
#themeToggle,
.theme-toggle-mobile {
  overflow: hidden;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* Theme toggle icon: same size as user icon (match .nav-action-icon svg) */
#themeToggle .theme-icon-sun,
#themeToggle .theme-icon-moon,
#themeToggle #sunIcon,
#themeToggle #moonIcon,
.theme-toggle-mobile .theme-icon-sun,
.theme-toggle-mobile .theme-icon-moon {
  width: 1rem !important;
  height: 1rem !important;
  flex-shrink: 0;
}

/* On md screens (768px-1024px): tighter nav to fit */
@media (min-width: 768px) and (max-width: 1024px) {
  nav.glass-nav a.nav-link {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
    font-size: 0.7rem;
  }
  nav.glass-nav a.nav-link svg {
    width: 0.875rem;
    height: 0.875rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ACTIVE STATE – menu bar buttons (single source of truth for website)
   ═══════════════════════════════════════════════════════════════════════════════ */
nav.glass-nav .nav-link,
nav.glass-nav .mobile-nav-link {
  color: hsl(var(--foreground));
  text-decoration: none;
  transition: all 0.2s ease;
}

nav.glass-nav .nav-link:not(.nav-link-active):not(.bg-primary):hover,
nav.glass-nav .mobile-nav-link:not(.nav-link-active):not(.bg-primary):hover {
  color: rgb(255 107 0);
  background-color: rgb(255 107 0 / 0.1);
}

/* Active state only on the link itself – do not apply to parent containers */
nav.glass-nav a.nav-link.nav-link-active,
nav.glass-nav a.nav-link.bg-primary,
nav.glass-nav a.mobile-nav-link.nav-link-active,
nav.glass-nav a.mobile-nav-link.bg-primary {
  background-color: rgb(255 107 0) !important;
  color: white !important;
  isolation: isolate; /* keep background from affecting siblings */
}

nav.glass-nav a.nav-link.nav-link-active:hover,
nav.glass-nav a.nav-link.bg-primary:hover,
nav.glass-nav a.mobile-nav-link.nav-link-active:hover,
nav.glass-nav a.mobile-nav-link.bg-primary:hover {
  background-color: rgb(255 107 0) !important;
  color: white !important;
}

nav.glass-nav .nav-link svg,
nav.glass-nav .mobile-nav-link svg {
  color: currentColor;
}

/* Breadcrumb bar: align trail to the left (legal and any page with data-breadcrumb) */
nav[aria-label="Breadcrumb"][data-breadcrumb="true"] .flex-1.flex {
  justify-content: flex-start;
}

/* Mobile menu above breadcrumb bar so they don't mix when menu is open */
@media (max-width: 767px) {
  [data-mobile-menu="true"] {
    z-index: 45;
  }
  body.mobile-menu-open nav[aria-label="Breadcrumb"] {
    visibility: hidden;
    pointer-events: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FOOTER – padding, spacing, alignment with main project
   Applies to: MAIN WEBSITE footer only (id="footer" on index, pricing, trust,
   features, download, legal, radar, etc.). Toolkit subdomain footer is styled
   in packages/toolkits/scripts/build-subdomain.js.
   ═══════════════════════════════════════════════════════════════════════════════ */
/* Footer does not shrink when content is short */
footer.border-t {
  flex-shrink: 0;
}

/* Footer outer padding: compact top and bottom */
footer.border-t .max-w-7xl.mx-auto:first-of-type,
footer .max-w-7xl.mx-auto {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
/* Small top padding above footer main row (branding + columns) */
footer .max-w-7xl > div.flex.flex-col {
  padding-top: 0.5rem !important;
}
@media (min-width: 640px) {
  footer.border-t .max-w-7xl.mx-auto:first-of-type,
  footer .max-w-7xl.mx-auto {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }
}

/* Footer section headings: no visible gap below category title */
footer h3.font-bold {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

/* Footer tagline (two-line): same font size as other footer items, tight line spacing */
footer .text-sm.mt-2.text-muted-foreground.leading-tight {
  font-size: 0.875rem;
  margin-top: 0.25rem !important;
}
footer .text-sm.mt-2.text-muted-foreground.leading-tight > div {
  margin-top: 0.0625rem;
  margin-bottom: 0.0625rem;
  line-height: 1.2;
}
footer .text-sm.mt-2.text-muted-foreground.leading-tight > div:first-child {
  margin-top: 0;
}
footer .text-sm.mt-2.text-muted-foreground.leading-tight > div:last-child {
  margin-bottom: 0;
}

/* Footer link lists: no extra gap on the list container */
footer#footer #footer-solutions ul,
footer#footer #footer-resources ul,
footer#footer #footer-legal ul,
footer ul.space-y-1\.5.leading-tight {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  gap: 0;
}
/* Override Tailwind space-y-1.5 and any inline margin: zero gap between list items */
footer#footer #footer-solutions ul > li + li,
footer#footer #footer-resources ul > li + li,
footer#footer #footer-legal ul > li + li,
footer#footer ul.space-y-1\.5 > li + li,
footer ul.space-y-1\.5.leading-tight > li + li,
footer#footer ul li + li {
  margin-top: 0 !important;
}
/* Footer list: minimal interline; first item has minimal top padding (overrides inline styles) */
footer#footer ul li,
footer ul.space-y-0 li,
footer ul.space-y-1\.5 li,
footer ul.leading-tight li {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 1.05 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
footer#footer ul li:first-child,
footer ul.space-y-0 li:first-child,
footer ul.space-y-1\.5 li:first-child,
footer ul.leading-tight li:first-child {
  padding-top: 0.05rem !important;
}
footer#footer ul li a,
footer ul.space-y-1\.5 li a,
footer ul.leading-tight li a {
  line-height: 1.05 !important;
  display: inline-flex;
  align-items: center;
}

/* Footer main content block: same as index on all pages — compact gap between branding and menu columns */
footer#footer .max-w-7xl > div.flex.flex-col {
  gap: 0.75rem !important;
  margin-bottom: 0 !important;
  padding-bottom: 0.12rem !important;
}
footer .flex.flex-col.md\:flex-row.md\:items-start {
  margin-bottom: 0 !important;
  padding-bottom: 0.1rem !important;
}

/* ========== FOOTER BRANDING & MENU (index layout applied to all pages via footer#footer below) ========== */

/* Footer only: logo and branding text close together */
footer .footer-brand-row {
  gap: 0.125rem !important;
}
/* Footer logo size: constrain on all pages (image intrinsic size would otherwise overflow) */
footer .footer-brand-logo {
  width: 4rem;
  height: 4rem;
  flex-shrink: 0;
  object-fit: contain;
}
@media (min-width: 640px) {
  footer .footer-brand-logo {
    width: 4.5rem;
    height: 4.5rem;
  }
}
/* Branding: logo reduced and inline with brand text, pushed right above the 2-line paragraph */
body.page-index footer .footer-branding .footer-brand-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.125rem;
}
body.page-index footer .footer-branding .brand-text,
footer .footer-brand-row .brand-text {
  display: flex;
  flex-direction: column;
  margin: 0;
  margin-left: -0.125rem;
}
body.page-index footer .footer-branding .footer-brand-logo {
  width: 4rem;
  height: 4rem;
  flex-shrink: 0;
}
/* Spacing between branding row (logo + name) and description text — all pages */
footer .footer-brand-desc {
  padding-top: 0.15rem;
}
body.page-index footer .footer-branding .footer-brand-desc {
  margin-top: 0.05rem;
}
/* First line = reduced spacing gap below branding row; 2nd/3rd = the two paragraph lines */
body.page-index footer .footer-branding .footer-brand-desc-line {
  line-height: 1.35;
}
body.page-index footer .footer-branding .footer-brand-desc-spacer {
  height: 0.4em;
  min-height: 0.4em;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
@media (min-width: 640px) {
  body.page-index footer .footer-branding .footer-brand-logo {
    width: 4.5rem;
    height: 4.5rem;
  }
}

/* Footer menu columns: same layout as index on all pages (Solutions | Resources | Legal) */
footer#footer #footer-solutions,
footer#footer #footer-resources,
footer#footer #footer-legal {
  box-sizing: border-box;
  flex: 1 1 0% !important;
  min-width: 0;
  max-width: none;
}
/* Tighter gap between Solutions | Resources | Legal; columns block pushed right of branding */
footer#footer .footer-columns {
  gap: 0.35rem !important;
  margin-left: 0;
}
@media (min-width: 768px) {
  footer#footer .footer-columns {
    margin-left: 10rem !important;
  }
}
@media (min-width: 1024px) {
  footer#footer .footer-columns {
    margin-left: 14rem !important;
  }
}

/* Footer bottom bar (status + copyright): minimal top padding */
footer .max-w-7xl > div.border-t.border-border,
footer .max-w-7xl > div > div.border-t.border-border {
  padding-top: 0.2rem !important;
}

/* © ERMITS LLC: left-aligned below branding text; copyright block first (left) on all pages */
footer .max-w-7xl > div.border-t.border-border > div:has(a[href*="ermits.com"]),
footer .max-w-7xl > div > div.border-t.border-border > div:has(a[href*="ermits.com"]) {
  order: -1;
  align-items: flex-start !important;
  text-align: left;
}
footer .max-w-7xl > div.border-t.border-border a[href*="ermits.com"],
footer .max-w-7xl > div > div.border-t.border-border a[href*="ermits.com"] {
  text-align: left;
}

/* Footer: distinct background and visible top border for section separation */
footer#footer,
footer.border-t,
footer[class*="border-t"] {
  /* Distinct background so footer is visible against main content (e.g. home hero/sections) */
  background-color: hsl(214.3 31.8% 93% / 0.98) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top-width: 1px !important;
  border-top-style: solid !important;
  border-top-color: hsl(214.3 31.8% 88% / 0.8) !important;
}
html.dark footer#footer,
html.dark footer.border-t,
html.dark footer[class*="border-t"] {
  background-color: hsl(217.2 32.6% 14% / 0.98) !important;
  border-top-color: hsl(217.2 32.6% 22% / 0.8) !important;
}
/* Inner horizontal line in footer (above status/copyright row): subtle, not white */
footer .border-t.border-border {
  border-top-color: hsl(214.3 31.8% 91.4% / 0.25);
}
html.dark footer .border-t.border-border {
  border-top-color: hsl(217.2 32.6% 25% / 0.35);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FOOTER – compact spacing (replaces inline styles for linter compliance)
   ═══════════════════════════════════════════════════════════════════════════════ */
#footer .footer-inner {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}
#footer .footer-top-row {
  gap: 0.75rem;
  margin-bottom: 0;
  padding-bottom: 0.12rem;
}
#footer .footer-columns.footer-columns-compact {
  gap: 1rem;
  margin-bottom: 0.5rem;
}
#footer .footer-column-title {
  margin: 0 0 0.12rem 0;
}
#footer .footer-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
#footer .footer-list-item {
  margin: 0.06rem 0 0 0;
  padding: 0;
  line-height: 1.15;
}
#footer .footer-list-item:first-child {
  margin: 0;
  padding: 0.28rem 0 0 0;
  line-height: 1.15;
}
#footer .footer-bottom-row {
  padding-top: 0.25rem;
}