/* All Sign Customizer — brand layer. Loaded last; framework tokens stay the source of truth. */

:root {
  --asc-teal: #00B89C;
  --asc-green: #26D07C;
  --asc-navy: #0B132B;
  --asc-gradient: linear-gradient(90deg, var(--asc-teal) 0%, var(--asc-green) 100%);
  /* One radius scale for every picture: cards hold media inset by 12px, so
     media corners are the card radius minus that gap, never a square edge. */
  --asc-r-card: 24px;
  --asc-r-media: 14px;
  --asc-r-figure: 20px;
  --asc-r-visual: 24px;
}

/* Highlighted words in titles (*word*) carry the logo gradient. */
.vpf-hl {
  background: var(--asc-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Demo store password note. */
.asc-password {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border: 1px solid var(--asc-teal);
  border-radius: 14px;
  background: color-mix(in srgb, var(--asc-teal) 8%, #fff);
  color: var(--asc-navy);
  font-size: 15px;
}
.asc-password.is-compact { padding: 8px 12px; font-size: 13px; border-radius: 10px; }
.asc-password__icon { display: inline-flex; color: #00876F; }
.asc-password__text { flex: 1 1 auto; }
.asc-password code {
  padding: 2px 8px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #E5E7EB;
  font-weight: 700;
  letter-spacing: .04em;
}
.asc-password__copy {
  border: 0;
  border-radius: 999px;
  padding: 7px 14px;
  background: var(--asc-navy);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
.asc-password__copy.is-done { background: #00876F; }
.asc-password__copy:focus-visible { outline: 2px solid var(--asc-teal); outline-offset: 2px; }

/* ------------------------------------------------------------ Contrast ---
   The bright logo gradient (teal → green) is 2.6:1 and 1.9:1 on white: too
   light for text. On light sections the highlight uses darker brand tones
   (≥ 4.4:1); the bright gradient stays on dark sections. */
:root {
  --asc-gradient-on-light: linear-gradient(90deg, #00876F 0%, #178A4C 100%);
}
.vpf-hl { background-image: var(--asc-gradient-on-light); }
.vp-home-hero .vpf-hl,
.vpf-home-showcase .vpf-hl,
.vpf-home-final-cta .vpf-hl,
.vpf-bg-navy .vpf-hl,
.vpf-site-footer--dark .vpf-hl { background-image: var(--asc-gradient); }

/* -------------------------------------------------------------- Header --- */
.vp-site-header .vpf-brand .custom-logo { max-height: 50px; }

/* ------------------------------------------------- Prices: tabular digits */
.vpf-amount, .asc-compare td { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------- Screenshots in content */
.asc-shot img {
  border-radius: var(--asc-r-figure);
  border: 1px solid var(--vpf-line, #E5E7EB);
  box-shadow: 0 24px 60px -28px rgb(11 19 43 / .35);
  height: auto;
}
.asc-shot { margin-block: 32px; }
.asc-shot figcaption { font-size: 14px; color: var(--vpf-muted, #4B5563); text-align: center; margin-top: 12px; }

/* -------------------------------------------- Catalog band with pictures */
/* Same pattern as feature and demo cards: picture inset, all corners rounded. */
.vpf-home-band-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.vpf-home-band-card.has-media { padding: 12px; overflow: hidden; border-radius: var(--asc-r-card); }
.vpf-home-band-card.has-media > :not(.asc-band-media) { margin-inline: 12px; }
.vpf-home-band-card.has-media > :last-child { margin-bottom: 12px; }
.vpf-home-band-card.has-media .vpf-pill { margin-top: 16px; }
.asc-band-media { aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--asc-r-media); background: var(--vpf-cloud, #F5F7F9); }
.asc-band-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.vpf-home-band-card:hover .asc-band-media img { transform: scale(1.03); }
@media (max-width: 640px) { .vpf-home-band-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------ Large visuals and media */
.vpf-feature-thumb, .vpf-home-page-demo-card img { border-radius: var(--asc-r-media); }
.vpf-product-visual img { border-radius: var(--asc-r-visual); }
/* Framed renders carry their own backdrop: show them whole, not cropped to 3:2. */
.vpf-home-showcase-figure img { aspect-ratio: auto; border-radius: var(--asc-r-visual); }

/* ------------------------------------------------------ Plan comparison */
.asc-compare { margin-block: 24px 48px; overflow-x: auto; }
.asc-compare table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; min-width: 520px; }
.asc-compare th, .asc-compare td { padding: 14px 18px; border-bottom: 1px solid var(--vpf-line, #E5E7EB); text-align: left; vertical-align: top; }
.asc-compare thead th { font-weight: 700; color: var(--asc-navy); background: var(--vpf-cloud, #F5F7F9); }
.asc-compare thead th:first-child { border-top-left-radius: 12px; }
.asc-compare thead th:last-child { border-top-right-radius: 12px; }
.asc-compare th:last-child, .asc-compare td:last-child { background: color-mix(in srgb, var(--asc-teal) 6%, #fff); }
.asc-compare thead th:last-child { background: var(--asc-navy); color: #fff; }
.asc-compare td:first-child { color: var(--vpf-muted, #4B5563); font-weight: 500; }

/* ---------------------------------------------------------- Video blocks */
.asc-video { margin-block: 16px 40px; }
.asc-video video { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--asc-r-figure); background: var(--asc-navy); border: 1px solid var(--vpf-line, #E5E7EB); }

/* ------------------------------------------------------------ Testimonial */
.asc-review {
  margin: 40px 0;
  padding: 28px 32px;
  border: 0;
  border-left: 4px solid var(--asc-teal);
  border-radius: 0 16px 16px 0;
  background: var(--vpf-cloud, #F5F7F9);
}
.asc-review p { font-size: 19px; line-height: 1.6; color: var(--asc-navy); font-weight: 500; margin: 0; }
.asc-review cite { display: block; margin-top: 14px; font-style: normal; font-size: 14px; color: var(--vpf-muted, #4B5563); }

/* ------------------------------------------------------------ Contact form
   Visible labels, ≥44px fields, clear focus, inline errors (CF7 markup). */
.asc-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; max-width: 760px; }
.asc-form__row { margin: 0 0 12px; }
.asc-form__wide { grid-column: 1 / -1; }
.asc-form label { display: block; font-weight: 600; font-size: 14px; color: var(--asc-navy); }
.asc-form input:not([type=submit]), .asc-form select, .asc-form textarea {
  width: 100%;
  min-height: 48px;
  margin-top: 6px;
  padding: 12px 14px;
  border: 1px solid #C9CED6;
  border-radius: 12px;
  background: #fff;
  font: inherit;
  font-weight: 400;
  color: var(--vpf-ink, #1F2937);
}
.asc-form textarea { min-height: 160px; resize: vertical; }
.asc-form input:focus-visible, .asc-form select:focus-visible, .asc-form textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--asc-teal) 45%, transparent);
  outline-offset: 1px;
  border-color: #00876F;
}
.asc-form input[type=submit] {
  min-height: 48px;
  padding: 12px 28px;
  border: 0;
  border-radius: 999px;
  background: var(--asc-navy);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.asc-form input[type=submit]:hover { background: #16244A; }
.asc-form .wpcf7-not-valid { border-color: #B42318; }
.asc-form .wpcf7-not-valid-tip { color: #B42318; font-size: 13px; font-weight: 500; margin-top: 6px; }
.wpcf7 form .wpcf7-response-output { margin: 16px 0 0; padding: 12px 16px; border-radius: 12px; }
.wpcf7-spinner { margin-left: 12px; }
@media (max-width: 640px) { .asc-form { grid-template-columns: 1fr; } }

/* --------------------------------------------------- Keyboard focus rings */
.vpf-btn-primary:focus-visible, .vpf-btn-secondary:focus-visible, .wp-block-button__link:focus-visible {
  outline: 3px solid var(--asc-teal);
  outline-offset: 3px;
}

/* Sign Types archive: four entries on one row. */
@media (min-width: 1024px) {
  .post-type-archive-vpf_product .vpf-features { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Comparison table: all three columns fit on a phone, no sideways scroll. */
@media (max-width: 640px) {
  .asc-compare table { min-width: 0; font-size: 13px; }
  .asc-compare th, .asc-compare td { padding: 10px 8px; }
}
.asc-feature-visual { margin: 0; }
.asc-feature-visual img { display: block; width: 100%; height: auto; box-shadow: 0 30px 80px -36px rgb(11 19 43 / .45); }
/* Feature pages: longer texts with several H2 sections inside the card. */
.vpf-single .vpf-card > h2:not(:first-child) { margin-top: 2.2em; }
.vpf-single .vpf-card > h3 { margin-top: 1.6em; }
.vpf-single .vpf-card > ul, .vpf-single .vpf-card > ol { padding-left: 1.25em; display: grid; gap: .45em; }
.vpf-single .vpf-card > ul { list-style: disc; }
.vpf-single .vpf-card > ol { list-style: decimal; }