@layer reset, base, layout, blocks, components, utilities;

:root {
  --velomobility-green: rgb(29, 48, 38);
}

@layer layout {
  .site-header {
    display: flex; /* redundant but safe */
    align-items: center; /* vertical alignment */
    justify-content: space-between; /* site-title left, nav right */
    padding: 1rem 2rem;
  }

  .site-header .wp-block-site-title {
    margin: 0; /* remove default title margin */
  }

  .site-header .wp-block-navigation {
    margin-block-start: 0 !important; /* override block editor styles */
  }

  .rounded-box-icon {
    background-color: rgba(35, 92, 69, 0.1);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    color: var(--velomobility-green);
  }

  .card {
    overflow: hidden;
  }
}

@layer base {
  body {
    font-family: var(--wp--preset--font-family--base);
    line-height: 1.6;
    color: var(--wp--preset--color--text);
    background-color: var(--wp--preset--color--background);
  }
  footer {
    margin-block-start: 0 !important;
  }

  a {
    color: var(--wp--preset--color--primary);
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }

  h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    line-height: 1.2;
    font-weight: 700;
  }
}