/* ══════════════════════════════════════════════════════════════════════
   Shared site navigation — the pill menu (top left) used on every page.
   Linked last in each page's <head> so it wins over page-level styles.
   ══════════════════════════════════════════════════════════════════════ */

#page-nav {
  position: fixed;
  top: max(3vh, env(safe-area-inset-top));
  left: max(4.5vw, env(safe-area-inset-left));
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  max-width: calc(91vw - 140px);   /* leaves room for the logo on the right */

  /* Ivory glass with a soft blur behind, so the links stay readable over
     photos and video; a brass rim with an inner hairline keeps it crafted
     rather than flat. */
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.82), rgba(250, 242, 224, 0.68));
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid #C9A96A;                /* Brass Gold */
  border-radius: 100px;
  box-shadow:
    inset 0 0 0 3px rgba(255, 253, 248, 0.6),
    inset 0 0 0 4px rgba(201, 169, 106, 0.35),
    0 10px 28px -12px rgba(41, 38, 32, 0.45),
    0 1px 2px rgba(41, 38, 32, 0.12);
  padding: 0.55rem 1.25rem;

  font-family: var(--font-ui, 'Inter', 'Helvetica Neue', Arial, sans-serif);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
}

.page-nav-link {
  color: #5E5A52;
  text-decoration: none;
  transition: color 0.3s ease;
}

.page-nav-link:hover,
.page-nav-link:focus-visible {
  color: #A33A2A;
}

.page-nav-link.active {
  color: #A33A2A;
  font-weight: 700;
  cursor: default;
}

/* Separators: a small brass diamond instead of a plain bar */
.page-nav-sep {
  font-size: 0;
  color: transparent;
  display: inline-flex;
  align-items: center;
}
.page-nav-sep::before {
  content: '';
  width: 5px;
  height: 5px;
  background: #C9A96A;
  transform: rotate(45deg);
}

@media (max-width: 900px) {
  #page-nav {
    top: 2.2vh;
    left: 5vw;
    font-size: 0.875rem;
    gap: 8px;
    padding: 0.4rem 0.85rem;
  }
}

/* ── Mobile hamburger toggle — the tripundra mark itself ─────────────── */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 22px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.nav-toggle { position: relative; }

/* Closed: the tripundra. Open: it turns away and the bel patta turns in. */
.nav-toggle-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.4s var(--ease-out-cubic, ease), opacity 0.3s ease;
}
.nav-toggle-icon--open {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon--closed {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon--open {
  opacity: 1;
  transform: none;
}

/* On desktop the links sit inline as direct flex children of #page-nav. */
.page-nav-links { display: contents; }

@media (max-width: 900px) {
  /* The whole 44px circle is the button, not just the 30×22 mark. */
  .nav-toggle {
    display: flex;
    width: 44px;
    height: 44px;
    padding: 11px 7px;
    flex-shrink: 0;
  }
  .nav-toggle-icon--open { inset: 8px 0; width: 100%; height: calc(100% - 16px); }
  #page-nav.nav-open .nav-toggle { margin: -0.4rem -0.85rem -0.4rem 0; }

  /* Phones: logo top-left, nav circle top-right (desktop keeps the
     nav on the left and logo on the right). The open menu grows down
     and to the left from the circle, with its links centred. */
  #page-nav {
    left: auto;
    right: max(16px, env(safe-area-inset-right));
  }
  body > #site-logo,
  #top-controls {
    right: auto;
    left: max(16px, env(safe-area-inset-left));
  }
  #top-controls { flex-direction: row-reverse; }

  /* Collapsed = a plain circle around just the hamburger; opening
     restores the familiar pill shape and padding. */
  #page-nav {
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
  }
  #page-nav.nav-open {
    width: min(260px, calc(100vw - 32px));
    height: auto;
    padding: 0.4rem 0.85rem 1.4rem;
    justify-content: flex-end;
    flex-wrap: wrap;
    /* Same rangoli corners and brass hairline as the home page's
       "Continue exploring" cards. */
    background:
      url('../assets/ornaments/rangoli-corner.svg') top 8px left 8px / 34px 34px no-repeat,
      url('../assets/ornaments/rangoli-corner-br.svg') bottom 8px right 8px / 34px 34px no-repeat,
      linear-gradient(160deg, rgba(255, 253, 248, 0.9), rgba(251, 244, 228, 0.78));
    box-shadow:
      inset 0 0 0 4px rgba(255, 253, 248, 0.3),
      inset 0 0 0 5px rgba(201, 169, 106, 0.45),
      0 18px 40px -18px rgba(41, 38, 32, 0.45);
  }

  .page-nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-height 0.35s var(--ease-out-cubic, ease), opacity 0.3s ease, margin-top 0.35s ease;
  }

  .page-nav-links.open {
    width: 100%;
    max-height: 320px;
    opacity: 1;
    pointer-events: auto;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(201, 169, 106, 0.4);
  }

  /* The pill shape reads oddly once the menu expands downward — soften
     the corners while open so it looks like a dropdown, not a blob. */
  #page-nav.nav-open { border-radius: 24px; }

  /* Each link is a full-width 44px row so it is easy to hit with a thumb. */
  .page-nav-links .page-nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }

  /* Phones: the floating nav and logo slide away while reading down the
     page and come back on the first scroll up (js/nav.js adds the class). */
  #page-nav,
  #site-logo,
  #theme-toggle {
    transition: transform 0.35s var(--ease-out-cubic, ease), opacity 0.35s ease,
                background 0.35s ease, border-color 0.35s ease;
  }
  body.chrome-hidden #page-nav,
  body.chrome-hidden #site-logo,
  body.chrome-hidden #theme-toggle {
    transform: translateY(calc(-100% - 24px));
    opacity: 0;
    pointer-events: none;
  }

  .page-nav-sep { display: none; }
}

