/* Static-site additions: mobile nav toggle states + custom hero slider + ticker/search states */

/* ============================================================
 * Original site customizations.
 *
 * These were two separate inline <style> blocks (WordPress Customizer's "Additional CSS"
 * panel, plus a small color/font block) that used to be duplicated in every single page's
 * <head> -- moved here once instead. Colors below are the site's original ones; later
 * rules further up this file already override the ones that changed (blue/red theme, etc.)
 * via !important, so nothing here needs to be hand-edited to match.
 * ============================================================ */

.banner-slider:before {
  content: '';
  background-color: rgba(0, 0, 0, 0.8);
}
.title-sec h2:after,
.post-categories li a,
.gm-slider .slick-arrow,
.header-inner.layout2 button.hamburger.hamburger_nb {
  background-color: #4169e1;
}
a:focus, a:hover,
.breadcrumbs .trail-items li a:hover, .recent-post-list .list-content h4 a:hover,
.top-social-icon li a:hover,
ul.newsticker li a:hover,
.header-inner.layout2 .top-social-icon li a:hover,
.header-inner.withbg .main_navigation ul li a:hover,
.ticker-label i,
.copy-content a:hover {
  color: #4169e1;
}
.search-icon .search-form #submit {
  background: #4169e1;
}

.header-top-block {
  background: lightblue;
}
.current-date {
  display: none;
}
#widget_ndc_today-3 .widget-heading {
  display: none;
}
#widget_ndc_today-3 .nep-to-eng {
  float: left;
  margin-right: 2rem;
  margin-top: 0;
}
#widget_ndc_today-3 .eng-to-nep {
  float: left;
  margin-top: 0;
}
@media only screen and (max-width: 992px) {
  .header-top-block .container .row div {
    justify-items: center;
  }
  .primary-menu {
    background-color: #4169e1;
  }
}
.logo-area {
  text-align: center;
}
.logo-sec .top-client-area.widget.widget_text .widget-heading {
  background: white;
  color: black;
  padding: 0;
  margin: 0;
}
.logo-sec .widget_text.top-client-area.widget.widget_custom_html {
  text-align: center;
}
.logo-sec .top-client-area.widget.widget_text .widget-heading h2 {
  font-size: 4rem;
}
.theiaStickySidebar #media_image-5 {
  text-align: center;
}
.bar-below-menu .ticker-label {
  background: red;
  color: white;
  padding: 0 5px;
}
.bar-below-menu .ticker-label i {
  color: white;
}
#widget_nepali_date_converter-3 .widget-heading {
  text-align: center;
}
.inner-banner {
  display: none;
}
.footer-bg .widget.widget_categories li {
  background: white;
  color: black;
}
.footer-bg .widget.widget_categories li a {
  background: white;
  color: black;
}
.footer-bg #custom_html-7 .textwidget.custom-html-widget a {
  text-decoration: underline;
  color: white;
}

/* Replace the plain "Roboto" body font (set by the site's own customizer CSS) with
   Merriweather for English text -- Nepali/Devanagari text isn't covered by Merriweather's
   glyph set, so the browser falls back to whatever renders it now (unchanged either way). */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400;0,700;1,400&display=swap');
body {
  font-family: 'Merriweather', Roboto, serif !important;
}

/* Category page cards show category-tag + date (both wrapped in .meta) BEFORE the title,
   whereas the homepage's cards show category-tag, then title, then date. Reorder via flex
   (rather than restructuring the HTML across 29 category files) so the date ends up after
   the title, matching the homepage. display:contents on .meta lets its children
   (.post-category-tag and .posted-date) be reordered as if they were direct siblings of .card-title. */
.cate-layout1-bdy-detail {
  display: flex;
  flex-direction: column;
}
.cate-layout1-bdy-detail .meta {
  display: contents;
}
.cate-layout1-bdy-detail .post-category-tag {
  order: 1;
}
.cate-layout1-bdy-detail .card-title {
  order: 2;
}
.cate-layout1-bdy-detail .posted-date {
  order: 3;
}
/* Same gray as the homepage cards (.half-first-bdy .meta .posted-date) -- the theme's
   base .meta .posted-date is white, which is basically invisible on this white page. */
