/* ===== Twiin brand palette (matches afsprakenstelsel.twiin.nl) ===== */
:root > * {
  --md-primary-fg-color:        #243140;  /* navy */
  --md-primary-fg-color--light: #36485a;
  --md-primary-fg-color--dark:  #1a2530;
  --md-accent-fg-color:         #e6396a;  /* magenta */
  --md-accent-fg-color--transparent: rgba(230, 57, 106, .1);

  --tw-navy:   #243140;
  --tw-magenta:#e6396a;
  --tw-orange: #f7901e;
  --tw-soft:   #f6f4f7;
  --tw-border: #e6e2e9;

  /* Align body text/links/surfaces with the LAS (Hugo) register site */
  --md-typeset-a-color:            #e6396a;
  --md-default-fg-color:           #283340;
  --md-default-fg-color--light:    #6a6675;
  --md-default-fg-color--lighter:  #9a96a3;
  --md-default-fg-color--lightest: #e6e2e9;
  --md-code-bg-color:              #f6f4f7;
  --md-accent-fg-color:            #e6396a;
}

/* Links use the Twiin magenta accent, underline on hover (like the LAS site) */
.md-typeset a { color: var(--md-accent-fg-color); }
.md-typeset a:hover { text-decoration: underline; }

/* Softer, LAS-style surfaces: rounded admonitions, code and tables */
.md-typeset .admonition,
.md-typeset details { border-radius: 12px; box-shadow: var(--tw-shadow, 0 1px 2px rgba(36,49,64,.06), 0 4px 16px rgba(36,49,64,.07)); border-left-width: 4px; }
.md-typeset pre > code,
.md-typeset .highlight { border-radius: 8px; }
.md-typeset table:not([class]) { border-radius: 8px; overflow: hidden; }

/* Headings in the Twiin slate (like the LAS site) */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 { color: var(--tw-navy); font-weight: 700; }

/* Match the LAS content column: LAS uses max-width 1140px. The theme's grid is
   61rem and the root font-size is 125% (1rem = 20px), so 61rem = 1220px. Set it
   to 57rem (= 1140px) so the header, hero, content and footer columns — and thus
   the logo position — line up with the LAS site. */
.md-grid { max-width: 57rem; }
/* LAS uses a 1.25rem (20px) gutter inside the column. Match it: header, hero,
   content and footer all use a 1rem (= 20px) inner gutter so the logo, headings,
   tiles and footer line up at the same x as the LAS site. */
.md-content__inner { margin-left: 1rem; margin-right: 1rem; }

/* Content pages (everything except the landing page, which has .tw-hero) use a
   wider column so the nav + TOC sidebars move toward the screen edges and the
   content uses more of the available width. Responsive: up to 84rem, otherwise
   94vw; below the layout breakpoints the sidebars collapse to drawers as usual. */
body:not(:has(.tw-hero)) .md-grid { max-width: min(94vw, 84rem); }

/* Header: only the logo, no site-title text. */
.md-header__title { display: none; }
/* Align the header inner with the page content column (like the LAS .wrap):
   the content has a .8rem gutter, so the logo sits on the same left edge as the
   content and the search reaches the same right edge. Logo button padding zeroed
   on the left so the logo image itself lines up with the content. */
.md-header__inner { padding-left: 1rem !important; padding-right: 1rem !important; }
.md-header__button.md-logo { display: inline-flex; margin-left: 0; padding-left: 0; }
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.9rem;            /* 38px (1rem = 20px), matching the LAS header-logo */
  width: auto;
}
/* The repo-source slot is unused but reserves ~230px — remove it so the
   version-switcher + search can reach the right edge. */
.md-header__source { display: none; }
/* Push the version-switcher + search cluster to the right edge. */
.md-header__option { margin-left: auto; }
.tw-version-nav { margin-left: auto; }
.tw-version-nav ~ .md-header__option { margin-left: .5rem; }

