/* ==========================================================================
   aczen.live navigation: the Solutions/Company dropdowns and the mobile sheet
   Styles the markup in partials/header.html. Tokens come from styles.css;
   nothing here redefines them. Breakpoint is 900px, the same width at which
   styles.css shows .nav, so the desktop menus and the mobile sheet hand off
   at the same width and are never both visible.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Desktop dropdown menus (details.nav-menu inside .nav)
   -------------------------------------------------------------------------- */

/* The nav row holds <details> next to plain links, so it has to centre them vertically */
.nav {
  align-items: center; /* summaries and links share one baseline band despite different box types */
}

/* Each menu anchors its own dropdown panel */
.nav-menu {
  position: relative; /* the absolute .nav-panel positions itself against this, not the header */
}

/* The trigger has to look like its sibling nav links, so it copies their type */
.nav-menu > summary {
  display: inline-flex; /* puts the chevron beside the label and turns off the default list-item marker */
  align-items: center; /* chevron centred on the text */
  gap: 6px; /* room between label and chevron */
  padding-block: 10px; /* same tall click area as .nav a */
  color: var(--ink-soft); /* matches .nav a so the trigger doesn't read as a different kind of thing */
  font-weight: 500; /* matches .nav a */
  list-style: none; /* removes the disclosure triangle in Firefox */
  cursor: pointer; /* summary is clickable but has no pointer by default */
  user-select: none; /* repeated clicks shouldn't highlight the label */
}

/* WebKit draws its marker with a separate pseudo-element */
.nav-menu > summary::-webkit-details-marker {
  display: none; /* removes the default triangle in Safari */
}

/* The chevron: a bordered square turned 45deg reads as a down arrow with no icon file */
.nav-menu > summary::after {
  content: ""; /* the pseudo-element only renders with content set */
  width: 6px; /* small, so the label stays the main thing */
  height: 6px; /* square, so the rotation gives a symmetric arrow */
  border-right: 1.5px solid currentColor; /* one arm of the chevron, follows the label colour */
  border-bottom: 1.5px solid currentColor; /* the other arm */
  transform: translateY(-2px) rotate(45deg); /* points down; nudged up because the rotated box sits low */
}

/* Hovering or opening the menu darkens the trigger the same way .nav a:hover does */
.nav-menu > summary:hover,
.nav-menu[open] > summary {
  color: var(--ink); /* same hover colour as the plain nav links */
}

/* Open state flips the chevron so it shows the menu can be closed */
.nav-menu[open] > summary::after {
  transform: translateY(1px) rotate(-135deg); /* points up; nudged down to stay optically centred */
}

/* The dropdown: a white sheet under the trigger with columns of links */
.nav-panel {
  position: absolute; /* floats over page content instead of pushing the header taller */
  top: calc(100% + 8px); /* a small gap below the summary so the panel doesn't touch the label */
  left: -20px; /* pulls the panel left by its padding so its first link lines up with the trigger text */
  z-index: 25; /* above page content; still inside the header's stacking context */
  display: grid; /* columns of groups */
  grid-template-columns: repeat(3, minmax(180px, auto)); /* Solutions has exactly three groups on aczen.in */
  gap: 8px 40px; /* wide column gap so the three lists don't read as one */
  padding: 20px; /* inner breathing room */
  background: var(--paper); /* opaque white so the page doesn't show through */
  border: 1px solid var(--rule); /* the same rule colour used for every border on the site */
  border-radius: var(--radius-lg); /* panel tier of the radius hierarchy */
  box-shadow: 0 12px 32px -8px rgb(4 33 88 / 0.16), 0 2px 6px rgb(4 33 88 / 0.06); /* --brand-deep at low alpha, so the shadow is blue-tinted like the brand, not a grey smudge */
}

/* Company has one list, so it gets one narrow column */
.nav-panel-narrow {
  grid-template-columns: 1fr; /* single column */
  width: 220px; /* wide enough for "Operations & Admin"-length labels without wrapping */
}

/* A group is a titled vertical list of links */
.nav-group {
  display: flex; /* stacks the title and links */
  flex-direction: column; /* vertical list */
  min-width: 0; /* lets long labels wrap instead of stretching the grid column */
}

