/*
Theme Name: Hello Elementor Child
Theme URI: https://vieww.com.au/
Description: Hello Elementor child theme for the Vieww marketing site.
Author: Vieww
Author URI: https://vieww.com.au/
Template: hello-elementor
Version: 1.0.6
Text Domain: hello-elementor-child
*/

/* ============================================================
   Brand tokens
   ============================================================ */
:root {
  --vieww-primary: #0d7377;
  --vieww-accent: #14919b;
  --vieww-canvas: #f8f9fa;
  --vieww-surface: #ffffff;
  --vieww-text: #0f1419;
  --vieww-text-muted: #6b7280;
  --vieww-border: #e5e7eb;
  --vieww-border-strong: #cbd5e1;
}

/* ============================================================
   Footer link lists (EPP footer template, post 21)
   ============================================================ */
.vieww-footer-links { list-style: none; padding: 0; margin: 0; }
.vieww-footer-links li { margin-bottom: 8px; }
.vieww-footer-links a {
  color: var(--vieww-text); font-size: 15px; text-decoration: none;
  transition: color 120ms ease;
}
.vieww-footer-links a:hover { color: var(--vieww-primary); }

/* ============================================================
   Header — mobile collapse (EPP header template, post 20)
   ============================================================ */
.vieww-burger {
  display: none; background: transparent; border: 0; cursor: pointer;
  padding: 0; width: 40px; height: 40px; flex-direction: column;
  justify-content: center; align-items: center; gap: 5px;
  margin-left: auto; align-self: center;
}
.vieww-burger span {
  display: block; width: 22px; height: 2px;
  background: var(--vieww-text); border-radius: 2px;
  transition: transform 0.22s ease, opacity 0.18s ease;
}
@media (max-width: 880px) {
  .vieww-burger { display: flex; }
  #vieww-site-header { position: relative; }
  #vieww-site-header .elementor-element-rcluster {
    position: absolute; top: 100%; left: 0; right: 0;
    background: #ffffff;
    border-top: 1px solid var(--vieww-border);
    border-bottom: 1px solid var(--vieww-border);
    box-shadow: 0 12px 24px rgba(15, 20, 25, 0.06);
    padding: 16px 24px !important;
    flex-direction: column !important; align-items: stretch !important;
    justify-content: flex-start !important; gap: 12px !important;
    display: none !important; z-index: 100;
  }
  #vieww-site-header.vieww-menu-open .elementor-element-rcluster { display: flex !important; }
  #vieww-site-header.vieww-menu-open .bdt-navbar-nav {
    flex-direction: column !important; align-items: stretch !important; gap: 4px;
  }
  #vieww-site-header.vieww-menu-open .bdt-navbar-nav li a {
    padding: 12px 4px !important; border-bottom: 1px solid var(--vieww-border);
  }
  #vieww-site-header.vieww-menu-open .vieww-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  #vieww-site-header.vieww-menu-open .vieww-burger span:nth-child(2) { opacity: 0; }
  #vieww-site-header.vieww-menu-open .vieww-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ============================================================
   Home page body sections (post 9)
   ============================================================ */
.vieww-section { padding: 96px 0; }
.vieww-section-narrow { padding: 64px 0; }
.vieww-section-head {
  text-align: center; max-width: 720px; margin: 0 auto 56px; padding: 0 24px;
}
.vieww-section-head h2 {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  margin: 12px 0 16px; line-height: 1.08; letter-spacing: -0.015em;
}
.vieww-section-head p { color: var(--vieww-text-muted); font-size: 1.0625rem; line-height: 1.5; margin: 0; }
.vieww-eyebrow {
  display: inline-block; font-size: 13px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--vieww-accent);
}
.vieww-hero { padding: 96px 24px 72px; text-align: center; position: relative; overflow: hidden; }
.vieww-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 50% -10%, rgba(20, 145, 155, 0.10), transparent 60%),
    radial-gradient(ellipse 40% 30% at 90% 20%, rgba(13, 115, 119, 0.06), transparent 70%);
}
.vieww-hero > * { position: relative; }
.vieww-hero h1 {
  font-size: clamp(2.75rem, 5.5vw, 4.5rem); line-height: 1.06;
  letter-spacing: -0.025em; font-weight: 800; margin: 20px auto 16px;
  max-width: 820px;
}
.vieww-hero h1 .accent { color: var(--vieww-primary); }
.vieww-hero-lede {
  font-size: 1.25rem; color: var(--vieww-text-muted); line-height: 1.5;
  max-width: 620px; margin: 0 auto 24px;
}
.vieww-meta-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px; border: 1px solid var(--vieww-border);
  border-radius: 999px; background: var(--vieww-surface);
  font-size: 14px; color: var(--vieww-text-muted);
  box-shadow: 0 1px 2px rgba(15, 20, 25, 0.04); margin-top: 24px;
}
.vieww-meta-pill .dot {
  width: 8px; height: 8px; border-radius: 50%; background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18);
}

