/*
Theme Name: GDC
Theme URI: https://example.com/
Author: Your Organization
Author URI: https://example.com/
Description: A government department WordPress theme inspired by the layout of official Maharashtra directorate portals — accessibility toolbar, emblem header, mega-menu navigation, hero slider, notice board, key persons grid, service cards, schemes & policy link lists, photo gallery, and a footer with visitor statistics. Fully editable via the WordPress Customizer, Menus, and Widgets.
Version: 1.0.20261009.0737
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gdc
Tags: government, accessibility-ready, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   0. Custom properties
   ========================================================================== */
:root{
  --navy:        #22317a;
  --navy-dark:   #141d52;
  --navy-light:  #3a4bb0;
  --saffron:     #f5a300;
  --saffron-dark:#c98200;
  --green:       #0aa87c;
  --bg:          #f4f6fd;
  --card-bg:     #ffffff;
  --text:        #151b2c;
  --text-muted:  #5a6478;
  --border:      #dde2f2;
  --radius:      10px;
  --shadow:      0 6px 22px rgba(34,49,122,.16);
  --font-base:   'Noto Sans', 'Noto Sans Devanagari', 'Segoe UI', Arial, sans-serif;
  --gradient-brand: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  --gradient-warm:  linear-gradient(135deg, var(--saffron) 0%, var(--saffron-dark) 100%);
  --gradient-accent:linear-gradient(90deg, var(--navy) 0%, var(--navy-light) 50%, var(--saffron) 100%);

  /* Material Design tokens — elevation, motion, and corner radius scale.
     These layer on top of the color system above (which stays exactly as
     Theme Options → Theme Colors expects it) to give buttons, cards, and
     surfaces throughout the site consistent Material-style depth and
     movement, without needing to touch the brand colors themselves. */
  --md-elevation-0: none;
  --md-elevation-1: 0 1px 2px rgba(0,0,0,.20), 0 1px 3px 1px rgba(0,0,0,.10);
  --md-elevation-2: 0 1px 2px rgba(0,0,0,.24), 0 2px 6px 2px rgba(0,0,0,.12);
  --md-elevation-3: 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.24);
  --md-elevation-4: 0 6px 10px 4px rgba(0,0,0,.15), 0 2px 3px rgba(0,0,0,.24);
  --md-elevation-5: 0 8px 12px 6px rgba(0,0,0,.15), 0 4px 4px rgba(0,0,0,.24);
  --md-radius-xs: 4px;
  --md-radius-sm: 8px;
  --md-radius-md: 12px;
  --md-radius-lg: 16px;
  --md-radius-full: 999px;
  --md-motion-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-motion-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --md-duration-short: 150ms;
  --md-duration-medium: 250ms;
}

/* ==========================================================================
   1. Reset & base
   ========================================================================== */
