/* https://dfkaye.com/demos/accessible-css-driven-tabs-demo/ */


/* Container holding all contents. */
[role="tablist"] {
  /* 1 Sept 2020: ADDED flex to remove media query */
  display: flex;
  flex-wrap: wrap;    
}

[role="tablist"] h3 {
	font-family: Coco;
	margin-bottom: 1em;
	display:none;
}

[name="tabs"] {
  /* Do not hide the radio elements, make them invisible. */
  opacity: 0;
  position: absolute !important;
}

/* The main tab headings */
[role="tab"] {
  /*background: white;*/

  /* base border style here; set color in :checked, style in :focus */
  border-color: transparent;
  border-style: solid;
  border-width: 1px 1px 0;

  /*box-shadow: inset 0 -0.5em 0.5em rgba(0, 0, 0, 0.02);*/
  color: #333;
  cursor: pointer;
  display: inline-block;
  font-family: Coco;
  font-size: 0.9em !important;
  text-transform: uppercase;

  /* hides the bottom border */
  margin-bottom: -1px;

  /* 1 Sept 2020: removed to let flex apply gaps. */
  /* margin-right: 5px; */

  padding: 10px 0;
  padding-left: unset !important; /* overwrite WP default css */
  text-align: center;
  transition: all 0.2s ease;

  /* 1 Sept 2020: ADDED flex attributes to remove media query */
  /* flex-basis: 5em; */
  flex-shrink: 1;
  flex-grow: 1;
}

/* Style the currently selected tab label */
[name="tabs"]:checked + [role="tab"] {
  /* ADDED */
  /*border-bottom: 3px solid fuchsia;*/
  
  color: #333;
  
  background:fuchsia;
  color:#fff;

  /* 1 Sept 2020: ADDED here with flexbox solution, removing the media query. */
  margin-bottom: 0;
}


/*
  ADDED: give tab a focus style.
  This selector has the same specificity as the :checked selector, so it
  should appear later in the source order to insure it takes effect.
  */
[name="tabs"]:focus + [role="tab"],
[name="tabs"]:hover + [role="tab"] {
  /*text-decoration: underline;*/
  
}

[name="tabs"]:hover:not(:checked) + [role="tab"] {
  color:fuchsia;
}

[name="tabs"]:focus + [role="tab"] {
  border-color: fuchsia;
  border-style: dotted;
}

/* The inner tab content */
[role="tabpanel"] {
  background: transparent;

  /* pulled up from the :checked state sibling ruleset below */
  /*border: 1px solid #eee;

  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.02); */

  /* ADDED: Hide panels by default */
  display: none;

  padding: 2em 0;
  transition: all 0.2s ease;

  /* 1 Sept 2020: ADDED flex attr to stretch panel 100% width. */
  flex-basis: 100%;
}

/*
  Verbose state-machine-like part:
  - z-index, position, and overflow no longer needed,
  - allows document content to flow in source order.
*/

/* Show the currently selected tab content */
[name="tabs"]:nth-of-type(1):checked ~ [role="tabpanel"]:nth-of-type(1),
[name="tabs"]:nth-of-type(2):checked ~ [role="tabpanel"]:nth-of-type(2),
[name="tabs"]:nth-of-type(3):checked ~ [role="tabpanel"]:nth-of-type(3),
[name="tabs"]:nth-of-type(4):checked ~ [role="tabpanel"]:nth-of-type(4) {
  /* ADDED: show selected tabpanel */
  display: block;
}




@media (max-width: 600px) {
	
	[role="tab"] {
	flex-basis: 100%;
	}	
}