/* JKFPL mobile layer — media-query-only. Nothing here applies above 900px, so the
   desktop design is untouched. Selectors are element/attribute based; no new classes. */

@media (max-width: 1010px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  img, video, canvas, svg { max-width: 100%; }

  /* Desktop nav is replaced by the drawer in mobile-nav.js */
  header nav { display: none !important; }
  header > div { padding: 10px 16px !important; gap: 10px !important; grid-template-columns: 1fr !important; }
  header img { width: 42px !important; height: 42px !important; }
  header a[href="#top"] > span > span:first-child,
  header a[href="index.html"] > span > span:first-child { font-size: 17px !important; }
  header a[href="#top"] > span > span:last-child,
  header a[href="index.html"] > span > span:last-child { font-size: 10.5px !important; letter-spacing: .05em !important; }

  /* Utility top bar */
  body > div > div:first-child > div:first-child { padding: 7px 16px !important; font-size: 12px !important; }
  a[href^="tel:"], a[href^="mailto:"] { display: inline-block; padding: 4px 0; }

}

@media (max-width: 760px) {
  /* Section rhythm */
  section > div,
  footer > div { padding-left: 16px !important; padding-right: 16px !important; }
  section { padding-top: 44px !important; padding-bottom: 44px !important; }

  /* Multi-column grids collapse */
  [style*="grid-template-columns: repeat"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1."],
  [style*="grid-template-columns: 1.1fr"],
  [style*="grid-template-columns: 1.2fr"],
  [style*="grid-template-columns: 1.3fr"],
  [style*="grid-template-columns: 1.4fr"],
  [style*="grid-template-columns: 1.5fr"],
  [style*="grid-template-columns: 1.6fr"],
  [style*="grid-template-columns: .9fr"],
  [style*="grid-template-columns: 0.9fr"],
  [style*="grid-template-columns: 2fr"],
  [style*="grid-template-columns: minmax"] { grid-template-columns: 1fr !important; }
  #jk-mnav [style*="grid"] { grid-template-columns: none !important; }

  /* Wide fixed blocks */
  [style*="min-width: 2"], [style*="min-width: 3"], [style*="min-width: 4"],
  [style*="min-width: 5"], [style*="min-width: 6"] { min-width: 0 !important; }

  /* Tables scroll instead of overflowing */
  table { display: block !important; width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  table th, table td { white-space: nowrap; }

  /* Typography */
  h1 { font-size: clamp(27px, 8.4vw, 38px) !important; line-height: 1.08 !important; }
  h2 { font-size: clamp(23px, 6.8vw, 31px) !important; line-height: 1.14 !important; }
  h3 { font-size: clamp(18px, 5.2vw, 22px) !important; line-height: 1.22 !important; }
  p, li { text-wrap: pretty; }

  /* Touch targets */
  button, a[data-cta], input[type="submit"] { min-height: 44px; }
  button[aria-label="Go to slide"] { position: relative; }
  button[aria-label="Go to slide"]::after {
    content: ""; position: absolute; top: -18px; bottom: -18px; left: -7px; right: -7px;
  }
  input, select, textarea { font-size: 16px !important; min-height: 46px; }
  textarea { min-height: 92px; }

  /* Hero */
  [data-hero-stage] { height: auto !important; min-height: 0 !important; }
  [data-hero-img] { width: 100% !important; opacity: .5; }
  [data-hero-wash] {
    background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.94) 34%, rgba(255,255,255,.9) 70%, rgba(255,255,255,.94) 100%) !important;
  }
  [data-hero-copy] { max-width: 100% !important; }
  [data-hero-stage] > div:has([data-hero-img]) { position: relative !important; }
  [data-hero-stage] > div:has([data-hero-img])[style*="opacity: 0"] { display: none !important; }
  [data-hero-stage] > div:has([data-hero-img]) > div:last-child { padding: 34px 16px 68px !important; height: auto !important; }


  /* Marquees stay put but never widen the page */
  [style*="animation: jkMarquee"] { animation-duration: 34s !important; }
}

