/* hamburger menu button */
.nav-toggle { display: none; } /* shown only on mobile */
.nav-toggle:focus-visible { outline: 2px solid; outline-offset: 2px; }

/* dropdown navigation menu */
.dropdown,
.scrim { display: none; }

/* responsive adjustments */

@media (max-width: 880px) {

  body {
    min-width: 100%;
  }

  header {
    grid-template-columns: auto 640px auto;
  }

  .logo-header {
	  grid-template-columns: 165px 100px 165px;
  }

  .header-text {
    font-size: 1em;
  }

  nav {
    display: none;
  }

  h2 {
    font-size: 1.2em;
  }

  /* hamburger (right-aligned) */
  .nav-toggle {
    display: inline-flex;
    justify-self: center;
    align-items: center;

    appearance: none;
    border: none;
    background: transparent; 

    padding-left: 8px;
    padding-bottom: 4px;
    gap: 0.5rem;

    cursor: pointer;
    position: absolute; 
    left: 0; bottom: 0;
  }

  /* show dropdown + scrim on mobile */
  .dropdown,
  .scrim { display: block; }
  
  /* right-aligned drop-down overlay (over content) */
  .dropdown {
    position: fixed;
    left: 0;
    flex: 0;
    width: auto;
    
    background-color: #D7D7F4;
    color: #004646;
   	font-family: Maiandra;
    font-weight: bold;

    box-shadow: 0 8px 24px rgba(0,0,0,0.24);
    
    transform-origin: top right;
    transform: scale(0.98) translateY(-6px);
    
    opacity: 0;
    transition: opacity 160ms ease, transform 160ms ease;
    z-index: 1200;
    pointer-events: none;
  }
  .dropdown[data-open="true"] {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
  }

  .dropdown-button {
    background: none;
    border: none;
    color: #004646;
    cursor: pointer;
    font: inherit;
    font-size: 1em;
    padding-top: 5px;
    padding-bottom: 5px;
  }
 
  /* dim page when open */
  .scrim {
    position: fixed; 
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 1100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease;
  }
  .scrim[data-show="true"] { opacity: 1; pointer-events: auto; }
}

@media (max-width: 640px) {

  header {
    grid-template-columns: auto 440px auto;
  }

  .logo-header {
	  grid-template-columns: 124px 100px 124px;
  }

  .header-text {
    font-size: 0.9em;
  }

  section {
    font-size: 0.9em;
  }

  .bold-text {
	  font-size: 1em;
  }

  .bold-text-plus {
	  font-size: 1.1em;
  }

 .section-img-wide {
    width: 420px;
  }

  .text-block-tripple {
    width: 460px;
  }
}

@media (max-width: 480px) {

  header {
    grid-template-columns: auto 360px auto;
  }

  .logo-header {
	  grid-template-columns: 100px 100px 100px;
  }

  .header-text {
    font-size: 0.7em;
  }

  .section-img-wide {
    width: 240px;
  }

  .text-block-l {
    margin: 0 0 20px 36px;
  }

  .text-block-r {
    margin: 0 0 20px 36px;
  }

  .text-block-grid {
    grid-template-columns: auto;
    grid-template-rows: auto auto;

    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .text-block-left {
    margin: 0;
    margin-bottom: 5px;
    justify-self: center;
  }

  .text-block-right {
    margin: 0;
    margin-top: 5px;
    justify-self: center;
  }

  .text-block-middle {
    margin: 5px 0 5px 0;
    justify-self: center;
  }

  .image-block-left {
    margin: 0;
    margin-bottom: 5px;
    justify-self: center;
  }

  .image-block-right {
    margin: 0;
    margin-top: 5px;
    justify-self: center;
  }

  .text-block-tripple {
    display: grid;
    grid-template-rows: auto auto auto;
    width: 360px;
  }

  .text-block-qual {
     grid-template-columns: auto;
     grid-template-rows: auto auto;
  }

  .text-block-2columns {
    column-count: 1;
  }

}