/* ============================================================
   PromoShop — Price-Band Landing Pages: page-specific CSS
   ------------------------------------------------------------
   Drop this into the theme as a page-specific stylesheet, or
   append to the price-band Blade template's enqueued styles.
   The live theme already provides the CSS custom properties
   (--primary, --secondary, etc.) referenced below. The :root
   block here is a safety fallback only.
   ============================================================ */

/* Full CSS variable set, verbatim from the live theme's inline page block (so the
   live theme's loaded CSS resolves all custom-property references correctly) */
:root {
  --primary: #00426b;
  --secondary: #1693ec;
  --white: #ffffff;
  --sub-text: #adadad;
  --blue-background: #ecf6fd;
  --light-blue-background: #D0E9FB3B;
  --light-background: #d0e9fb3b;
  --banner-gradient: linear-gradient(to right, var(--secondary) 0%, #1693EC00 100%);
  --light-blue: #42AFDE;
  --light-green: #84C7C8;
  --purple: #B394C0;
  --yellow: #EDC570;
  --light-yellow: #EBE869;
  --border-color: #e1e8ed;
  --blue-border: #d0e9fb;
  --red: #ff0000;
  --light-blue-border: #D0E9FB78;
  --title: #1C244B;
}

/* ---- Compare table ---- */
.under2-compare-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.under2-compare-table th,
.under2-compare-table td { padding: 1rem 1.25rem; text-align: left; border-bottom: 1px solid var(--blue-border); vertical-align: top; }
.under2-compare-table thead th { background: var(--primary); color: #fff; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; text-align: center; }
.under2-compare-table thead th.highlight { background: var(--secondary); }
.under2-compare-table .row-label { font-weight: 700; color: var(--primary); width: 22%; background: var(--blue-background); }
.under2-compare-table td.highlight { background: rgba(22,147,236,0.08); border-left: 3px solid var(--secondary); border-right: 3px solid var(--secondary); }
.under2-compare-table tbody tr:last-child td.highlight { border-bottom: 3px solid var(--secondary); }
.under2-compare-table tbody tr:first-child td.highlight { border-top: 3px solid var(--secondary); }

/* ---- Use case cards (re-skin of theme's card pattern) ---- */
.under2-usecase { background: var(--blue-background); border-radius: 8px; padding: 1.5rem; border-left: 4px solid var(--secondary); height: 100%; }
.under2-usecase h4 { color: var(--primary); margin-bottom: 0.5rem; }
.under2-usecase a { color: var(--secondary); font-weight: 600; }

/* ---- FAQ accordion ---- */
.under2-faq-wrap { max-width: 920px; margin: 0 auto; }
.under2-faq-item {
  background: #fff;
  border: 1px solid var(--blue-border);
  border-radius: 8px;
  margin-bottom: 0.85rem;
  box-shadow: 0 1px 3px rgba(0,66,107,0.04);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.under2-faq-item[open] { border-color: var(--secondary); box-shadow: 0 4px 12px rgba(22,147,236,0.10); }
.under2-faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.35rem 1.5rem;
  font-weight: 600;
  color: var(--primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  line-height: 1.4;
}
.under2-faq-item summary::-webkit-details-marker { display: none; }
.under2-faq-item summary::after {
  content: "+";
  font-size: 1.75rem;
  color: var(--secondary);
  font-weight: 400;
  flex-shrink: 0;
  line-height: 1;
}
.under2-faq-item[open] summary::after { content: "−"; }
.under2-faq-item .answer { padding: 0 1.5rem 1.5rem; line-height: 1.7; }
.under2-faq-item .answer p { margin: 0; }

/* ---- Price-band tabs (sits between breadcrumb and grid) ---- */
.price-band-tabs { background: #fff; border-bottom: 1px solid var(--blue-border); padding: 1.1rem 0; }
.price-band-tabs .container { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.price-band-tabs .label-prefix { font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: 0.05em; margin-right: 0.5rem; }
.price-band-tabs .tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.price-band-tabs .tab { display: inline-block; padding: 0.6rem 1.25rem; background: var(--blue-background); border: 1px solid var(--blue-border); border-radius: 99px; color: var(--primary); font-weight: 600; text-decoration: none; }
.price-band-tabs .tab:hover { background: var(--secondary); color: #fff; border-color: var(--secondary); }
.price-band-tabs .tab.current { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ---- Breadcrumb trail above H1 ---- */
.under2-trail { color: #666; margin-bottom: 0.5rem; }
.under2-trail a { color: var(--primary); font-weight: 500; }
.under2-trail .current { color: var(--secondary); font-weight: 600; }
.under2-trail .sep { margin: 0 0.4rem; color: #999; }

/* ---- Editorial: constrain width, generous paragraph spacing ---- */
.under2-editorial-wrap { max-width: 820px; margin: 0 auto; }
.under2-editorial-wrap h3 { margin-top: 2.5rem; margin-bottom: 1rem; line-height: 1.3; }
.under2-editorial-wrap h3:first-child { margin-top: 0; }
.under2-editorial-wrap p { margin-bottom: 1.25rem; line-height: 1.75; }
.under2-editorial-wrap p:last-child { margin-bottom: 0; }
.under2-editorial-wrap ul { padding-left: 1.5rem; margin: 0.5rem 0 1.5rem; }
.under2-editorial-wrap ul li { margin-bottom: 0.55rem; line-height: 1.7; }
.under2-editorial-wrap ul li:last-child { margin-bottom: 0; }

/* Final-section breathing room before footer */
.under2-bottom-spacer { padding-bottom: 2.5rem; }

/* contact-block / footer transition handled by live theme (two-tone gradient on .contact-block). No overrides. */

/* Section backgrounds (theme has section-padding-y for spacing) */
.under2-bg-blue { background: var(--blue-background); }

/* ---- SEO/AEO additions (font sizes match body: 1rem) ---- */
.under2-pagemeta { font-size: 1rem; color: var(--sub-text); font-style: italic; margin: 0.4rem 0 0; }
.under2-definition {
  background: #fff; border-left: 4px solid var(--secondary); border-radius: 6px;
  padding: 1.1rem 1.35rem; margin-top: 1rem; font-size: 1rem; line-height: 1.7; color: #313131;
}
.under2-definition strong { color: var(--primary); }
.under2-listicle-wrap { max-width: 880px; margin: 0 auto; }
.under2-listicle-item {
  display: flex; gap: 1.1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--blue-border);
}
.under2-listicle-item:last-child { border-bottom: none; }
.under2-listicle-num {
  flex-shrink: 0; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--secondary); color: #fff; font-family: 'Montserrat', sans-serif;
  font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
}
.under2-listicle-item h3 { font-size: 1.15rem; margin: 0 0 0.35rem; }
.under2-listicle-item h3 .price { color: var(--secondary); font-weight: 700; }
.under2-listicle-item p { margin: 0; font-size: 1rem; line-height: 1.7; color: #313131; }
.under2-citation {
  background: var(--blue-background); border-radius: 6px; padding: 1rem 1.25rem;
  margin: 1.25rem 0; font-size: 1rem; line-height: 1.7; color: #313131; border-left: 3px solid var(--primary);
}
.under2-citation strong { color: var(--primary); }