/* ===================================================
   ABBYY Pages — scoped under .abbyy-page
   abbyy-software-solutions  →  .abbyy-solutions-page
   abbyy-finereader-server   →  .abbyy-product-page
   =================================================== */

/* ── BASE ─────────────────────────────────────────── */
.abbyy-page {
  /* Design tokens — scoped to the wrapper like .model-page/.equipment.
     Without these, every `var(--navy)` / `font:… var(--noto)` resolves empty →
     invalid declarations (hero font-size lost, CTA bg transparent, teal→white). */
  --navy:#00256b; --footer:#1a3360; --teal:#2fa4a9; --dark:#333; --off:#f4f6fa; --white:#fff;
  --pjs:'Plus Jakarta Sans','Noto Sans',sans-serif;
  --noto:'Noto Sans',sans-serif;
  width:1920px; position:relative; background:#fff; overflow:clip
}

/* style.css κρύβει το footer αν δεν έχει .iid-cta-band — επαναφορά για ABBYY pages */
.wp-site-blocks > .iid-main--abbyy-solutions + footer.wp-block-template-part,
.wp-site-blocks > .iid-main--abbyy-product + footer.wp-block-template-part { display:block }
.abbyy-page .a { position:absolute }
.abbyy-page .vc { transform:translateY(-50%) }
.abbyy-page .nw { white-space:nowrap }
.abbyy-page .up { text-transform:uppercase }
.abbyy-page img { display:block }
.abbyy-page a { color:inherit; text-decoration:none }
.abbyy-page section { position:relative; width:1920px }
/* Reset browser default margins — elements are placed by coordinates (.a/.vc);
   default h3/p/ul margins shift them and inflate the .s-info column height. */
.abbyy-page h1, .abbyy-page h2, .abbyy-page h3, .abbyy-page h4,
.abbyy-page p, .abbyy-page ul, .abbyy-page ol { margin:0 }

/* ── SHARED HELPERS ───────────────────────────────── */
.abbyy-page .k {
  font:400 15px/1.4 var(--pjs); letter-spacing:-.075px; text-transform:uppercase
}
.abbyy-page .crumb {
  height:50px; display:flex; align-items:center; padding:0 212px;
  font:400 15px/1 var(--noto); color:var(--dark); text-transform:uppercase
}
.abbyy-page .crumb b { font-weight:600 }

