/*
Template:	Joomla 4 Template Cassiopeia extended CSS document voor Amnesty Groepen websites
CSS:		/httpdocs/templates/cassiopeia/css/user.css
Versie:		1.2.0
Datum:		03-08-2022
Modelsites:	AI Header Geel, AI Brand logo Geel, AI Header Zwart, AI Brand logo Zwart
			(verwissel variabelen basis ZWART en basis GEEL)
*/

/* Wijzigingen G100: Geel 100% 
0.9.0 G100 26-01-2022 Aangepast voor kleinere schermen/responsive. Voorlopige productieversie.
1.0.0 G100 19-05-2022 Definitieve productie versie. Sitebarright op 100%. 
					  Kop h3 Contactpersoon bij Contactpersonen uitgezet.
1.1.0 G100 21-06-2022 Aanpassing voor betere toegankelijkheid, accessibility via tab-toets.
					  Bij menu item met focus, een outline border.
1.2.0 G100 03-08-2022 Aanpassing font bij gebruik Menu/Menukop ipv Artikelen.
                      Variabele  --ai-hoofdmenu-padding: 1em toegevoegd, voor aanpassen breedte.
                      Bij Sidebarright, menu-item scheidingsteken, font bold.
*/

/* Basis variabelen voor diverse instellingen, header, footer, containers etc */
:root {
  --cassiopeia-color-primary: black;
  --cassiopeia-color-link: #000000;
  --cassiopeia-color-hover: #7a7a7a;
  --card-bg: red !important;
  /* body Cassiopeia origineel 1rem, 400, 1.5, #22262a, white */
  --body-font-size: 1rem;
  --body-font-weight: 400;
  --body-line-height: 1.2;
  --body-color: #22262a;
  --body-bg: var(--gray-200);
  /* Aanpasen breedte hoofdmenu (padding) bij veel items, origineel 1em */
  --ai-hoofdmenu-padding: 1em;
  /* AI instellingen voor basis ZWART - verwissel volgorde ZWART / GEEL */ 
  --ai-header-background: black;
  --ai-header-menu-background: black;
  --ai-header-menu-tekst: yellow;  
  --ai-site-description-width: initial;
  --ai-grid-child-top: 0;
  --ai-card-header-background: var(--gray-500);
  --ai-ai-header-group-background: yellow;
  --ai-ai-header-tekst: black;  
  /* AI instellingen voor basis GEEL - behoud volgorde ZWART / GEEL */
  --ai-header-background: var(--gray-200);
  --ai-header-menu-background: yellow;
  --ai-header-menu-tekst: black;
  --ai-site-description-width: 100%;
  --ai-grid-child-top: 0.5em;
  --ai-card-header-background: yellow;
  --ai-ai-header-group-background: black;
  --ai-ai-header-tekst: white;  
  /* AI instellingen voor breedte sidebar-right.
     Hoofdcomponent en AI Header worden dan ook aangepast */
  --ai-sidebar-right-width: 100%;		/* 100% | 90% | 80% */
}

/* standaard font-weight voor headers van 700 -> 500 (eventueel combineren met bold) */
h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
  font-weight: 500;
}

/* header achtergrond wit of zwart, geen image/verloop, boven 0.6em  */
.container-header {
  background-color: var(--ai-header-background);
  background-image: none;
  padding-top: 0.6rem;
}

/* header en menu, padding links/rechts 0 */
.container-header .grid-child {
  padding: 0.5em 0 var(--ai-grid-child-top) 0;
}

/* ruimte tussen menu en body kleiner */
.container-header .container-nav {
  padding-bottom: 0;
}

/* voorkom header/logo op hele regel, site description na logo */
.container-header .navbar-brand {
  display: contents;
  margin-top: 2rem !important;
}

/* aanpassen grootte brand logo */
.container-header .navbar-brand img { 
  width: 15rem; min-width: 15rem; 
}