/* Links inside the panel: full ink, larger targets; beats .nav a's ink-soft/underline styling */
.nav .nav-group a {
  padding-block: 6px; /* per the brief: tighter than header links because they are stacked */
  color: var(--ink); /* inside an opened menu links are the content, so they get full ink */
  font-size: 15px; /* one step under body so a column of seven fits comfortably */
  font-weight: 500; /* firmer than body, still lighter than the group titles need to be */
  text-decoration: none; /* a column of underlines would be noise */
  white-space: nowrap; /* keeps each label on one line so columns stay tidy */
}

/* Panel link hover: colour change only, which is enough inside a menu */
.nav .nav-group a:hover {
  color: var(--brand); /* brand blue marks the one under the pointer */
  text-decoration-line: none; /* overrides .nav a:hover's underline */
}

/* Group titles label the column in sentence case, never all caps */
.nav-group-title {
  margin: 0 0 6px; /* a small gap separates the label from its first link */
  color: var(--ink-soft); /* quieter than the links it labels */
  font-size: 13px; /* smaller than the links so it reads as a heading, not an option */
  font-weight: 600; /* semibold carries the heading role instead of capitals */
  line-height: 1.4; /* compact single line */
}

/* --------------------------------------------------------------------------
   2. Mobile menu (details.nav-mobile inside .header-actions)
   -------------------------------------------------------------------------- */

/* Below 900px the desktop nav is hidden, so the mobile menu is the only route to other pages */
.nav-mobile {
  display: block; /* visible on phones and small tablets */
}

/* The trigger: a 44x44 icon button, the minimum comfortable touch target */
.nav-mobile > summary {
  display: grid; /* centres the icon in both directions with one declaration */
  place-items: center; /* icon dead centre */
  width: 44px; /* touch target width */
  height: 44px; /* touch target height */
  margin-right: -10px; /* lets the icon's visual edge line up with the right gutter while keeping the 44px target */
  border-radius: var(--radius-sm); /* same radius as buttons, visible when the focus ring shows */
  color: var(--ink); /* the bars use currentColor */
  list-style: none; /* removes the Firefox disclosure triangle */
  cursor: pointer; /* summary has no pointer by default */
}

/* WebKit's separate marker pseudo-element */
.nav-mobile > summary::-webkit-details-marker {
  display: none; /* removes the Safari triangle */
}

/* Middle bar of the hamburger; the other two are its pseudo-elements */
.nav-mobile-icon {
  position: relative; /* anchors the top and bottom bars */
  display: block; /* spans need a block box to take width and height */
  width: 20px; /* bar length */
  height: 2px; /* bar thickness */
  border-radius: 1px; /* softens bar ends */
  background: currentColor; /* follows the summary's ink colour */
}

/* Top and bottom bars share their geometry */
.nav-mobile-icon::before,
.nav-mobile-icon::after {
  content: ""; /* pseudo-elements render only with content set */
  position: absolute; /* placed relative to the middle bar */
  left: 0; /* aligned with the middle bar */
  width: 100%; /* same length as the middle bar */
  height: 2px; /* same thickness */
  border-radius: 1px; /* same softened ends */
  background: currentColor; /* same colour */
}

/* Top bar sits 6px above the middle one */
.nav-mobile-icon::before {
  top: -6px; /* even spacing between the three bars */
}

/* Bottom bar sits 6px below */
.nav-mobile-icon::after {
  top: 6px; /* mirrors the top bar */
}

/* Open: the middle bar disappears so only the crossing pair remains */
.nav-mobile[open] .nav-mobile-icon {
  background: transparent; /* hides the middle bar while its pseudo-elements stay visible */
}

/* Open: top bar drops to the centre and tilts one way */
.nav-mobile[open] .nav-mobile-icon::before {
  transform: translateY(6px) rotate(45deg); /* moves to the middle line, then forms one stroke of the X */
}

/* Open: bottom bar rises to the centre and tilts the other way */
.nav-mobile[open] .nav-mobile-icon::after {
  transform: translateY(-6px) rotate(-45deg); /* the second stroke of the X */
}

