/* ===================================================================
   MOBILE + TABLET BOTTOM NAV  (≤1024px only)
   -------------------------------------------------------------------
   A native-app style bar fixed to the bottom, with a raised centre Home
   button and two slide-up sheets (Menu = the footer's links + contact,
   Social = the footer's social links). Desktop is untouched: everything
   here is display:none at ≥1025px, and the real <footer> is hidden below
   1025px. See components/BottomNav.tsx for why nothing here is new data.
   =================================================================== */

.sp-bottom-nav,
.sp-bn-scrim,
.sp-bn-sheet {
  display: none;
}

@media (max-width: 1024px) {
  /*
   * The footer is SHOWN on mobile again (requested).
   *
   * It was `display: none` here because its links and contact block are also
   * reachable from the Menu sheet, so the bar made it redundant. But a footer
   * is not only navigation: it is where a reader looks for the masthead, the
   * address, the copyright and the "who runs this" signals, and a page that
   * simply ends mid-feed reads as unfinished. The duplication with the Menu
   * sheet is accepted deliberately — the sheet is a shortcut, the footer is the
   * end of the document.
   *
   * Tightened for the small screen: the desktop footer's 56px top margin and
   * wide column gaps are far too generous stacked into one column.
   */
  .sp-footer {
    margin-top: 28px;
    font-size: 14px;
  }

  .sp-footer-col h3 {
    margin-bottom: 12px;
  }

  /* Give the feed AND the footer room so nothing sits under the fixed bar. */
  .layout-wrapper {
    padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px));
  }

  /* Lift the back-to-top button above the bar. */
  .scroll-to-top {
    bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ---------------- the bar ---------------- */
  .sp-bottom-nav {
    display: flex;
    align-items: center;
    /* 5 items (मेन्यू · संपर्क · Home · YouTube · सोशल) share the width evenly;
       the raised Home is the middle one. */
    justify-content: space-between;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(62px + env(safe-area-inset-bottom, 0px));
    padding: 0 4px env(safe-area-inset-bottom, 0px);
    background: #ffffff;
    border-top: 1px solid #ececf0;
    box-shadow: 0 -6px 22px rgba(17, 24, 34, 0.08);
    z-index: 1000;
  }

  .sp-bn-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    border: none;
    background: none;
    padding: 6px 4px;
    /* #565e64, not the lighter greys: the 11px label needs a clear AA margin
       (this is ~6.6:1 on white; #6c757d sat at a borderline 4.69 and axe
       flagged it). */
    color: #565e64;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s ease, transform 0.1s ease;
  }

  /* YouTube button — branded red so it clearly reads as "join the channel".
     The icon keeps the bright YouTube red; the LABEL uses a slightly darker red
     so the 11px text clears the contrast bar. */
  .sp-bn-yt .sp-bn-ico {
    color: #ff0000;
  }

  .sp-bn-yt .sp-bn-label {
    color: var(--sp-accent);
  }

  .sp-bn-yt:active {
    transform: scale(0.9);
  }

  .sp-bn-ico {
    display: inline-flex;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .sp-bn-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
  }

  /* press feedback + active (sheet open) state */
  .sp-bn-item:active {
    transform: scale(0.9);
  }

  .sp-bn-item:active .sp-bn-ico,
  .sp-bn-item.is-active .sp-bn-ico {
    transform: translateY(-2px) scale(1.12);
  }

  .sp-bn-item.is-active {
    color: var(--sp-accent);
  }

  /* ---------------- raised centre Home ---------------- */
  .sp-bn-home {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-top: -26px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff2b2b, var(--sp-accent));
    color: #fff;
    border: 4px solid #fff;
    box-shadow: 0 8px 20px rgba(217, 0, 0, 0.4);
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .sp-bn-home:active {
    transform: scale(0.9);
  }

  /* Kill the browser's blue focus ring on TAP/CLICK (touch + mouse), which
     lingered on the Home button after navigating. `:focus-visible` still fires
     for keyboard users, so this keeps that ring only where it aids
     accessibility. Applies to the two bar buttons too. */
  .sp-bn-home:focus,
  .sp-bn-item:focus {
    outline: none;
  }

  .sp-bn-home:focus:not(:focus-visible),
  .sp-bn-item:focus:not(:focus-visible) {
    outline: none;
  }

  .sp-bn-home:focus-visible,
  .sp-bn-item:focus-visible {
    outline: 2px solid var(--sp-accent);
    outline-offset: 2px;
  }

  /* Keep the Home link white in EVERY state. Without this the browser's
     default link colour (:visited / :active / focus = blue) reached the SVG
     through `fill="currentColor"` and the icon flashed blue after a tap. The
     explicit `fill` also wins over the currentColor attribute outright, so the
     glyph is white no matter what `color` resolves to. */
  .sp-bn-home,
  .sp-bn-home:link,
  .sp-bn-home:visited,
  .sp-bn-home:hover,
  .sp-bn-home:focus,
  .sp-bn-home:active {
    color: #fff;
  }

  .sp-bn-home svg {
    fill: #fff;
  }

  /* a soft pulse ring so the centre reads as the primary action */
  .sp-bn-home-ring {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(217, 0, 0, 0.45);
    animation: sp-bn-pulse 2.4s ease-out infinite;
  }

  @keyframes sp-bn-pulse {
    0% {
      transform: scale(1);
      opacity: 0.6;
    }
    70% {
      transform: scale(1.45);
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .sp-bn-home-ring {
      animation: none;
    }
  }

  /* ---------------- backdrop ---------------- */
  .sp-bn-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(10, 15, 22, 0.5);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1050;
  }

  .sp-bn-scrim.is-open {
    opacity: 1;
    visibility: visible;
  }

  /* ---------------- slide-up sheet ---------------- */
  .sp-bn-sheet {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 82vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 22px 22px 0 0;
    padding: 10px 20px calc(24px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -10px 40px rgba(10, 15, 22, 0.25);
    transform: translateY(100%);
    /* springy ease-out so it settles like a native sheet */
    transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1060;
  }

  .sp-bn-sheet.is-open {
    transform: translateY(0);
  }

  /* grab handle */
  .sp-bn-grab {
    display: block;
    width: 42px;
    height: 5px;
    margin: 2px auto 12px;
    border-radius: 3px;
    background: #d9dee4;
  }

  .sp-bn-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
  }

  .sp-bn-sheet-title {
    font-size: 18px;
    font-weight: 700;
    color: #14181d;
  }

  .sp-bn-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: #f1f3f5;
    color: #5a626b;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
  }

  .sp-bn-close:active {
    transform: scale(0.88);
    background: #e7eaee;
  }

  /* --- staggered reveal of the sheet contents --- */
  .sp-bn-sheet-body > *,
  .sp-bn-social > * {
    opacity: 0;
    transform: translateY(12px);
  }

  .sp-bn-sheet.is-open .sp-bn-sheet-body > *,
  .sp-bn-sheet.is-open .sp-bn-social > * {
    animation: sp-bn-rise 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  .sp-bn-sheet.is-open .sp-bn-sheet-body > *:nth-child(1),
  .sp-bn-sheet.is-open .sp-bn-social > *:nth-child(1) { animation-delay: 0.06s; }
  .sp-bn-sheet.is-open .sp-bn-sheet-body > *:nth-child(2),
  .sp-bn-sheet.is-open .sp-bn-social > *:nth-child(2) { animation-delay: 0.11s; }
  .sp-bn-sheet.is-open .sp-bn-sheet-body > *:nth-child(3),
  .sp-bn-sheet.is-open .sp-bn-social > *:nth-child(3) { animation-delay: 0.16s; }
  .sp-bn-sheet.is-open .sp-bn-sheet-body > *:nth-child(4) { animation-delay: 0.21s; }

  @keyframes sp-bn-rise {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .sp-bn-sheet-body > *,
    .sp-bn-social > * {
      opacity: 1;
      transform: none;
      animation: none !important;
    }
  }

  /* --- menu sheet content --- */
  .sp-bn-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eef0f3;
    margin-bottom: 16px;
  }

  .sp-bn-brand img {
    height: 42px;
    width: auto;
  }

  .sp-bn-tagline {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--sp-accent);
  }

  .sp-bn-groups {
    display: block;
    margin-bottom: 4px;
  }

  /* ---- contact row inside the menu sheet (moved off the bar) ---- */
  .sp-bn-menu-row {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    margin-top: 6px;
    padding: 13px 14px;
    border: 1px solid var(--sp-line, rgba(255, 255, 255, 0.09));
    border-radius: 12px;
    background: transparent;
    color: inherit;
    font-size: 14.5px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
  }

  .sp-bn-menu-row-ic {
    display: inline-flex;
    color: var(--sp-accent);
    flex: 0 0 auto;
  }

  .sp-bn-menu-row-txt {
    flex: 1 1 auto;
  }

  .sp-bn-menu-row-arrow {
    display: inline-flex;
    opacity: 0.5;
    flex: 0 0 auto;
  }

  /* ---- settings sheet ---- */
  .sp-bn-settings {
    padding: 4px 16px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .sp-bn-set-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--sp-line, rgba(255, 255, 255, 0.09));
    border-radius: 12px;
  }

  .sp-bn-set-txt {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
  }

  .sp-bn-set-label {
    font-size: 14.5px;
    font-weight: 700;
  }

  /* The hint is what makes this a settings screen rather than two bare
     controls: it says what the control does AND that the choice is remembered,
     which is the part a reader has no other way to discover. */
  .sp-bn-set-hint {
    font-size: 12px;
    line-height: 1.45;
    opacity: 0.62;
  }

  /* The control carries its own "टेक्स्ट" label for when it is used outside a
     labelled row. Inside the settings sheet the row heading already says
     "टेक्स्ट का आकार", so the label repeats it and steals width from the
     buttons on a 390px screen. */
  .sp-bn-settings .sp-textsize-label {
    display: none;
  }

  /* Same reason: the theme row is labelled, so the toggle just needs to be a
     toggle — not a bare icon floating at the end of the row. */
  .sp-bn-set-row .sp-nav-toggle {
    flex: 0 0 auto;
    width: 46px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--sp-line, rgba(255, 255, 255, 0.09));
    border-radius: 999px;
    background: transparent;
  }

  /* section headings get a small red accent bar */
  .sp-bn-group h4,
  .sp-bn-contact h4 {
    position: relative;
    margin: 0 0 10px;
    padding-left: 11px;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #6b7480;
  }

  .sp-bn-group h4::before,
  .sp-bn-contact h4::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    bottom: 1px;
    width: 3px;
    border-radius: 2px;
    background: var(--sp-accent);
  }

  /* category links → rounded chips that wrap under the heading */
  .sp-bn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
  }

  .sp-bn-group h4 {
    flex-basis: 100%;
  }

  .sp-bn-group a {
    padding: 8px 15px;
    border-radius: 999px;
    background: #f4f5f7;
    border: 1px solid #ececf0;
    font-size: 14px;
    font-weight: 600;
    color: #23292f;
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  }

  .sp-bn-group a:active {
    background: #fff0f0;
    border-color: #f3c6c6;
    color: var(--sp-accent);
  }

  /* अर्थ-व्यापार — NOT a capsule. A premium gradient TILE: rounded-rect, a
     graph-up glyph in a frosted badge, a top gloss and an outer glow, so it
     reads as a featured item, clearly apart from the plain grey pill chips. */
  .sp-bn-group a.sp-bn-chip-pill {
    --sp-pill-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M0 0h1v15h15v1H0zm10 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4.9l-3.613 4.417a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61L13.445 4H10.5a.5.5 0 0 1-.5-.5'/%3E%3C/svg%3E");
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, #ff315a 0%, #d1002f 55%, #a8002a 100%);
    border: none;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.2px;
    overflow: hidden;
    box-shadow: 0 7px 20px rgba(217, 0, 40, 0.42),
      inset 0 1px 0 rgba(255, 255, 255, 0.28);
  }

  /* white graph glyph */
  .sp-bn-group a.sp-bn-chip-pill::before {
    content: "";
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    background: #fff;
    -webkit-mask: var(--sp-pill-ico) center / contain no-repeat;
    mask: var(--sp-pill-ico) center / contain no-repeat;
  }

  /* top gloss */
  .sp-bn-group a.sp-bn-chip-pill::after {
    content: "";
    position: absolute;
    inset: 0 0 45% 0;
    background: linear-gradient(
      rgba(255, 255, 255, 0.22),
      rgba(255, 255, 255, 0)
    );
    pointer-events: none;
  }

  .sp-bn-group a.sp-bn-chip-pill:active {
    color: #fff;
    transform: scale(0.97);
  }

  /* contact rows with a red icon disc */
  .sp-bn-contact {
    padding-top: 16px;
    border-top: 1px solid #eef0f3;
  }

  .sp-bn-contact-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: #48505a;
    text-decoration: none;
  }

  .sp-bn-contact-row svg {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    padding: 9px;
    border-radius: 50%;
    background: #fdecec;
    color: var(--sp-accent);
    box-sizing: border-box;
  }

  a.sp-bn-contact-row:active {
    color: var(--sp-accent);
  }

  a.sp-bn-contact-row:active svg {
    background: var(--sp-accent);
    color: #fff;
  }

  .sp-bn-copy {
    margin: 16px 0 0;
    font-size: 11.5px;
    color: #9aa2ac;
    text-align: center;
  }

  /* --- contact sheet content (its own card design, distinct from the menu) --- */
  .sp-bn-ct-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 4px;
  }

  .sp-bn-ct-card {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 14px;
    border-radius: 15px;
    background: #f6f7f9;
    border: 1px solid #ececf0;
    text-decoration: none;
    transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .sp-bn-ct-card:active {
    transform: scale(0.99);
    border-color: #f3c6c6;
    box-shadow: 0 4px 14px rgba(217, 0, 40, 0.12);
  }

  /* gradient icon tile */
  .sp-bn-ct-ic {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: linear-gradient(135deg, #ff4d68, #d1002f);
    color: #fff;
    box-shadow: 0 4px 12px rgba(217, 0, 40, 0.3);
  }

  .sp-bn-ct-card.is-yt .sp-bn-ct-ic {
    background: linear-gradient(135deg, #ff5b5b, #e00000);
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.32);
  }

  .sp-bn-ct-txt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .sp-bn-ct-label {
    font-size: 11.5px;
    font-weight: 600;
    color: #9aa2ac;
    letter-spacing: 0.2px;
  }

  .sp-bn-ct-val {
    font-size: 14px;
    font-weight: 600;
    color: #23292f;
    line-height: 1.4;
  }

  /* --- social sheet content --- */
  .sp-bn-social {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 8px 0 6px;
  }

  /* Each channel is a card: a brand-coloured icon disc, the name, and a small
     call to action. */
  .sp-bn-social-btn {
    flex: 1 1 0;
    max-width: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 18px 8px 14px;
    border-radius: 18px;
    background: #f7f8fa;
    border: 1px solid #ececf0;
    text-decoration: none;
    transition: transform 0.16s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  }

  .sp-bn-social-btn:active {
    transform: scale(0.96);
  }

  /* brand-coloured icon disc, white glyph */
  .sp-bn-social-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    color: #fff;
    font-size: 25px;
    box-shadow: 0 4px 12px rgba(20, 24, 29, 0.16);
  }

  .sp-bn-social-btn.is-fb .sp-bn-social-ic {
    background: linear-gradient(135deg, #2a8bff, #0a5fd6);
    box-shadow: 0 4px 14px rgba(24, 119, 242, 0.42);
  }
  .sp-bn-social-btn.is-x .sp-bn-social-ic {
    background: linear-gradient(135deg, #333, #000);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  }
  .sp-bn-social-btn.is-yt .sp-bn-social-ic {
    background: linear-gradient(135deg, #ff5b5b, #e00000);
    box-shadow: 0 4px 14px rgba(255, 0, 0, 0.4);
  }

  .sp-bn-social-name {
    font-size: 14px;
    font-weight: 700;
    color: #14181d;
    line-height: 1;
  }

  .sp-bn-social-cta {
    font-size: 11px;
    font-weight: 600;
    color: #8a929c;
    line-height: 1;
  }

  /* press lifts the card and tints its border to the brand colour */
  .sp-bn-social-btn.is-fb:active {
    border-color: #2a8bff;
    box-shadow: 0 8px 18px rgba(24, 119, 242, 0.22);
  }
  .sp-bn-social-btn.is-x:active {
    border-color: #000;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
  }
  .sp-bn-social-btn.is-yt:active {
    border-color: #ff0000;
    box-shadow: 0 8px 18px rgba(255, 0, 0, 0.22);
  }

  /* ---------------- dark mode ---------------- */
  .dark-mode .sp-bottom-nav {
    background: #14181d;
    border-top-color: #262c34;
  }

  .dark-mode .sp-bn-home {
    border-color: #14181d;
  }

  /* In dark mode the bar flips to #14181d, so the light-mode label greys (2.69:1)
     and the YouTube red (3.35:1) no longer clear WCAG AA. Lighten both for the
     dark surface. */
  .dark-mode .sp-bn-item {
    color: #a4acb6;
  }

  .dark-mode .sp-bn-yt .sp-bn-label {
    color: #ff6b6b;
  }

  .dark-mode .sp-bn-sheet {
    background: #171b21;
  }

  .dark-mode .sp-bn-sheet-title {
    color: #e6e9ed;
  }

  .dark-mode .sp-bn-close {
    background: #262c34;
    color: #b7bec6;
  }

  /* chips */
  .dark-mode .sp-bn-group a {
    background: #1f242b;
    border-color: #2d343c;
    color: #e6e9ed;
  }

  .dark-mode .sp-bn-brand,
  .dark-mode .sp-bn-contact {
    border-color: #262c34;
  }

  .dark-mode .sp-bn-contact-row {
    color: #aab3bd;
  }

  .dark-mode .sp-bn-contact-row svg {
    background: #2a1416;
  }

  .dark-mode .sp-bn-social-btn {
    background: #1f242b;
    border-color: #2d343c;
  }

  .dark-mode .sp-bn-social-name {
    color: #e6e9ed;
  }

  .dark-mode .sp-bn-ct-card {
    background: #1f242b;
    border-color: #2d343c;
  }

  .dark-mode .sp-bn-ct-val {
    color: #e6e9ed;
  }
}