/* =============================================================
   v2-sg.css — Smart Graphix additions on top of the designistet
   v2 theme. Keep v2-theme.css identical to designistet (colour
   swap only) so future theme updates can be copied across; put
   anything Smart Graphix-specific here. Load LAST.
   ============================================================= */

/* ---------- Accessibility helpers --------------------------- */
.v2-skip {
  position: absolute; left: -9999px; top: 8px; z-index: 2000;
  background: var(--v2-accent); color: #0a0a0a !important;
  padding: 10px 16px; font-weight: 700; font-size: 13px;
}
.v2-skip:focus { left: 8px; }
.v2-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.v2-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--v2-accent);
  outline-offset: 3px;
}

/* ---------- Navigation -------------------------------------- */
#navigation .site-logo img { height: 46px; width: auto; }
.v2-footer-logo-img { height: 56px; }
.nav li.v2-nav-wa a { color: var(--v2-accent) !important; }
.nav li.v2-nav-wa a i { margin-right: 4px; }
@media (min-width: 901px) and (max-width: 1280px) {
  .nav li.v2-nav-wa { display: none; }
}

/* ---------- Hero H1 (styled as the quiet subtitle line) ------ */
.v2-hero-h1 {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(22px, 2.1vw, 32px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--v2-white);
  text-transform: none;
  margin: 0 0 22px 70px;
}
.v2-hero-h1 .colored { color: var(--v2-accent); }
@media (max-width: 768px) {
  .v2-hero-h1 { margin-left: 0; font-size: 24px; text-align: left; }
  #home .v2-hero-sub { margin-bottom: 150px !important; }
}

/* ---------- First section on inner pages (no promo banner) --- */
.v2-page-top { padding-top: 170px !important; }
@media (max-width: 767px) { .v2-page-top { padding-top: 120px !important; } }
#portfolio.v2-page-top { padding-bottom: 80px; }

/* ---------- Pricing ------------------------------------------ */
.v2-gd-toggle-wrap { text-align: center; }
h2.v2-gd-plan-name { line-height: 1.1; }
.v2-gd-total {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--v2-text-muted);
  letter-spacing: 0.3px;
}
.v2-gd-pricing-note {
  text-align: center;
  font-size: 13px;
  color: var(--v2-text-muted);
  margin: 28px auto 0;
  padding-bottom: 72px;
  max-width: 760px;
  line-height: 1.7;
}
.v2-gd-features a,
.v2-gd-pricing-note a,
.v2-gd-intro-desc a,
.v2-accordion-body p a,
.v2-wd-pitch-stat a,
.v2-about-body a,
.v2-legal a,
.v2-form-privacy a {
  color: var(--v2-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.v2-gd-plan .v2-gd-plan-badge + .v2-gd-plan-name { margin-top: 0; }

/* ---------- Intro block -------------------------------------- */
.v2-gd-intro-desc p { font-size: 16px; line-height: 1.8; color: var(--v2-white); margin: 0 0 16px; }
.v2-gd-intro-accent {
  color: var(--v2-accent);
  font-family: 'Inter', sans-serif;
  font-size: 17px; font-weight: 700;
  margin: 4px 0 0;
}
.v2-gd-service-card[id] { scroll-margin-top: 110px; }
#migrate, #faq, #prices, #archive { scroll-margin-top: 80px; }

/* ---------- Areas we serve ----------------------------------- */
.v2-areas { margin: 8px 0 72px; }
.v2-areas-label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--v2-text-muted);
  margin-bottom: 14px;
}
.v2-contact-left .v2-areas { margin: 40px 0 0; }
.v2-about-intro .v2-areas { margin: 56px 0 72px; }

/* ---------- Home about quote as a paragraph ------------------ */
p.v2-about-us-quote { margin: 0 0 48px; }

/* ---------- Stats -------------------------------------------- */
.v2-stat-prefix { color: var(--v2-accent); }
.v2-stat-source {
  font-size: 12px; color: var(--v2-text-muted);
  margin: -44px 0 80px; text-align: left !important;
}

