/* =============================================================================
   EPA MOBILE LAYER  (loads AFTER global-bundle.css; safe to remove as a unit)
   -----------------------------------------------------------------------------
   1. Site-wide mobile fixes: header + menu, breadcrumb, footer, buttons, forms,
      media, tables, floating widgets.
   2. Program-page components (.prog-*, .crumbs, .epa-cta-bar) used by every
      program-details page: CUET, CLAT, IPMAT, CA Foundation, Class 11-12.

   Language: the existing institutional system. Navy (--epa-ink) leads, orange is
   the accent, serif headings, 4px corners, hairline rules, no gradients, no cards
   inside cards. Everything here is mobile-first; desktop is layered on at 700px+.
   ========================================================================== */

:root {
  --epa-tap: 44px;                       /* minimum comfortable touch target */
  --epa-gutter: 16px;
  /* Text-safe orange: #cc5514 was 4.3:1 on white (3.8:1 on the tint) and failed AA; this is 5.2:1 / 4.6:1.
     The brand orange (--epa-primary) is unchanged and stays the button/accent fill. */
  --epa-primary-dark: #b94a10;
}

html {
  scroll-padding-top: calc(var(--header-height, 70px) + 12px);
  -webkit-tap-highlight-color: rgba(242, 109, 33, 0.14);
}

/* Never let a long word / email / URL push the page wider than the screen. */
h1, h2, h3, h4, h5, h6, p, li, td, th, dt, dd, label, a, button, summary {
  overflow-wrap: break-word;
}

img, video, iframe, canvas, svg { max-width: 100%; }
img, video { height: auto; }

a, button, summary, select, input, label[for] { touch-action: manipulation; }

