/* =========================================================
   KANNADAGK - KARNATAKA GEOGRAPHY COMMON CSS
   Used by all Karnataka Geography pages
========================================================= */


/* =========================================================
   PAGE
========================================================= */

.geo-page {
  background: #f6f8fb;
  min-height: 100vh;
  padding-bottom: 60px;
}

.geo-container {
  width: min(1180px, 92%);
  margin: auto;
}


/* =========================================================
   ARTICLE HERO
========================================================= */

.geo-article-hero {
  display: block;
  position: relative;

  background: linear-gradient(135deg, #064e3b, #087f4f);

  color: #fff;

  padding: 42px 0;

  width: 100%;
}

.geo-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;

  margin-bottom: 18px;

  font-size: 13px;

  color: rgba(255,255,255,.72);
}

.geo-breadcrumb a {
  color: #fff;
  text-decoration: none;
}

.geo-breadcrumb a:hover {
  text-decoration: underline;
}

.geo-section-label {
  display: inline-block;

  padding: 5px 12px;

  border-radius: 30px;

  background: #e7f7ee;

  color: #087443;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: .3px;
}

.geo-article-hero .geo-section-label {
  background: rgba(255,255,255,.12);

  color: #d9ffe8;

  border: 1px solid rgba(255,255,255,.15);
}

.geo-article-hero h1 {
  margin: 12px 0 10px;

  font-size: clamp(30px, 5vw, 46px);

  line-height: 1.25;
}

.geo-article-hero p {
  max-width: 760px;

  margin: 0;

  color: rgba(255,255,255,.84);

  font-size: 16px;

  line-height: 1.8;
}


/* =========================================================
   🔥 TOP WHATSAPP CHANNEL BAR
   IMPORTANT:
   This appears AFTER HERO and BEFORE GEO LAYOUT
========================================================= */

.kannadagk-wa-topbar {
  display: block !important;

  position: relative !important;

  width: 100% !important;

  height: auto !important;

  min-height: 58px;

  margin: 0 !important;

  padding: 0 !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  float: none !important;

  clear: both !important;

  overflow: visible;

  background:
    linear-gradient(
      90deg,
      #075e54 0%,
      #128c7e 50%,
      #075e54 100%
    );

  color: #fff;

  border: 0;

  box-shadow:
    0 4px 14px rgba(7,94,84,.16);

  z-index: 5;
}


/* WhatsApp bar container */

.kannadagk-wa-topbar-inner {
  display: flex !important;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

  min-height: 58px;

  padding-top: 9px;

  padding-bottom: 9px;
}


/* Message */

.kannadagk-wa-message {
  display: flex !important;

  align-items: center;

  gap: 8px;

  min-width: 0;

  color: #fff;

  font-size: 14px;

  line-height: 1.5;
}

.kannadagk-wa-message > span:first-child {
  flex-shrink: 0;

  font-size: 17px;
}

.kannadagk-wa-message strong {
  color: #fff;

  font-weight: 800;
}


/* Join button */

.kannadagk-wa-join {
  display: inline-flex !important;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  padding: 9px 17px;

  border-radius: 30px;

  background: #25d366;

  color: #fff !important;

  text-decoration: none !important;

  font-size: 12px;

  font-weight: 800;

  line-height: 1;

  white-space: nowrap;

  box-shadow:
    0 5px 15px rgba(0,0,0,.18);

  transition:
    transform .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}

.kannadagk-wa-join:hover {
  background: #20bd5a;

  color: #fff !important;

  transform: translateY(-2px);

  box-shadow:
    0 8px 20px rgba(0,0,0,.22);
}


/* =========================================================
   CONTENT + SIDEBAR LAYOUT
========================================================= */

.geo-layout {
  display: grid;

  grid-template-columns: 270px minmax(0, 1fr);

  gap: 28px;

  align-items: start;

  padding-top: 35px;
}


/* =========================================================
   SIDEBAR
========================================================= */

.geo-sidebar {
  position: sticky;

  top: 20px;

  background: #fff;

  border: 1px solid #e2e9e5;

  border-radius: 18px;

  padding: 14px;

  box-shadow:
    0 8px 25px rgba(20,50,35,.05);
}


/* Sidebar Header */

.geo-sidebar-header {
  display: flex;

  align-items: center;

  gap: 11px;

  padding: 8px 8px 15px;

  border-bottom: 1px solid #edf1ef;

  margin-bottom: 10px;
}