.cate-layout1-bdy-detail .meta .posted-date,
.cate-layout1-bdy-detail .meta .posted-date a {
  color: #999;
}

/* Category page's "Category: X" heading never had any styling for the category name
   itself (checked -- no rule exists anywhere in the theme or our own CSS). Give it the
   same badge treatment as the other titles (RECENT/प्रशासक/सूचना पाटी) for consistency. */
.primary-tt span {
  background-color: #4a6fa5;
  color: #fff;
  padding: 6px 14px;
  display: inline-block;
}

/* Main nav bar + footer background: match the same lighter blue used for the title
   badges (RECENT/प्रशासक/सूचना पाटी/ticker), instead of the theme's original darker
   royal blue (#4169E1) -- covers both the desktop and mobile-specific nav bar rules. */
.primary-menu {
  background-color: #4a6fa5 !important;
}
.footer-bg {
  background-color: #4a6fa5 !important;
}

/* Active "HOME" nav item: the theme's default is a plain dark gray/black
   (rgba(50,50,50,1)) -- use the school's own red instead (sampled from the
   "SHREE JANA BIKASH SECONDARY SCHOOL" text in the header banner image). */
.primary-menu .current-menu-item {
  background-color: #c0392b !important;
}

/* सूचना पाटी notice-board items had zero padding of their own (this class has no rules
   in the theme at all) -- unlike the "Recent"/"प्रशासक" cards, which get an explicit
   padding+border via .half-first-bdy. Match that same breathing room here. */
.half-left-3rd-content {
  padding: 10px 20px 20px !important;
  border-bottom: 1px solid #ddd;
}

/* सूचना पाटी and सूचना अधिकारी: both full-width badges with centered text, matching
   each other, even though they come from two different markup patterns
   (.title-sec/.section-title vs WordPress's generic .widget-heading). */
.half-left-3rd .title-sec .section-title span {
  padding: 6px 14px !important;
  display: block;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}
.half-left-3rd .title-sec .section-title {
  width: 100%;
}
/* .title-sec h2:after draws a decorative line meant to extend to the right of a narrow
   inline-block badge (like "RECENT") -- now that this badge is full-width, that line
   would cut straight through the centered text instead, so drop it here specifically. */
.half-left-3rd .title-sec h2:after {
  display: none;
}
#media_image-5 .widget-heading {
  padding: 6px 14px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}
#media_image-5 .widget-heading h2 {
  display: inline !important;
  text-align: center !important;
  margin: 0;
}

/* "RECENT" was rendering as all-caps even though the actual source text is "Recent" --
   .title-sec .section-title forces text-transform:uppercase on every such title. Nepali titles
   (प्रशासक, सूचना पाटी) aren't letter-cased so this only visibly affects English ones. */
.title-sec .section-title {
  text-transform: none !important;
}

/* Base padding for every .title-sec .section-title span badge (RECENT, प्रशासक, and the
   category pages' "Category: X" heading) -- the theme's own rule only ever set
   padding:0 10px (no vertical padding at all), which looks cramped. This is the general
   desktop fix; .half-left-3rd/.half-widget-layout1 above still override it further where
   those need the full-width treatment. */
.title-sec .section-title span {
  padding: 6px 14px;
}

/* On mobile, "Recent"/"प्रशासक" (the badge + decorative line style) should look like
   सूचना पाटी/सूचना अधिकारी just above -- a full-width centered background instead. */