/* ---------- FAQ: readable question size ---------------------- */
.v2-faq-list .v2-accordion-title {
  font-size: clamp(17px, 1.8vw, 22px);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.35;
}
.v2-faq-list .v2-accordion-toggle { padding: 22px 0; }
.v2-faq-list .v2-accordion-body p { font-size: 16px; margin-bottom: 8px; max-width: 900px; }
.v2-accordion-body .v2-acc-link { margin-top: -24px; }
.v2-wd-faq-header .v2-heading { font-size: clamp(30px, 4.5vw, 60px); }
.v2-wd-faq { padding-top: 100px; padding-bottom: 100px; }

/* ---------- Pitch -------------------------------------------- */
.v2-wd-pitch { padding-top: 100px; padding-bottom: 100px; }

/* ---------- Portfolio: images behave like the videos --------- */
img.v2-pf-vid { display: block; }
.v2-portfolio-row { outline-offset: -2px; }
.v2-archive { padding: 20px 0 100px; }
@media (min-width: 901px) {
  .v2-portfolio-preview { width: 48%; }
}

/* ---------- CTA ---------------------------------------------- */
.v2-cta-badge a { color: inherit; text-decoration: none; }
.v2-cta-badge a:hover { color: var(--v2-accent); }

/* ---------- Contact ------------------------------------------ */
.v2-mail-success.visible-message,
.v2-mail-error.visible-message { display: block; }
.v2-mail-error {
  display: none;
  background: var(--v2-surface);
  border: 1px solid #ff6b6b;
  color: #ffb3b3;
  font-size: 13px;
  padding: 16px 20px;
}
.v2-form-submit:hover { background: var(--v2-accent); color: #0a0a0a; border: 1px solid var(--v2-accent); }
.v2-form-submit[disabled] { opacity: .5; cursor: wait; }
.v2-form-privacy { font-size: 12px; color: var(--v2-text-muted); margin: 0; }
.v2-contact-detail a, .v2-contact-detail span { color: var(--v2-white); }
.v2-contact-address { color: var(--v2-white); font-size: 16px; }

/* ---------- About -------------------------------------------- */
.v2-about-body-2 { margin-top: -32px !important; }

/* ---------- Footer ------------------------------------------- */
.v2-footer-nap { font-size: 13px; line-height: 1.7; color: var(--v2-white); margin: -8px 0 24px; }
.v2-footer-nap a { color: var(--v2-accent); text-decoration: none; }
.v2-footer-link:hover, .v2-footer-legal-link:hover { color: var(--v2-accent); }

/* ---------- Blog --------------------------------------------- */
.v2-blog { background: var(--v2-bg); padding-bottom: 100px; }
.v2-blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px; }
.v2-blog-video { position: relative; aspect-ratio: 16 / 9; background: var(--v2-surface); border-radius: 12px; overflow: hidden; margin-bottom: 20px; }
.v2-blog-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.v2-blog-date { display: block; font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--v2-accent); margin-bottom: 10px; }
.v2-blog-title { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 22px; line-height: 1.25; color: var(--v2-white); margin: 0 0 10px; text-align: left !important; }
.v2-blog-excerpt { font-size: 15px; line-height: 1.7; color: var(--v2-white); }
@media (max-width: 900px) { .v2-blog-grid { grid-template-columns: 1fr; } }

/* ---------- Legal / privacy ---------------------------------- */
.v2-legal { background: var(--v2-bg); padding-bottom: 100px; }
.v2-legal-inner { max-width: 900px; }
.v2-legal h2 { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 22px; color: var(--v2-white); margin: 40px 0 12px; text-align: left !important; }
.v2-legal p { font-size: 16px; line-height: 1.8; color: var(--v2-white); margin: 0 0 14px; text-align: left !important; }
.v2-legal-updated { color: var(--v2-text-muted) !important; font-size: 13px !important; }

/* ---------- Hero fallback image (shows until the YouTube background
   loads, and if it never does) ---------------------------------- */