/* Keyboard focus that is actually visible on every control. */
:where(a, button, summary, select, input, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--epa-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Wrapper for any table that is wider than a phone. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* =============================================================================
   1. SITE-WIDE  (phones and small tablets)
   ========================================================================== */
@media (max-width: 768px) {

  body { font-size: 16px; line-height: 1.65; }

  .container { padding-left: var(--epa-gutter); padding-right: var(--epa-gutter); }

  .section { padding-top: 44px; padding-bottom: 44px; }
  .section--lg { padding-top: 56px; padding-bottom: 56px; }

  /* Headlines scale with the screen so long words never overflow at 320-360px. */
  .display-1, .display-2, .display-3, .display-4 {
    font-size: clamp(1.75rem, 7.6vw, 2.25rem);
    line-height: 1.16;
  }
  h1, .h1 { font-size: clamp(1.75rem, 7.4vw, 2.25rem); line-height: 1.16; }
  h2, .h2 { font-size: clamp(1.4rem, 5.8vw, 1.75rem); line-height: 1.22; }
  h3, .h3 { font-size: clamp(1.15rem, 4.6vw, 1.35rem); }
  .body-lg { font-size: 1.0625rem; line-height: 1.65; }

  /* Buttons: thumb-sized, allowed to wrap instead of forcing the page wider. */
  .btn {
    min-height: var(--epa-tap);
    white-space: normal;
    text-align: center;
    line-height: 1.25;
  }
  .btn--lg { padding: 14px 24px; font-size: 16px; }
  .btn--sm { padding: 10px 16px; }

  /* Form controls: 16px stops iOS zooming the page on focus; 48px is thumb-sized. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea {
    font-size: 16px;
  }
  select,
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
    min-height: 48px;
  }

  /* -------- Header -------- */
  .epa-header__inner { padding-left: var(--epa-gutter); padding-right: var(--epa-gutter); }
  .epa-header__logo img { height: 34px; width: auto; }

  .epa-header__toggle {
    width: var(--epa-tap);
    height: var(--epa-tap);
    margin-right: -10px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
  }

  /* Open menu = a full-height sheet under the header; it scrolls if the phone is short.
     NB: the header has backdrop-filter, which makes IT the containing block for any
     position:fixed child, so this must be absolute with an explicit height. */
  .epa-header.menu-open .epa-header__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100vh - var(--header-height, 70px));
    height: calc(100dvh - var(--header-height, 70px));
    align-items: stretch;
    gap: 0;
    padding: 4px var(--epa-gutter) calc(32px + env(safe-area-inset-bottom));
    background: var(--epa-white);
    border-top: 1px solid var(--epa-border);
    border-bottom: 0;
    box-shadow: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    text-align: left;
  }
  body:has(.epa-header.menu-open) { overflow: hidden; }

  .epa-header__nav > a,
  .epa-header__nav .epa-dropdown__toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 52px;
    padding: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--epa-ink);
    border-bottom: 1px solid var(--epa-border);
    text-align: left;
  }
  .epa-header__nav > a::after,
  .epa-header__nav .epa-dropdown__toggle::after { display: none; }
  .epa-header__nav > a.active { color: var(--epa-primary-dark); }

  .epa-dropdown { display: block; width: 100%; }
  .epa-dropdown__toggle { cursor: default; }
  .epa-dropdown__menu {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 12px 0 16px !important;
    border-bottom: 1px solid var(--epa-border) !important;
    border-radius: 0 !important;
  }
  .epa-dropdown__menu a {
    display: flex;
    align-items: center;
    min-height: var(--epa-tap);
    padding: 0 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--epa-ink);
    background: var(--epa-bg-light);
    border: 1px solid var(--epa-border);
    border-radius: var(--radius-md);
  }
  .epa-dropdown__menu a::after { display: none; }

  .epa-header.menu-open .epa-mobile-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 20px;
    padding-top: 0;
    border-top: 0;
  }
  .epa-header .epa-mobile-actions .btn {
    width: 100%;
    min-height: 48px;
    padding: 0 12px;
    font-size: 15px;
  }
  /* The base nav-link colour was beating the button colour (dark text on orange). */
  .epa-header .epa-header__nav a.btn--primary,
  .epa-header .epa-header__nav a.btn--primary:hover { color: var(--epa-white); }
  .epa-header .epa-header__nav a.btn--outline { color: var(--epa-ink); }
  .epa-header .epa-header__nav a.btn--outline:hover { color: var(--epa-white); }

  /* -------- Breadcrumb on pages that still use the old inline-styled one -------- */
  .epa-breadcrumb {
    padding: 12px var(--epa-gutter) !important;
    font-size: 14px !important;
    line-height: 1.4;
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .epa-breadcrumb::-webkit-scrollbar { display: none; }

  /* -------- Footer -------- */
  .td_footer .td_footer_row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 20px;
    padding: 40px 0 8px;
  }
  .td_footer .td_footer_row .td_footer_col { width: auto; min-width: 0; }
  .td_footer .td_footer_row .td_footer_col:first-child,
  .td_footer .td_footer_row .td_footer_col:nth-child(4) { grid-column: 1 / -1; }
  .td_footer .td_footer_widget_title,
  .td_footer .td_footer_widget_title.td_mb_30 {
    font-size: 18px;
    line-height: 1.3;
    margin-bottom: 8px;
  }
  .td_footer .td_footer_widget_menu li { margin-bottom: 0; }
  .td_footer .td_footer_widget_menu li a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    font-size: 15px;
  }
  .td_footer .td_footer_widget_menu a:hover { padding-left: 0; }
  .td_footer .td_footer_widget_menu li a,
  .td_footer .td_footer_address_widget a { min-width: 44px; min-height: 44px; }
  .epa-header__logo { display: inline-flex; align-items: center; padding: 5px 0; }
  .td_footer .td_footer_text_widget { font-size: 16px; }
  .td_footer .td_footer_address_widget li { font-size: 15px; line-height: 1.6; margin-bottom: 12px; }
  .td_footer .td_footer_address_widget a { display: inline-flex; align-items: center; min-height: 36px; }
  .td_footer .td_newsletter_form { display: flex; flex-direction: column; gap: 10px; }
  .td_footer .td_newsletter_form .td_newsletter_input { width: 100%; min-height: 48px; }
  .td_footer .td_newsletter_form .td_btn { width: 100%; }
  .td_footer .td_footer_social_btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
  .td_footer .td_footer_social_btns a { width: 44px; height: 44px; }
  .td_footer .td_footer_bottom_in { padding: 20px 0 24px; font-size: 14px; gap: 8px 16px; }
  .td_footer .td_footer_bottom_in .td_footer_widget_menu { justify-content: center; }
  .td_footer .td_footer_bottom_in .td_footer_widget_menu li a { min-height: 36px; font-size: 14px; }
  .td_footer .td_footer_bottom_in .td_copyright { margin: 0; }

  /* -------- Floating widgets -------- */
  .epa-nt { padding-bottom: calc(.55rem + env(safe-area-inset-bottom)); }
  .epa-nt__x { min-width: 40px; min-height: 40px; font-size: 1.4rem; }
  .epa-np { right: .75rem; bottom: calc(3.8rem + env(safe-area-inset-bottom)); }
  .epa-np__x { width: 40px; height: 40px; top: 0; right: 0; }
  .epa-np__go { padding: .7rem 1rem; font-size: .85rem; }
}

