/*
Theme Name: Iconic One MJU
Theme URI: https://staging.myjobupdates.com/
Description: Child theme of Iconic One — frontend redesign for the MyJobUpdates govt-jobs portal. Card-based, mobile-first, system-font, deep-blue trust palette with restrained saffron accents.
Author: MJU Team
Author URI: https://myjobupdates.com/
Template: iconic-one
Version: 1.2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: iconic-one-mju
*/

@import url("../iconic-one/style.css");

/* ============================================================
   MJU CHILD THEME — Global tokens & resets (toned-down palette)
   ============================================================ */

:root {
	/* PRIMARY brand — deep, professional, govt-trust feel */
	--mju-primary:        #0F2C59;   /* deep navy — main brand color */
	--mju-primary-dark:   #0A1F40;   /* hover/active state */
	--mju-primary-light:  #2A4A82;   /* lighter navy */
	--mju-primary-soft:   #E6EBF3;   /* very light tint for subtle bg accents */

	/* ACCENTS — used sparingly */
	--mju-accent:         #FF6B35;   /* India green — primary CTA only */
	--mju-accent-dark:    #E5511D;
	--mju-success:        #138808;
	--mju-saffron:        #FF6B35;   /* SPARINGLY — logo accent, top stripe, small badges */
	--mju-saffron-dark:   #E07B1F;
	--mju-saffron-soft:   #FFF5F0;   /* very subtle tint for "expiring soon" backgrounds */
	--mju-urgency:        #DC2626;   /* red — homepage "Expiring Soon" badge only */
	--mju-alert:          #DC2626;
	--mju-warning:        #F59E0B;
	--mju-warn:           #F59E0B;

	/* NEUTRALS — backbone of design */
	--mju-bg:             #FFFFFF;
	--mju-surface:        #F8FAFC;   /* cards/sections */
	--mju-surface-alt:    #F1F5F9;
	--mju-border:         #E2E8F0;
	--mju-border-strong:  #CBD5E1;
	--mju-text:           #0F172A;
	--mju-text-soft:      #475569;
	--mju-text-muted:     #475569;
	--mju-text-faint:     #94A3B8;

	/* Geometry & shadow */
	--mju-radius:         8px;
	--mju-radius-lg:      12px;
	--mju-shadow-sm:      0 1px 2px rgba(15, 44, 89, 0.06);
	--mju-shadow:         0 2px 6px rgba(15, 44, 89, 0.08);
	--mju-shadow-hover:   0 8px 24px rgba(15, 44, 89, 0.12);

	/* Hero — clean white, no gradient. Saffron stripe is decorative. */
	--mju-hero-bg:        #FFFFFF;

	--mju-font:           -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body.mju-themed,
body.mju-themed input,
body.mju-themed button,
body.mju-themed textarea,
body.mju-themed select {
	font-family: var(--mju-font);
	color: var(--mju-text);
	background: var(--mju-bg);
}

body.mju-themed a { color: var(--mju-primary); text-decoration: none; }
body.mju-themed a:hover { color: var(--mju-primary-dark); text-decoration: none; }

body.mju-themed h1,
body.mju-themed h2,
body.mju-themed h3,
body.mju-themed h4 {
	font-family: var(--mju-font);
	font-weight: 700;
	color: var(--mju-text);
	letter-spacing: -0.01em;
}

/* Container utility */
.mju-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 16px;
	box-sizing: border-box;
}

/* Focus states (a11y) */
body.mju-themed a:focus-visible,
body.mju-themed button:focus-visible,
body.mju-themed input:focus-visible,
body.mju-themed select:focus-visible,
body.mju-themed textarea:focus-visible,
body.mju-themed [tabindex]:focus-visible {
	outline: 2px solid var(--mju-primary);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Brand logo (header) */
.mju-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; line-height: 1.15; }
.mju-brand:hover { text-decoration: none; }
.mju-brand__mark { flex-shrink: 0; display: block; }
.mju-brand__text { font-weight: 800; font-size: 22px; letter-spacing: -0.5px; line-height: 1; }
.mju-brand__primary { color: var(--mju-primary); }
.mju-brand__accent { color: var(--mju-saffron); }
.mju-brand__tagline { display: block; font-weight: 400; font-size: .7rem; opacity: .75; letter-spacing: .02em; color: var(--mju-text-muted); margin-top: 2px; }
@media (max-width: 600px) {
	.mju-brand__text { font-size: 18px; }
	.mju-brand__tagline { display: none; }
}

