/* ============================================================
   RESPONSIVE PATCH — append this AFTER responsive.css
   Fixes gaps found during review; does not duplicate rules
   that already exist and work in responsive.css
   ============================================================ */

/* ------------------------------------------------------------
   1) NESTED DROPDOWN OVERFLOW ON TABLETS
   Bug: the navbar collapses to a vertical mobile menu below
   992px (Bootstrap's lg breakpoint), but the fix that turns
   nested dropdown-submenus into a stacked/static list only
   kicked in at 576px. Between 577px–991px a submenu still
   tried to fly out to the side (`left:100%`) and could push
   off-screen / get clipped on tablets.
   ------------------------------------------------------------ */
@media (max-width: 991.98px) {
  .navbar-duvasu .dropdown-submenu > .dropdown-menu {
    position: static;
    left: auto;
    top: auto;
    margin: 4px 0 4px 16px;
    width: calc(100% - 16px);
    min-width: 0;
    max-width: none;
    box-shadow: none;
    border-top: none;
    border-left: 2px solid var(--gold);
  }

  .navbar-duvasu .dropdown-menu {
    width: 100%;
    min-width: 0;
    max-width: 100vw;
  }
}

/* ------------------------------------------------------------
   2) "IMPORTANT WEBSITES" CAROUSEL ROW
   Bug: each logo sits in a bare Bootstrap `.col` with no
   responsive sizing, so on phones with several logos per
   slide they get squeezed into tiny slivers instead of
   wrapping or scrolling.
   ------------------------------------------------------------ */

#importantWebsiteCarousel .row > .col {
  flex: 0 0 auto;
  width: 20%;
  max-width: 20%;
  padding: 0 10px;
}

@media (max-width: 991px) {
  #importantWebsiteCarousel .row > .col { width: 33.33%; max-width: 33.33%; }
}

@media (max-width: 576px) {
  #importantWebsiteCarousel .row > .col {
    width: 33.33%;
    max-width: 33.33%;
    padding: 0 6px;
  }
  .website-logo { max-height: 46px; }
}

/* No max-width: 360px override — 3-per-row holds all the way down */
/* ------------------------------------------------------------
   3) ABOUT SECTION IMAGE — fixed 320px height reads oversized
   once the column stacks to full width on phones.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  .about-image img { height: 220px; }
}
@media (max-width: 480px) {
  .about-image img { height: 180px; }
}

/* ------------------------------------------------------------
   4) LEADERSHIP (CHANCELLERY) BLOCK — the existing 860px
   breakpoint stacks photo/text nicely, but the oversized
   serif quote mark and drop-cap first letter are still full
   desktop size on small phones and crowd the name/role lines.
   ------------------------------------------------------------ */
@media (max-width: 480px) {
  .quote-mark { font-size: 2.2rem; }
  .name-line { font-size: 1.5rem; }
  .lead-line { font-size: 1.2rem; }
  .plaque { width: 160px; }
  .entry-body p.copy:first-of-type::first-letter { font-size: 2.4rem; }
}

/* ------------------------------------------------------------
   5) FOOTER FOUNDER CAPTION — wide letter-spacing on a narrow
   column can force the name to wrap awkwardly mid-word.
   ------------------------------------------------------------ */
@media (max-width: 576px) {
  .footer-founder { flex-wrap: wrap; }
  .footer-founder-caption strong {
    font-size: 17px;
    letter-spacing: 1.5px;
  }
}

/* ------------------------------------------------------------
   6) VISITOR COUNTER BOX — keep it from overflowing its
   column on very narrow phones.
   ------------------------------------------------------------ */
@media (max-width: 400px) {
  .visitor-highlight-box {
    padding: 12px 18px;
    gap: 10px;
  }
  .visitor-highlight-count { font-size: 22px; }
}

/* ------------------------------------------------------------
   7) FEEDBACK FORM CARD — reduce padding on phones so the
   inputs aren't squeezed against the card edge.
   ------------------------------------------------------------ */
@media (max-width: 576px) {
  .feedback-form-card { padding: 18px; }
  .feedback-contact-note { padding: 12px 14px; }
}

/* ------------------------------------------------------------
   8) HERO LETTERHEAD RIBBON — protect the paw icon from
   shrinking and guarantee the long institution name still
   truncates cleanly at very narrow widths.
   ------------------------------------------------------------ */
@media (max-width: 480px) {
  .hero-letterhead {
    padding: 8px 14px;
    gap: 10px;
  }
  .hero-letterhead-mark {
    width: 22px;
    height: 22px;
    font-size: 10px;
  }
  .hero-letterhead-text { font-size: 10px; }
}

/* ------------------------------------------------------------
   9) TOPBAR ROW ORDER ON MOBILE
   The topbar uses Bootstrap's grid (col-md-2 / col-md-6 /
   col-md-4), which stacks fine below 768px, but social icons,
   the menu, and language/font controls stack in source order
   (social → menu → controls). On mobile it reads better with
   controls (language/font) surfaced right under the social
   row rather than after a long link list.
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {
  .topbar .row { text-align: center; }
  .topbar .col-md-6 { order: 3; margin-top: 6px; }
  .topbar .col-md-4 { order: 2; justify-content: center !important; }
  .topbar .col-md-2 { order: 1; justify-content: center !important; }
}

/* ------------------------------------------------------------
   10) SIDE TABS ON TABLET (768px–991px)
   Already hidden below 768px. On the tablet band they're
   still fixed at the very edge and can sit on top of narrow
   content columns; nudge them fully off content and shrink
   the label so they don't overlap the reading column.
   ------------------------------------------------------------ */
@media (min-width: 768px) and (max-width: 991.98px) {
  .side-tab-label { font-size: 12px; padding: 8px 5px; }
  .side-tab-panel { width: 190px; }
}