.geo-sidebar-logo {
  width: 42px;
  height: 42px;

  display: grid;

  place-items: center;

  flex-shrink: 0;

  border-radius: 12px;

  background:
    linear-gradient(
      135deg,
      #e8f7ef,
      #d8f0e3
    );

  font-size: 21px;
}

.geo-sidebar-header h2 {
  margin: 0;

  color: #17231d;

  font-size: 16px;
}

.geo-sidebar-header p {
  margin: 2px 0 0;

  color: #7a867f;

  font-size: 11px;
}


/* Sidebar Navigation */

.geo-sidebar-nav {
  display: flex;

  flex-direction: column;

  gap: 3px;
}

.geo-sidebar-nav a {
  display: flex;

  align-items: center;

  gap: 10px;

  padding: 9px 10px;

  border-radius: 10px;

  color: #4d5a53;

  text-decoration: none;

  font-size: 13px;

  transition: .2s ease;
}

.geo-sidebar-nav a:hover {
  background: #f0f8f4;

  color: #087443;
}

.geo-sidebar-nav a.active {
  background:
    linear-gradient(
      90deg,
      #e5f6ec,
      #f1faf5
    );

  color: #087443;

  font-weight: 700;
}

.geo-sidebar-number {
  width: 25px;
  height: 25px;

  flex-shrink: 0;

  display: grid;

  place-items: center;

  border-radius: 7px;

  background: #f3f5f4;

  color: #78837d;

  font-size: 10px;

  font-weight: 800;
}

.geo-sidebar-nav a.active .geo-sidebar-number {
  background: #087443;

  color: #fff;
}

.geo-sidebar-arrow {
  margin-left: auto;

  color: #a0aaa4;

  font-size: 15px;
}


/* Sidebar Bottom Tools */

.geo-sidebar-tools {
  margin-top: 12px;

  padding-top: 12px;

  border-top: 1px solid #edf1ef;

  display: grid;

  gap: 7px;
}

.geo-sidebar-tool {
  display: flex;

  align-items: center;

  gap: 9px;

  padding: 10px;

  border-radius: 10px;

  text-decoration: none;

  font-size: 12px;

  font-weight: 700;
}

.geo-sidebar-tool.quiz {
  background: #edf9f2;

  color: #087443;
}

.geo-sidebar-tool.mock {
  background: #fff4e9;

  color: #a35408;
}

.geo-sidebar-tool:hover {
  filter: brightness(.97);
}


/* =========================================================
   ARTICLE CONTENT
========================================================= */

.geo-content {
  min-width: 0;
}

.geo-content-section {
  background: #fff;

  border: 1px solid #e2e9e5;

  border-radius: 18px;

  padding: 27px;

  margin-bottom: 20px;
}

.geo-content-section h2 {
  position: relative;

  margin: 0 0 14px;

  padding-left: 13px;

  color: #17231d;

  font-size: 23px;

  line-height: 1.4;
}

.geo-content-section h2::before {
  content: "";

  position: absolute;

  left: 0;

  top: 4px;

  bottom: 4px;

  width: 4px;

  border-radius: 10px;

  background: #087443;
}

.geo-content-section h3 {
  margin: 22px 0 8px;

  color: #24332b;

  font-size: 18px;
}

.geo-content-section p {
  margin: 0 0 13px;

  color: #59665f;

  font-size: 15px;

  line-height: 1.85;
}

.geo-content-section p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   QUICK FACTS
========================================================= */

.geo-info-box {
  background:
    linear-gradient(
      135deg,
      #edf9f2,
      #f8fcfa
    );

  border: 1px solid #d7e9df;

  border-radius: 18px;

  padding: 22px;

  margin-bottom: 20px;
}

.geo-info-box-title {
  color: #087443;

  font-size: 16px;

  font-weight: 800;

  margin-bottom: 14px;
}

.geo-facts-grid {
  display: grid;

  grid-template-columns: repeat(4,1fr);

  gap: 10px;
}

.geo-fact-card {
  background: #fff;

  border: 1px solid #e2ebe6;

  border-radius: 12px;

  padding: 13px;
}

.geo-fact-card span {
  display: block;

  color: #7a867f;

  font-size: 11px;

  margin-bottom: 4px;
}

.geo-fact-card strong {
  color: #26352d;

  font-size: 14px;
}


/* =========================================================
   TABLE
========================================================= */

