/**
 * drkkita Flex Sections Edition additions.
 *
 * This file deliberately overrides only structural and configurable behavior
 * introduced in version 2.0. Existing heading sizes and the visual language of
 * the Logo Edition remain untouched.
 */

/* --------------------------------------------------------------------------
   Typography and overflow isolation
   -------------------------------------------------------------------------- */
body.drkkita-standalone-page {
  overflow-x: clip;
}

.drkkita-lp {
  min-width: 0;
  overflow: visible;
  font-family: var(--sat-body-font, Arial, Helvetica, sans-serif);
  font-size: var(--sat-body-size, 16px);
}

.drkkita-lp button,
.drkkita-lp input,
.drkkita-lp textarea,
.drkkita-lp select {
  font-family: var(--sat-body-font, Arial, Helvetica, sans-serif);
}

.drkkita-lp h1,
.drkkita-lp h2,
.drkkita-lp h3,
.drkkita-lp h4,
.drkkita-lp h5,
.drkkita-lp h6,
.drkkita-footer h2 {
  font-family: var(--sat-heading-font, "Quicksand", Arial, sans-serif);
}

/* Uniform reading size across the actual content copy. Labels, navigation,
   prices and buttons intentionally retain their compact display sizes. */
.drkkita-lead,
.drkkita-lead p,
.drkkita-section-heading p,
.drkkita-section-heading > div,
.drkkita-section-heading > div p,
.drkkita-benefit p,
.drkkita-feature-card__description,
.drkkita-feature-card__details li,
.drkkita-security__intro p,
.drkkita-security-card p,
.drkkita-audience-card p,
.drkkita-step p,
.drkkita-pricing__note p,
.drkkita-implementation__content > div,
.drkkita-implementation__content > div p,
.drkkita-final-cta p,
.drkkita-content-page__content,
.drkkita-content-page__content p,
.drkkita-content-page__content li {
  font-size: var(--sat-body-size, 16px) !important;
  line-height: 1.68;
}

/* --------------------------------------------------------------------------
   Mobile navigation: solid drawer, own backdrop and reliable stacking
   -------------------------------------------------------------------------- */
.drkkita-header {
  z-index: 100000;
}

.drkkita-navigation__mobile-cta,
.drkkita-menu-backdrop {
  display: none;
}

.drkkita-menu-backdrop {
  position: fixed;
  z-index: 99998;
  inset: var(--sat-menu-top, 72px) 0 0;
  border: 0;
  background: rgba(2, 27, 53, 0.58);
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(4px);
  transition: opacity 0.22s ease;
}

@media (max-width: 980px) {
  .drkkita-header,
  .drkkita-header.is-scrolled {
    border-bottom-color: var(--sat-border);
    background: #fff;
    box-shadow: 0 10px 34px rgba(4, 36, 73, 0.11);
    backdrop-filter: none;
  }

  .drkkita-header__inner {
    position: relative;
    z-index: 100003;
  }

  .drkkita-nav-toggle {
    position: relative;
    z-index: 100004;
  }

  .drkkita-navigation {
    position: fixed;
    z-index: 100002;
    top: var(--sat-menu-top, 72px) !important;
    right: 0;
    bottom: auto;
    left: 0;
    display: flex;
    max-height: calc(100dvh - var(--sat-menu-top, 72px));
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    margin: 0;
    padding: 14px max(24px, calc((100vw - var(--sat-container)) / 2 + 24px)) 26px;
    border-top: 1px solid var(--sat-border);
    border-bottom: 1px solid var(--sat-border);
    background: #fff;
    box-shadow: 0 24px 52px rgba(2, 27, 53, 0.2);
    opacity: 0;
    overflow-y: auto;
    pointer-events: none;
    transform: translateY(-16px);
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  }

  .drkkita-navigation.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: none;
    visibility: visible;
    transition-delay: 0s;
  }

  .drkkita-navigation a:not(.drkkita-button) {
    display: block;
    padding: 15px 2px;
    border-bottom: 1px solid var(--sat-border);
    color: var(--sat-text);
    font-size: 1rem;
    font-weight: 700;
  }

  .drkkita-navigation a::after {
    display: none;
  }

  .drkkita-navigation__mobile-cta {
    display: inline-flex;
    width: 100%;
    margin-top: 18px;
  }

  .drkkita-menu-backdrop {
    display: block;
  }

  html.drkkita-menu-open .drkkita-menu-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  html.drkkita-menu-open,
  html.drkkita-menu-open body {
    overflow: hidden;
    overscroll-behavior: contain;
  }
}

@media (max-width: 782px) {
  .admin-bar .drkkita-header {
    top: 46px;
  }
}

/* --------------------------------------------------------------------------
   Hero media modes
   -------------------------------------------------------------------------- */
