/* ============================================================
   Skillora / brandseducation (theme 33) — FOOTER, on the legacy shell.

   NEHA-18 / BRANDS-FOOTER-ALL-0, 2026-10-01.

   Why this file exists
   --------------------
   The home page extends `theme_page/udemy_theme/layouts/app.blade.php`, which
   loads `styles.css` — and `styles.css` carries the footer rules at :702-905.
   Every OTHER page of this tenant extends the SHARED legacy layout
   `theme_page/layouts/app.blade.php`, which loads bootstrap / materialize /
   master.css and does NOT load `styles.css`. Linking `styles.css` there would
   restyle the whole legacy page, so the footer rules are ported here instead,
   every one of them scoped under `body.be-theme .sk-foot`.

   Scoping contract (INV-C20-40: this layout is extended by 326 blades and
   serves ~56 other tenants — a shell edit is a platform change)
   -------------------------------------------------------------
   * The <link> that loads this file sits inside the EXISTING
     `theme_select_id == 33` gate in the layout's <head>, so no other tenant
     requests it at all.
   * `body.be-theme` is set by the layout for theme 33 only; `.sk-foot` is the
     wrapper the layout puts round the footer partial. Both must match, so even
     if the sheet were served to another tenant it would match nothing.
   * Nothing here is global. There is no bare element selector, no `:root`, and
     no rule that can escape `.sk-foot` — except the one `.fotCopy` suppression
     below, which is itself under `body.be-theme`.

   The home page is NOT affected by this file: it uses the other layout, which
   never links it, and `styles.css` is untouched.

   Tokens come from the same single source the header and the home page use.
   ============================================================ */
@import url("tokens.css?v=20260928b");

/* ------------------------------------------------------------
   0. The legacy footer's own visible strip.

   `theme_page/layouts/footer.blade.php` still renders (it carries the login /
   signup / certificate-verification modals and the global JS every page on
   this shell needs, and the layout still includes it unchanged). Its only
   VISIBLE output for this tenant is `#footer > .fotCopy` — a thin bar with the
   VAT badge, the payment icons and a "Powered by" line. The footer below draws
   all three properly, so the legacy strip would be a duplicate under the real
   footer. Hidden for theme 33 only; every other tenant keeps it untouched.
   ------------------------------------------------------------ */
body.be-theme #footer > .fotCopy { display: none; }

/* ------------------------------------------------------------
   1. Resets inside the wrapper.

   master.css / bootstrap / materialize all style `ul`, `li`, `a`, `h2`, `h4`
   and `.container` on this shell. Without these the grid renders with bullets,
   blue underlined links and a 2.28rem heading. Scoped to the wrapper, so this
   is a local reset, not a platform one.
   ------------------------------------------------------------ */
body.be-theme .sk-foot,
body.be-theme .sk-foot *,
body.be-theme .sk-foot *::before,
body.be-theme .sk-foot *::after { box-sizing: border-box; }

body.be-theme .sk-foot {
  /* NEHA-20 / BRANDS-SUBCAT-DARK-1 (2026-10-01): views such as theme_page/coursecategory
     float their whole content and never clear it, so <main> collapses to 0px, and the
     legacy #footer is itself a float (master.css #footer { float:left }). This wrapper
     is the first IN-FLOW block after <main>, so without a clear it is placed at the top
     of the content area and the navy .megalinks paints under the whole page. */
  clear: both;
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.55;
  text-align: start;
}

body.be-theme .sk-foot ul,
body.be-theme .sk-foot ol { list-style: none; margin: 0; padding: 0; }
body.be-theme .sk-foot li { margin: 0; padding: 0; list-style: none; }

body.be-theme .sk-foot a {
  color: inherit;
  text-decoration: none;
  transition: none;
}
body.be-theme .sk-foot a:focus,
body.be-theme .sk-foot a:hover { text-decoration: none; }

body.be-theme .sk-foot h2,
body.be-theme .sk-foot h4 {
  font-weight: 700;
  line-height: 1.25;
  color: inherit;
  margin: 0;
  letter-spacing: normal;
}
body.be-theme .sk-foot h2 { font-size: var(--fs-h2); }
body.be-theme .sk-foot h4 { font-size: var(--fs-h4); }