@media (max-width: 992px) {
  .half-widget-layout1 .title-sec .section-title span {
    padding: 6px 14px !important;
    display: block;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
  .half-widget-layout1 .title-sec .section-title {
    width: 100%;
  }
  .half-widget-layout1 .title-sec h2:after {
    display: none;
  }
}

/* Cards in the same row (e.g. the प्रशासक widget's "Welcome Address" / "Message From
   ChairPerson") use whatever size each source photo happens to be, so the text below
   starts at a different line per card depending on image height. Force every thumbnail
   to the same height and crop (not stretch) to fill it, so the text row lines up. */
.half-first-content .img-hover {
  height: 220px;
}
.half-first-content .img-hover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Footer titles (Contact, Location, Faculty, Useful Links, Tags) were the same 16px as
   their own content, distinguished only by uppercase+bold -- give them real size contrast. */
.footer-bg .widget-heading.footer-widget-heading .widget-heading-text {
  font-size: 22px;
}

/* Give footer titles their own darker-shade background so they stand out against the
   footer's own blue, instead of the theme's transparent (invisible) default. Also drop
   the forced ALL CAPS (from .widget-heading h2's site-wide text-transform:uppercase). */
.footer-bg .widget-heading.footer-widget-heading {
  background-color: #344e73 !important;
  display: inline-block;
  padding: 6px 14px !important;
}
.footer-bg .widget-heading.footer-widget-heading .widget-heading-text {
  text-transform: none !important;
}

/* Remove the underline the site's own customizer CSS puts on the footer "Useful Links",
   at every width -- not scoped to mobile since it applies unconditionally in the theme too. */
.footer-bg #custom_html-7 .textwidget.custom-html-widget a {
  text-decoration: none;
}

/* The theme gives every footer widget a flat 60px bottom margin, which is fine on desktop
   where widgets sit in separate side-by-side columns, but on mobile all 5 widgets
   (Contact, Location, Faculty, Useful Links, Tags) stack into one column and that 60px
   compounds into a huge gap between each. Shrink it there, and add a divider line between
   sections so the tighter spacing still reads as clearly separate blocks. */
@media (max-width: 992px) {
  /* Widgets from different columns stack together on mobile, so :last-child (which only
     sees siblings within the same column) can't reliably tell which is truly the final
     one -- apply the divider to all of them uniformly instead. */
  .footer-bg .widget {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  }
  /* .footer-widget-heading only resets margin-top/background from the base .widget-heading rule --
     it still inherits margin-bottom:30px from that base rule, which is most of the gap
     between each title and its content below. Padding stays (not zeroed) so the title's
     own background box still has breathing room around the text on mobile too. */
  .footer-bg .widget-heading.footer-widget-heading {
    margin-bottom: 8px;
    padding: 6px 12px !important;
  }
}

/* The theme never set a background on <html> itself, only <body> -- on some mobile browsers
   that leaves a sliver of the browser's own default canvas (often black) visible above the
   page before body's white background kicks in. */
html {
  background: #fff;
}

/* Hamburger (opens a redundant off-canvas categories menu) and search button removed entirely --
   not needed: the main nav already exposes every category via its dropdowns. */
button.hamburger.hamburger_nb,
.search-icon {
  display: none !important;
}

/* Mobile toggle bar: "Home" pinned to the left, "Menu" pinned to the right, both via
   explicit absolute positioning (not flex/justify-content -- that approach didn't stick,
   so this uses coordinates directly instead, which can't be fought by anything else). */
@media (max-width: 992px) {
  .header-bottom-block.primary-menu .menu-wrap {
    position: relative !important;
    min-height: 30px;
  }
  .mobile-menu-icon {
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%);
    text-align: right;
    padding: 0 !important;
  }
}

/* Mobile-only "Home" shortcut on the left of the same bar as "Menu" on the right, so users
   don't have to open the dropdown just to get back home. Hidden entirely on desktop, where
   "Home" is already the first item in the main nav. */
.mobile-home-btn {
  display: none;
}
@media (max-width: 992px) {
  .mobile-home-btn {
    display: inline-block;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%);
    color: #fff;
    text-decoration: none;
    font-size: 22px;
    line-height: 1;
  }
}

/* Close button only makes sense inside the mobile slide-in panel below -- hidden on desktop,
   where .main_navigation is a plain horizontal bar and this would otherwise render as a
   stray native <button> box at the start of the menu. */
.mobile-nav-close {
  display: none;
}

