/*
 * AquaForge Page-Specific Styles
 * Moodboard visual rhythm: alternating sections, card treatments, heading scale
 */

/* ========================================
   Inline Demo Form (hero CTAs replacement)
   Single row: Name | Email | Company | [Book a Demo]
   Designed for use inside dark/navy cover blocks.
   ======================================== */

/* The block group wrapping the inline form has contentSize:900px set in the
   block editor, which WordPress enforces via a generated .wp-container-* rule
   (max-width:900px, specificity 0,1,0). Override it to 1100px so the fields
   row gets the full visual width the user expects. */
.is-layout-constrained > .wpcf7:has(.af-inline-form) {
  max-width: 1100px;
}

/* .af-inline-form is a flex column; align-items:center centers every direct
   child (submit, spinner) without fighting margin:auto cascade issues.
   The fields <p> stretches to full width via align-self:stretch. */
.af-inline-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative; /* anchor for ghost absolute positioning */
}

.af-inline-form > p {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 8px;
  align-self: stretch; /* fields row fills full container width */
  margin: 8px 0 0;
}

.af-inline-form br,
.af-inline-form > p input[type="hidden"],
.af-inline-form > p .af-form-break {
  display: none; /* keep these out of the grid so auto-fit sees only 3 field columns */
}

.af-inline-form .wpcf7-form-control-wrap {
  display: flex;
}

.af-inline-form input[type="text"],
.af-inline-form input[type="email"] {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid rgb(255 255 255 / 40%);
  border-radius: 6px;
  background: rgb(255 255 255 / 12%);
  color: #fff;
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
  font-size: 15px;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}

/* Override browser autofill which forces its own background/text color */
.af-inline-form input:-webkit-autofill,
.af-inline-form input:-webkit-autofill:hover,
.af-inline-form input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #1B3A5C inset;
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
}

.af-inline-form input[type="text"]::placeholder,
.af-inline-form input[type="email"]::placeholder {
  color: rgb(255 255 255 / 60%);
}