@media (max-width: 560px) {
  section { padding-top: 36px !important; padding-bottom: 36px !important; }
  [style*="border-radius: 2"], [style*="border-radius: 3"] { border-radius: 18px !important; }
  [style*="white-space: nowrap"]:not(table *):not([data-keep-nowrap]) { white-space: normal !important; }
  [style*="letter-spacing: .0"] { word-break: break-word; }
  [style*="font-size: clamp"] { max-width: 100%; }
}

@media (max-width: 380px) {
  header a[href="#top"] > span > span:last-child,
  header a[href="index.html"] > span > span:last-child { display: none !important; }
  section > div, footer > div { padding-left: 13px !important; padding-right: 13px !important; }
}

/* Motion + performance on small screens */
@media (max-width: 760px) {
  [data-hero-img] { transition: none !important; transform: none !important; }
  [style*="backdrop-filter"] { backdrop-filter: none !important; background: rgba(255,255,255,.98) !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* ---- Site footer (shared across all pages) ---- */
[data-site-footer] [data-foot-more] summary { list-style: none; }
[data-site-footer] [data-foot-more] summary::-webkit-details-marker { display: none; }
[data-site-footer] [data-foot-more][open] [data-foot-caret] { transform: rotate(180deg); }
[data-site-footer] a { text-decoration: none; }
[data-site-footer] a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1100px) {
  [data-site-footer] [data-foot-top] { grid-template-columns: 1fr !important; gap: 38px !important; }
}
@media (max-width: 560px) {
  [data-site-footer] [data-foot-cols] { grid-template-columns: 1fr 1fr !important; gap: 26px 18px !important; }
  [data-site-footer] [data-foot-legal] { gap: 4px 14px !important; }
}
@media (max-width: 380px) {
  [data-site-footer] [data-foot-cols] { grid-template-columns: 1fr !important; }
}
[data-site-footer] a[aria-label="Facebook"]:hover { background: #1877F2 !important; border-color: #1877F2 !important; transform: translateY(-3px); }
[data-site-footer] a[aria-label="Instagram"]:hover { background: #E1306C !important; border-color: #E1306C !important; transform: translateY(-3px); }
[data-site-footer] a[aria-label="LinkedIn"]:hover { background: #0A66C2 !important; border-color: #0A66C2 !important; transform: translateY(-3px); }
[data-site-footer] a[aria-label]:hover { text-decoration: none !important; }

/* ---- Products mega-menu ---- */
[data-mega] a[data-mega-item]:hover { background: #F5FAF7; }
[data-mega] a[data-mega-item]:hover [data-mega-ic] { background: #fff; }
[data-mega] a:hover { text-decoration: none; }
[data-mega-foot] a[href]:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1180px) {
  /* anchor the panel to the sticky header instead of the nav item so it can never clip off-screen.
     Keep all three groups on one row — the panel is full-bleed here, so there is room. */
  [data-mega-wrap] { position: static !important; }
  [data-mega] { left: 24px !important; right: 24px !important; width: auto !important; margin-left: 0 !important; padding: 20px 16px 16px !important; }
  [data-mega] [data-mega-item] { padding: 10px 9px !important; }
  [data-mega-grid] { gap: 18px 10px !important; }
}

[data-nav-item] { position: relative; }
[data-nav-item]:hover [data-nav-menu], [data-nav-item]:focus-within [data-nav-menu] { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; }
[data-nav-item]:hover [data-nav-caret] { transform: rotate(180deg); }

/* ---- Section dropdowns (About / Investor / Support / Branches / Careers) ---- */
[data-drop] a[data-drop-item]:hover { background: #F5FAF7; }
[data-drop] a[data-drop-item]:hover [data-drop-ic] { background: #fff; }
[data-drop] a:hover { text-decoration: none; }
@media (max-width: 1180px) {
  [data-drop] { max-width: calc(100vw - 48px) !important; }
}

[data-ql]:hover { background: rgba(23,164,78,.16) !important; border-color: rgba(127,224,168,.5) !important; color: #fff !important; text-decoration: none !important; }
@media (max-width: 680px) { [data-quicklinks="1"] a[data-ql] { font-size: 13px; padding: 8px 13px; } }