/* tekst site-descripton groter, vetter, zwart op geel, width smal of breed */
.container-header .site-description {
  font-size: 1.6rem;
  font-size: calc(1.325rem + 0.9vw);
  font-weight: 600;  
  color: black;
  background: yellow;
  padding-top: 2rem;
  padding-right: 1rem;
  width: var(--ai-site-description-width);
}

/* aanpassen hoofd menu kleur, zwart op geel of geel op zwart, bold */
.container-header .mod-menu {
  color: var(--ai-header-menu-tekst);
  font-weight:600;
  background: var(--ai-header-menu-background);
}

/* bij gebruik van Search, aanpassen kleur, zwart op geel of geel op zwart, bold */
.container-header .container-search {
  background: var(--ai-header-menu-background);
  margin-top: 0;
  padding-top: 0.3em !important;
}

/* aanpassen hoofd menu hover, contra tekst/background */
.container-header .mod-menu a:hover {
  color: var(--ai-header-menu-background);
  background-color: var(--ai-header-menu-tekst);
}

/* aanpassen hoofd menu breedte/padding bij veel items */
.metismenu.mod-menu .metismenu-item {
  padding: 0.5em var(--ai-hoofdmenu-padding);
}

/* aanpassen menu item met focus, b.v. via de tab-toets */
.metismenu.mod-menu .metismenu-item > a:focus,
.metismenu.mod-menu .metismenu-item > button:focus {
  outline: 1px solid var(--gray-500);
}

/* aanpassen submenu block, zwart op geel, geen underline, border */
.metismenu.mod-menu .mm-collapse {
  color: black;
  background-color: yellow;
  font-weight: normal;
  border: 1px solid var(--gray-600);
}

/* aanpassen submenu items padding en border */
.metismenu.mod-menu .mm-collapse li {
  padding: 0.2em 1em 0.2em 0.8em;
  border-bottom: 1px solid var(--gray-300);
}

/* aanpassen submenu hover, geel op zwart, geen underline */
.metismenu.mod-menu .mm-collapse a:hover {
  color: yellow;
  background-color: black;
  text-decoration: none;
}

/* aanpassen menu font bij gebruik van Menukop ipv Artikelen */
.metismenu.mod-menu .mm-toggler {
  font-weight:600;
}

/* bij gebruik van Search, aanpassen kleur, zwart op geel of geel op zwart, bold */
.container-header .container-search {
  background: var(--ai-header-menu-background);
  margin-top: 0;
  padding-top: 0.3em !important;
}

/* bij Zoeken in menu, sidebar-right, footer, seachButton.gif laten zakken */
.container-header .container-nav .button,
.container-sidebar-right .button,
.container-footer .button {
  vertical-align: bottom;
}

/* body lichtgrijs, hoofd component weer achtergrond wit en inspringen */
.container-component {
  background: white;
  padding-left: 1em;
  padding-right: 1em;
  /* hoofd component afhankelijk van breedte sidebar-right (b.v 100 + 0.33 * 10 = 103%) */
  width: calc(100% + 0.33 * (100% - var(--ai-sidebar-right-width))) !important;
}

/* body lichtgrijs, sidebar-right weer achtergrond wit, breedte afhankelijk van variabele */
.container-sidebar-right {
  background: white;
  position: relative;
  /* b.v. left = (100 - 90)/2 = 5% */
  left: calc((100% - var(--ai-sidebar-right-width))/2);
  width: var(--ai-sidebar-right-width) !important; 
}

/* sidebar-right, menu-item Scheidingsteken/separator, font bold */
.container-sidebar-right .separator {
  font-weight: bold;
}

/* sidebar-right, header, achtergrond geel of grijs */
.card-header {
  background-color: var(--ai-card-header-background);
}

/* rand van card wat donkerder */
.card {
  border: 1px solid var(--gray-500);
}

/* sidebar-right, body, padding aangepast, achtergrond licht grijs */
.card-body {
  padding-top: 0.2em;
  padding-bottom: 0;
  background-color:var(--gray-100);
  line-height: 1.0;
}

/* sidebar-right, body, hover, zwart, achtergrond grijs, geen underline */
.card-body a:hover{
  color: black !important;
  background-color: var(--gray-500);
  text-decoration: none !important;
}