/* Mobile nav: slide-in side panel instead of an inline dropdown. The theme's own mobile
   CSS (responsive.css) sets .main_navigation{display:none} and only shows it as a block
   pushed into the page flow -- that grew .menu-wrap's height while open, which dragged the
   absolutely-positioned Home/Menu bar (positioned relative to .menu-wrap) down into the
   middle of the list. Taking the nav out of flow with position:fixed fixes the overlap and
   gives the "opens from the side" behavior in one move. Reuses the theme's existing
   .overlay backdrop (originally wired to the hamburger/off-canvas-categories feature, which
   is disabled above) as the tap-outside-to-close backdrop. */
@media (max-width: 992px) {
  .main_navigation {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    width: 280px;
    max-width: 85vw;
    height: 100vh;
    margin-top: 0;
    padding: 60px 0 30px;
    background: #4a6fa5;
    overflow-y: auto;
    z-index: 1000;
    visibility: hidden;
    transform: translateX(100%);
    transition: transform 0.3s ease, visibility 0s linear 0.3s;
  }
  .main_navigation.nav-open {
    transition: transform 0.3s ease, visibility 0s linear 0s;
    visibility: visible;
    transform: translateX(0);
  }
  .main_navigation ul li.menu-item-has-children .sub-menu.sub-menu-open {
    display: block !important;
  }
  /* Was theme red (#ca0606 / #e41b1b / #1ca8e0) -- match the site's blue/red palette instead. */
  .main_navigation ul li a {
    background-color: transparent;
    color: #fff;
  }
  .main_navigation ul li.menu-item-has-children .sub-menu {
    background: #3a5d8f;
  }
  .main_navigation ul li > ul.sub-menu {
    background: #3a5d8f;
  }
  .main_navigation ul li.current-menu-item > a,
  .main_navigation ul li.current-page-ancestor > a {
    background-color: #c0392b;
  }
  .mobile-nav-close {
    display: block;
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    z-index: 1;
  }
  .overlay.is-visible {
    visibility: visible;
  }
}

/* Center the top-bar menu (Library / बाल क्लब / रेडक्रस) at every width -- the theme only
   floats these items left with no centering rule of its own, on mobile or desktop */
#header_top_bar_navigation {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}
#header_top_bar_navigation ul#menu-top-bar-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

/* Top-bar-menu (Library/बाल क्लब/रेडक्रस) had no active-state style at all -- JS adds
   .current-menu-item to the matching item, so give it a highlight matching the main
   nav's active-page look. */
#header_top_bar_navigation .current-menu-item {
  background-color: #c0392b;
}
#header_top_bar_navigation .current-menu-item a {
  color: #fff;
}

/* Keep Library / बाल क्लब / रेडक्रस on a single line on mobile instead of wrapping --
   shrink font-size/padding so all three comfortably fit a narrow screen, and fall back to
   horizontal scroll rather than wrapping or clipping on the very narrowest devices. */
@media (max-width: 992px) {
  #header_top_bar_navigation,
  #header_top_bar_navigation ul#menu-top-bar-menu {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    justify-content: center;
  }
  #header_top_bar_navigation ul#menu-top-bar-menu li {
    white-space: nowrap;
    flex: 0 0 auto;
  }
  #header_top_bar_navigation ul li a {
    padding: 8px 6px;
    font-size: 12px;
  }
}

/* Center the date + social-icon columns in the top bar on mobile, where they stack full-width */
@media (max-width: 992px) {
  .header-top-block .col-12,
  .header-top-block .col-12 * {
    text-align: center !important;
  }
  /* The date widget's own customizer CSS floats these left, and text-align does nothing
     to floated elements -- same issue as the nav items, same fix: flex instead of float. */
  #widget_ndc_today-3 {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
  #widget_ndc_today-3 .nep-to-eng,
  #widget_ndc_today-3 .eng-to-nep {
    float: none !important;
    margin: 0 1rem !important;
  }
}

/* Center the main nav (Home / ग्यालरी / ... ) at desktop width only -- the theme's own mobile
   layout for this one (below 992px) depends on float:none + full-width stacked li's, and
   forcing flex/center there breaks that stacked mobile menu. */
@media (min-width: 992px) {
  #main_navigation > ul#menu-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
}

#header-search {
  display: none;
}
#header-search.search-open {
  display: block;
}