#home { background: #000 url(../images/slide3.jpg) center / cover no-repeat; }
.v2-cta-video { background: #000 url(../images/slide1.jpg) center / cover no-repeat; }

/* ---------- Images with width/height attributes (CLS-safe) ------ */
.v2-gd-intro-media img,
.v2-about-media img { height: auto; }
.v2-about-media img { aspect-ratio: 1 / 1; object-fit: cover; }
.v2-pf-vid:first-child { height: auto; aspect-ratio: 5 / 3; }
.v2-gd-service-title { text-transform: none; }
.v2-contact { padding: 72px 0 96px !important; }
@media (max-width: 600px) {
  .v2-footer-bottom { padding-right: 56px; }
  .v2-footer-legal { flex-wrap: wrap; gap: 8px 20px; }
}

/* =============================================================
   Round 2 (28 Sep 2026): self-hosted background video, WhatsApp,
   blog, contrast fixes
   ============================================================= */

/* ---------- Self-hosted background video (hero + CTA) --------- */
.v2-bg-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 1; display: block; pointer-events: none;
}
.v2-cta-video .v2-cta-wrap { z-index: 3; }
.v2-cta-video .v-overlay { z-index: 2; }

/* ---------- Icons ------------------------------------------- */
.v2-ico-wa, .v2-ico-x { display: inline-block; vertical-align: -0.125em; }
.v2-footer-social .v2-ico-x { font-size: 15px; }