.geo-table-wrapper {
  overflow-x: auto;

  margin-top: 18px;
}

.geo-table {
  width: 100%;

  border-collapse: collapse;

  min-width: 520px;

  background: #fff;
}

.geo-table th,
.geo-table td {
  padding: 13px 15px;

  text-align: left;

  border-bottom: 1px solid #e7ece9;

  font-size: 14px;
}

.geo-table th {
  background: #edf8f2;

  color: #075f39;

  font-weight: 800;
}

.geo-table td {
  color: #53615a;
}

.geo-table tr:last-child td {
  border-bottom: 0;
}

.geo-table tbody tr:hover {
  background: #fafcfb;
}


/* =========================================================
   HIGHLIGHT CARDS
========================================================= */

.geo-highlight-grid {
  display: grid;

  grid-template-columns: repeat(2,1fr);

  gap: 14px;

  margin-top: 18px;
}

.geo-highlight {
  padding: 19px;

  border-radius: 14px;

  background: #f7faf8;

  border: 1px solid #e3ebe6;
}

.geo-highlight-icon {
  font-size: 25px;
}

.geo-highlight h3 {
  margin: 8px 0 5px;

  font-size: 17px;
}

.geo-highlight p {
  font-size: 13px;
}


/* =========================================================
   REGION CARDS
========================================================= */

.geo-region-grid {
  display: grid;

  grid-template-columns: repeat(2,1fr);

  gap: 14px;

  margin-top: 18px;
}

.geo-region-card {
  padding: 20px;

  border: 1px solid #e3e9e6;

  border-radius: 14px;

  background: #fff;

  transition: .2s ease;
}

.geo-region-card:hover {
  transform: translateY(-2px);

  box-shadow:
    0 8px 22px rgba(0,0,0,.05);
}

.geo-region-icon {
  font-size: 25px;

  margin-bottom: 8px;
}

.geo-region-card h3 {
  margin: 0 0 7px;

  color: #1d2c24;

  font-size: 17px;
}

.geo-region-card p {
  margin: 0;

  color: #66736c;

  font-size: 13px;

  line-height: 1.7;
}


/* =========================================================
   EXAM BOX
========================================================= */

.geo-exam-box {
  background: #102c21;

  color: #fff;

  border-radius: 18px;

  padding: 25px;

  margin-bottom: 22px;
}

.geo-exam-box h2 {
  margin: 0 0 15px;

  font-size: 21px;
}

.geo-exam-box ul {
  margin: 0;

  padding-left: 20px;
}

.geo-exam-box li {
  margin-bottom: 9px;

  color: rgba(255,255,255,.84);

  font-size: 14px;

  line-height: 1.65;
}

.geo-exam-box li:last-child {
  margin-bottom: 0;
}


/* =========================================================
   RELATED CHAPTERS
========================================================= */

.geo-related {
  margin-top: 10px;

  margin-bottom: 22px;
}

.geo-section-heading.left {
  margin-bottom: 15px;
}

.geo-section-heading.left h2 {
  margin: 5px 0 0;

  font-size: 22px;

  color: #17231d;
}

.geo-related-grid {
  display: grid;

  grid-template-columns: repeat(3,1fr);

  gap: 12px;
}

.geo-related-card {
  display: flex;

  align-items: center;

  gap: 11px;

  padding: 15px;

  background: #fff;

  border: 1px solid #e2e9e5;

  border-radius: 13px;

  color: #25342c;

  text-decoration: none;

  transition: .2s ease;
}

.geo-related-card:hover {
  border-color: #bcdcca;

  transform: translateY(-2px);
}

.geo-related-card > span {
  font-size: 23px;
}

.geo-related-card strong {
  display: block;

  font-size: 13px;

  margin-bottom: 3px;
}

.geo-related-card small {
  color: #087443;

  font-size: 11px;
}


/* =========================================================
   BOTTOM QUIZ CTA
========================================================= */

.geo-bottom-cta {
  background:
    linear-gradient(
      135deg,
      #f28b28,
      #dd690d
    );

  border-radius: 18px;

  color: #fff;

  text-align: center;

  padding: 30px 20px;

  margin-bottom: 22px;
}

.geo-bottom-cta h2 {
  margin: 0 0 7px;

  font-size: 25px;
}

.geo-bottom-cta p {
  margin: 0 0 17px;

  color: rgba(255,255,255,.88);

  font-size: 14px;
}