/* Very small phones (320-340px). 360px is the most common Android width, so it keeps 2 columns. */
@media (max-width: 340px) {
  :root { --epa-gutter: 14px; }
  .epa-dropdown__menu { grid-template-columns: 1fr; }
  .epa-header.menu-open .epa-mobile-actions { grid-template-columns: 1fr; }
}

/* Touch devices of any width: no hover-dependent lifts, comfortable targets. */
@media (hover: none) {
  .card:hover, .program-card:hover, .btn:hover { transform: none; }
}

/* =============================================================================
   2. BREADCRUMB  (.crumbs)
   One line. The current page truncates with an ellipsis instead of overflowing.
   ========================================================================== */
.crumbs {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  min-width: 0;
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--epa-text-muted);
}
.crumbs a {
  flex: none;
  color: var(--epa-text-muted);
  text-decoration: none;
  padding: 10px 0;
}
.crumbs a:hover { color: var(--epa-primary-dark); }
.crumbs a::after {
  content: "/";
  display: inline-block;
  margin: 0 8px;
  color: var(--epa-border-dark);
}
.crumbs [aria-current="page"] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--epa-ink);
  font-weight: 600;
}
@media (max-width: 520px) {
  .crumbs__mid { display: none; }
}

/* =============================================================================
   3. PROGRAM PAGE COMPONENTS
   ========================================================================== */

/* ---- Hero -------------------------------------------------------------- */
.prog-hero {
  padding: 0 0 32px;
  background: var(--epa-white);
  border-bottom: 1px solid var(--epa-border);
}
.prog-hero .crumbs { margin-bottom: 8px; }
.prog-hero__inner { display: grid; gap: 24px; }
.prog-hero h1 {
  margin: 0 0 12px;
  font-size: clamp(2rem, 8vw, 2.75rem);
  line-height: 1.1;
  text-align: left;
}
.prog-hero h1 .prog-hero__sub { display: block; color: var(--epa-primary-dark); }
.prog-hero__lede {
  margin: 0;
  max-width: 56ch;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--epa-text-secondary);
}
.prog-hero__actions { display: grid; gap: 10px; margin-top: 24px; }
.prog-hero__actions .btn { width: 100%; }

/* Key facts: a hairline grid, not a row of floating pills. */
.prog-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin: 0;
  background: var(--epa-border);
  border: 1px solid var(--epa-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
/* flex-grow means an odd last item fills its row instead of leaving a grey hole */
.prog-facts > div { flex: 1 1 140px; padding: 12px 14px; background: var(--epa-white); }
.prog-facts dt {
  margin: 0 0 2px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--epa-text-muted);
}
.prog-facts dd {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--epa-ink);
}

/* ---- Body: content + enrolment panel ------------------------------------ */
.prog-body { padding: 32px 0 48px; background: var(--epa-bg-light); }
.prog-layout { display: grid; gap: 32px; }
.prog-main { min-width: 0; }
.prog-main > section + section,
.prog-main > .prog-block + .prog-block { margin-top: 40px; }
.prog-main h2 {
  margin: 0 0 8px;
  font-size: clamp(1.4rem, 5.6vw, 1.75rem);
  line-height: 1.2;
}
.prog-main > section > p,
.prog-intro { margin: 0 0 8px; color: var(--epa-text-secondary); line-height: 1.65; max-width: 62ch; }

