/*
Theme Name: Consultio Child
Theme URI: http://demo.casethemes.net/consultio/
Author: Case-Themes
Author URI: https://themeforest.net/user/case-themes/portfolio/
Description: Consultio is the Perfect Consulting Finane & Business WordPress Theme. Consultio is best suited for corporate website like Consultioial Advisor, Accountant, Consulting Firms, insurance, loan, tax help, Investment firm etc. This is a business theme that is help full for online presence for Corporate Business and Consultioial Firms.   
Version: 3.2.8
License: ThemeForest
License URI: https://themeforest.net/licenses
Template: consultio
Text Domain: consultio-child
Tags: advisor, attorney, corporate accountant, consulting, consultant, finance, insurance, invest, investment, investor, mutual funds, pensions, retirement, saving, trading 
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* =========================================================
   Ilis Consulting brand overrides
   The parent theme compiles its colours into assets/css/theme.css from SCSS.
   Editing that file would be lost on a theme update, so the brand rules the
   theme options cannot reach live here instead.
   ========================================================= */

:root {
	--header-backup: #4B4CA0;
    --ilis-indigo: #4B4CA0;
    --ilis-indigo-deep: #343680;
    --ilis-ink: #1E2050;
    --ilis-accent: #EE7223;
    --ilis-accent-hover: #D8611A;
    --ilis-muted: #5B5D7E;
    /* The design's label tint for text sitting on an indigo ground, where
       --ilis-muted would fail contrast. Never used on a light ground. */
    --ilis-on-indigo-muted: #C9C9E8;
    /* The site's light ground. Was #FFFFFF; a pale indigo tint of the brand
       hue since 2026-09-15, so the white cards and panels that sit on it read
       as panels instead of dissolving into it. */
    --ilis-ground: #E3E4F2;
    /* The design's spacing scale, mirrored here as it gets used. */
    --ilis-space-sm: 16px;
}

/* Orange is the single action colour, so every submit uses it.
   Selectors are body-scoped: the parent's compiled theme.css is enqueued
   after this stylesheet, so equal specificity would lose on load order. */
body .wpcf7 input[type="submit"],
body .wpcf7 .wpcf7-submit {
    background-color: var(--ilis-accent);
    /* The theme option puts `btn-type-gradient` on <body>, which paints every
       submit with a flat indigo linear-gradient. That sits ON TOP of
       background-color, so the orange above is invisible until the image is
       cleared. Symptom to remember: computed backgroundColor reads orange while
       the button still looks indigo. */
    background-image: none;
    border: none;
    color: #FFFFFF;
    border-radius: 4px;
    padding: 16px 34px;
    font-weight: 700;
    letter-spacing: 0;
    box-shadow: none;
    transition: background-color .2s ease;
}

body .wpcf7 input[type="submit"]:hover,
body .wpcf7 .wpcf7-submit:hover {
    background-color: var(--ilis-accent-hover);
    background-image: none;
    color: #FFFFFF;
}

/* Form fields on the indigo band: white ground, no visible border. */
.elementor-element-contact-col-form .wpcf7 input[type="text"],
.elementor-element-contact-col-form .wpcf7 input[type="email"],
.elementor-element-contact-col-form .wpcf7 input[type="tel"],
.elementor-element-contact-col-form .wpcf7 textarea {
    background-color: #FFFFFF;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--ilis-ink);
}

.elementor-element-contact-col-form .wpcf7 ::placeholder {
    color: var(--ilis-muted);
    opacity: 1;
}

/* The phone link sits on indigo, so the theme's indigo link colour is invisible. */
.elementor-element-contact-phone a {
    color: #FFFFFF;
}

.elementor-element-contact-phone a:hover {
    color: var(--ilis-accent);
}

/* Approach bullets carry the accent. */
.elementor-element-approach-home .item--icon,
.elementor-element-approach-home .item--icon i {
    color: var(--ilis-accent);
}

/* Service card read-more arrow follows the same accent. */
.elementor-element-services-grid .entry-readmore .btn-arrow {
    background-color: transparent;
    color: var(--ilis-accent);
    padding-left: 0;
}

.elementor-element-services-grid .entry-readmore .btn-arrow:hover {
    color: var(--ilis-accent-hover);
}


/* =========================================================
   Interest form inside a service page indigo CTA box
   Mirrors the homepage contact panel above: white ground, no visible border.
   The transparent 1px border is deliberate, it reserves the space so the
   invalid state can colour a border without shifting the layout.
   ========================================================= */

.ilis-cta-form .wpcf7 input[type=text],
.ilis-cta-form .wpcf7 input[type=email],
.ilis-cta-form .wpcf7 input[type=tel],
.ilis-cta-form .wpcf7 textarea {
    background-color: #FFFFFF;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--ilis-ink);
    margin-bottom: 16px;
}

.ilis-cta-form .wpcf7 ::placeholder {
    color: var(--ilis-muted);
    opacity: 1;
}

/* States. CF7 defaults are a red that fails contrast on indigo, so the tip
   goes white and the offending field takes an accent border. */
/* Invalid fields get an accent ring. This uses outline rather than
   border-color on purpose: the parent theme and CF7 both set the border of
   .wpcf7-not-valid with !important (to an off-palette red), and the white-field
   rule above reserves a transparent border, so a border here is a three-way
   cascade fight. An outline draws outside the box, so it needs no reserved
   space, shifts nothing, and nothing else on the site competes for it. */
.ilis-cta-form .wpcf7 input.wpcf7-not-valid,
.ilis-cta-form .wpcf7 textarea.wpcf7-not-valid {
    outline: 2px solid var(--ilis-accent);
    outline-offset: 0;
}

.ilis-cta-form .wpcf7 .wpcf7-not-valid-tip {
    color: #FFFFFF;
    font-size: 13px;
    margin-top: -12px;
    margin-bottom: 12px;
}

/* CF7 colours this border per state with its own amber, green and red, none
   of which are in the palette, and all of which clash with indigo. The state is already carried by
   the message text and by the accent border on the offending field, so the box
   itself stays neutral. The state selectors are needed to outrank CF7's own. */
.ilis-cta-form .wpcf7 form .wpcf7-response-output,
.ilis-cta-form .wpcf7 form.invalid .wpcf7-response-output,
.ilis-cta-form .wpcf7 form.unaccepted .wpcf7-response-output,
.ilis-cta-form .wpcf7 form.spam .wpcf7-response-output,
.ilis-cta-form .wpcf7 form.sent .wpcf7-response-output,
.ilis-cta-form .wpcf7 form.failed .wpcf7-response-output,
.ilis-cta-form .wpcf7 form.aborted .wpcf7-response-output {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, .45);
    border-radius: 4px;
    margin: 8px 0 0;
    padding: 12px 16px;
}

.ilis-cta-form .wpcf7 .wpcf7-spinner {
    background-color: #FFFFFF;
}

/* The submit already takes the site-wide orange rule above. It only needs to
   stop stretching once the row gives it a full-width column. */