/* Hide the auto-generated empty "Index" title on the landing page */
h1#__skip { display: none; }

/* Hero search box behaves like a button that opens the global search */
#tw-hero-search { cursor: pointer; background: #fff; }

/* Version switcher in the header (only injected on version pages) */
.tw-version-nav {
  margin-right: .6rem;          /* margin-left stays auto (set above) */
  padding: .25rem .5rem;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 8px;
  font-size: .76rem;
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  cursor: pointer;
  max-width: 14rem;
}
@media screen and (max-width: 60em) {
  .tw-version-nav { max-width: 9rem; font-size: .72rem; }
}

/* ===== Landing hero (full-bleed banner, like the LAS .banner) ===== */
.tw-hero {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  /* break out of the content container to the full viewport width */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 0;            /* flush under the header (see :has() rules below) */
  margin-bottom: 2rem;
  padding: 4rem 0 3.4rem;   /* match LAS .banner padding-block: 4rem 3.4rem */
  color: #fff;
  background: var(--tw-navy) url("../assets/images/twiin-banner-as.jpeg") center/cover no-repeat;
}
/* Inner column: align the title with the page content. .md-grid supplies the
   same max-width + auto margins as the rest of the page; the 1rem inset matches
   the content gutter so the title lines up with the headings/tiles below. */
.tw-hero .tw-hero__inner { padding-left: 1rem !important; padding-right: 1rem !important; }
/* Landing page only: drop the grid top-margin and article top-padding so the
   banner sits flush under the header (no gap / line), like the LAS site. */
.md-main__inner:has(.tw-hero) { margin-top: 0; }
.md-content__inner:has(.tw-hero) { padding-top: 0; }
.md-content__inner:has(.tw-hero)::before { display: none; }  /* 8px margin-guard */
.tw-hero h1, .tw-hero .tw-hero__title {
  color: #fff !important;
  font-size: 2.16rem;        /* 43px — matches LAS .banner__title (2.7rem @16px) */
  line-height: 1.08;
  font-weight: 700;
  margin: 0;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .28);
}
@media screen and (max-width: 35em) {
  .tw-hero .tw-hero__title { font-size: 1.6rem; }   /* 32px, like LAS mobile */
}

