/* ═══════════════════════════════════════════════════════
   MSB RIDING ACADEMY — CUSTOM CSS
   Zoho Sites → Design → Custom CSS
   Last updated: 2026
═══════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════
   HEADER — REMOVE WHITE LINE ABOVE MENU
═══════════════════════════════════════════════════════ */
@media (min-width: 992px) {
  .zpheader-style-02 .theme-header.theme-header-navigation-style {
    border-block-start: 0 !important;
    border-top: 0 !important;
  }

  .zpheader-style-02 .theme-header-navigation-style,
  .theme-header-navigation-style {
    background-color: #1c0040 !important;
  }
}


/* ═══════════════════════════════════════════════════════
   HEADER — GOLD BAR BELOW MENU
═══════════════════════════════════════════════════════ */
@media (min-width: 992px) {
  .zpheader-style-02 .theme-header.theme-header-navigation-style {
    border-block-end: 1.5px solid #F0C84A;
    border-bottom: 1.5px solid #F0C84A;
  }
}


/* ═══════════════════════════════════════════════════════
   MOBILE MENU
═══════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
  :root {
    --msb-p90: #1c0040;
    --msb-p80: #310170;
    --msb-p70: #4f039c;
    --msb-p20: #eadaff;
    --msb-white: #ffffff;
  }

  /* Panel and wrappers */
  .theme-responsive-menu,
  .theme-responsive-menu *[class*="menu"],
  .theme-menu-responsive,
  .theme-mobile-menu,
  .theme-menu-area-responsive,
  .theme-navigation-and-icons .theme-menu-area {
    background-color: var(--msb-p90) !important;
  }

  /* Link text */
  .theme-responsive-menu a,
  .theme-menu-responsive a,
  .theme-mobile-menu a,
  .theme-menu-area-responsive a,
  .theme-navigation-and-icons .theme-menu-area a {
    color: var(--msb-p20) !important;
  }

  /* Full-width clickable rows */
  .theme-responsive-menu li > a,
  .theme-menu-responsive li > a,
  .theme-mobile-menu li > a,
  .theme-menu-area-responsive li > a,
  .theme-navigation-and-icons .theme-menu-area li > a {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    padding: 14px 18px !important;
    background: transparent !important;
  }

  /* Prevent inner spans from creating highlight box */
  .theme-responsive-menu .theme-menu-content,
  .theme-responsive-menu .theme-menu-name,
  .theme-menu-responsive .theme-menu-content,
  .theme-menu-responsive .theme-menu-name,
  .theme-navigation-and-icons .theme-menu-area .theme-menu-content,
  .theme-navigation-and-icons .theme-menu-area .theme-menu-name {
    background: transparent !important;
  }

  /* Hover / focus / active states */
  .theme-responsive-menu li:hover > a,
  .theme-responsive-menu li:focus-within > a,
  .theme-responsive-menu li.theme-menu-selected > a,
  .theme-menu-responsive li:hover > a,
  .theme-menu-responsive li:focus-within > a,
  .theme-menu-responsive li.theme-menu-selected > a,
  .theme-navigation-and-icons .theme-menu-area li:hover > a,
  .theme-navigation-and-icons .theme-menu-area li:focus-within > a,
  .theme-navigation-and-icons .theme-menu-area li.theme-menu-selected > a {
    background-color: var(--msb-p70) !important;
    color: var(--msb-white) !important;
  }

  /* Pressed state */
  .theme-responsive-menu li > a:active,
  .theme-menu-responsive li > a:active {
    background-color: var(--msb-p80) !important;
  }

  /* Divider lines */
  .theme-responsive-menu li,
  .theme-menu-responsive li,
  .theme-navigation-and-icons .theme-menu-area li {
    border-color: rgba(234, 218, 255, 0.18) !important;
  }

  /* Close / X icon */
  .theme-responsive-menu .close,
  .theme-responsive-menu .close *,
  .theme-menu-responsive .close,
  .theme-menu-responsive .close * {
    color: var(--msb-p20) !important;
    fill: var(--msb-p20) !important;
  }
}


/* ═══════════════════════════════════════════════════════
   UTILITY — GOLD BORDER CLASSES
   Apply class="msb-gold-line-bottom" or
   class="msb-gold-line-top" to any Zoho section
═══════════════════════════════════════════════════════ */
.msb-gold-line-bottom {
  border-bottom: 3px solid #C9A227 !important;
  position: relative !important;
  z-index: 1000 !important;
}

