/* https://swarnolata.com/include/common.css */

/* ==============================================================
   1. SITE-WIDE LAYOUT
   ============================================================== */
:root {
  --navbar-height: 4.5rem;

  --s-topbar-height: 2.5rem;
  --s-navbar-height: var(--navbar-height);

  /* Optional secondary navbar: absent by default. */
  --s-secondary-navbar-height: 0rem;

  --s-header-offset: calc(
    var(--s-topbar-height) +
    var(--s-navbar-height) +
    var(--s-secondary-navbar-height)
  );
}

/* Reserve secondary-navbar space only when it exists. */
body:has(.s-secondary-navbar) {
  --s-secondary-navbar-height: 2.75rem;
}
/*
 * Reserve space for the secondary navbar only on pages
 * where that component is actually present.
 */

body:has(.s-secondary-navbar) {
  --s-secondary-navbar-height: 2.75rem;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: var(--s-header-offset);
}

/* ==============================================================
   2. PRIMARY NAVBAR POSITIONING
   ============================================================== */

/*
 * Site-specific positioning.
 * The universal navbar component remains static by default.
 */

.s-navbar {
  --s-navbar-position: fixed;
  --s-navbar-inset: 0 0 auto;
  --s-navbar-height: var(--navbar-height);

  top: var(--s-topbar-height);
}

/* ==============================================================
   3. SECONDARY NAVBAR
   ============================================================== */

:root {
  --s-secondary-navbar-bg: var(--s-base-20, Canvas);
  --s-secondary-navbar-fg: var(--s-base-100, CanvasText);

  --s-secondary-navbar-border:
    oklch(from var(--s-secondary-navbar-fg) l c h / 0.16);

  --s-secondary-navbar-z-index: 990;
  --s-secondary-navbar-gap: 0.35rem;
}

.s-secondary-navbar {
  position: fixed;
  inset-inline: 0;

  top: calc(
    var(--s-topbar-height) +
    var(--s-navbar-height)
  );

  z-index: var(--s-secondary-navbar-z-index);

  min-height: var(--s-secondary-navbar-height);

  color: var(--s-secondary-navbar-fg);
  background: var(--s-secondary-navbar-bg);

  border-bottom: 1px solid var(--s-secondary-navbar-border);
}

.s-secondary-navbar__container {
  display: flex;
  align-items: center;
  gap: var(--s-secondary-navbar-gap);

  width: min(100% - 2rem, 90rem);
  min-height: var(--s-secondary-navbar-height);

  margin-inline: auto;
}

.s-secondary-navbar__links {
  display: flex;
  align-items: center;
  gap: var(--s-secondary-navbar-gap);

  width: 100%;
  margin: 0;
  padding: 0;

  list-style: none;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.s-secondary-navbar__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;

  min-height: 2.35rem;
  padding: 0.4rem 0.8rem;

  color: inherit;
  background: transparent;
  border-radius: 0.35rem;

  font: inherit;
  font-size: 0.875rem;
  text-decoration: none;
  white-space: nowrap;

  transition: background-color 150ms ease;
}

.s-secondary-navbar__link:hover,
.s-secondary-navbar__link[aria-current='page'] {
  background:
    oklch(from var(--s-secondary-navbar-fg) l c h / 0.09);
}

.s-secondary-navbar__link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ==============================================================
   4. CONTENT OFFSET AND MOBILE PANEL CLEARANCE
   ============================================================== */

html {
  scroll-padding-top: var(--s-header-offset);
}

#content-main {
  min-height: calc(100vh - var(--s-header-offset));
  min-height: calc(100dvh - var(--s-header-offset));
}

@media (max-width: 760px) {
/*
  .s-secondary-navbar__container {
    width: 100%;
    padding-inline: 0.5rem;
  }
*/
  .s-navbar__panel {
    max-height: calc(
      100dvh -
      var(--s-topbar-height) -
      var(--s-navbar-height)
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .s-secondary-navbar__link {
    transition: none;
  }
}

/* ==============================================================
   5. MAIN CONTENT — ONLY THE THEME TARGET
   ============================================================== */

#content-main[data-theme='light'] {
  color: var(--s-base-10);
  background: var(--s-base-100);
  color-scheme: light;
}

#content-main[data-theme='dark'] {
  color: var(--s-base-100);
  background: var(--s-base-10);
  color-scheme: dark;
}

#content-main[data-theme='dark'] a {
  color: var(--s-base-50);
}

#content-main[data-theme='dark'] input,
#content-main[data-theme='dark'] textarea,
#content-main[data-theme='dark'] select {
  color: var(--s-base-100);
  background: var(--s-base-10);
  border-color: #454b5b;
}

#content-main[data-theme='dark'] input::placeholder,
#content-main[data-theme='dark'] textarea::placeholder {
  color: var(--s-base-100);
}