.ilis-cta-form .wpcf7 input[type=submit] {
    width: auto;
    margin-top: 8px;
}

@media (max-width: 767px) {
    .ilis-cta-form .wpcf7 input[type=submit] {
        width: 100%;
    }
}

/* Consent checkbox. The theme styles list-item labels for light grounds, so on
   indigo the text needs the on-brand tint from the palette. accent-color tints
   the native checkbox with the action colour, which avoids replacing it with
   custom markup. */

.ilis-cta-form .ilis-consent {
    margin-bottom: 20px;
}

.ilis-cta-form .wpcf7 .wpcf7-acceptance .wpcf7-list-item {
    margin: 0;
}

.ilis-cta-form .wpcf7 .wpcf7-acceptance label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    cursor: pointer;
    font-weight: 400;
    color: #DCDCEC;
    font-size: 14px;
    line-height: 1.55;
}

.ilis-cta-form .wpcf7 .wpcf7-acceptance .wpcf7-list-item-label {
    color: #DCDCEC;
    font-size: 14px;
    line-height: 1.55;
}

.ilis-cta-form .wpcf7 .wpcf7-acceptance input[type=checkbox] {
    width: 18px;
    min-width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--ilis-accent);
}

/* The tip rule above pulls itself up over an input's 16px bottom margin. The
   consent row has no such margin, so it needs the offset removed. */
.ilis-cta-form .ilis-consent .wpcf7-not-valid-tip {
    margin-top: 4px;
    margin-bottom: 0;
}

/* Submit matches the sidebar CTA button exactly: same orange, same white label,
   same hover, same radius and padding. The site-wide submit rule further up
   already sets the colours; these are restated here so this form keeps the
   sidebar button's look even if that shared rule is ever retuned. */
.ilis-cta-form .wpcf7 input[type=submit] {
    background-color: var(--ilis-accent);
    background-image: none;
    color: #FFFFFF;
    border: none;
    border-radius: 4px;
    padding: 16px 24px;
    font-size: 15px;
    font-weight: 700;
    box-shadow: none;
}

.ilis-cta-form .wpcf7 input[type=submit]:hover,
.ilis-cta-form .wpcf7 input[type=submit]:focus {
    background-color: var(--ilis-accent-hover);
    background-image: none;
    color: #FFFFFF;
}

/* The privacy-policy link inside the consent label. The theme's link colour is
   the brand indigo, which is invisible against the indigo CTA box, so it is
   restated in white with an underline to stay recognisable as a link. */
.ilis-cta-form .wpcf7 .wpcf7-acceptance a {
    color: #FFFFFF;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ilis-cta-form .wpcf7 .wpcf7-acceptance a:hover,
.ilis-cta-form .wpcf7 .wpcf7-acceptance a:focus {
    color: var(--ilis-accent);
    text-decoration: underline;
}


/* =========================================================
   Header top bar
   ========================================================= */

/* The email and phone in the bar above the header ship at 14px from the
   parent theme's compiled theme.css, which is enqueued after this stylesheet.
   The #id here outranks the parent's class-only rule on specificity, so load
   order does not matter. The <i> icons carry no explicit size and inherit, so
   they scale with the text instead of staying behind at 14px. The bar itself
   is display:none below the theme's desktop breakpoint, so this only shows on
   wide viewports. */
body #ct-header-top .ct-header-holder li,
body #ct-header-top .ct-header-holder li a {
    font-size: 15px;
}

/* Every glyph in the bar — the envelope, the phone and the two social icons —
   carries the same tint. The theme ships them at #4B4CA0, a near neighbour of
   the #343680 ground behind them, which lands at about 1.4:1 and all but
   vanishes. The on-indigo label tint holds about 6.5:1 and still sits a step
   quieter than the #FAFAFA text beside it, which is the right weight for a
   marker standing next to its own label.

   The colour has to be declared on the <i>. The theme sets
   `.ct-header-holder li i { color }` on the element itself, and a declared
   value beats an inherited one however specific the rule on the anchor is, so
   colouring only the link leaves the glyphs untouched.

   Selectors here restate the theme's own `#ct-header-wrap` +
   `#ct-header-top.ct-header-top10` + `.ct-header-holder` chain and add `body`,
   which puts them exactly one element ahead. Matching without the extra step
   would lose on load order, because the parent's compiled theme.css is
   enqueued after this stylesheet. Naming .ct-header-top10 is safe rather than
   brittle: that class is written in this child theme's own
   template-parts/header-layout-19.php, so it cannot drift without us. */
body #ct-header-wrap #ct-header-top.ct-header-top10 .ct-header-holder li i {
    color: var(--ilis-on-indigo-muted);
    transition: color 0.2s linear;
}

/* The glyph follows its own link to white on hover, which is what the label
   beside it already does. */
body #ct-header-wrap #ct-header-top.ct-header-top10 .ct-header-holder li a:hover i,
body #ct-header-wrap #ct-header-top.ct-header-top10 .ct-header-holder li a:focus-visible i {
    color: #FFFFFF;
}

/* Facebook and LinkedIn ride in the same <ul> as the email and phone, so the
   theme's own 20px gap and the 1px divider it draws before every item but the
   first apply to them for free. Only the inside of the item needs rules. */
body #ct-header-wrap #ct-header-top .ct-header-holder li.ct-topbar-social {
    display: flex;
    align-items: center;
    gap: 16px;
}

body #ct-header-wrap #ct-header-top .ct-header-holder li.ct-topbar-social a {
    line-height: 1;
}

/* The theme's `li i { margin-right: 8px }` spaces the icon from the email and
   phone text that follows it. These two icons are the whole link, so that
   trailing gap would only push the pair away from the bar's right edge. */
body #ct-header-wrap #ct-header-top .ct-header-holder li.ct-topbar-social i {
    margin-right: 0;
    font-size: 15px;
}


/* =========================================================
   Main content body copy: 16px -> 19px
   ========================================================= */

/* Two rules, because the 16px has two different origins.

   1. The article wrapper. Plain WordPress content (posts, and anything not
      built in Elementor) inherits straight from here, so raising the wrapper
      carries p, li, em and the rest with it. The theme's line-height on this
      wrapper is unitless (1.875), so the leading scales with the text by
      itself and needs no restating.

   2. The theme's tab widget, which carries most of the ISO/service copy. It
      declares its own size in
      `.ct-tabs--layout1.style1 .ct-tabs-content .ct-tab-content` (four
      classes), so inheritance never reaches it and a shorter selector loses on
      specificity no matter the load order. The selector below is four classes
      plus an element, which outranks it while staying layout-agnostic (it does
      not hardcode `--layout1.style1`). Its line-height IS a fixed 27px, which
      at 19px would tighten the leading from 1.69 to 1.42, so it is restated as
      a ratio to keep the original rhythm.

   Deliberately NOT touched: Elementor widgets that carry their own font size
   set in the builder (16px, 18px and 15px all occur). Those are editable
   content decisions rather than theme defaults, and overriding them from here
   would both fight the builder and strand the client's own edits. Elementor's
   global typography tokens are unset on this site, so there is no single
   builder-side knob for them either — they are per widget. */