.msb-gold-line-top {
  border-top: 3px solid #C9A227 !important;
  position: relative !important;
  z-index: 1000 !important;
}


/* ═══════════════════════════════════════════════════════
   P60 LEFT ACCENT BAR — UTILITY CLASS
   Add class="msb-accentbar" to any full-width section wrapper
.msb-accentbar {
  position: relative;
}
.msb-accentbar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: #700ad6;
  z-index: 1;
}
═══════════════════════════════════════════════════════ */
.msb-accentbar {
  position: relative;
}
.msb-accentbar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: #700ad6;
  z-index: 1; 
}
.msb-programs-inner.msb-accentbar{ padding-left: 16px; }
.msb-programs-inner.msb-accentbar::before{ left: 0; }
/* ═══════════════════════════════════════════════════════
   MSB GLOBAL TYPE TOKENS
   CSS custom properties consumed by all snippets.
   Change a value here to update it site-wide.

   SCALE:
   --t-label    12px  600  2.5px tracking  overlines, eyebrows
   --t-caption  12px  400  0               notes, fine print
   --t-ui       13px  500  0.3px           tags, pills, UI text
   --t-body-sm  14px  400  0               secondary body
   --t-body     16px  400  0               primary paragraphs
   --t-body-lg  18px  300  0               bridge / lead text
   MINIMUM RULE: nothing with readable meaning below 12px.
═══════════════════════════════════════════════════════ */
:root {
  /* Type scale */
  --t-label:      12px;
  --t-caption:    12px;
  --t-ui:         13px;
  --t-body-sm:    14px;
  --t-body:       16px;
  --t-body-lg:    18px;

  /* Cinzel heading scale */
  --t-heading-xs: 14px;
  --t-heading-sm: 20px;
  --t-heading-md: clamp(22px, 3vw, 32px);
  --t-heading-lg: clamp(28px, 4vw, 48px);
  --t-display:    clamp(40px, 6vw, 96px);

  /* Weights */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-black:     900;

  /* Letter spacing */
  --ls-label:     2.5px;
  --ls-caps:      1.5px;
  --ls-heading:   0.04em;
  --ls-tight:     -0.02em;

  /* Line heights */
  --lh-tight:     1.05;
  --lh-heading:   1.2;
  --lh-body:      1.75;
  --lh-relaxed:   1.85;
}

/* ── Eyebrow / overline labels ── */
.msb-eyebrow,
.msbpp-eyebrow,
.msbab-eyebrow,
.msbsc-eyebrow,
.msbtm-source,
.msbcf-eyebrow,
.msb-programs-eyebrow,
.msbh-eyebrow,
.footer-nav-heading,
.footer-contact-heading,
.service-bar-label,
.msbcf-contact-label,
.msbsc-detail-label,
.msbsc-cta-label,
.msbab-cred-l,
.msbh-registered,
.stat-l {
  font-size: var(--t-label) !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: var(--ls-label) !important;
  line-height: 1.4 !important;
}

/* ── Primary body paragraphs ── */
.hero-body,
.msbab-body,
.msbsc-body,
.msbcf-body,
.msbh-subtitle,
.msb-hero-body-text,
.footer-desc {
  font-size: var(--t-body) !important;
  line-height: var(--lh-body) !important;
}

/* ── Secondary / small body ── */
.msbtm-card-text,
.msbcf-contact-value,
.msbsc-detail-value,
.msbh-desc,
.footer-nav-list a,
.contact-value,
.info-tile-content {
  font-size: var(--t-body-sm) !important;
  line-height: var(--lh-body) !important;
}

/* ── UI / tags / pills ── */
.tag,
.msb-pill,
.msbpp-card-dur,
.msb-card-dur,
.msb-card-age,
.msbpp-card-age,
.msbh-tag {
  font-size: var(--t-ui) !important;
}

/* ── Captions / fine print ── */
.msbcf-note,
.msbsc-cta-note,
.msb-programs-note,
.footer-copy,
.footer-legal-links a,
.service-bar-areas,
.msb-card-price-per,
.msbpp-card-price-per {
  font-size: var(--t-caption) !important;
}

/* ── Stat labels ── */
.stat-l,
.msbab-cred-l {
  font-size: var(--t-label) !important;
  letter-spacing: var(--ls-caps) !important;
}