.drkkita-hero__visual--complete {
  display: block;
  min-height: 520px;
  overflow: hidden;
  border-radius: clamp(30px, 4vw, 54px);
  box-shadow: 0 28px 62px rgba(4, 36, 73, 0.16);
}

.drkkita-hero__visual--complete .drkkita-hero__phone {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: inherit;
  object-fit: cover;
  object-position: center;
  filter: none;
  transform: none;
}

@media (max-width: 980px) {
  .drkkita-hero__visual--complete {
    width: min(760px, 100%);
    min-height: 440px;
    margin: 0 auto;
  }

  .drkkita-hero__visual--complete .drkkita-hero__phone {
    max-height: none;
  }
}

@media (max-width: 600px) {
  .drkkita-hero__visual--complete {
    min-height: 330px;
  }

  .drkkita-hero__visual--complete .drkkita-hero__phone {
    max-height: none;
  }
}

/* --------------------------------------------------------------------------
   Security section: introduction above four full-width cards
   -------------------------------------------------------------------------- */
.drkkita-security__grid {
  display: block;
}

.drkkita-security__intro {
  max-width: 820px;
  margin: 0 auto clamp(34px, 5vw, 54px);
  text-align: center;
}

.drkkita-security__intro .drkkita-kicker {
  justify-content: center;
}

