/* Site fixes added by the build (the original pages in site/ are unchanged).
   Pages style everything inline, so these rules use !important on purpose. */

/* Page colours used by the fixes below (the build marks <html data-mm-theme>). */
:root { --mm-hero-bg: #12110F; --mm-hero-top: rgba(18, 17, 15, .55); }
html[data-mm-theme="light"] { --mm-hero-bg: #EEE8DC; --mm-hero-top: rgba(238, 232, 220, .65); }

/* ---------- Theme button: drawn sun / moon icons ----------
   The ☀ / ☾ characters render as coloured emoji or different glyphs on phones.
   Dark pages show a sun (switch to light), light pages show a moon. */
a[title="Light version"], a[title="النسخة الفاتحة"],
a[title="Dark version"], a[title="النسخة الداكنة"] {
  font-size: 0 !important;
}
a[title="Light version"]::before, a[title="النسخة الفاتحة"]::before,
a[title="Dark version"]::before, a[title="النسخة الداكنة"]::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: var(--mm-theme-icon) center / contain no-repeat;
  mask: var(--mm-theme-icon) center / contain no-repeat;
}
a[title="Light version"], a[title="النسخة الفاتحة"] {
  --mm-theme-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2.5v2.2M12 19.3v2.2M2.5 12h2.2M19.3 12h2.2M5.3 5.3l1.6 1.6M17.1 17.1l1.6 1.6M5.3 18.7l1.6-1.6M17.1 6.9l1.6-1.6'/%3E%3C/svg%3E");
}
a[title="Dark version"], a[title="النسخة الداكنة"] {
  --mm-theme-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M20.5 14.2A8.5 8.5 0 1 1 9.8 3.5a6.8 6.8 0 0 0 10.7 10.7z'/%3E%3C/svg%3E");
}

/* ---------- Phones ---------- */
@media (max-width: 760px) {

  /* Site header: the menu (☰) holds the page links, so drop the inline nav
     and tighten the buttons so everything fits on the screen. */
  header:has(> nav) {
    gap: 12px !important;
    justify-content: space-between !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  header:has(> nav) > nav { display: none !important; }
  header:has(> nav) > div:last-child { gap: 10px !important; }
  header:has(> nav) > div:last-child > a[title],
  header:has(> nav) > div:last-child > button {
    width: 40px !important;
    height: 40px !important;
  }
  header:has(> nav) > div:last-child > a[href*="Login"] {
    padding: 8px 12px !important;
    font-size: 13px !important;
    white-space: nowrap;
  }

  /* Full-screen menu: smaller links so long labels fit and wrap cleanly. */
  a[data-ml] {
    font-size: 30px !important;
    gap: 14px !important;
    line-height: 1.35 !important;
  }
  div:has(> div > div > a[data-ml]) {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* Heroes with a side photo (Home, Biography, Parliamentary Work): photo on
     top, text below, instead of the title running over the face. On the home
     page phones also get the portrait photo (see MOBILE_SRC_SCRIPT). */
  section[data-hero]:has(> [data-rv="clip"][style*="width"]) {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  section[data-hero] > [data-rv="clip"][style*="width"] {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 60vh !important;
    flex-shrink: 0;
  }
  /* show the top of the photo (heads) rather than cropping it */
  section[data-hero] > [data-rv="clip"][style*="width"] > [data-px] { top: -4% !important; }
  /* the desktop side-shade darkens half the photo on a phone; use a soft
     top fade (header legibility) and bottom fade (blends into the text) */
  section[data-hero] > [data-rv="clip"][style*="width"] > div:last-child {
    background:
      linear-gradient(to bottom, var(--mm-hero-top) 0%, transparent 24%),
      linear-gradient(to top, var(--mm-hero-bg) 0%, transparent 32%) !important;
  }
  section[data-hero]:has(> [data-rv="clip"][style*="width"]) > div[style*="z-index: 2"] {
    padding-top: 8px !important;
    padding-bottom: 72px !important;
  }

  /* Biography timeline: one column, line and dots on the start edge. */
  [data-tl] > div:first-child {
    inset-inline-start: 7px !important;
    inset-inline-end: auto !important;
  }
  [data-tli] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
    padding-inline-start: 36px !important;
  }
  [data-tli] > div {
    order: 0 !important;
    text-align: start !important;
    align-items: flex-start !important;
  }
  [data-tli] > div[data-rv="clip"] {
    order: -1 !important;
    height: 210px !important;
  }
  [data-tldot] {
    top: 44px !important;
    inset-inline-start: 0 !important;
    inset-inline-end: auto !important;
    margin: 0 !important;
  }

  /* Parliament activity list: full-width title, type badge above it. */
  a[data-act] {
    grid-template-columns: minmax(0, 1fr) 40px !important;
    gap: 12px 14px !important;
    padding: 22px 4px !important;
  }
  a[data-act] > span:first-child { grid-column: 1 / -1; }
  a[data-act] > span:last-child { width: 40px !important; height: 40px !important; }

  /* Three-column step / figure rows on the home page: lighter so they fit. */
  [style*="repeat(3,"][style*="border-top"] > div { padding: 18px 10px !important; }
  [style*="repeat(3,"][style*="border-top"] > div > span:nth-child(2) { font-size: 15px !important; }
  [style*="repeat(3,"][style*="border-top"] > div > span:nth-child(3) { font-size: 12px !important; }

  /* Dashboard: sidebar becomes a top bar, content uses the full width. */
  div:has(> aside + main) { flex-direction: column !important; }
  div:has(> aside + main) > aside:first-of-type {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px 16px !important;
    padding: 14px 16px !important;
  }
  div:has(> aside + main) > aside:first-of-type > div:nth-child(2) {
    border: 0 !important;
    padding: 0 !important;
  }
  div:has(> aside + main) > aside:first-of-type > div:last-child {
    margin-top: 0 !important;
    margin-inline-start: auto !important;
    flex-direction: row !important;
    gap: 14px !important;
    padding: 0 !important;
  }
  div:has(> aside + main) > aside:first-of-type > nav {
    order: 10;
    width: 100%;
    flex-direction: row !important;
    overflow-x: auto;
    scrollbar-width: none;
  }
  div:has(> aside + main) > aside:first-of-type > nav button { white-space: nowrap; }
  div:has(> aside + main) > main > header { position: relative !important; }

  /* Sign-in / dashboard corner buttons (language, theme): smaller on phones
     so they cover less of the page. */
  a[style*="position: fixed"][style*="bottom: 24px"] {
    bottom: 12px !important;
    padding: 9px 14px !important;
    font-size: 13px !important;
  }
  /* The only grid-column inside the dashboard is "span 2"; in a one-column
     grid it would add a second column and overflow. */
  div:has(> aside + main) > main [style*="grid-column"] { grid-column: auto !important; }
}

/* Very small phones: keep only the MM mark in the header logo. */
@media (max-width: 400px) {
  header:has(> nav) > a:first-child > span:last-child { display: none !important; }
}