/*
 * Intentional deviations from the live Webflow site (QA round 3, 2026-09-29).
 * site.css is the live stylesheet verbatim; everything here fixes a defect that exists on
 * alwaysbeyond.com too, on Iryna's instruction ("fix any issues you find even if they are
 * issues on the live site"). Each rule names the finding. Listed in BLOCKERS.md §12.
 */

/* #3 /managed-it-service: the pricing-table section added its own 136px above and below on top
   of the neighbouring sections' 136px, so the table sat in ~270px gaps. The neighbours already
   provide the site's section rhythm; keep one gap, not two. (Tablet/phone already trim it.) */
@media screen and (min-width: 992px) {
  .padding-vertical--table.is-managed { padding-top: 0; padding-bottom: 0; }
}

/* #9 /shadow-ai-assessment: the decorative oval was anchored 12rem below its section
   (bottom:-12rem), so from 992px to ~1440px its curve ran under the next section's heading and
   intro ("Sense-check this with your own AI"). Keep the oval inside its own section. */
@media screen and (min-width: 992px) {
  .mission--bg-wrapper.is-shadow-ai { bottom: 3rem; } /* lowest point clears the cards' 2rem corners */
}

/* #8 AI plan calculator team-size stepper (markup added by enhanceNumberSteppers). */
.ab-stepper { position: relative; width: 100%; }
.ab-stepper > input { width: 100%; padding-right: 7.5rem; -moz-appearance: textfield; appearance: textfield; }
.ab-stepper > input::-webkit-outer-spin-button,
.ab-stepper > input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ab-stepper__controls { position: absolute; top: 50%; right: .5rem; transform: translateY(-50%); display: flex; gap: .5rem; }
.ab-stepper__btn { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--blue); background: transparent; color: var(--blue); font: inherit; font-size: 1.5rem; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .2s, color .2s; }
.ab-stepper__btn:hover:not(:disabled), .ab-stepper__btn:focus-visible { background: var(--blue); color: var(--true-white); outline: none; }
.ab-stepper__btn:disabled { opacity: .35; cursor: default; }

/* #10 tables at phone width (tagged by stackTables in runtime/fixes.ts). Live scrolls 620–1280px
   tables sideways inside a 375px screen with no hint, so value columns read as cut off.
   List tables (arrow | struggle/question | answer): arrow beside the title, answer below. */
@media screen and (max-width: 767px) {
  .table--content-wrapper:has(.ab-stack), .table--content-wrapper-v2:has(.ab-stack), .table--managed-ai:has(.ab-stack) { overflow: visible; }
  .ab-stack--list.pricing-table_component { display: block; width: 100%; min-width: 0; }
  .ab-stack--list .pricing-table_header { display: none; }
  .ab-stack--list .pricing-table_body { display: block; }
  .ab-stack--list .pricing-table_row { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; column-gap: 1rem; row-gap: 0; align-items: start; }
  .ab-stack--list .pricing-table_cell { display: block; width: auto; min-width: 0; }
  .ab-stack--list .pricing-table_cell.is-category { grid-row: 1 / span 2; padding-bottom: 0; }
  .ab-stack--list .pricing-table_cell.is-mid { padding-bottom: 0; }
  .ab-stack--list .pricing-table_cell:not(.is-category):not(.is-mid) { padding-top: .5rem; }
  .ab-stack--list .pricing-table_cell--heading-wrapper { height: auto; min-height: 0; }
  .ab-stack--list .pricing-table_cell--sub-wrapper,
  .ab-stack--list .pricing-table_cell--content-wrapper { width: auto; min-width: 0; max-width: none; margin: 0; flex: 1 1 auto; height: auto; min-height: 0; }
  .ab-stack--list .pricing-table_cell--heading-wrapper.is-item { align-items: stretch; }
  .ab-stack--list .pricing-table_cell--sub-wrapper > * { width: 100%; text-align: left; }
}

/* Comparison tables: one card per feature; values side by side, each labelled by its column. */
@media screen and (max-width: 767px) {
  .ab-stack--compare { display: block; width: 100%; min-width: 0; }
  .ab-stack--compare thead { display: none; }
  .ab-stack--compare tbody { display: block; }
  .ab-stack--compare tr { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 1rem; row-gap: .75rem; padding: 1.25rem 0; border-bottom: 1px solid var(--mid-grey); }
  /* cells carry fixed widths from more specific table rules; neutralise them inside the stack */
  .ab-stack--compare td { display: block; width: auto !important; min-width: 0 !important; max-width: none !important; padding: 0; border: 0; }
  .ab-stack--compare td:first-child { grid-column: 1 / -1; }
  .ab-stack--compare td[data-label]::before { content: attr(data-label); display: block; margin-bottom: .25rem; font-size: .75rem; line-height: 1.2; letter-spacing: .02em; text-transform: uppercase; opacity: .7; }
  .ab-stack--compare td * { overflow-wrap: break-word; white-space: normal; width: auto !important; min-width: 0 !important; max-width: none !important; flex: 0 1 auto; height: auto; min-height: 0; margin: 0; text-align: left !important; justify-content: flex-start !important; align-items: flex-start; }
}

/* #10 /blog search at tablet/phone: the Search button is absolutely positioned over the field,
   so typed text and the placeholder ran underneath it (68px at 375, 15px at 768). */
@media screen and (max-width: 991px) { #Search-Field.cms-search-field { padding-right: 1.5rem; } }
@media screen and (max-width: 767px) { #Search-Field.cms-search-field { padding-right: 4.75rem; text-overflow: ellipsis; } }

/* #10 blog cards: date and read time shrank inside a non-wrapping row, breaking mid-phrase
   ("September 17, / 2026 · 8 mins / read"). Keep each whole and let the row wrap instead. */
.blog_meta-wrapper { flex-wrap: wrap; row-gap: .25rem; }
.blog_meta-wrapper > * { white-space: nowrap; }

/* #10 mobile menu button: the hamburger's hit area was its 24x24 icon. Give it a 44x44 target
   (WCAG 2.5.5 / Apple HIG) without moving the icon: padding out, negative margin back. */
@media screen and (max-width: 991px) {
  .navbar2_menu-button.w-nav-button { padding: 10px; margin: -10px; box-sizing: content-box; }
}

/* Nav dropdown items (QA round 3, Iryna): the current page was marked by an off-palette cream
   (#f8f7f0) hugging the text with no padding, and hover had no background at all. One state for
   both: a padded brand-grey panel with blue text; the negative margin keeps the text aligned. */
@media screen and (min-width: 992px) {
  .nav-items-wrap:has(> .nav_link.is-dropdown) { row-gap: .25rem; } /* 32px item + 4px = the original 36px rhythm */
  .nav-items-wrap .nav_link.is-dropdown { padding: .25rem .75rem; margin: 0 -.75rem; border-radius: .75rem; }
  .nav-items-wrap .nav_link.is-dropdown:hover,
  .nav-items-wrap .nav_link.is-dropdown.w--current { background-color: var(--grey); color: var(--blue); }
}

/* Footer top row (QA round 3, Iryna): logo left, main CTA right, white divider under the row
   (the same 1px white rule the footer uses above the copyright line). */
.ab-footer-cta { display: inline-flex !important; }
.footer--left-wrapper.is-top { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; width: 100%; padding-bottom: 2.5rem; border-bottom: 1px solid var(--true-white); }
.footer--left-wrapper.is-top .footer4_logo-link { margin: 0; }
@media screen and (max-width: 479px) {
  .footer--left-wrapper.is-top { flex-direction: column; align-items: flex-start; }
}