/*
Theme Name: Twenty Twenty-Five Child – Dr. Auer-Nußbaumer
Template: twentytwentyfive
Description: Child theme of Twenty Twenty-Five for auer-nussbaumer.at. Carries the practice's brand CSS (fonts, colors, form styles) in version-controlled files instead of the database "Additional CSS" option.
Author: Tobias Zachl
Version: 1.0.48
*/

/* Self-hosted fonts (latin subset) — no Google Fonts request at runtime. */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/lato-400.woff2") format("woff2");
}

@font-face {
  font-family: "Lato";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/lato-400-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/lato-700.woff2") format("woff2");
}

@font-face {
  font-family: "Rubik One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/rubik-one-400.woff2") format("woff2");
}

html { scroll-behavior: smooth; }

body, p, li, .wp-block-paragraph, .wp-block-list {
  font-family: "Lato", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
}

body {
  color: #2f3a3f;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.6;
  letter-spacing: normal;
}

/* Unify body-text sizing: collapse the page's scattered 0.8/0.875/0.9/0.95/1.2rem
   variants down to the single documented "body" size, except the two sizes the
   design system names on purpose (title 1.05rem, submit 1.1rem). */
.has-white-background-color.has-background .wp-block-group > p,
#top .wp-block-cover__inner-container > p.has-white-color {
  font-size: 1.2rem !important;
}

/* Nav links ("Über mich" / "Dauermedikamente" / "Kontakt") in caps + bold. */
.has-white-background-color.has-background .wp-block-group > p {
  text-transform: uppercase;
  font-weight: 700;
}

/* Nav links + phone number: no underline (WP core only removes it on
   :hover, leaving the default state underlined). */
.has-white-background-color.has-background a {
  text-decoration: none;
}

/* Mobile hamburger menu — button is injected by js/nav-toggle.js, hidden by
   default (desktop shows the nav links inline, no JS needed there). */
.drs-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
}

.drs-nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: #2f3a3f;
  border-radius: 1px;
  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}

.drs-nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.drs-nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.drs-nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 700px) {
  .drs-nav-toggle {
    display: flex;
  }

  .has-white-background-color.has-background > .wp-block-group {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    order: 10;
    padding-top: 12px;
  }

  .has-white-background-color.has-background > .wp-block-group p,
  .has-white-background-color.has-background > .wp-block-group p a {
    text-align: left;
  }

  .has-white-background-color.has-background > .wp-block-group.is-open {
    display: flex;
  }

  /* Phone number joins the dropdown as its last item, instead of always
     sitting in the closed header bar. Browsers without :has() support just
     keep showing it inline (graceful, non-broken fallback). */
  .has-white-background-color.has-background:not(:has(> .wp-block-group.is-open)) > p {
    display: none;
  }

  .has-white-background-color.has-background:has(> .wp-block-group.is-open) > p {
    order: 11;
    flex-basis: 100%;
    text-align: left;
  }
}

/* Unify content width across blocks at 70vw, capped at 900px on wide desktop
   screens so prose doesn't run past a comfortable reading measure; 90vw on
   mobile so the cap doesn't pinch narrow viewports. */
.wp-block-cover__inner-container.is-layout-flow.wp-block-cover-is-layout-flow {
  width: min(70vw, 900px);
  margin-inline: auto;
}

#medikamente > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  width: min(70vw, 900px) !important;
  max-width: none !important;
}

/* Align list bullets flush with surrounding text and form. */
#medikamente .wp-block-list {
  list-style-position: inside;
  padding-left: 0;
}

@media (max-width: 700px) {
  .wp-block-cover__inner-container.is-layout-flow.wp-block-cover-is-layout-flow {
    width: 90vw;
  }

  #medikamente > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    width: 90vw !important;
  }

  .drs-formular-wrapper,
  .drs-urlaub-notice {
    width: 90vw;
  }
}