body.be-theme .sk-foot img,
body.be-theme .sk-foot svg { display: block; max-width: 100%; }

body.be-theme .sk-foot button {
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  color: inherit;
  text-transform: none;
  letter-spacing: normal;
  box-shadow: none;
  height: auto;
  line-height: normal;
}

/* `.container` is bootstrap's on this shell (responsive max-widths + 15px
   gutters). The footer was designed against the theme's own container. */
body.be-theme .sk-foot .container {
  max-width: var(--max-w);
  width: auto;
  margin: 0 auto;
  padding: 0 24px;
}

/* ------------------------------------------------------------
   2. Mega link block — "Explore top skills and certifications".
   Ported unchanged from styles.css:701-720.
   ------------------------------------------------------------ */
body.be-theme .sk-foot .megalinks {
  background: var(--navy);
  color: var(--white);
  padding: var(--section-y) 0;
}
body.be-theme .sk-foot .megalinks h2 { margin-bottom: 30px; }
body.be-theme .sk-foot .megalinks__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px 32px;
}
body.be-theme .sk-foot .megalinks h4 { color: var(--white); margin-bottom: 12px; }
body.be-theme .sk-foot .megalinks__grid a {
  display: block;
  color: #b9bac4;
  font-size: 14px;
  padding: 4px 0;
}
body.be-theme .sk-foot .megalinks__grid a:hover { color: var(--white); text-decoration: underline; }

/* ------------------------------------------------------------
   3. Footer. Ported unchanged from styles.css:722-800.
   ------------------------------------------------------------ */
body.be-theme .sk-foot .footer {
  background: var(--navy-darkest);
  color: var(--white);
  padding: 56px 0 28px;
}
body.be-theme .sk-foot .footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
body.be-theme .sk-foot .footer h4 { color: var(--white); margin-bottom: 12px; }
body.be-theme .sk-foot .footer__cols a {
  display: block;
  color: #9a9ca6;
  font-size: 14px;
  padding: 4px 0;
}
body.be-theme .sk-foot .footer__cols a:hover { color: var(--white); text-decoration: underline; }
body.be-theme .sk-foot .footer__bottom {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: var(--fs-small);
  color: #9a9ca6;
}
body.be-theme .sk-foot .footer__bottom a:hover { color: var(--white); }
body.be-theme .sk-foot .footer__lang {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: var(--radius);
  padding: 8px 12px;
  color: var(--white);
}
body.be-theme .sk-foot .footer__lang:hover { border-color: var(--white); }
/* The trigger is a <button> when there is more than one language to pick. */
body.be-theme .sk-foot button.footer__lang { background: none; font: inherit; cursor: pointer; }
/* margin-left:auto moves to the wrapper once the pill is inside one. */
body.be-theme .sk-foot .footer__langmenu { margin-left: auto; }

body.be-theme .sk-foot .footer__icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  vertical-align: -3px;
}
body.be-theme .sk-foot .footer__pay {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}
body.be-theme .sk-foot .footer__pay img { height: 28px; width: auto; object-fit: contain; }
body.be-theme .sk-foot .footer__logo { height: 30px; width: auto; display: block; }

/* No Footer Settings rows for this institute -> no link block at all. */
body.be-theme .sk-foot .footer--bare { padding-top: 28px; }
body.be-theme .sk-foot .footer--bare .footer__pay { margin-top: 0; }
body.be-theme .sk-foot .footer--bare .footer__bottom { margin-top: 0; border-top: 0; padding-top: 0; }
body.be-theme .sk-foot .footer--bare .footer__pay + .footer__bottom {
  margin-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding-top: 22px;
}

/* ------------------------------------------------------------
   4. Language dropdown. Ported from styles.css:154-196 — the partial's own
   markup (`.lang-menu__link`, `.lang-menu__list--up`) with nothing else.
   ------------------------------------------------------------ */
