/*
 * Campino shared readability, contrast and form-fit layer — v50
 * Loaded after page-specific styles so every existing page receives the same
 * minimum type sizes, focus treatment and desktop modal behaviour.
 */

:root {
  --readable-body: clamp(.92rem, .18vw + .87rem, 1.02rem);
  --readable-small: clamp(.79rem, .13vw + .76rem, .88rem);
  --readable-label: clamp(.82rem, .12vw + .79rem, .9rem);
  --readable-line: 1.9;
}

body {
  color: #241e2f;
  font-size: var(--readable-body);
  line-height: var(--readable-line);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  color: #241e2f;
  background: #f2c98f;
}

main p,
main li,
main dd,
main summary,
footer p,
footer a {
  line-height: var(--readable-line);
}

main p,
main li,
main dd {
  font-size: max(1em, var(--readable-body));
}

main small,
main .eyebrow,
main [class*="kicker"],
main [class*="note"],
main [class*="caption"],
main [class*="status"] {
  font-size: var(--readable-small);
  line-height: 1.8;
}

main h1,
main h2,
main h3,
main h4,
[role="dialog"] h2,
dialog h2 {
  /*
   * Do not force a dark heading color here. Page sections already define
   * their foreground color and headings must inherit it. The previous global
   * dark value made headings disappear on Campino's purple surfaces.
   */
  color: inherit;
  line-height: 1.45;
  text-wrap: balance;
}

main p,
main li,
main dd,
[role="dialog"] p,
dialog p {
  text-wrap: pretty;
}

button,
input,
select,
textarea {
  font: inherit;
}

input,
select,
textarea {
  color: #241e2f !important;
  background: #fff !important;
}

input::placeholder,
textarea::placeholder {
  color: #766c7f !important;
  opacity: 1;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(215,149,66,.36);
  outline-offset: 2px;
}

.field label,
.form-grid label,
.ssa-form-grid label,
.ig-modal label,
.iim-modal label,
.ima-modal label {
  color: #241e2f;
  font-size: var(--readable-label) !important;
  font-weight: 750;
  line-height: 1.65;
}

.field input,
.field select,
.field textarea,
.form-grid input,
.form-grid select,
.form-grid textarea,
.ssa-form-grid input,
.ssa-form-grid select,
.ssa-form-grid textarea,
.ig-modal input,
.ig-modal select,
.ig-modal textarea,
.iim-modal input,
.iim-modal select,
.iim-modal textarea,
.ima-modal input,
.ima-modal select,
.ima-modal textarea {
  min-height: 48px;
  padding: 10px 13px !important;
  border-color: #cfc5d5 !important;
  border-radius: 12px;
  font-size: .94rem !important;
  line-height: 1.6;
}

.field textarea,
.form-grid textarea,
.ssa-form-grid textarea,
.ig-modal textarea,
.iim-modal textarea,
.ima-modal textarea {
  min-height: 92px !important;
  max-height: 118px;
}

/* Desktop: keep the complete form visible without an inner scrollbar. */
@media (min-width: 769px) and (min-height: 720px) {
  .modal,
  .ssa-modal,
  .ig-modal,
  .iim-modal,
  .ima-modal {
    padding: 12px !important;
  }

  .modal__dialog,
  .ssa-modal__dialog,
  .ig-modal__dialog,
  .iim-modal__dialog,
  .ima-modal__dialog {
    width: min(820px, calc(100vw - 32px)) !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 24px 28px !important;
    border-radius: 24px !important;
  }

  .modal__head,
  .ssa-modal header,
  .ig-modal header,
  .iim-modal__head,
  .ima-modal__head {
    margin-bottom: 14px !important;
    padding-bottom: 12px !important;
  }

  .modal__head h2,
  .ssa-modal h2,
  .ig-modal h2,
  .iim-modal h2,
  .ima-modal h2 {
    margin-block: 2px 4px !important;
    font-size: clamp(1.5rem, 2vw, 1.9rem) !important;
  }

  .modal__head p,
  .ssa-modal header p,
  .ig-modal header p,
  .iim-modal__head p,
  .ima-modal__head p {
    margin: 0 0 10px !important;
    font-size: .86rem !important;
  }

  .form-grid,
  .ssa-form-grid {
    gap: 10px 14px !important;
  }

  .form-note,
  .ssa-form-note,
  [class*="form-note"] {
    margin-block: 10px !important;
  }

  #growth-modal {
    width: min(1040px, calc(100vw - 28px)) !important;
    max-height: calc(100vh - 20px) !important;
    overflow: visible !important;
  }

  #growth-modal .modal__head {
    position: static !important;
    min-height: 62px;
    padding: 14px 22px !important;
  }

  #growth-modal .modal__body {
    max-height: none !important;
    overflow: visible !important;
  }

  #growth-modal .modal-intro {
    padding: 13px 24px !important;
  }

  #growth-modal .modal-form-host {
    padding: 18px 24px !important;
  }

  #growth-modal .field textarea {
    min-height: 82px !important;
  }
}

/* Standard desktop screens: the overlay itself must not paint a scrollbar. */
@media (min-width: 769px) and (min-height: 800px) {
  .modal,
  .ssa-modal,
  .ig-modal,
  .iim-modal,
  .ima-modal {
    height: 100dvh !important;
    overflow: hidden !important;
    overscroll-behavior: none;
  }
}

/* Compact laptop screens may move the whole overlay, never the form card. */
@media (min-width: 769px) and (min-height: 720px) and (max-height: 799px) {
  .modal,
  .ssa-modal,
  .ig-modal,
  .iim-modal,
  .ima-modal {
    align-items: start !important;
    overflow-y: auto !important;
  }
}

/* Very short desktop/laptop viewports: scroll the overlay, never the form card. */
@media (min-width: 769px) and (max-height: 719px) {
  .modal,
  .ssa-modal,
  .ig-modal,
  .iim-modal,
  .ima-modal {
    align-items: start !important;
    overflow-y: auto !important;
    padding-block: 12px !important;
  }

  .modal__dialog,
  .ssa-modal__dialog,
  .ig-modal__dialog,
  .iim-modal__dialog,
  .ima-modal__dialog {
    max-height: none !important;
    overflow: visible !important;
    padding: 22px 26px !important;
  }
}

/* Mobile keeps safe scrolling while improving legibility and touch targets. */
@media (max-width: 768px) {
  body {
    font-size: .96rem;
  }

  .modal,
  .ssa-modal,
  .ig-modal,
  .iim-modal,
  .ima-modal {
    align-items: start !important;
    overflow-y: auto !important;
    padding: 8px !important;
  }

  .modal__dialog,
  .ssa-modal__dialog,
  .ig-modal__dialog,
  .iim-modal__dialog,
  .ima-modal__dialog {
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 22px 16px !important;
    border-radius: 19px !important;
  }

  #growth-modal {
    width: calc(100% - 12px) !important;
    max-height: calc(100dvh - 12px) !important;
  }

  #growth-modal .modal__body {
    max-height: calc(100dvh - 72px) !important;
    overflow-y: auto !important;
  }

  .field input,
  .field select,
  .field textarea,
  .form-grid input,
  .form-grid select,
  .form-grid textarea,
  .ssa-form-grid input,
  .ssa-form-grid select,
  .ssa-form-grid textarea {
    font-size: 16px !important;
  }
}