.vieww-plugin-card {
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
  text-decoration: none !important; color: inherit !important;
}
.vieww-plugin-card:hover {
  border-color: var(--vieww-primary) !important;
  transform: translateY(-3px);
  box-shadow: 0 24px 48px rgba(13, 115, 119, 0.10), 0 8px 16px rgba(15, 20, 25, 0.04);
}
.vieww-plugin-card-meta {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 16px; margin-top: 12px;
  border-top: 1px solid var(--vieww-border);
}
.vieww-plugin-card-meta .version {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; color: var(--vieww-text-muted);
}
.vieww-plugin-card-meta .learn {
  font-weight: 600; font-size: 15px; color: var(--vieww-primary);
  text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
}
.vieww-plugin-card:hover .vieww-plugin-card-meta .learn { color: var(--vieww-accent); }

.vieww-anti-features {
  background: var(--vieww-text) !important;
  color: #e6f7f8 !important;
  padding: 56px 24px !important;
}
.vieww-anti-features-inner {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 14px 40px; align-items: center;
  max-width: 1140px; margin: 0 auto;
}
.vieww-anti-features-inner .label {
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em;
  color: rgba(230, 247, 248, 0.55); font-weight: 600;
}
.vieww-anti-features-inner .item {
  font-weight: 600; font-size: 16px;
  display: inline-flex; align-items: center; gap: 8px;
}
.vieww-anti-features-inner .item::before {
  content: "✕"; color: var(--vieww-accent); font-weight: 700;
}

.vieww-why-tile {
  padding: 24px !important;
  border: 1px solid var(--vieww-border) !important;
  border-radius: 10px !important;
  background: var(--vieww-surface) !important;
}
.vieww-why-tile h3 {
  font-size: 17px !important; margin: 16px 0 8px !important; font-weight: 700;
  letter-spacing: -0.005em;
}
.vieww-why-tile p {
  color: var(--vieww-text-muted) !important; font-size: 15px !important;
  line-height: 1.55 !important; margin: 0 !important;
}
.vieww-why-icon {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; border-radius: 8px;
  background: rgba(20, 145, 155, 0.10); color: var(--vieww-primary);
}

