/* Shared structural styles for the fixed header and seasonal banners.
   Theme stylesheets provide colour and atmosphere; this file keeps the shell
   usable at every viewport size. */

:root {
  --site-navbar-offset: 3.75rem;
}

html {
  overflow-x: hidden;
}

body {
  overflow-x: clip;
}

.wrapper {
  min-width: 0;
  min-height: 100dvh !important;
  margin-top: 0 !important;
  padding-top: var(--site-navbar-offset);
  box-sizing: border-box;
}

.navbar,
.navbar .container,
.navbar-collapse,
.navbar-primary,
.navbar-actions {
  min-width: 0;
}

.navbar {
  z-index: 1040;
}

.navbar .navbar-brand {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navbar-primary .nav-link {
  white-space: nowrap;
}

.navbar-login {
  flex: 0 0 auto;
  white-space: nowrap !important;
}

.navbar-actions {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 0.75rem;
}

.navbar-actions > *,
.navbar-language,
.navbar-user {
  min-width: 0;
}

.navbar-language-form {
  flex: 0 1 auto;
}

.navbar-language__toggle,
.navbar-user__toggle {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
}

.navbar-language__toggle {
  max-width: 10rem;
}

.navbar-user {
  flex: 0 1 auto;
  width: auto;
  max-width: 18rem;
}

.navbar-user__toggle {
  width: auto;
  max-width: 18rem;
}

/* Bootstrap fills outline buttons solid white on hover/open. Keep navbar
   dropdown toggles inside each non-monsoon theme's palette instead. */
body[data-theme="default"] {
  --navbar-dropdown-accent-rgb: 254, 189, 89;
  --navbar-dropdown-control-color: #ffe0a8;
}

body[data-theme="christmas"] {
  --navbar-dropdown-accent-rgb: 245, 215, 110;
  --navbar-dropdown-control-color: #fff2bd;
}

body[data-theme="halloween"] {
  --navbar-dropdown-accent-rgb: 255, 117, 24;
  --navbar-dropdown-control-color: #ffb65c;
}

body[data-theme="summer"] {
  --navbar-dropdown-accent-rgb: 245, 200, 66;
  --navbar-dropdown-control-color: #fff4ba;
}

:is(
  body[data-theme="default"],
  body[data-theme="christmas"],
  body[data-theme="halloween"],
  body[data-theme="summer"]
) .navbar :is(#languageDropdown, #userDropdown):is(
  :hover,
  :focus,
  :active,
  .show,
  [aria-expanded="true"]
) {
  color: var(--navbar-dropdown-control-color) !important;
  background-color: rgba(var(--navbar-dropdown-accent-rgb), 0.14) !important;
  border-color: rgba(var(--navbar-dropdown-accent-rgb), 0.72) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--navbar-dropdown-accent-rgb), 0.1) !important;
}

.navbar-language__name,
.navbar-user__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navbar-language__toggle > i,
.navbar-user__toggle > i,
.navbar-language__toggle::after,
.navbar-user__toggle::after {
  flex: 0 0 auto;
}

.navbar .dropdown-menu {
  max-width: min(22rem, calc(100vw - 1rem));
}

.navbar .dropdown-item {
  overflow-wrap: anywhere;
  white-space: normal;
}

.notif-bell {
  flex: 0 0 auto;
}

.notif-dropdown {
  width: min(310px, calc(100vw - 1rem)) !important;
  max-height: calc(100dvh - 1rem);
}

.notif-dropdown ul {
  max-height: min(280px, calc(100dvh - 7rem)) !important;
}

.theme-banner {
  margin: 0 !important;
  padding: clamp(0.7rem, 1.8vw, 0.9rem) clamp(1rem, 4vw, 2rem) !important;
  overflow-wrap: anywhere;
  font-size: clamp(0.9rem, 1.3vw, 1.15rem) !important;
  line-height: 1.55;
}

.theme-banner p {
  width: min(100%, 72rem);
  margin: 0 auto !important;
}

/* Decorative layers stay above page content but below navigation and dialogs. */
.halloween-web,
.halloween-bat,
.halloween-spider {
  z-index: 1020 !important;
}

/* Bootstrap's expanded navbar becomes crowded well before desktop content does.
   Collapse it through the tablet range, then present a roomy, scroll-safe menu. */