.geo-cta-buttons {
  display: flex;

  justify-content: center;

  gap: 9px;

  flex-wrap: wrap;
}

.geo-cta-button {
  display: inline-block;

  padding: 10px 17px;

  border-radius: 9px;

  background: #fff;

  color: #a45100;

  font-size: 13px;

  font-weight: 800;

  text-decoration: none;
}

.geo-cta-button:hover {
  background: #fff8f0;
}


/* =========================================================
   PREVIOUS / NEXT
========================================================= */

.geo-chapter-navigation {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 12px;
}

.geo-prev,
.geo-next {
  display: flex;

  align-items: center;

  gap: 12px;

  padding: 15px;

  background: #fff;

  border: 1px solid #e2e9e5;

  border-radius: 13px;

  text-decoration: none;

  color: #27362e;
}

.geo-next {
  justify-content: flex-end;

  text-align: right;
}

.geo-prev > span,
.geo-next > span {
  font-size: 21px;

  color: #087443;
}

.geo-prev small,
.geo-next small {
  display: block;

  color: #7b8781;

  font-size: 10px;

  margin-bottom: 3px;
}

.geo-prev strong,
.geo-next strong {
  font-size: 13px;
}

.geo-prev:hover,
.geo-next:hover {
  border-color: #bcdcca;
}


/* =========================================================
   PREMIUM WHATSAPP SIDEBAR CARD
========================================================= */

.geo-whatsapp-premium {
  position: relative;

  overflow: hidden;

  margin-top: 22px;

  padding: 22px;

  border-radius: 22px;

  background:
    linear-gradient(
      145deg,
      #075e54 0%,
      #128c7e 55%,
      #25d366 150%
    );

  color: #fff;

  box-shadow:
    0 15px 40px rgba(7,94,84,.25);

  border: 1px solid rgba(255,255,255,0.18);
}


/* Soft glow */

.geo-wa-glow {
  position: absolute;

  width: 150px;
  height: 150px;

  right: -60px;
  top: -60px;

  background: rgba(255,255,255,0.12);

  border-radius: 50%;

  filter: blur(5px);
}


/* Top */

.geo-wa-top {
  position: relative;

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 16px;
}


/* Icon */

.geo-wa-icon {
  width: 52px;
  height: 52px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 16px;

  background: #25d366;

  box-shadow:
    0 8px 20px rgba(0,0,0,0.18);

  font-size: 26px;
}


/* Badge */

.geo-wa-badge {
  padding: 6px 9px;

  border-radius: 30px;

  background: rgba(255,255,255,0.15);

  border: 1px solid rgba(255,255,255,0.25);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: .6px;
}


/* Heading */

.geo-whatsapp-premium h3 {
  position: relative;

  margin: 0 0 9px;

  font-size: 18px;

  line-height: 1.35;

  color: #fff;
}


/* Description */

.geo-whatsapp-premium p {
  position: relative;

  margin: 0 0 17px;

  color: rgba(255,255,255,.88);

  font-size: 13px;

  line-height: 1.65;
}


/* Main button */