.vieww-screen {
  border: 1px solid var(--vieww-border); border-radius: 16px;
  overflow: hidden; background: var(--vieww-surface);
  box-shadow: 0 4px 12px rgba(15, 20, 25, 0.05);
}
.vieww-screen .placeholder {
  aspect-ratio: 4 / 3; display: grid; place-items: center;
  background: repeating-linear-gradient(45deg,
    rgba(13, 115, 119, 0.05) 0 12px,
    rgba(13, 115, 119, 0.02) 12px 24px);
  color: var(--vieww-text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
}
.vieww-screen .caption {
  padding: 16px; border-top: 1px solid var(--vieww-border);
  font-size: 15px; color: var(--vieww-text-muted);
}
.vieww-screen .caption strong { color: var(--vieww-text); font-weight: 600; }

.vieww-changelog-card {
  padding: 24px; background: var(--vieww-surface);
  border: 1px solid var(--vieww-border); border-radius: 10px;
}
.vieww-changelog-card .head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.vieww-changelog-card .plugin-name { font-weight: 600; font-size: 15px; color: var(--vieww-text); }
.vieww-changelog-card .version {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; padding: 2px 8px; border-radius: 999px;
  background: rgba(13, 115, 119, 0.08); color: var(--vieww-primary);
}
.vieww-changelog-card ul { list-style: none; padding: 0; margin: 0; }
.vieww-changelog-card ul li {
  font-size: 15px; color: var(--vieww-text-muted);
  padding-left: 16px; position: relative; margin-bottom: 8px; line-height: 1.5;
}
.vieww-changelog-card ul li::before {
  content: "+"; position: absolute; left: 0;
  color: var(--vieww-accent); font-weight: 700;
}

.vieww-pro-teaser {
  background: linear-gradient(135deg, var(--vieww-primary) 0%, var(--vieww-accent) 100%);
  color: #fff; border-radius: 16px; padding: 48px 56px;
  display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center;
  margin: 0 24px;
}
@media (max-width: 760px) {
  .vieww-pro-teaser { grid-template-columns: 1fr; text-align: center; padding: 32px 24px; }
}
.vieww-pro-teaser .eyebrow { color: rgba(255, 255, 255, 0.7); font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.vieww-pro-teaser h2 { color: #fff; font-size: 30px; margin: 8px 0 12px; line-height: 1.15; letter-spacing: -0.015em; }
.vieww-pro-teaser p { color: rgba(255, 255, 255, 0.85); max-width: 520px; margin: 0; line-height: 1.5; }
.vieww-pro-teaser .form { display: flex; gap: 8px; background: rgba(255, 255, 255, 0.10); padding: 8px; border-radius: 10px; }
.vieww-pro-teaser input[type=email] {
  background: transparent; border: 0; color: #fff;
  padding: 10px 12px; min-width: 220px; outline: none; font: inherit;
}
.vieww-pro-teaser input[type=email]::placeholder { color: rgba(255, 255, 255, 0.6); }
.vieww-pro-teaser .form button, .vieww-pro-teaser .btn {
  background: #fff; color: var(--vieww-primary); border: 0;
  padding: 10px 20px; border-radius: 8px; font-weight: 600;
  cursor: pointer; font: 600 15px/1 inherit;
  text-decoration: none; display: inline-block;
}
.vieww-pro-teaser .form button:hover, .vieww-pro-teaser .btn:hover { background: var(--vieww-canvas); }

/* ============================================================
   Per-plugin pages (posts 10, 11, 12)
   Shared across Directory / Events / Properties.
   ============================================================ */

.vieww-plugin-hero {
  padding: 80px 24px 56px;
  max-width: 820px;
  margin: 0 auto;
}
.vieww-plugin-hero .mark-row {
  display: flex; align-items: center; gap: 16px; margin-bottom: 20px;
}
.vieww-plugin-hero .mark-row img,
.vieww-plugin-hero .mark-row .mark-img-fallback {
  width: 64px; height: 64px; border-radius: 10px;
  background: rgba(13, 115, 119, 0.08); display: grid; place-items: center;
}
.vieww-version-pill {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; padding: 3px 10px; border-radius: 999px;
  background: rgba(13, 115, 119, 0.08); color: var(--vieww-primary);
}
.vieww-plugin-hero h1 {
  font-size: clamp(2.25rem, 4vw, 3.25rem); line-height: 1.08;
  letter-spacing: -0.025em; font-weight: 800; margin: 8px 0 16px;
}
.vieww-plugin-hero .lede {
  font-size: 1.1875rem; color: var(--vieww-text-muted);
  line-height: 1.5; max-width: 640px; margin: 0 0 24px;
}

.vieww-feature-tile {
  padding: 24px !important;
  border: 1px solid var(--vieww-border) !important;
  border-radius: 10px !important;
  background: var(--vieww-surface) !important;
}
.vieww-feature-tile h3 {
  font-size: 17px !important; margin: 12px 0 8px !important; font-weight: 700;
  letter-spacing: -0.005em;
}
.vieww-feature-tile p {
  color: var(--vieww-text-muted) !important; font-size: 15px !important;
  line-height: 1.55 !important; margin: 0 !important;
}
.vieww-feature-icon {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(20, 145, 155, 0.10); color: var(--vieww-primary);
}

.vieww-audience-block {
  background: var(--vieww-surface) !important;
  border: 1px solid var(--vieww-border) !important;
  border-radius: 16px !important;
  padding: 48px !important;
  margin: 0 24px;
}
.vieww-audience-block h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); margin: 12px 0 12px; line-height: 1.15; letter-spacing: -0.015em; }
.vieww-audience-block p { color: var(--vieww-text-muted); font-size: 1.0625rem; line-height: 1.5; margin: 0 0 16px; }
.vieww-audience-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.vieww-audience-tag {
  display: inline-block;
  padding: 4px 12px; font-size: 13px; font-weight: 500;
  border-radius: 999px;
  background: rgba(13, 115, 119, 0.08); color: var(--vieww-primary);
}

.vieww-dev-strip {
  background: var(--vieww-text) !important;
  color: #e6f7f8 !important;
  border-radius: 16px !important;
  padding: 48px !important;
  margin: 0 24px;
}
.vieww-dev-strip .eyebrow { color: var(--vieww-accent); font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.vieww-dev-strip h2 { color: #fff; font-size: clamp(1.5rem, 2.5vw, 2rem); margin: 8px 0 24px; line-height: 1.15; letter-spacing: -0.015em; }
.vieww-dev-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 760px) { .vieww-dev-grid { grid-template-columns: 1fr; } }
.vieww-dev-card {
  padding: 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}
.vieww-dev-card h4 {
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(230, 247, 248, 0.55); margin: 0 0 12px; font-weight: 600;
}
.vieww-dev-card code {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  margin-bottom: 6px;
  color: #fff;
  overflow-x: auto;
  white-space: nowrap;
}

.vieww-faq { max-width: 820px; margin: 0 auto; padding: 0 24px; }
.vieww-faq details {
  padding: 16px 20px;
  border: 1px solid var(--vieww-border);
  border-radius: 10px;
  background: var(--vieww-surface);
  margin-bottom: 10px;
  transition: border-color 120ms ease;
}
.vieww-faq details[open] { border-color: var(--vieww-primary); }
.vieww-faq summary {
  font-weight: 600; font-size: 16px; cursor: pointer;
  list-style: none;
  display: flex; justify-content: space-between; align-items: center;
  color: var(--vieww-text);
}
.vieww-faq summary::-webkit-details-marker { display: none; }
.vieww-faq summary::after {
  content: "+";
  color: var(--vieww-primary);
  font-size: 22px; font-weight: 400;
  transition: transform 160ms ease;
}
.vieww-faq details[open] summary::after { transform: rotate(45deg); }
.vieww-faq details p {
  color: var(--vieww-text-muted); margin: 12px 0 0; font-size: 15px; line-height: 1.55;
}




/* === VIEWW PRO TEASER FORMINATOR OVERRIDES === */
/*
 * Pro teaser Forminator overrides — v2.
 * Make the email + submit sit side-by-side inside a single pill.
 * The Forminator form has the email in row 1 and submit in row 2; we
 * collapse the rows with display: contents so children flex inside the form.
 */

.vieww-pro-teaser .vieww-pro-teaser-form .e-con-inner { width: 100%; }

.vieww-pro-teaser form.forminator-custom-form {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch;
  gap: 8px;
  background: rgba(255, 255, 255, 0.10) !important;
  padding: 8px !important;
  border-radius: 10px !important;
  margin: 0 !important;
}
.vieww-pro-teaser .forminator-row {
  display: contents !important;
}
.vieww-pro-teaser .forminator-col,
.vieww-pro-teaser .forminator-col-12 {
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  flex: 0 0 auto !important;
}
.vieww-pro-teaser .forminator-col:has(.forminator-field-email),
.vieww-pro-teaser .forminator-col-12:has(.forminator-field-email) {
  flex: 1 1 auto !important;
  min-width: 220px;
}
.vieww-pro-teaser .forminator-field { margin: 0 !important; }
.vieww-pro-teaser .forminator-label,
.vieww-pro-teaser .forminator-required { display: none !important; }
.vieww-pro-teaser .forminator-response-message:empty { display: none; }

.vieww-pro-teaser input.forminator-input {
  background: transparent !important;
  border: 0 !important;
  color: #fff !important;
  padding: 10px 12px !important;
  outline: none !important;
  box-shadow: none !important;
  font: inherit;
  height: auto !important;
  width: 100%;
}
.vieww-pro-teaser input.forminator-input::placeholder { color: rgba(255, 255, 255, 0.6) !important; }
.vieww-pro-teaser input.forminator-input:focus { outline: none !important; box-shadow: none !important; }

.vieww-pro-teaser button.forminator-button-submit {
  background: #fff !important;
  color: var(--vieww-primary) !important;
  border: 0 !important;
  padding: 10px 20px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  font-family: inherit !important;
  font-size: 15px !important;
  white-space: nowrap;
  min-height: auto !important;
  line-height: 1.4 !important;
}
/* Safety net: if Forminator's JS hasn't injected the button label yet,
   show our copy via ::before. Once Forminator hydrates the <span> inside,
   this becomes redundant but harmless. */
.vieww-pro-teaser button.forminator-button-submit:empty::before {
  content: 'Notify me';
}
.vieww-pro-teaser button.forminator-button-submit:hover {
  background: var(--vieww-canvas) !important;
  color: var(--vieww-primary) !important;
}

.vieww-pro-teaser .forminator-response-message {
  color: #fff !important;
  margin: 0 !important;
  font-size: 14px;
  flex-basis: 100%;
  order: 99;
}
.vieww-pro-teaser .forminator-response-message.forminator-success {
  background: rgba(255, 255, 255, 0.15);
  padding: 10px 14px;
  border-radius: 8px;
}

/* Force the form to be visible immediately (Forminator hides until JS) */
.vieww-pro-teaser form.forminator-custom-form { display: flex !important; }