@media (max-width: 1399.98px) {
  .navbar-collapse {
    max-height: calc(100dvh - var(--site-navbar-offset));
    padding: 0.75rem 0 1rem;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .navbar-primary {
    width: 100%;
    margin: 0 !important;
  }

  .navbar-primary .nav-link {
    padding: 0.6rem 0.75rem !important;
    border-radius: 0.4rem;
  }

  .navbar-actions {
    width: 100%;
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    flex-wrap: wrap;
  }

  .navbar-user {
    flex: 0 1 auto;
    width: auto;
    max-width: min(18rem, 100%);
  }

  .navbar-user__toggle {
    width: auto;
    max-width: 18rem;
  }

  /* Keep dropdowns inside the expanded mobile menu. Popper's end alignment
     otherwise pushes the language options left and the collapse clips them. */
  .navbar-collapse .navbar-actions .dropdown-menu {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    margin-top: 0.5rem;
  }
}

@media (max-width: 1199.98px) {
  .navbar-user {
    max-width: min(13rem, 100%);
  }

  .navbar-user__toggle {
    max-width: 13rem;
  }
}

@media (max-width: 991.98px) {
  .navbar-user {
    flex-basis: 11rem;
    width: min(11rem, 100%);
    max-width: 11rem;
  }

  .navbar-user__toggle {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 575.98px) {
  .navbar .container {
    column-gap: 0.35rem;
  }

  .navbar .navbar-brand {
    margin-right: auto;
  }

  .navbar-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .navbar-actions > *,
  .navbar-actions .dropdown,
  .navbar-actions .btn,
  .navbar-language-form,
  .navbar-user {
    width: 100%;
    max-width: none;
  }

  .navbar .dropdown-menu {
    width: 100%;
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-banner,
  .theme-banner p {
    animation: none !important;
  }
}


/* --------------------------------------------------------------------------
   FOOTER LINKS

   The footer is dark on every theme — `footer.bg-dark` with a 50% black wash
   over it — so a link cannot simply use `--bs-link-color`. On the light default
   theme that is a brown that vanishes against the bar.

   Each theme therefore names its *bright* accent here, the one that reads on
   something dark: hunyadi yellow on default, mango on summer, rain blue on
   monsoon. Same approach as the navbar dropdown accents above.
   -------------------------------------------------------------------------- */

:root                        { --footer-link-rgb: 245, 215, 110; }
body[data-theme="default"]   { --footer-link-rgb: 254, 189, 89; }   /* hunyadi yellow */
body[data-theme="christmas"] { --footer-link-rgb: 245, 215, 110; }  /* hunyadi yellow */
body[data-theme="halloween"] { --footer-link-rgb: 255, 182, 92; }   /* candle flame   */
body[data-theme="summer"]    { --footer-link-rgb: 245, 200, 66; }   /* mango yellow   */
body[data-theme="monsoon"]   { --footer-link-rgb: 142, 207, 214; }  /* rain blue      */

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 1.25rem;
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
}

.site-footer__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: rgb(var(--footer-link-rgb));
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--footer-link-rgb), 0);
  transition: border-color 0.18s ease, opacity 0.18s ease;
}

.site-footer__link:hover,
.site-footer__link:focus-visible {
  color: rgb(var(--footer-link-rgb));
  border-bottom-color: rgba(var(--footer-link-rgb), 0.65);
  outline: none;
}

/* Small "live" marker on the home page's Happening Now rows. Themed from
   Bootstrap variables so it follows whichever stylesheet is active. */
.home-live-pill {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.4rem;
  padding: 0.15rem 0.6rem;
  border: 1px solid rgba(var(--bs-primary-rgb), 0.55);
  border-radius: 999px;
  background-color: rgba(var(--bs-primary-rgb), 0.16);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.home-live-pill__dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background-color: currentColor;
  animation: homeLivePulse 1.8s ease-out infinite;
}

@keyframes homeLivePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .home-live-pill__dot {
    animation: none !important;
  }
}

/* Weekly picks on the home page. Built from Bootstrap variables like the
   rest of the home page, so it follows whichever theme is active without
   loading works.css. The picture sits on the dark theme surface and is
   contained rather than cropped — prompt pictures often carry words. */
.home-weekly__picture {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 260px;
  padding: 1rem;
  background-color: rgba(var(--bs-dark-rgb), 0.92);
  text-decoration: none;
}

.home-weekly__picture img {
  display: block;
  max-width: 100%;
  max-height: 400px;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: transform 0.4s ease;
}

.home-weekly__picture:hover img { transform: scale(1.02); }

/* No picture: the prompt's own words stand in for it */
.home-weekly__prompt {
  font-family: var(--bs-heading-font-family, Georgia, serif);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.6;
  text-align: center;
  color: #fdf6e3;
}

.home-weekly__title { color: inherit; text-decoration: none; }
.home-weekly__title:hover { text-decoration: underline; }

.home-weekly__prompt-line { font-style: italic; }

.home-weekly__works li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  padding: 0.45rem 0;
  border-bottom: 1px dashed rgba(var(--bs-primary-rgb), 0.25);
}

.home-weekly__works li:last-child { border-bottom: 0; }

.home-weekly__work { text-decoration: none; }
.home-weekly__work:hover .home-weekly__work-title { text-decoration: underline; }
.home-weekly__work-title { font-weight: 600; }

.home-weekly__tag {
  flex: 0 0 auto;
  padding: 0.1rem 0.55rem;
  border: 1px solid rgba(var(--bs-primary-rgb), 0.45);
  border-radius: 999px;
  background-color: rgba(var(--bs-primary-rgb), 0.1);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Devanagari has no capitals, and tracking tears its conjuncts apart */
html[lang="hi"] .home-weekly__tag,
.home-weekly__tag [lang="hi"],
.home-weekly__work-title[lang="hi"] {
  letter-spacing: normal;
  text-transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .home-weekly__picture img { transition: none; }
  .home-weekly__picture:hover img { transform: none; }
}

/* "This week's prompt is in the Writers' Café" — on the home page and the
   weekly picks pages (works.css retunes it to that palette). */
.cafe-note {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid rgba(var(--bs-primary-rgb), 0.3);
  border-radius: 10px;
  background-color: rgba(var(--bs-primary-rgb), 0.07);
}

.cafe-note__icon {
  flex: 0 0 auto;
  font-size: 1.35rem;
  color: #25d366;
}

.cafe-note__text {
  flex: 1 1 16rem;
  margin: 0;
  font-size: 0.92rem;
}

.cafe-note__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  padding: 0.3rem 0.85rem;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid currentColor;
  border-radius: 999px;
}

.cafe-note__link i { font-size: 0.75em; }