.geo-wa-premium-button {
  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  width: 100%;

  padding: 13px 15px;

  border-radius: 13px;

  background: #fff;

  color: #075e54;

  text-decoration: none;

  font-size: 14px;

  font-weight: 800;

  box-shadow:
    0 8px 20px rgba(0,0,0,.16);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.geo-wa-premium-button strong {
  font-size: 17px;
}

.geo-wa-premium-button:hover {
  transform: translateY(-3px);

  box-shadow:
    0 12px 25px rgba(0,0,0,.22);
}


/* Bottom note */

.geo-wa-note {
  position: relative;

  margin-top: 13px;

  text-align: center;

  color: rgba(255,255,255,.78);

  font-size: 11px;
}


/* =========================================================
   ARTICLE WHATSAPP CTA
========================================================= */

.geo-whatsapp-cta {
  display: flex;

  align-items: center;

  gap: 18px;

  margin: 25px 0;

  padding: 23px;

  border-radius: 18px;

  background:
    linear-gradient(
      135deg,
      #075e54,
      #128c7e
    );

  color: #fff;

  box-shadow:
    0 10px 30px rgba(7,94,84,.18);
}

.geo-whatsapp-cta-icon {
  width: 55px;
  height: 55px;

  flex-shrink: 0;

  display: grid;

  place-items: center;

  border-radius: 15px;

  background: #25d366;

  font-size: 25px;
}

.geo-whatsapp-cta-content {
  flex: 1;
}

.geo-whatsapp-cta .geo-section-label {
  background: rgba(255,255,255,.13);

  color: #d8ffe8;

  border: 1px solid rgba(255,255,255,.15);
}

.geo-whatsapp-cta h2 {
  margin: 8px 0 6px;

  color: #fff;

  font-size: 21px;

  line-height: 1.4;
}

.geo-whatsapp-cta p {
  margin: 0;

  color: rgba(255,255,255,.84);

  font-size: 13px;

  line-height: 1.7;
}

.geo-whatsapp-button {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  padding: 11px 16px;

  border-radius: 10px;

  background: #25d366;

  color: #fff;

  text-decoration: none;

  font-size: 12px;

  font-weight: 800;

  white-space: nowrap;

  transition: .2s ease;
}

.geo-whatsapp-button:hover {
  background: #20bd5a;

  transform: translateY(-2px);
}


/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media (max-width: 950px) {

  .geo-layout {
    grid-template-columns: 225px minmax(0,1fr);

    gap: 18px;
  }

  .geo-sidebar {
    padding: 10px;
  }

  .geo-facts-grid {
    grid-template-columns: repeat(2,1fr);
  }

  .geo-related-grid {
    grid-template-columns: 1fr;
  }

  .geo-whatsapp-cta {
    flex-wrap: wrap;
  }

  .geo-whatsapp-button {
    width: 100%;
  }

}


/* =========================================================
   RESPONSIVE - MOBILE
========================================================= */

@media (max-width: 720px) {

  .geo-layout {
    display: block;

    padding-top: 20px;
  }

  .geo-sidebar {
    position: static;

    margin-bottom: 18px;
  }

  .geo-sidebar-nav {
    display: grid;

    grid-template-columns: repeat(2,1fr);

    gap: 4px;
  }

  .geo-sidebar-nav a {
    font-size: 11px;

    padding: 8px;
  }

  .geo-sidebar-arrow {
    display: none;
  }

  .geo-sidebar-tools {
    grid-template-columns: 1fr 1fr;
  }

  .geo-content-section {
    padding: 21px;
  }

  .geo-highlight-grid,
  .geo-region-grid {
    grid-template-columns: 1fr;
  }


  /* WhatsApp top bar */

  .kannadagk-wa-topbar-inner {
    min-height: 54px;

    gap: 8px;
  }

  .kannadagk-wa-message {
    font-size: 11px;
  }

  .kannadagk-wa-join {
    padding: 8px 11px;

    font-size: 10px;
  }


  /* Article WhatsApp */

  .geo-whatsapp-cta {
    align-items: flex-start;

    padding: 20px;
  }

  .geo-whatsapp-cta-icon {
    width: 48px;
    height: 48px;

    font-size: 21px;
  }

  .geo-whatsapp-cta h2 {
    font-size: 18px;
  }

}


/* =========================================================
   RESPONSIVE - SMALL MOBILE
========================================================= */

@media (max-width: 500px) {

  .geo-article-hero {
    padding: 32px 0;
  }

  .geo-article-hero h1 {
    font-size: 29px;
  }

  .geo-article-hero p {
    font-size: 14px;
  }

  .geo-facts-grid {
    grid-template-columns: 1fr;
  }

  .geo-sidebar-nav {
    grid-template-columns: 1fr;
  }

  .geo-sidebar-tools {
    grid-template-columns: 1fr;
  }

  .geo-chapter-navigation {
    grid-template-columns: 1fr;
  }

  .geo-next {
    text-align: left;

    justify-content: flex-start;
  }


  /* Top WhatsApp */

  .kannadagk-wa-topbar-inner {
    align-items: stretch;

    flex-direction: column;

    gap: 7px;

    padding-top: 10px;
    padding-bottom: 10px;
  }

  .kannadagk-wa-message {
    justify-content: center;

    text-align: center;

    font-size: 11px;
  }

  .kannadagk-wa-join {
    width: 100%;

    padding: 10px;
  }


  /* Article WhatsApp */

  .geo-whatsapp-cta {
    display: block;
  }

  .geo-whatsapp-cta-icon {
    margin-bottom: 12px;
  }

  .geo-whatsapp-button {
    width: 100%;

    margin-top: 15px;
  }

}