.af-inline-form input[type="text"]:focus,
.af-inline-form input[type="email"]:focus {
  outline: none;
  border-color: var(--af-cyan, #2EC4D4);
  background: rgb(255 255 255 / 18%);
}

.af-inline-form .wpcf7-submit {
  margin-top: 12px; /* gap between fields row and button */
  white-space: nowrap;
  padding: 10px 32px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  border: none;
}

/* Spans all columns with zero height — pushes submit to row 2.
   Kept for safety; grid-column on the submit already does the same job. */
.af-form-break {
  grid-column: 1 / -1;
  height: 0;
  margin: 0;
  padding: 0;
}

/* Invisible Turnstile ghost — absolute so it's out of the grid flow.
   If Cloudflare ever needs a visible challenge it floats below the form. */
.af-turnstile-ghost {
  position: absolute;
  width: 0;
  height: 0;
  overflow: visible;
  bottom: 0;
  left: 0;
}

.af-turnstile-ghost .cf-turnstile {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 300px;
  z-index: 10;
}

/* Validation messages */
.af-inline-form .wpcf7-not-valid-tip {
  font-size: 12px;
  color: #fca5a5;
  margin-top: 2px;
}

.af-inline-form ~ .wpcf7-response-output {
  margin: 8px 0 0;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  border: none;
}

.af-inline-form ~ .wpcf7-mail-sent-ok {
  background: rgb(46 196 212 / 20%);
  color: #fff;
}

.af-inline-form ~ .wpcf7-validation-errors,
.af-inline-form ~ .wpcf7-mail-sent-ng {
  background: rgb(220 38 38 / 25%);
  color: #fff;
}

@media (width <= 600px) {
  .af-inline-form > p {
    grid-template-columns: 1fr; /* stack fields vertically on mobile */
  }

  .af-inline-form .wpcf7-submit {
    align-self: stretch; /* full-width button on mobile */
    width: auto;
  }
}

/* ========================================
   Full-bleed page treatment
   Any page whose content starts with a full-bleed cover/group section gets:
   - hidden default page title (hero has its own h1)
   - zero padding/margin around the content so sections sit flush with header/footer
   ======================================== */

body:has(.entry-content > .wp-block-cover.alignfull:first-child) .entry-header,
body:has(.entry-content > .wp-block-group.alignfull:first-child) .entry-header {
  display: none;
}

body:has(.entry-content > .wp-block-cover.alignfull:first-child) article.post,
body:has(.entry-content > .wp-block-group.alignfull:first-child) article.post {
  padding: 0;
  margin: 0;
}

body:has(.entry-content > .wp-block-cover.alignfull:first-child) [class*="ct-container"],
body:has(.entry-content > .wp-block-group.alignfull:first-child) [class*="ct-container"],
body:has(.entry-content > .wp-block-cover.alignfull:first-child) main#main,
body:has(.entry-content > .wp-block-group.alignfull:first-child) main#main,
body:has(.entry-content > .wp-block-cover.alignfull:first-child) .site-main,
body:has(.entry-content > .wp-block-group.alignfull:first-child) .site-main,
body:has(.entry-content > .wp-block-cover.alignfull:first-child) article.post,
body:has(.entry-content > .wp-block-group.alignfull:first-child) article.post,
body:has(.entry-content > .wp-block-cover.alignfull:first-child) .entry-content,
body:has(.entry-content > .wp-block-group.alignfull:first-child) .entry-content {
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  /* flow-root creates a block formatting context so any descendant margin-top
     cannot escape and collapse out through this element onto the body. */
  display: flow-root;
}

/* Also neutralize any hero-section wrapper Blocksy injects above the post content
   on pages using the "Hero Section" layout. When empty (no title), it can leave
   phantom margins from child elements. */
body:has(.entry-content > .wp-block-cover.alignfull:first-child) .hero-section,
body:has(.entry-content > .wp-block-group.alignfull:first-child) .hero-section {
  display: none;
}

body:has(.entry-content > .wp-block-cover.alignfull:first-child) .entry-content,
body:has(.entry-content > .wp-block-group.alignfull:first-child) .entry-content {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

body:has(.entry-content > .wp-block-cover.alignfull:first-child) .entry-content > *:first-child,
body:has(.entry-content > .wp-block-group.alignfull:first-child) .entry-content > *:first-child {
  margin-top: 0;
}

body:has(.entry-content > .wp-block-cover.alignfull:first-child) .entry-content > *:last-child,
body:has(.entry-content > .wp-block-group.alignfull:first-child) .entry-content > *:last-child {
  margin-bottom: 0;
}

/* ========================================
   Cover-block Hero (.af-hero on native wp:cover)
   Image stays full-bleed; text/subtext/buttons live in a column that lines
   up with the other sections of the page (max-width 1100px, left-aligned).
   ======================================== */

.wp-block-cover.af-hero {
  /* Vertically center the content column within the hero */
  align-items: center;
  justify-content: flex-start;
}

.wp-block-cover.af-hero .wp-block-cover__inner-container {
  max-width: 1100px;
  width: 100%;
  margin-inline: auto;
  padding-inline: 20px;
}

/* Let the H1 grow to the container width — kill the 760px cap from earlier. */
.entry-content .wp-block-cover.af-hero h1 {
  max-width: none;
}

.wp-block-cover.af-hero .wp-block-buttons {
  justify-content: flex-start;
}

/* ========================================
   Hero Sub-headline
   ======================================== */

/* ========================================
   Hero Full-bleed with Background Image
   ======================================== */

.af-hero-full {
  position: relative;
  background-image: url("../img/stock/hero-water-plant.jpg");
  background-size: cover;
  background-position: center;
  padding: 100px 20px 80px;
  min-height: 480px;
  display: flex;
  align-items: center;
}

.af-hero-full__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgb(27 58 92 / 88%) 0%, rgb(27 58 92 / 72%) 100%);
}

.af-hero-full__content {
  position: relative;
  z-index: 1;
}

.entry-content .af-hero-full h1,
.af-hero-full h1 {
  font-size: 52px;
  font-weight: 700;
  color: #FFF;
  line-height: 1.15;
  margin-bottom: 16px;
  max-width: 760px;
  text-shadow: 0 2px 20px rgb(0 0 0 / 30%);
}

