/* ==================== Forms ================================================================== */
/* common form elements that are used on many pages, */
/* and less common elements that share properties with the more common */
/* eg search, feedback */
/* todo: remove button class (is presentational, replace with a.cta, label.dcl-trigger and hb-box.link) */
.dcl-trigger, .cta, button, input, optgroup, select, textarea {
  font: inherit; /* Correct font properties not being inherited. -- normalize.css */
  margin: 0; /* Address margins set differently in Firefox 4+, Safari, and Chrome. -- normalize.css */
  padding-inline: var(--widget-pad-in);
  padding-block: var(--widget-pad-bl); /* make text and button inputs equal height */
}

.dcl-trigger, .cta, button, input, select, textarea {
  /* universal form element border */
  /* BUG: input[type=range] receives border in IE, Firefox */
  /* prevent overriding custom checkboxes/radios (eg no-js menus) by checking for class (is this enough?) */
  /* allow more logical sizing of form elements (because of all the borders and margins) */
  box-sizing: border-box;
  border: var(--border);
  /* setting border disables system layout styling, but there is too many sizing oddities with system layout */
  border-radius: var(--radius-std);
  color: inherit; /* BUG: this breaks grayout of disabled controls. need to add [disabled] styles */
  background: var(--component-background-color);
  vertical-align: bottom; /* seems to correct offset of select and button side by side */ /* BUG: what about vertical scripts? */
}

button, label, select, textarea {
  cursor: pointer;
}

input:is([type=text], [type=search]) {
  width: 0; /* overrule default input width */
}

select {
  /* can't set height of select through line-height (unless setting appearance=none), so have to set directly instead */
  box-sizing: content-box; /* mimic line-height, which doesn't include padding either */
  height: 1.5em; /* = line-height */
}

label {
  padding-block: var(--widget-pad-bl); /* make text and button inputs equal height */
}

fieldset {
  border: none;
  padding: 0;
  margin: 0;
  position: relative; /* required for positioning legend */
}

fieldset {
  margin-block-start: 16px;
}

legend {
  padding: 0;
}

/* ==================== Buttons ============================================ */
/* All buttons and links that are designed to look like buttons/surfaces */
.dcl-trigger, .cta, button, aside.ctrls a, [type=submit] {
  display: inline-block; /* for anchor and label */
  color: var(--button-color);
  background: var(--button-background);
  padding-block: var(--widget-pad-bl);
  padding-inline: var(--widget-pad-in);
  text-align: center;
  /* 	text-wrap: nowrap; */ /* why? can cause trouble on narrow displays */
}

[type=submit], a.cta.main, aside.ctrls a {
  background: var(--button-color);
  color: var(--button-main-text);
  border-color: var(--button-color);
  outline-color: var(--button-color);
  text-decoration: none;
}

hb-box.link { /* is it better with a.cover::after ? (still requires position:relative on the hb-box) */
  color: unset;
  background: var(--component-background-color);
  box-shadow: 0px 0px 15px 0px hsla(0, 0%, 0%, 0.15);
  text-align: unset;
  padding: 32px 40px;
  position: relative; /* to make anchor cover box */
  border-radius: var(--box-radius);
  display: flex; /* to allow optional button inline on wide boxes */
  flex-wrap: wrap;
  align-content: flex-start; /* align content to top */
  align-self: stretch; /* so that all borders have same size, but boxes without border are vertically centered */
}

hb-box.link article {
  flex: 1 1 195px;
}

hb-box.link a {
  color: inherit;
  font-size: 1.75rem;
  text-decoration: none;
  display: block; /* for nicer focus rectangle */
}

/*hb-line.comfort > hb-box.link a {
	font-weight: unset;
}*/
hb-box.link a::before, hb-box.link a::after {
  content: "";
  position: absolute;
  inset: 0;
}

hb-box.link a::after {
  z-index: -1; /* background layer, put behind box */
}

hb-line:not(.has-2-children) hb-box.link > a:first-child {
  display: block;
  padding-inline-end: 32px;
}

hb-line:not(.has-2-children) hb-box.link > a:first-child .lar {
  /* this is a terrible selector; need to get more info on conditions for this placement */
  position: absolute;
  inset-inline: 16px auto; /* right/top = hb-box.link[padding] */
  inset-block: 16px auto;
}

/*hb-box .pre-lar::before {
	/* float around later positioned arrow * /
	content: "";
	float: inline-end;
	aspect-ratio: 1;
	width: var(--icon-size);
}*/
/*hb-line.comfort > hb-box .pre-lar::before {
	display: none; /* remove dummy float * /
}*/
hb-box .lar { /* can we reduce specificity? */
  color: var(--component-color);
  position: absolute; /* place link arrow in upper-right corner */
  transition: 0.1s ease-in-out;
  inset-block: 20px auto;
  inset-inline: auto 20px;
}

@media (prefers-reduced-motion: no-preference) {
  hb-box:hover .lar {
    transform: translateX(10px);
  }
}
/*hb-line.comfort > hb-box .lar {
	position: unset; /* reset arrow position for comfortable boxes * /
}*/
hb-box.link p {
  margin-block-start: 1.5em auto;
}

main section aside.ctrls {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: baseline;
  margin-inline-start: auto;
}

main section button[aria-expanded=true] {
  background-color: var(--button-color);
  outline-color: var(--button-color);
  border-color: var(--button-color);
  color: var(--component-background-color);
  forced-color-adjust: none;
  /* = button[submit] */
}

main section header {
  display: flex;
  flex-wrap: wrap;
}

/* ==================== Tablist ============================================ */
/* different css-only solutions:
	<tabgroup><radio><label><div><radio><label><div></tabgroup>
	use flexbox order=-1 to place labels first, however this jumbles tab-order
	<tablist><label><label></tablist><radio><tabpanel><radio><tabpanel>
	this way the tabs can not be styled to show (in)active without js
	<radio><radio><tablist><label><label></tablist><tabpanel><tabpanel>
	this requires css rules for each tab, to associate nth tab with nth radio
*/
/*.tabgroup {
	display: flex;
	flex-wrap: wrap;
}
.tabgroup [role='tab'] {
	order: -1;
}
.tabgroup [role='tabpanel'] {
	width: 100%;
}*/

/*# sourceMappingURL=6-buttons.css.map */