h1, h2, h3, .wp-block-heading {
  font-family: "Rubik One", "Lato", sans-serif;
  font-weight: 400;
  text-wrap: balance;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid #59798a;
  outline-offset: 3px;
  border-radius: 4px;
}

.wp-block-cover a:focus-visible,
.site-footer a:focus-visible {
  outline-color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; }
}

/* ---- Rezeptformular ("Dauermedikamente bestellen") ----
   The plugin's own assets/style.css sets max-width:680px and
   font-family:"Open Sans" directly on .drs-formular-wrapper. Both must be
   re-declared here (not just width/color) — max-width otherwise clamps the
   wider `width` below, and font-family is inherited by every child that
   doesn't set its own (section title, labels, checkbox text, messages),
   so leaving it unset here means those stay in the plugin's default font
   regardless of stylesheet load order. */
/* No element on the page actually carries id="medikamente" (the block's
   HTML anchor is missing/lost — the "Dauermedikamente bestellen" button's
   href="#medikamente" currently jumps nowhere), so the shortcode's two
   possible root elements below sit bare in the content flow with no
   wrapper to hang a section margin on. 30px above/below is therefore
   applied directly to them: .drs-urlaub-notice gets 30px top (for when
   it's the first thing rendered) and .drs-formular-wrapper gets 30px
   bottom (it's always the last thing rendered, unless the form is
   disabled for the vacation period, in which case the notice alone
   carries both). The adjacent-sibling rule cancels the wrapper's own
   top margin when the notice already provided it, so the gap between
   the two never doubles up. */
.drs-urlaub-notice {
  width: min(70vw, 900px);
  max-width: none;
  margin: 30px auto;
  box-sizing: border-box;
  font-family: "Lato", sans-serif;
}

.drs-formular-wrapper {
  width: min(70vw, 900px);
  max-width: none;
  margin-top: 30px;
  margin-bottom: 30px;
  color: #2f3a3f;
  font-family: "Lato", sans-serif;
}

.drs-urlaub-notice + .drs-formular-wrapper {
  margin-top: 0;
}

.drs-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.drs-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.drs-field label {
  font-size: 1.2rem;
  font-weight: 600;
  color: #2f3a3f;
  font-family: "Lato", sans-serif;
}

.drs-field input[type="text"],
.drs-field input[type="email"] {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid #b6bbc1;
  border-radius: 4px;
  font-size: 1.2rem;
  font-family: "Lato", sans-serif;
  color: #2f3a3f;
  background: #ffffff;
  box-sizing: border-box;
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.drs-field input:focus {
  outline: none;
  border-color: #59798a;
  box-shadow: 0 0 0 2px rgba(89, 121, 138, 0.18);
}

.drs-field input.drs-invalid {
  border-color: #c0392b;
}

.drs-req { color: #c0392b; margin-left: 2px; }

.drs-err {
  font-size: 0.85rem;
  color: #c0392b;
  min-height: 1em;
  display: block;
}

.drs-section-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #59798a;
  border-bottom: 3px solid #bdbf71;
  padding-bottom: 6px;
  margin-top: 8px;
  font-family: "Lato", sans-serif;
}

.drs-med-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.drs-med-fields {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 12px;
  flex: 1;
}

@media (max-width: 600px) {
  .drs-med-fields { grid-template-columns: 1fr; }
}

.drs-remove-med {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: none;
  border-radius: 4px;
  color: #5a6469;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 6px;
}

.drs-remove-med:hover { color: #c0392b; opacity: 0.7; }

.drs-btn-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  gap: 6px;
  background: none;
  border: 2px solid #59798a;
  color: #59798a;
  padding: 0.75em 1.2em;
  border-radius: 4px;
  font-size: 1.2rem;
  font-weight: 600;
  font-family: "Lato", sans-serif;
  cursor: pointer;
  align-self: flex-start;
}

.drs-btn-add:hover { opacity: 0.7; }

.drs-checkbox-wrap { margin-top: 4px; }

.drs-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 1.2rem;
  color: #2f3a3f;
  font-weight: normal !important;
}

