/* 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; }

/* Text for screen readers only: read aloud, never shown */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* 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; }
/* Questions appear one at a time (js/site.js). The margin keeps a newly shown question clear of the phone shortcut bar. */
.cc-q { scroll-margin-bottom: 84px; scroll-margin-top: 16px; }
/* After the last answer the page scrolls the results box to the top of the screen, with a little air above it. */
#cc-box { scroll-margin-top: 16px; }
@keyframes cc-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) { .cc-q { animation: cc-in 0.25s ease-out; } }
.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 #868DB0; 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 #868DB0; 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; }
}

/* Call / Text menu (all screen sizes). .call-text wraps the navy top bar's phone link and its own menu;
   .call-text-menu is the menu look, also used by the shared pop-up menu just below. */
.call-text { position: relative; display: flex; }
.call-text-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  display: flex; flex-direction: column; gap: 8px; padding: 12px; min-width: 230px;
  background: #FFFFFF; border: 1px solid #EADFD6; border-radius: 12px;
  box-shadow: 0 6px 24px rgba(31, 50, 109, 0.18);
}
.call-text-menu a {
  display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px;
  border-radius: 8px; background: #1F326D; color: #FFFFFF;
  font-weight: 600; font-size: 16px; text-decoration: none; white-space: nowrap;
}
.call-text-menu a:focus-visible { outline-color: #1A7A80; }
/* The shared menu for phone numbers inside page text. js/site.js sets its left and top to sit under the tapped link. */
.call-text-pop { top: 0; left: 0; }

/* Used by the phone layout below; both do nothing on larger screens */
.phone-bar, .phone-expand { display: none; }

/* ==========================================================================================
   PHONE layout (added November 12, 2026 as a trial; Shane approved keeping all four parts the same day).
   Phones only: nothing here applies above 600px wide.
   Four independent parts. To undo one, delete its part. To undo everything, delete this whole
   block; the leftover markup (class="swipe-row", the phone-bar nav in layout.html and the
   phone-expand button in index.html) then does nothing and can stay or be removed.
   ========================================================================================== */
@media (max-width: 600px) {

  /* --- Part 1: tighter spacing. The designs' section gaps are sized for a desktop. --- */
  #main [style*="padding: 88px 24px;"], #main [style$="padding: 88px 24px"] { padding-top: 48px !important; padding-bottom: 48px !important; }
  #main [style*="padding: 80px 24px;"], #main [style$="padding: 80px 24px"] { padding-top: 44px !important; padding-bottom: 44px !important; }
  #main [style*="padding: 72px 24px;"], #main [style$="padding: 72px 24px"] { padding-top: 40px !important; padding-bottom: 40px !important; }
  #main [style*="padding: 64px 24px;"], #main [style$="padding: 64px 24px"] { padding-top: 40px !important; padding-bottom: 40px !important; }
  #main [style*="padding: 88px 24px 104px"] { padding-top: 48px !important; padding-bottom: 56px !important; }
  #main [style*="padding: 80px 24px 88px"]  { padding-top: 44px !important; padding-bottom: 48px !important; }
  #main [style*="padding: 80px 24px 0"]     { padding-top: 44px !important; padding-bottom: 0 !important; }
  #main [style*="padding: 72px 24px 32px"]  { padding-top: 40px !important; padding-bottom: 20px !important; }
  #main [style*="padding: 64px 24px 56px"]  { padding-top: 36px !important; padding-bottom: 32px !important; }
  #main [style*="padding: 64px 24px 48px"]  { padding-top: 36px !important; padding-bottom: 28px !important; }
  #main [style*="padding: 56px 24px 88px"]  { padding-top: 36px !important; padding-bottom: 48px !important; }
  #main [style*="padding: 48px 24px 88px"]  { padding-top: 32px !important; padding-bottom: 48px !important; }
  #main [style*="padding: 48px 24px 56px"]  { padding-top: 28px !important; padding-bottom: 32px !important; }
  #main [style*="padding: 32px 24px 88px"]  { padding-top: 24px !important; padding-bottom: 48px !important; }
  #main [style*="padding: 0 24px 88px"]     { padding-bottom: 48px !important; }
  /* boxes and cards */
  #main [style*="padding: 56px 48px;"] { padding: 32px 24px !important; }
  #main [style*="padding: 48px;"] { padding: 28px 24px !important; }
  #main [style*="padding: 40px;"], #main [style*="padding: 36px;"], #main [style*="padding: 32px;"] { padding: 24px !important; }
  /* space between stacked pieces */
  #main [style*="gap: 48px"], #main [style*="gap: 40px"] { gap: 28px !important; }
  #main [style*="gap: 36px"], #main [style*="gap: 32px"] { gap: 24px !important; }
  #main [style*="margin-bottom: 48px"], #main [style*="margin: 0 0 48px"] { margin-bottom: 28px !important; }
  #main [style*="margin-bottom: 40px"], #main [style*="margin: 0 0 40px"] { margin-bottom: 24px !important; }
  #main [style*="margin-bottom: 32px"] { margin-bottom: 20px !important; }
  footer [style*="padding: 56px 24px 32px"] { padding-top: 40px !important; padding-bottom: 24px !important; }

  /* --- Part 2: swipe rows. Cards sit side by side and are swiped sideways instead of stacking. --- */
  .swipe-row {
    display: flex !important; gap: 14px !important;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    margin-right: -24px; padding-right: 24px; padding-bottom: 6px; scroll-padding-left: 0;
  }
  .swipe-row > * { flex: 0 0 84%; scroll-snap-align: start; }

  /* --- Part 3: contact form starts closed behind a "Send a message" button (opened by js/site.js). --- */
  .phone-collapsed { display: none !important; }
  .phone-expand:not([hidden]) {
    display: block; width: 100%; min-height: 52px; padding: 14px 22px; border-radius: 8px;
    background: #FFFFFF; color: #1F326D; border: 2px solid #1F326D; font-weight: 600; font-size: 18px; cursor: pointer;
  }

  /* --- Part 4: shortcut bar fixed to the bottom of the screen. Hidden while a form field is in use. --- */
  .phone-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; gap: 10px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    background: #FFFFFF; border-top: 1px solid #EADFD6;
  }
  .phone-bar > a {
    flex: 1 1 0; display: flex; align-items: center; justify-content: center; min-height: 44px;
    border-radius: 8px; font-weight: 600; font-size: 16px; text-decoration: none;
  }
  .phone-bar > a.phone-bar-primary { background: #C4513B; color: #FFFFFF; }
  .phone-bar > a.phone-bar-secondary { background: #FFFFFF; color: #1F326D; border: 2px solid #1F326D; }
  .phone-bar > a.phone-bar-secondary[aria-expanded="true"] { background: #1F326D; color: #FFFFFF; }
  /* the Call / Text choices that open above the bar */
  .phone-bar-menu {
    position: absolute; left: 12px; right: 12px; bottom: calc(100% + 8px);
    display: flex; flex-direction: column; gap: 8px; padding: 12px;
    background: #FFFFFF; border: 1px solid #EADFD6; border-radius: 12px;
    box-shadow: 0 6px 24px rgba(31, 50, 109, 0.18);
  }
  .phone-bar-menu a {
    display: flex; align-items: center; justify-content: center; min-height: 48px;
    border-radius: 8px; background: #1F326D; color: #FFFFFF;
    font-weight: 600; font-size: 17px; text-decoration: none;
  }
  footer { padding-bottom: 62px; } /* keeps the bar from covering the end of the footer */
  body:has(input:focus, textarea:focus, select:focus) .phone-bar { display: none; }
}