body .entry-content {
    font-size: 19px;
}

body .entry-content .ct-tabs .ct-tabs-content .ct-tab-content {
    font-size: 19px;
    line-height: 1.7;
}

/* The callout-list description is the third origin of sub-19px body copy. The
   theme sets it per list style (`.ct-list.style1 .ct-list-desc` is 15px,
   other style variants land on 16px), and the ct_list widget exposes no
   typography control at all, so the builder cannot reach it — CSS is the only
   lever. Three classes plus the body element outranks the theme's three
   classes whichever style variant is in play. Its line-height is already a
   ratio (1.875), so the leading follows the text on its own. */
body .entry-content .ct-list .ct-list-desc {
    font-size: 19px;
}

/* style1's leading is already a ratio (1.875) and follows the size up on its
   own. style2's is a fixed 26px, which at 19px would crush the leading to
   1.37, so that variant alone gets its original 26/16 ratio restated. */
body .entry-content .ct-list.style2 .ct-list-desc {
    line-height: 1.625;
}

/* =========================================================
   Footer
   ========================================================= */

/* The theme gives the footer its own face: `.site-footer-custom { font-family:
   Poppins }` in the compiled theme.css, which overrides for the whole footer
   subtree the Manrope that <body> already carries. Poppins ships no Greek
   subset, so every Greek string down here was falling back to another family
   mid-render. Handing the footer back to `inherit` puts it on the site's own
   body font and keeps it there if that font is ever changed, instead of
   pinning a second copy of the name in this file.

   One class against one class, so it is the extra elements in this selector
   that win it — which they have to, because the parent's compiled theme.css is
   enqueued after this stylesheet and would take an equal-specificity tie. */
body footer.site-footer-custom {
    font-family: inherit;
}

/* The footer menu is the one thing the builder cannot bring to 15px. Its
   widget, ct_navigation_menu, exposes a Link Color control and nothing else —
   no typography section at all — so the size has to come from here. Colour is
   set on the widget itself, and the hover (white, plus the theme's own 8px
   slide) already works, so only the size is restated.

   The theme's rule is `.ct-navigation-menu1.tow-col-light ul.menu li a`. This
   matches its three classes through the footer wrapper rather than by naming
   `.tow-col-light`, so a change of menu style in Elementor will not silently
   drop the rule, and it wins on element count. */
body footer.site-footer-custom .ct-navigation-menu1 ul.menu li a {
    font-size: 15px;
}


/* =========================================================
   Light ground: #FFFFFF -> #E3E4F2
   ========================================================= */

/* The site's light ground is painted by <body> and nothing else: every page
   wrapper above it (#page, #content, .site, main, .elementor) is transparent,
   and 204 of the 243 Elementor sections on the site declare no background of
   their own, so they simply show whatever <body> is. Changing this one
   declaration therefore moves every light surface on the site at once,
   including the blog, the archives and WooCommerce, which carry no Elementor
   sections at all.

   The theme registers a `body_bg_color` field in Theme Options, but nothing in
   the theme ever reads it back — it is declared in inc/theme-options.php and
   referenced nowhere else — so setting it from the admin has no effect and
   this is the only working lever.

   `html body` rather than `body`: the theme's own `body { background-color:
   #fff }` lives in the compiled theme.css, which is enqueued after this
   stylesheet and would win an equal-specificity tie. The extra element settles
   it without an !important. */
html body {
    background-color: var(--ilis-ground);
}

/* The `fixed_footer` theme option (on for this site) puts an opaque sheet over
   the ground on desktop, so the <body> rule above is invisible there. The
   theme's mechanism is:

     @media (min-width: 1200px) {
       .fixed-footer .site-footer-custom { position: fixed; bottom: 0; z-index: -1 }
       .fixed-footer #ct-masthead, .fixed-footer .site-content { background-color: #fff }
     }

   The footer sits behind the page at z-index -1 and is revealed as the content
   scrolls off it, which only works while the header and the content column are
   opaque. So these two cannot be made transparent to let <body> through — they
   have to carry the ground colour themselves, and only inside the same query,
   because below 1200px the footer is static and the sheet is not wanted.

   `body.fixed-footer` rather than `.fixed-footer`: one element ahead of the
   theme's own selectors, which is what settles it given that theme.css is
   enqueued after this stylesheet. */
@media screen and (min-width: 1200px) {
    body.fixed-footer #ct-masthead,
    body.fixed-footer .site-content {
        background-color: var(--ilis-ground);
    }
}


/* =========================================================
   Page title badge (ACF product_badge)
   ========================================================= */

/* Printed by ilis_page_badge() as the first child of .page-title-holder, so it
   sits above the <h1> inside the title banner and inherits the banner's own
   alignment — centred here, but it follows the theme's ptitle_align option if
   that ever changes, which is why nothing below forces a text-align.

   line-height: 0 on the wrapper removes the descender gap an inline image
   leaves underneath itself, so the 16px below is the real optical gap. */
#pagetitle .ilis-page-badge {
    margin-bottom: var(--ilis-space-sm);
    line-height: 0;
}

/* max-height rather than max-width: badges arrive at whatever size the client
   uploads, and capping the height is what keeps a wide logo and a square seal
   looking like the same element. width:auto holds the aspect ratio against the
   width/height attributes wp_get_attachment_image() writes out. */
#pagetitle .ilis-page-badge .ilis-page-badge-img {
    display: inline-block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 110px;
}

@media screen and (max-width: 767px) {
    #pagetitle .ilis-page-badge .ilis-page-badge-img {
        max-height: 72px;
    }
}


/* =========================================================
   Site-wide title-banner background
   ========================================================= */

/* One banner image for the whole site. This started as a service-pages-only
   rule (`body.single-service ...`) while the ISO catalog was being built; it
   was widened on 2026-09-22 because every other page was still falling back
   to the theme option's default, which is `2020/05/bg-page-title-u.jpg` --
   a leftover Consultio demo photo. So this rule is doing two jobs: it sets
   the brand banner everywhere, and it retires that demo image.

   It also overrides the handful of pages (Team, FAQ, Pricing, Testimonials,
   Team Details) whose "Page Options" still point their banner at an absolute
   demo.casethemes.net URL -- those were hotlinking a third-party site on
   every page view, which this stops.

   The parent theme paints a per-page background here through
   inc/classes/class-css-generator.php, which prints
   `body .site #pagetitle.page-title { background-image: url(...) }` from that
   same meta box.

   !important is required rather than optional: that generator's inline
   <style> block is printed in wp_head, which runs after this stylesheet's
   <link> is enqueued, so on source order alone a per-page override would
   beat this rule despite matching specificity. !important makes this rule
   win regardless of whether a future edit ever sets that per-page option,
   which matches the intent here: one brand banner for the whole site.

   That does NOT paint the site into a corner, because a real per-page escape
   hatch already exists above this one: ilis_title_banner_style_attr() prints
   the ACF `title_banner_bg` field as a style="" attribute on #pagetitle, and
   an inline style outranks any stylesheet rule in both the normal and the
   !important tier. So a page that genuinely needs its own banner sets that
   ACF field and wins; everything else inherits this one.

   .bg-image already carries background-size: cover / position: center /
   repeat: no-repeat from the parent's compiled theme.css. background-size is
   restated below only for clarity; background-position is restated with
   !important and changed to "center bottom" so the banner crops toward the
   bottom of the image instead of the parent's centred default. */