/* checklist item (FineReader Server .det blocks) */
.abbyy-page .ck { position:relative; font:400 18px/1.6 var(--pjs); color:#333 }
.abbyy-page .ck svg { position:absolute; left:0 }
.abbyy-page .ck b { display:block; font-weight:700; color:var(--navy) }

/* accordion (Software Solutions) */
.abbyy-page .acc-h {
  width:100%; display:flex; justify-content:space-between; align-items:center;
  font:400 22px/1.6 var(--noto); color:var(--navy); text-align:left;
  background:none; border:0; cursor:pointer
}
.abbyy-page .acc-h[disabled] { cursor:default }
.abbyy-page .acc-h .t { width:320px }
.abbyy-page .acc-h .ic { width:32px; height:32px; flex:none; transition:transform .3s ease }
.abbyy-page .acc-h[aria-expanded="true"] .ic { transform:rotate(45deg) }
.abbyy-page .acc-item { display:flex; flex-direction:column }
.abbyy-page .acc-p {
  display:grid; grid-template-rows:1fr;
  transition:grid-template-rows .3s ease, margin-top .3s ease;
  margin-top:32px
}
.abbyy-page .acc-p.closed { grid-template-rows:0fr; margin-top:0 }
.abbyy-page .acc-p > div { overflow:hidden }
.abbyy-page .acc-p ul { list-style:disc; padding:0; font:400 18px/1.6 var(--pjs); color:#585b5b }
.abbyy-page .acc-p li { margin-left:27px }
.abbyy-page .s-acc hr { border:0; height:1px; background:#dfdfdf; margin:0 }

/* ── SHARED: PORTFOLIO TABLE ─────────────────────── */
.abbyy-page .s-port { background:var(--navy); color:#fff; overflow:hidden }
.abbyy-page .s-port .th { color:var(--teal); white-space:nowrap }
.abbyy-page .s-port .ln { left:213px; width:1499px; height:1px; background:var(--teal) }
.abbyy-page .s-port .nm { left:213px; font:500 36px/1.4 var(--noto) }
.abbyy-page .s-port .c { width:283px; font:400 18px/1.6 var(--pjs); color:rgba(244,246,250,.7) }
.abbyy-page .arrow-btn {
  left:1630px; width:82px; height:83px;
  display:grid; place-items:center;
  background:#fff; color:var(--navy);
  transition:background-color .2s ease, color .2s ease
}
.abbyy-page .arrow-btn svg { transition:transform .2s ease }
.abbyy-page .arrow-btn:hover,
.abbyy-page .arrow-btn:focus-visible { background:var(--teal); color:#fff }
.abbyy-page .arrow-btn:hover svg { transform:translateX(2px) }

/* ── SHARED: CTA ─────────────────────────────────── */
.abbyy-page .cta {
  position:relative; width:1920px; height:512px;
  background:var(--navy) no-repeat center/cover; color:#fff
}
.abbyy-page .cta h2 {
  left:960.5px; top:168.5px; transform:translate(-50%,-50%);
  font:400 70px/1.35 var(--pjs); letter-spacing:-1.4px; white-space:nowrap
}
.abbyy-page .cta h2 em { font-style:normal; color:var(--teal) }
.abbyy-page .cta p {
  left:960px; top:256.5px; transform:translate(-50%,-50%);
  font:400 22px/1.6 var(--pjs); white-space:nowrap
}
.abbyy-page .btn {
  top:326px; height:56px; display:flex; align-items:center; justify-content:center;
  font:400 15px/1.4 var(--noto); letter-spacing:-.075px; text-transform:uppercase
}
.abbyy-page .btn.solid {
  left:701px; width:264px; background:#fff; color:var(--navy);
  clip-path:polygon(16px 0,100% 0,100% 100%,0 100%,0 22px)
}
.abbyy-page .btn.ghost { left:987px; width:229px; color:#fff }
.abbyy-page .btn.ghost svg { position:absolute; inset:0 }
.abbyy-page .btn span { position:relative }

/* ══════════════════════════════════════════════════
   SOFTWARE SOLUTIONS  (.abbyy-solutions-page)
   ══════════════════════════════════════════════════ */

/* Hero */
.abbyy-solutions-page .hero {
  height:601px; overflow:hidden; position:relative; width:1920px
}

/* Intro */
.abbyy-solutions-page .s-intro { height:423px; color:var(--dark) }
.abbyy-solutions-page .s-intro h2 {
  left:208px; top:174px; width:897px;
  font:500 50px/1.2 var(--pjs); letter-spacing:-1px
}
.abbyy-solutions-page .s-intro p { font:400 18px/1.6 var(--pjs) }

/* Information section */
.abbyy-solutions-page .s-info { height:1569px; color:var(--dark) }
.abbyy-solutions-page .s-info .col {
  left:814px; top:151px; width:892px;
  display:flex; flex-direction:column; gap:42px;
  font:400 18px/1.6 var(--pjs)
}
.abbyy-solutions-page .s-info .g { display:flex; flex-direction:column; gap:20px }
.abbyy-solutions-page .s-info h3 { font:700 18px/1.6 var(--pjs); color:var(--navy) }
.abbyy-solutions-page .s-info ul { list-style:disc; padding:0 }
.abbyy-solutions-page .s-info li { margin-left:27px }

/* Portfolio (4 rows) */
.abbyy-solutions-page .s-port { height:1301px }
.abbyy-solutions-page .s-port .th { top:387.5px }

/* Accordion */
.abbyy-solutions-page .s-acc { height:954px; background:#f4f6fa }
.abbyy-solutions-page .s-acc .wrap {
  left:212px; top:0; height:954px;
  display:flex; gap:73px; align-items:center
}
.abbyy-solutions-page .s-acc .list {
  width:688px; display:flex; flex-direction:column; gap:32px; flex:none
}

/* ══════════════════════════════════════════════════
   FINEREADER SERVER  (.abbyy-product-page)
   ══════════════════════════════════════════════════ */

/* Product Hero */
.abbyy-product-page .p-hero { height:873px; overflow:hidden; background:#fff }
.abbyy-product-page .p-hero .half {
  left:0; top:0; width:960px; height:873px; background:#f4f6fa
}

/* Intro */
.abbyy-product-page .s-intro { height:735px; color:var(--dark) }

/* Detail */
.abbyy-product-page .s-det { height:1709px; color:var(--dark) }
.abbyy-product-page .side { left:216px; top:-36px; height:1745px; width:744px }
.abbyy-product-page .side nav { position:sticky; top:0; height:660px; width:744px }
.abbyy-product-page .side ul {
  position:absolute; left:0; top:182.5px; list-style:none; width:600px
}
.abbyy-product-page .side li a {
  position:relative; display:flex; align-items:center; height:52px;
  padding-left:47px; font:400 22px/1.6 var(--pjs); color:#333; transition:color .2s
}
.abbyy-product-page .side li a::before {
  content:""; position:absolute; left:18px; top:0; bottom:0;
  width:1px; background:var(--navy)
}
.abbyy-product-page .side li.on a {
  height:79px; padding-left:74px; font:500 24px/1.6 var(--pjs); color:var(--navy)
}
.abbyy-product-page .side li.on a::before { display:none }
.abbyy-product-page .side li a img { display:none; position:absolute; left:0; top:50%; width:42px; height:42px; transform:translateY(-50%) }
.abbyy-product-page .side li.on a img { display:block }
.abbyy-product-page .side li.on + li a::before,
.abbyy-product-page .side li:first-child:not(.on) a::before { top:11px }
.abbyy-product-page .side li:last-child a::before { bottom:8px }
.abbyy-product-page .side li:not(.on) a:hover { color:var(--navy) }
.abbyy-product-page .det {
  left:966px; top:161px; width:741px;
  display:flex; flex-direction:column; gap:93px
}
.abbyy-product-page .det .blk { position:relative; width:100%; scroll-margin-top:140px }
.abbyy-product-page .det h3 { font:500 36px/1.4 var(--pjs); color:#333; white-space:nowrap }
.abbyy-product-page .det .blk > h3.vc { position:absolute; left:0; top:25px }
.abbyy-product-page .caps {
  position:absolute; left:0; top:84px; width:847px;
  display:flex; flex-direction:column; gap:14px
}
.abbyy-product-page .feats {
  position:absolute; left:0; top:84px; width:847px;
  display:flex; flex-direction:column; gap:5px
}
.abbyy-product-page .ideal { display:flex; flex-direction:column; gap:22px }

/* Portfolio (3 rows) */
.abbyy-product-page .s-port { height:1153px }
.abbyy-product-page .s-port .th { top:354.5px }

/* ── RESPONSIVE ──────────────────────────────────── */
@media (max-width:899px) {
  .abbyy-page { width:100%; overflow:visible }
  /* padded flow containers: include padding in width:100% (avoid right-edge overflow) */
  .abbyy-page, .abbyy-page * { box-sizing:border-box }
  .abbyy-page section { width:100% !important; height:auto !important }
  /* full reset of the 1920px absolute canvas — inline left/top/width/height are
     overridden so everything reflows into normal flow (same pattern as model.css) */
  .abbyy-page .a { position:static !important; left:auto !important; top:auto !important;
    width:auto !important; height:auto !important; transform:none !important; margin:0 }
  .abbyy-page .vc { transform:none !important }
  /* allow nowrap labels to wrap on mobile — long EN text in a .nw element
     otherwise forces horizontal overflow (same reset as model/subcategory) */
  .abbyy-page .nw { white-space:normal !important }
  /* long unbreakable tokens (e.g. "low-code/no-code") in headings/text must
     break instead of overflowing the narrow viewport */
  .abbyy-page h1, .abbyy-page h2, .abbyy-page h3, .abbyy-page h4,
  .abbyy-page p, .abbyy-page li { overflow-wrap:break-word }
  .abbyy-page img { max-width:100% !important; height:auto }
  /* keep the hero dark tint as a covering overlay, with the text above it */
  .abbyy-solutions-page .hero > .a { position:absolute !important; inset:0 !important;
    width:auto !important; height:auto !important; background:rgba(0,24,70,.55) }
  .abbyy-solutions-page .hero > p,
  .abbyy-solutions-page .hero > h1 { position:relative; z-index:1 }

  /* Hero — Software Solutions */
  .abbyy-solutions-page .hero {
    height:auto; min-height:280px; display:flex; flex-direction:column;
    justify-content:center; padding:40px 24px 48px; background-size:cover !important
  }
  /* FIXES2 item 3 — the kicker+title are caught by the `.hero > .a{inset:0}`
     overlay rule, pinning them to the hero edge. Reset inset so they flow with
     the hero's 24px padding (indented like other titles); justify-content:center
     above centers them vertically. */
  .abbyy-solutions-page .hero > p.a,
  .abbyy-solutions-page .hero > h1.a {
    position:static !important; inset:auto !important; left:auto !important; top:auto !important
  }
  .abbyy-solutions-page .hero h1 {
    /* !important beats the inline font:…70px on the <h1 class="a"> */
    font-size:36px !important; line-height:1.3; margin-top:12px; width:auto
  }

  /* Hero — FineReader Server */
  .abbyy-product-page .p-hero { height:auto; display:flex; flex-direction:column }
  .abbyy-product-page .p-hero .half { width:100%; height:220px }
  .abbyy-product-page .p-hero > img { position:static !important; width:100% !important; height:220px !important; object-fit:cover }
  .abbyy-product-page .p-hero h1 {
    /* !important beats the inline font:…70px (item 10.1 — match other pages) */
    font-size:36px !important; line-height:1.3; width:auto; padding:24px 24px 32px
  }
  .abbyy-product-page .p-hero p { padding:16px 24px 0 }

  /* FIXES2 item 5 — breadcrumb directly under the cover image (before the title).
     The crumb is a flow sibling after .p-hero, so promote .p-hero's children to
     the wrapper flex (display:contents) and reorder: cover → crumb → title.
     Mobile only; desktop keeps the 1920 canvas untouched. */
  .abbyy-product-page { display:flex; flex-direction:column }
  .abbyy-product-page > .p-hero { display:contents }
  .abbyy-product-page > .p-hero > img,
  .abbyy-product-page > .p-hero > .half { order:1 }
  .abbyy-product-page > .crumb { order:2 }
  .abbyy-product-page > .p-hero > p,
  .abbyy-product-page > .p-hero > h1 { order:3 }
  .abbyy-product-page > *:not(.p-hero):not(.crumb) { order:4 }

  /* Breadcrumb — keep on one line (item 10.2); scroll if it can't fit rather
     than wrapping the labels onto a second line. */
  .abbyy-page .crumb { padding:0 24px; height:40px; font-size:13px;
    white-space:nowrap; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch }
  .abbyy-page .crumb::-webkit-scrollbar { display:none }

  /* Intro */
  .abbyy-page .s-intro { height:auto; padding:40px 24px }
  .abbyy-page .s-intro h2 {
    font-size:clamp(22px,5vw,38px); width:auto; margin-bottom:24px
  }
  .abbyy-page .s-intro p { width:auto; margin-bottom:16px }

  /* s-info */
  .abbyy-solutions-page .s-info { height:auto; padding:40px 24px }
  .abbyy-solutions-page .s-info .col {
    left:auto; top:auto; width:100%; margin-top:32px
  }
  .abbyy-solutions-page .s-info img { display:none }

  /* Side nav → hidden on mobile */
  .abbyy-product-page .s-det { height:auto; padding:40px 0 }
  .abbyy-product-page .side { display:none }
  .abbyy-product-page .det {
    position:static; left:auto; top:auto; width:100%; padding:0 24px; gap:48px
  }
  .abbyy-product-page .det .blk { height:auto !important }
  /* Item 10.3 — the section headings are `.blk > h3.vc{position:absolute}` in the
     base (specificity 0,4,1), which outranks a plain .det h3 rule, so they stayed
     absolute on mobile and dropped onto the capability list. Force static. */
  .abbyy-product-page .det h3,
  .abbyy-product-page .det .blk > h3.vc {
    font-size:22px; white-space:normal; position:static !important;
    top:auto !important; left:auto !important; transform:none; margin-bottom:16px
  }
  .abbyy-product-page .caps,
  .abbyy-product-page .feats {
    position:static; left:auto; top:auto; width:100%; margin-top:16px
  }

  /* Portfolio */
  .abbyy-page .s-port { height:auto; padding:48px 24px }
  /* FIXES2 item 4 — the intro paragraph has inline text-align:right; left-align
     it on mobile only (needs !important to beat the inline style). Add space
     below so the next product block doesn't butt right up against it. */
  .abbyy-page .s-port > p.a { text-align:left !important; margin-bottom:28px }
  .abbyy-page .s-port .th,
  .abbyy-page .s-port .ln { display:none }
  .abbyy-page .s-port .nm { left:auto; font-size:20px; display:block; margin-bottom:8px }
  .abbyy-page .s-port .c { width:100%; font-size:15px; display:block; margin-bottom:4px }
  /* arrow-btn is <a class="a arrow-btn">; the .a reset forces width/height:auto
     !important, so re-assert the square with !important. margin-bottom adds the
     gap that separates one ABBYY product from the next (flat list, no wrapper). */
  .abbyy-page .arrow-btn { position:static; width:48px !important; height:48px !important;
    place-items:center; margin-top:14px; margin-bottom:40px }
  .abbyy-page .s-port > div { margin-bottom:40px }

  /* Accordion */
  .abbyy-solutions-page .s-acc { height:auto }
  .abbyy-solutions-page .s-acc .wrap {
    flex-direction:column; height:auto; padding:40px 24px
  }
  .abbyy-solutions-page .s-acc .wrap > img { display:none }
  .abbyy-solutions-page .s-acc .list { width:100% }

  /* CTA */
  /* Item 9 — CTA centered, equal-width buttons, visible ghost outline */
  .abbyy-page .cta {
    height:auto; padding:60px 24px; display:flex; flex-direction:column; align-items:center; text-align:center
  }
  .abbyy-page .cta h2 {
    font-size:clamp(28px,6vw,48px); white-space:normal; text-align:center;
    transform:none; left:auto; top:auto; margin-bottom:16px
  }
  .abbyy-page .cta p {
    white-space:normal; text-align:center; left:auto; top:auto; transform:none; margin-bottom:32px
  }
  /* buttons are <a class="a btn …>; .a reset forces width:auto !important, so
     re-assert an equal width with !important. */
  .abbyy-page .btn {
    position:static; width:100% !important; max-width:300px; height:auto;
    padding:15px 24px; margin:0 auto 16px; display:flex; justify-content:center
  }
  .abbyy-page .btn.ghost { left:auto; border:2px solid #fff }
  /* the fixed-size SVG outline can't match the fluid width — hide it and use
     the CSS border above instead. */
  .abbyy-page .btn.ghost svg { display:none }
}