/* Highlights: rows with an icon tile. No boxes around each one. */
.prog-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; }
.prog-list li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  padding: 16px 0;
}
.prog-list li + li { border-top: 1px solid var(--epa-border); }
.prog-list__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 18px;
  color: var(--epa-primary-dark);
  background: var(--epa-primary-light);
  border-radius: var(--radius-md);
}
.prog-list h3 {
  margin: 0 0 4px;
  font-size: 1.0625rem;
  line-height: 1.3;
  font-weight: 600;
}
.prog-list p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--epa-text-muted); }

/* Syllabus / comparison table: a real table on desktop, stacked rows on phones. */
.prog-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--epa-white);
  border: 1px solid var(--epa-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-size: 15px;
}
.prog-table th,
.prog-table td { padding: 14px 16px; text-align: left; vertical-align: top; line-height: 1.55; }
.prog-table thead th { background: var(--epa-bg-alt); color: var(--epa-ink); font-weight: 700; }
.prog-table tbody tr + tr { border-top: 1px solid var(--epa-border); }
.prog-table tbody th { color: var(--epa-ink); font-weight: 600; width: 34%; }
.prog-table td { color: var(--epa-text-muted); }
@media (max-width: 640px) {
  .prog-table, .prog-table tbody, .prog-table tr, .prog-table th, .prog-table td { display: block; width: auto; }
  .prog-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .prog-table tbody th { padding: 14px 16px 2px; width: auto; }
  .prog-table td { padding: 0 16px 14px; }
}

/* Checklist ("what's included") */
.prog-checks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; }
.prog-checks li {
  position: relative;
  padding: 11px 0 11px 30px;
  line-height: 1.55;
  color: var(--epa-text-secondary);
}
.prog-checks li + li { border-top: 1px solid var(--epa-border); }
.prog-checks li::before {
  content: "\f00c";
  position: absolute;
  left: 2px;
  top: 12px;
  font: 900 14px/1.55 "Font Awesome 6 Free";
  color: var(--epa-primary-dark);
}

/* FAQ: native details/summary, 48px tap rows. */
.prog-faq { margin-top: 8px; border-top: 1px solid var(--epa-border); }
.prog-faq details { border-bottom: 1px solid var(--epa-border); }
.prog-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 10px 0;
  font-weight: 600;
  color: var(--epa-ink);
  cursor: pointer;
  list-style: none;
}
.prog-faq summary::-webkit-details-marker { display: none; }
.prog-faq summary::after {
  content: "+";
  flex: none;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: var(--epa-primary-dark);
}
.prog-faq details[open] summary::after { content: "\2212"; }
.prog-faq details > :not(summary) { margin: 0 0 16px; color: var(--epa-text-muted); line-height: 1.65; }

/* ---- Enrolment / fee panel ---------------------------------------------- */
.prog-enrol {
  padding: 20px;
  background: var(--epa-white);
  border: 1px solid var(--epa-border-dark);
  border-radius: var(--radius-md);
  scroll-margin-top: calc(var(--header-height, 70px) + 12px);
}
.prog-enrol h2 {
  margin: 0 0 16px;
  font-size: 1.375rem;
  line-height: 1.25;
  text-align: left;
}
.prog-field { margin-bottom: 14px; }
.prog-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--epa-ink);
}
.prog-field select,
.prog-field input {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  font: inherit;
  font-size: 16px;
  color: var(--epa-ink);
  background-color: var(--epa-white);
  border: 1px solid var(--epa-border-dark);
  border-radius: var(--radius-md);
}
.prog-field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5l6 6 6-6' fill='none' stroke='%230f1535' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.prog-field select:focus,
.prog-field input:focus { outline: 3px solid var(--epa-primary); outline-offset: 1px; border-color: var(--epa-primary); }
.prog-includes { margin: 0 0 16px; font-size: 14px; color: var(--epa-text-muted); line-height: 1.5; }