/* The sheet: fixed under the header, full width, scrolls on its own if it outgrows the screen */
.nav-mobile-panel {
  position: fixed; /* pinned to the viewport, so it stays under the sticky header regardless of scroll */
  top: 69px; /* header min-height 68px plus its 1px bottom border */
  left: 0; /* full width */
  right: 0; /* full width */
  max-height: calc(100dvh - 69px); /* never taller than the space below the header */
  overflow: auto; /* long lists scroll inside the sheet instead of the page */
  overscroll-behavior: contain; /* reaching the end of the list doesn't start scrolling the page behind */
  display: flex; /* stacks titles and links */
  flex-direction: column; /* vertical list */
  padding: 16px 20px 32px var(--pad-l); /* left padding clears the orange margin line, which runs over the sheet */
  background: var(--paper); /* opaque white */
  border-bottom: 1px solid var(--rule); /* separates the sheet from the page when it is shorter than the screen */
  box-shadow: 0 16px 32px -12px rgb(4 33 88 / 0.18); /* brand-deep tint, marks the sheet as floating above the page */
}

/* Sheet links: large type and 44px rows so they are easy to hit with a thumb */
.nav-mobile-panel a {
  display: flex; /* lets align-items centre the label inside the min-height */
  align-items: center; /* label vertically centred in its row */
  min-height: 44px; /* touch target height */
  color: var(--ink); /* primary text colour */
  font-size: 17px; /* per the brief: at least body size on phones */
  font-weight: 500; /* firmer than body to read as navigation */
  text-decoration: none; /* the list layout already signals these are links */
}

/* Sheet link hover, for tablets with a pointer */
.nav-mobile-panel a:hover {
  color: var(--brand); /* same hover as the desktop panel */
}

/* Group titles in the sheet get space above to separate groups */
.nav-mobile-panel .nav-group-title {
  margin: 20px 0 4px; /* gap from the previous group, tight to its own links */
}

/* The first title needs no extra space above it */
.nav-mobile-panel .nav-group-title:first-child {
  margin-top: 4px; /* the sheet's own padding already provides the top gap */
}

/* On the narrowest phones "Sign in" is dropped so the CTA and menu button fit beside the logo */
@media (max-width: 479.98px) {
  /* Sign in stays reachable from the sign-up page, so hiding it here loses no route */
  .header-actions .link-quiet {
    display: none; /* frees about 70px of row width at 360px */
  }
}

/* From 900px the desktop nav is visible, so the mobile menu must disappear */
@media (min-width: 900px) {
  /* Display switch only */
  .nav-mobile {
    display: none; /* the desktop dropdowns take over at the same width styles.css reveals .nav */
  }
}

/* --------------------------------------------------------------------------
   3. Current page marker (set by nav.js)
   -------------------------------------------------------------------------- */

/* The link to the page you're on is brand blue and semibold, a cue that doesn't rely on colour alone */
.nav a[aria-current="page"],
.nav-mobile-panel a[aria-current="page"],
.site-footer a[aria-current="page"] {
  color: var(--brand); /* brand blue marks "you are here" */
  font-weight: 600; /* weight change so the cue survives for colour-blind readers */
}

/* --------------------------------------------------------------------------
   4. Motion (only when the visitor hasn't asked for less)
   -------------------------------------------------------------------------- */

/* Motion here only answers the visitor's own click, and is skipped entirely under reduced motion */
@media (prefers-reduced-motion: no-preference) {
  /* The chevron turns rather than jumping, showing the state change */
  .nav-menu > summary::after {
    transition: transform 0.2s var(--ease-out); /* shared site curve, short enough to feel immediate */
  }

  /* The hamburger bars fold into an X */
  .nav-mobile-icon,
  .nav-mobile-icon::before,
  .nav-mobile-icon::after {
    transition: transform 0.2s var(--ease-out), background-color 0.15s linear; /* bars rotate, middle bar fades */
  }

  /* Panel links shift colour on hover instead of snapping */
  .nav .nav-group a,
  .nav-mobile-panel a {
    transition: color 0.15s linear; /* subtle, so the menu doesn't feel busy */
  }
}