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

/* ==========================================================================
   BODY CONTENT POLISH — for pages that still use old WP markup
   These rules style Avada/Elementor remnants to look closer to new design
   without changing HTML structure (SEO-safe).
   ========================================================================== */

/* Main content wrapper — apply consistent typography */
.main-container .entry-content,
.main-container .blog-post-dtl,
.main-container article,
.main-container .blog-single-block,
.main-container .news-content,
.wp-organic-single-post-content {
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 24px 18px 64px !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: #111827 !important;
  word-break: keep-all !important;
}

/* Headings inside body content */
.main-container .entry-content h1,
.main-container .post-title,
.main-container .page-title {
  font-size: 32px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #0B1F3A !important;
  margin: 0 0 18px !important;
  line-height: 1.3 !important;
  word-break: keep-all !important;
}
.main-container .entry-content h2,
.main-container article h2 {
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  color: #0B1F3A !important;
  margin: 32px 0 14px !important;
  padding-top: 8px !important;
  word-break: keep-all !important;
}
.main-container .entry-content h3,
.main-container article h3 {
  font-size: 19px !important;
  font-weight: 600 !important;
  color: #0B1F3A !important;
  margin: 24px 0 10px !important;
  word-break: keep-all !important;
}
/* Paragraph */
.main-container .entry-content p,
.main-container article p {
  margin: 0 0 16px !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  word-break: keep-all !important;
}
/* Body links */
.main-container .entry-content a:not(.btn):not(.button):not(.elementor-button),
.main-container article a:not(.btn):not(.button):not(.elementor-button) {
  color: #1D4ED8 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* Body images — clean rounded */
.main-container .entry-content img,
.main-container article img,
.main-container .news-content img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 8px !important;
  margin: 12px 0 !important;
}

/* Body tables — modern look */
.main-container .entry-content table,
.main-container article table {
  border-collapse: collapse !important;
  width: 100% !important;
  margin: 18px 0 !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  font-size: 14px !important;
}
.main-container .entry-content table th,
.main-container article table th,
.main-container .entry-content table tr:first-child td,
.main-container article table tr:first-child td {
  background: #EFF6FF !important;
  color: #0B1F3A !important;
  font-weight: 600 !important;
  text-align: left !important;
  padding: 12px 14px !important;
}
.main-container .entry-content table td,
.main-container article table td {
  padding: 12px 14px !important;
  border-bottom: 1px solid #E5E7EB !important;
  vertical-align: top !important;
}

/* Lists */
.main-container .entry-content ul,
.main-container .entry-content ol,
.main-container article ul,
.main-container article ol {
  padding-left: 22px !important;
  margin: 12px 0 !important;
}
.main-container .entry-content li,
.main-container article li {
  margin-bottom: 6px !important;
  line-height: 1.7 !important;
}
.main-container .entry-content ul li::marker {
  color: #1D4ED8;
}

/* Blockquote */
.main-container .entry-content blockquote,
.main-container article blockquote {
  border-left: 4px solid #1D4ED8 !important;
  background: #EFF6FF !important;
  padding: 14px 20px !important;
  margin: 20px 0 !important;
  border-radius: 0 8px 8px 0 !important;
  color: #1F2937 !important;
}

/* Hide WP cruft that doesn't fit new design */
.main-container .page-breadcrumb,
.main-container .post-navigation,
.main-container .author-info,
.main-container .single-share,
.main-container .comment-respond,
.main-container .related-posts,
.main-container .blog-author-info,
.main-container .single-meta {
  display: none !important;
}

/* Remove search modal that pollutes pages */
.modal.fade.search_count_1 { display: none !important; }

/* Adjust main-container width */
.main-container > .container,
.main-container .container {
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
}

/* === 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, a.vk-btn-accent { background: #A33344 !important; border-color: #A33344 !important; color: #fff !important; }
.vk-btn-accent:hover, a.vk-btn-accent:hover { background: #802635 !important; border-color: #802635 !important; color: #fff !important; }
.vk-btn-primary, a.vk-btn-primary { background: #0B1F3A !important; color: #fff !important; }
.vk-btn-primary:hover, a.vk-btn-primary:hover { background: #1D3464 !important; color: #fff !important; }
.vk-mobile-actions a.primary, a.vk-btn.primary { background: #A33344 !important; color: #fff !important; border-color: #A33344 !important; }
.vk-mobile-actions a.primary:hover, a.vk-btn.primary:hover { background: #802635 !important; color: #fff !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;
}

/* === Global image size cap (2026-05-03) ===
   Prevent any image from rendering at natural size and overflowing the viewport.
   Especially WP-imported team/blog photos with huge native dimensions.
*/
main img,
article img,
.vk-elem-wrapper img,
.entry-content img,
.blog-post-dtl img,
.wp-organic-single-post-content img,
.main-container img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
}