/* Saffron top stripe (decorative tricolor reference) */
.mju-saffron-stripe {
	height: 4px;
	background: var(--mju-saffron);
	width: 100%;
}

/* Print-friendly */
@media print {
	.mju-no-print, .mju-share, .mju-apply-sticky, .mju-filters, header, footer { display: none !important; }
	.mju-card { box-shadow: none !important; border: 1px solid #ccc !important; }
}

/* ============================================================
   Mobile menu (1.76.0) — card-grid drawer with accordion sections.
   Off-canvas drawer slides in from the right with a blurred backdrop.
   Sticky close-X stays visible while the body scrolls. Native
   <details>/<summary> drives collapse — zero JS.
   ============================================================ */
.mju-nav__mobile { display: none; }
@media (min-width: 721px) {
	.mju-nav__mobile { display: none !important; }
}

body.mju-menu-open .mju-nav {
	flex-direction: column;
	align-items: stretch;
}
body.mju-menu-open .mju-nav__desktop { display: none; }
body.mju-menu-open .mju-nav__mobile { display: block; }

/* Backdrop behind the drawer (uses ::before on body for blur). */
body.mju-menu-open::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 999;
	background: rgba(15, 44, 89, 0.32);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	animation: mju-mm-fade 0.2s ease both;
}

/* Slide-in animation for the drawer panel. */
@media (max-width: 720px) {
	body.mju-menu-open .mju-nav {
		animation: mju-mm-slide-in 0.25s ease both;
	}
}
@keyframes mju-mm-slide-in {
	from { transform: translateX(8%); opacity: 0; }
	to   { transform: translateX(0);  opacity: 1; }
}
@keyframes mju-mm-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Sticky drawer header — small title + close-X stays visible while scrolling.
   The close-X itself is rendered outside .mju-nav, so the title here is the
   "Browse Jobs" label baked into the drawer. */
.mju-mm-header {
	position: sticky;
	top: 0;
	margin: 0 -16px 12px;
	padding: 14px 56px 12px 20px;
	background: rgba(255, 255, 255, 0.96);
	-webkit-backdrop-filter: saturate(180%) blur(10px);
	backdrop-filter: saturate(180%) blur(10px);
	border-bottom: 1px solid var(--mju-border);
	z-index: 5;
	min-height: 56px;
	display: flex;
	align-items: center;
}
.mju-mm-header__title {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mju-primary);
}

/* Section accordion. */
.mju-mm-section {
	border-top: 1px solid var(--mju-border);
	border-bottom: 1px solid var(--mju-border);
	background: #fff;
	margin: -1px 0 0;
}
.mju-mm-section__summary {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	padding: 14px 16px;
	min-height: 48px;
	list-style: none;
	color: var(--mju-primary);
	user-select: none;
}
.mju-mm-section__summary::-webkit-details-marker { display: none; }
.mju-mm-section__icon {
	flex-shrink: 0;
	display: inline-flex;
	width: 20px;
	height: 20px;
	color: var(--mju-primary);
}
.mju-mm-section__title {
	flex: 1;
	min-width: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--mju-primary);
	letter-spacing: -0.01em;
}
.mju-mm-section__chevron {
	flex-shrink: 0;
	display: inline-flex;
	color: var(--mju-text-soft);
	transition: transform 0.2s ease, color 0.2s ease;
}
.mju-mm-section[open] > .mju-mm-section__summary .mju-mm-section__chevron {
	transform: rotate(90deg);
	color: var(--mju-saffron);
}
.mju-mm-section[open] > .mju-mm-section__summary {
	background: var(--mju-primary-soft);
}

/* Card grid inside each section. */
.mju-mm-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	padding: 8px 12px 14px;
	background: var(--mju-surface);
}

