/*
Theme Name: ITORO
Theme URI: https://itoro.com.pl
Author: ITORO / Metafora Studio (ported to WordPress)
Description: 1:1 WordPress port of the ITORO Symfony site (WanGuard anti-DDoS services). Reuses the original compiled Encore CSS/JS for pixel-exact design. Multilingual EN/PL/FR/DE via Polylang.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: itoro
*/

/* Real styling lives in /build/app.css (original compiled Encore bundle),
   enqueued from functions.php. This file is loaded AFTER app.css, so it holds
   the theme's custom overrides. */

/* --- Shorter dark hero on inner pages (Services/Support/About/Blog/Contact/Pricing).
   Original desktop padding is 160px / 70px (≈435px tall); trim ~1.5cm.
   Does NOT touch the home hero (.head-home). --- */
@media (min-width: 768px) {
    .head .content {
        padding-top: 125px !important;
        padding-bottom: 48px !important;
    }
}

/* --- Heroes as WebP for faster LCP (mirrors app.css selectors/order). --- */
@media (max-width: 767px) {
    .head, .head-home { background-image: url(/build/images/head_mobile_bg.webp) !important; }
}
@media (min-width: 768px) {
    .head, .head-home { background-image: url(/build/images/head_desktop_other_bg.webp) !important; }
    .head-home { background-image: url(/build/images/head_desktop_bg.webp) !important; }
    .blog-post-page .head { background-image: url(/build/images/head_desktop_blog_bg.webp) !important; }
}