body .site #pagetitle.page-title.bg-image {
    background-image: url('https://ilisconsulting.rdc-web.gr/wp-content/uploads/2026/09/services-banner.jpg') !important;
    background-size: cover;
    background-position: center bottom !important;
}


/* =========================================================
   Service carousel (layout 15): ACF product_badge as the card mark
   ========================================================= */

/* The child override of
   elementor/templates/widgets/ct_service_carousel/layout15.php swaps the
   theme's `service_icon` icon font for the service's own `product_badge`
   image whenever that ACF field is set, and marks the existing .item--icon
   wrapper with .ilis-item-badge so only that case is styled here. Cards that
   fall back to the icon font keep the theme's own rules untouched.

   That override is a plain child-theme file rather than a fork-by-necessity
   like template-parts/page-title.php: the theme resolves these widget
   templates through ct_get_locate_template(), which calls locate_template()
   and so checks the child theme before the parent. The file wins by existing.

   line-height: 0 removes the descender gap an inline image leaves beneath
   itself, so the wrapper's own bottom margin from the theme stays the real
   optical gap -- same reason as #pagetitle .ilis-page-badge above. */
body .ct-service-carousel15 .item--icon.ilis-item-badge {
    line-height: 0;
}

/* max-height rather than max-width, matching the page-title badge: the seals
   are all square today (1254x1254), but the client uploads these, and capping
   the height is what keeps a wide mark and a square one reading as the same
   element. width:auto holds the aspect ratio against the width/height
   attributes wp_get_attachment_image() writes out.

   No radius, no ground and no shadow: the design reserves its 8px radius for
   framed images, and these are transparent seals rather than photos, so a
   frame would invent a treatment the direction does not list -- and the
   direction bans drop shadows on cards outright. */
body .ct-service-carousel15 .item--icon.ilis-item-badge .ilis-item-badge-img {
    display: inline-block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 72px;
}

@media screen and (max-width: 767px) {
    body .ct-service-carousel15 .item--icon.ilis-item-badge .ilis-item-badge-img {
        max-height: 60px;
    }
}

/* A carousel that mixes the two marks -- some services carry a badge, some
   fall back to the icon font -- puts a 72px image beside a shorter glyph, and
   everything under it (title, excerpt, arrow) then sits at a different height
   from card to card. Reserving the badge's own height on the wrapper in both
   cases lines the row back up. Both marks stay top-aligned inside that box,
   which is what makes the titles below them agree.

   :has() scopes this to carousels that actually contain a badge, so the
   icon-only carousels on the services that have no badge yet keep the theme's
   own tighter spacing and are not silently restyled. Where :has() is
   unsupported the rule is simply dropped and the row falls back to today's
   small misalignment, which is why nothing here depends on it. */
body .ct-service-carousel15:has(.ilis-item-badge) .item--icon {
    min-height: 72px;
}

@media screen and (max-width: 767px) {
    body .ct-service-carousel15:has(.ilis-item-badge) .item--icon {
        min-height: 60px;
    }
}

/* The widget already caps the excerpt by WORD count (num_words, 18 on the
   service pages), but 18 words wrap to two lines or three depending on how
   long they are, so the cards in a row end at different heights and the
   read-more arrows sit on different baselines.

   Clamping to three LINES and reserving three lines settles both halves of
   that: the clamp stops a long excerpt at three, the min-height pads a short
   one out to three.

   min-height is in `lh` -- three line boxes of whatever line-height the theme
   has already set on this element -- so the reservation stays correct without
   restating the theme's typography here, and keeps following it if that ever
   changes. Where `lh` is unsupported the declaration is dropped and the row
   falls back to today's ragged heights; the clamp itself still applies.

   display:-webkit-box is not a stylistic choice, it is what -webkit-line-clamp
   requires, together with the box orientation and overflow below. The standard
   `line-clamp` is listed beside the prefixed one so this stops depending on
   the prefix as browsers finish shipping it. */
body .ct-service-carousel15 .item--content {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    min-height: 3lh;
}


/* =========================================================
   Service grid (layout 14): ACF product_badge as the card mark
   ========================================================= */

/* Companion to the carousel rule further up. The child override of
   elementor/templates/widgets/ct_service_grid/layout14.php marks the wrapper
   with .ilis-item-badge when the card's mark is the ACF image rather than the
   theme's icon font, so only that case is touched here.

   The size is NOT restated: the theme already caps `.ct-service-grid14
   .item--icon img` at 68px, which is the scale this card was designed around,
   and the badges are square so nothing else needs constraining. Only the
   descender gap an inline image leaves under itself has to go, the same fix as
   the page-title and carousel badges -- the theme's own `line-height: 1` on
   this wrapper is what creates it. */
body .ct-service-grid14 .item--icon.ilis-item-badge {
    line-height: 0;
}

body .ct-service-grid14 .item--icon.ilis-item-badge .ilis-item-badge-img {
    display: inline-block;
    width: auto;
    height: auto;
    max-width: 100%;
}


/* =========================================================
   Συστήματα ISO (service 5541): the standards grid section
   ========================================================= */

/* This page had no Elementor document at all until the grid was added, so its
   section carries no builder padding and the catalog would otherwise butt
   straight into the footer. The design's vertical rhythm is 100px of section
   padding on desktop dropping to 56px on mobile, which is what these restate.

   Only the bottom is set: the theme's own content wrapper already puts 90px
   between the title banner and the first section, and adding a top padding
   here would stack on it rather than replace it.

   The selectors lean on the semantic element ids the section and its intro
   were created with (`iso-grid-section`, `iso-grid-intro`), which Elementor
   renders as `.elementor-element-<id>` -- the same convention the brand rules
   further up already use for `.elementor-element-services-grid` and
   `.elementor-element-contact-col-form`. Elementor's own per-element padding
   control is not reachable here: the legacy `section` element type is not
   registered as an editable widget on this install, so its settings cannot be
   written programmatically and CSS is the working lever. */
body .elementor-element-iso-grid-section {
    padding-bottom: 100px;
}

@media screen and (max-width: 767px) {
    body .elementor-element-iso-grid-section {
        padding-bottom: 56px;
    }
}

/* The intro sentence sits directly on top of the first card row with no gap of
   its own. 32px is the design's `md` spacing step.

   The selector has to clear three classes, not one. The parent's compiled
   theme.css carries `.elementor-element .elementor-widget:not(:last-child) {
   margin-bottom: 0 }` -- two classes plus a pseudo-class, so specificity
   (0,3,0) -- which is what zeroes the gap between stacked widgets site-wide.
   Matching that chain and adding this widget's own id class scores (0,3,1),
   one step ahead, which is what it takes; load order cannot settle it either
   way because theme.css is enqueued after this stylesheet. */