.prog-price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0;
  padding: 16px 0;
  border-top: 1px solid var(--epa-border);
  border-bottom: 1px solid var(--epa-border);
}
.prog-price__label { font-size: 14px; line-height: 1.35; color: var(--epa-text-muted); }
.prog-price__value {
  font-size: clamp(1.75rem, 8vw, 2.25rem);
  font-weight: 700;
  line-height: 1;
  color: var(--epa-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.prog-enrol .btn { width: 100%; min-height: 52px; }
.prog-enrol__note { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--epa-text-muted); text-align: center; }

/* ---- Sticky enrol bar (phones) ------------------------------------------- */
.epa-cta-bar { display: none; }
@media (max-width: 768px) {
  .epa-cta-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    padding: 10px var(--epa-gutter) calc(10px + env(safe-area-inset-bottom));
    background: var(--epa-white);
    border-top: 1px solid var(--epa-border-dark);
    box-shadow: 0 -4px 14px rgba(15, 21, 53, 0.08);
    transform: translateY(110%);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .epa-cta-bar.is-visible { transform: translateY(0); }
  .epa-cta-bar__info { flex: 1; min-width: 0; line-height: 1.2; }
  .epa-cta-bar__label { display: block; font-size: 12px; color: var(--epa-text-muted); }
  .epa-cta-bar__value {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--epa-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .epa-cta-bar__value:empty { display: none; }
  .epa-cta-bar .btn { flex: none; min-height: 48px; padding: 0 22px; }
  .epa-cta-bar__info:has(.epa-cta-bar__value:empty) { display: none; }
  .epa-cta-bar__info:has(.epa-cta-bar__value:empty) + .btn { flex: 1; }

  /* Room under the footer for the bar (padding on the footer, so its navy fills the space
     instead of a white band), and the news ticker steps aside. */
  body.has-cta-bar footer { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  body.has-cta-bar .epa-nt,
  body.has-cta-bar .epa-np { display: none !important; }
}

/* ---- Tablet and up ------------------------------------------------------- */
@media (min-width: 700px) {
  .prog-hero { padding: 16px 0 48px; }
  .prog-hero__actions { grid-template-columns: auto auto; justify-content: start; }
  .prog-hero__actions .btn { width: auto; }
  .prog-list { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .prog-list li:nth-child(2) { border-top: 0; }
  .prog-checks { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .prog-checks li:nth-child(2) { border-top: 0; }
}
@media (min-width: 992px) {
  .prog-hero__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 56px; align-items: end; }
  .prog-hero__actions { margin-top: 28px; }
  .prog-facts { flex-direction: column; }
  .prog-facts > div { flex: none; display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
  .prog-facts dt { margin: 0; }
  .prog-body { padding: 56px 0 80px; }
  .prog-layout { grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; align-items: start; }
  .prog-enrol { position: sticky; top: calc(var(--header-height, 84px) + 20px); padding: 24px; }
}

/* =============================================================================
   4. HUB LEAD FORMS  (forms posting to /send_lead.php via assets/js/epa-lead-form.js)
   ========================================================================== */
.hub-form .prog-field { margin-bottom: 12px; }
.hub-form__row { display: grid; gap: 0; }
.hub-form .btn { width: 100%; min-height: 52px; margin-top: 4px; }
.lead-msg { margin: 12px 0 0; font-size: 15px; line-height: 1.5; }
.lead-msg[data-state="ok"] { color: #166534; }
.lead-msg[data-state="err"] { color: #b91c1c; }
.lead-msg a { color: inherit; font-weight: 600; text-decoration: underline; }
@media (min-width: 480px) {
  .hub-form__row { grid-template-columns: 1fr 1fr; gap: 12px; }
}

/* =============================================================================
   5. LINK-BUTTON HOVER / FOCUS COLOUR
   A global link-hover rule out-specified the button colours, so hovering an
   <a class="btn btn--primary"> turned its text dark navy on dark orange (2.4:1) and an
   outline button's text dark on its navy hover fill. <button> elements were never affected.
   ========================================================================== */
a.btn.btn--primary:hover,
a.btn.btn--primary:focus-visible { color: var(--epa-white); }
a.btn.btn--outline:hover,
a.btn.btn--outline:focus-visible { color: var(--epa-white); }