/* Body images inside page text — cap to readable size */
.entry-content img:not(.vk-team-photo):not(.vk-qr-image),
.blog-post-dtl img:not(.vk-team-photo):not(.vk-qr-image),
article img:not(.vk-team-photo):not(.vk-qr-image),
.vk-elem-wrapper img:not(.vk-team-photo):not(.vk-qr-image) {
  max-width: min(100%, 720px) !important;
  margin: 12px auto !important;
}

/* Strip empty vk-elem-wrapper that take vertical space */
.vk-elem-wrapper:empty {
  display: none !important;
}

/* === FAQ Q box visibility fix (2026-05-03) ===
   Inline-styled Q rows with navy bg #235099 must keep their white text.
   Our blog .blog-post-dtl global color override was making Q text invisible.
*/
.blog-post-dtl td[style*="background: #235099"],
.blog-post-dtl td[style*="background:#235099"],
.blog-post-dtl td[style*="background: #0B1F3A"],
.blog-post-dtl td[style*="background:#0B1F3A"],
.entry-content td[style*="background: #235099"],
.entry-content td[style*="background:#235099"] {
  color: #ffffff !important;
}
.blog-post-dtl td[style*="background: #235099"] strong,
.blog-post-dtl td[style*="background:#235099"] strong,
.entry-content td[style*="background: #235099"] strong,
.entry-content td[style*="background:#235099"] strong {
  color: #7DA3FF !important;
  font-weight: 700;
  margin-right: 6px;
}

/* === Inline CTA button — force block-level so it doesn't float inside text === */
.blog-post-dtl a[href*="/contact"],
.blog-post-dtl a[href*="/contact-us"] {
  display: block !important;
  margin: 24px auto !important;
  width: max-content !important;
  max-width: 100% !important;
  background: #A33344 !important;
  color: #ffffff !important;
  padding: 14px 32px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  text-align: center !important;
}
.blog-post-dtl a[href*="/contact"]:hover,
.blog-post-dtl a[href*="/contact-us"]:hover {
  background: #802635 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(163, 51, 68, 0.25) !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 on mobile, use mobile menu drawer */
  .vk-site-header nav { display: none !important; }
  /* Mobile-only sticky bottom action bar */
  body::after {
    content: "";
    display: block;
    height: 56px;
  }
  .vk-mobile-actions {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #0B1F3A;
    border-top: 1px solid rgba(255,255,255,.1);
    z-index: 999;
    padding: 8px 12px;
    gap: 8px;
    align-items: center;
    justify-content: space-around;
  }
  .vk-mobile-actions a {
    flex: 1;
    text-align: center;
    color: #fff !important;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 4px;
    text-decoration: none !important;
    border-radius: 6px;
  }
  .vk-mobile-actions a.primary {
    background: #A33344;
    color: #fff !important;
  }
  /* 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;
  }
}

/* Team grid responsive (investkorea.co.kr style) */
@media (max-width: 1024px) {
  .vk-team-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
  }
}
@media (max-width: 600px) {
  .vk-team-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
  }
  .vk-team-grid > div > div:first-child {
    width: 110px !important;
    height: 110px !important;
  }
}

/* === Elementor cleanup — applied 2026-05-03 === */
.vk-elem-wrapper { all: revert; max-width:1200px; margin: 0 auto; padding: 24px 32px; font-family: 'Pretendard Variable','Pretendard','Noto Sans KR','Noto Sans','Noto Sans JP','Noto Sans SC',-apple-system,sans-serif; color:#1F2937; line-height:1.75; word-break:keep-all; }
.vk-elem-wrapper .vk-elem-wrapper { padding: 0; }
.vk-elem-wrapper p { margin: 0 0 16px; font-size: 16px; }
.vk-elem-wrapper h1, .vk-elem-wrapper h2, .vk-elem-wrapper h3, .vk-elem-wrapper h4 { color:#0B1F3A; letter-spacing:-0.015em; margin: 32px 0 16px; word-break:keep-all; }
.vk-elem-wrapper h1 { font-size: 36px; }
.vk-elem-wrapper h2 { font-size: 28px; border-bottom: 2px solid #E5E7EB; padding-bottom: 8px; }
.vk-elem-wrapper h3 { font-size: 22px; }
.vk-elem-wrapper h4 { font-size: 18px; }
.vk-elem-wrapper ul, .vk-elem-wrapper ol { padding-left: 24px; margin: 0 0 16px; }
.vk-elem-wrapper li { margin-bottom: 8px; }
.vk-elem-wrapper img { max-width: 100%; height: auto; border-radius: 8px; }
.vk-elem-wrapper a { color: #1D4ED8; }
.vk-elem-wrapper table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
.vk-elem-wrapper th, .vk-elem-wrapper td { padding: 12px; border: 1px solid #E5E7EB; text-align: left; }
.vk-elem-wrapper th { background: #F7F9FC; color: #0B1F3A; font-weight: 700; }