.af-hero-full .af-hero__sub {
  font-size: 18px;
  line-height: 1.7;
  color: rgb(255 255 255 / 80%);
  max-width: 600px;
  margin-bottom: 32px;
}

.af-hero-full__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

@media (width <= 768px) {
  .af-hero-full {
    padding: 60px 16px 48px;
    min-height: 360px;
  }

  .af-hero-full h1 {
    font-size: 32px;
  }
}

.af-hero__sub {
  font-size: 18px;
  line-height: 1.7;
  color: var(--af-slate, #64748B);
  max-width: 700px;
  margin-bottom: 32px;
}

/* ========================================
   Problem Grid (3-col)
   ======================================== */

.af-problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (width <= 768px) {
  .af-problem-grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   Advisors Grid (4-col)
   ======================================== */

.af-advisors__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

@media (width <= 768px) {
  .af-advisors__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (width <= 480px) {
  .af-advisors__grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   Button on dark background
   ======================================== */

.af-btn--on-dark {
  color: #FFF;
  border-color: rgb(255 255 255 / 50%);
}

.af-btn--on-dark:hover {
  background-color: rgb(255 255 255 / 15%);
  border-color: #FFF;
  color: #FFF;
}

/* ========================================
   Global Section Rhythm
   Alternating white / ice gray backgrounds per moodboard.
   Odd sections: white. Even sections: ice gray.
   ======================================== */

/*
 * Full-bleed sections.
 * Blocksy clips overflow, so we can't use the -50vw trick.
 * Instead: remove Blocksy's content max-width on pages with sections,
 * and let .af-section__inner constrain the content.
 */

/* Remove Blocksy content constraint when our sections are present */
.entry-content:has(.af-section-white, .af-section-ice, .af-section-navy) {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.af-section-white,
.af-section-ice,
.af-section-navy {
  padding: 64px 20px;
}

.af-section-white {
  background-color: #FFF;
}

.af-section-ice {
  background-color: #F5F8FA;
}

.af-section-navy {
  background-color: #1B3A5C;
  color: #FFF;
}

.af-section-navy h2,
.af-section-navy h3 {
  color: #FFF;
}

.af-section-navy p {
  color: rgb(255 255 255 / 80%);
}

.af-section__inner {
  max-width: 1100px;
  margin: 0 auto;
}

/* ========================================
   Heading Scale (moodboard: H1 48-56px, H2 32-40px)
   ======================================== */

.entry-content h1,
.af-section-white h1,
.af-section-ice h1 {
  font-size: 48px;
  font-weight: 700;
  color: var(--af-navy, #1B3A5C);
  line-height: 1.15;
  margin-bottom: 16px;
}

.entry-content h2,
.af-section-white h2,
.af-section-ice h2 {
  font-size: 36px;
  font-weight: 700;
  color: var(--af-navy, #1B3A5C);
  line-height: 1.2;
  margin-bottom: 16px;
}

.entry-content h3 {
  font-size: 22px;
  font-weight: 700;
  color: var(--af-navy, #1B3A5C);
  line-height: 1.3;
}

/* Hero: generous whitespace above the fold */
.entry-content > h1:first-child,
.entry-content > .wp-block-heading:first-child {
  margin-top: 24px;
}

.entry-content > h1 + p,
.entry-content > .wp-block-heading + p {
  font-size: 18px;
  line-height: 1.7;
  color: var(--af-slate, #64748B);
  max-width: 700px;
  margin-bottom: 32px;
}

/* ========================================
   Card Treatment (moodboard: white bg, 1px border, shadow hover, 12px radius)
   ======================================== */

.af-card {
  background: #FFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 24px;
  transition: box-shadow 0.15s ease;
}

.af-card:hover {
  box-shadow: 0 4px 16px rgb(27 58 92 / 8%);
}

/* ========================================
   Problem Statement 3-column
   ======================================== */

.af-problem-cols {
  max-width: 1100px;
  margin: 0 auto;
}

.af-problem-cols > h2 {
  text-align: center;
  margin-bottom: 40px;
}

.af-problem-cols .wp-block-columns {
  gap: 24px;
}

.af-problem-col,
.wp-block-column.af-problem-col {
  background: #FFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 28px 24px;
  transition: box-shadow 0.15s ease;
}

.af-problem-col:hover {
  box-shadow: 0 4px 16px rgb(27 58 92 / 8%);
}

.af-problem-col__icon {
  font-size: 36px;
  margin-bottom: 12px;
}

.af-problem-col h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--af-navy, #1B3A5C);
  margin-bottom: 8px;
}

.af-problem-col p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--af-slate, #64748B);
}

.af-problem-col__data {
  display: inline-block;
  margin-top: 16px;
  padding: 8px 14px;
  background: var(--af-ice, #F5F8FA);
  border-left: 3px solid var(--af-cyan, #2EC4D4);
  border-radius: 0 6px 6px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--af-navy, #1B3A5C);
}

.af-problem-col__source {
  font-size: 12px;
  color: var(--af-slate, #64748B);
  font-style: italic;
  margin-top: 4px;
}

/* ========================================
   AI Conversation Sample
   ======================================== */

.af-ai-sample {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.af-ai-sample h2 {
  margin-bottom: 8px;
}

.af-ai-sample__subtitle {
  font-size: 17px;
  color: var(--af-slate, #64748B);
  margin-bottom: 28px;
}

.af-ai-sample__image {
  border-radius: 12px;
  box-shadow: 0 4px 24px rgb(27 58 92 / 10%);
  max-width: 100%;
  height: auto;
}

.af-ai-sample__caption {
  margin-top: 16px;
  font-size: 14px;
  font-style: italic;
  color: var(--af-slate, #64748B);
}

/* ========================================
   Advisory Board
   ======================================== */

.af-advisors {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.af-advisors > h2 {
  margin-bottom: 36px;
}

.af-advisors .wp-block-columns {
  gap: 24px;
}

.af-advisor-card,
.wp-block-column.af-advisor-card {
  text-align: center;
  background: #FFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 28px 20px;
  transition: box-shadow 0.15s ease;
}

.af-advisor-card:hover {
  box-shadow: 0 4px 16px rgb(27 58 92 / 8%);
}

.af-advisor-card__photo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--af-cyan, #2EC4D4), var(--af-teal, #0A8F7F));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  font-size: 24px;
  font-weight: 700;
  color: #FFF;
}

.af-advisor-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--af-navy, #1B3A5C);
  margin: 0 0 4px;
}

.af-advisor-card__title {
  font-size: 13px;
  color: var(--af-slate, #64748B);
  line-height: 1.4;
}

/* ========================================
   Final CTA Block
   ======================================== */

.af-final-cta {
  padding: 72px 20px;
  text-align: center;
}

.af-final-cta h2 {
  margin-bottom: 12px;
}

.af-final-cta p {
  font-size: 17px;
  color: var(--af-slate, #64748B);
  margin-bottom: 28px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.af-final-cta__buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ========================================
   RI Page: Hero
   ======================================== */

.af-ri-hero {
  max-width: 1000px;
  margin: 0 auto;
}

.af-ri-hero h1 {
  margin-bottom: 12px;
}

.af-ri-hero__sub {
  font-size: 20px;
  color: var(--af-slate, #64748B);
  margin-bottom: 24px;
  line-height: 1.5;
}

.af-ri-hero__buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.af-ri-hero__screenshot {
  margin-top: 36px;
  background: var(--af-ice, #F5F8FA);
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 48px;
  text-align: center;
  color: var(--af-slate, #64748B);
  font-size: 14px;
  box-shadow: 0 4px 24px rgb(27 58 92 / 6%);
}

/* ========================================
   RI Page: Use Cases
   ======================================== */

.af-use-case {
  max-width: 900px;
  margin: 0 auto;
  padding: 48px 0;
}

.af-use-case + .af-use-case {
  border-top: 1px solid #E2E8F0;
}

.af-use-case h2 {
  font-size: 28px;
  margin-bottom: 24px;
}

.af-use-case__detail {
  margin-bottom: 16px;
}

.af-use-case__label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--af-cyan, #2EC4D4);
  margin-bottom: 6px;
}

.af-use-case__detail p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--af-slate, #64748B);
}

.af-use-case__tier {
  margin-top: 20px;
  padding: 14px 18px;
  background: var(--af-ice, #F5F8FA);
  border-left: 3px solid var(--af-cyan, #2EC4D4);
  border-radius: 0 8px 8px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--af-navy, #1B3A5C);
}

/* ========================================
   RI Page: How It Works
   ======================================== */

.af-how-it-works {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.af-how-it-works > h2 {
  margin-bottom: 40px;
}

.af-how-it-works .wp-block-columns {
  gap: 32px;
}

.af-how-step {
  background: #FFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 28px 20px;
  text-align: center;
}

.af-how-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--af-cyan, #2EC4D4);
  color: var(--af-navy, #1B3A5C);
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 14px;
}

.af-how-step h3 {
  font-size: 17px;
  margin-bottom: 8px;
}

.af-how-step p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--af-slate, #64748B);
}

/* ========================================
   RI Page: Differentiators
   ======================================== */

.af-differentiators {
  max-width: 900px;
  margin: 0 auto;
}

.af-differentiators > h2 {
  text-align: center;
  margin-bottom: 28px;
}

.af-differentiator {
  padding: 16px 0;
  border-bottom: 1px solid #E2E8F0;
}

.af-differentiator:last-child {
  border-bottom: none;
}

.af-differentiator strong {
  color: var(--af-navy, #1B3A5C);
}

.af-differentiator p {
  color: var(--af-slate, #64748B);
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
}

/* ========================================
   Pricing Anchor + GD Teaser
   ======================================== */

.af-pricing-anchor {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  background: #FFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 40px 28px;
  box-shadow: 0 2px 12px rgb(27 58 92 / 5%);
}

.af-pricing-anchor h2 {
  font-size: 24px;
  margin-bottom: 12px;
}

.af-gd-teaser {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.af-gd-teaser h2 {
  font-size: 24px;
  margin-bottom: 8px;
}

/* ========================================
   Pricing Page: FAQ
   ======================================== */

.af-faq {
  max-width: 800px;
  margin: 0 auto;
}

.af-faq > h2 {
  text-align: center;
  margin-bottom: 28px;
}

.af-faq details {
  border-bottom: 1px solid #E2E8F0;
  padding: 18px 0;
}

.af-faq summary {
  font-size: 16px;
  font-weight: 600;
  color: var(--af-navy, #1B3A5C);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.af-faq summary::after {
  content: "+";
  font-size: 20px;
  color: var(--af-cyan, #2EC4D4);
  font-weight: 700;
  flex-shrink: 0;
}

.af-faq details[open] summary::after {
  content: "−";
}

.af-faq summary::-webkit-details-marker {
  display: none;
}

.af-faq details p {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--af-slate, #64748B);
}

/* ========================================
   Enterprise Callout
   ======================================== */

.af-enterprise {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  background: #FFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 40px 28px;
}

.af-enterprise h2 {
  font-size: 24px;
  margin-bottom: 8px;
}

.af-enterprise p {
  color: var(--af-slate, #64748B);
  margin-bottom: 16px;
}

/* ========================================
   Responsive
   ======================================== */

@media (width <= 768px) {
  .entry-content h1,
  .af-section-white h1,
  .af-section-ice h1 {
    font-size: 32px;
  }

  .entry-content h2,
  .af-section-white h2,
  .af-section-ice h2 {
    font-size: 26px;
  }

  .af-section-white,
  .af-section-ice,
  .af-section-navy {
    padding: 40px 16px;
  }
}

/* ========================================
   Country Combobox (CF7 contact form)
   Native datalist is replaced with an ARIA combobox for keyboard nav.
   ======================================== */

.af-combobox {
  position: relative;
}

.af-combobox__listbox {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  margin: 4px 0 0;
  padding: 4px 0;
  list-style: none;
  max-height: 260px;
  overflow-y: auto;
  background: #FFF;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgb(27 58 92 / 12%);
}

.af-combobox__option {
  padding: 8px 14px;
  cursor: pointer;
  font-size: 15px;
  color: var(--af-navy, #1B3A5C);
  line-height: 1.4;
}

.af-combobox__option:hover,
.af-combobox__option.is-highlighted {
  background: var(--af-ice, #F5F8FA);
  color: var(--af-navy, #1B3A5C);
}

/* ========================================
   Blog Hero (extension of .af-hero)
   ======================================== */

.af-blog-hero .wp-block-cover__inner-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.af-blog-hero h1 {
  margin: 0;
}

.af-blog-hero > .wp-block-cover__inner-container > p:nth-of-type(2) {
  /* The one-liner subtitle */
  max-width: 640px;
  margin: 0 0 16px;
}

/* ========================================
   Blog Search Bar
   ======================================== */

.af-blog-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgb(255 255 255 / 95%);
  border-radius: 10px;
  padding: 6px 6px 6px 16px;
  max-width: 560px;
  box-shadow: 0 8px 32px rgb(0 0 0 / 20%);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.af-blog-search:focus-within {
  box-shadow: 0 8px 32px rgb(0 0 0 / 30%), 0 0 0 3px rgb(46 196 212 / 40%);
  transform: translateY(-1px);
}

.af-blog-search__icon {
  color: var(--af-slate, #64748B);
  flex-shrink: 0;
}

.af-blog-search input[type="search"] {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--af-font-sans, "IBM Plex Sans"), sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--af-navy, #1B3A5C);
  padding: 10px 4px;
  min-width: 0;
}

.af-blog-search input[type="search"]::placeholder {
  color: var(--af-slate, #64748B);
  opacity: 0.8;
}

.af-blog-search input[type="search"]::-webkit-search-cancel-button {
  appearance: none;
}

.af-blog-search__submit {
  background: var(--af-cyan, #2EC4D4);
  color: var(--af-navy, #1B3A5C);
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  font-family: var(--af-font-sans, "IBM Plex Sans"), sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
  white-space: nowrap;
}

.af-blog-search__submit:hover,
.af-blog-search__submit:focus-visible {
  background: #22A5B3;
}

/* ========================================
   Blog Category Tabs
   ======================================== */

.af-blog-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.af-blog-tab {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 24px;
  background: rgb(255 255 255 / 10%);
  border: 1px solid rgb(255 255 255 / 25%);
  color: #FFF;
  font-family: var(--af-font-sans, "IBM Plex Sans"), sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  backdrop-filter: blur(4px);
}

.af-blog-tab:hover,
.af-blog-tab:focus-visible {
  background: rgb(255 255 255 / 20%);
  border-color: rgb(255 255 255 / 50%);
  color: #FFF;
  transform: translateY(-1px);
}

.af-blog-tab.is-active {
  background: var(--af-cyan, #2EC4D4);
  border-color: var(--af-cyan, #2EC4D4);
  color: var(--af-navy, #1B3A5C);
  font-weight: 600;
}

.af-blog-tab.is-active:hover {
  background: #22A5B3;
  border-color: #22A5B3;
  color: var(--af-navy, #1B3A5C);
}

/* ========================================
   Responsive
   ======================================== */

@media (width <= 768px) {
  .af-blog-hero {
    min-height: 460px !important;
  }

  .af-blog-hero h1 {
    font-size: 34px !important;
    line-height: 1.2 !important;
  }

  .af-blog-hero p[style*="font-size:20px"] {
    font-size: 16px !important;
  }

  .af-blog-search {
    padding: 4px 4px 4px 12px;
  }

  .af-blog-search__submit {
    padding: 10px 14px;
    font-size: 13px;
  }

  .af-blog-tab {
    padding: 8px 14px;
    font-size: 13px;
  }
}

@media (width <= 480px) {
  .af-blog-search__submit {
    /* Hide label text, keep button accessible */
    padding: 10px 12px;
  }
}