/*
  Twiin house style for IG pages built with fhir2.base.template 0.1.0. Loaded after project.css
  (via fragment-css.html), so the variables below override those of the base template. Colours and
  typeface follow the Twiin styleguide and the site style of fhir.twiin.nl (ig/_twiin/site.css).
  Code: licence TBD. Albert Sans: SIL Open Font License 1.1 (fonts/OFL.txt).
*/

@font-face {
  font-family: "Albert Sans";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/albert-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Albert Sans";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/albert-sans-latin-700-normal.woff2") format("woff2");
}

:root {
  --rood: #EE4763;
  --oranje: #FF8C02;
  --donkergrijs: #3E4D5B;
  --grijsblauw: #4C7091;
  --grijs: #8B9CB2;
  --lichtgrijs: #E9E9E9;
  --lichtgrijs-20: #F8F8F8;
  --grijs-40: #D1D7E0;

  /* Logo with the line "Landelijk afsprakenstelsel ...", sized and spaced by the rules for the
     wordmark (Huisstijlhandboek Twiin, Nov 2023, p. 4): wordmark at least 25 mm wide, clear space
     20% of the wordmark width. The wordmark is 33.8% of the width of the logo. */
  --wordmark-width: 100px;
  --logo-width: calc(var(--wordmark-width) / 0.338);
  --logo-clear: calc(var(--wordmark-width) * 0.2);
  --stripe-gradient: linear-gradient(90deg, var(--oranje), var(--rood));

  /* Variables of project.css in fhir2.base.template */
  --ig-status-text-color: var(--donkergrijs);
  --navbar-bg-color: var(--donkergrijs);
  --footer-bg-color: var(--lichtgrijs);
  --footer-container-bg-color: var(--donkergrijs);
  --stripe-bg-color: var(--oranje);
  --btn-hover-color: var(--grijsblauw);
  --btn-active-color: var(--grijsblauw);
  --btn-text-color: #ffffff;
  --btn-gradient-start-color: var(--donkergrijs);
  --btn-gradient-end-color: var(--donkergrijs);
  --btn-gradient-start-color-alpha: var(--donkergrijs);
  --btn-gradient-end-color-alpha: var(--donkergrijs);
  --link-color: var(--grijsblauw);        /* 5.0:1 on white; Blauw (#4797CE) is only 3.1:1 */
  --link-hover-color: var(--donkergrijs);
  --publish-box-bg-color: var(--lichtgrijs-20);
  --publish-box-border: 1px solid var(--grijs-40);
  --toc-box-bg-color: var(--lichtgrijs-20);
  --toc-box-border: 1px solid var(--grijs-40);
  --ig-header-color: var(--lichtgrijs-20);
  --ig-header-container-color: #ffffff;
  --footer-nav-bg-color: var(--lichtgrijs);
  --footer-text-color: #ffffff;
  --footer-hyperlink-text-color: var(--lichtgrijs);
  --footer-highlight-text-color: #ffffff;
  --breadcrumb-bg-color: var(--lichtgrijs);
  --breadcrumb-text-color: var(--donkergrijs);
}

/* Albert Sans for every selector that fhir.css, bootstrap-fhir.css and project.css give a typeface
   (verdana or Helvetica); code keeps its monospace typeface. */
body, p, li, td, th, tr, h1, h2, h3, h4, h5, h6,
ul.dict li, table.dict td, table.dict td.structure, table.codes td, table.grid th, table.grid td,
.hierarchy, tr.hierarchy, table.lmap th, table.lmap td,
.navbar .nav > li > a, .breadcrumb, #ig-status, #segment-footer {
  font-family: "Albert Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body { color: var(--donkergrijs); }
h1, h2, h3, h4, h5, h6 { color: var(--donkergrijs); font-weight: 700; }

/* Header: logo with a clear zone of 20% of the wordmark width on every side; IG title and status on the right. */
#segment-header > .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--logo-clear);
  padding: var(--logo-clear);
  height: auto;
}
#twiin-logo { display: block; width: var(--logo-width); max-width: 100%; }
#twiin-logo img { display: block; width: 100%; height: auto; }
#ig-status { float: none; margin: 0; height: auto; text-align: left; }
#ig-status p { margin: 0; }  /* Bootstrap's bottom margin would put the text above the middle of the logo. */
#ig-status span { font-family: inherit; }

/* Orange-red line above the dark grey navigation bar. */
#segment-navbar { padding-top: 8px; }
#stripe { background: var(--stripe-gradient); height: 8px; top: 0; }
.navbar-inverse { background-image: none; background-color: var(--navbar-bg-color); border: 0; }

/* Fixed link back to the overview of all Twiin IGs, right of the IG's own menu (menu.xml). */
#twiin-nav-all { clear: both; float: none; }
@media (min-width: 768px) {
  #twiin-nav-all { clear: none; float: right; }
}

/* The clearfix ::before/::after of .container would be flex items of the header. */
#segment-header > .container::before,
#segment-header > .container::after { content: none; }

/* Wide tables scroll inside their own container (assets/js/twiin-tables.js) instead of widening
   the page. Text in tables never breaks inside a word, so columns keep at least the width of their
   longest word. Outside tables long words (URLs) may break: break-word, unlike anywhere, does not
   lower the minimum width that a table column is laid out with. */
.twiin-table-scroll { overflow-x: auto; max-width: 100%; position: relative; }  /* relative: also clips the absolutely positioned filter of the profile tables */
#segment-content { overflow-wrap: break-word; }
#segment-content table, #segment-content table * { overflow-wrap: normal; word-break: normal; }


/* Footer links: underlined, no external-link icons. The id selector (1,0,2) outranks project.css
   p a[href^="https://"]:not([no-external^="true"]):after (0,2,3). */
#segment-footer a { text-decoration: underline; }
#segment-footer a::after { content: none; }  /* No external-link icons in the footer. */