/* inlog formuiler, verberg onthoud me, wachtwoord/gebruikernaam vergeten */
.mod-login__remember,
.mod-login__options {
  display: none;
}

/* footer achtergrond zwart, geen image/verloop, padding */
.footer {
  background-color: black;
  background-image: none;
  margin-top: 0.5em;
  margin-bottom: 0;
  padding-bottom: 0.5em;  
}

/* footer linkjes licht grijs */
.footer a {
  color: var(--gray-400);
}

/* footer hover geel, geen underline */
.footer a:hover {
  color: yellow;
  text-decoration: none !important;
}

/* pas hoogte van subonderdelen in footer aan, plaats op gelijke hoogte */
.footer .grid-child {
  align-items: baseline;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

/*** AI HEADER CSS ***
de standaard AI Header CSS lijkt niet opgenomen te worden, hier toegevoegd */

/* hele blok met groepsnaam/omschrijving, tekst rechts, geel, iets lager, hoogte van logo (101) */
.ai_header {
  float: right;
  background-color: yellow;
  margin-bottom: -0.2rem;
  height: 101px !important;
  width: 100%;
}

/* AI Header logo */
.ai_header_logo {
  float: left;
  text-align: left;
}

/* kleiner blokje met groepsnaam/omschrijving, zwart of geel */
.ai_header_groep {
  float: right;
  text-align: center;
  background-color: var(--ai-ai-header-group-background);
  padding-top: 20px !important;
  /* breedte afhankelijk van breedte Sidebar-right, b.v. 24 - 0.2 * (100-90) = 22% */
  width: calc(24% - 0.2 * (100% - var(--ai-sidebar-right-width))) !important;
  height: 100% !important;
}

/* tekst aanpassingen wit op zwart of zwart op geel */
.ai_header_groepsnaam, .ai_header_groepsomschrijving {
  color: var(--ai-ai-header-tekst);
  font-weight: bold;
}
.ai_header_groepsnaam {
  font-size: 1.4rem;
}
.ai_header_groepsomschrijving {
  font-size: 1rem;
}
/*** AI HEADER CSS EIND ***/

/*** INSTELLINGEN VOOR CONTACTPERSONEN ***/
/* zet overbodige kop Contactpersoon bij Contactpersonen uit */
.com-contact__container h3 {
   display: none;
}

/*** INSTELLINGEN VOOR KLEINERE SCHERMEN ***/
@media (max-width: 991.98px) {
  /* aanpassen grootte brand logo */
  .container-header .navbar-brand img { 
    width: 12.5rem; min-width: 12.5rem; 
  }
    /* tekst site-descripton wat kleiner, hoger */
  .container-header .site-description {
    padding-top: 1.5rem;
  }
  /* body weer terug naar max breedte */
  .container-component {
    width: 100% !important;
  }
  /* sidebar-right weer terug naar uitgangspositie en max breedte, donker grijze achtergrond */ 
  .container-sidebar-right {
    left: 0%;
    width: 100% !important; 
    background-color: var(--gray-600);
  } 
  /* footer item uitlijning center */
  .footer .grid-child {
    align-items: center;
  } 
  /* AI Header blokje met groepsnaam/omschrijving naar 50% */
  .ai_header_groep {
    width: 50% !important;
  } 
}

/* instellingen voor kleine smartphone */
@media (max-width: 575.98px) {
  /* aanpassen grootte brand logo */
  .container-header .navbar-brand img { 
    width: 11rem; min-width: 11rem; 
  }  
  /* tekst site-descripton nog wat kleiner, hoger */
  .container-header .site-description {
    font-size: calc(1.3rem + 0.6vw);
    padding-top: 1.2rem;
  }
  /* AI Header minder hoog */
  .ai_header {
    height: 82px !important;
  } 
  /* AI Header blokje met groepsnaam/omschrijving naar 60% */
  .ai_header_groep {
    width: 60% !important;
    padding-top: 10px !important;
  }
  /* AI Header logo naar 40% */
  .ai_header_logo {
	width: 40%;
  } 
}