/* Kanzlei Kersebaum — brand-level overrides v2 */

:root {
  --rak-hero-pad: clamp(3.5rem, 8vw, 7rem);
  --rak-section-pad: clamp(3rem, 6vw, 5rem);
  --rak-radius: 2px;
  --rak-shadow-card: 0 1px 0 rgba(14,22,32,0.04), 0 8px 24px -12px rgba(14,22,32,0.08);
  --rak-shadow-hero: 0 6px 32px -8px rgba(14,22,32,0.20), 0 24px 80px -32px rgba(14,22,32,0.18);
}

html { scroll-behavior: smooth; overflow-x: hidden; }
body { overflow-x: hidden; }

body {
  font-feature-settings: "kern", "liga", "calt";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.wp-site-blocks { max-width: 100%; }

/* ---- Layered, slightly textured page background --------------------------- */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1100px 700px at 92% -5%, rgba(122,46,46,0.06), transparent 60%),
    radial-gradient(900px 600px at -5% 110%, rgba(27,42,65,0.06), transparent 60%),
    var(--wp--preset--color--background);
}

/* ---- Eyebrow (section tags) ---------------------------------------------- */
.rak-eyebrow {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--wp--preset--font-family--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand);
  margin-bottom: 1rem;
}
.rak-eyebrow::before {
  content: ""; width: 30px; height: 1px; background: currentColor; display:inline-block; opacity:0.6;
}

/* ---- Force full-band sections to escape post-content constraint ---------
   Twenty-Twenty-Five's nested has-global-padding rule zeros our margins, so use !important.
   Also account for the vertical scrollbar to avoid spurious horizontal overflow. */
.rak-hero,
.rak-hero-cover,
.alignfull.rak-hero,
.alignfull.rak-hero-cover,
.alignfull.has-surface-background-color,
section.alignfull,
.wp-block-cover.alignfull {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* The inner band content should sit inside a reasonable max-width */
.rak-hero > .wp-block-columns,
section.alignfull > .wp-block-columns {
  max-width: 1180px;
  margin-inline: auto;
  width: 100%;
}

/* Hero cover: inner-container aligns its left edge with the wide content area's left margin.
   At viewport >= 1180 + padding, that's (100vw - 1180px) / 2 from the left edge. */
.rak-hero-cover {
  padding-left:  max(1rem, calc((100vw - 1180px) / 2)) !important;
  padding-right: max(1rem, calc((100vw - 1180px) / 2)) !important;
}
.rak-hero-cover > .wp-block-cover__inner-container {
  width: 100% !important;
  max-width: 640px !important;
  margin: 0 !important;
  flex: 1 1 auto !important;
}

/* ---- Cinematic full-bleed cover hero ----------------------------------- */
.rak-hero-cover {
  min-height: clamp(520px, 70vh, 720px);
}
.rak-hero-cover .wp-block-cover__image-background {
  object-fit: cover;
  object-position: center 35%;
  filter: saturate(0.94) contrast(1.02);
}
/* Override the cover gradient with a stronger navy left-fade so headline stays legible.
   Note: has-background-dim-0 sets opacity:0 on the span, which kills the gradient. Force opacity:1. */
.rak-hero-cover .wp-block-cover__gradient-background.has-background-dim,
.rak-hero-cover .wp-block-cover__gradient-background {
  opacity: 1 !important;
  background: linear-gradient(95deg,
    rgba(8,16,28,0.97) 0%,
    rgba(8,16,28,0.94) 36%,
    rgba(8,16,28,0.78) 52%,
    rgba(8,16,28,0.30) 70%,
    rgba(8,16,28,0.00) 92%) !important;
}
.rak-hero-cover .rak-hero-text {
  max-width: 640px;
  color: #FFFFFF;
}
.rak-hero-cover .rak-eyebrow.rak-eyebrow-light {
  color: rgba(255,255,255,0.72) !important;
}
.rak-hero-cover .rak-eyebrow.rak-eyebrow-light::before {
  background: rgba(255,255,255,0.55);
}
.rak-hero-cover h1, .rak-hero-cover .wp-block-heading {
  text-shadow: 0 1px 24px rgba(0,0,0,0.25);
}
.rak-hero-cover .wp-block-buttons .wp-block-button:first-child .wp-block-button__link {
  background: #FFFFFF !important;
  color: var(--wp--preset--color--brand) !important;
  border-color: #FFFFFF !important;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.4);
}
.rak-hero-cover .wp-block-buttons .wp-block-button:first-child .wp-block-button__link:hover {
  background: var(--wp--preset--color--accent-soft) !important;
  border-color: var(--wp--preset--color--accent-soft) !important;
}
.rak-hero-cover .wp-block-buttons .is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: #FFFFFF !important;
  border-color: rgba(255,255,255,0.55) !important;
}
.rak-hero-cover .wp-block-buttons .is-style-outline .wp-block-button__link:hover {
  background: rgba(255,255,255,0.1) !important;
  border-color: #FFFFFF !important;
}
@media (max-width: 720px) {
  .rak-hero-cover { min-height: 580px; }
  .rak-hero-cover h1, .rak-hero-cover .wp-block-heading {
    font-size: 2.1rem !important; line-height: 1.15;
  }
}