.drs-checkbox-label input[type="checkbox"] {
  margin-top: 3px;
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  accent-color: #59798a;
  cursor: pointer;
}

.drs-btn-submit {
  width: 100%;
  padding: 0.6em 1em;
  background: #59798a;
  color: #ffffff;
  border: 2px solid #59798a;
  border-radius: 4px;
  font-size: 1.1rem;
  font-weight: 600;
  font-family: "Lato", sans-serif;
  cursor: pointer;
  transition: opacity 0.2s ease-in-out;
  margin-top: 4px;
}

.drs-btn-submit:hover { opacity: 0.8; }
.drs-btn-submit:disabled { opacity: 0.5; cursor: not-allowed; }

#drs-messages { overflow: hidden; }

.drs-msg-info {
  background: rgba(89, 121, 138, 0.08);
  border: 1px solid #59798a;
  color: #2f3a3f;
  padding: 14px 18px;
  font-size: 1.2rem;
  line-height: 1.6;
  border-radius: 4px;
}

.drs-msg-info strong { color: #59798a; }

.drs-msg-error {
  background: #fdf3f2;
  border: 1px solid #e74c3c;
  color: #a93226;
  padding: 14px 18px;
  font-size: 1.2rem;
  line-height: 1.6;
  border-radius: 4px;
}

header.wp-block-template-part,
footer.wp-block-template-part {
  display: none !important;
}

main#wp--skip-link--target {
  margin-top: 0 !important;
}

.wp-block-post-title {
  display: none;
}

.wp-block-cover.alignfull {
  margin-top: 0 !important;
}

main#wp--skip-link--target > .wp-block-group.alignfull.is-layout-constrained {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 6 slides × 9s = 54s total. Per slide (in seconds, scaled to %): fade-in
   0→3s, hold 3→9s, fade-out 9→12s, hidden 12→54s. */
@keyframes praxis-fade-6 {
  0%, 100%  { opacity: 0; }
  5.5556%   { opacity: 1; }
  16.6667%  { opacity: 1; }
  22.2222%  { opacity: 0; }
}

/* Standalone slideshow section (matches local index.html's .praxis-slideshow
   exactly), for the Custom HTML block between "Über mich" and
   "Dauermedikamente" — not scoped to .wp-block-cover since it isn't one. */
.praxis-slideshow {
  position: relative;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-top: 0 !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  height: 105vh;
  overflow: hidden;
  background: #2f3a3f;
}

.praxis-slideshow .praxis-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  /* 6 slides, 9s apart each (same per-slide timing as the original 2-slide
     version: 3s fade-in, 6s hold, 3s fade-out, 6s hidden = 18s per slide's
     own cycle) — total duration scales to 9s × slide count so the holds
     never overlap. */
  animation: praxis-fade-6 54s ease-in-out infinite;
}

.praxis-slideshow .praxis-slide:nth-child(1) { animation-delay: 0s; }
.praxis-slideshow .praxis-slide:nth-child(2) { animation-delay: 9s; }
.praxis-slideshow .praxis-slide:nth-child(3) { animation-delay: 18s; }
.praxis-slideshow .praxis-slide:nth-child(4) { animation-delay: 27s; }
.praxis-slideshow .praxis-slide:nth-child(5) { animation-delay: 36s; }
.praxis-slideshow .praxis-slide:nth-child(6) { animation-delay: 45s; }

@media (max-width: 700px) {
  .praxis-slideshow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .praxis-slideshow .praxis-slide {
    animation: none;
    opacity: 0;
  }
  .praxis-slideshow .praxis-slide:nth-child(1) {
    opacity: 1;
  }
}

/* "Über mich" switched to the dark card treatment (like Kontakt): dark
   overlay behind the photo, light text on top — same recipe as the local
   reference's .content-card-dark + .bg-overlay. */
/* Solid color field instead of the photo behind "Über mich". */
#ueber-mich img.wp-block-cover__image-background {
  display: none !important;
}