/* ===== Version tiles ===== */
.tw-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.2rem;
  margin: 1.5rem 0 2.5rem;
}
.tw-tile {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  background: var(--md-default-bg-color);
  border: 1px solid var(--tw-border);
  border-radius: 12px;
  padding: 1.4rem 1.4rem 1.2rem;
  text-decoration: none !important;
  color: inherit;
  box-shadow: 0 1px 2px rgba(36,49,64,.06), 0 4px 16px rgba(36,49,64,.07);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.tw-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(16,24,40,.14);
  border-color: var(--md-accent-fg-color);
}
.tw-tile__badge {
  align-self: flex-start;
  font-size: .6rem;          /* 12px — matches LAS .badge (.74rem @16px) */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .15rem .55rem;
  border-radius: 999px;
}
.tw-tile__badge--normatief { background: #e3f6ec; color: #0f7a43; }
.tw-tile__badge--uitgefaseerd { background: #eceef3; color: #444c5e; }
/* Version number: a few points larger than the LAS card title (1.02rem @16 ≈ 16px) */
.tw-tile__version { font-size: 1.1rem; font-weight: 700; color: var(--tw-navy); line-height: 1.1; }
.tw-tile__desc { color: var(--md-default-fg-color--light); font-size: .7rem; }  /* 14px, like LAS .card__summary */
.tw-tile__cta { margin-top: auto; font-weight: 600; font-size: .7rem; color: var(--md-accent-fg-color); }

/* Dark mode tiles */
[data-md-color-scheme="slate"] .tw-tile__version { color: #e8ecf6; }

/* ===== Eisencatalogus filter UI ===== */
.eisen-toolbar {
  position: sticky; top: 0; z-index: 3;
  background: var(--md-default-bg-color);
  border: 1px solid var(--tw-border);
  border-radius: 10px;
  padding: .9rem 1rem;
  margin: 1rem 0 1.25rem;
  display: flex; flex-direction: column; gap: .7rem;
}
.eisen-search {
  width: 100%; padding: .55rem .8rem;
  border: 1px solid var(--tw-border); border-radius: 8px;
  font-size: .95rem; background: var(--md-default-bg-color); color: inherit;
}
.eisen-search:focus { outline: none; border-color: var(--md-accent-fg-color); }
.eisen-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.eisen-filters select {
  padding: .35rem .55rem; border: 1px solid var(--tw-border);
  border-radius: 8px; font-size: .82rem; background: var(--md-default-bg-color); color: inherit;
}
.eisen-reset {
  padding: .35rem .7rem; border: 1px solid var(--tw-border); border-radius: 8px;
  background: none; color: var(--md-default-fg-color--light); cursor: pointer; font-size: .82rem;
}
.eisen-reset:hover { background: var(--tw-soft); }
.eisen-count { font-size: .82rem; color: var(--md-default-fg-color--light); }
.eisen-card {
  border: 1px solid var(--tw-border); border-radius: 10px;
  padding: .9rem 1.1rem; margin: .6rem 0;
}
.eisen-card[hidden] { display: none; }
.eisen-card__head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.eisen-card__uid { font-family: var(--md-code-font-family, monospace); font-weight: 700; color: var(--tw-magenta); }
.eisen-card__title { font-weight: 600; }
.eisen-chip {
  display: inline-block; font-size: .72rem; padding: .1rem .5rem; border-radius: 999px;
  background: var(--tw-soft); border: 1px solid var(--tw-border); color: var(--md-default-fg-color--light);
  margin: .15rem .15rem 0 0;
}
.eisen-empty { color: var(--md-default-fg-color--light); font-style: italic; padding: 1rem 0; }
.eisen-attr { width: 100%; border-collapse: collapse; margin-top: .6rem; font-size: .85rem; }
.eisen-attr th { text-align: left; vertical-align: top; width: 12rem; padding: .25rem .6rem .25rem 0; color: var(--md-default-fg-color--light); font-weight: 600; }
.eisen-attr td { padding: .25rem 0; vertical-align: top; }

/* Compact attribute table inside an eisencatalogus card (markdown table) */
.md-typeset .eisen-card { scroll-margin-top: 4rem; }
.md-typeset .eisen-card .md-typeset__table { display: block; }
.md-typeset .eisen-card table { width: auto; display: table; margin: .5rem 0 .8rem; font-size: .82rem; border: none; }
.md-typeset .eisen-card thead { display: none; }                    /* empty header row */
.md-typeset .eisen-card tbody tr { background-color: transparent !important; }
.md-typeset .eisen-card td, .md-typeset .eisen-card tr { border: none !important; padding: .12rem .8rem .12rem 0; }
.md-typeset .eisen-card td:first-child { color: var(--md-default-fg-color--light); white-space: nowrap; vertical-align: top; }
.md-typeset .eisen-card h4 { margin: .2rem 0 .4rem; font-size: .95rem; }
.md-typeset .eisen-card p { margin: .3rem 0; }

/* ===== Faceted search page (/zoeken/) ===== */
.tw-search {
  display: grid;
  grid-template-columns: 16rem 1fr;
  gap: 1.5rem;
  margin-top: 1.2rem;
  align-items: start;
}
@media screen and (max-width: 50em) {
  .tw-search { grid-template-columns: 1fr; }
}
.tw-search__filters {
  position: sticky; top: 4.5rem;
  border: 1px solid var(--tw-border); border-radius: 10px;
  padding: 1rem; font-size: .85rem;
  background: var(--md-default-bg-color);
}
.tw-facet { margin-bottom: 1rem; }
.tw-facet:last-child { margin-bottom: 0; }
.tw-facet h3 {
  margin: 0 0 .4rem; font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--md-default-fg-color--light);
}
.tw-facet__option {
  display: flex; align-items: center; gap: .5rem;
  padding: .2rem 0; cursor: pointer;
}
.tw-facet__option input { margin: 0; }
.tw-facet__name { flex: 1; }
.tw-facet__count {
  font-size: .75rem; color: var(--md-default-fg-color--light);
  background: var(--tw-soft); border-radius: 999px; padding: 0 .45rem;
}
.tw-facet__reset {
  display: inline-block; margin-bottom: .8rem;
  padding: .3rem .7rem; border: 1px solid var(--tw-border); border-radius: 8px;
  background: none; color: var(--md-default-fg-color--light);
  cursor: pointer; font-size: .8rem;
}
.tw-facet__reset:hover { background: var(--tw-soft); }
.tw-search__form { margin: 0 0 .6rem; }
.tw-search__form input {
  width: 100%; padding: .6rem .9rem; font-size: 1rem;
  border: 1px solid var(--tw-border); border-radius: 8px;
  background: var(--md-default-bg-color); color: inherit;
}
.tw-search__form input:focus { outline: none; border-color: var(--md-accent-fg-color); }
.tw-search__stats { font-size: .85rem; color: var(--md-default-fg-color--light); margin: .2rem 0 1rem; }
.tw-search__result {
  border: 1px solid var(--tw-border); border-radius: 10px;
  padding: .9rem 1.1rem; margin: 0 0 .8rem;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.tw-search__result:hover { border-color: var(--md-accent-fg-color); box-shadow: 0 4px 16px rgba(36,49,64,.07); }
.tw-search__result a { text-decoration: none; color: inherit; }
.tw-search__result-head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; justify-content: space-between; }
.tw-search__result h3 { margin: 0; font-size: 1.05rem; color: var(--tw-navy); }
.tw-search__chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.tw-search__chip {
  font-size: .7rem; padding: .1rem .5rem; border-radius: 999px;
  background: var(--tw-soft); border: 1px solid var(--tw-border);
  color: var(--md-default-fg-color--light); white-space: nowrap;
}
.tw-search__excerpt { margin: .4rem 0 0; font-size: .9rem; color: var(--md-default-fg-color--light); }
.tw-search__excerpt mark { background: var(--tw-magenta); color: #fff; padding: 0 .15rem; border-radius: 3px; }
.tw-search__empty { color: var(--md-default-fg-color--light); font-style: italic; }

/* ===== Footer — identical to the LAS .site-footer / .wrap.site-footer__inner.
   LAS runs at a 16px root, Twiin at 20px, so every LAS rem is multiplied by 0.8
   here to land on the same pixel sizes (e.g. .85rem@16 = 13.6px -> .68rem@20). */
.md-footer { margin-top: 3.2rem; }                  /* LAS 4rem = 64px */
.md-footer-meta { background: var(--tw-soft); }
/* Inner stays at the LAS column width (57rem ≈ 1140px) even on the wider content
   pages, with LAS vertical padding (2rem@16 = 32px) and a 1rem (20px) gutter. */
.md-footer-meta__inner {
  padding-block: 1.6rem;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}
body:not(:has(.tw-hero)) .md-footer-meta__inner { max-width: 57rem; }
.md-footer-meta .md-copyright {
  color: var(--md-default-fg-color--light);
  font-size: .68rem;                                /* LAS .85rem = 13.6px */
  margin-left: 0;
  width: 100%;
}
.md-footer-meta a { color: var(--md-accent-fg-color); }

/* Two-column grid, licentie block (CC badge + text) in the left column. */
.tw-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; align-items: start; }
.tw-footer__license { display: flex; align-items: center; gap: .56rem; flex-wrap: wrap; margin: .24rem 0; }
.tw-footer__cc img { display: block; border: 0; }
@media screen and (max-width: 50em) {
  .tw-footer { grid-template-columns: 1fr; }
}