/* ---- Hero section (legacy non-cover hero) ----------------------------- */
.rak-hero { padding-block: var(--rak-hero-pad); position: relative; }

.rak-hero h1, .rak-hero .wp-block-heading {
  max-width: 22ch; letter-spacing: -0.015em;
}

.rak-hero p.has-large-font-size { max-width: 50ch; }

/* The hero portrait card — used as a wp:image inside a column on the Startseite */
.rak-hero-portrait img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: var(--rak-radius);
  box-shadow: var(--rak-shadow-hero);
  filter: saturate(0.95);
}

/* ---- Cards / grids ------------------------------------------------------- */
.rak-card {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--rule);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--rak-radius);
  box-shadow: var(--rak-shadow-card);
}

.rak-kassen-grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.rak-kassen-grid > * {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--rule);
  padding: 1.75rem 1.5rem;
  border-radius: var(--rak-radius);
  box-shadow: var(--rak-shadow-card);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.rak-kassen-grid > *:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 0 rgba(14,22,32,0.04), 0 16px 32px -16px rgba(14,22,32,0.20);
  border-color: rgba(27,42,65,0.20);
}
.rak-kassen-grid h3 {
  font-size: var(--wp--preset--font-size--large);
  margin: 0 0 0.5rem 0;
}

/* ---- Divider ------------------------------------------------------------- */
.rak-divider {
  height: 1px;
  background: var(--wp--preset--color--rule);
  border: 0;
  margin-block: var(--rak-section-pad);
}