.drkkita-security__cards {
  display: grid;
  align-items: stretch;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.drkkita-security-card {
  min-width: 0;
  min-height: 100%;
}

@media (max-width: 980px) {
  .drkkita-security__intro {
    max-width: 760px;
  }

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

@media (max-width: 600px) {
  .drkkita-security__cards {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Flexible Divi insertion points
   -------------------------------------------------------------------------- */
.drkkita-divi-slot {
  position: relative;
  z-index: 1;
  width: 100%;
  background: #fff;
}

.drkkita-divi-slot:empty {
  display: none;
}

.drkkita-divi-slot__content {
  width: 100%;
}

.drkkita-divi-slot .et_pb_section,
.drkkita-divi-slot .et-l .et_pb_section,
.drkkita-divi-slot .wp-block-divi-global-layout {
  margin-top: 0;
  margin-bottom: 0;
}

/* Utility class for own Divi sections. The same image is copied into the media
   library on installation, but this class remains stable across domains. */
.drkkita-gradient-background,
.drkkita-lp .drkkita-gradient-background {
  background-image: url("../img/drkkita-section-gradient.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
}

/* --------------------------------------------------------------------------
   Supporting pages (Impressum and Datenschutz)
   -------------------------------------------------------------------------- */
.drkkita-content-page__main {
  min-height: 68vh;
  padding-top: 80px;
  background: #fff;
}

.drkkita-content-page__hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(82px, 9vw, 132px) 0 clamp(58px, 7vw, 96px);
  background:
    radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--sat-accent), transparent 72%), transparent 31%),
    radial-gradient(circle at 9% 42%, color-mix(in srgb, var(--sat-primary), transparent 91%), transparent 33%),
    linear-gradient(120deg, #fff 10%, var(--sat-surface) 100%);
}

.drkkita-content-page__hero::after {
  position: absolute;
  z-index: -1;
  right: -110px;
  bottom: -190px;
  width: 430px;
  height: 430px;
  border: 1px solid color-mix(in srgb, var(--sat-accent), transparent 65%);
  border-radius: 50%;
  box-shadow: 0 0 0 72px color-mix(in srgb, var(--sat-accent), transparent 94%);
  content: "";
}

.drkkita-content-page__hero h1 {
  margin-bottom: 0;
  font-size: clamp(2.5rem, 5vw, 4.8rem);
}

.drkkita-content-page__intro {
  max-width: 760px;
  margin-top: 22px;
  color: var(--sat-muted);
  font-size: clamp(1rem, 1.5vw, 1.16rem);
  line-height: 1.72;
}

.drkkita-content-page__intro p {
  margin-bottom: 0;
}

.drkkita-content-page__content {
  min-height: 340px;
  padding: clamp(64px, 7vw, 108px) 0;
  color: var(--sat-text);
}

/* MeinKiGa uses a centered 840px reading column on legal pages. */
.drkkita-content-template .drkkita-content-page__content {
  box-sizing: border-box;
  width: min(calc(100% - 40px), 840px);
  margin-right: auto;
  margin-left: auto;
  padding: clamp(72px, 9.1vw, 115px) 0;
}

.drkkita-content-template .drkkita-content-page__content > :where(p, h2, h3, h4, h5, h6, ul, ol, blockquote, table, figure, form, .wp-block-group:not(.alignfull):not(.alignwide)) {
  width: 100%;
}

/* Imported legal content can still carry column rules from SiteOrigin, the
   block editor or Divi. On legal pages those rows deliberately follow the
   same single reading column as the surrounding text. */
.drkkita-content-template .drkkita-content-page__content :where(.panel-grid, .wp-block-columns, .et_pb_row) {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.drkkita-content-template .drkkita-content-page__content :where(.panel-grid-cell, .wp-block-column, .et_pb_column) {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.drkkita-content-template .drkkita-content-page__content :where(.panel-grid-cell, .wp-block-column, .et_pb_column) + :where(.panel-grid-cell, .wp-block-column, .et_pb_column) {
  margin-top: clamp(42px, 6vw, 70px) !important;
}

/* Plain WordPress editor content gets a readable column. Divi sections retain
   their own full-width structure. */
.drkkita-content-page__content > :where(p, h2, h3, h4, h5, h6, ul, ol, blockquote, table, figure, form, .wp-block-group:not(.alignfull):not(.alignwide)) {
  width: min(calc(100% - 48px), 920px);
  margin-right: auto;
  margin-left: auto;
}

.drkkita-content-page__content > h2,
.drkkita-content-page__content > h3,
.drkkita-content-page__content > h4 {
  margin-top: 1.5em;
}

.drkkita-content-page__content > :first-child {
  margin-top: 0;
}

.drkkita-content-page__content > :last-child {
  margin-bottom: 0;
}

.drkkita-content-page__content > .et-l,
.drkkita-content-page__content > .et_pb_section,
.drkkita-content-page__content > .wp-block-divi-global-layout,
.drkkita-content-page__content > .alignfull {
  width: 100%;
  max-width: none;
  margin-right: 0;
  margin-left: 0;
}

.drkkita-content-page__content:empty::before {
  display: block;
  width: min(calc(100% - 48px), 920px);
  margin: 0 auto;
  padding: 34px;
  border: 1px dashed var(--sat-border-strong);
  border-radius: var(--sat-radius);
  background: var(--sat-surface);
  color: var(--sat-muted);
  content: "Diese Seite ist vorbereitet und kann mit Divi oder dem WordPress-Editor befüllt werden.";
  text-align: center;
}

.drkkita-not-found {
  position: relative;
  display: grid;
  min-height: min(720px, 82vh);
  padding: clamp(120px, 15vw, 180px) 0 clamp(84px, 12vw, 140px);
  overflow: hidden;
  background:
    radial-gradient(circle at 85% 18%, color-mix(in srgb, var(--sat-accent), transparent 82%), transparent 23%),
    linear-gradient(145deg, var(--sat-surface), #fff 70%);
  place-items: center;
}

.drkkita-not-found__content {
  position: relative;
  z-index: 1;
  max-width: 860px;
  text-align: center;
}

.drkkita-not-found__code {
  margin: 0 0 -20px;
  color: color-mix(in srgb, var(--sat-primary), transparent 94%);
  font-family: var(--sat-heading-font, "Quicksand", Arial, sans-serif);
  font-size: clamp(8rem, 22vw, 16rem);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 0.9;
  user-select: none;
}

.drkkita-not-found h1 {
  max-width: 760px;
  margin: 14px auto 22px;
  color: var(--sat-text);
  font-size: clamp(2.3rem, 5vw, 4.8rem);
  line-height: 1.06;
}

.drkkita-not-found__content > p:not(.drkkita-not-found__code) {
  max-width: 660px;
  margin: 0 auto;
  color: var(--sat-muted);
  font-size: var(--sat-body-size, 16px);
  line-height: 1.75;
}

.drkkita-not-found__actions {
  justify-content: center;
  margin-top: 34px;
}

.drkkita-not-found__orbit {
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--sat-accent), transparent 68%);
  border-radius: 50%;
  pointer-events: none;
}

.drkkita-not-found__orbit--one {
  top: -190px;
  right: -140px;
  width: 540px;
  height: 540px;
  box-shadow: 0 0 0 58px color-mix(in srgb, var(--sat-accent), transparent 94%);
}

.drkkita-not-found__orbit--two {
  bottom: -250px;
  left: -210px;
  width: 550px;
  height: 550px;
  border-color: color-mix(in srgb, var(--sat-primary), transparent 84%);
}

@media (max-width: 980px) {
  .drkkita-content-page__main {
    padding-top: 72px;
  }
}

@media (max-width: 782px) {
  body.admin-bar .drkkita-content-page__main {
    padding-top: 72px;
  }
}

@media (max-width: 600px) {
  .drkkita-content-page__content > :where(p, h2, h3, h4, h5, h6, ul, ol, blockquote, table, figure, form, .wp-block-group:not(.alignfull):not(.alignwide)) {
    width: min(calc(100% - 32px), 920px);
  }

  .drkkita-content-template .drkkita-content-page__content > :where(p, h2, h3, h4, h5, h6, ul, ol, blockquote, table, figure, form, .wp-block-group:not(.alignfull):not(.alignwide)) {
    width: min(100%, 920px);
  }
}