body .elementor-element .elementor-widget.elementor-element-iso-grid-intro {
    margin-bottom: 32px;
}

/* =========================================================
   Client logo carousel
   ========================================================= */

/* One carousel, stored once as the Elementor template "Λογότυπα Πελατών –
   Carousel" and placed on each page through the Template widget, so a new
   client is added in that template rather than on every page. The widget
   carries the `ilis-clients-carousel` class from inside the template.

   The theme's style1 greys every logo to 50% opacity until hover. Here the
   client's marks are the content, so they show in full colour, each on a white
   panel: that is what lets the same carousel read on the pale #E3E4F2 ground
   and on the homepage's indigo band alike, since several of the marks are dark
   and would vanish on indigo. The tile matches the logo wall on Συνεργασίες:
   #FFFFFF panel, #E2E2EE hairline going #4B4CA0 on hover, 8px radius, no
   shadow.

   Specificity: the theme's `.ct-client1.style1 .client-image a` is (0,3,1) and
   theme.css loads after this file, so the selector below leads with `body` to
   reach (0,3,2). The logos are uniform 452x220 canvases, so every tile comes
   out the same height without a min-height. */
body .ilis-clients-carousel .ct-client1 .client-image a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    background-color: #FFFFFF;
    border: 1px solid #E2E2EE;
    border-radius: 8px;
    -webkit-filter: none;
    filter: none;
    opacity: 1;
}

body .ilis-clients-carousel .ct-client1 .client-image a:hover,
body .ilis-clients-carousel .ct-client1 .client-image a:focus-visible {
    border-color: #4B4CA0;
}

body .ilis-clients-carousel .ct-client1 .client-image img {
    display: block;
    width: 100%;
    height: auto;
}

@media screen and (max-width: 767px) {
    body .ilis-clients-carousel .ct-client1 .ct-clients-list-inner {
        margin: 0 -8px;
    }

    body .ilis-clients-carousel .ct-client1 .ct-clients-list-inner .slick-slide {
        padding: 0 8px;
    }

    body .ilis-clients-carousel .ct-client1 .client-image a {
        padding: 8px 10px;
    }
}
/* =========================================================
   Secondary button (Consultio `line-white` style)
   ========================================================= */

/* The design's secondary button is a 1px white stroke on a dark ground that
   fills white with ink text on hover -- which is exactly what the hero's
   "Επικοινωνία" button is configured to do in Elementor (hover background
   #FFFFFF, hover text #1E2050).

   The theme's `line-white` style fights that. It paints a 4px #4B4CA0 bar
   down the button's left edge as a ::before, and on hover widens it to 100%.
   Because the button sets `position: relative; z-index: 1` it is its own
   stacking context, so that z-index:-1 bar paints ABOVE the button's own white
   hover background: the visible hover state was ink #1E2050 text on indigo
   (about 2:1 contrast) with square corners inside the 4px-rounded stroke, and
   the resting state carried a stray indigo stripe. Removing the bar lets the
   builder's own hover colours show through; nothing else about the button
   changes.

   Specificity: theme.css loads after this file and its rule is
   `.btn.line-white:before` (0,2,1); the leading `body` makes this (0,2,2).
   The theme's hover rule only changes the bar's width, never its display, so
   it cannot bring the bar back. */
body .btn.line-white::before {
    display: none;
}

/* The theme strips the focus outline from links, which left this button with
   no keyboard focus state at all once the bar was gone. A white ring offset
   from the stroke reads on the dark hero and does not touch the colours the
   builder owns (those are set with !important from the Elementor side). */
body .btn.line-white:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 3px;
}
/* =========================================================
   Contact form on a light ground (Επικοινωνία page, CF7 form 91)
   ========================================================= */

/* The widget's own controls already give the fields a white ground, no
   visible border and ink text. Two things they cannot reach:

   - The placeholder inherits the ink input colour, so an empty field reads as
     already filled in. The design sets placeholders in #5B5D7E.
   - The consent checkbox. The theme lays the CF7 acceptance label out inline,
     which put the checkbox on top of the first line of the consent text, and
     the text inherited the 19px body size. This mirrors the interest form's
     consent row (`.ilis-cta-form` above) with light-ground colours: flex row,
     18px box in the accent colour, 14px muted text. The privacy link keeps the
     theme's indigo link colour, which reads fine on the pale ground.

   The `ilis-page-form` class is set on the ct_ctf7 widget in Elementor
   (Advanced > CSS Classes). */
body .ilis-page-form .wpcf7 ::placeholder {
    color: #5B5D7E;
    opacity: 1;
}

/* The widget's field colours (post-24.css, `!important`) target every
   .wpcf7-form-control except the submit, and the acceptance wrapper is one of
   them. It is an inline span, so its white ground paints a strip behind the
   first line of the consent text only. The extra classes outrank that rule. */
body .ilis-page-form .ct-contact-form-layout1 .wpcf7-form .wpcf7-form-control.wpcf7-acceptance {
    background-color: transparent !important;
    border-color: transparent !important;
}

body .ilis-page-form .wpcf7 .wpcf7-acceptance .wpcf7-list-item {
    margin: 0;
}

body .ilis-page-form .wpcf7 .wpcf7-acceptance label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    cursor: pointer;
    font-weight: 400;
}

body .ilis-page-form .wpcf7 .wpcf7-acceptance .wpcf7-list-item-label {
    color: #5B5D7E;
    font-size: 14px;
    line-height: 1.55;
}

body .ilis-page-form .wpcf7 .wpcf7-acceptance input[type="checkbox"] {
    width: 18px;
    min-width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: #EE7223;
}

body .ilis-page-form .ilis-consent {
    margin-bottom: 20px;
}


/* =========================================================
   Main menu right edge
   ========================================================= */

/* The search icon and the hidden-sidebar burger are both off in the theme
   options (`search_icon`, `hidden_sidebar_icon`), which leaves
   .ct-header-meta as an empty box. Two 17px gaps remain: the meta's own
   margin-left and the margin-right on the last menu item. Together they stop
   the menu 34px short of the LinkedIn icon in the top bar, which sits on the
   container's right edge. :has() limits both rules to the empty case, so the
   spacing comes back by itself if either icon is switched on again. The
   #ct-header-wrap id is needed to outrank theme.css's own
   `#ct-header-wrap .ct-header-meta { display: flex }`. */
@media screen and (min-width: 1200px) {
    body #ct-header-wrap .ct-header-navigation:not(:has(.header-right-item)) .ct-header-meta {
        display: none;
    }

    body #ct-header-wrap .ct-header-navigation:not(:has(.header-right-item)) .ct-main-menu > li:last-child {
        margin-right: 0;
    }
}


/* =========================================================
   Pagination arrows: the parent's broken icon markup
   ========================================================= */

