/* visaskorea.com — mobile responsive overrides */
/* Loaded after main design CSS to override inline styles */

/* === COLOR TONE-DOWN ===
   Soften the design's strong red accent (#C8102E) to a more harmonious burgundy.
   Override CSS variables AND inline styles where they bleed through.
*/
:root {
  --vk-red: #A33344 !important;
  --vk-red-soft: #FAEDF0 !important;
}
/* Inline styles using #C8102E or rgba red — replace via attribute selectors */
[style*="background:#C8102E"], [style*="background: #C8102E"],
[style*="background:#c8102e"], [style*="background: #c8102e"] {
  background: #A33344 !important;
}
[style*="color:#C8102E"], [style*="color: #C8102E"],
[style*="color:#c8102e"], [style*="color: #c8102e"] {
  color: #A33344 !important;
}
[style*="background:#FDECEE"], [style*="background: #FDECEE"] {
  background: #FAEDF0 !important;
}
.vk-btn-accent { background: #A33344 !important; border-color: #A33344 !important; }
.vk-btn-accent:hover { background: #802635 !important; border-color: #802635 !important; }
.vk-chip-red { background: #FAEDF0 !important; color: #A33344 !important; }

/* Global fixes (all viewports) — undo WP Avada legacy styles that leak through */
.vk-btn,
.vk-site-header a,
footer a,
a.vk-btn-primary, a.vk-btn-accent, a.vk-btn-blue, a.vk-btn-ghost {
  text-decoration: none !important;
  border-bottom: none !important;
}
.vk-btn::after, .vk-btn::before { content: none !important; }
/* No bullets / list markers inside our cards */
.vk-card ul, .vk-megamenu ul, footer ul { list-style: none !important; }
/* WP Avada often adds underline on hover */
a.vk-mm-link:hover, a.vk-btn:hover { text-decoration: none !important; }

/* H1 hero subline — make sure it doesn't have inline strikethrough */
h1, h1 *, h2, h2 *, h3, h3 * {
  text-decoration: none !important;
}

@media (max-width: 1024px) {
  /* Hide mega-menu on tablet/mobile */
  .vk-nav-item > .vk-megamenu { display: none !important; }
}

/* ==========================================================================
   MOBILE (≤768px)
   ========================================================================== */
@media (max-width: 768px) {

  /* Body padding */
  body { padding-bottom: 0; }

  /* ----- HEADER ----- */
  .vk-site-header > div:nth-child(2) > div:nth-child(2) {
    padding: 14px 16px !important;
  }
  /* Top utility bar — collapse to single line */
  .vk-site-header > div:first-child > div {
    padding: 0 16px !important;
    font-size: 11px !important;
    flex-wrap: wrap !important;
  }

  /* Main nav — hide entirely (use hamburger instead) */
  .vk-site-header nav {
    display: none !important;
  }
  /* Show hamburger button on mobile */
  .vk-mobile-menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    margin-left: auto;
    padding: 0;
    flex-shrink: 0;
  }
  .vk-mobile-menu-toggle::before {
    content: "≡";
    font-size: 22px;
    color: #0B1F3A;
    line-height: 1;
  }
  /* Move CTA button to compact */
  .vk-site-header a[href="/contact-us/"][style*="margin-left:auto"] {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }

  /* ----- CONTAINERS ----- */
  .vk-container,
  [class*="vk-container"],
  [style*="max-width:1200px"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* ----- HERO SECTIONS — STACK ----- */
  /* Any 2-column grid in hero/main becomes 1-column */
  [style*="grid-template-columns:1.05fr 1fr"],
  [style*="grid-template-columns: 1.05fr 1fr"],
  [style*="grid-template-columns:1fr 1.2fr"],
  [style*="grid-template-columns: 1fr 1.2fr"],
  [style*="grid-template-columns:1.5fr 1fr"],
  [style*="grid-template-columns: 1.5fr 1fr"],
  [style*="grid-template-columns:220px 1fr"],
  [style*="grid-template-columns: 220px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  /* Sticky CTA aside on detail pages — unstick on mobile */
  aside[style*="position:sticky"],
  aside[style*="position: sticky"] {
    position: static !important;
  }

  /* ----- TYPOGRAPHY ----- */
  /* Hero H1 — much smaller on mobile */
  h1[style*="font-size:56px"],
  h1[style*="font-size: 56px"] {
    font-size: 28px !important;
    line-height: 1.25 !important;
  }
  h1[style*="font-size:48px"],
  h1[style*="font-size: 48px"] {
    font-size: 26px !important;
    line-height: 1.25 !important;
  }
  h1[style*="font-size:44px"],
  h1[style*="font-size: 44px"] {
    font-size: 26px !important;
    line-height: 1.25 !important;
  }
  /* Subline (the blue smaller text) */
  h1 span[style*="font-size:30px"],
  h1 span[style*="font-size: 30px"] {
    font-size: 18px !important;
    display: block;
    margin-top: 6px;
  }
  /* H2 — smaller */
  h2[style*="font-size:38px"],
  h2[style*="font-size: 38px"],
  h2[style*="font-size:33px"],
  h2[style*="font-size: 33px"] {
    font-size: 24px !important;
    line-height: 1.3 !important;
  }
  h2[style*="font-size:28px"],
  h2[style*="font-size: 28px"] {
    font-size: 22px !important;
  }
  h2[style*="font-size:32px"] {
    font-size: 22px !important;
  }
  /* H3 — smaller */
  h3[style*="font-size:22px"],
  h3[style*="font-size:20px"],
  h3[style*="font-size:18px"] {
    font-size: 17px !important;
  }
  /* Hero p */
  p[style*="font-size:19px"],
  p[style*="font-size:18px"],
  p[style*="font-size:17px"],
  p[style*="font-size:16.5px"] {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }

  /* ----- SECTIONS PADDING ----- */
  section[style*="padding:64px 0"],
  section[style*="padding: 64px 0"] { padding: 36px 0 !important; }
  section[style*="padding:72px 0"],
  section[style*="padding: 72px 0"] { padding: 36px 0 !important; }
  section[style*="padding:88px 0"],
  section[style*="padding: 88px 0"] { padding: 40px 0 !important; }
  .vk-section { padding: 44px 0 !important; }

  /* ----- SERVICE CARDS GRID — 1 COLUMN ----- */
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  [style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns: repeat(2,1fr)"],
  [style*="grid-template-columns:repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  /* Auto-fit grids — make minmax smaller */
  [style*="grid-template-columns:repeat(auto-fit"] {
    grid-template-columns: 1fr !important;
  }

  /* ----- SUMMARY BOX (4 columns → 2) ----- */
  [style*="grid-template-columns:repeat(4,1fr)"][style*="padding:18px"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ----- TABLES — scrollable ----- */
  .vk-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    font-size: 13px !important;
  }
  .vk-table th, .vk-table td {
    padding: 8px 10px !important;
    white-space: normal;
  }

  /* ----- FOOTER ----- */
  footer > div > div:first-child {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding-bottom: 28px !important;
  }
  footer > div > div:last-child {
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* ----- HERO TRUST ELEMENTS ----- */
  /* The "Since 2018 / 4개 언어 / 전문 행정사" elements */
  [style*="display:flex;gap:22px;flex-wrap:wrap"] > div,
  [style*="display:flex;gap:14px;flex-wrap:wrap"] > div {
    border-right: none !important;
    padding-right: 0 !important;
  }

  /* ----- HERO IMAGE PLACEHOLDER ----- */
  /* Hide hero image placeholder on mobile to save space */
  .vk-ph[style*="height:460px"],
  .vk-ph[style*="height: 460px"] {
    height: 200px !important;
  }
  .vk-ph[style*="height:420px"] { height: 200px !important; }
  .vk-ph[style*="height:180px"] { height: 140px !important; }

  /* ----- BUTTONS ----- */
  .vk-btn-lg, .vk-btn {
    width: auto;
    text-align: center;
  }
  /* Hero CTA buttons — full width on mobile */
  section[style*="padding:72px 0"] .vk-btn-lg,
  section[style*="padding: 72px 0"] .vk-btn-lg {
    flex: 1;
    min-width: 140px;
  }

  /* ----- CONSULT FORM ----- */
  form[style*="padding:28px"] {
    padding: 18px !important;
  }
  form > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ----- BREADCRUMB ----- */
  nav[aria-label="Breadcrumb"] {
    font-size: 12px !important;
    overflow-x: auto;
    white-space: nowrap;
  }

  /* ----- CTA box at bottom ----- */
  div[style*="background:var(--vk-bg-tint)"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* TOC nav — horizontal scroll on mobile */
  nav[style*="position:sticky"] {
    position: static !important;
    border-left: none !important;
    padding-left: 0 !important;
    margin-bottom: 18px;
  }
  nav[style*="position:sticky"] ul {
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 8px !important;
  }
  nav[style*="position:sticky"] ul a {
    background: #F7F9FC !important;
    padding: 4px 10px !important;
    border-radius: 999px;
    font-size: 12px !important;
  }
}

/* Very small mobile (≤480px) extra adjustments */
@media (max-width: 480px) {
  h1[style*="font-size:56px"],
  h1[style*="font-size:48px"],
  h1[style*="font-size:44px"] {
    font-size: 24px !important;
  }
  .vk-site-header > div:first-child {
    font-size: 10px !important;
  }
  .vk-site-header > div:first-child > div > div:first-child {
    gap: 8px !important;
  }
}