/* Sub-site bindings of roles to specific components */
@layer theme {
  /* Site nav colours via roles (structure in shared components) */
  :where(#site-nav, #site22) {
    background: var(--site-nav-bg);
    color: var(--site-nav-ink);
    border-bottom: var(--site-nav-rule);
  }
  
  /* page-nav*/
	
nav.page > ul > li:first-child > a {
	height: calc(.8 * var(--page-nav-height))
}

  /* Buttons (shared structure) */
  .button, .btn, button, input[type="submit"] {
    --btn-bg:  var(--link);
    --btn-ink: var(--color-on-accent);
    --btn-bg-hover: color-mix(in oklab, var(--btn-bg), black 8%);

    background: var(--btn-bg);
    color: var(--btn-ink);
  }
  .button:hover, .btn:hover, button:hover, input[type="submit"]:hover {
    background: var(--btn-bg-hover);
  }

  label[for="collapsed"], #show-sitenav {
    display: none
  }  
  
  .media-object {
  	background-color: var(--color-accent);
  	color: var(--palette-on-accent);
  }
  
  
    .media-object + .media-object {
  	background-color: var(--color-accent-2);
  	color: var(--palette-on-accent);
  }
  
  .media-object .button, .media-object .btn {
/* 
	--btn-bg:  var(--color-accent-2);
    --btn-bg-hover: color-mix(in oklab, var(--btn-bg), black 20%);

    background: var(--btn-bg);
 */
    text-decoration: none;
  }
  
  .media-object a {
  	color: inherit;
  	text-decoration: underline;
  
  }
  
  .quote.media-object {
  	padding-inline: 2%;
  }
  
  .quote img {
  	width: 20%
  }
  
  .quote .details {
	  width: 70%;
  	font-size: var(--font-size-large);
  	font-weight: var(--weight-medium); 
  }
  
  
  
}