/* ── Shared interaction states ─────────────────────────────────────── */
/* One visible keyboard-focus ring everywhere (Focus #365A70). */
:focus-visible {
  outline: 2px solid #365A70;
  outline-offset: 3px;
}

/* "Crafted at Tvashta Labs" link (footer, every page) */
.foot-crafted-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(168, 50, 33, 0.45);
  text-underline-offset: 3px;
  transition: color 0.25s ease, text-decoration-color 0.25s ease;
}
.foot-crafted-link:hover,
.foot-crafted-link:focus-visible {
  color: #A83221;
  text-decoration-color: currentColor;
}
@media (pointer: coarse) {
  .foot-crafted-link { display: inline-block; padding: 12px 0; margin: -12px 0; }
}

/* ── Shared footer ────────────────────────────────────────────────────
   Same markup on every page: logo on the left, links + copyright on the
   right, and "Crafted at Tvashta Labs" centred along the bottom. */
#site-footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 28px;
}
#site-footer .footer-main {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
}
#site-footer .footer-logo {
  height: clamp(56px, 7vw, 84px);
  width: auto;
  flex-shrink: 0;
}
#site-footer .footer-text {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  min-width: 0;
  text-align: right;
}
#site-footer .footer-nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px 28px;
}
#site-footer .footer-copy { margin: 0; }
#site-footer .foot-crafted {
  margin: 0;
  width: 100%;
  padding-top: 20px;
  border-top: 1px solid rgba(201, 169, 106, 0.35);
  text-align: center;
}

/* Phones: same sides, links stack as 44px rows on the right. */
@media (max-width: 600px) {
  #site-footer {
    padding-bottom: calc(32px + env(safe-area-inset-bottom));
  }
  #site-footer .footer-main { align-items: flex-start; }
  #site-footer .footer-nav {
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
  }
  #site-footer .footer-nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}

/* Landscape phones with a notch: keep the top-right logo clear of it.
   (env() is 0 everywhere else, so this changes nothing on other screens.) */
body > #site-logo,
#top-controls {
  margin-right: env(safe-area-inset-right, 0px);
}

/* Touch screens: a brief press-in replaces the hover lift on cards. */
@media (hover: none) {
  .nav-card:active,
  .article-card:active,
  .about-social-link:active,
  .panel-patra-link:active,
  .bh-scroll:active {
    transform: scale(0.98);
  }
}

/* Touch screens wider than a phone (tablets, landscape phones): keep the
   footer and pill links at a 44px hit height without changing the layout. */
@media (pointer: coarse) {
  .footer-nav { gap: 0; }
  .footer-nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}
@media (pointer: coarse) and (min-width: 901px) {
  #page-nav { padding-top: 0; padding-bottom: 0; }
  .page-nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}