.ticker-bar {
  display: flex !important;
  align-items: center;
}
.ticker-label {
  flex: 0 0 auto;
  background: #4a6fa5 !important;
}
.ticker-viewport {
  overflow: hidden;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
#webticker {
  display: inline-flex;
  list-style: none;
  margin: 0;
  padding: 0;
  animation: ticker-scroll 30s linear infinite;
  will-change: transform;
}
.ticker-viewport:hover #webticker {
  animation-play-state: paused;
}
#webticker li {
  display: block;
  flex: 0 0 auto;
  padding-right: 50px;
  white-space: nowrap;
}
@keyframes ticker-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Match the scroll-to-top button to the same "lightblue" as the header's top bar,
   instead of the theme's dark gray (#333). The arrow icon was near-white, which is
   almost invisible on lightblue (contrast ~1.4:1) -- darken it for visibility. */
a.scrollup {
  display: none;
  background: lightblue !important;
  color: black !important;
}

/* Homepage hero banner (replaces Smart Slider 3) */
.site-hero-slider {
  position: relative;
  width: 100%;
  height: 450px;
  overflow: hidden;
  background: #000;
}
/* Breathing room between the "Latest" ticker and the hero image right below it on mobile,
   where they'd otherwise sit flush against each other */
@media (max-width: 992px) {
  .site-hero-slider {
    height: 250px;
    margin-top: 15px;
  }
}
/* The 7 source photos have wildly different aspect ratios (most ~4:3, one ~16:9, one a
   ~3.7:1 panorama). Sizing each slide by "height:auto" let the panorama render much
   shorter than the rest, so the banner's height changed every 5s as slides cycled,
   shoving the whole page's content up and down -- felt like the page was auto-scrolling.
   Fixed height + object-fit:cover on every slide keeps the banner's height constant. */
.site-hero-slide {
  display: none;
  width: 100%;
  height: 100%;
}
.site-hero-slide.is-active {
  display: block;
}
.site-hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.site-hero-prev,
.site-hero-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.35);
  border: 0;
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 5;
}
.site-hero-prev {
  left: 15px;
}
.site-hero-next {
  right: 15px;
}
.site-hero-prev:hover,
.site-hero-next:hover {
  background: rgba(0, 0, 0, 0.6);
}

/* Frozen date widget (interactive converter dropped for static site) */
.static-today-date {
  padding: 6px 0;
}

/* Announcement popup (replaces Popup Maker plugin) */
.pum-overlay-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 100000;
}
#pum-575 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100001;
  width: 90%;
  max-width: 640px;
}
#pum-575[hidden] {
  display: none;
}
#pum-575 .pum-container {
  background: #fff;
  border-radius: 6px;
  padding: 20px;
  max-height: 85vh;
  overflow: auto;
  position: relative;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
#pum-575 .pum-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
  text-align: center;
}
#pum-575 .pum-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
#pum-575 .pum-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #4a6fa5;
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 6px 14px;
  cursor: pointer;
  font-weight: 600;
}
#pum-575 .pum-close:hover {
  background: #3a5880;
}

/* Footer: drop the little dash before each column title, align titles flush left */
.footer-widget-heading .widget-heading-text:before {
  display: none;
}
.footer-widget-heading .widget-heading-text {
  padding-left: 0;
}

/* Footer "Menu" categories widget: replace the ragged nested white boxes with a clean,
   left-aligned layout. Items flex-wrap so short entries share a row; each item only
   takes as much width as its own text needs (plus its indented children below it). */
.footer-bg .widget_categories > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  row-gap: 14px;
  column-gap: 32px;
}
.footer-bg .widget_categories > ul > li {
  flex: 0 0 auto;
}
.footer-bg .widget_categories li {
  background: transparent !important;
  color: #fff !important;
  text-align: left;
}
.footer-bg .widget_categories li a {
  background: transparent !important;
  color: #fff !important;
  text-decoration: none;
}
.footer-bg .widget_categories li a:hover {
  text-decoration: underline;
}
.footer-bg .widget_categories .children {
  list-style: none;
  margin: 6px 0 0 0;
  padding: 0 0 0 14px;
}
.footer-bg .widget_categories .children li {
  margin-top: 4px;
  text-align: left;
}
