/* =============================================================================
 * VIPPS MOBILEPAY BRAND STYLES
 * Matches the look of the Vipps MobilePay Developer Docs site.
 * =========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */

@font-face {
  font-family: "Vipps MobilePay Text";
  src: url("../fonts/VippsMobilePayText-Regular-Web.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Vipps MobilePay Display";
  src: url("../fonts/VippsMobilePayDisplay-Regular-Web.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Vipps Font";
  src: url("../fonts/VippsText-Regular-Web.woff2") format("woff2");
  font-display: swap;
}

/* --- Brand color variables ------------------------------------------------ */

:root {
  --vmp-dark-blue:    rgb(22, 18, 37);    /* #161225 — navbar, footer    */
  --vmp-off-white:    rgb(245, 245, 242); /* #F5F5F2 — text on dark bg   */
  --vmp-blue:         rgb(90, 120, 255);  /* #5A78FF — accent            */
  --vmp-blue-dark:    rgb(73, 97, 205);   /* #4961CD — links light mode  */
  --vmp-blue-muted:   #8CA1FF;            /* links dark mode             */
}

/* --- Material theme overrides: light mode --------------------------------- */

[data-md-color-scheme="default"] {
  --md-primary-fg-color:         var(--vmp-dark-blue);
  --md-primary-bg-color:         var(--vmp-off-white);
  --md-accent-fg-color:          var(--vmp-blue);
  --md-typeset-a-color:          var(--vmp-blue-dark);
  --md-default-fg-color:         #474748;
  --md-footer-bg-color:          var(--vmp-dark-blue);
  --md-footer-bg-color--dark:    rgba(0, 0, 0, 0.32);
  --md-footer-fg-color:          var(--vmp-off-white);
  --md-footer-fg-color--light:   rgba(245, 245, 242, 0.7);
  --md-footer-fg-color--lighter: rgba(245, 245, 242, 0.45);
}

/* --- Material theme overrides: dark mode ---------------------------------- */

[data-md-color-scheme="slate"] {
  --md-primary-fg-color:         var(--vmp-dark-blue);
  --md-primary-bg-color:         var(--vmp-off-white);
  --md-accent-fg-color:          var(--vmp-blue-muted);
  --md-typeset-a-color:          var(--vmp-blue-muted);
  --md-footer-bg-color:          var(--vmp-dark-blue);
  --md-footer-bg-color--dark:    rgba(0, 0, 0, 0.32);
  --md-footer-fg-color:          var(--vmp-off-white);
  --md-footer-fg-color--light:   rgba(245, 245, 242, 0.7);
  --md-footer-fg-color--lighter: rgba(245, 245, 242, 0.45);
}

/* --- Direct element overrides (reliable fallback) ------------------------- */
/* Target the header/navbar directly in case CSS variable propagation        */
/* differs in Zensical from MkDocs Material.                                 */

.md-header {
  background-color: rgb(22, 18, 37);
  color: rgb(245, 245, 242);
}

.md-header__button,
.md-header__button.md-icon,
.md-header__title,
.md-header__topic {
  color: rgb(245, 245, 242);
}

.md-header__topic:first-child {
  font-weight: 500 !important;
}


.md-header__button:hover,
.md-header__button.md-icon:hover {
  color: rgb(245, 245, 242);
  opacity: 0.8;
}

.md-header__title {
  margin-left: 1.5rem !important;
}

.md-footer {
  background-color: rgb(22, 18, 37);
  color: rgb(245, 245, 242);
}

.md-footer-meta {
  background-color: rgba(0, 0, 0, 0.32);
}

.md-footer__link,
.md-footer__title {
  color: rgb(245, 245, 242);
}

.md-typeset a {
  color: rgb(73, 97, 205);
}

[data-md-color-scheme="slate"] .md-typeset a {
  color: #8CA1FF;
}

/* --- Sidebar logo --------------------------------------------------------- */
/* Use a different logo in the mobile drawer vs the header.                  */

.md-nav--primary .md-logo img {
  content: url("../img/vm_dual_logo.png");
}

/* --- Typography ----------------------------------------------------------- */
/* Use Vipps Font for all body text.                               */
/* Display font is kept for headings but only if it loads cleanly.           */

body,
.md-typeset,
.md-nav,
.md-header__title {
  font-family: "Vipps Font", sans-serif;
}

/* --- Search bar ----------------------------------------------------------- */
/* Force the same appearance in both light and dark mode.                    */
/* The header is always dark blue so the button should always look the same. */

/* Pill background and text color (min-width:45em matches the theme's query) */
@media screen and (min-width: 45em) {
  .md-search__button {
    background-color: rgba(245, 245, 242, 0.12) !important;
    color: rgb(245, 245, 242) !important;
  }

  .md-search__button:hover,
  .md-search__button:focus {
    background-color: rgba(245, 245, 242, 0.2) !important;
    color: rgb(245, 245, 242) !important;
  }
}

/* Magnifying glass: rendered via mask-image, colored by background-color    */
.md-search__button::before {
  background-color: rgb(245, 245, 242) !important;
}

/* Ctrl+K / ⌘K badge */
.md-search__button::after {
  background: rgba(245, 245, 242, 0.15) !important;
  color: rgb(245, 245, 242) !important;
}

/* --- Layout --------------------------------------------------------------- */
/* Remove the min-height that stretches short pages, causing excess whitespace
   between content and the prev/next nav + footer.                           */

.md-main__inner {
  min-height: 0 !important;
}

/* --- Skip to content link ------------------------------------------------- */
/* Zensical hides it with color:transparent which fails accessibility checks. */
/* Give it proper brand colors so it's correct when focused via keyboard.     */

.md-skip {
  background-color: rgb(22, 18, 37) !important;
  color: rgb(245, 245, 242) !important;
}

/* --- Heading permalink anchors -------------------------------------------- */
/* Use visibility:hidden (not color:transparent) so accessibility tools       */
/* don't flag a zero-alpha element as a contrast failure.                     */

.md-typeset .headerlink {
  visibility: hidden !important;
  color: var(--vmp-blue-dark) !important;
}

[data-md-color-scheme="slate"] .md-typeset .headerlink {
  color: var(--vmp-blue-muted) !important;
}

.md-typeset :hover > .headerlink,
.md-typeset .headerlink:focus {
  visibility: visible !important;
}

/* --- Prev/next nav contrast fix ------------------------------------------ */

.md-footer__inner {
  border-top: 1px solid #e0e0e0;
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
}

@media (max-width: 600px) {
  .md-footer__inner .md-footer__title {
    display: none;
  }
}

/* Light mode — force all nav content dark */
[data-md-color-scheme="default"] .md-footer__inner {
  background-color: #ffffff;
}

[data-md-color-scheme="default"] .md-footer__inner *,
[data-md-color-scheme="default"] .md-footer__inner a,
[data-md-color-scheme="default"] .md-footer__inner svg {
  color: #1a1a1a !important;
  fill: #1a1a1a !important;
}

[data-md-color-scheme="default"] .md-footer__direction {
  display: none;
}

/* Dark mode — force all nav content light */
[data-md-color-scheme="slate"] .md-footer__inner {
  background-color: var(--md-default-bg-color);
  border-top-color: rgba(255, 255, 255, 0.1);
}

[data-md-color-scheme="slate"] .md-footer__inner *,
[data-md-color-scheme="slate"] .md-footer__inner a,
[data-md-color-scheme="slate"] .md-footer__inner svg {
  color: rgb(245, 245, 242) !important;
  fill: rgb(245, 245, 242) !important;
}

[data-md-color-scheme="slate"] .md-footer__direction {
  display: none;
}

/* --- Footer --------------------------------------------------------------- */

.vmp-footer-main {
  background-color: rgb(22, 18, 37);
  padding: 1.5rem 0 1.25rem;
}

.vmp-footer-main .md-grid {
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
}

.vmp-footer-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vmp-footer-copyright {
  font-family: "Vipps Font", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: rgba(245, 245, 242, 0.75);
  text-align: left;
  grid-column: 1 / -1;
  justify-self: stretch;
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
  padding-left: 0 !important;
}

.vmp-footer-main__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: flex-start;
  column-gap: 15rem;
}

/* Left: brand block */
.vmp-footer-brand {
  flex: 0 0 280px;
}

/* Mobile: stack brand above links */
@media (max-width: 600px) {
  .vmp-footer-main__inner {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  .vmp-footer-brand {
    width: 100%;
    padding-bottom: 1rem;
  }

  .vmp-footer-cols {
    width: 100%;
    justify-content: flex-start;
    padding-right: 0;
  }

  .vmp-footer-copyright {
    margin-top: 1.5rem !important;
  }
}


.vmp-footer-brand__name {
  font-family: "Vipps MobilePay Display", sans-serif;
  font-size: 32px;
  font-weight: 400;
  color: rgb(245, 245, 242);
  margin-bottom: 0.5rem;
  line-height: 52.8px;
}

.vmp-footer-brand__icons {
  display: block;
  height: 28px;
  width: auto;
  margin-bottom: 0.75rem;
  border-radius: 6px;
}

/* Bottom copyright bar */
.vmp-footer-bottom {
  padding: 0.75rem 0;
.vmp-footer-bottom .md-grid {
  font-family: "Vipps Font", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: rgba(245, 245, 242, 0.75);
}

}

/* Right: link columns */
.vmp-footer-cols {
  display: flex;
  gap: 2rem;
  margin-left: auto;
  padding-right: 2rem;
}

.vmp-footer-col__title {
  display: block;
  font-family: "Vipps Font", sans-serif !important;
  font-weight: 700 !important;
  font-size: 18.4px !important;
  line-height: 23px;
  color: rgba(245, 245, 242);
  margin-bottom: 16px;
  margin-top: 16px;

}

.vmp-footer-col__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.vmp-footer-col__list li {
  margin: 0;
  padding: 0;
}

.vmp-footer-link {
  display: block;
  font-family: "Vipps Font", sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px;
  color: rgba(245, 245, 242) !important;
  padding: 0.2rem 0;
  text-decoration: none !important;
  transition: color 0.15s;
}

.vmp-footer-link::after {
  content: '';
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-left: 5px;
  vertical-align: middle;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(245%2C245%2C242%2C0.85)'%3E%3Cpath d='M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.vmp-footer-link:hover {
  color: rgb(245, 245, 242) !important;
  text-decoration: none !important;
}

/* --- Hide GitHub repository info from header and sidebar ------------------ */
/* repo_url is kept in mkdocs.yml so "Edit this page" links still work.      */

.md-header__source,
.md-nav__source,
.md-nav__item--section > .md-nav__source {
  display: none !important;
}

/* --- Admonitions (match Docusaurus alert colors) -------------------------- */

.md-typeset .admonition,
.md-typeset details {
  border-color: var(--vmp-blue-dark);
  background-color: #F7F8FF;
}

[data-md-color-scheme="slate"] .md-typeset .admonition,
[data-md-color-scheme="slate"] .md-typeset details {
  border-color: var(--vmp-blue-muted);
  background-color: #1F2029;
}

.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-color: #4E956A;
  background-color: #f0fdf4;
}

[data-md-color-scheme="slate"] .md-typeset .admonition.tip,
[data-md-color-scheme="slate"] .md-typeset details.tip {
  border-color: #4E956A;
  background-color: #1A2720;
}

.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-color: #f59e0b;
  background-color: #fffbeb;
}

[data-md-color-scheme="slate"] .md-typeset .admonition.warning,
[data-md-color-scheme="slate"] .md-typeset details.warning {
  border-color: #ad710b;
  background-color: #33231A;
}

.md-typeset .admonition.danger,
.md-typeset details.danger {
  border-color: #C60000;
  background-color: #FDE5E4;
}

[data-md-color-scheme="slate"] .md-typeset .admonition.danger,
[data-md-color-scheme="slate"] .md-typeset details.danger {
  border-color: #A10007;
  background-color: #5A0E13;
}