/* ==========================================================================
   Windowedu modern look (body.wlp-modern). Loaded only when the modern look
   is active; switching it off restores the plain OceanWP look.
   ========================================================================== */
.wlp-modern {
  --w-blue: #1f5fbf;
  --w-blue-2: #2f7be8;
  --w-navy: #0f2a55;
  --w-ink: #172033;
  --w-muted: #667085;
  --w-line: #e7ebf3;
  --w-bg: #f4f6fb;
  --w-card: #ffffff;
  --w-radius: 16px;
  --w-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 14px rgba(16, 24, 40, 0.06);
  --w-shadow-hover: 0 6px 22px rgba(31, 95, 191, 0.16);
  --w-font: "Plus Jakarta Sans", "Noto Sans Malayalam UI", "Noto Sans Malayalam", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--w-bg) !important;
  color: var(--w-ink);
  font-family: var(--w-font);
}
.wlp-modern #outer-wrap,
.wlp-modern #wrap,
.wlp-modern #main { background: transparent !important; }
.wlp-modern h1, .wlp-modern h2, .wlp-modern h3, .wlp-modern h4,
.wlp-modern .entry-title, .wlp-modern .single-post-title {
  font-family: var(--w-font) !important;
  color: var(--w-ink);
  letter-spacing: -0.01em;
}
.wlp-modern a { transition: color 0.15s ease; }

/* ---------- Header: compact, sticky, logo left + menu right ---------- */
.wlp-modern #site-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(255, 255, 255, 0.94) !important;
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--w-line) !important;
  box-shadow: 0 2px 12px rgba(16, 24, 40, 0.05);
}
.admin-bar.wlp-modern #site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar.wlp-modern #site-header { top: 0; } }
.wlp-modern #site-header-inner { display: flex; align-items: center; min-height: 64px; height: auto !important; }
.wlp-modern #site-logo { float: none; display: flex; align-items: center; }
.wlp-modern #site-logo #site-logo-inner { height: auto !important; }
.wlp-modern #site-logo img,
.wlp-modern #site-logo .custom-logo { max-height: 42px !important; width: auto !important; }
.wlp-modern #site-description { display: none !important; }
.wlp-modern #site-navigation-wrap { margin-left: auto; float: none; }
.wlp-modern #site-navigation-wrap .dropdown-menu > li > a {
  line-height: 64px !important;
  height: 64px;
  padding: 0 14px !important;
  font-family: var(--w-font);
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--w-ink) !important;
}
.wlp-modern #site-navigation-wrap .dropdown-menu > li > a:hover,
.wlp-modern #site-navigation-wrap .dropdown-menu > li.current-menu-item > a,
.wlp-modern #site-navigation-wrap .dropdown-menu > li.current_page_parent > a { color: var(--w-blue) !important; }
.wlp-modern .oceanwp-mobile-menu-icon { margin-left: auto; float: none; }
.wlp-modern .oceanwp-mobile-menu-icon a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1 !important;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--w-bg);
  color: var(--w-ink) !important;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.wlp-modern #mobile-dropdown { border-top: 1px solid var(--w-line); box-shadow: 0 10px 24px rgba(16, 24, 40, 0.08); }
.wlp-modern #mobile-dropdown ul li a { font-family: var(--w-font); font-weight: 600; padding: 12px 20px; }

/* ---------- Home: the hero + latest tiles replace the Ocean posts slider ---------- */
.wlp-modern.blog .posts-slider,
.wlp-modern.blog .oceanwp-swiper-wrapper { display: none !important; }

