/* Shane Pope Insurance Services: shared styles.
   Page sections keep the inline styles from the approved designs so they render exactly as designed.
   This file holds only what is shared or needs a state (focus, selected, hidden, small screens). */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: #FFFFFF;
  font-family: 'Noto Sans', system-ui, sans-serif;
  color: #1F326D;
  font-size: 17px;
  line-height: 1.6;
  overflow-wrap: break-word;
}
a { color: #1A7A80; }
a:hover { color: #1F326D; }
input, select, textarea, button { font: inherit; }
img { max-width: 100%; height: auto; }
::placeholder { color: #56628A; opacity: 1; }
[hidden] { display: none !important; }

/* Keyboard focus */
:focus-visible { outline: 3px solid #1A7A80; outline-offset: 2px; }
.on-navy :focus-visible, footer :focus-visible { outline-color: #FFFFFF; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 10; background: #FFFFFF; color: #1F326D; padding: 12px 16px; font-weight: 600; }
.skip:focus { left: 8px; top: 8px; }

/* Coverage Check questions */
.cc-q { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cc-q legend { font-weight: 700; font-size: 18px; margin-bottom: 12px; padding: 0; }
.cc-opts { display: flex; flex-wrap: wrap; gap: 10px; }

/* Single-choice pills */
.chip {
  min-height: 44px; padding: 8px 18px; border-radius: 999px;
  border: 2px solid #A3A9C4; background: #FFFFFF; color: #1F326D;
  font-weight: 600; font-size: 16px; cursor: pointer;
}
.chip--lg { min-height: 48px; padding: 10px 22px; font-size: 17px; }
.chip[aria-pressed="true"] { border-color: #C4513B; background: #C4513B; color: #FFFFFF; }

/* Check-all-that-apply toggles */
.toggle {
  min-height: 44px; padding: 8px 18px; border-radius: 10px;
  border: 2px solid #A3A9C4; background: #FFFFFF; color: #1F326D;
  font-weight: 600; font-size: 16px; cursor: pointer;
}
.toggle[aria-pressed="true"] { border-color: #C4513B; background: #FFEDE8; }
.toggle--removable[aria-pressed="false"] { color: #56628A; text-decoration: line-through; }

/* Forms */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin: 0; font-size: 15px; font-weight: 600; color: #A33A26; }
.form-success { display: flex; flex-direction: column; gap: 8px; font-size: 18px; }
.form-success:focus { outline: none; }
.form-success strong { font-size: 22px; font-weight: 700; }
.form-success p { margin: 0; color: #46557F; }
button[disabled] { opacity: 0.7; cursor: default; }

/* Phones: 16px form text stops iOS from zooming in when a field is tapped */
@media (max-width: 600px) {
  input, select, textarea { font-size: 16px; }
  /* The designs were drawn at desktop width. On phones the 44-52px page headline filled the whole first
     screen, so it steps down to 36px. Delete this line to use the desktop size everywhere. */
  h1 { font-size: 36px !important; }
}