*, *::before, *::after{ box-sizing:border-box; }
body{
  margin:0;
  font-family:var(--font-base);
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  font-size:1rem;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--navy); text-decoration:none; }
a:hover{ color:#a06b00; text-decoration:underline; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0 0 .6em; color:var(--navy); font-weight:700; }
.container{ max-width:75rem; margin:0 auto; padding:0 1.25rem; } /* 75rem = 1200px at the base 16px; grows with the fluid root size on big desktops */
.skip-link{
  display:inline-block;
  background:transparent; border:1px solid #4a5bc4; color:#d9e6f7;
  border-radius:3px; padding:2px 10px; font-size:.8rem;
  text-decoration:none;
}
.skip-link:hover{ background:var(--saffron); border-color:var(--saffron); color:var(--navy-dark); text-decoration:none; }
.skip-link:focus-visible{ outline:3px solid var(--saffron); outline-offset:2px; }

/* WCAG 2.4.7 / 1.4.11 — visible keyboard focus indicator on every
   interactive element, with enough contrast to actually be seen. A single
   saffron outline alone only reaches ~2:1 contrast against the white/light
   backgrounds most links, buttons, and form fields sit on (it only reads
   well against dark navy backgrounds, which is the minority of the site).
   The extra white ring here is a standard "double indicator" technique —
   whichever of the two rings has more contrast against what's directly
   behind it (light content vs. dark navy header/nav) is what a viewer
   actually sees, so the focus indicator stays clearly visible everywhere. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--navy-dark);
  outline-offset:2px;
  box-shadow:0 0 0 5px rgba(255,255,255,.9);
  border-radius:2px;
}

/* Font-size scaling classes applied to <html> by JS */
/* Fluid root size: exactly 14/16/19px up to a 1400px-wide viewport (so
   mobile, tablet and laptops are unchanged), then scales proportionally with
   the viewport width so the whole layout (everything is rem based) fills large
   desktop monitors instead of sitting as a small 1200px block. Capped at 2560px. */
html.font-sm{ font-size:clamp(14px, 1vw, 25.6px); }
html.font-md{ font-size:clamp(16px, 1.1429vw, 29.3px); }
html.font-lg{ font-size:clamp(19px, 1.3571vw, 34.7px); }
html:not(.font-sm):not(.font-md):not(.font-lg){ font-size:clamp(16px, 1.1429vw, 29.3px); } /* before JS runs: no jump on load */

/* ==========================================================================
   2. Top utility bar
   ========================================================================== */
.top-bar{
  background:var(--navy-dark);
  color:#d9e6f7;
  font-size:.82rem;
}
.top-bar .container{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:8px; padding-top:6px; padding-bottom:6px;
}
.top-bar a{ color:#d9e6f7; }
.top-bar__left{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.top-bar__right{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.font-controls{ display:flex; align-items:center; gap:4px; }
.font-controls button{
  background:transparent; border:1px solid #4a5bc4; color:#d9e6f7;
  border-radius:3px; width:26px; height:26px; cursor:pointer; font-size:.85rem;
}
.font-controls button:hover{ background:var(--saffron); border-color:var(--saffron); color:var(--navy-dark); }
.social-links{ display:flex; gap:10px; }
.social-links a{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%; background:#1a2560;
  font-size:.75rem;
}
.lang-switch a{ font-weight:600; border:1px solid #4a5bc4; padding:2px 10px; border-radius:3px; }

/* ==========================================================================
   3. Masthead: emblem, title, partner logos
   ========================================================================== */
.masthead{
  background:#fff; border-bottom:4px solid var(--saffron);
  border-image:linear-gradient(90deg, var(--saffron) 0%, var(--saffron) 33%, #ffffff 33%, #ffffff 66%, var(--green) 66%, var(--green) 100%) 1;
}

/* Reusable tricolor divider (same saffron / white / green band used above
   the primary navigation) for separating sections on the front page. */
.section-separator{
  height:4px;
  background:linear-gradient(90deg, var(--saffron) 0%, var(--saffron) 33%, #ffffff 33%, #ffffff 66%, var(--green) 66%, var(--green) 100%);
}
.masthead .container{
  display:flex; align-items:center; gap:20px; padding-top:16px; padding-bottom:16px; flex-wrap:wrap;
}
.masthead__emblem{ flex:0 0 auto; width:64px; }
.masthead__title{ flex:1 1 320px; }
.masthead__title .masthead__site-name{ font-size:1.4rem; margin:0; line-height:1.3; font-weight:700; }
.masthead__title .masthead__site-name .lang-text{ color:inherit; font-weight:inherit; font-size:inherit; }
/* The non-home title wrapper is a <div> (not <p>): the Site Title is rich HTML that may contain <p>, which would otherwise terminate a wrapping <p> and leak both language spans' text out of their .lang-text wrappers (showing the name twice). */
.masthead__title div.masthead__site-name p{ margin:0; }
.masthead__title > span{ display:block; font-size:1rem; color:var(--text-muted); font-weight:500; }
.masthead__partners{ display:flex; align-items:center; gap:18px; flex:0 0 auto; }
.masthead__partners a{ display:block; }
.masthead__partners img{ height:56px; width:auto; }

/* ==========================================================================
   4. Primary navigation (mega menu)
   ========================================================================== */
.nav-wrap{
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  position:sticky; top:0; z-index:200;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
}
.nav-wrap .container{ display:flex; align-items:center; justify-content:space-between; }
.menu-toggle{
  display:none; background:none; border:0; color:#fff; font-size:1.4rem; padding:14px 4px; cursor:pointer;
}
.primary-menu{ display:flex; flex-wrap:wrap; flex:1 1 auto; min-width:0; }
.primary-menu > li{ position:relative; }
.primary-menu > li > a{
  display:block; color:#fff; padding:14px 16px; font-weight:600; font-size:.92rem;
  border-right:1px solid rgba(255,255,255,.12); white-space:nowrap;
}
.primary-menu > li:last-child > a{ border-right:0; }
.primary-menu > li > a:hover, .primary-menu > li.current-menu-item > a{
  background:var(--saffron); color:var(--navy-dark); text-decoration:none;
}
.primary-menu li.menu-item-has-children > a::after{ content:"▾"; margin-left:6px; font-size:.7em; }

/* dropdown */
.primary-menu ul.sub-menu{
  display:none; position:absolute; top:100%; left:0; min-width:240px;
  background:#fff; box-shadow:var(--shadow); border-top:3px solid var(--saffron); z-index:60;
}
.primary-menu li:hover > ul.sub-menu{ display:block; }
.primary-menu ul.sub-menu li{ position:relative; }
.primary-menu ul.sub-menu a{
  display:block; padding:10px 16px; color:var(--text); font-size:.88rem; border-bottom:1px solid var(--border);
}
.primary-menu ul.sub-menu a:hover{ background:var(--bg); color:var(--navy); text-decoration:none; }
.primary-menu ul.sub-menu ul.sub-menu{ top:0; left:100%; }
.nav-backdrop{ display:none; }

/* Visually hidden but available to screen readers (WCAG best practice) */
.screen-reader-text{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Header search toggle + expandable box */
.site-search-toggle{
  background:none; border:0; color:#fff; cursor:pointer; padding:14px 16px;
  display:flex; align-items:center; margin-left:auto; flex:0 0 auto;
}
.site-search-toggle .gdc-icon{ color:#fff; }
.site-search-toggle:hover{ background:var(--saffron); }
.site-search-toggle:hover .gdc-icon{ color:var(--navy-dark); }
.site-search-box{
  background:#fff; border-top:3px solid var(--saffron); box-shadow:var(--shadow);
}
.site-search-box .container{ display:flex; align-items:center; gap:10px; padding-top:14px; padding-bottom:14px; }
.site-search-box .search-form{ flex:1 1 auto; display:flex; }
.search-form__input{
  flex:1 1 auto; border:1px solid var(--border); border-right:0; border-radius:4px 0 0 4px;
  padding:10px 14px; font-size:.95rem; font-family:inherit;
}
.search-form__submit{
  background:var(--navy); color:#fff; border:0; border-radius:0 4px 4px 0; padding:0 16px;
  display:flex; align-items:center; cursor:pointer;
}
.search-form__submit:hover{ background:var(--navy-dark); }
.site-search-box__close{
  background:none; border:0; color:var(--text-muted); cursor:pointer; padding:8px; flex:0 0 auto;
}
.site-search-box__close:hover{ color:var(--saffron-dark); }

/* ==========================================================================
   5. Hero slider
   ========================================================================== */
.hero-slider{ position:relative; background:#000; overflow:hidden; }
.hero-slider__track{ display:flex; transition:transform .5s ease; }
.hero-slider__slide{ position:relative; flex:0 0 100%; overflow:hidden; }
.hero-slider__slide::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,29,82,.15) 0%, rgba(20,29,82,0) 40%, rgba(0,0,0,.55) 100%);
  pointer-events:none;
}
.hero-slider__slide img{
  width:100%; height:420px; object-fit:cover; opacity:.96; display:block;
  animation:gdc-hero-zoom 10s ease-out forwards;
}
@keyframes gdc-hero-zoom{
  from{ transform:scale(1.06); }
  to{ transform:scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .hero-slider__slide img{ animation:none; }
}
.hero-slider__caption{
  position:absolute; left:0; right:0; bottom:0; padding:22px 44px;
  background:linear-gradient(0deg, rgba(0,0,0,.8), rgba(0,0,0,0));
  color:#fff; font-size:1.15rem; font-weight:700; letter-spacing:.01em; text-shadow:0 2px 8px rgba(0,0,0,.4);
  z-index:1;
}
.hero-slider__nav{
  position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.4);
  border:0; color:#fff; font-size:1.6rem; width:42px; height:42px; cursor:pointer; border-radius:50%;
}
.hero-slider__nav:hover{ background:var(--saffron); color:var(--navy-dark); }
.hero-slider__nav--prev{ left:14px; }
.hero-slider__nav--next{ right:14px; }
/* Play/Pause — an explicit, always-available control for the auto-advancing
   slideshow (WCAG 2.2.2), since hover-to-pause alone doesn't help
   touch-only visitors. Positioned bottom-left, out of the way of the dots
   (bottom-right) and captions. Shows a pause glyph while playing (so
   clicking it pauses) and a play glyph once paused, via the .is-paused
   class the JS toggles — matching the pattern of a typical media player's
   play/pause button rather than describing the CURRENT state as a label. */
.hero-slider__playpause{
  position:absolute; left:14px; bottom:10px; z-index:2;
  background:rgba(0,0,0,.4); border:0; color:#fff; cursor:pointer; border-radius:50%;
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
}
.hero-slider__playpause:hover{ background:var(--saffron); color:var(--navy-dark); }
.hero-slider__playpause::before{ content:'\275A\275A'; font-size:.85rem; letter-spacing:1px; } /* ❚❚ pause glyph, shown while playing */
.hero-slider__playpause.is-paused::before{ content:'\25B6'; font-size:.8rem; margin-left:2px; } /* ▶ play glyph, shown while paused */
.hero-slider__dots{ position:absolute; bottom:10px; right:20px; display:flex; gap:6px; }
.hero-slider__dots button{
  width:10px; height:10px; border-radius:50%; border:1px solid #fff; background:transparent; cursor:pointer;
}
.hero-slider__dots button.is-active{ background:var(--saffron); border-color:var(--saffron); }

/* Responsive scaling — image height, caption, and nav controls all shrink
   together as the viewport narrows, instead of jumping straight from
   desktop size to one small mobile size. */
@media (max-width:960px){
  .hero-slider__slide img{ height:320px; }
  .hero-slider__caption{ padding:12px 56px 12px 20px; font-size:.95rem; }
}
@media (max-width:640px){
  .hero-slider__slide img{ height:210px; }
  .hero-slider__caption{ padding:10px 48px 10px 14px; font-size:.85rem; }
  .hero-slider__nav{ width:32px; height:32px; font-size:1.2rem; }
  .hero-slider__nav--prev{ left:8px; }
  .hero-slider__nav--next{ right:8px; }
  .hero-slider__playpause{ width:28px; height:28px; left:8px; bottom:6px; }
  .hero-slider__dots{ bottom:6px; right:12px; }
}
@media (max-width:400px){
  .hero-slider__slide img{ height:170px; }
  .hero-slider__caption{ font-size:.8rem; padding:8px 42px 8px 12px; }
}

/* ==========================================================================
   6. Section shells / headings
   ========================================================================== */
.section{ padding:40px 0; }
.section--tint{ background:#fff; }
.section__heading{
  display:flex; align-items:center; gap:12px; margin-bottom:24px;
}
.section__heading h2{
  display:flex; align-items:center; gap:12px;
  font-size:1.4rem; margin:0; padding-bottom:8px;
  border-bottom:4px solid transparent; border-image:var(--gradient-accent) 1;
}
.section__heading .gdc-icon{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; flex:0 0 auto;
  background:var(--gradient-brand); color:#fff;
  box-shadow:0 4px 12px rgba(34,49,122,.3);
}
.notice-board__head, .link-list-box__head{ display:flex; align-items:center; gap:8px; }
.gdc-icon{ display:inline-flex; color:var(--saffron); flex:0 0 auto; }
.notice-board__head .gdc-icon, .link-list-box__head .gdc-icon{ color:#fff; }
.btn .gdc-icon{ color:#fff; vertical-align:middle; }
.footer-info-row__item .gdc-icon{ color:var(--saffron); vertical-align:middle; }

/* -------------------------------------------------------------------------
   Dean Message — square photo (no circular crop) with text wrapping
   naturally around it, matching the Key Persons image treatment.
   ---------------------------------------------------------------------- */
.dean-message{ overflow:hidden; } /* clearfix: contains the floated photo */
.dean-message__photo-wrap{
  float:left;
  width:200px;
  margin:4px 24px 18px 0;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:8px;
  box-shadow:var(--shadow);
  overflow:hidden;
  position:relative;
  text-align:center;
}
.dean-message__photo-wrap::before{
  content:""; display:block; width:100%; height:4px;
  background:linear-gradient(90deg, var(--navy), var(--saffron));
}
.dean-message__photo-frame{
  width:calc(100% - 20px);
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:6px;
  margin:10px auto 10px;
  box-shadow:0 2px 6px rgba(34,49,122,.15);
}
.dean-message__photo{
  width:100%; height:100%; object-fit:cover; display:block;
}
.dean-message__name{
  text-align:center; font-weight:600; font-size:.82rem; color:var(--navy);
  margin:0 10px 6px; position:relative; padding-bottom:6px; line-height:1.25;
}
.dean-message__name::after{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:24px; height:2px; background:var(--saffron); border-radius:2px;
}
.dean-message__designation{
  display:inline-block; text-align:center; font-size:.6rem; font-weight:600;
  letter-spacing:.02em; text-transform:uppercase; color:var(--navy);
  background:var(--bg); padding:3px 9px; border-radius:999px;
  margin:0 10px 14px;
}
.dean-message__text{
  text-align:justify; text-justify:inter-word;
  line-height:1.75; margin:0;
}

@media (max-width:640px){
  .dean-message__photo-wrap{
    float:none; width:200px; margin:0 auto 16px;
  }
  .dean-message__text{ text-align:left; }
}

/* ==========================================================================
   7. Notice board + key persons (two-column layout)
   ========================================================================== */
.info-columns{ display:grid; grid-template-columns:1.1fr .9fr; gap:28px; }
@media (max-width:900px){ .info-columns{ grid-template-columns:1fr; } }

.notice-board{ background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.nb-board{ display:contents; }

/* Box style on the homepage: each category already renders as its own
   card (.nb-marquee-grid__box), so the outer .notice-board card frame is
   dropped here — otherwise it would double-box everything (a card
   wrapping a grid of cards). */
.notice-board--box{ background:transparent; border:none; box-shadow:none; overflow:visible; }

/* Shortcode usage on regular Pages: give it the same card treatment it
   has on the homepage, since there it's already wrapped by .notice-board
   from the surrounding section markup. */
.notice-board--shortcode{
  background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden; margin:0 0 24px;
}
/* Box style, again: overrides the shortcode card treatment above for the
   same reason as .notice-board--box on the homepage — a grid of boxes
   shouldn't be wrapped in another card. Comes after .notice-board--shortcode
   in the cascade so it wins when both classes are present. */
.notice-board--shortcode.notice-board--box{ background:transparent; border:none; box-shadow:none; overflow:visible; }
.notice-board__head{ background:var(--gradient-brand); color:#fff; padding:14px 18px; font-weight:700; font-size:1.05rem; }

.tag-new{
  background:var(--saffron); color:var(--navy-dark); font-size:.65rem; font-weight:700; padding:1px 6px;
  border-radius:3px; white-space:nowrap; margin-left:6px;
}

/* ---- Notice Board tabs (dynamic, admin-managed) ---- */
.nb-tabs{
  display:flex; flex-wrap:wrap; gap:8px; padding:16px 18px; background:var(--bg);
  border-bottom:1px solid var(--border);
}
.nb-tab{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--card-bg); border:1px solid var(--border); border-radius:999px;
  padding:9px 18px; font-size:.88rem; font-weight:600; color:var(--text-muted);
  cursor:pointer; white-space:nowrap; position:relative;
  transition:color .25s ease, background .25s ease, border-color .25s ease,
             box-shadow .25s ease, transform .15s ease;
}
.nb-tab:hover{
  color:var(--navy); border-color:var(--navy-light); background:#fff;
  transform:translateY(-2px); box-shadow:0 4px 12px rgba(34,49,122,.14);
}
.nb-tab:active{ transform:translateY(0); }
.nb-tab:focus-visible{ outline:2px solid var(--navy-dark); outline-offset:2px; box-shadow:0 0 0 4px rgba(255,255,255,.9); }
.nb-tab.is-active{
  color:#fff; background:var(--gradient-brand); border-color:transparent;
  box-shadow:0 5px 16px rgba(34,49,122,.30); transform:translateY(-1px);
}
.nb-tab.is-active:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(34,49,122,.34); }
.nb-tab__count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px; padding:0 6px; border-radius:999px;
  background:rgba(34,49,122,.1); color:var(--navy); font-size:.72rem; font-weight:700;
  transition:background .25s ease, color .25s ease;
}
.nb-tab.is-active .nb-tab__count{ background:rgba(255,255,255,.28); color:#fff; }

.nb-panel{ padding:6px 0 18px; }
.nb-panel.is-active{ animation:gdc-nb-panel-in .35s ease; }
@keyframes gdc-nb-panel-in{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .nb-panel.is-active{ animation:none; }
  .nb-tab, .nb-tab__count{ transition:none; }
}
.nb-items li{ border-bottom:1px solid var(--border); }
.nb-item{
  display:flex; gap:14px; padding:14px 18px; align-items:flex-start;
  position:relative; border-left:3px solid transparent;
  transition:background-color .2s ease, border-left-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.nb-item:hover{
  background:var(--bg);
  border-left-color:var(--saffron);
  transform:translateX(3px);
  box-shadow:0 2px 10px rgba(34,49,122,.08);
}

/* Date badge — full date (day, month name, year), horizontal inline pill */
.nb-item__date-badge{
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 152px; width:152px; padding:6px 10px; border-radius:999px; white-space:nowrap;
  background:var(--navy); color:#fff; font-size:.75rem; font-weight:600; text-align:center;
  transition:background .2s ease, transform .2s ease;
}
.nb-item:hover .nb-item__date-badge{ background:var(--saffron); color:var(--navy-dark); transform:scale(1.03); }

.nb-item__icon{ flex:0 0 auto; color:var(--saffron); margin-top:2px; transition:transform .2s ease; }
.nb-item:hover .nb-item__icon{ transform:scale(1.15); }
.nb-item__body{ flex:1 1 auto; min-width:0; }
.nb-item__body a, .nb-item__body > span{ font-size:.92rem; font-weight:600; color:var(--navy); }
.nb-item__body a:hover{ text-decoration:underline; }
.nb-item__desc{ font-size:.82rem; color:var(--text-muted); margin:4px 0 0; }
.nb-item__date{ display:block; font-size:.75rem; color:var(--text-muted); margin-top:4px; }
.nb-item--empty{ padding:18px; color:var(--text-muted); font-size:.9rem; }

/* Interactive "NEW" badge — a slow, subtle pulse to catch the eye without being distracting */
.tag-new--pulse{
  animation:gdc-badge-pulse 2.2s ease-in-out infinite;
}
@keyframes gdc-badge-pulse{
  0%, 100% { box-shadow:0 0 0 0 rgba(255,122,0,.55); }
  50%      { box-shadow:0 0 0 5px rgba(255,122,0,0); }
}
@media (prefers-reduced-motion: reduce){
  .tag-new--pulse{ animation:none; }
}

.nb-pagination{
  display:flex; flex-wrap:wrap; gap:6px; align-items:center; justify-content:center;
  padding:14px 18px 4px;
}
.nb-pagination[hidden]{ display:none; }
.nb-pagination button{
  display:inline-flex; align-items:center; justify-content:center; min-width:32px; height:32px;
  padding:0 8px; border:1px solid var(--border); border-radius:4px; font-size:.85rem; color:var(--navy);
  background:#fff; cursor:pointer; font-family:inherit; transition:background .2s ease, transform .15s ease;
}
.nb-pagination button:hover:not(:disabled){ background:var(--bg); transform:translateY(-1px); }
.nb-pagination button.is-active{ background:var(--saffron); border-color:var(--saffron); color:var(--navy-dark); font-weight:700; }
.nb-pagination button:disabled{ opacity:.4; cursor:not-allowed; }

@media (max-width:640px){
  .nb-tabs{ padding:12px 12px; gap:6px; }
  .nb-tab{ padding:7px 13px; font-size:.82rem; }
  .nb-item{ padding:12px; gap:10px; flex-wrap:wrap; }
  .nb-item__date-badge{ font-size:.68rem; padding:4px 10px; order:3; flex-basis:100%; width:auto; margin-top:6px; }
}

.notice-board__pagination{
  display:flex; flex-wrap:wrap; gap:6px; align-items:center; justify-content:center;
  padding:14px 18px; border-top:1px solid var(--border);
}
.notice-board__pagination a{
  display:inline-flex; align-items:center; justify-content:center; min-width:32px; height:32px;
  padding:0 8px; border:1px solid var(--border); border-radius:4px; font-size:.85rem; color:var(--navy);
}
.notice-board__pagination a:hover{ background:var(--bg); text-decoration:none; }
.notice-board__pagination a.is-active{ background:var(--saffron); border-color:var(--saffron); color:var(--navy-dark); font-weight:700; }
@media (max-width:480px){
  .notice-board__pagination a{ min-width:28px; height:28px; font-size:.78rem; }
}

/* ==========================================================================
   7b. Notice Board — marquee view (continuously auto-scrolling, bottom to
   top). An alternative to the tabbed board — [gdc_notice_board view="marquee"]
   — styled like the "Important Links" / "Schemes & Policies" boxes common
   on government sites. Pure-CSS scrolling: the list is rendered twice back
   to back, and the animation scrolls exactly one copy's height (translateY
   to -50%) before jumping back to 0 — since both copies are identical,
   that jump is invisible, giving a perfectly seamless continuous loop.
   ========================================================================== */
.nb-marquee{
  background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden;
}
.nb-marquee__empty{ padding:24px; margin:0; color:var(--text-muted); text-align:center; }
.nb-marquee__viewport{
  height:280px; overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.nb-marquee__viewport:focus{ outline:2px solid var(--saffron); outline-offset:-2px; }
.nb-marquee__track{
  list-style:none; margin:0; padding:0;
  animation:nb-marquee-scroll var(--nb-marquee-duration, 20s) linear infinite;
}
/* Pause for anyone reading — hovering with a mouse or tabbing a link into
   focus both stop the scroll, satisfying the "pause moving content"
   accessibility requirement for anything that auto-scrolls. */
.nb-marquee__viewport:hover .nb-marquee__track,
.nb-marquee__viewport:focus-within .nb-marquee__track{
  animation-play-state:paused;
}
@keyframes nb-marquee-scroll{
  from{ transform:translateY(0); }
  to{ transform:translateY(-50%); }
}
.nb-marquee__item{
  display:flex; align-items:flex-start; gap:10px; padding:12px 18px;
  border-bottom:1px solid var(--border); font-size:.92rem; line-height:1.4;
}
.nb-marquee__item svg{ flex:0 0 auto; width:13px; height:13px; margin-top:3px; color:var(--saffron); }
/* Title + "NEW" badge share one flexible container (like the Tabs view's
   .nb-item__body), so titles wrap onto multiple lines rather than
   truncating — always fully readable instead of being cut off with "…" —
   and the NEW badge flows right after the title text itself instead of
   sitting pinned at the row's right edge. */
.nb-marquee__body{ flex:1 1 auto; min-width:0; }
.nb-marquee__body a{ color:var(--navy); text-decoration:none; overflow-wrap:break-word; }
.nb-marquee__body a:hover{ color:var(--saffron-dark); text-decoration:underline; }
.nb-marquee__body > span{ color:var(--text); overflow-wrap:break-word; }
.nb-marquee__body .tag-new{ margin-left:6px; vertical-align:middle; }
/* Date badge — same navy pill style as the Tabs view's date badge
   (.nb-item__date-badge), sized to fit the narrower Box-mode row. Given a
   truly FIXED width (not just a minimum) — since this badge sits before
   the title (date → arrow → title → NEW), a variable width here would
   shift where every title starts depending on how long that row's date
   string happens to be (e.g. "1 Sep 2026" vs "19 Aug 2026"). Fixed width
   keeps every title starting at the exact same X position. */
.nb-marquee__date{
  flex:0 0 92px; width:92px; display:inline-flex; align-items:center; justify-content:center;
  padding:3px 6px; margin-top:1px; border-radius:999px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:var(--navy); color:#fff; font-size:.66rem; font-weight:600; text-align:center;
  transition:background .2s ease;
}
.nb-marquee__item:hover .nb-marquee__date{ background:var(--saffron); color:var(--navy-dark); }
/* Shown instead of a real date pill when an item has no date set — muted
   and outlined rather than solid navy, so it reads as "no date entered"
   at a glance rather than looking like the real badge failed to render.
   Reserves the same column width either way, so rows stay aligned. */
.nb-marquee__date--empty{
  background:transparent; border:1px dashed var(--border); color:var(--text-muted);
  font-weight:400;
}
.nb-marquee__item:hover .nb-marquee__date--empty{ background:transparent; border-color:var(--text-muted); }
/* Respect the operating system's "reduce motion" setting — content stays
   fully readable (just not moving) and every item is reachable by
   scrolling the box normally instead. */
@media (prefers-reduced-motion:reduce){
  .nb-marquee__track{ animation:none; }
  .nb-marquee__viewport{ overflow-y:auto; }
}
@media (max-width:480px){
  .nb-marquee__viewport{ height:220px; }
  .nb-marquee__item{ padding:10px 14px; font-size:.86rem; }
  .nb-marquee__date{ flex-basis:76px; width:76px; padding:3px 5px; font-size:.6rem; }
}

/* Notice Board — Box style, per-category grid ("as many boxes as tabs").
   Each box reuses .nb-marquee for its scrolling body, with a header bar on
   top (icon + category label) added via .nb-marquee-grid__box, matching the
   "Important Links" / "Schemes & Policies" look. */
.nb-marquee-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:26px; padding:18px; }
.nb-marquee-grid__box{
  background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden;
}
.nb-marquee-grid__head{
  display:flex; align-items:center; gap:10px; margin:0;
  background:var(--navy); color:#fff; padding:14px 18px; font-size:.98rem; font-weight:700;
}
.nb-marquee-grid__head .gdc-icon{ flex:0 0 auto; color:#fff; }
.nb-marquee-grid__head .lang-text{ flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nb-marquee-grid__box .nb-marquee{ border:none; border-radius:0; box-shadow:none; background:transparent; }

/* "View All" — sits at the bottom of every box (single-category or one of
   the per-tab grid), since a scrolling box only shows a capped number of
   items and never paginates on its own. Links to that one category's full,
   paginated listing (front-page.php's ?nb_tab= handling). */
.nb-marquee__viewall{
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 14px; border-top:1px solid var(--border);
  background:var(--bg); color:var(--navy); font-size:.82rem; font-weight:700;
  text-decoration:none; transition:background .2s ease, color .2s ease;
}
.nb-marquee__viewall:hover{ background:var(--navy); color:#fff; }
.nb-marquee__viewall .gdc-icon{ color:inherit; }

.gdc-nb-back{ margin:0 0 16px; }
.gdc-nb-back a{ color:var(--navy); font-weight:600; text-decoration:none; }
.gdc-nb-back a:hover{ text-decoration:underline; }



/* ==========================================================================
   8. Service cards
   ========================================================================== */
.services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:800px){ .services-grid{ grid-template-columns:1fr; } }
.service-card{
  background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius);
  padding:28px 22px 24px; box-shadow:var(--shadow); text-align:center; position:relative; overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
.service-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:5px; background:var(--gradient-accent);
}
.service-card:hover{ transform:translateY(-6px); box-shadow:0 14px 32px rgba(34,49,122,.22); }
.service-card__icon{
  width:64px; height:64px; margin:8px auto 16px; display:flex; align-items:center; justify-content:center;
  background:var(--gradient-brand); border-radius:50%; font-size:1.7rem; color:#fff;
  box-shadow:0 6px 16px rgba(34,49,122,.3); transition:transform .3s ease;
}
.service-card:hover .service-card__icon{ transform:scale(1.08) rotate(-4deg); }
.service-card h3{ font-size:1.08rem; }
.service-card p{ color:var(--text-muted); font-size:.9rem; }
.btn{
  display:inline-flex; align-items:center; gap:6px; margin-top:10px; background:var(--gradient-brand); color:#fff; padding:9px 20px;
  border-radius:8px; font-size:.85rem; font-weight:600; border:2px solid transparent;
  box-shadow:0 4px 14px rgba(34,49,122,.25); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.btn:hover{
  background:var(--gradient-brand); color:#fff; text-decoration:none; border-color:var(--saffron);
  transform:translateY(-2px); box-shadow:0 8px 22px rgba(34,49,122,.35);
}

/* ==========================================================================
   9. About + Events split section
   ========================================================================== */
.about-events{ display:grid; grid-template-columns:1.3fr .9fr; gap:34px; align-items:start; }
@media (max-width:900px){ .about-events{ grid-template-columns:1fr; } }
.about-events p{ color:var(--text); }
/* Full Event Section styling (cards, scrolling, pagination, appearance
   variables driven by Theme Options → Event Section) lives in
   assets/css/custom.css, section "Event Section". */

/* ==========================================================================
   10. Link lists (Schemes / Policies / Important Links)
   ========================================================================== */
.link-columns{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
@media (max-width:800px){ .link-columns{ grid-template-columns:1fr; } }
.link-list-box{ background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
.link-list-box__head{ background:var(--gradient-brand); color:#fff; padding:12px 18px; border-radius:var(--radius) var(--radius) 0 0; font-weight:700; font-size:.95rem; }
.link-list-box ul li a{
  display:block; padding:10px 18px; font-size:.85rem; border-bottom:1px solid var(--border); position:relative; padding-left:30px;
}
.link-list-box ul li a::before{ content:"›"; position:absolute; left:14px; color:var(--saffron); font-weight:700; }
.link-list-box ul li a:hover{ background:var(--bg); text-decoration:none; }

/* ==========================================================================
   11. Photo gallery strip
   ========================================================================== */
.gallery-strip{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
@media (max-width:900px){ .gallery-strip{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:480px){ .gallery-strip{ grid-template-columns:repeat(2,1fr); } }
.gallery-strip__item{
  display:block; overflow:hidden; border-radius:4px; padding:0; border:0;
  background:none; cursor:pointer; aspect-ratio:1/1; width:100%;
}
.gallery-strip__item[hidden]{ display:none; }
.gallery-strip__item img{ height:100%; width:100%; object-fit:cover; display:block; transition:transform .3s ease; }
.gallery-strip__item:hover img{ transform:scale(1.08); }

.gallery-strip__more-wrap{ text-align:center; margin:22px 0 0; }
#gdc-gallery-readmore .gdc-icon{ transition:transform .25s ease; }
#gdc-gallery-readmore.is-expanded .gdc-icon{ transform:rotate(90deg); }

/* -------------------------------------------------------------------------
   Photo Gallery Lightbox
   ---------------------------------------------------------------------- */
body.gdc-lightbox-open{ overflow:hidden; }

.gdc-lightbox-overlay{
  position:fixed; inset:0; z-index:10000;
  background:rgba(4,14,26,.92);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  animation:gdc-extlink-fade-in .2s ease;
}
.gdc-lightbox-overlay[hidden]{ display:none; }

.gdc-lightbox{
  position:relative; width:100%; height:100%;
  max-width:1100px; max-height:90vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  animation:gdc-lightbox-zoom-in .25s ease;
}
@keyframes gdc-lightbox-zoom-in{
  from{ opacity:0; transform:scale(.94); }
  to{ opacity:1; transform:scale(1); }
}

.gdc-lightbox__stage{
  flex:1 1 auto; width:100%; display:flex; align-items:center; justify-content:center;
  min-height:0; overflow:hidden;
}
.gdc-lightbox__image{
  max-width:100%; max-height:100%; object-fit:contain; border-radius:6px;
  box-shadow:0 10px 40px rgba(0,0,0,.5);
}

.gdc-lightbox__close{
  position:absolute; top:-4px; right:-4px; z-index:2;
  background:rgba(255,255,255,.12); border:0; color:#fff; border-radius:50%;
  width:42px; height:42px; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.gdc-lightbox__close:hover{ background:var(--saffron); color:var(--navy-dark); }

.gdc-lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  background:rgba(255,255,255,.12); border:0; color:#fff; border-radius:50%;
  width:52px; height:52px; font-size:2rem; line-height:1; display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.gdc-lightbox__nav:hover{ background:var(--saffron); color:var(--navy-dark); }
.gdc-lightbox__nav:disabled{ opacity:.3; cursor:not-allowed; }
.gdc-lightbox__nav--prev{ left:-6px; }
.gdc-lightbox__nav--next{ right:-6px; }

.gdc-lightbox__footer{ flex:0 0 auto; text-align:center; padding:14px 60px 0; max-width:100%; }
.gdc-lightbox__caption{ color:#fff; font-size:.95rem; margin:0 0 4px; }
.gdc-lightbox__counter{ color:rgba(255,255,255,.7); font-size:.8rem; margin:0; }

@media (max-width:640px){
  .gdc-lightbox-overlay{ padding:10px; }
  .gdc-lightbox__nav{ width:42px; height:42px; font-size:1.5rem; }
  .gdc-lightbox__nav--prev{ left:2px; }
  .gdc-lightbox__nav--next{ right:2px; }
  .gdc-lightbox__close{ top:6px; right:6px; width:36px; height:36px; }
  .gdc-lightbox__footer{ padding:10px 12px 0; }
}

/* ==========================================================================
   12. Footer
   ========================================================================== */
.site-footer{ background:var(--navy-dark); color:#d3e0f2; margin-top:20px; }

/* Footer columns: left = menu, middle = address, right = Google Map */
.footer-columns{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:32px;
  padding:28px 0; border-bottom:1px solid #24316f;
}
.footer-column__heading{
  font-size:1rem; font-weight:700; color:#fff; margin:0 0 12px;
  padding-bottom:8px; border-bottom:2px solid var(--saffron); display:inline-block;
}
.footer-column--menu-vertical .footer-links{
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  padding:0; border-bottom:0; font-size:.9rem;
}
.footer-column--menu-horizontal .footer-links{
  display:flex; flex-wrap:wrap; gap:18px; padding:0; border-bottom:0; font-size:.9rem;
}
.footer-address{ font-style:normal; line-height:1.7; font-size:.9rem; }
.footer-address, .footer-address *{ color:#d3e0f2 !important; background:transparent !important; }
.footer-address p{ margin:0 0 6px; }
.footer-address a, .footer-address a:visited{ color:#d3e0f2 !important; }
.footer-address a:hover{ color:var(--saffron) !important; }
.footer-map{ border-radius:6px; overflow:hidden; line-height:0; }
.footer-map iframe{ display:block; width:100%; }
@media (max-width:900px){
  .footer-columns{ grid-template-columns:1fr 1fr; }
  .footer-column--map{ grid-column:1 / -1; }
}
@media (max-width:600px){
  .footer-columns{ grid-template-columns:1fr; gap:24px; }
}

.footer-links{ display:flex; flex-wrap:wrap; gap:18px; padding:18px 0; border-bottom:1px solid #24316f; font-size:.85rem; }
.footer-links a{ color:#d3e0f2; }
.footer-links a:hover{ color:var(--saffron); }
.footer-info-row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:12px; padding:16px 0; border-top:1px solid #24316f; font-size:.85rem; text-align:center;
}
.footer-info-row strong{ color:#fff; font-weight:600; }
.footer-info-row__sep{ color:var(--saffron); font-weight:700; opacity:.8; }
@media (max-width:600px){
  .footer-info-row{ flex-direction:column; gap:6px; }
  .footer-info-row__sep{ display:none; }
}
.footer-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; padding:16px 0; border-top:1px solid #24316f; font-size:.8rem; align-items:center; }
.footer-badges{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.footer-badges img{ height:38px; width:auto; background:#fff; padding:3px; border-radius:3px; }

/* ==========================================================================
   13. Generic page/post content (page.php, single.php)
   ========================================================================== */
.page-content{ background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:30px; }
.page-content h1{ font-size:1.6rem; border-bottom:2px solid var(--saffron); padding-bottom:10px; }
.breadcrumbs{ font-size:.8rem; color:var(--text-muted); margin-bottom:16px; }
.breadcrumbs a{ color:var(--text-muted); }

/* ==========================================================================
   14. Responsive nav (mobile)
   ========================================================================== */
@media (max-width:960px){
  .menu-toggle{ display:block; margin-left:auto; }

  /* Off-canvas drawer: slides in from the left edge, doesn't push page content */
  .primary-menu{
    display:flex; flex-direction:column; flex-wrap:nowrap;
    position:fixed; top:0; left:0; bottom:0;
    width:80%; max-width:300px;
    background:var(--navy-dark);
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    z-index:1001;
    transform:translateX(-100%);
    transition:transform .28s ease;
    box-shadow:4px 0 18px rgba(0,0,0,.25);
  }
  .primary-menu.is-open{ transform:translateX(0); }

  /* Tap-outside-to-close backdrop */
  .nav-backdrop{
    position:fixed; inset:0; background:rgba(0,0,0,.45);
    z-index:1000;
  }
  .primary-menu.is-open ~ .nav-backdrop{ display:block; }
  body.nav-open{ overflow:hidden; }

  .primary-menu > li > a{ border-right:0; border-bottom:1px solid rgba(255,255,255,.1); }
  .primary-menu ul.sub-menu{ position:static; box-shadow:none; border-top:0; }
  .primary-menu ul.sub-menu ul.sub-menu{ left:0; }
  .masthead__emblem{ width:44px; }
  .masthead__title{ flex:1 1 0; min-width:0; }
  .masthead__title .masthead__site-name{ font-size:1.05rem !important; line-height:1.25; overflow-wrap:break-word; }
  .masthead__title .masthead__site-name *{ font-size:inherit !important; }
  .masthead__title > span{ font-size:.8rem; }
  .masthead__partners{
    width:100%;
    justify-content:center;
    flex-wrap:nowrap;
    gap:14px;
    margin-top:6px;
    overflow-x:auto;
  }
  .masthead__partners img{ height:32px; width:auto; flex:0 0 auto; }
}

@media (max-width:480px){
  .masthead__emblem{ width:36px; }
  .masthead__title .masthead__site-name{ font-size:.9rem !important; line-height:1.25; overflow-wrap:break-word; }
  .masthead__title .masthead__site-name *{ font-size:inherit !important; }
  .masthead__title > span{ font-size:.72rem; }
  .masthead__partners{ gap:10px; }
  .masthead__partners img{ height:26px; }
}

/* ==========================================================================
   17. Scroll-reveal animation — sections gently fade/slide into view as
   the visitor scrolls, for a livelier, more modern feel. Respects
   prefers-reduced-motion for visitors who've asked for less animation.
   ========================================================================== */
.gdc-reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity .7s ease, transform .7s ease;
}
.gdc-reveal.is-visible{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  .gdc-reveal{ opacity:1; transform:none; transition:none; }
}


/* ==========================================================================
   Large desktop scaling (>= 1401px) — fixed-pixel sizes that would otherwise
   stay small while the rem-based layout grows. Values are the original px
   sizes expressed in rem. Mobile/tablet/laptop (<= 1400px) are untouched.
   ========================================================================== */
@media (min-width:1401px){
  .masthead__emblem{ width:4rem; }
  .masthead__partners img{ height:3.5rem; }
  .hero-slider__slide img{ height:26.25rem; }
  .dean-message__photo-wrap{ width:12.5rem; }
  .nb-marquee__viewport{ height:17.5rem; }
  .primary-menu ul.sub-menu{ min-width:15rem; }
  .footer-badges img{ height:2.375rem; }
}