/* Universal frame overlay shared across all fixed-layout pages */

:root {
  /* base measurements for desktop / landscape */
  --uf-frame-offset: 16px;          /* distance from viewport edge */
  --uf-line-thickness-h: 32px;      /* top & bottom thickness */
  --uf-line-thickness-v: clamp(50px, 3.8vw, 82px); /* side line width */
  --uf-heart-size: 40px;           /* heart PNG size */
}

/* --- core container ---------------------------------------------------- */
#site-frame {
  position: fixed;   /* sits above every page, never scrolls */
  inset: 0;
  pointer-events: none;  /* never blocks clicks */
  z-index: 20;       /* below nav-buttons (z-index:100) but above content */
}

/* --- four frame lines -------------------------------------------------- */
#site-frame .uf-line {
  position: absolute;
  background-repeat: repeat;
  background-position: center center;
}

/* top & bottom lines (repeat-x) */
#site-frame .uf-line-top,
#site-frame .uf-line-bottom {
  left: var(--uf-frame-offset);
  right: var(--uf-frame-offset);
  height: var(--uf-line-thickness-h);
  background-size: auto 100%;
}

#site-frame .uf-line-top  { top:    var(--uf-frame-offset);
                            background-image: url('../visual_components/section_frame/frame_line_top.svg'); }
#site-frame .uf-line-bottom{ bottom: var(--uf-frame-offset);
                            background-image: url('../visual_components/section_frame/frame_line_bottom.svg'); }

/* left & right lines (repeat-y) */
#site-frame .uf-line-left,
#site-frame .uf-line-right {
  top:    var(--uf-frame-offset);
  bottom: var(--uf-frame-offset);
  width:  var(--uf-line-thickness-v);
  background-size: 100% auto;
}

#site-frame .uf-line-left  { left:  var(--uf-frame-offset);
                             background-image: url('../visual_components/section_frame/frame_line_left.svg'); }
#site-frame .uf-line-right { right: var(--uf-frame-offset);
                             background-image: url('../visual_components/section_frame/frame_line_right.svg'); }

/* --- corner hearts (desktop only) ------------------------------------- */
#site-frame .uf-heart {
  position: absolute;
  width:  var(--uf-heart-size);
  height: var(--uf-heart-size);
  background-repeat: no-repeat;
  background-size: contain;
}
#site-frame .uf-heart-left  { top: calc(var(--uf-frame-offset) + 30px);  left: calc(var(--uf-frame-offset) + 12px);
                              background-image: url('../visual_components/section_frame/frame_heart_left.png'); }
#site-frame .uf-heart-right { top: calc(var(--uf-frame-offset) + 40px);  right: calc(var(--uf-frame-offset) + 44px);
                              background-image: url('../visual_components/section_frame/frame_heart_right.png'); }

/* --- portrait / narrow-viewport adjustments --------------------------- */
@media (max-aspect-ratio: 1.4), (max-width: 1024px), (max-height: 600px) {
  :root {
    /* responsive sizing – mimic proportions of donatori/index mobile */
    --uf-frame-offset: 2vw;
    --uf-line-thickness-h: clamp(28px, 6vw, 36px);
    --uf-line-thickness-v: clamp(28px, 8vw, 48px);
    --uf-heart-size: 36px;
  }

  /* vertical offset for top/bottom lines */
  #site-frame .uf-line-top  { top: 0.74vh; }
  #site-frame .uf-line-bottom{ bottom: 0.74vh; }

  /* vertical inset for side lines so corners look clean */
  #site-frame .uf-line-left,
  #site-frame .uf-line-right {
    top:    calc(0.74vh + 12px);
    bottom: calc(0.74vh + 12px);
  }

  /* Hearts visible and repositioned */
  #site-frame .uf-heart {
    width: var(--uf-heart-size);
    height: var(--uf-heart-size);
  }

  #site-frame .uf-heart-left  { top: 4vh; left: 8vw; }
  #site-frame .uf-heart-right { top: 5vh;  right: 8vw; }

  #site-frame { position: absolute !important; }
}

/* --- utility: ensure any old landscape-only decorations stay hidden now that universal frame exists --- */
@media (max-aspect-ratio: 1.4), (max-width: 1024px), (max-height: 600px) {
  .landscape-only {
    display: none !important;
  }
}

/* Re-enable blocks that are meant only for wide landscape layouts */
@media (orientation: landscape) and (min-aspect-ratio: 1.4) and (min-width: 1024px) {
  .landscape-only {
    display: block !important;
  }
}

/* Ensure scrollable pages aren't locked */
.frame-container{overflow:visible !important;}

/* Ensure pages remain scrollable even if legacy CSS set overflow hidden */
html, body {overflow-x:hidden; overflow-y:auto !important;}

/* Neutralise legacy scaling wrapper once the universal frame is active on non-index pages */
body:not(.homepage) .stage {transform:none !important; position:static !important; width:100% !important; height:auto !important; top:auto !important; left:auto !important;}

/* ------------------------------------------------------------------
   Scroll-page variant: let the frame follow document flow for pages
   that are taller than the viewport (e.g. articles, forms).           
   ------------------------------------------------------------------ */
body.scroll-page {
  position: relative;
  display: block !important;
  justify-content: initial !important;
  align-items: initial !important;
}
body.scroll-page #site-frame {
  position: absolute;
  inset: 0;
}

