/* ============================================================
   Fran Kelly Professional Liability — Mobile Styles
   Overrides desktop.css at max-width: 860px
   ============================================================ */

/* Global overflow fix */
html, body {
  overflow-x: hidden;
  width: 100%;
}

@media (max-width: 860px) {

  * { max-width: 100%; box-sizing: border-box; }

  /* ── Nav ── */
  nav { position: relative; padding: 0 4%; }
  .nav-links { display: none; }
  .nav-links.mobile-open {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: 68px; left: 0; right: 0;
    background: var(--white); border-bottom: 1px solid var(--border);
    padding: 8px 0; box-shadow: 0 8px 24px rgba(26,42,58,.1); z-index: 199;
  }
  .nav-links.mobile-open > li > a,
  .nav-links.mobile-open > li > span { padding: 12px 5%; font-size: 15px; color: var(--navy); }
  .nav-links.mobile-open .dropdown {
    display: block; position: static; box-shadow: none;
    border: none; border-top: 1px solid var(--border);
    padding: 0; border-radius: 0; min-width: 0;
  }
  .nav-links.mobile-open .dropdown a { padding: 10px 7%; font-size: 14px; }
  .nav-links.mobile-open > li > span.has-arrow::after { float: right; }
  .nav-links.mobile-open .nav-cta { margin: 8px 5%; border-radius: 4px; text-align: center; }
  .nav-burger {
    display: flex; flex-direction: column; justify-content: center;
    gap: 5px; background: none; border: none; cursor: pointer; padding: 8px;
  }
  .nav-burger span { display: block; width: 22px; height: 2px; background: var(--navy); border-radius: 2px; transition: all .2s; }
  .nav-burger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-burger.active span:nth-child(2) { opacity: 0; }
  .nav-burger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* ── Page Header ── */
  .page-header { padding: 36px 4% 32px; width: 100%; }
  .page-header h1 { font-size: 26px; word-break: break-word; }
  .page-header p { font-size: 14px; max-width: 100%; }

  /* ── Container ── */
  .fk-container { padding: 40px 4%; width: 100%; overflow-x: hidden; }

  /* ── Hero ── */
  .hero { grid-template-columns: 1fr; gap: 36px; padding: 48px 4% 44px; width: 100%; }
  .hero-left p { max-width: 100%; font-size: 15px; }
  .hero-actions { flex-direction: column; gap: 12px; }
  .btn-hero-primary, .btn-hero-secondary { text-align: center; width: 100%; display: block; }
  .trust-stat { padding: 14px 16px; gap: 14px; }
  .trust-stat .number { font-size: 22px; min-width: 60px; }
  .trust-stat .desc { font-size: 13px; }

  /* ── Intro Band ── */
  .intro-band { padding: 32px 4%; }
  .intro-band p { font-size: 15px; }

  /* ── Home Services ── */
  .home-services { padding: 44px 4%; }
  .services-grid { grid-template-columns: 1fr; gap: 14px; }
  .service-card { padding: 20px; }

  /* ── Why Section ── */
  .why-section { grid-template-columns: 1fr; gap: 32px; padding: 44px 4%; }
  .why-right { padding: 28px 20px; }

  /* ── CTA Row ── */
  .cta-row { grid-template-columns: 1fr; padding: 44px 4%; gap: 16px; }

  /* ── Service Detail ── */
  .service-detail { grid-template-columns: 1fr; gap: 32px; width: 100%; overflow: hidden; }
  /* Main content first */
  .service-detail > div:first-child { order: 1; width: 100%; overflow-wrap: break-word; word-break: break-word; }
  /* Sidebar BELOW content */
  .service-sidebar { order: 2; width: 100%; }
  .sidebar-nav { width: 100%; }
  .sidebar-nav li a, .sidebar-nav li span { font-size: 14px; padding: 12px 16px; }

  /* ── Coverage Grid ── */
  .coverage-grid { grid-template-columns: 1fr; gap: 10px; }

  /* ── Claim Examples ── */
  .claim-example { padding: 16px; }

  /* ── Action Row ── */
  .action-row { flex-direction: column; gap: 12px; }
  .action-row .btn-primary, .action-row .btn-outline { text-align: center; width: 100%; display: block; }

  /* ── Contact ── */
  .contact-grid { grid-template-columns: 1fr; gap: 24px; }
  .contact-person { padding: 20px; }

  /* ── Applications ── */
  .app-list li { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 14px; }
  .app-list a { align-self: flex-start; }
  .app-name { font-size: 13.5px; line-height: 1.5; }

  /* ── FAQs ── */
  .faq-q { font-size: 13.5px; padding: 14px 16px; }
  .faq-a { padding: 0 16px 14px; font-size: 13.5px; }

  /* ── Text ── */
  .prose p { font-size: 14.5px; }
  .callout { font-size: 13.5px; }

  /* ── Footer ── */
  footer { grid-template-columns: 1fr; gap: 28px; padding: 40px 4% 28px; }
  .footer-bottom { flex-direction: column; gap: 6px; padding: 16px 4%; font-size: 11px; }
}

