/* =========================================================================
 * Diaz Immobilien — base layer
 * =========================================================================
 * The minimal CSS we need now that PicoCSS is gone. This file replaces
 * the rules we actually relied on (typography reset, container, <dialog>,
 * Form plugin layout). Everything else (buttons, cards, nav, hero, …)
 * lives in theme.css and was never Pico in the first place.
 * ========================================================================= */

/* ----- Bare-element reset ----- */
html {
  /* Defensive: never let a wide child push horizontal scroll onto the
     page. `clip` is the modern equivalent of `hidden` for overflow-x
     that doesn't establish a new scroll container (so it can't trap
     `position: sticky` like `hidden` can). */
  overflow-x: clip;
}
body {
  width: 100%;
  margin: 0;
  font-family: var(--diaz-font-family-sans-serif);
  overflow-x: clip;
}
img {
  max-width: 100%;
  height: auto;
  border-style: none;
}
figure {
  display: block;
  margin: 0;
  padding: 0;
}

/* ----- Container -----
   The container is a width constraint, not a gutter provider. The
   container is `width: 100%` of its parent, so adding padding-inline
   here would make the box's outer width exceed the parent (content-box
   sizing) and create horizontal overflow on small viewports. If a
   section needs a horizontal gutter, add `padding-inline` to that
   section's wrapper element, not to the container. */
.container {
  max-width: 1240px;
  width: 100%;
  margin-inline: auto;
}

/* ----- <dialog> (lightbox) -----
   The Web Platform <dialog> element does most of the work natively
   (top-layer, modal mode, focus trap, ::backdrop pseudo). We just need
   to give it a sensible default look and center the contents. */
dialog {
  display: none;
  position: fixed;
  inset: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--diaz-color);
  width: inherit;
  min-width: 100%;
  height: inherit;
  min-height: 100%;
}
dialog[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}
dialog::backdrop {
  background: rgba(0, 0, 0, 0.85);
}

/* ----- Form plugin layout (used by /kontakt) -----
   The Grav Form plugin emits .form-data / .form-input-wrapper / .form-label
   / .form-extra-wrapper / .buttons wrappers in its default templates.
   Provide a baseline so fields stack with sensible spacing; the actual
   input/select/textarea styling is in theme.css. */
form small { color: var(--diaz-muted-color); }
.form-data {
  margin-bottom: 1rem;
}
.form-input-wrapper {
  display: block;
  margin-bottom: 1rem;
}
.form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  font-size: 0.9375rem;
}
.form-extra-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}
/* .form-errors / .form-error (singular) styling lives in theme.css so it
   can use the brand --diaz-del-color token. */
.form-error {
  display: block;
  margin-top: 0.25rem;
}