/* The prev/next links in the posts pagination ship as
   `<i class="far fac-angle-right">` -- Font Awesome's REGULAR family class
   paired with the theme's own `fac-` icon prefix. It is the same mistake as
   the top bar's social icons (see ilis_topbar_social() in functions.php,
   which ships `fab fac-facebook-f`): the theme's content rule only matches
   when the `fac` family class is present, so with `far` the ::before resolves
   to `content: none` and the link renders as an empty circle.

   The markup is printed by consultio_posts_pagination() inside
   inc/template-tags.php, a 283KB theme file that is not resolved through
   locate_template(), so there is no child template to override -- CSS is the
   only lever here.

   Font Awesome 6 Free rather than the `fac` family the theme intended: `far`
   already points these elements at "Font Awesome 6 Free", that family is
   confirmed loaded on the front end, and its Solid face (weight 900) carries
   both glyphs. The theme's own "Font Awesome 5 Pro" is declared but does not
   pass document.fonts.check(), so leaning on it would be a guess. \f104 and
   \f105 are Font Awesome's standard angle-left / angle-right codepoints --
   the same ones the theme's `fac-angle-*` classes resolve to. */
body .posts-pagination .page-numbers i.fac-angle-left::before,
body .posts-pagination .page-numbers i.fac-angle-right::before,
body .ct-grid-pagination .page-numbers i.fac-angle-left::before,
body .ct-grid-pagination .page-numbers i.fac-angle-right::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

body .posts-pagination .page-numbers i.fac-angle-left::before,
body .ct-grid-pagination .page-numbers i.fac-angle-left::before {
    content: "\f104";
}

body .posts-pagination .page-numbers i.fac-angle-right::before,
body .ct-grid-pagination .page-numbers i.fac-angle-right::before {
    content: "\f105";
}

/* The items rendered as a bordered circle sitting inside a white rounded
   square -- two competing shapes per link. The circle is the intended one:
   the theme draws it with the item's own pseudo-elements (::before is the
   2px #EEECEC outline, ::after the #4B4CA0 fill for the current/hover state),
   both at a 51px radius on a 51px box.

   The square is the accident. `.posts-pagination .page-numbers` in the
   parent's compiled theme.css sets `background-color: #fff; border-radius:
   6px` on the element itself, so the white panel and its 6px corners render
   behind the circle instead of being covered by it.

   Clearing the background is what removes the square; the radius is set to
   match the circle anyway so nothing square can reappear if a later state
   paints a background. 6px was also off the design's radius scale (4px for
   interactive, 8px for cards), and #FFFFFF is reserved for panels that sit on
   the ground -- a pagination chip is neither.

   `body` plus the theme's own two classes scores (0,2,1) against its (0,2,0),
   which is what settles it: theme.css is enqueued after this stylesheet, so
   an equal-specificity match would lose on source order. */
body .posts-pagination .page-numbers {
    background-color: transparent;
    border-radius: 50%;
}


/* =========================================================
   Footer: drop the demo wave graphic
   ========================================================= */

/* The footer's top edge carried a blue wave illustration --
   `2020/06/bg-footer-scaled.png`, another leftover Consultio demo asset,
   set as the section's background image at `50% 0%` so it sat across the
   top. Its colours are the demo's blues, not this site's indigo, and the
   design bans leaving demo content on a live page.

   This is a CSS patch, not the root fix: the image is still stored on the
   footer-main section's own Elementor settings, and
   novamira/elementor-edit-element refuses to write to it ("widget_type
   'section' ... is not registered"), so it cannot be cleared from here.
   Removing the Background Image on that section in the Elementor editor is
   the real fix, after which this rule becomes redundant but harmless.

   Specificity is measured, not guessed: Elementor prints
   `.elementor-4910 .elementor-element.elementor-element-footer-main:not(...)`
   into post-4910.css, which scores (0,4,0) with no !important. This selector
   scores (0,4,2) by naming the theme's footer wrapper and the section's own
   `.elementor-section` class, so it wins on specificity alone -- source order
   cannot be relied on, because Elementor's per-post CSS is enqueued late.
   `.elementor-4910` is deliberately NOT used: it would pin this rule to one
   footer post id and silently stop applying if the footer is ever replaced. */
body footer.site-footer-custom .elementor-section.elementor-element.elementor-element-footer-main {
    background-image: none;
}


/* =========================================================
   Η ιστορία μας (page 21180): the milestones timeline
   ========================================================= */

/* Same two gaps as the Συστήματα ISO section above, for the same reason:
   the page was built from nothing, so its section carries no builder padding
   and its intro sits flush against the widget below.

   Bottom only. The theme's content wrapper already leaves 90px between the
   title banner and the first section, so a top padding here would stack on
   that rather than replace it. 100px / 56px is the design's vertical rhythm.

   The intro rule repeats the three-class chain that the parent's
   `.elementor-element .elementor-widget:not(:last-child) { margin-bottom: 0 }`
   scores (0,3,0) with -- naming this widget's own id class takes it to
   (0,3,1), which is what it costs to win. */
body .elementor-element-history-section {
    padding-bottom: 100px;
}

@media screen and (max-width: 767px) {
    body .elementor-element-history-section {
        padding-bottom: 56px;
    }
}

body .elementor-element .elementor-widget.elementor-element-history-intro {
    margin-bottom: 32px;
}

/* The ct_history widget is built for a dark ground: the theme ships its
   headings at #F6F6F6 and its descriptions at #BCBCBC. On this site's pale
   #E3E4F2 ground that measured 1.17:1 and 1.51:1 -- effectively invisible,
   nowhere near the 4.5:1 floor.

   The fix is the ground, not the text: the design already calls for
   alternating the pale ground with full-bleed #4B4CA0 bands, and the section
   is `elementor-section-boxed`, whose <section> element already spans the
   viewport while its .elementor-container stays in the column -- so a
   background-color here IS the band, with no stretch setting needed (which is
   just as well, since elementor-edit-element refuses to write to a legacy
   `section`).

   Measured on #4B4CA0: heading #F6F6F6 = 6.84:1, description #DCDCEC =
   5.45:1, marker tint #C9C9E8 = 4.58:1. The theme's own #BCBCBC would land at
   3.89:1 and still fail body text, which is why the description is restated
   with the design's declared on-indigo tint instead of being left alone. */
body .elementor-element-history-section {
    background-color: #4B4CA0;
}

/* The intro paragraph inherits #5B5D7E, which the design explicitly reserves
   for light grounds -- it measures 1.17:1 on the band. */
body .elementor-element-history-section .elementor-element-history-intro,
body .elementor-element-history-section .elementor-element-history-intro p {
    color: #DCDCEC;
}

body .elementor-element-history-section .ct-history--item .ct-history--meta span {
    color: #DCDCEC;
}

/* The 101px "start" disc and the 21px node dots are both painted #4B4CA0 by
   the theme -- the band's own colour, so on it they would vanish (a #343680
   fill was tried first and measured only 1.43:1 against the band, which was
   not enough either). The dots take the design's on-indigo label tint.

   The disc is inverted instead: a white face carrying the brand indigo as its
   label, which is the strongest reading of a start marker on this band and
   what the client asked for. White is used here as a small marker face, not
   as a section ground -- the design reserves #FFFFFF for panels sitting on
   the ground and bans it as a ground, neither of which this is. The theme's
   own ring is dropped with it: it existed only to lift the former deep fill
   off the band, and on a white face it would read as a faint halo. */