/* ---------- Home: hero ---------- */
.wlp-modern .wlp-home { padding-top: 18px; }
.wlp-modern .wlp-hero {
  position: relative;
  overflow: hidden;
  margin: 0 0 26px;
  padding: 30px 22px 22px;
  border-radius: 22px;
  color: #fff;
  background:
    radial-gradient(600px 220px at 100% 0%, rgba(255, 255, 255, 0.16), transparent 60%),
    radial-gradient(400px 200px at 0% 100%, rgba(47, 123, 232, 0.55), transparent 70%),
    linear-gradient(135deg, var(--w-blue) 0%, var(--w-navy) 100%);
  box-shadow: 0 12px 30px rgba(15, 42, 85, 0.25);
}
.wlp-modern .wlp-hero-title {
  margin: 0 0 6px !important;
  color: #fff !important;
  font-size: clamp(22px, 5.2vw, 34px) !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
}
.wlp-modern .wlp-hero-sub { margin: 0 0 18px; color: rgba(255, 255, 255, 0.86); font-size: 15px; }
.wlp-modern .wlp-hero .wlp-search {
  margin: 0 0 16px;
  max-width: 640px;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
.wlp-modern .wlp-hero .wlp-search button { border-radius: 0 14px 14px 0 !important; }
.wlp-modern .wlp-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.wlp-modern .wlp-chips::-webkit-scrollbar { display: none; }
.wlp-modern .wlp-chips a {
  flex: 0 0 auto;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: #fff !important;
  text-decoration: none !important;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
}
.wlp-modern .wlp-chips a:hover { background: #fff; color: var(--w-blue) !important; }

/* ---------- Home: sections become open lists of cards ---------- */
.wlp-modern .wlp-section {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  margin-bottom: 30px;
  scroll-margin-top: 90px;
}
.wlp-modern .wlp-section-title {
  padding-left: 12px;
  border-left: 4px solid var(--w-blue);
  font-size: 19px !important;
  font-weight: 800 !important;
}
.wlp-modern .wlp-head-more {
  display: inline-block;
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--w-blue) !important;
  background: #e8f0fd;
  text-decoration: none !important;
}
.wlp-modern .wlp-head-more:hover { background: var(--w-blue); color: #fff !important; }
.wlp-modern .wlp-section .wlp-more { display: none; }
.wlp-modern .wlp-tiles { gap: 12px; }

/* ---------- Tile card: thumbnail left + heading right ---------- */
.wlp-modern .wlp-tile {
  padding: 10px;
  align-items: center;
  background: var(--w-card);
  border: 1px solid var(--w-line);
  border-radius: var(--w-radius);
  box-shadow: var(--w-shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.wlp-modern .wlp-tile:hover {
  transform: translateY(-2px);
  border-color: #cfdcf3;
  box-shadow: var(--w-shadow-hover);
}
.wlp-modern .wlp-tile-thumb { flex-basis: 42%; max-width: 190px; border-radius: 12px; }
.wlp-modern .wlp-tile-title { font-family: var(--w-font); font-size: 15px; font-weight: 700; line-height: 1.6; }
.wlp-modern .wlp-tile-chip {
  display: inline-block;
  max-width: 100%;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: var(--w-blue);
  background: #e8f0fd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wlp-modern .wlp-tile-date { font-size: 12px; }
.wlp-modern .wlp-older a {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--w-card);
  border: 1px solid var(--w-line);
  box-shadow: var(--w-shadow);
  color: var(--w-blue);
  text-decoration: none;
}
.wlp-modern .wlp-search { border-radius: 14px; }

@media (min-width: 700px) {
  .wlp-modern .wlp-hero { padding: 40px 36px 28px; }
  .wlp-modern .wlp-cat-grid { gap: 0 22px; }
}
@media (min-width: 1100px) {
  .wlp-modern .wlp-hero { padding: 48px 48px 32px; }
  .wlp-modern .wlp-tile-title { font-size: 15.5px; }
}

/* ---------- Posts, pages, archives: cleaner reading ---------- */
.wlp-modern.single-post #content-wrap,
.wlp-modern.page #content-wrap,
.wlp-modern.archive #content-wrap,
.wlp-modern.search #content-wrap { padding-top: 26px; }
.wlp-modern.single-post #primary article,
.wlp-modern.page:not(.blog) #primary article,
.wlp-modern.archive #blog-entries > article,
.wlp-modern.search #blog-entries > article {
  padding: clamp(16px, 4vw, 34px);
  background: var(--w-card);
  border: 1px solid var(--w-line);
  border-radius: 20px;
  box-shadow: var(--w-shadow);
  margin-bottom: 22px;
}
.wlp-modern .single-post-title,
.wlp-modern.single-post .entry-header h1 {
  font-size: clamp(24px, 4.6vw, 36px) !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}
.wlp-modern .entry-content {
  font-family: var(--w-font);
  font-size: 17.5px;
  line-height: 1.85;
  color: #243046;
}
.wlp-modern .entry-content h2 { font-size: 24px; font-weight: 800; margin: 1.6em 0 0.6em; }
.wlp-modern .entry-content h3 { font-size: 20px; font-weight: 700; margin: 1.4em 0 0.5em; }
.wlp-modern .entry-content a { color: var(--w-blue); }
.wlp-modern .entry-content img,
.wlp-modern .thumbnail img { border-radius: 14px; }
.wlp-modern .entry-content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.wlp-modern .entry-content th,
.wlp-modern .entry-content td { padding: 8px 12px; border: 1px solid var(--w-line); }
.wlp-modern .entry-content th { background: #f1f5fd; }
.wlp-modern .entry-content .wp-block-embed-youtube iframe { border-radius: 14px; }
.wlp-modern .wlp-source { padding: 12px 14px; border-radius: 12px; background: #f1f5fd; font-size: 15px; }
.wlp-modern ul.meta li,
.wlp-modern ul.meta li a { color: var(--w-muted); font-family: var(--w-font); }
.wlp-modern #right-sidebar .sidebar-box {
  padding: 18px;
  background: var(--w-card);
  border: 1px solid var(--w-line);
  border-radius: 16px;
  box-shadow: var(--w-shadow);
}
.wlp-modern .page-header { background: transparent; border: 0; }
.wlp-modern .oceanwp-pagination .page-numbers { border-radius: 10px; }

/* ---------- Footer: dark navy ---------- */
.wlp-modern #footer,
.wlp-modern #footer-bottom {
  background: var(--w-navy) !important;
  color: rgba(255, 255, 255, 0.78) !important;
}
.wlp-modern #footer-bottom { padding: 26px 0 !important; border-top: 0 !important; }
.wlp-modern #footer-bottom a,
.wlp-modern #footer-bottom #footer-bottom-menu a { color: #fff !important; font-weight: 600; }
.wlp-modern #footer-bottom a:hover { color: #9cc2ff !important; }
.wlp-modern #footer-bottom #copyright { color: rgba(255, 255, 255, 0.7) !important; }
@media (max-width: 959px) {
  .wlp-modern #footer-bottom #footer-bottom-menu,
  .wlp-modern #footer-bottom #copyright { float: none; width: 100%; text-align: center; }
  .wlp-modern #footer-bottom #footer-bottom-menu ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; }
}
.wlp-modern #scroll-top { border-radius: 12px; background: var(--w-blue); }

/* ---------- Quiz picks up the brand font ---------- */
.wlp-modern .wlp-quiz { font-family: var(--w-font); }
.wlp-modern .wlp-quiz .wlp-box { border-radius: 18px; }

/* Image-less tiles already show the category on the brand image */
.wlp-modern .wlp-tile.is-ph .wlp-tile-chip { display: none; }

/* Social icons point to "#": hidden until real links are added */
.wlp-modern .oceanwp-social-menu { display: none !important; }

/* Chapter posts: the video already shows its thumbnail */
.wlp-modern.wlp-has-video.single-post .thumbnail { display: none !important; }

/* ---------- Navigation card on every page: Home tab, search, category chips ---------- */
.wlp-modern .wlp-subnav { padding: 14px 0 0; }
.wlp-modern .wlp-subnav-inner {
  padding: 12px !important;
  background: var(--w-card);
  border: 1px solid var(--w-line);
  border-radius: 18px;
  box-shadow: var(--w-shadow);
}
.wlp-modern .wlp-subnav-top { display: flex; gap: 10px; align-items: center; }
.wlp-modern .wlp-home-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 14px;
  color: var(--w-blue) !important;
  background: #e8f0fd;
  text-decoration: none !important;
}
.wlp-modern .wlp-home-tab.is-active,
.wlp-modern .wlp-home-tab:hover { color: #fff !important; background: var(--w-blue); }
.wlp-modern .wlp-subnav-search {
  flex: 1;
  min-width: 0;
  display: flex;
  height: 44px;
  border: 1.5px solid var(--w-line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.wlp-modern .wlp-subnav-search:focus-within { border-color: var(--w-blue); }
.wlp-modern .wlp-subnav-search input[type="search"] {
  flex: 1;
  min-width: 0;
  height: 100% !important;
  padding: 0 12px !important;
  font-size: 15px;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  outline: none;
}
.wlp-modern .wlp-subnav-search button {
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  color: #fff !important;
  background: var(--w-blue) !important;
  border: 0 !important;
  border-radius: 0 !important;
  cursor: pointer;
}
.wlp-modern .wlp-subnav-chips {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.wlp-modern .wlp-subnav-chips::-webkit-scrollbar { display: none; }
.wlp-modern .wlp-chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--w-ink) !important;
  background: var(--w-bg);
  border: 1px solid var(--w-line);
  text-decoration: none !important;
}
.wlp-modern .wlp-chip:hover { border-color: var(--w-blue); color: var(--w-blue) !important; }
.wlp-modern .wlp-chip.is-active { color: #fff !important; background: var(--w-blue); border-color: var(--w-blue); }
@media (max-width: 420px) {
  .wlp-modern .wlp-home-tab span { display: none; }
  .wlp-modern .wlp-home-tab { padding: 0 13px; }
}
/* The navigation card does the search now; pages start right below it */
.wlp-modern .wlp-home { padding-top: 6px; }
.wlp-modern.single-post #content-wrap,
.wlp-modern.page #content-wrap,
.wlp-modern.archive #content-wrap,
.wlp-modern.search #content-wrap { padding-top: 16px; }
