/* ==========================================================================
   Left-side navigation rail: expand tab + Help & Support + Language.
   Collapsed: a narrow icon-only rail. Expanded (is-open): a wider panel
   with labels and an inline language list, pushing page content over.
   Self-contained: safe to include on any page without touching other CSS.
   Uses the site's existing brand teal (#00697d, from index.css/admin.css).
   ========================================================================== */

:root {
  --sw-teal: #00697d;
  --sw-teal-dark: #004f5e;
  --sw-rail-width: 56px;
  --sw-rail-width-expanded: 253px;
}

/* Grid the page: header spans the full width on row 1, the rail and the
   main content share row 2 as columns, and the footer (if present) spans
   the full width on row 3. The body is at least a full screen tall, and
   row 2 is set to "1fr" so it soaks up any leftover space -- pinning the
   footer to the bottom of the screen (instead of floating right under
   short content) and stretching the rail down to meet it. On pages whose
   content is taller than the screen, row 2 simply grows past 1fr to fit
   it, and the footer moves down with it. Grid items stretch to fill
   their cell by default, so the rail always begins exactly under the
   header and ends exactly above the footer. Widens automatically when
   the rail is expanded, since --sw-rail-width is redefined on body. */
body {
  display: grid;
  grid-template-columns: var(--sw-rail-width) 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  transition: grid-template-columns 0.25s ease;
}

body.side-nav-open {
  --sw-rail-width: var(--sw-rail-width-expanded);
}

.site-header,
footer {
  grid-column: 1 / -1;
}

.side-widget {
  grid-column: 1;
  grid-row: 2;
  width: 100%;
  background: #fff;
  border-right: 1px solid #e2e2e2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding-top: 6px;
  padding-bottom: 20px;
  transition: width 0.25s ease;
}

.container {
  grid-column: 2;
  grid-row: 2;
}

/* Collapse/expand tab: centered in the narrow collapsed rail; anchored to
   the top-right corner, with a light square backdrop, once expanded. */
.side-widget__toggle {
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--sw-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
  margin-bottom: 14px;
  flex-shrink: 0;
}

.side-widget.is-open .side-widget__toggle {
  align-self: flex-end;
  margin-right: 12px;
  background: #ccc;
}

.side-widget__toggle i {
  font-size: 16px;
  transition: transform 0.25s ease;
}

.side-widget.is-open .side-widget__toggle i {
  transform: rotate(180deg);
}

/* Menu: Help & Support + Language, laid out as icon rows. Icon-only and
   centered while collapsed; icon + label, left-aligned, once expanded. */
.side-widget__menu {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: center;
  width: 100%;
}

.side-widget.is-open .side-widget__menu {
  align-self: stretch;
  align-items: flex-start;
  padding: 0 20px;
  box-sizing: border-box;
}

.side-widget__row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: #333;
  font-size: 15px;
  font-family: inherit;
  white-space: nowrap;
}

.side-widget__row i {
  font-size: 20px;
  color: var(--sw-teal);
  flex-shrink: 0;
  width: 22px;
  text-align: center;
}

.side-widget__label {
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transition: opacity 0.2s ease;
}

.side-widget.is-open .side-widget__label {
  opacity: 1;
  max-width: none;
}

/* Language sub-list: only shown once the rail is expanded */
.side-widget__lang-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0 0 0 36px;
  display: none;
  flex-direction: column;
  gap: 14px;
}

.side-widget.is-open .side-widget__lang-list {
  display: flex;
}

.side-widget__lang-option {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  font-family: inherit;
  color: #333;
  cursor: pointer;
  text-align: left;
}

.side-widget__lang-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6fae4e;
  display: none;
  flex-shrink: 0;
}

.side-widget__lang-option.is-active .side-widget__lang-dot {
  display: inline-block;
}

/* Small popover for the Help & Support button, opening to the right of
   the rail (used in both the collapsed and expanded states). */
.side-widget__popover {
  position: fixed;
  left: calc(var(--sw-rail-width) + 8px);
  width: 220px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
  padding: 14px;
  font-size: 13px;
  color: #333;
  display: none;
  z-index: 9999;
}

.side-widget__popover.is-visible {
  display: block;
}

.side-widget__popover h4 {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--sw-teal-dark);
}

.side-widget__popover ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.side-widget__popover li {
  padding: 6px 0;
  border-top: 1px solid #f0f0f0;
}

.side-widget__popover li:first-child {
  border-top: none;
}

@media (max-width: 480px) {
  :root {
    --sw-rail-width: 44px;
    --sw-rail-width-expanded: 220px;
  }

  .side-widget {
    gap: 18px;
    padding-top: 16px;
  }
}

/* Below tablet width, an expanded rail pushing the grid column would
   squeeze the main content into a sliver, so it overlays on top of the
   content instead. The collapsed rail still sits in the grid as normal;
   only the *expanded* state switches to position:fixed, floating above
   everything else until the toggle (still visible, un-shifted) closes it. */
@media (max-width: 768px) {
  body.side-nav-open {
    --sw-rail-width: 44px;
  }

  body.side-nav-open .side-widget {
    position: fixed;
    top: var(--site-header-height, 130px);
    left: 0;
    bottom: 0;
    width: var(--sw-rail-width-expanded);
    z-index: 1000;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.18);
  }
}