/* background-image, not just background-color. The theme paints both of these
   through a flat `-webkit-linear-gradient(left, #4b4ca0, #4b4ca0)` in its
   compiled theme.css, and a gradient is a background IMAGE -- it renders on
   top of background-color, so setting the colour alone changes nothing that is
   visible. Same trap the CF7 submit rule near the top of this file documents
   (`btn-type-gradient`): the symptom is a computed backgroundColor that reads
   correct while the element still renders indigo. */
body .elementor-element-history-section .ct-history--item::after {
    background-color: #FFFFFF;
    background-image: none;
}

body .elementor-element-history-section .ct-history--start {
    background-color: #FFFFFF;
    background-image: none;
    border: none;
    color: #4B4CA0;
}

/* Now that the section is a coloured band its top edge is visible, and the
   content sat 10px from it -- the 90px the theme's wrapper leaves above the
   section is outside the band and no longer reads as breathing room. So the
   band needs its own symmetric padding, at the design's 100px / 56px rhythm. */
body .elementor-element-history-section {
    padding-top: 100px;
}

@media screen and (max-width: 767px) {
    body .elementor-element-history-section {
        padding-top: 56px;
    }
}

/* The widget reserves 140px of padding under the timeline for its optional
   "End Image", which this instance does not use -- with the band's own 100px
   on top of it the foot of the section ran to 271px against 100px at the head.
   :has() releases it only while no end image is actually rendered, so setting
   one later restores the space on its own. Where :has() is unsupported the
   declaration is dropped and the band simply keeps the roomier foot. */
body .elementor-element-history-section .ct-history1:not(:has(.ct-history--image)) {
    padding-bottom: 0;
}

/* =========================================================
   Footer newsletter band
   The first section of the footer template (4910, #footer-newsletter): the
   brand-indigo band above the deeper footer, with CF7 form 21186 ("Newsletter:
   Footer", html_class ilis-newsletter-form) in its right column. Selectors
   carry `.site-footer-custom` so they outrank both the parent's theme.css
   (loaded after this sheet) and the site-wide CF7 rules near the top of this
   file, which are written for the light-ground forms.
   ========================================================= */

body .ilis-newsletter-intro p {
    margin: 0;
    max-width: 34em;
}

body .site-footer-custom .ilis-newsletter-form p {
    margin: 0;
}

/* CF7 wraps the email and the submit in one <p>, so that <p> is the row. */
body .site-footer-custom .ilis-newsletter-row p {
    position: relative;
    display: flex;
    gap: 8px;
}

body .site-footer-custom .ilis-newsletter-row .wpcf7-form-control-wrap {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

body .site-footer-custom .ilis-newsletter-form input.wpcf7-email {
    width: 100%;
    height: 56px;
    margin: 0;
    padding: 0 20px;
    background: #FFFFFF;
    border: none;
    border-radius: 4px;
    box-shadow: none;
    color: var(--ilis-ink);
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
}

body .site-footer-custom .ilis-newsletter-form input.wpcf7-email::placeholder {
    color: #5B5D7E;
    opacity: 1;
}

/* The design's primary button carries a trailing arrow. A CF7 submit is an
   <input> and cannot hold markup, so the arrow is a background image in
   the label's own white. */
body .site-footer-custom .ilis-newsletter-form input.wpcf7-submit {
    flex: 0 0 auto;
    width: auto;
    height: 56px;
    margin: 0;
    padding: 0 52px 0 28px;
    background-color: var(--ilis-accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M1 8h13M9 3l5 5-5 5' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 26px center;
    background-size: 16px 16px;
    border: none;
    border-radius: 4px;
    box-shadow: none;
    color: #FFFFFF;
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s ease;
}

body .site-footer-custom .ilis-newsletter-form input.wpcf7-submit:hover,
body .site-footer-custom .ilis-newsletter-form input.wpcf7-submit:focus-visible {
    background-color: #D8611A;
}

/* The spinner CF7 appends after the submit would push the row wider, so it
   sits over the button's right edge instead, where the arrow is. */
body .site-footer-custom .ilis-newsletter-row .wpcf7-spinner {
    position: absolute;
    right: 18px;
    top: 50%;
    margin: -12px 0 0;
    background-color: #1E2050;
}

/* The theme strips focus outlines, which would leave keyboard users with no
   marker on an indigo band. White clears 3:1 against #4B4CA0. */
body .site-footer-custom .ilis-newsletter-form input:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
}

body .site-footer-custom .ilis-newsletter-consent {
    margin-top: 16px;
}

body .site-footer-custom .ilis-newsletter-consent .wpcf7-list-item {
    margin: 0;
}

body .site-footer-custom .ilis-newsletter-consent label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    cursor: pointer;
    font-weight: 400;
}

body .site-footer-custom .ilis-newsletter-consent .wpcf7-list-item-label {
    color: #DCDCEC;
    font-size: 14px;
    line-height: 1.55;
}

body .site-footer-custom .ilis-newsletter-consent input[type=checkbox] {
    width: 18px;
    min-width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--ilis-accent);
}

/* Orange on #4B4CA0 is under 3:1, too faint for a 14px link, so the privacy
   link is white and underlined, as on the other CF7 consent lines. */
body .site-footer-custom .ilis-newsletter-consent a {
    color: #FFFFFF;
    text-decoration: underline;
    text-underline-offset: 2px;
}

body .site-footer-custom .ilis-newsletter-consent a:hover,
body .site-footer-custom .ilis-newsletter-consent a:focus {
    color: #FFFFFF;
    text-decoration-thickness: 2px;
}

/* States. CF7's own tip and response colours are a red and a green that
   fail on indigo, so both take the on-brand tint with a thin accent rule. */
body .site-footer-custom .ilis-newsletter-form .wpcf7-not-valid-tip {
    margin: 6px 0 0;
    color: #FFFFFF;
    font-size: 13px;
}

body .site-footer-custom .ilis-newsletter-form .wpcf7-response-output {
    margin: 16px 0 0;
    padding: 10px 14px;
    border: none;
    border-left: 3px solid var(--ilis-accent);
    border-radius: 0;
    background: transparent;
    color: #FFFFFF;
    font-size: 14px;
    line-height: 1.5;
}

@media screen and (max-width: 479px) {
    body .site-footer-custom .ilis-newsletter-row p {
        flex-direction: column;
    }
}
/* Set by js/ilis-footer-fit.js when the footer is taller than the window:
   the theme's fixed footer would hide its top (the newsletter band) above
   the viewport, so it drops back into normal flow. The theme writes the
   matching margin-bottom on .site-content inline, hence the !important. */
