/*
  Layout — container, grid, and the structural chrome shared by every page
  (topbar, header/nav, footer). Component *styling* (buttons, cards, badges)
  lives in components.css; this file is purely structural/responsive.
*/

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.grid {
  display: grid;
  gap: var(--space-6);
}

.grid--2 { grid-template-columns: repeat(1, 1fr); }
.grid--3 { grid-template-columns: repeat(1, 1fr); }
.grid--4 { grid-template-columns: repeat(1, 1fr); }
.grid--5 { grid-template-columns: repeat(1, 1fr); }

@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--5 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .grid--5 { grid-template-columns: repeat(5, 1fr); }
}

.section {
  padding-block: var(--space-10);
}
.section--alt {
  background: var(--color-surface-alt);
}
.section--tight {
  padding-block: var(--space-8);
}

/* --- Topbar (contact strip above the main nav) --------------------------- */
.topbar {
  background: var(--color-primary-dark);
  color: var(--color-on-dark);
  font-size: var(--text-xs);
}
.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-2);
  flex-wrap: wrap;
}
.topbar a {
  color: var(--color-on-dark);
  opacity: 0.85;
}
.topbar a:hover {
  opacity: 1;
  color: var(--color-accent);
}
.topbar__contacts {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.topbar__meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* --- Main header / nav ---------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-3);
  gap: var(--space-5);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--color-primary);
}
:root[data-theme="dark"] .brand {
  color: var(--color-ink);
}
.brand__mark {
  height: 36px;
  width: auto;
}
.brand__mark--dark {
  display: none;
}
:root[data-theme="dark"] .brand__mark--light {
  display: none;
}
:root[data-theme="dark"] .brand__mark--dark {
  display: block;
}

.nav {
  display: none;
}
.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__list a {
  color: var(--color-ink);
  font-weight: 500;
  font-size: var(--text-sm);
}
.nav__list a:hover {
  color: var(--color-accent);
}

.nav__dropdown {
  position: relative;
}

/* The trigger is a <button>, not a link — it does not navigate, it opens
   a panel. Styled to sit in the row as if it were one of the sibling
   anchors. */
.nav__dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--color-ink);
  cursor: pointer;
}
.nav__dropdown-trigger:hover,
.nav__dropdown[data-open="true"] .nav__dropdown-trigger {
  color: var(--color-accent);
}
.nav__caret {
  font-size: 0.7em;
  line-height: 1;
  transition: transform var(--transition-fast);
}
.nav__dropdown[data-open="true"] .nav__caret { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .nav__caret { transition: none; } }

.nav__dropdown-panel {
  display: none;
  position: absolute;
  /* Anchored at the TRIGGER's bottom edge, not below a gap. The visual
     offset now comes from padding-top INSIDE the panel, drawn on a
     transparent strip. See ::before below for why that matters. */
  top: 100%;
  left: 0;
  min-width: 240px;
  padding: var(--space-2);
  margin-top: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 60;   /* above the hero slider, which stacks its own layers */
}

/* THE BUG THIS FIXES (reported 26 Aug 2026: "the dropdown items should
   allow users to hover over and select items without first clicking the
   main heading").

   The panel sat 12px below the trigger with nothing in between. Moving
   the pointer down from "Features" to the first item crossed that dead
   strip, where neither the trigger nor the panel is hovered — so the
   panel closed before the pointer arrived, every time. The menu was not
   click-only by design; hover was simply impossible to complete, and
   clicking was the only thing that appeared to work.

   This is an invisible bridge across the gap. It belongs to the panel,
   so hovering it keeps the panel open, and the 12px of visual breathing
   room is preserved. */
.nav__dropdown-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--space-3) * -1);
  height: var(--space-3);
}

.nav__dropdown:hover .nav__dropdown-panel,
.nav__dropdown:focus-within .nav__dropdown-panel,
.nav__dropdown[data-open="true"] .nav__dropdown-panel {
  display: block;
}
.nav__dropdown-panel a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-ink);
}
.nav__dropdown-panel a:hover,
.nav__dropdown-panel a:focus-visible {
  background: var(--color-surface-alt);
  color: var(--color-accent);
}
.nav__dropdown-empty {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
}

.mobile-nav {
  display: none;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}
.mobile-nav.is-open {
  display: block;
}
.mobile-nav__list {
  list-style: none;
  margin: 0;
  padding: var(--space-3) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.mobile-nav__list a {
  display: block;
  padding: var(--space-2) 0;
  color: var(--color-ink);
  font-weight: 500;
}

/* Mobile dropdowns are native <details> disclosures. There is no hover
   on a touchscreen, and <details> is keyboard-operable and announced by
   screen readers without a line of JavaScript. */
.mobile-nav__group > .mobile-nav__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-ink);
  cursor: pointer;
  list-style: none;      /* hides the default triangle in Firefox */
}
/* ...and in Safari/Chrome, which use a pseudo-element instead. The caret
   in the markup replaces it, so it rotates with [open]. */
.mobile-nav__group > .mobile-nav__summary::-webkit-details-marker {
  display: none;
}
.mobile-nav__group[open] > .mobile-nav__summary .nav__caret {
  transform: rotate(180deg);
}
.mobile-nav__sub {
  display: flex;
  flex-direction: column;
  padding: var(--space-1) 0 var(--space-2) var(--space-4);
  border-left: 2px solid var(--color-border);
  margin-left: var(--space-1);
}
.mobile-nav__sub a {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-muted);
}
.mobile-nav__sub a:hover { color: var(--color-accent); }

.mobile-nav__divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-2) 0;
  list-style: none;
}

@media (min-width: 1024px) {
  .nav {
    display: block;
  }
  .nav-toggle {
    display: none;
  }
  .mobile-nav {
    display: none !important;
  }
}

/* --- Footer ---------------------------------------------------------------- */
.site-footer {
  background: var(--color-primary-dark);
  color: var(--color-on-dark);
}
.site-footer a {
  color: var(--color-on-dark);
  opacity: 0.85;
}
.site-footer a:hover {
  opacity: 1;
  color: var(--color-accent);
}
.site-footer__grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
  padding-block: var(--space-10);
}
@media (min-width: 768px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .site-footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1.4fr;
  }
}
.site-footer__heading {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--color-on-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-4);
}
.site-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-sm);
}
.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: var(--space-4);
  font-size: var(--text-xs);
  opacity: 0.75;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
}
.social-icons {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.social-icons a {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  font-size: var(--text-sm);
}
.social-icons a:hover {
  border-color: var(--color-accent);
}

/* --- Dashboard shell (Day 9) ------------------------------------------------ */
.dashboard-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  padding-block: var(--space-8);
  align-items: start;
}
@media (min-width: 900px) {
  .dashboard-shell {
    grid-template-columns: 240px 1fr;
  }
}
.dashboard-sidebar {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  position: sticky;
  top: calc(64px + var(--space-5)); /* clears the sticky site header */
}
.dashboard-sidebar__role {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  margin-bottom: var(--space-4);
}
.dashboard-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.dashboard-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink);
}
.dashboard-nav__link:hover {
  background: var(--color-surface-alt);
}
.dashboard-nav__link.is-active {
  background: var(--color-primary);
  color: var(--color-on-dark);
}
.dashboard-nav__link--disabled {
  color: var(--color-muted);
  cursor: not-allowed;
}
.dashboard-content {
  min-width: 0; /* prevents grid children from overflowing on narrow tables/cards */
}