/* Fosense Clinic — mobile refinement, 2026-10-14.
 * Load after the existing site stylesheet. Uses the published content and theme.
 * Desktop composition is retained; mobile height follows translated content.
 */
@media (max-width: 767px) {
  html { scroll-padding-top: 6rem; }
  body { -webkit-text-size-adjust: 100%; }
  .container {
    padding-inline-start: max(1.25rem, env(safe-area-inset-left));
    padding-inline-end: max(1.25rem, env(safe-area-inset-right));
  }
  header[role="banner"] > .container { height: 4.5rem; gap: .5rem; }
  header[role="banner"] > .container > button { gap: .5rem; flex: 1 1 0; }
  header[role="banner"] > .container > button > svg { height: 2rem; }
  header[role="banner"] > .container > button > span > span:first-child {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden; overflow-wrap: normal;
  }
  header[role="banner"] > .container > div { gap: .125rem; }
  header[role="banner"] select {
    width: 7rem; min-height: 2.75rem; font-size: 1rem;
    padding-left: .625rem; padding-right: 1.625rem; border-radius: .75rem;
  }
  header[role="banner"] button { min-height: 2.75rem; }
  header[role="banner"] > .container > div > button { min-width: 2.75rem; }
  header[role="banner"] button[aria-controls="mobile-nav"] {
    border-radius: .75rem; background: hsl(var(--primary) / .08);
    color: hsl(var(--foreground));
  }

  /* Keep the complete introduction and appointment action in normal flow. */
  main:has(> #neurodiversity) > section:first-child {
    height: auto; min-height: 38rem; max-height: none;
    padding-top: 4.5rem; align-items: center; isolation: isolate;
  }
  main:has(> #neurodiversity) > section:first-child > img { object-position: 54% center; }
  main:has(> #neurodiversity) > section:first-child > div.absolute:first-of-type {
    background: linear-gradient(180deg, hsl(190 38% 10% / .48), hsl(190 38% 10% / .78) 65%, hsl(190 38% 10% / .88));
  }
  main:has(> #neurodiversity) > section:first-child > .container {
    padding-top: 3.5rem; padding-bottom: 3.5rem;
  }
  main:has(> #neurodiversity) > section:first-child h1 {
    font-size: clamp(2.125rem, 8.5vw, 3rem); line-height: 1.2;
    font-weight: 500; letter-spacing: -.025em; text-wrap: balance;
  }
  main:has(> #neurodiversity) > section:first-child p { text-wrap: pretty; }
  main:has(> #neurodiversity) > section:first-child .mt-8 {
    margin-top: 1.5rem; font-size: 1.0625rem; line-height: 1.8;
  }
  main:has(> #neurodiversity) > section:first-child .mb-8 { margin-bottom: 1.75rem; }
  main:has(> #neurodiversity) > section:first-child .mt-12 { margin-top: 2rem; }
  main:has(> #neurodiversity) > section:first-child button {
    width: 100%; min-height: 3.5rem; border-radius: .875rem;
    font-size: 1rem; font-weight: 600; background: hsl(var(--appointment));
    color: hsl(190 38% 7%); text-shadow: none;
    border-color: hsl(var(--appointment)); box-shadow: 0 6px 20px hsl(190 38% 10% / .16);
  }

  main > section[id] { scroll-margin-top: 5.5rem; }
  .section-padding, #neurodiversity { padding-block: 4rem; }
  main > section h2 {
    font-size: clamp(1.75rem, 7vw, 2.25rem); line-height: 1.3;
    font-weight: 500; letter-spacing: -.02em; text-wrap: balance;
  }
  .section-heading-sticky {
    position: static; margin-inline: 0; padding: 0;
    border: 0; background: transparent; backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  #about p.text-justify, #team p.text-justify, #contact p.text-justify,
  #crisis-resources p.text-justify { text-align: start; }
  #about p.text-sm, #team p.text-sm, #contact .text-sm,
  #crisis-resources .text-sm { font-size: 1rem; line-height: 1.75; }
  #about h3 { font-size: 1.125rem; line-height: 1.5; }
  #about .mb-14 { margin-bottom: 2rem; }
  #about .rounded-sm { border-radius: 1rem; padding: 1.375rem; }
  #about .grid { gap: 2rem; }
  #neurodiversity .grid, #approach .grid { gap: 1.75rem; }
  #neurodiversity p.text-xl { font-size: 1.125rem; line-height: 1.85; }
  #neurodiversity .mt-9 { margin-top: 1.75rem; padding: 1.25rem; }
  #approach p.text-lg { font-size: 1.0625rem; line-height: 1.85; }
  #services > .container > h2, #team > .container > div:first-child h2,
  #contact > .container > h2 { margin-bottom: 1.75rem; }
  #services .text-center { text-align: start; }
  #services article { padding: 1rem; border-radius: 1.5rem; }
  #services article > div:first-child {
    min-height: 0; padding: 1.25rem; margin-bottom: 1.25rem;
    border-radius: 1rem;
  }
  #services article > div:first-child p { margin-bottom: .875rem; font-size: .875rem; letter-spacing: .025em; }
  #services article h3 { font-size: 1.5rem; line-height: 1.35; font-weight: 500; }
  #services article li { border-radius: .75rem; font-size: 1rem; line-height: 1.6; }
  #services article p { line-height: 1.75; }

  /* A compact portrait and name introduce each clinician before their bio. */
  #team article { border-radius: 1.25rem; }
  #team article > .grid { grid-template-columns: 6.5rem minmax(0, 1fr); align-items: stretch; }
  #team article > .grid > img {
    width: 100%; height: 100%; min-height: 10rem; aspect-ratio: auto;
    object-position: center 22%;
  }
  #team article > .grid > div { padding: 1.25rem 1rem; }
  #team article > .grid h3 { font-size: 1.1875rem; line-height: 1.4; text-wrap: balance; }
  #team article > .grid p { font-size: .9375rem; line-height: 1.6; }
  #team article > div:last-child { padding: 1.375rem; }
  #team article button, #team article a { min-height: 3.125rem; font-size: 1rem; border-radius: .75rem; }
  #team article a { background: hsl(var(--appointment)); border-color: hsl(var(--appointment)); color: hsl(190 38% 7%); text-shadow: none; font-weight: 600; }

  #faq h3 button { min-height: 4rem; padding-block: 1.25rem; font-size: 1rem; line-height: 1.6; }
  #faq [role="region"] { font-size: 1rem; line-height: 1.8; }
  #faq [data-orientation="vertical"].border-b { border-color: hsl(var(--border)); }
  #contact a { overflow-wrap: anywhere; }
  #contact a[href^="tel:"], #contact a[href^="mailto:"] {
    display: inline-flex; min-height: 2.75rem; align-items: center;
    font-size: 1.0625rem; font-weight: 500; color: hsl(var(--foreground));
  }
  #contact a[target="_blank"] { min-height: 3.25rem; border-radius: .75rem; font-size: 1rem; }
  #contact .mt-10 > div { border-radius: 1.125rem; }
  #contact iframe { height: 17rem; }
  #root > div > footer { padding-bottom: max(2.5rem, env(safe-area-inset-bottom)); }
  #root > div > footer > .container > div:last-of-type { flex-wrap: wrap; gap: 1rem; width: 100%; }
  #root > div > footer .text-xs { font-size: .875rem; line-height: 1.7; }
  #root > div > footer button, footer a { display: inline-flex; min-height: 2.75rem; align-items: center; }
  #root > div > footer div[dir="ltr"] { flex-wrap: wrap; gap: .25rem; }
  #root > div > footer button { padding-inline: .625rem; border-radius: .625rem; }

  /* Keep the group announcement centered, including during its entrance animation. */
  [role="dialog"]:has(header) {
    left: 1rem; right: 1rem; top: max(1rem, env(safe-area-inset-top));
    width: auto; max-width: none; max-height: calc(100dvh - 2rem);
    transform: none !important; animation-name: clinic-dialog-fade;
    border-radius: 1.25rem;
  }
  [role="dialog"]:has(header) > div { min-height: 0; overscroll-behavior: contain; }
  [role="dialog"]:has(header) > button { min-width: 2.75rem; min-height: 2.75rem; }
  [role="dialog"]:has(header) header { padding-inline: 1.25rem; }
  [role="dialog"]:has(header) footer {
    flex-shrink: 0; padding: 1rem 1.25rem max(1rem, env(safe-area-inset-bottom));
  }
  @keyframes clinic-dialog-fade { from { opacity: 0; } to { opacity: 1; } }

  /* The existing Radix menu retains focus management and dismissal behavior. */
  [role="dialog"]:has(#mobile-nav) {
    width: min(23rem, calc(100vw - 1rem)); max-width: none;
    padding: max(1.5rem, env(safe-area-inset-top)) 1.5rem max(1.5rem, env(safe-area-inset-bottom));
    overflow-y: auto; overscroll-behavior: contain; max-height: 100dvh;
  }
  #mobile-nav { margin-top: 2.5rem; }
  #mobile-nav > :is(a, button) { min-height: 3.75rem; font-size: 1.0625rem; line-height: 1.5; }
  [role="dialog"]:has(#mobile-nav) > button { min-width: 2.75rem; min-height: 2.75rem; }
  a:focus-visible, button:focus-visible, select:focus-visible {
    outline: 2px solid hsl(var(--ring)); outline-offset: 4px;
  }
  a, button, select { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
}

@media (max-width: 360px) {
  header[role="banner"] > .container { padding-inline: .75rem; }
  header[role="banner"] > .container > button > svg { height: 1.75rem; }
  header[role="banner"] > .container > button { gap: .375rem; }
  header[role="banner"] select { width: 7rem; }
  #team article > .grid { grid-template-columns: 5.5rem minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  #root *, [role="dialog"] { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}