@media screen and (min-width: 1200px) {
    body.ilis-footer-unfixed .site-footer-custom {
        position: relative;
        bottom: auto;
        z-index: auto;
    }

    body.ilis-footer-unfixed .site-content {
        margin-bottom: 0 !important;
    }
}


span.indent {
    width: 30px;
    display: inline-block;
}

/* =========================================================
   Η προσέγγισή μας (page 21216, /i-proseggisi-mas/)
   The two lists in the client's text (the five qualities of a system and
   the five marks of success) are set as a plain column of lines split by
   hairlines, not as cards or icons: the client's brief for these text
   pages asks for typographic hierarchy and no icons. The rule is a tint of
   the muted body colour so it stays in the indigo family on both the
   #E3E4F2 ground and the #F4F4FA surface bands.
   ========================================================= */

body .ilis-approach-list {
    list-style: none;
    margin: 8px 0 24px;
    padding: 0;
}

body .ilis-approach-list li {
    margin: 0;
    padding: 14px 0;
    border-top: 1px solid rgba(91, 93, 126, 0.25);
}

body .ilis-approach-list li:last-child {
    border-bottom: 1px solid rgba(91, 93, 126, 0.25);
}

body .ilis-approach-list li::before {
    content: none;
}

/* The emphasised lines in the client's text are set in the ink colour so
   they read as the section's conclusion rather than as louder body copy. */
body .page-id-21216 .elementor-widget-text-editor strong,
body.page-id-21216 .elementor-widget-text-editor strong,
body .ilis-approach-topics .ct-ac-content strong {
    color: var(--ilis-ink);
    font-weight: 700;
}

/* The seven topics sit in the theme's ct_accordion (section approach-topics,
   since 2026-09-28). Its stock look is a white box with a black 25px glow on
   the open item, #222 titles, #636363 copy and a grey chevron, none of which
   is in the design: cards are #FFFFFF panels on the #E3E4F2 ground with no
   shadow and an 8px radius, headings are ink, body copy is muted. The theme's
   rules are `.ct-accordion.layout1 ...` (three classes) and load after this
   sheet, so every selector here repeats that chain behind `body`. Scoped to
   this section so the ISO pages' accordions keep their current look. The
   theme's 6px indigo bar on the open item is kept as the open-state marker. */
body .ilis-approach-topics .ct-accordion.layout1 .ct-accordion-item {
    margin-bottom: 12px;
    border: none;
    border-radius: 8px;
    background-color: #FFFFFF;
    overflow: hidden;
}

body .ilis-approach-topics .ct-accordion.layout1 .ct-accordion-item:last-child {
    margin-bottom: 0;
}

body .ilis-approach-topics .ct-accordion.layout1 .ct-accordion-item.active {
    box-shadow: none;
}

body .ilis-approach-topics .ct-accordion.layout1 .ct-ac-title {
    color: var(--ilis-ink);
    font-size: 19px;
    font-weight: 800;
    line-height: 1.35;
}

body .ilis-approach-topics .ct-accordion.layout1 .ct-accordion-item.active .ct-ac-title,
body .ilis-approach-topics .ct-accordion.layout1 .ct-ac-title:hover {
    color: var(--ilis-indigo);
}

body .ilis-approach-topics .ct-accordion.layout1 .ct-ac-title a:before {
    color: var(--ilis-indigo);
}

body .ilis-approach-topics .ct-accordion.layout1 .ct-ac-content {
    color: #5B5D7E;
    font-size: 18px;
    line-height: 32px;
    padding-top: 12px;
}

body .ilis-approach-topics .ct-accordion.layout1 .ct-ac-content p:last-child,
body .ilis-approach-topics .ct-accordion.layout1 .ct-ac-content .ilis-approach-list:last-child {
    margin-bottom: 0;
}

@media screen and (max-width: 767px) {
    body .ilis-approach-topics .ct-accordion.layout1 .ct-ac-title {
        font-size: 17px;
    }

    body .ilis-approach-topics .ct-accordion.layout1 .ct-ac-title a {
        padding-left: 20px;
        padding-right: 52px;
    }

    body .ilis-approach-topics .ct-accordion.layout1 .ct-ac-content {
        padding-left: 20px;
        padding-right: 20px;
        font-size: 17px;
        line-height: 30px;
    }
}

.ct-accordion.layout1 .ct-accordion-item:before {
    height: 100% !important;
    opacity: 1 !important;
}

/* =========================================================
   Homepage testimonials: carousel dots
   The ct_testimonial_carousel (widget testimonials-carousel, section
   testimonials-home) uses dot style u3, which paints every dot in the
   primary colour #4B4CA0 through a one-colour gradient background-image.
   The section's ground is that same #4B4CA0, so the dots were drawn but
   invisible. On indigo the design's text tints apply: #C9C9E8 for the
   resting dots, white for the current one. background-image has to be
   cleared too, or the gradient keeps painting over the colour. The theme's
   26px ring around the active dot is kept and given the same tint.
   ========================================================= */
body .elementor-element-testimonials-carousel .dot-style-u3 li button {
    background-color: #C9C9E8;
    background-image: none;
}

body .elementor-element-testimonials-carousel .dot-style-u3 li.slick-active button,
body .elementor-element-testimonials-carousel .dot-style-u3 li button:hover {
    background-color: #FFFFFF;
    background-image: none;
}

body .elementor-element-testimonials-carousel .dot-style-u3 li button:before {
    border-color: #C9C9E8;
}

body .elementor-element-testimonials-carousel .dot-style-u3 li button:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 4px;
}

/* Client logo in the testimonial (child override of ct_testimonial_carousel
   layout14.php, 2026-09-29). The logo takes the place of the demo's portrait
   circle, shown whole: logos are wide (400-575px across, ~3:1), and the
   theme's 130px square crop would cut most of them away. It sits on a white
   plate so any logo colour reads on the indigo band; white is used here as
   a panel, not a section ground. 8px radius and no shadow, as for cards. */
body .elementor-element-testimonials-carousel .item--logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 96px;
    max-width: 280px;
    margin: 0 auto 24px;
    padding: 16px 28px;
    background-color: #FFFFFF;
    border-radius: 8px;
}

body .elementor-element-testimonials-carousel .item--logo .item--logo-img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 64px;
    object-fit: contain;
}

/* The position follows the name on the same line, one step quieter. */
body .elementor-element-testimonials-carousel .item--title .item--position {
    color: #C9C9E8;
    font-weight: 400;
}

@media screen and (max-width: 767px) {
    body .elementor-element-testimonials-carousel .item--logo {
        height: 80px;
        padding: 12px 20px;
    }

    body .elementor-element-testimonials-carousel .item--logo .item--logo-img {
        max-height: 56px;
    }
}


.single-service {
	& .ilis-cta-form {
		& .wpcf7 {
			& .wpcf7-response-output {
				color: black !important;
			}
		}
	}
}

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn { background-image: none; }

h2, .h2 {
	font-size: 28px !important;
}

.ct-blog-grid {
	& .grid-item {
		& .grid-item-inner {
			& .item--featured {
				min-height: 300px !important;
			}
		}
	}
}