/*
Theme Name: STWT
Theme URI: https://stadtwerke-wt.net/
Author: Stadtwerke Waldshut-Tiengen
Description: Barrierearmes Block-Theme für die Stadtwerke Waldshut-Tiengen.
Version: 0.1.0
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: stwt
*/

:root {
  --stwt-radius: 0.5rem;
  --stwt-shadow: 0 0.5rem 2rem rgb(0 0 0 / 10%);
  --stwt-blue: #1685bd;
  --stwt-dark: #1d1d1d;
  --stwt-red: #c62f45;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
}

*:focus-visible {
  outline: 3px solid var(--wp--preset--color--accent);
  outline-offset: 3px;
}

.stwt-card {
  border-radius: var(--stwt-radius);
  box-shadow: var(--stwt-shadow);
  overflow: hidden;
}

.stwt-utility-bar {
  min-height: 2.75rem;
}

.stwt-utility-bar a {
  color: #fff;
  text-decoration: none;
}

.stwt-brand-bar {
  border-bottom: 1px solid #dfe5e8;
  position: relative;
  z-index: 20;
}

.stwt-logo img {
  height: 5.5rem;
  object-fit: contain;
  width: auto;
}

.stwt-main-nav {
  font-size: clamp(0.82rem, 1.15vw, 1rem);
  font-weight: 700;
}

.stwt-main-nav a {
  color: #144e70;
  text-decoration: none;
}

.stwt-main-nav a:hover,
.stwt-main-nav a:focus-visible {
  color: var(--stwt-red);
}

.stwt-portal-link {
  white-space: nowrap;
}

.stwt-hero {
  min-height: clamp(31rem, 48vw, 46rem);
}

.stwt-hero .wp-block-cover__image-background {
  object-position: center center;
}

.stwt-hero-copy {
  margin-left: auto !important;
  margin-right: 4vw !important;
  max-width: 48rem !important;
  text-align: right;
  text-shadow: 0 0.15rem 1rem rgb(0 0 0 / 45%);
}

.stwt-hero-copy h1 {
  font-style: italic;
  text-transform: uppercase;
}

.stwt-topic-grid {
  display: grid;
  gap: 0.35rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stwt-topic-card {
  min-height: 19rem;
  position: relative;
}

.stwt-topic-card--wide {
  grid-column: span 2;
}

.stwt-topic-card .wp-block-cover__inner-container {
  align-self: end;
  padding: 1.25rem;
}

.stwt-topic-card h3 {
  margin: 0;
  text-transform: uppercase;
}

.stwt-topic-card a {
  color: #fff;
  text-decoration: none;
}

@media (max-width: 900px) {
  .stwt-utility-bar {
    display: none;
  }

  .stwt-logo img {
    height: 4rem;
  }

  .stwt-topic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .stwt-hero-copy {
    margin: 0 !important;
    text-align: left;
  }

  .stwt-topic-grid {
    grid-template-columns: 1fr;
  }

  .stwt-topic-card--wide {
    grid-column: auto;
  }
}

.stwt-eyebrow {
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.stwt-breadcrumbs {
  color: #52666e;
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}

.stwt-breadcrumbs > * {
  margin-right: 0.55rem;
}

.stwt-breadcrumbs a {
  color: #52666e;
}

.stwt-page-layout {
  gap: clamp(2rem, 5vw, 5rem);
}

.stwt-section-nav {
  border-top: 0.35rem solid var(--stwt-blue);
  position: sticky;
  top: 1rem;
}

.stwt-section-nav h2 {
  color: var(--stwt-blue);
  font-size: 1.25rem;
  margin: 1rem 0;
}

.stwt-section-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.stwt-section-nav ul ul {
  border-left: 2px solid #d9e3e7;
  margin-left: 0.5rem;
  padding-left: 0.75rem;
}

.stwt-section-nav a {
  display: block;
  padding: 0.55rem 0;
  text-decoration: none;
}

.stwt-section-nav .current_page_item > a {
  color: var(--stwt-red);
  font-weight: 700;
}

.stwt-page-content > h2,
.stwt-page-content .wp-block-post-content > h2 {
  border-bottom: 2px solid #d9e3e7;
  color: var(--stwt-blue);
  padding-bottom: 0.5rem;
}

.stwt-page-content table {
  border-collapse: collapse;
  display: block;
  max-width: 100%;
  overflow-x: auto;
  width: 100%;
}

.stwt-page-content th,
.stwt-page-content td {
  border: 1px solid #c8d4d9;
  padding: 0.65rem;
  text-align: left;
}

.stwt-contact-box {
  background: var(--wp--preset--color--surface);
  border-left: 0.4rem solid var(--stwt-blue);
  margin-top: 4rem;
  padding: clamp(1.5rem, 4vw, 3rem);
}

.stwt-contact-box h2 {
  margin-top: 0;
}

.stwt-contact-phone {
  font-size: 1.35rem;
  font-weight: 700;
}

.stwt-process-card {
  align-items: center;
  background: #e8f4f8;
  border-top: 0.35rem solid var(--stwt-blue);
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  margin-bottom: 2.5rem;
  padding: clamp(1.25rem, 3vw, 2rem);
}

.stwt-process-card h2,
.stwt-process-card p {
  margin-bottom: 0.5rem;
  margin-top: 0;
}

.stwt-process-card .wp-element-button {
  display: inline-block;
  text-decoration: none;
  white-space: nowrap;
}

@media (max-width: 781px) {
  .stwt-page-sidebar {
    order: 2;
  }

  .stwt-section-nav {
    position: static;
  }

  .stwt-process-card {
    align-items: flex-start;
    flex-direction: column;
  }
}