#ueber-mich .wp-block-cover__background {
  background: #59798a !important;
  opacity: 1 !important;
}

#ueber-mich .wp-block-cover__inner-container > p:first-of-type {
  color: #bdbf71 !important;
}

#ueber-mich .wp-block-cover__inner-container h2 {
  color: #ffffff !important;
}

#ueber-mich .wp-block-cover__inner-container p:not(:first-of-type) {
  color: #ffffff !important;
  font-size: 1.2rem !important;
}

/* ---- Kontakt: match local reference (contact-list / hours-table) ---- */
#kontakt .wp-block-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#kontakt .hours-table,
#kontakt .hours-table table,
#kontakt .hours-table td,
#kontakt .hours-table th {
  border: none;
}

#kontakt .hours-table table {
  border-collapse: collapse;
  width: 100%;
}

#kontakt .hours-table td {
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 1.14rem;
}

#kontakt .hours-table td:first-child {
  font-weight: 600;
  color: #eadebe;
}

/* Footer copyright block is malformed in post content (nested <p><p>...</p></p>),
   so the browser auto-closes the outer tag and splits it into two sibling
   elements: an empty shell (carries the wp-block-paragraph + color classes)
   and the real text-bearing paragraph (no wp-block-paragraph class, color via
   inline style instead). Hide the empty shell; style the real one to match
   the page's standard text width, left-aligned, no extra margin. */
p.has-text-align-center.has-sage-teal-background-color.has-text-color.has-background.wp-block-paragraph {
  display: none;
}

p.has-text-align-center.has-text-color.has-background {
  position: relative;
  width: min(70vw, 900px);
  max-width: min(70vw, 900px);
  margin: 0 auto;
  text-align: left !important;
  background-color: transparent !important;
  z-index: 1;
}

/* Full-bleed background behind the constrained text, via the classic
   "negative-margin breakout" trick on a pseudo-element rather than the
   text container itself, so the color spans 100% width while the copy
   keeps the page's standard reading width. */
p.has-text-align-center.has-text-color.has-background::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background-color: #59798a;
  z-index: -1;
}

/* ---- Urlaub: Hinweisbanner unter der Menüzeile + Formular-Ersatztext ---- */
/* Full-bleed via the theme's own "alignfull" mechanism (functions.php adds
   the class), not a hand-rolled 100vw/calc() hack: the post-content wrapper
   has a *responsive* side padding (has-global-padding, clamp(30px, 5vw,
   50px)), and WordPress already cancels exactly that padding for
   ".has-global-padding > .alignfull" children. A viewport-unit-based
   breakout doesn't know about that padding value and drifts off by the
   difference, which showed up as the banner sitting shifted right.
   margin-block-start/-end reset to 0 because layout-constrained children
   otherwise get the theme's automatic 1.2rem block-gap above/below. */
.san-urlaub-hinweis {
  margin-block-start: 0;
  margin-block-end: 0;
  background-color: #c2410c;
}

.san-urlaub-hinweis p {
  width: min(70vw, 900px);
  margin: 0 auto;
  padding: 14px 24px;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}

@media (max-width: 700px) {
  .san-urlaub-hinweis p {
    width: 90vw;
  }
}

.san-urlaub-formular-hinweis {
  width: min(70vw, 900px);
  margin: 0 auto;
  padding: 14px 18px;
  background: rgba(89, 121, 138, 0.08);
  border: 1px solid #59798a;
  border-radius: 4px;
  color: #2f3a3f;
}

.san-urlaub-formular-hinweis p {
  font-size: 1.2rem;
  line-height: 1.6;
}

.san-urlaub-formular-hinweis--fehler {
  background: #fdf3f2;
  border-color: #e74c3c;
  color: #a93226;
}

@media (max-width: 700px) {
  .san-urlaub-formular-hinweis {
    width: 90vw;
  }
}

.san-urlaub-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: min(70vw, 900px);
  margin: 24px auto 0;
}

@media (max-width: 700px) {
  .san-urlaub-form {
    width: 90vw;
  }
}