.mju-mm-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 4px;
	min-height: 56px;
	padding: 10px 10px;
	background: #fff;
	border: 1px solid var(--mju-border);
	border-radius: 8px;
	color: var(--mju-primary);
	overflow: hidden;
	box-sizing: border-box;
	min-width: 0;
	max-width: 100%;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.mju-mm-card__row {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	width: 100%;
	max-width: 100%;
}
.mju-mm-card__icon {
	flex-shrink: 0;
	display: inline-flex;
	width: 14px;
	height: 14px;
	color: var(--mju-primary-light);
}
.mju-mm-card__label {
	flex: 1;
	min-width: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--mju-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mju-mm-card__pill {
	align-self: flex-start;
	font-size: 11px;
	font-weight: 700;
	color: var(--mju-saffron);
	background: var(--mju-saffron-soft);
	padding: 2px 8px;
	border-radius: 999px;
	line-height: 1.5;
}
.mju-mm-card__pill--explore {
	color: var(--mju-saffron);
	background: var(--mju-saffron-soft);
}
.mju-mm-card:hover,
.mju-mm-card:focus-visible,
.mju-mm-card:active {
	background: var(--mju-cta-light, #FFF5F0);
	border-color: var(--mju-cta);
	color: var(--mju-primary);
	transform: translateY(-1px);
	text-decoration: none;
}
.mju-mm-card:hover .mju-mm-card__label,
.mju-mm-card:focus-visible .mju-mm-card__label,
.mju-mm-card:active .mju-mm-card__label {
	color: var(--mju-primary) !important;
}
.mju-mm-card:hover .mju-mm-card__icon,
.mju-mm-card:focus-visible .mju-mm-card__icon,
.mju-mm-card:active .mju-mm-card__icon {
	color: var(--mju-cta) !important;
}
.mju-mm-card:hover .mju-mm-card__pill,
.mju-mm-card:focus-visible .mju-mm-card__pill,
.mju-mm-card:active .mju-mm-card__pill {
	color: #fff;
	background: var(--mju-cta);
}

/* Bottom utility links — small grey text-links separated by middots. */
.mju-mm-divider {
	height: 1px;
	background: var(--mju-border);
	margin: 18px 0 0;
}
.mju-mm-utility {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px 8px;
	padding: 16px 12px 8px;
	font-size: 13px;
	color: #64748B;
	text-align: center;
}
.mju-mm-utility a {
	color: #64748B;
	text-decoration: none;
	padding: 4px 2px;
}
.mju-mm-utility a:hover,
.mju-mm-utility a:focus-visible {
	color: var(--mju-primary);
	text-decoration: underline;
}
.mju-mm-utility span { color: #CBD5E1; }

/* Smooth scroll inside the drawer. */
body.mju-menu-open .mju-nav {
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
}

/* ─── Mobile menu overflow guards (prevent x-axis scroll) ─── */
.mju-nav__mobile,
.mju-nav__mobile *,
.mju-mm-section,
.mju-mm-grid,
.mju-mm-card,
.mju-mm-card__row,
.mju-mm-card__label,
.mju-mm-card__pill {
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.mju-nav__mobile {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
}
.mju-mm-grid {
  width: 100% !important;
  box-sizing: border-box !important;
}
.mju-mm-card__label {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* On very narrow screens fall back to 1-column to avoid squashing long state names */
@media (max-width: 340px) {
  .mju-mm-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ─── Mobile menu — full-height drawer with internal scroll (iOS-safe) ─── */
body.mju-menu-open .mju-nav {
  position: fixed !important;
  inset: 0 !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  /* Bottom space so last items aren't clipped by browser chrome / home indicator */
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 120px) !important;
  box-sizing: border-box !important;
}
.mju-nav__mobile {
  height: auto !important;
  min-height: 0 !important;
  padding-bottom: 0 !important;
}
.mju-mm-utility {
  margin-bottom: 0 !important;
  padding-bottom: 24px !important;
}

/* ─── Mobile menu — sticky header overlap fix ─── */
.mju-mm-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15,44,89,0.06);
}
/* First details element gets a small margin-top so its summary doesn't sit flush under the header */
.mju-nav__mobile > .mju-mm-section:first-of-type {
  margin-top: 4px !important;
}
/* When a section is OPEN, ensure its content has clear space below the sticky header
   when scrolled — handled via scroll-padding on the drawer */
body.mju-menu-open .mju-nav {
  scroll-padding-top: 64px !important;
}


/* ─── FINAL: clean sticky header — no negative offset, no card overlap ─── */
.mju-mm-header {
  position: sticky !important;
  top: 0 !important;
  margin-top: 0 !important;
  z-index: 12 !important;
  background: #fff !important;
  box-shadow: 0 2px 6px rgba(15,44,89,0.08) !important;
}
.mju-nav__mobile {
  padding-top: 8px !important;
}
.mju-nav__mobile > .mju-mm-section:first-of-type {
  margin-top: 0 !important;
}