/*!
 * MedConsult Clinic — mc-core.css
 * Shared structural CSS for global header, page content and global footer.
 *
 * Keep brand/page-specific visual styling in the exported components.
 */

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
}

#mc-header,
#mc-page,
#mc-footer {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  letter-spacing: normal;
  word-spacing: normal;
  font-stretch: normal;
}

#mc-header *,
#mc-header *::before,
#mc-header *::after,
#mc-page *,
#mc-page *::before,
#mc-page *::after,
#mc-footer *,
#mc-footer *::before,
#mc-footer *::after {
  box-sizing: border-box;
}

#mc-header button,
#mc-header input,
#mc-header select,
#mc-header textarea,
#mc-page button,
#mc-page input,
#mc-page select,
#mc-page textarea,
#mc-footer button,
#mc-footer input,
#mc-footer select,
#mc-footer textarea {
  font: inherit;
}

#mc-header a,
#mc-page a,
#mc-footer a {
  color: inherit;
}

#mc-header button,
#mc-page button,
#mc-footer button {
  cursor: pointer;
}

#mc-header button:disabled,
#mc-page button:disabled,
#mc-footer button:disabled {
  cursor: not-allowed;
}

#mc-header {
  position: sticky;
  top: 0;
  z-index: 200;
  overflow: visible;
}

#mc-page {
  position: relative;
  overflow: visible;
  isolation: isolate;
  min-width: 0;
}

#mc-footer {
  position: relative;
  overflow: visible;
  isolation: isolate;
  min-width: 0;
}

/* ------------------------------------------------------------------
 * CLS fix (PageSpeed: #mc-footer shift 0.90)
 * #mc-page is filled by React after page JS loads, while mc-footer.js
 * mounts earlier — so the footer first paints at the top of the screen
 * and is then pushed down a full viewport. Until #mc-page has content:
 *   1) reserve one screen of height for it
 *   2) keep the footer invisible (invisible elements don't count as CLS)
 * Both rules switch off automatically the moment React renders.
 * Pages without #mc-page are unaffected.
 * ------------------------------------------------------------------ */
/* Scoped to the top-level mount (#mc-site > #mc-page) only: some page
 * exports also leave an empty nested <div id="mc-page"> inside the page
 * content, which must never get the reserved height. */
#mc-site > #mc-page:not(:has(> *)) {
  min-height: 100vh;
  min-height: 100svh;
}

body:has(#mc-site > #mc-page):not(:has(#mc-site > #mc-page > *)) #mc-footer {
  visibility: hidden;
}

#mc-header :focus:not(:focus-visible),
#mc-page :focus:not(:focus-visible),
#mc-footer :focus:not(:focus-visible) {
  outline: none;
}

#mc-header :focus-visible,
#mc-page :focus-visible,
#mc-footer :focus-visible {
  outline: 2px solid #007e55;
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  #mc-header a,
  #mc-header button,
  #mc-page a,
  #mc-page button,
  #mc-footer a,
  #mc-footer button {
    transition:
      background-color 0.2s ease,
      color 0.2s ease,
      border-color 0.2s ease,
      box-shadow 0.25s ease,
      transform 0.25s ease,
      opacity 0.2s ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  #mc-header *,
  #mc-header *::before,
  #mc-header *::after,
  #mc-page *,
  #mc-page *::before,
  #mc-page *::after,
  #mc-footer *,
  #mc-footer *::before,
  #mc-footer *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}