/* --- Normalize blog post images: centered, consistent max width, symmetric spacing. --- */
.blog-post-page .post-content .content .wp-block-image { margin: 30px auto; text-align: center; }
.blog-post-page .post-content .content img {
    display: block; margin: 30px auto; height: auto;
    max-width: min(100%, 760px); border-radius: 10px;
}
.blog-post-page .post-content .content figcaption { text-align: center; color: #8a848a; font-size: 13px; }

/* --- Sliders: native CSS scroll-snap (replaces Glide JS). Swipeable carousels. --- */
.glide .glide__track { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.glide .glide__track::-webkit-scrollbar { display: none; }
.glide .glide__slides { display: flex; gap: 16px; }
.glide .glide__slide { scroll-snap-align: center; flex: 0 0 86%; }
.glide .glide__bullets { display: none; } /* bullets need JS; hide for the CSS carousel */
@media (min-width: 768px) {
    /* testimonials slider shows one wide card; steps/keep-calm use their grid on desktop */
    #testimonials-slider .glide__slide { flex-basis: 100%; }
}

/* --- About Us: Experienced Partners cards --- */
.itoro-partners { padding: 40px 0; }
.itoro-partners .partners-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 980px; margin: 0 auto; }
.itoro-partners .pcard { background: #fff; border: 1px solid #ececec; border-radius: 16px; padding: 28px 28px 30px; box-shadow: 0 8px 26px rgba(0,0,0,.05); }
.itoro-partners .pcard.alt { background: #191619; border-color: #191619; color: #fff; }
.itoro-partners .years { display: flex; align-items: baseline; gap: 8px; color: #b72343; margin-bottom: 8px; }
.itoro-partners .pcard.alt .years { color: #f0567b; }
.itoro-partners .years .n { font-size: 46px; font-weight: 300; line-height: 1; }
.itoro-partners .years .u { font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.itoro-partners .pcard h3 { font-size: 24px; margin: 0 0 2px; color: #191619; }
.itoro-partners .pcard.alt h3 { color: #fff; }
.itoro-partners .role { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #8a848a; margin-bottom: 14px; }
.itoro-partners .pcard.alt .role { color: #b6b0b6; }
.itoro-partners ul { list-style: none; margin: 0; padding: 0; }
.itoro-partners li { position: relative; padding: 8px 0 8px 24px; font-size: 15px; line-height: 1.55; color: #4a444a; border-top: 1px solid #f0eef0; }
.itoro-partners li:first-child { border-top: 0; }
.itoro-partners .pcard.alt li { color: #d6d2d6; border-color: #2c282c; }
.itoro-partners li::before { content: "\2713"; position: absolute; left: 0; top: 8px; color: #169651; font-weight: 700; }
@media (max-width: 820px) { .itoro-partners .partners-grid { grid-template-columns: 1fr; } }

/* Experienced partners — the two branded logo rows now reuse the feature-photo markup
   (a direct `.features>.feature` with the logo inside a `.image` wrapper), so the theme's
   own photo rule sizes/floats/positions them IDENTICALLY to the photos at every breakpoint.
   The dark brand panel just fills that `.image` box (the .image supplies width + 4px radius +
   overflow clip). This is why the panels finally line up pixel-for-pixel with the photos. */
.about-us-page .logo-panel { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  width:100%; aspect-ratio:685/400; padding:6% 8%; box-sizing:border-box;
  background:#211d21; border-radius:0; }
/* balance the two logos by HEIGHT (they have different native aspect ratios) so they read equal */
.about-us-page .itoro-brand .brand-logo { height:58px; width:auto; max-width:70%; }
.about-us-page .brand-badge img { height:26px; width:auto; opacity:.95; }
.about-us-page .wg-brand .andri-logo { height:58px; width:auto; max-width:78%; filter:brightness(0) invert(1); }
.about-us-page .brand-sub { color:#c9c4c9; font-size:14px; text-align:center; }
.about-us-page .brand-list { list-style:none; padding:0; margin:16px 0 0; }
.about-us-page .brand-list li { position:relative; padding:9px 0 9px 26px; color:#4a444a; line-height:1.55; border-top:1px solid #f0eef0; }
.about-us-page .brand-list li:first-child { border-top:0; }
.about-us-page .brand-list li::before { content:"\2713"; position:absolute; left:0; top:9px; color:#169651; font-weight:700; }

/* --- Footer copyright: lift contrast on the dark footer (#333 on near-black was ~1.5:1) --- */
footer .copyright,
footer .copyright div { color: #9a9199; }
footer .copyright .designer-name { color: #d95a76; }
/* Footer company/contact info: lift from ~4:1 to ~5:1 on the dark footer (keep titles as-is) */
footer .section.contact { color: #9a9199; }

/* --- Flat, rectangular buttons & pill-labels everywhere (per request: flat + rectangle) --- */
.button { border-radius: 0 !important; box-shadow: none !important; }
.eyebrow { border-radius: 0 !important; }
.wg .subnav a { border-radius: 0 !important; }
.qv .btn, .jx .dl, .tl .dl, .pr .card a.more, .pf .doc a.dl, .itoro-emr .cta { border-radius: 0 !important; }
/* residual 2px radii on inline CTAs → flatten (audit S7) */
.pr .card a.more, .jx .dl, .tl .dl, .qv .btn { border-radius: 0 !important; }

/* ============================================================================
   PALETTE 2026 — soft-light default + automatic dark (prefers-color-scheme)
   Centralised here (style.css loads last). Backgrounds use CSS variables so a
   single rule set serves BOTH modes; only the token values flip. !important is
   required to beat each template's inline <style> (later in source order).
   Reversible: delete this whole block to restore the pure-white look.
   ============================================================================ */
/* Theme is driven by an `.is-dark` class on <html> (set by an inline head script from
   localStorage, defaulting to the OS preference). A visible toggle flips + persists it.
   This lets the manual switch override the OS setting. */
:root{
  color-scheme: light;
  --pg:#f5f3ef;    /* page canvas — warm off-white (was #fff) */
  --band:#ece9e3;  /* light grey bands (was #eee) */
  --card:#faf8f4;  /* raised cards (was #fff) */
  --panel:#efece6; /* zebra / inset / estimate (was #faf7f8) */
  --hair:#e4e0d8;  /* hairlines (was #eee) */
  --fg:#232026;   /* headings/body ink (was #191619) */
  --body:#403b40;  /* body text */
  --lead:#5a555a;  /* lead paragraphs (was #6d6d6d) */
  --muted:#6b656b; /* muted/notes — AA on warm bg (was #8a848a ~3.4:1) */
  --crimt:#b72343; /* crimson TEXT (fine on light) */
  --grn:#169651;   /* green check */
}
html.is-dark{
  color-scheme: dark;
  /* Canvas = the EXACT original ITORO dark (#191619 = the hero image's black) so the whole
     page is one seamless background with no visible section seams. Bands match the canvas;
     only cards/panels lift a touch. */
  --pg:#191619; --band:#191619; --card:#211d21; --panel:#252125; --hair:#2f2a2f;
  --fg:#ece9ef; --body:#c3bfc8; --lead:#a49fa8; --muted:#9a95a0;
  --crimt:#ff5c7c; /* #b72343 fails on dark (2.9:1) → lighter crimson */
  --grn:#37c07d;
}

/* ---- Canvas surfaces (full-width light sections) ---- */
.wg,.jx,.tl,.qv,.pr,.pf,.pp,
.privacy-page .landing-body,
.home-page .services, .services, .itoro-rapid,
.about-us-page .overview,
.faq-page .faq-list,
.support-page .itoro-support, .support-page .itoro-emr, .support-page .itoro-nis2,
.itoro-scenarios,
.content-page.landing .landing-body{ background-color: var(--pg) !important; }

/* ---- Light grey bands ---- */
.home-page .keep-calm, .faq-page .faq-contact, .contact-page .contact-form,
.posts-list, .steps{ background-color: var(--band) !important; }

/* ---- Cards / panels ---- */
.pr .card, .jx .card, .tl .card, .qv .card, .qv .split .l,
.qv .compose .rows, .qv .compose .foot, .qv .split .foot,
.wg .adv .a, .wg .price .p, .wg .card.light,
.itoro-partners .pcard, .pp .cardc,
.support-page .itoro-support .card, .support-page .itoro-emr .panel, .support-page .itoro-nis2 .card,
.blog .posts-list .body, .step, .steps .step, .itoro-nis2 .card,
.itoro-scenarios .scn-card, .contact-info-section{
  background-color: var(--card) !important; border-color: var(--hair) !important;
}

/* ---- Inset / zebra / estimate ---- */
.pp tbody tr:nth-child(even) td, .qv .est, .pp .licitem{ background-color: var(--panel) !important; }

/* ---- WanGuard FAQ box has an inline background:#fff with no class → theme via :has() ---- */
.wg div:has(> .faq-q){ background-color: var(--card) !important; }

/* ---- Hairlines that read as borders ---- */
.pp .sec, .pp tbody td, .pp label.item, .qv .vwrap, .qv .compose .r,
.wg .faq-q, .itoro-partners li{ border-color: var(--hair) !important; }

/* ---- Muted greys → AA in both modes (fixes audit S3) ---- */
.pr .note, .pf .note, .qv .muted, .pp .src, .pp label.item .note,
.blog-post-page .post-content .content figcaption, .itoro-partners .role,
.pp .emerg .src{ color: var(--muted) !important; }
.pp .lead, .qv .vlabel .d{ color: var(--lead) !important; }
/* .wg/.jx/.tl leads are used on BOTH light sections (#6d6d6d) and dark heroes (#c9c4c9) —
   let the template handle them per-context; overriding here broke the dark-hero lead. */

/* ============ DARK MODE (html.is-dark): flip text light (whole page is dark now) ============
   Uses native CSS nesting — every rule below is scoped under html.is-dark. ============ */
html.is-dark{
  /* every page root is dark → body text light. Buttons/eyebrows keep their own #fff. */
  .wg,.jx,.tl,.qv,.pr,.pf,.pp,
  .home-page,.about-us-page,.faq-page,.contact-page,.support-page,.blog,.privacy-page,
  .services{ color: var(--body) !important; }

  .wg :is(h1,h2,h3,h4), .jx :is(h1,h2,h3,h4), .tl :is(h2,h3), .pr :is(h2,h3),
  .pp :is(h2,h3,h4), .pf :is(h2,h3),
  .home-page :is(h1,h2,h3), .about-us-page :is(h1,h2,h3), .faq-page :is(h1,h2,h3),
  .contact-page :is(h1,h2,h3), .support-page :is(h1,h2,h3), .services :is(h1,h2,h3),
  .privacy-page :is(h1,h2,h3){ color: var(--fg) !important; }

  .wg p,.jx p,.tl p,.pr p,.pp td,.pp li,
  .home-page p,.about-us-page p,.faq-page p,.contact-page p,.support-page p,
  .services p,.privacy-page p,.privacy-page li{ color: var(--body) !important; }

  /* crimson TEXT (not fills) → lighter crimson so it passes on dark */
  .itoro-partners .years, .pr .card .tag, .wg .price .tag, .pp .ewhy .wt,
  .wg .kpi, .jx .kpi, .tl .kpi{ color: var(--crimt) !important; }

  /* green checks a touch brighter */
  .wg .price li::before, .pp li.pro::before, .itoro-partners li::before{ color: var(--grn) !important; }

  /* form fields legible on dark */
  .qv input, .qv textarea{ background: var(--panel) !important; color: var(--fg) !important; border-color: var(--hair) !important; }

  /* special: support "under attack" pink alarm panel → dark crimson tint */
  .support-page .itoro-emr .panel.alarm{ background: #2a1620 !important; }
  .support-page td.featured, .support-page td.c.featured{ background: #2a1620 !important; }

  /* keep dark sections/heroes as-is; ensure their headings stay light (already are) */
  .wg .dark, .pp .emerg, .pr .hero, .qv .head, .tl .cta, .wg .cta, .jx .cta{ color: #e8e6ea !important; }

  /* template-part sections (services scenarios/steps/rapid; support blocks) — flip text light */
  .itoro-scenarios,.steps,.itoro-rapid,.itoro-support,.itoro-nis2,.itoro-emr,.itoro-reports{ color: var(--body) !important; }
  .itoro-scenarios :is(h2,h3,h4), .steps :is(h2,h3), .itoro-rapid :is(h2,h3),
  .itoro-support :is(h2,h3), .itoro-nis2 :is(h2,h3), .itoro-emr :is(h2,h3),
  .itoro-reports :is(h2,h3){ color: var(--fg) !important; }
  .itoro-scenarios :is(p,li,ol,ul), .steps :is(p,li), .itoro-rapid :is(p,li),
  .itoro-support :is(p,li,td), .itoro-nis2 :is(p,li), .itoro-emr :is(p,li),
  .itoro-reports :is(p,li,td){ color: var(--body) !important; }
  /* crimson eyebrow-style TEXT labels on dark → lighter crimson (Mission & Vision, Scenario n, etc.) */
  .about-us-page .overview .label, .itoro-scenarios .scn-tag, .scn-name,
  .itoro-nis2 .card .art, .itoro-nis2 .card .how b,
  .services .label, .pp .ewhy .wt{ color: var(--crimt) !important; }

  /* crimson CONTENT links (#b72343) fail on dark → lighter crimson. Buttons keep their own colour. */
  .faq-list a, .wg .faq-q a, .content-page.landing .landing-body a, .about-us-page .overview a,
  .posts-pagination a, .pr .hero a, .blog .posts-list a{ color: var(--crimt) !important; }

  /* selected pricing row is a LIGHT pink highlight → dark crimson tint in dark mode */
  .pp tbody tr.sel td{ background: #3a1420 !important; color: #f3e6ea !important; }
  /* partner-card list items (were #4a444a dark) + blog headings/body flip light */
  .itoro-partners li, .about-us-page .brand-list li{ color: var(--body) !important; }
  .about-us-page .brand-list li{ border-color: var(--hair) !important; }
  .blog :is(h1,h2,h3), .blog-page :is(h1,h2,h3){ color: var(--fg) !important; }
  .blog p, .blog-page p, .blog li, .blog-page li{ color: var(--body) !important; }

  /* wanguard FAQ questions use .wg .faq-q h3{color:var(--dark)} (stays #191619) → flip explicitly */
  .wg .faq-q h3{ color: var(--fg) !important; }

  /* legal pages (privacy + accessibility) have their own inline <style> with dark strong/links */
  .privacy-page strong, .privacy-page b, .privacy-page .lead{ color: var(--fg) !important; }
  .privacy-page a{ color: var(--crimt) !important; }
  .privacy-page code{ color: #d6d2d6 !important; }
  .privacy-page .privacy-content li, .privacy-page .a11y-content li,
  .privacy-page .privacy-content>ol>li{ color: var(--body) !important; }

  /* money/service landing pages (page.php .landing .landing-body) had inline #fff/#333 → flip for dark */
  .content-page.landing .landing-body{ color: var(--body) !important; }
  .content-page.landing .landing-body :is(h1,h2,h3){ color: var(--fg) !important; }
  .content-page.landing .landing-body :is(p,li){ color: var(--body) !important; }
  .content-page.landing .landing-body strong{ color: var(--fg) !important; }
  .content-page.landing .landing-body a{ color: var(--crimt) !important; }

  /* pricing: optional-licence options + sensor table cell text → light on dark canvas
     (these live in spans/labels the p/td flip didn't reach) */
  .pp label.item, .pp label.item .n, .pp label.item span,
  .pp .licitem, .pp .licitem .n, .pp .licitem .p{ color: var(--body) !important; }
  .pp tbody td span, .pp tbody td strong, .pp tbody td b, .pp .detect{ color: var(--body) !important; }
  .pp tbody tr.sel td, .pp tbody tr.sel td span, .pp tbody tr.sel td strong{ color: #f3e6ea !important; }
  .pp label.item small, .pp .licitem small, .pp tbody td small{ color: var(--body) !important; opacity:1 !important; }

  /* support table (.pp .sup): the featured (Gold) column and the "Choose one" price row
     keep LIGHT pink fills from the light-mode CSS, but their td text/checks flip light in
     dark mode → light-on-light (unreadable prices). Darken those cells; keep checks green. */
  .pp .sup thead th.featured{ background:#8f1c34 !important; }
  .pp .sup td.featured,
  .pp .sup tbody tr:nth-child(even) td.featured{ background:#2a1620 !important; }
  .pp .sup .pickrow td{ background:#201c20 !important; }
  .pp .sup .pickrow td.featured{ background:#2a1620 !important; }
  .pp .sup .pickrow .price, .pp .sup .pickrow strong{ color: var(--fg) !important; }
  .pp .sup .chk{ color: var(--grn) !important; }

  /* save-business crimson CTA banner (always crimson) → white text; must beat the .home-page p flip */
  .plans-and-pricing-banner h2, .plans-and-pricing-banner p, .plans-and-pricing-banner .subtitle{ color:#fff !important; }
  /* wanguard pricing-card list items (#4a444a) + remaining crimson content links */
  .wg .price .p li{ color: var(--body) !important; }
  .faq-q a, .faq-contact a, .pr .card p a, .contact-form a:not(.button),
  .content-page.landing .landing-body p a{ color: var(--crimt) !important; }
  /* cookie banner is always crimson → white text */
  .cookie-info p, .cookie-info a{ color:#fff !important; }
  /* pricing estimate footnote sits on the always-dark summary card */
  .pp .summary .fine, .pp .summary small, .pp [data-pricing-target] + p{ color:#9a95a0 !important; }

  /* line-art service icons are dark (#191619 strokes) → invisible on dark bg.
     invert() lightens the strokes; hue-rotate keeps the #B72343 dots reddish (not teal). */
  img[src*="_color.svg"]{ filter: invert(1) hue-rotate(180deg) saturate(1.1) brightness(1.02); }
  /* the "Our Approach" step icons are mono line-art (#999 + #191619 mix) → invisible parts on dark.
     brightness(0) invert(.85) flattens every part to a uniform light grey so all lines show. */
  img[src*="_mute.svg"]{ filter: brightness(0) invert(0.85); }
}

/* ============================================================================
   CONSISTENT CONTENT WIDTH — every custom page & template-part container had a
   different max-width (900/1000/1100/1120/1140/1200) and 24px padding, so sections
   didn't line up. Unify them all to the site's base .container (1258px / 44px).
   ============================================================================ */
.wg .container, .jx .container, .tl .container, .pr .container, .pf .container,
.pp .container, .qv .container,
.itoro-rapid .container, .itoro-scenarios .container, .itoro-support .container,
.itoro-nis2 .container, .itoro-emr .container, .itoro-reports .container,
.content-page.landing .landing-body .container{
  max-width:1258px !important; padding-left:44px !important; padding-right:44px !important;
}
/* keep long-form money/service article text readable inside the wider column */
.content-page.landing .landing-body .container > *{ max-width:900px; }
.content-page.landing .landing-body .container > .wp-block-buttons{ max-width:none; }

/* ============================================================================
   TYPOGRAPHY — align the custom pages (.wg/.jx/.tl/.pr/.pf/.pp/.qv) to the
   ORIGINAL ITORO scale (measured on the live original pages, desktop):
     hero h1 70/300/lh1.0 · section h2 40/300/lh1.13 · h3 18/400 · body 16/400/lh1.56
   The custom pages had drifted (h1 46, h2 34, body 19). Family is Roboto everywhere.
   ============================================================================ */
.wg h1, .jx h1, .tl h1{ font-size:clamp(38px,5vw,70px) !important; font-weight:300; line-height:1.06; }
.wg h2, .jx h2, .tl h2, .pr h2, .pf h2, .pp h2, .qv h2{ font-size:40px !important; font-weight:300; line-height:1.14; }
.wg .grid h3, .wg .card h3, .jx .card h3, .tl .card h3, .pr .card h3{ font-size:18px !important; }
.wg p, .jx p, .tl p, .pr p, .pf p, .qv p{ font-size:16px; line-height:1.62; }
.wg .lead, .jx .lead, .tl .lead, .pp .lead{ font-size:18px !important; line-height:1.6; }

/* ============================================================================
   TELEMETRY closing CTA — was an inset #141114 rounded box that blended into the
   dark theme's dark page (looked mis-sized). Make it a FULL-WIDTH crimson band,
   matching the site's standard save-business closing banner. Self-contained
   colour → identical, deliberate CTA in BOTH light and dark. Button inverted to
   white so it doesn't disappear on the crimson field.
   ============================================================================ */
.tl .cta, html.is-dark .tl .cta{
  max-width:none !important; width:auto !important; margin:0 !important;
  border-radius:0 !important; background:#b72343 !important; padding:72px 24px !important;
}
.tl .cta h2, html.is-dark .tl .cta h2,
.tl .cta p,  html.is-dark .tl .cta p{ color:#fff !important; }
.tl .cta .dl, html.is-dark .tl .cta .dl{ background:#fff !important; color:#b72343 !important; }

/* ============================================================================
   FAQ ACCORDION — collapse answers. SEO-safe: max-height collapse (never display:none),
   content stays in the DOM. Wired by assets/js/itoro.js on .faq-q (WanGuard) and the
   FAQ h3s inside .landing-body (money/DNS/service pages). Progressive: no JS = all open.
   ============================================================================ */
.faq-acc > h3{ cursor:pointer; position:relative; padding-right:34px; }
.faq-acc > h3:focus-visible{ outline:2px solid #b72343; outline-offset:3px; border-radius:4px; }
.faq-acc > h3::after{ content:''; position:absolute; right:8px; top:1.05em; width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); opacity:.5; transition:transform .2s ease; }
.faq-acc.open > h3::after{ transform:rotate(225deg); opacity:.8; }
.faq-panel{ max-height:0; overflow:hidden; transition:max-height .28s ease; }
/* Gutenberg landing-page FAQ items: divider + tidy spacing to match the .faq-q look */
.landing-body .faq-gb{ border-top:1px solid rgba(0,0,0,.08); }
.landing-body .faq-gb > h3{ margin:0 !important; padding:16px 34px 16px 0; }

/* ---- FAQ visual accent (ITORO red) — clearer separation + obvious clickability.
   Applies everywhere the accordion runs: WanGuard (.faq-q), money/DNS pages & blog (.faq-gb). ---- */
.faq-heading{ position:relative; padding-bottom:16px; margin-top:44px; padding-top:30px; border-top:2px solid rgba(0,0,0,.09); }
.faq-heading::after{ content:''; position:absolute; left:0; bottom:2px; width:56px; height:3px; background:#b72343; border-radius:2px; }
/* Blog posts: keep the FAQ block clearly separated from the article body */
.post-content .content .faq-heading{ margin-top:48px; }
.post-content .content .faq-acc{ background:#faf7f8; border-radius:0 8px 8px 0; }
.faq-acc{ border-left:3px solid rgba(183,35,67,.18); padding-left:16px; transition:border-color .18s ease, background-color .18s ease; }
.faq-acc:hover{ border-left-color:#b72343; background:rgba(183,35,67,.035); }
.faq-acc.open{ border-left-color:#b72343; background:rgba(183,35,67,.05); }
.faq-acc.open > h3{ color:#b72343 !important; }
.faq-acc > h3::after{ border-color:#b72343 !important; opacity:.55; }
.faq-acc.open > h3::after{ opacity:1; }
.landing-body .faq-gb .faq-panel > p{ margin-top:0; }
.landing-body .faq-gb .faq-panel > p:last-child{ margin-bottom:16px; }
html.is-dark .landing-body .faq-gb{ border-top-color:rgba(255,255,255,.1); }

/* ============================================================================
   NAV DROPDOWNS — Products & Services reveal their sub-pages from any page
   (fixes losing context after "Learn more"). Desktop = hover/focus dropdown;
   mobile = indented sub-list. Flat, dark panel, keyboard-accessible.
   ============================================================================ */
.nav li.has-sub{ position: relative; }
.nav li.has-sub > a .caret{ font-size:15px; margin-left:6px; opacity:1; display:inline-block; line-height:1; vertical-align:middle; transition:transform .15s ease; }
.nav li.has-sub:hover > a .caret, .nav li.has-sub:focus-within > a .caret{ transform:rotate(180deg); }
.nav .subnav-menu{
  position:absolute; top:100%; left:0; min-width:300px; max-width:360px; list-style:none; margin:0;
  padding:8px 0 10px; background:#141018; border:1px solid #2a2833; box-shadow:0 16px 40px rgba(0,0,0,.5);
  z-index:1200; opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .16s ease, transform .16s ease;
}
.nav li.has-sub:hover > .subnav-menu,
.nav li.has-sub:focus-within > .subnav-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.nav .subnav-menu .sm-head{ padding:9px 22px 8px; margin-bottom:2px; color:#8a848a;
  font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; border-bottom:1px solid #241f26; }
.nav .subnav-menu li{ margin:0; }
.nav .subnav-menu a{ display:block; padding:10px 22px; text-decoration:none; border-radius:0;
  border-left:3px solid transparent; transition:background .14s, border-color .14s; }
.nav .subnav-menu .sm-name{ display:block; color:#fff; font-size:15px; font-weight:600; white-space:normal; line-height:1.25; }
.nav .subnav-menu .sm-desc{ display:block; color:#9a949a; font-size:12.5px; margin-top:1px; white-space:normal; line-height:1.35; }
.nav .subnav-menu a:hover, .nav .subnav-menu a:focus-visible,
.nav .subnav-menu li.active > a{ background:rgba(183,35,67,.16); border-left-color:#ff5c7c; }
.nav .subnav-menu a:hover .sm-desc, .nav .subnav-menu li.active > a .sm-desc{ color:#c9c4c9; }
/* mobile: indented sub-list under Products/Services (always visible) */
/* Desktop nav: the longer FR/DE labels (Dienstleistungen, Startseite, Rozwiązania…) overflow
   and overlap at intermediate desktop widths. Tighten item spacing and drop the wide
   "Andrisoft Gold Partner" logo label on narrower desktops so everything fits on one row. */
.nav-bar .nav > li{ margin:0 10px; }
@media (max-width:1300px){
  .nav-bar .nav > li{ margin:0 7px; }
  .nav-bar .andrisoft{ display:none !important; }
}
@media (max-width:1120px){
  .nav-bar .nav > li{ margin:0 5px; font-size:13px; }
  .nav-bar .nav > li.highlight > a{ padding:2px 14px; }
}

/* Mobile menu — compact + readable. The base theme sets 70px top-level items (fine with a
   flat menu, far too big once submenus expand); dim the bg image so text stays legible. */
.mobile-menu > div{ padding:48px 24px 36px; }
.mobile-menu .background{ opacity:.07; }
/* one consistent size/weight for every top-level item (no bold-on-parent, no underline bar) */
.mobile-menu .nav{ line-height:1.2 !important; margin-top:8px !important; }
.mobile-menu .nav > li{ margin:0 !important; }
.mobile-menu .nav > li > a{ font-size:22px !important; font-weight:400 !important; line-height:1.2 !important; display:block; padding:13px 0; text-decoration:none !important; }
.mobile-menu .nav > li > a:after{ display:none !important; }
.mobile-menu .nav > li.highlight > a{ color:#ff6a86 !important; }
/* submenu: one smaller size, muted, tight under its parent, no underline */
.mobile-menu .subnav-menu-m{ list-style:none; margin:-2px 0 10px; padding:0; }
.mobile-menu .subnav-menu-m a{ display:block; padding:6px 0; font-size:14.5px !important; font-weight:400 !important; color:#a9a7a9 !important; text-decoration:none !important; }
.mobile-menu .subnav-menu-m a:hover{ color:#fff !important; }
.mobile-menu .subnav-menu-m li.active > a{ color:#ff6a86 !important; }

/* product-page heroes (.wg/.jx/.tl) start at y=0 under the FIXED nav → pad the first
   hero so the breadcrumb clears the ~89px nav instead of overlapping it */
.wg > .sec:first-of-type, .jx > .sec:first-of-type, .tl > .sec:first-of-type,
.pr .hero, .pf .head-body:first-child, .qv .head{ padding-top:130px !important; }

/* ---- Translation review: ?review=1 highlights newly-translated strings (.i18n-new) in blue ---- */
.i18n-review .i18n-new{ outline:2px dashed #1a6dff !important; outline-offset:2px; background:rgba(26,109,255,.14) !important; border-radius:3px; }

/* ---- Image lightbox (click-to-zoom) + "click to enlarge" hint ---- */
.is-zoomable{position:relative;cursor:zoom-in;}
.is-zoomable .zoom-hint{position:absolute;top:12px;right:12px;background:rgba(20,16,20,.82);color:#fff;font-size:12px;font-weight:600;letter-spacing:.02em;padding:6px 12px;border-radius:20px;pointer-events:none;display:inline-flex;align-items:center;gap:6px;box-shadow:0 2px 10px rgba(0,0,0,.35);transition:background .15s;z-index:2;}
.is-zoomable:hover .zoom-hint{background:#b72343;}
.itoro-lightbox{position:fixed;inset:0;z-index:10000;background:rgba(9,7,9,.96);display:none;align-items:center;justify-content:center;padding:0;}
.itoro-lightbox.open{display:flex;}
.itoro-lightbox .ilb-fig{margin:0;max-width:100vw;max-height:100vh;display:flex;align-items:center;justify-content:center;}
/* Fill the whole browser window (image scales to the larger of width/height, keeping aspect).
   Clicking the image closes the popup, so the cursor signals "click to close". */
.itoro-lightbox img{display:block;max-width:100vw;max-height:100vh;width:auto;height:auto;cursor:zoom-out;border-radius:0;}
.itoro-lightbox .ilb-cap{position:fixed;left:0;right:0;bottom:0;margin:0;padding:16px 22px 18px;color:#e2ded9;text-align:center;font-size:13.5px;line-height:1.5;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.78));pointer-events:none;}
.itoro-lightbox .ilb-close{position:fixed;top:12px;right:20px;background:rgba(0,0,0,.4);border:0;color:#fff;font-size:34px;line-height:44px;width:48px;height:48px;border-radius:50%;text-align:center;cursor:pointer;opacity:.9;z-index:2;}
.itoro-lightbox .ilb-close:hover{opacity:1;background:#b72343;}
.itoro-lightbox .ilb-hint{position:fixed;top:20px;left:22px;color:#c9c4c9;font-size:12px;pointer-events:none;background:rgba(0,0,0,.4);padding:6px 12px;border-radius:20px;}

/* Big hero headlines LEFT-aligned (the original ITORO site places the H1 at top-left, under the
   logo — not centered). Left-aligns the whole product-page hero incl. lead, KPI strip and buttons,
   so the CTA button also sits on the left, consistent with every other page. */
.wg > .sec:first-of-type, .jx > .sec:first-of-type, .tl > .sec:first-of-type,
.pr .hero, .qv .head{ text-align:left !important; }
.wg > .sec:first-of-type h1, .wg > .sec:first-of-type .lead, .wg > .sec:first-of-type .kpis,
.jx > .sec:first-of-type h1, .jx > .sec:first-of-type .lead,
.tl > .sec:first-of-type h1, .tl > .sec:first-of-type .lead,
.pr .hero h1, .pr .hero p, .qv .head h1, .qv .head p{ margin-left:0 !important; margin-right:0 !important; }

/* ---- Breadcrumbs — sit inside the dark page hero, light text (both modes) ---- */
/* subtle Imperva-style breadcrumb: small, muted, LEFT-aligned under the logo (even when the
   product hero is centered), sitting just below the nav */
.itoro-crumbs{ margin:0 0 18px; font-size:12px; letter-spacing:.01em; text-align:left; }
.wg .sec.dark .itoro-crumbs, .jx .sec.dark .itoro-crumbs, .tl .sec.dark .itoro-crumbs{ text-align:left; }
.itoro-crumbs ol{ list-style:none; display:inline-flex; flex-wrap:wrap; align-items:center; margin:0; padding:0; }
.itoro-crumbs li{ display:inline-flex; align-items:center; color:#8f898f; }
.itoro-crumbs li:not(:last-child)::after{ content:"/"; opacity:.5; margin:0 7px; }
.itoro-crumbs a{ color:#8f898f; text-decoration:none; }
.itoro-crumbs a:hover{ color:#fff; }
.itoro-crumbs [aria-current]{ color:#b9b3b9; }

/* ---- Theme toggle button (light/dark switch) ---- */
.theme-toggle{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  padding:0; margin:0 10px 0 0; border:1px solid rgba(255,255,255,.35); background:transparent;
  color:#fff; cursor:pointer; border-radius:0; vertical-align:middle; line-height:1; }
.theme-toggle svg{ width:18px; height:18px; fill:currentColor; }
.theme-toggle .ico-sun{ display:none; }
html.is-dark .theme-toggle .ico-sun{ display:block; }
html.is-dark .theme-toggle .ico-moon{ display:none; }
.theme-toggle:hover{ border-color:#fff; }
/* in the mobile menu it sits on light/dark text context — inherit currentColor */
.mobile-menu .theme-toggle, .toggle-language .theme-toggle{ color:inherit; border-color:currentColor; }

/* ============================================================================
   ACCESSIBILITY (WCAG 2.1 AA + 2.2) — focus, contrast, target sizes
   ============================================================================ */
/* 2.4.1 Bypass Blocks — skip link (visible on focus, top-left) */
.skip-link{ position:absolute; left:8px; top:-60px; z-index:100000;
  background:#191619; color:#fff !important; padding:10px 16px; border-radius:0;
  font-weight:700; text-decoration:none; transition:top .15s; }
.skip-link:focus{ top:8px; outline:3px solid #ffb703; outline-offset:2px; }
/* screen-reader-only utility (visually hidden, still announced) */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* blog "Read full story" affordance (was a nested <a> — now a styled span; card is the link) */
.read-more-link{ display:inline-block; margin-top:8px; color:var(--crimt); font-weight:600; text-decoration:underline; }
/* Services "What We Do": the cycling centre icon sat ON TOP of the faint ITORO-shield watermark
   (selected-service-bg.svg) → they overlapped and looked cluttered. Drop the watermark so only
   the clean icon animates, centred. */
.services .selected-service{ background-image:none !important; min-height:210px; display:flex; align-items:center; justify-content:center; }
.services .selected-service img{ margin-top:0 !important; }
/* /services/ — each "What We Do" block now links to its dedicated service subpage */
.services .service-more{ display:inline-block; margin-top:10px; color:var(--crimt) !important; font-weight:600; text-decoration:none; }
.services .service-more:hover{ text-decoration:underline; }
/* 2.3.3 / respect reduced motion for ALL animations added to the theme */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .wg .flow{ display:none; }
}

/* 2.4.7 / 2.4.11 / 2.4.13 — visible focus ring (gold = visible on crimson, white & dark) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, label.item:focus-within{
  outline: 3px solid #ffb703 !important; outline-offset: 2px !important; border-radius: 0;
}
/* 2.4.11 Focus Not Obscured — keep focused anchors clear of the sticky header */
:target, [id]{ scroll-margin-top: 96px; }

/* 1.4.3 Contrast — footer links/columns to ≥4.5:1 on #191619 (was #777 = 4.0) */
footer a, footer .section a, footer .mute, footer .section.more a{ color: #b3adb3 !important; }
footer a:hover{ color: #ffffff !important; }
/* header "Andrisoft Gold Partner" + hero subtitles (grey on the dark hero, ~4.0) */
.andrisoft a, .andrisoft .mute{ color: #cbc6cb !important; }
.head .content p, .head-home .content p, .head .content .sub, .head .content .breadcrumb{ color: #d2ccd2 !important; }
/* "Learn more" style mute links on light/dark content → adaptive lead */
.home-page .services a.mute, .itoro-rapid a.mute, .services .col a.mute,
.contact-info a, .contact-info-section a{ color: var(--lead) !important; }
/* small notes/legends/chips → adaptive muted (fixes SD legend, "First server…", chips) */
.pp .muted, .itoro-support .legend, .itoro-support tr.price td small,
.categories a, .posts-list .categories a{ color: var(--muted) !important; }
/* support table column sub-labels (NBD·Entry etc.) sit on the CRIMSON header → keep white */
.itoro-support thead th small{ color: #ffffff !important; opacity: 1 !important; }
/* emergency panel note sits on an ALWAYS-dark panel → keep it light */
.pp .emerg .src{ color: #9a95a0 !important; }
/* estimate summary card is ALWAYS dark → its muted footnote must stay light (both modes) */
.pp .summary .muted, .pp .summary p{ color: #9a95a0 !important; }
/* remaining muted notes on light bg → AA (NIS2 disclaimer, support price-row label) */
.itoro-nis2 .disc, .itoro-support tr.price td:first-child{ color: var(--muted) !important; }
/* estimate footnote sits on the always-dark summary card → keep light */
.pp .summary small, .pp .summary .fine, .pp .summary .disc{ color: #9a95a0 !important; }
/* the crimson "Is your business safe" CTA banner is ALWAYS crimson → force white text
   (my dark-mode p-flip had dimmed its subtitle on every page) */
.plans-and-pricing-banner, .plans-and-pricing-banner h2, .plans-and-pricing-banner p,
.plans-and-pricing-banner .subtitle{ color: #ffffff !important; }
/* trim the CTA banner's oversized top/bottom padding to ~1cm (was 82–105px) */
.plans-and-pricing-banner{ padding-top:38px !important; padding-bottom:38px !important; }

/* 2.5.8 Target Size (Min 24px) — language switcher taps */
.nav-bar-language a, .toggle-language a{ display: inline-block; padding: 6px 4px; line-height: 1; }
/* form controls comfortable to hit */
.contact-form input, .contact-form textarea, .qv input, .qv textarea{ min-height: 44px; }
.pp .emerg .einc input, .pp label.item input[type="radio"], .pp label.item input[type="checkbox"]{
  width: 20px; height: 20px;
}