/* ── Small phones ≤ 480px ── */
@media (max-width: 480px) {
  .hero { padding: 40px 4% 36px; }
  .hero-left h1 { font-size: 24px; }
  .section-title { font-size: 20px; }
  .trust-stat { flex-direction: row; align-items: center; }
  .trust-stat .number { font-size: 20px; min-width: 52px; }
  .sidebar-card { padding: 16px; }
  .sidebar-card p { font-size: 13px; }
  .section-label { font-size: 10px; }
  .contact-avatar { width: 40px; height: 40px; font-size: 14px; }
  .why-list .text strong { font-size: 14px; }
  .why-list .text p { font-size: 13px; }
  .sponsor-list li { font-size: 12.5px; }
  .cta-card { padding: 24px 16px; }
  .cta-card h3 { font-size: 15px; }
  .cta-card p { font-size: 13px; }
  .app-section h2 { font-size: 16px; }
  footer p, footer li { font-size: 13px; }
}

/* ============================================================
   FK NAV BAR — Mobile Styles
   ============================================================ */

@media (max-width: 860px) {

  /* Hide desktop links, show burger */
  .fk-links {
    display: none !important;
  }

  .fk-burger {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
  }

  .fk-burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: #ffffff;
    border-radius: 2px;
    transition: all 0.25s;
  }

  /* Burger open state — X */
  .fk-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .fk-burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .fk-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Nav height on mobile */
  .fk-nav-inner {
    height: 64px;
  }

  /* Slightly smaller logo on mobile */
  .fk-logo img {
    height: 38px;
  }

  /* Mobile dropdown panel */
  .fk-mob {
    display: none;
    flex-direction: column;
    background: #1a2a3a;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 8px 0 16px;
    width: 100%;
  }

  .fk-mob.open {
    display: flex !important;
  }

  .fk-mob a,
  .fk-mob-svc {
    display: block;
    padding: 12px 5%;
    font-size: 15px;
    color: #ffffff !important;
    text-decoration: none;
    cursor: pointer;
    font-family: 'DM Sans', Arial, sans-serif;
    transition: color 0.15s;
  }

  .fk-mob a:hover,
  .fk-mob-svc:hover {
    color: #d4bc88 !important;
  }

  /* Mobile services submenu */
  .fk-mob-sub {
    display: none;
    flex-direction: column;
    background: rgba(0,0,0,0.2);
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }

  .fk-mob-sub.open {
    display: flex !important;
  }

  .fk-mob-sub a {
    padding: 10px 8%;
    font-size: 14px;
    color: rgba(255,255,255,0.75) !important;
  }

  .fk-mob-sub a:hover {
    color: #ffffff !important;
  }

  /* Mobile CTA button */
  .fk-mob-cta {
    background: #b59a5e !important;
    color: #1a2a3a !important;
    font-weight: 600 !important;
    border-radius: 4px;
    margin: 8px 5% 0;
    text-align: center;
    padding: 13px 5% !important;
  }

  .fk-mob-cta:hover {
    background: #d4bc88 !important;
    color: #1a2a3a !important;
  }
}

/* ============================================================
   FK FOOTER — Mobile Styles
   ============================================================ */

@media (max-width: 860px) {
  .fk-footer-main {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
    padding: 40px 4% 32px !important;
  }
  .fk-footer-brand {
    grid-column: 1 / -1 !important;
  }
  .fk-footer-brand p {
    max-width: 100% !important;
  }
  .fk-footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 8px !important;
    padding: 16px 4% !important;
  }
  .fk-footer-sponsors {
    padding: 20px 4% !important;
  }
  .fk-sponsor-links {
    gap: 4px 14px !important;
  }
}

@media (max-width: 480px) {
  .fk-footer-main {
    grid-template-columns: 1fr !important;
  }
}