/* ---- Buttons ------------------------------------------------------------- */
.wp-block-button__link {
  text-decoration: none !important;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.wp-block-button__link:hover { transform: translateY(-1px); }

a {
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

main h2 { margin-top: 1.5em; }
main h3 { margin-top: 1.5em; }

.rak-bio-portrait img {
  border-radius: var(--rak-radius);
  filter: saturate(0.95);
  box-shadow: var(--rak-shadow-hero);
}

.wp-block-site-title a,
.wp-block-site-title a:visited {
  color: var(--wp--preset--color--ink);
  text-decoration: none;
}
footer .wp-block-site-title a { font-size: 0.95rem; }

/* ---- Accented dark section (used at bottom of pages for CTA) ------------- */
.rak-dark-cta {
  background: var(--wp--preset--color--brand);
  color: #ffffff;
  border-radius: var(--rak-radius);
  padding: clamp(2.5rem, 6vw, 4rem) clamp(2rem, 5vw, 4rem);
  position: relative;
  overflow: hidden;
}
.rak-dark-cta::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none; opacity: 0.18;
  background:
    radial-gradient(420px 240px at 90% -10%, rgba(255,255,255,0.5), transparent 60%),
    radial-gradient(360px 220px at 10% 110%, rgba(255,255,255,0.3), transparent 60%);
}
.rak-dark-cta * { position: relative; }
.rak-dark-cta h2, .rak-dark-cta .wp-block-heading { color: #ffffff; }
.rak-dark-cta p { color: #C9D2E2; }
.rak-dark-cta .wp-block-button__link {
  background: #ffffff !important; color: var(--wp--preset--color--brand) !important;
  border-color: #ffffff !important;
}
.rak-dark-cta .wp-block-button__link:hover {
  background: var(--wp--preset--color--accent-soft) !important;
  border-color: var(--wp--preset--color--accent-soft) !important;
}

/* ---- Small dot/marker used in the eyebrow accent variant ----------------- */
.rak-accent-eyebrow .rak-eyebrow { color: var(--wp--preset--color--accent); }

@media (max-width: 720px) {
  .rak-hero h1, .rak-hero .wp-block-heading {
    font-size: 2.1rem !important; line-height: 1.15;
  }
}

/* ============================================================
   Navigation — bigger hamburger, fixed-position X, larger overlay font
   Targets Twenty-Twenty-Five's block navigation responsive container.
   ============================================================ */

/* Hide the default tiny SVG icons on the open/close buttons */
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg { display: none !important; }

/* Hamburger: size + remove default SVG only when the button is actually shown.
   We do NOT touch `display` so WP's responsive show/hide still works. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  width: 44px;
  height: 44px;
  position: relative;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--wp--preset--color--ink);
  align-items: center;
  justify-content: center;
}

/* Hamburger: three bars drawn with a pseudo-element + box-shadow for the middle */
.wp-block-navigation__responsive-container-open::before {
  content: "";
  position: absolute;
  left: 10px; right: 10px;
  top: 14px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  box-shadow:
    0 8px 0 0 currentColor,
    0 16px 0 0 currentColor;
}

/* The close button is in the opened overlay container. Make X glyph the same hit area. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  position: absolute;
  top: clamp(0.75rem, 2.5vw, 1.5rem);
  right: clamp(0.75rem, 2.5vw, 1.5rem);
  color: var(--wp--preset--color--ink);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close::before,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px; top: 21px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close::before { transform: rotate(45deg); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close::after  { transform: rotate(-45deg); }

/* Overlay menu — larger type and clearer hit areas */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  font-size: clamp(1.25rem, 4.5vw, 1.6rem) !important;
  letter-spacing: 0;
  gap: 0.5rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-family: var(--wp--preset--font-family--serif);
  padding: 0.6rem 0;
  display: inline-block;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:hover .wp-block-navigation-item__content {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  padding: clamp(3rem, 8vh, 5rem) clamp(1.25rem, 5vw, 3rem) !important;
}

/* Desktop nav items — slightly bigger and easier to scan for older users */
.wp-block-navigation:not(.is-responsive) .wp-block-navigation__container,
header .wp-block-navigation .wp-block-navigation__container {
  font-size: 1rem;
  gap: 1.5rem;
}

/* ============================================================
   Mobile typography rebalance — easier reading for older audience
   ============================================================ */
@media (max-width: 720px) {
  body { font-size: 1.05rem; line-height: 1.7; }
  p { line-height: 1.7; }
  .has-large-font-size { font-size: 1.12rem !important; line-height: 1.6 !important; }
  .rak-eyebrow { font-size: 0.84rem; letter-spacing: 0.16em; }
  h1.wp-block-heading, .wp-block-heading[class*="serif"] {
    font-size: clamp(1.9rem, 7vw, 2.3rem) !important;
    line-height: 1.18 !important;
  }
  h2.wp-block-heading { font-size: 1.7rem !important; line-height: 1.2 !important; }
  h3.wp-block-heading { font-size: 1.25rem !important; line-height: 1.25 !important; }
  /* Small footer + meta text */
  footer p, .rak-form-progress { font-size: 0.86rem !important; }
  /* Form labels and inputs comfortable on touch */
  .rak-form label { font-size: 1rem; }
  .rak-form input, .rak-form select, .rak-form textarea { font-size: 1.02rem; padding: 1rem 1.05rem; }
  .rak-form .choice span { padding: 0.85rem 1.25rem; font-size: 1rem; }
  .rak-form-btn { padding: 1.05rem 1.85rem; font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rak-kassen-grid > * { transition: none; }
  .wp-block-button__link { transition: none; }
}

/* ---- Skip link ----------------------------------------------------------- */
.skip-link {
  position: absolute; left: -9999px; top: 1rem;
  background: var(--wp--preset--color--brand); color: #fff;
  padding: 0.5rem 1rem; z-index: 9999;
}
.skip-link:focus { left: 1rem; }