/*
 * D-311 (owner, 6 Nov: "check the mobile view of the website; there should be no negative spaces, fix them"): one tighter
 * vertical rhythm for phones. A crawl of 27 pages at 390px found 120-170px empty bands between almost every pair of
 * sections: one section's bottom padding plus the next one's top padding. On phones (<= 767px) every section's top and
 * bottom padding is now 32px (so ~64px between two sections) and a heading block sits 22px above its content.
 * Loaded last on every page (layouts/partials/head), phones only; tablets and desktop are unchanged.
 * OLD: --cy-section-y 48px, glass sections 44px, the about / reviews / content sections and .section-padding at their own
 * larger values; the home sections up to 56px.
 */
@media (max-width: 767px) {
  :root { --cy-section-y: 32px; --cy-section-head: 22px; }
  /* glass product and home sections */
  html body .pg .ps { padding-block: 28px !important; }
  html body .pg .pg-faq .cy-faq { padding-block: 28px !important; }
  /* the older templates and the page-specific sections */
  html body .section-padding { padding-top: 32px !important; padding-bottom: 32px !important; }
  html body :is(.cr-section, .ab-section, .cs-section, .ct-section, .ca-section, .pr-section) { padding-top: 32px !important; padding-bottom: 32px !important; }
  html body .cr-section { padding-bottom: 0 !important; }
  html body .cr-hero { padding-bottom: 24px !important; }
  /* the home page's glass sections */
  html body .ha { padding-block: 36px !important; }
  html body .vg { padding-top: 28px !important; }
  html body .vg__foot { margin-top: 16px !important; padding-top: 44px !important; }
  /* Careers: the openings heading had flex-basis 420px (meant for the desktop row), which stretched it to 420px when stacked */
  html body .career-openings-head .compare-heading { flex: none !important; }
}

/* D-311: the sections that set their own (larger) spacing */
@media (max-width: 767px) {
  html body .homepage-figma-bg :is(.doctor-trust-section, .fraud-alert-section, .protection-decisions-section, .doctor-calculators-section, .insurance-partners-section, .voices-trust-section) { padding-top: 32px !important; padding-bottom: 32px !important; }
  html body .pg :is(.dark, .ps.dark) { padding-top: 36px !important; padding-bottom: 36px !important; margin-top: 0 !important; }
  html body .pg .pg-close { padding-top: 40px !important; padding-bottom: 36px !important; }
  html body .pi-checklist-page .pi-checklist-features-shell { padding-top: 0 !important; padding-bottom: 0 !important; }
  html body :is(.pr-band, .pr-media) { padding-top: 32px !important; padding-bottom: 32px !important; }
  html body .ca-help-wrap { padding-bottom: 24px !important; }
}
@media (max-width: 767px) {
  /* home: the glass-theme rule for these sections is .homepage-figma-bg.hg (stronger), so match it */
  html body .homepage-figma-bg.hg :is(.doctor-trust-section, .fraud-alert-section, .protection-decisions-section, .doctor-calculators-section, .insurance-partners-section) { padding-top: 28px !important; padding-bottom: 28px !important; margin-top: 0 !important; }
  html body .homepage-figma-bg.hg .doctor-ecosystem-banner { padding-bottom: 8px !important; }
  /* product heroes: less under the steps strip */
  html body .pg .in > .hero { padding-bottom: 4px !important; }
  /* reviews: the stories start closer under the hero */
  html body :is(.cr-stories, .cr-videos) { padding-top: 16px !important; }
  /* the Trust Center's own large section padding (100px) */
  html body .tc-scope :is(.section, .impact, .advisory, .ending, .community, .utility-section, .playbook) { padding-top: 40px !important; padding-bottom: 40px !important; }
  html body .tc-scope .hero { padding-top: 28px !important; padding-bottom: 36px !important; }
  html body .tc-scope .strip { padding-top: 18px !important; padding-bottom: 18px !important; }
  html body .tc-scope .head { margin-bottom: 24px !important; }
  html body .tc-scope .advisory { padding-top: 0 !important; }
}

/* D-315 (council UX-13): iPhone Safari zooms the whole page when a field under 16px gets focus (and does not zoom back), which
   breaks the layout mid-form. iOS only (-webkit-touch-callout exists only there), so Android and desktop keep their sizes. */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 1024px) {
    html body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]), select, textarea) { font-size: 16px !important; }
  }
}

/* D-315 (council UX-07): on phones the cookie bar was 176px tall (25px padding, the text and the buttons on separate stacked
   columns) and, with the app bar, the floaters and the header, covered up to half the screen. Same text, compact: tighter
   padding and the two buttons side by side at full width. The text stays 14px (owner, D-219: one body size). */
@media (max-width: 767.98px) {
  html body .cookie-banner { padding: 10px 4px !important; }
  html body .cookie-banner .row { row-gap: 8px; align-items: center; }
  html body .cookie-banner .d-flex { gap: 8px; padding-right: 0 !important; }
  html body .cookie-banner .cookies-btn { flex: 1 1 0; margin: 0 !important; padding: 6px 12px !important; min-height: 36px; }
}

/* D-316 (council UX-29, responsive sweep): the always-on small text was 10.5px. The compliance line is 12px; the app bar
   labels 11px (12px would not fit "Solutions" in a fifth of a 320px screen). */
@media (max-width: 767.98px) {
  html body .cy-compliance { font-size: 12px !important; line-height: 16px !important; }
  html body .cy-appbar__it { font-size: 11px !important; line-height: 13px !important; }
}

/* D-316 (responsive sweep): justified paragraphs (home "Why doctors choose CoverYou", "What is CoverYou", claims intro; owner's
   choice for desktop, D-220/221) opened wide gaps between words on narrow phones ("servicing,      renewals      and"). Under
   576px they are centred lines instead (as before D-221); tablets and desktop stay justified. */
@media (max-width: 575.98px) {
  html body .homepage-figma-bg.hg .doctor-trust-section .sec-intro p,
  html body .hg :is(#what-is-coveryou, #claims) .ps__intro p { text-align: center !important; }
}

/* D-316 (responsive sweep at 320-430px; council UX-29 "crowded Health form at 390"): in the hero quote cards, two fields side
   by side were ~130px each, so placeholders were cut ("Mobile Numl", "Email Addre"), and the six member buttons in one row
   ran their names together ("DaughterMother"). Under 420px the fields stack in one column and members sit 3 x 2. Short
   pairs (Male / Female, First / Middle / Last) stay side by side. Fields, names and order are unchanged. */
@media (max-width: 419.98px) {
  html body .ph-card :is(.pl-form__fields, .hp-form__fields, .pdl-form__fields, form.quote-form, .form-group-row, .rn-form) { grid-template-columns: minmax(0, 1fr) !important; }
  html body .ph-card :is(.pl-form__fields, .hp-form__fields, .pdl-form__fields, form.quote-form, .form-group-row, .rn-form) > * { grid-column: 1 / -1 !important; }
  html body .ph-card .pdl-members { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; row-gap: 10px !important; }
  html body .ph-card .pdl-member { font-size: 12px !important; }
}