/* =====================================================================
   Additions to the www.cityprideschoolnigdi.org theme for pages the old
   site did not have (news story, downloads, search, enquiry form).
   ===================================================================== */
#cursor, #cursor-blur { display: none; }

.page-insight img, .about-info img { max-width: 100%; height: auto; }
.page-insight table { width: 100%; }
.page-insight iframe { max-width: 100%; }

/* Alerts after sending a form */
.form-result { padding: 14px 18px; border-radius: 10px; margin-bottom: 18px; font-size: 16px; }
.form-result.ok { background: #e3f6ec; color: #12603a; border-left: 5px solid #18a163; }
.form-result.err { background: #fdeaea; color: #8c211b; border-left: 5px solid #c8362f; }
.hp-field { position: absolute; left: -9999px; height: 0; overflow: hidden; }

/* News list — styles the old site kept inline on its /news-all page */
.newspanneltext { color: #babcc0; font-size: 16px; padding-right: 15px; font-weight: 400; margin: auto; }
.shareicon { text-align: right; }
.goToSectionmenu a { font-size: 22px; color: black; font-weight: 400 !important; padding: 0.75rem 1.5rem; margin: 0; background-color: white; }
.SectionmenuView { border-radius: 0 0 10px 10px; padding: 13px; background-color: white; }
.goToSectionmenu a:hover, .goToSectionmenu .dropdown-item.active { color: #fff; font-weight: 400 !important; background-color: var(--color-primary); }
.new-ui-margin { padding: 15px; border-bottom: 2px solid #cacaca; }
.categoriesmanu { padding: 0; margin: 0; color: #fff; }
.newslist { padding: 10px 5px 5px 13px; }
.category { width: 100%; padding: 3px; border-radius: 4px; margin: 3px; background-color: #ebebeb; font-size: 16.5px !important; }
.quick-head-back { background-color: var(--color-primary); margin-bottom: 0; padding: 7px 7px 10px 20px !important; font-size: 20px !important; color: #fff; border-radius: 10px 10px 0 0; }

/* Achievements "View All" (/events-all) — styles the old site kept inline on that page */
.achievements-page .goToSectionmenu { margin-right: 10px; margin-bottom: 21px; }
.achievements-page .goToSectionmenu a { font-size: 18px; border-radius: 20px; text-decoration: none; }
.achievements-page .goToSectionmenu a.active { color: #fff; background-color: var(--color-primary); }
.achievements-page .SectionmenuView { margin-bottom: -13px; padding: 19px 7px 10px 20px !important; font-size: 20px !important; background: none; }
.limited-lines-title { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 1 !important; }
.achievements-page .limited-lines { -webkit-line-clamp: 2 !important; }
.blog-container { display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 20px; }
.blog { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; max-width: 1199px; width: 100%; }
.blog-item { border: 1px solid #5f4d4d; padding: 18px; border-radius: 25px; background-color: #fff; display: flex; flex-direction: column; justify-content: space-between; position: relative; }
.blog-item img { width: 100%; height: auto; border-radius: 10px; }
.blog-item p { letter-spacing: 1px; }
.blog-item a { color: darkblue; text-decoration: underline; }
.blog-item .view { margin-top: auto; padding-top: 10px; }

/* Parents / Students blogs */
.blog-post { margin-bottom: 18px; }
.blog-post + .blog-post { border-top: 1px solid #e3d6c8; padding-top: 18px; }

/* Write Blog form */
.account-form form { padding: 10px 0 25px; border-radius: 6px; }
.account-form .form-control { margin-bottom: 12px; }

/* News / achievement story */
.news-story .news-meta { color: #6b7280; margin-bottom: 12px; }
.news-story .news-meta .category { display: inline-block; width: auto; padding: 3px 10px; }
.news-story figure img { border-radius: 10px; max-height: 520px; width: auto; }
.news-story .story-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.news-pagination { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.news-pagination a, .news-pagination span { padding: 6px 13px; border-radius: 6px; background: #fff; border: 1px solid #ddd; color: #333; text-decoration: none; }
.news-pagination .current { background: var(--color-primary, #273aad); color: #fff; border-color: transparent; }
.goToSectionmenu a.current { color: #fff; background-color: var(--color-primary); }

/* Downloads */
.download-row { display: flex; align-items: center; gap: 14px; padding: 12px 6px; border-bottom: 1px solid #eee; }
.download-row .bi { font-size: 28px; color: #c8362f; }
.download-row .download-body { flex: 1; }
.download-row small { display: block; color: #777; }

/* Search */
.search-results li { padding: 10px 0; border-bottom: 1px dashed #ddd; list-style: none; }
.search-results { padding-left: 0; }

/* Gallery year tabs (server rendered) */
.list-horizontal a.btn-year { text-decoration: none; cursor: pointer; }

/* Menu panel: a sub-menu opens right beside the item it belongs to, its first row level with that item,
   so the pointer can move straight across without leaving the menu (the theme placed it 100px higher). */
@media (min-width: 992px) {
  .web-cust-menu .myCustomMenu .dropdown-menu {
    top: 0;
    left: auto !important;
    right: 100%;
    transform: none;
    margin: 0;
    transition: none;
  }
}

/* Homepage slider, broader on large screens: the green cloud frame (header-bg1.svg) and the photo
   inside it grow together by 15%, so the photo stays inside the green. Below 1720px the photo is
   already as wide as the page allows, so smaller screens keep the nigdi.org size. */
@media (min-width: 1720px) {
  .head-car { overflow: hidden; }
  .head-car > img.img-fluid { width: 115%; max-width: none; flex-shrink: 0; }
  /* 77vw keeps the photo the same share of the frame as on nigdi.org (1288px of a 1920px screen × 1.15) */
  .head-car > .banner-slider.container { max-width: min(1518px, 77vw); }
  .head-car .banner-slider img { height: auto; aspect-ratio: 1288 / 564; }
}

/* ---- Pradhikaran 2 parts: small pieces its stylesheet does not cover ---- */
.pp .page-layout.is-wide { grid-template-columns: 1fr; max-width: 900px; margin: 0 auto; }
.pp .pp-photos { margin: 0 0 1.5rem; }
.pp .pp-photos img { display: block; width: 100%; border-radius: 14px; }
.pp .pp-photos.is-slider { position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.12); }
.pp .pp-photos.is-slider .pp-slides { position: relative; aspect-ratio: 16 / 9; background: #f3efe7; }
.pp .pp-photos.is-slider .pp-photo { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.pp .pp-photos.is-slider .pp-photo.is-active { opacity: 1; z-index: 1; }
.pp .pp-photos.is-slider img { height: 100%; object-fit: cover; border-radius: 0; }
.pp .pp-photos .pp-photo-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: .6rem 1rem; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.6)); font-size: .95rem; }
.pp .pp-prev, .pp .pp-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255,255,255,.9); color: #273aad; box-shadow: 0 2px 8px rgba(0,0,0,.2); cursor: pointer; }
.pp .pp-prev { left: 12px; } .pp .pp-next { right: 12px; }
.pp .pp-photos.is-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.pp .pp-photos.is-cards .pp-photo { position: relative; display: block; overflow: hidden; border-radius: 14px; box-shadow: 0 6px 18px rgba(0,0,0,.1); }
.pp .pp-photos.is-cards img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; transition: transform .4s ease; }
.pp .pp-photos.is-cards .pp-photo:hover img { transform: scale(1.05); }
.pp .pp-photos.is-wall { columns: 3 220px; column-gap: 14px; }
.pp .pp-photos.is-wall .pp-photo { display: block; margin-bottom: 14px; break-inside: avoid; }
.pp .tc-search { margin: 1.5rem 0; padding: 1.25rem; border-radius: 14px; background: #fff7e6; }
.pp .tc-search label { display: block; font-weight: 600; margin-bottom: .4rem; }
.pp .tc-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.pp .tc-row input { flex: 1 1 220px; padding: .6rem .8rem; border: 1px solid #d9cdb8; border-radius: 10px; }
.pp .tc-result { padding: .8rem 1rem; border-radius: 10px; background: #eef6ee; }
.pp .tc-result.is-empty { background: #fdecec; }
.pp .doc-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.pp .doc-table th, .pp .doc-table td { padding: .7rem .8rem; border-bottom: 1px solid #eee3cf; text-align: left; vertical-align: middle; }
.pp .doc-table th { background: #273aad; color: #fff; }
.pp .detail-media { margin: 0 0 1.25rem; }
.pp .detail-media img { width: 100%; border-radius: 16px; }
.pp .lead { font-size: 1.15rem; }
.pp .block { display: block; }
.footer-about-text { margin-bottom: .5rem; }
/* The Nigdi accessibility sheet centres every <article> (margin: 0 auto; max-width: 85vw) — not inside the Pradhikaran parts. */
.pp article { margin: 0; max-width: none; }
.pp article p { text-align: inherit; }
.pp .detail-media img { max-height: 460px; object-fit: cover; }

/* Homepage "Upcoming Events" column (added beside School News and Achievement, as on Pradhikaran 2) */
.news-and-event .upcoming-empty { color: #fff; font-weight: 600; text-align: center; padding-top: 70px; margin: 0; }
/* The ticker list is absolutely positioned and was as wide as the whole box, so the last letters of each
   line were cut off at the right; keep it inside the box's padding (matters more in three columns). */
#section-news .myTicker ul { width: auto !important; left: 10px; right: 10px; }
#section-news .myTicker li a { line-break: auto !important; overflow-wrap: break-word; } /* the theme breaks words mid-word (line-break: anywhere) — unreadable in three columns */

/* Class tiles: every photo shows in the 3:2 shape of the existing ones, whatever shape a new upload is. */
#section-classes .dive-img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
/* Side-rail hover colours for platforms added in Admin → Social Media (the theme only styles its own four) */
.ssi-x:hover, .ssi-twitter:hover { background: #000; cursor: pointer; }
.ssi-whatsapp:hover { background: #25d366; cursor: pointer; }
.ssi-telegram:hover { background: #229ed9; cursor: pointer; }
.ssi-pinterest:hover { background: #e60023; cursor: pointer; }
#ssi-absolute li[class^="ssi-"]:not(.ssi-facebook):not(.ssi-instagram):not(.ssi-youtube):not(.ssi-linkedin):not(.ssi-x):not(.ssi-twitter):not(.ssi-whatsapp):not(.ssi-telegram):not(.ssi-pinterest):hover { background: #273aad; cursor: pointer; }