/* ---------- WhatsApp in nav + floating button --------------- */
.nav li.v2-nav-wa a .v2-ico-wa { margin-right: 4px; font-size: 15px; }
.v2-wa-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 1040;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: #fff !important;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; box-shadow: 0 6px 20px rgba(0,0,0,.35);
  transition: transform .2s;
}
.v2-wa-fab:hover { transform: scale(1.06); color: #fff !important; }
@media (max-width: 600px) { .v2-wa-fab { right: 14px; bottom: 14px; width: 52px; height: 52px; font-size: 28px; } }

/* ---------- CTA -------------------------------------------- */
.v2-cta-btn .v2-ico-wa { margin-right: 4px; }
.v2-cta-alt {
  display: block; clear: both; padding-top: 6px;
  font-size: 13px; color: rgba(255,255,255,.7) !important; text-decoration: underline;
  text-underline-offset: 2px;
}
.v2-cta-alt:hover { color: var(--v2-accent) !important; }
.v2-gd-plan-cta .v2-ico-wa, .v2-gd-intro-media-cta a .v2-ico-wa { margin-right: 4px; }

/* ---------- Contact ---------------------------------------- */
.v2-contact-ico { color: var(--v2-accent); font-size: 18px; flex-shrink: 0; line-height: 1; margin-top: 1px; }
.v2-contact-small { font-size: 13px; color: var(--v2-text-muted); }
.v2-contact-small a { color: var(--v2-text-muted) !important; text-decoration: underline; }
.v2-form-lead { font-size: 15px; color: var(--v2-white); margin: 0; }
.v2-form-select {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, #bbb 50%), linear-gradient(135deg, #bbb 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.v2-form-select option { background: #111; color: #fff; }
.v2-form-submit-wa { background: var(--v2-accent) !important; color: #0a0a0a !important; }
.v2-form-submit-wa:hover { background: #fff !important; border-color: #fff !important; }
.v2-form-submit-email { border-color: var(--v2-border) !important; color: var(--v2-white) !important; }
.v2-form-submit-email:hover { border-color: var(--v2-accent) !important; background: transparent !important; color: var(--v2-accent) !important; }
.v2-form-error { color: #ff9b9b; font-size: 13px; margin: 0; }
.v2-invalid { border-color: #ff6b6b !important; }

/* ---------- Contrast fixes (WCAG AA on #111) ----------------- */
.v2-gd-setup-label, .v2-gd-commitment { color: #a3a3a3 !important; }
.v2-gd-setup-amount { color: #cfcfcf; }
.v2-form-input::placeholder, .v2-form-textarea::placeholder { color: #8f8f8f; }

/* ---------- Blog index ------------------------------------- */
.v2-post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--v2-border); border: 1px solid var(--v2-border); margin-bottom: 80px; }
.v2-post-card { background: var(--v2-bg); padding: 36px 32px; display: flex; flex-direction: column; }
.v2-post-card .v2-blog-title a { color: var(--v2-white); text-decoration: none; }
.v2-post-card .v2-blog-title a:hover { color: var(--v2-accent); }
.v2-post-card .v2-blog-excerpt { flex: 1; }
.v2-archive-title { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 22px; color: var(--v2-white); margin: 0 0 24px; text-align: left !important; }
@media (max-width: 900px) { .v2-post-grid { grid-template-columns: 1fr; } }

/* YouTube click-to-play facade */
.v2-yt { position: relative; display: block; aspect-ratio: 16 / 9; background: #000; border-radius: 12px; overflow: hidden; margin-bottom: 20px; }
.v2-yt img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity .2s; }
.v2-yt:hover img { opacity: 1; }
.v2-yt-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 68px; height: 68px; border-radius: 50%; background: var(--v2-accent); color: #0a0a0a; display: flex; align-items: center; justify-content: center; font-size: 24px; padding-left: 4px; }
.v2-yt-live iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Articles --------------------------------------- */
.v2-article { background: var(--v2-bg); padding-bottom: 80px; }
.v2-article-inner { max-width: 880px; }
.v2-crumbs { font-size: 12px; color: var(--v2-text-muted); margin-bottom: 18px; }
.v2-crumbs a { color: var(--v2-text-muted); text-decoration: underline; text-underline-offset: 2px; }
.v2-article-title { font-size: clamp(32px, 4.6vw, 58px) !important; line-height: 1.02 !important; }
.v2-article-meta { font-size: 13px; color: var(--v2-text-muted); margin: 8px 0 32px; }
.v2-article-meta a { color: var(--v2-text-muted); text-decoration: underline; }
.v2-article-lead { border-left: 3px solid var(--v2-accent); background: var(--v2-surface); padding: 22px 26px; margin-bottom: 40px; }
.v2-article-lead p { font-size: 17px; line-height: 1.75; color: var(--v2-white); margin: 0; }
.v2-article-body h2, .v2-article-foot h2 { font-family: 'Inter', sans-serif; font-weight: 800; font-size: clamp(22px, 2.4vw, 30px); color: var(--v2-white); margin: 48px 0 14px; text-align: left !important; line-height: 1.2; }
.v2-article-body p, .v2-article-body li { font-size: 17px; line-height: 1.8; color: #e8e8e8; }
.v2-article-body p { margin: 0 0 16px; }
.v2-article-body ul, .v2-article-body ol { padding-left: 22px; margin: 0 0 18px; }
.v2-article-body li { margin-bottom: 8px; }
.v2-article-body ul li::marker { color: var(--v2-accent); }
.v2-article-body a, .v2-article-foot a, .v2-article-cta a:not(.v2-gd-plan-cta), .v2-author a { color: var(--v2-accent); text-decoration: underline; text-underline-offset: 2px; }
.v2-note { font-size: 13px !important; color: var(--v2-text-muted) !important; }
.v2-table-wrap { overflow-x: auto; margin: 8px 0 12px; }
.v2-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.v2-table th, .v2-table td { border: 1px solid var(--v2-border); padding: 12px 14px; text-align: left; vertical-align: top; color: #e8e8e8; }
.v2-table th { background: var(--v2-surface); color: var(--v2-accent); font-weight: 700; font-size: 12px; letter-spacing: .5px; text-transform: uppercase; }
.v2-checklist { list-style: none; padding-left: 0 !important; }
.v2-checklist li { position: relative; padding-left: 28px; }
.v2-checklist li::before { content: "\f00c"; font-family: FontAwesome; position: absolute; left: 0; top: 1px; color: var(--v2-accent); }
.v2-article-cta { border: 1px solid var(--v2-border); background: var(--v2-surface); padding: 28px 30px; margin: 48px 0 32px; }
.v2-article-cta p { font-size: 16px; line-height: 1.7; color: var(--v2-white); margin: 0 0 18px; }
.v2-article-cta .v2-gd-plan-cta { display: inline-block; margin: 0; background: var(--v2-accent); border-color: var(--v2-accent); color: #0a0a0a !important; }
.v2-author { display: flex; gap: 18px; align-items: flex-start; border-top: 1px solid var(--v2-border); border-bottom: 1px solid var(--v2-border); padding: 24px 0; margin-bottom: 8px; }
.v2-author img { width: 64px; height: 64px; border-radius: 12px; background: #222; flex-shrink: 0; }
.v2-author strong { color: var(--v2-white); font-size: 15px; }
.v2-author p { font-size: 14px; color: #cfcfcf; margin: 4px 0 0; line-height: 1.7; }
.v2-sources li, .v2-related li { font-size: 14px; line-height: 1.7; color: #cfcfcf; margin-bottom: 6px; }
.v2-sources, .v2-related { padding-left: 20px; }

/* ---------- 404 -------------------------------------------- */
.v2-404-links { margin-top: 28px; }
.v2-404-links .v2-hero-tag { text-decoration: none; }
.v2-404-links .v2-hero-tag:hover { border-color: var(--v2-accent); color: var(--v2-accent); }

/* ---------- Round 2 QA fixes ------------------------------- */
.v2-table-hint { display: none; }
@media (max-width: 700px) {
  .v2-article-body .v2-table-hint { display: block; font-size: 12px; letter-spacing: .5px; color: var(--v2-text-muted); margin: 0 0 6px; }
}
/* keep the back-to-top button clear of the floating WhatsApp button on phones */
@media (max-width: 600px) {
  .v2-footer { padding-bottom: 64px; }
  .v2-top-btn { right: auto; left: 24px; bottom: 14px; }
}

/* ---------- Nav: active parent vs its dropdown items -------- */
/* The theme's ".nav li.active a" also hit the dropdown links, giving every
   sub-item the yellow active line. Only the parent link should get it. */
#navigation .nav li.active .dropdown-menu li a { border-top-color: transparent !important; }
/* the page you're on, when it lives inside a dropdown */
#navigation .nav li.dropdown > .dropdown-menu li a[aria-current="page"] { color: var(--v2-accent) !important; }

/* ---------- Home hero: pills in the text flow ---------------- */
/* The theme pins the pills to the bottom of the hero while the text is
   vertically centred, so on shorter screens they collided with the intro.
   Inside the content block they always sit under it. */
#home .v2-hero-content .v2-hero-tags { position: static; max-width: none; margin: 0; }
#home .v2-hero-content .v2-hero-sub { margin-bottom: 32px; }
@media (max-width: 768px) {
  #home .v2-hero-content .v2-hero-sub { margin-bottom: 24px !important; }
  #home .v2-hero-content .v2-hero-tags { justify-content: flex-start; }
}
/* short phones: drop the scroll arrow to the bottom edge so it clears the pills */
@media (max-width: 767px) and (max-height: 700px) {
  #home .v2-hero-arrow { bottom: 16px; }
}

/* ---------- Contact form: email route + autofill ------------- */
.v2-form-success { color: var(--v2-accent); font-size: 14px; font-weight: 600; margin: 0; }
.v2-form-success .fa { margin-right: 6px; }
.v2-form-submit[disabled] { opacity: .6; cursor: wait; }
/* Chrome paints autofilled fields light blue; keep them on-brand */
.v2-form-input:-webkit-autofill,
.v2-form-input:-webkit-autofill:hover,
.v2-form-input:-webkit-autofill:focus,
.v2-form-textarea:-webkit-autofill {
  -webkit-text-fill-color: #ffffff;
  -webkit-box-shadow: 0 0 0 1000px var(--v2-surface) inset;
  box-shadow: 0 0 0 1000px var(--v2-surface) inset;
  caret-color: #ffffff;
  transition: background-color 9999s ease-out 0s;
}

/* ---------- Portfolio preview keeps the screenshots' shape --------- */
/* The theme stretched the preview to the list's height; with the 10-row
   archive that zoomed and cropped the 1000x600 screenshots. */
.v2-portfolio-layout { align-items: flex-start; }
.v2-pf-video-wrap { height: auto; aspect-ratio: 5 / 3; }