/* Remove page-specific margin that was pushing responsive pages downward */
body.scroll-page .content-wrapper { margin-top:0 !important; padding-top:0 !important; }

/* Scroll-page layouts: eliminate extra top padding inherited from base/orientation */
body.scroll-page .frame-container,
body.scroll-page .frame-content {
  padding: 0 !important; /* remove default 0.5rem padding that pushed frame down */
}

/* Scroll-page: collapse dummy frame-container so it doesn't push content down */
body.scroll-page .frame-container {
  min-height: 0 !important;
  height: auto !important;
}

/* ---------------------------------------------------------------
   Desktop landscape: remove extra top offset from article pages
   --------------------------------------------------------------- */
@media (orientation: landscape) and (min-aspect-ratio: 1.4) and (min-width: 1024px) {
  body.scroll-page .content-wrapper,
  body.scroll-page .frame-content {
    margin-top: 0 !important;
    padding-top: calc(var(--uf-frame-offset) + 3rem) !important; /* 3rem extra clearance */
  }

  /* ensure first element sits flush when scroll-page */
  body.scroll-page .content-wrapper > *:first-child {
    margin-top: 0 !important;
  }

  /* fixed-layout pages handled below */
}

/* ---------------------------------------------------------------
   Homepage: keep full-bleed layout and proper top clearance
   --------------------------------------------------------------- */
@media (orientation: landscape) and (min-aspect-ratio: 1.4) and (min-width: 1024px) {
  body.homepage {
    display:block !important;
    justify-content:initial !important;
    align-items:initial !important;
  }
  body.homepage .frame-container,
  body.homepage .frame-content {
    margin:0 !important;
    padding-top: calc(var(--uf-frame-offset) + 6rem) !important; /* extra clearance for hero title */
  }
}

/* ---------------------------------------------------------------
   Homepage body needs same top clearance (acts as container itself)
   --------------------------------------------------------------- */
@media (orientation: landscape) and (min-aspect-ratio: 1.4) and (min-width: 1024px) {
  body.homepage {
    padding-top: calc(var(--uf-frame-offset) + 1.5rem) !important;
  }
  body.homepage .action-button img {
    width: clamp(4rem, 12vw, 6rem) !important;
    height: clamp(4rem, 12vw, 6rem) !important; /* keep round proportional */
  }
}

/* ---------------------------------------------------------------
   Portrait/mobile: give doctor pages (stage) a natural top margin
   --------------------------------------------------------------- */
@media (max-aspect-ratio: 1.4), (max-width: 1024px), (max-height: 600px) {
  .stage,
  body.scroll-page .frame-content {
    padding-top: calc(var(--uf-frame-offset) + 4rem) !important; /* ample space */
  }
}

/* ---------------------------------------------------------------
   Mobile portrait: ensure main content is centered (Kontakt etc.)
   --------------------------------------------------------------- */
@media (max-aspect-ratio: 1.4), (max-width: 1024px), (max-height: 600px) {
  body.scroll-page .max-w-6xl {
    margin-left:auto !important;
    margin-right:auto !important;
    margin-top: 2rem !important;
  }
}

@media (max-aspect-ratio: 1.4), (max-width: 1024px), (max-height: 600px) {
  body.scroll-page .frame-content > header:first-of-type {
    margin-top: 2.5rem !important;
  }
}

@media (max-aspect-ratio: 1.4), (max-width: 1024px), (max-height: 600px) {
  body.scroll-page .frame-content header {
    margin-top: 2rem !important;
  }
}

@media (max-aspect-ratio: 1.4), (max-width: 1024px), (max-height: 600px) {
  body.scroll-page .grid-cols-5 {
    margin-top: calc(var(--uf-frame-offset) + 2rem) !important;
  }
}

/* fixed-layout doctor pages keep extra clearance; scroll pages get minimal */
body:not(.scroll-page) .stage { padding-top: calc(var(--uf-frame-offset) + 3rem) !important; }
body.scroll-page .stage,
body.scroll-page .frame-content { padding-top: 0 !important; }

/* Likewise for frame-content */
body.scroll-page .frame-content { padding-top: calc(var(--uf-frame-offset) + 0.5rem) !important; }

/* ---------------------------------------------------------------
   Portrait/mobile scroll-page: restore ample top clearance
   --------------------------------------------------------------- */
@media (max-aspect-ratio: 1.4), (max-width: 1024px), (max-height: 600px) {
  body.scroll-page .stage,
  body.scroll-page .frame-content {
    padding-top: calc(var(--uf-frame-offset) + 4rem) !important;
  }
}

@media (max-aspect-ratio: 1.4), (max-width: 1024px), (max-height: 600px) {
  /* Ensure stage padding does not enlarge overall width */
  .doctor-page .stage {
    box-sizing: border-box !important;
  }
}

/* ---------------------------------------------------------------
   Homepage landscape: adjust top spacing to remove double margin
   --------------------------------------------------------------- */
@media (orientation: landscape) and (min-aspect-ratio: 1.4) and (min-width: 1024px) {
  body.homepage { padding-top: 0 !important; }
  body.homepage .stage { padding-top: 0 !important; }
  body.homepage .frame-container,
  body.homepage .frame-content {
    padding-top: calc(var(--uf-frame-offset) + 3rem) !important; /* reduced from +6rem */
  }
}