body.be-theme .sk-foot .lang-menu { position: relative; }
body.be-theme .sk-foot .lang-menu__list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 400;
}
body.be-theme .sk-foot .lang-menu__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  font-size: 14px;
  color: var(--text);
}
body.be-theme .sk-foot .lang-menu__link:hover { background: var(--purple-tint); color: var(--purple); }
body.be-theme .sk-foot .lang-menu__link.is-active { color: var(--purple); font-weight: 700; }
body.be-theme .sk-foot .lang-menu__flag { width: 18px; height: 13px; object-fit: cover; flex: none; }
/* Bottom-of-page variant: the panel hangs above the trigger. */
body.be-theme .sk-foot .lang-menu__list--up { top: auto; bottom: calc(100% + 8px); }
/* `hidden` must win over the display rules above. */
body.be-theme .sk-foot .lang-menu__list[hidden] { display: none; }

/* ------------------------------------------------------------
   5. CMS footer-page popup (Admin > CMS Pages). Ported from
   styles.css:802-840. The partial renders these INSIDE the wrapper, and they
   are position:fixed, so nesting does not affect them.
   ------------------------------------------------------------ */
body.be-theme .sk-foot .sk-pagemodal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(16, 17, 22, .6);
  padding: 24px;
  overflow-y: auto;
}
body.be-theme .sk-foot .sk-pagemodal.is-open { display: flex; align-items: flex-start; justify-content: center; }
body.be-theme .sk-foot .sk-pagemodal__box {
  position: relative;
  background: var(--white);
  color: var(--navy);
  border-radius: var(--radius);
  max-width: 760px;
  width: 100%;
  margin: auto;
  padding: 32px 36px;
}
body.be-theme .sk-foot .sk-pagemodal__box h2 { margin: 0 0 16px; padding-right: 32px; }
body.be-theme .sk-foot .sk-pagemodal__close {
  position: absolute;
  top: 12px;
  right: 16px;
  border: 0;
  background: none;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: var(--navy);
}
body.be-theme .sk-foot .sk-pagemodal__body { font-size: 15px; line-height: 1.7; }
body.be-theme .sk-foot .sk-pagemodal__body img { max-width: 100%; height: auto; }
body.be-theme .sk-foot .sk-pagemodal__body a { color: var(--purple); text-decoration: underline; }

/* ------------------------------------------------------------
   6. RTL.

   The layout puts `dir="rtl"` on the wrapper ITSELF (same as `.sk-head`), so
   the attribute selector goes on `.sk-foot`, not on an ancestor. `text-align:
   start` and the logical `margin-inline` properties do the rest, so the grid
   reflows without a second set of column rules.
   ------------------------------------------------------------ */
body.be-theme .sk-foot[dir="rtl"] { text-align: start; }
body.be-theme .sk-foot[dir="rtl"] .footer__langmenu { margin-left: 0; margin-right: auto; }
body.be-theme .sk-foot[dir="rtl"] .footer__lang { margin-left: 0; margin-right: auto; }
body.be-theme .sk-foot[dir="rtl"] .lang-menu__list { right: auto; left: 0; }
body.be-theme .sk-foot[dir="rtl"] .sk-pagemodal__box h2 { padding-right: 0; padding-left: 32px; }
body.be-theme .sk-foot[dir="rtl"] .sk-pagemodal__close { right: auto; left: 16px; }

/* ------------------------------------------------------------
   7. Responsive. The same three breakpoints styles.css uses for these two
   grids (:845-903), carrying only the footer's own rules.
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  body.be-theme .sk-foot .megalinks__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  body.be-theme .sk-foot .megalinks { padding: 48px 0; }
  body.be-theme .sk-foot .megalinks__grid,
  body.be-theme .sk-foot .footer__cols { grid-template-columns: repeat(2, 1fr); }
  body.be-theme .sk-foot .footer__lang { margin-left: 0; }
  body.be-theme .sk-foot[dir="rtl"] .footer__lang { margin-right: 0; }
}

@media (max-width: 480px) {
  body.be-theme .sk-foot .megalinks__grid,
  body.be-theme .sk-foot .footer__cols { grid-template-columns: 1fr; }
  body.be-theme .sk-foot .footer__bottom { gap: 14px; }
}