/*
 * Theme Name: Splendit (Eazyrecruitz child)
 * Theme URI: https://www.splendit.net/
 * Description: Splendit brand child theme for Eazyrecruitz. Carries the palette taken from the splendit.net logo and stylesheet, plus the typography stack. Component recolouring lives in assets/css/palette.css, which is generated from the parent theme — see tools/generate-palette.php.
 * Author: Leaware
 * Author URI: https://leaware.com/
 * Template: eazyrecruitz
 * Version: 1.17.0
 * License: GNU General Public License v2 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: splendit-eazyrecruitz
*/

/* ---------------------------------------------------------------------------
 * Brand palette
 *
 * Sourced from the live site: the four brand colours are the fills in
 * splendit-clever-it-co-sourcing-logo.svg, the tint and neutrals are the values
 * the current theme actually paints with.
 *
 * The parent theme drives its accent off --main-color and --two-color, so
 * overriding those two recolours everything it tokenised. The rest of its
 * scheme is hardcoded and handled by assets/css/palette.css.
 * ------------------------------------------------------------------------- */

:root {
	/* Primary — the logo blue. The hover tone is the one splendit.net already
	   uses on .x-btn:hover, so it is measured rather than derived. */
	--splendit-blue: #338fd2;
	--splendit-blue-hover: #299ee6;
	--splendit-blue-tint: #ecf6fd;

	/*
	 * Co-equal accents, not decoration.
	 *
	 * On the brand's own colour artwork turquoise and coral each cover ~21% of
	 * the surface while blue covers 7% — the identity is four colours sharing
	 * the space, not one blue with garnishes. All four are the exact fills in
	 * the logo SVG and appear verbatim in the live stylesheet.
	 */
	--splendit-turquoise: #61e2e2;
	--splendit-coral: #ec7860;
	--splendit-amber: #f4b14e;

	/*
	 * A deeper coral that shows up in the brand artwork where the amber band
	 * crosses the coral field. It is not in the logo or the live stylesheet, so
	 * it is used only as the hover tone for coral elements, never as a surface
	 * of its own.
	 */
	--splendit-coral-deep: #df5554;

	/* Ink and neutrals — splendit.net sets body text to #000 and builds
	   everything else from a plain grey ramp, with no blue cast. */
	--splendit-body: #000000;
	--splendit-muted: #333333;
	--splendit-subtle: #999999;
	--splendit-border: #e5e5e5;
	--splendit-surface: #f2f2f2;

	/*
	 * Allumi Pro is the brand face on splendit.net. It is a commercial
	 * Typofonderie licence and the webfont files are not redistributable, so
	 * nothing is @font-face'd here. Drop the licensed .woff2 files into
	 * assets/fonts/ and add the @font-face rules, or keep the fallback:
	 * Titillium Web is the closest open substitute for Allumi's squared
	 * humanist shapes.
	 */
	--splendit-font: "Allumi Pro", "Titillium Web", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/*
	 * Parent theme tokens.
	 *
	 * Despite the names, --two-color is the accent that matters: the parent
	 * paints 46 backgrounds with it (including .theme-btn-one, the primary
	 * button every eazyrecruitz-plugin widget renders) and 68 foregrounds
	 * (headings, nav links, icons). --main-color reaches four declarations in
	 * total. So --two-color is what carries the brand blue.
	 */
	--main-color: #338fd2;
	--main-color-rgb: 51, 143, 210;
	--two-color: #338fd2;
	--two-color-rgb: 51, 143, 210;
}

/* ---------------------------------------------------------------------------
 * Typography
 * ------------------------------------------------------------------------- */

body {
	font-family: var(--splendit-font);
	color: var(--splendit-body);
	background-color: #fff;
}

/*
 * Headings and links are blue on splendit.net — h1-h6 and a both resolve to
 * #338FD2 there, over #000 body copy. That is the inverse of the usual
 * dark-heading convention and is a large part of why the site reads as it
 * does, so it is reproduced rather than normalised away.
 */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--splendit-font);
	color: var(--splendit-blue);
}

a {
	color: var(--splendit-blue);
}

a:hover,
a:focus {
	color: var(--splendit-blue-hover);
}

/* ---------------------------------------------------------------------------
 * Header
 *
 * The parent fills .logo-box with --two-color, which read as a dark plate
 * behind the logo while that token was a near-black maroon. At full brand blue
 * it becomes a full-width blue slab about 95px tall carrying one small logo.
 * splendit.net runs a white header over a #fff body, so the plate comes off.
 *
 * The parent's padding and corner radius are left in place: the radius is
 * invisible without a fill, and the padding is what keeps the logo aligned with
 * the menu below it.
 * ------------------------------------------------------------------------- */

.main-header .logo-box {
	background: transparent;
}

/*
 * Logo and menu share one row.
 *
 * The parent stacks them below 1750px — responsive.css sets
 * `.main-header .outer-box .menu-area { float:none; display:block;
 * text-align:center }` there — which drops the centred menu onto its own line
 * under a left-aligned logo. That was tolerable when .logo-box was a coloured
 * plate anchoring the top row; with the plate gone it just reads as two
 * unrelated strips.
 *
 * Flex from 992px up, which is where the parent's mobile toggler takes over, so
 * the burger menu below that is untouched. The logo's oversized right padding
 * existed to give the plate its shape and becomes a margin instead.
 */
@media only screen and (min-width: 992px) {
	/*
	 * The row is laid out one level up, on .outer-box. Making .menu-area the
	 * flex container instead left it filling the row while its sibling — the
	 * Appointment button, a float-right .menu-right-content — sat on top of it,
	 * covering the last menu item. Both are flex items here, so the menu takes
	 * the space it needs and the button keeps its own.
	 */
	.main-header .outer-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.main-header .outer-box .menu-area {
		display: flex;
		align-items: center;
		float: none;
		text-align: left;
		flex: 1 1 auto;
		min-width: 0;
	}

	.main-header .outer-box .menu-right-content {
		float: none;
		flex-shrink: 0;
		margin-top: 0;
	}

	.main-header .logo-box {
		float: none;
		flex-shrink: 0;
		padding-top: 15px;
		padding-bottom: 15px;
		padding-right: 0;
		margin-right: 60px;
	}
}

/*
 * Below 1750px the menu has to be tighter, because it does not fit.
 *
 * The parent gives each item `margin: 0 18px` — 36px between neighbours, 252px
 * across seven items — and sized that for the ≥1750px layout it also wrote the
 * rest of the header for. At 1440px the row runs past the Appointment button
 * and the last item disappears underneath it; measured, the button occupies
 * 1203-1387 while the menu is still drawing at 1389.
 *
 * Halving the item margins and tightening the logo gap buys back roughly 160px,
 * which is enough for the seven items this menu carries. Above 1750px the
 * parent's own spacing applies unchanged.
 */
@media only screen and (min-width: 992px) and (max-width: 1749px) {
	.main-header .main-menu .navigation > li {
		margin: 0 9px;
	}

	.main-header .logo-box {
		margin-right: 30px;
	}

	.main-header .menu-right-content {
		padding-right: 30px;
	}
}

/* ---------------------------------------------------------------------------
 * Hero copy
 *
 * The parent designs the banner for a dark background photo — .content-box h2
 * is #fff and .theme-btn-two carries `color:#fff !important` — but the demo
 * slide uses a light image, so the copy sits on a near-white panel. Measured on
 * the rendered page, the darkest pixel across the whole right half of the hero
 * is #B8B8B9: nothing there is readable.
 *
 * This predates the recolouring — white on the parent's beige was 1.23:1 and
 * white on the Splendit grey is 1.12:1, both far below the 4.5:1 WCAG AA needs.
 * Rather than restore a slightly-less-invisible beige, the copy goes dark, which
 * is what the light panel calls for: black on #F2F2F2 measures 18.76:1.
 * ------------------------------------------------------------------------- */

.banner-section .banner-carousel .content-box span,
.banner-section .banner-carousel .content-box h2,
.banner-section .banner-carousel .content-box p {
	color: var(--splendit-body);
}

/*
 * The banner heading is ink, not blue, unlike headings elsewhere.
 *
 * It does not sit on clean ground: sampling between the glyphs shows the large
 * decorative disc from shape/pattern-1.png directly behind it. Blue measures
 * 3.13:1 on the bare panel but only 2.58:1 where it crosses that disc — already
 * failing before the decorations were recoloured, and 1.24:1 once they are
 * coral. Ink clears everything it can land on: 18.76:1 on the panel, 7.42:1 on
 * coral. Blue headings stay where the brand puts them, on clean white.
 */
.banner-section .banner-carousel .content-box h1 {
	color: var(--splendit-body);
}

/* The button's fill comes from a :after layer, so it needs its own ground. */
.banner-section .banner-carousel .btn-box .theme-btn-two {
	background-color: var(--splendit-blue);
	color: #fff !important;
}

/*
 * style-two and style-three do run over dark artwork, where the parent's white
 * is correct — keep it there.
 */
.banner-section.style-two .banner-carousel .content-box span,
.banner-section.style-two .banner-carousel .content-box h1,
.banner-section.style-two .banner-carousel .content-box h2,
.banner-section.style-two .banner-carousel .content-box p,
.banner-section.style-three .banner-carousel .content-box span,
.banner-section.style-three .banner-carousel .content-box h1,
.banner-section.style-three .banner-carousel .content-box h2,
.banner-section.style-three .banner-carousel .content-box p {
	color: #fff;
}

/* ---------------------------------------------------------------------------
 * Gradients and glows
 *
 * default-color.css bakes the parent's coral into a handful of gradients and
 * ripple shadows that no variable reaches. Same selectors, Splendit blue.
 * ------------------------------------------------------------------------- */

.slider-one__content:before,
.page-title__content:before {
	background: var(--splendit-blue);
	background: linear-gradient(90deg, rgba(51, 143, 210, 1) 26%, rgba(44, 62, 80, 1) 83%);
}

.project-two__img:before {
	background: var(--splendit-blue);
	background: linear-gradient(0deg, rgba(51, 143, 210, 1) 2%, rgba(51, 143, 210, 0) 45%);
}

/*
 * Inner page banner.
 *
 * Every subpage runs its photo under .page-title:before, a flat wash the
 * parent sets to #352027 at 0.8 — a warm maroon left from its own palette. It
 * is the largest single block of colour on any inner page, and the one place
 * the old scheme still showed through: the photo came out mauve, fighting the
 * blue header sitting directly above it.
 *
 * The replacement is the brand blue taken down to 30% against black, so the
 * wash belongs to the same family as the header rather than being an unrelated
 * navy. White copy over it measures 9.2:1 against a bright photograph, which
 * is the worst case — a darker photo only widens the margin.
 */
.page-title:before {
	background: #0f2b3f;
	background: color-mix(in srgb, var(--splendit-blue) 30%, #000);
}

.about-two__play .ripple,
.about-two__play .ripple:before,
.about-two__play .ripple:after,
.about-three__play .ripple,
.about-three__play .ripple:before,
.about-three__play .ripple:after {
	-webkit-box-shadow: 0 0 0 0 rgba(51, 143, 210, .3);
	box-shadow: 0 0 0 0 rgba(51, 143, 210, .3);
}

/* ---------------------------------------------------------------------------
 * Section surfaces
 *
 * splendit.net is white-dominant: 15 transparent sections over a #fff body
 * against 4 solid blue and 4 tinted. These classes are how a section opts into
 * colour — drop one on an Elementor section so the choice stays deliberate
 * instead of being baked into every surface the parent theme paints.
 * ------------------------------------------------------------------------- */
.splendit-section-blue {
	background-color: var(--splendit-blue);
	color: #fff;
}

.splendit-section-blue h1,
.splendit-section-blue h2,
.splendit-section-blue h3,
.splendit-section-blue h4,
.splendit-section-blue h5,
.splendit-section-blue h6,
.splendit-section-blue a {
	color: #fff;
}

.splendit-section-tint {
	background-color: var(--splendit-blue-tint);
}

/* Primary button hover, matching splendit.net's .x-btn:hover. */
.theme-btn-one:hover,
.theme-btn-two:hover,
.btn-box a:hover {
	background-color: var(--splendit-blue-hover);
}

.splendit-section-turquoise {
	background-color: var(--splendit-turquoise);
}

.splendit-section-coral {
	background-color: var(--splendit-coral);
}

.splendit-section-amber {
	background-color: var(--splendit-amber);
}

/*
 * Text on the three light accents is black, not white.
 *
 * splendit.net currently sets white on all of them — .vacature-button carries
 * `color:#fff !important` over turquoise .color3 and coral .color5. Measured,
 * that is 1.56:1 on turquoise and 2.83:1 on coral, against the 4.5:1 WCAG AA
 * needs; the turquoise case is effectively unreadable. Black clears AA on all
 * three (13.49:1, 7.42:1 and 11.25:1), so the surfaces are reproduced but the
 * failing text colour is not.
 */
.splendit-section-turquoise, .splendit-section-coral, .splendit-section-amber,
.splendit-section-turquoise h1, .splendit-section-turquoise h2,
.splendit-section-turquoise h3, .splendit-section-turquoise h4,
.splendit-section-turquoise h5, .splendit-section-turquoise h6,
.splendit-section-coral h1, .splendit-section-coral h2,
.splendit-section-coral h3, .splendit-section-coral h4,
.splendit-section-coral h5, .splendit-section-coral h6,
.splendit-section-amber h1, .splendit-section-amber h2,
.splendit-section-amber h3, .splendit-section-amber h4,
.splendit-section-amber h5, .splendit-section-amber h6 {
	color: var(--splendit-body);
}

/* Single-element helpers, for chips and badges inside Elementor content. */
.splendit-accent-blue { background-color: var(--splendit-blue); color: #fff; }
.splendit-accent-turquoise { background-color: var(--splendit-turquoise); color: var(--splendit-body); }
.splendit-accent-coral { background-color: var(--splendit-coral); color: var(--splendit-body); }
.splendit-accent-amber { background-color: var(--splendit-amber); color: var(--splendit-body); }

.splendit-accent-coral:hover { background-color: var(--splendit-coral-deep); }

.splendit-text-blue { color: var(--splendit-blue); }
.splendit-text-turquoise { color: var(--splendit-turquoise); }
.splendit-text-coral { color: var(--splendit-coral); }
.splendit-text-amber { color: var(--splendit-amber); }

/* ---------------------------------------------------------------------------
 * The H³ accent system
 *
 * Splendit's identity is "Hungry. Honest. Human." — the H³ mark is built from
 * blocks of the four brand colours, and the brand's own pages apply it two
 * ways: every photograph is duotoned into one accent, and each heading ends in
 * a full stop set in that accent while the words stay blue.
 *
 * That is what was missing. The palette work put the right colours in the file
 * but left blue doing all the work, so the page read as one blue wall. Here the
 * accents become the device they are in the brand: --splendit-accent is set per
 * section, overridden per card where a grid should cycle, and everything below
 * reads from it.
 * ------------------------------------------------------------------------- */

:root {
	--splendit-accent: var(--splendit-turquoise);
}

/*
 * Section accents, cycling turquoise → coral → amber down the page so no two
 * neighbours share one. Keyed on the theme's section classes rather than
 * :nth-of-type, which would re-shuffle the moment a section is added or moved.
 */
.welcome-section { --splendit-accent: var(--splendit-turquoise); }
.about-section { --splendit-accent: var(--splendit-coral); }
.service-section { --splendit-accent: var(--splendit-amber); }
.industries-section { --splendit-accent: var(--splendit-turquoise); }
.process-section { --splendit-accent: var(--splendit-coral); }
.team-section { --splendit-accent: var(--splendit-amber); }
.news-section { --splendit-accent: var(--splendit-turquoise); }
.testimonial-section { --splendit-accent: var(--splendit-coral); }
.awards-section { --splendit-accent: var(--splendit-amber); }

/*
 * Per-card cycling inside a grid or carousel. Owl wraps carousel items in
 * .owl-item, so that is the hook there; the grid widgets use their own column
 * class. Blue leads the cycle to keep it the page's primary colour.
 */
.service-section .owl-item:nth-child(4n + 1),
.service-block:nth-child(4n + 1),
.news-block:nth-child(4n + 1),
.post-jobs .single-job-post:nth-child(4n + 1) { --splendit-accent: var(--splendit-blue); }

.service-section .owl-item:nth-child(4n + 2),
.service-block:nth-child(4n + 2),
.news-block:nth-child(4n + 2),
.post-jobs .single-job-post:nth-child(4n + 2) { --splendit-accent: var(--splendit-turquoise); }

.service-section .owl-item:nth-child(4n + 3),
.service-block:nth-child(4n + 3),
.news-block:nth-child(4n + 3),
.post-jobs .single-job-post:nth-child(4n + 3) { --splendit-accent: var(--splendit-coral); }

.service-section .owl-item:nth-child(4n + 4),
.service-block:nth-child(4n + 4),
.news-block:nth-child(4n + 4),
.post-jobs .single-job-post:nth-child(4n + 4) { --splendit-accent: var(--splendit-amber); }

/*
 * Duotone, the brand's signature treatment.
 *
 * Multiplying a desaturated photo over a solid accent is what produces it:
 * shadows stay dark, highlights take the colour.
 *
 * Service and news thumbnails only. The brand applies it to situational
 * photography — people at work, in context — where the colour reads as
 * identity. Team cards are name-and-title portraits, where a reader expects a
 * face in its own colour, so those stay full colour along with the hero.
 */
.service-block-one .inner-box .image-box,
.news-block-one .inner-box .image-box {
	background-color: var(--splendit-accent);
}

.service-block-one .inner-box .image-box img,
.news-block-one .inner-box .image-box img {
	filter: grayscale(1) contrast(1.05);
	mix-blend-mode: multiply;
}

/*
 * Team cards keep their accent, just not on the face. The parent already has a
 * full-bleed overlay on the portrait that sits at opacity 0 and fades in on
 * hover; pointing it at the card's accent is what keeps the row reading as a
 * set, and it is also the only thing left consuming the team rotation now that
 * the duotone is gone from here.
 */
.team-block-one .inner-box .image-box:before {
	background-color: var(--splendit-accent);
}

/*
 * The accent full stop after a section heading. The brand sets the words in
 * blue and the stop in the accent — "Hungry." with a turquoise dot. aria-hidden
 * is not available on a pseudo-element, but a lone full stop reads harmlessly
 * in a screen reader as sentence punctuation.
 */
.sec-title h2::after {
	content: ".";
	color: var(--splendit-accent);
}

/*
 * The decorative squares behind a section label stay neutral.
 *
 * Putting the accent on them was a mistake: .top-title:before is a 50px block
 * sitting at left:-25px, directly under the first characters of the label, and
 * the label is blue. Measured on the rendered page, blue over amber is 1.87:1
 * — worse than the 3.50:1 it already has over white and far below WCAG AA. The
 * accent belongs where it cannot land under type: the full stop, the duotone
 * and the card overlays.
 */

/* ---------------------------------------------------------------------------
 * Sections filled with the brand blue
 *
 * .bg-color-1 paints a whole section in --two-color. The parent built it for a
 * near-black maroon, so its label was blue and its decorative squares were a
 * lighter maroon that stood out against the dark. Carrying --two-color to the
 * brand blue inverted both: the label became blue on blue, measured at 1.00:1
 * and simply invisible, while the squares went to #272727 through the palette
 * map and read as black blocks dropped on the blue.
 *
 * The label goes white, matching the heading above it and what splendit.net
 * itself puts on this exact blue. That is 3.50:1 on the bare section — enough
 * for the large heading, short of AA for a 15px label — so the squares darken
 * rather than lighten. Under the first characters, where the label actually
 * crosses one, white then measures 5.16:1.
 * ------------------------------------------------------------------------- */

.bg-color-1 .sec-title .top-title {
	color: #fff;
}

.bg-color-1 .sec-title .top-title:before,
.bg-color-1 .sec-title .top-title:after {
	background-color: rgba(0, 0, 0, .2);
}

.bg-color-1 .sec-title .top-title:after {
	border-left-color: rgba(255, 255, 255, .25);
	border-bottom-color: rgba(255, 255, 255, .25);
}

/*
 * Card hover overlay: the card's accent, darkened so white copy is readable.
 *
 * At full tint white measures 3.50:1 on blue, 2.83:1 on coral, 1.87:1 on amber
 * and 1.56:1 on turquoise. Mixing the accent to 55% against black is the point
 * where the weakest of the four clears AA — turquoise reaches 4.85:1, and the
 * rest land between 5.59:1 and 8.68:1. The hue is untouched, so the overlay
 * still reads as the same colour as the thumbnail above it, just deeper.
 */
.service-block-one .inner-box .lower-content .overlay-content {
	background-color: #2e5a6d;
	background-color: color-mix(in srgb, var(--splendit-accent) 55%, #000);
}

/*
 * No accent fill on .experience-box.
 *
 * This was mine and it was wrong. I read the element as a badge; it is not.
 * The parent gives it the same shape as .salary-box beside it — a 12px grey
 * label over a 17px value, floated into a 15% column with no background of its
 * own. Painting it turned a layout column into a solid block that swallowed
 * the label, pushed the value onto the divider and changed colour per card,
 * because --splendit-accent cycles down the list.
 *
 * The badge on this card is .job-header .info .cat, which already reads as a
 * pill. Nothing here needs a fill.
 */

/* ---------------------------------------------------------------------------
 * Loose ends where the parent assumed a dark ground
 *
 * Four places kept working on the parent's near-black maroon and broke once
 * --two-color became a mid-tone blue. Each is measured on the rendered page.
 * ------------------------------------------------------------------------- */

/*
 * The testimonial quote mark is an <img>, not a glyph, so no colour property
 * reaches it — it arrives as the recoloured coral and lands on the blue badge,
 * which is the one place the two accents collide. Knocking it to white is what
 * a filter can do to an image the stylesheet cannot repaint.
 */
.testimonial-block-one .inner-box .quote-box img {
	filter: brightness(0) invert(1);
}

/*
 * Scroll-to-top. The parent hardcodes #3E252D here and the generator now
 * carries it to black, but a black slab floating over the page is not what the
 * palette calls for — and its hover was already the brand blue, so the resting
 * state was the odd one out.
 */
.scroll-top {
	background: var(--splendit-blue);
}

.scroll-top:hover {
	background: var(--splendit-blue-hover);
}

/*
 * Team cards cycle the accents like every other grid. Without this they all
 * inherit the section's amber, which turned a row of portraits into one flat
 * wash instead of the set the brand artwork suggests.
 */
.team-block:nth-child(4n + 1) { --splendit-accent: var(--splendit-blue); }
.team-block:nth-child(4n + 2) { --splendit-accent: var(--splendit-turquoise); }
.team-block:nth-child(4n + 3) { --splendit-accent: var(--splendit-coral); }
.team-block:nth-child(4n + 4) { --splendit-accent: var(--splendit-amber); }

/*
 * Footer text. The parent set it in #AE979F for a dark ground; the palette map
 * carried that to #999999, which on the blue footer measures 1.23:1 — the links
 * were effectively gone. White takes them to 3.50:1, the same figure the
 * section labels settled on and what splendit.net puts on this blue.
 *
 * Two selectors, because two different lists have held this column. The demo
 * import put a stock WordPress Pages widget here, which custom.css paints
 * through .footer-widget ul li a. The Quick links column that replaced it is
 * the theme's own .links-widget .links-list, whose parent rule is three classes
 * deep and would otherwise win with the taupe still in it.
 */
.main-footer .footer-widget ul li,
.main-footer .footer-widget ul li a,
.main-footer .footer-top .links-widget .links-list li a,
.main-footer .footer-top .about-widget .text p,
.main-footer .footer-top .contact-widget .info-box li,
.main-footer .footer-top .contact-widget .info-box li address,
.main-footer .footer-top .contact-widget .info-box li a,
.main-footer .footer-bottom .copyright p,
.main-footer .footer-bottom .copyright p a,
.main-footer .footer-bottom .footer-nav li a {
	color: #fff;
}

/*
 * Hover was --main-color, which is now the same blue as the footer itself, so
 * a link vanished on hover. The lighter blue keeps the state visible.
 */
.main-footer .footer-widget ul li:hover,
.main-footer .footer-widget ul li:hover a,
.main-footer .footer-top .links-widget .links-list li a:hover,
.main-footer .footer-bottom .copyright p a:hover {
	color: var(--splendit-blue-tint);
}

/* ---------------------------------------------------------------------------
 * Header strip, sticky logo and the blue section's icons
 * ------------------------------------------------------------------------- */

/*
 * The bar above the menu is empty. .header-top ships three slots — left-info,
 * location-box, right-info — for a phone number, an address and social links,
 * and none is filled, so it renders as a bare strip with a border under it.
 * It comes back the moment there is something to put in it.
 */
.main-header .header-top {
	display: none;
}

/*
 * The sticky bar keeps its logo. responsive.css drops it below 1750px with
 * `.sticky-header .logo-box { display: none }` — the same breakpoint that
 * stacked the main header — so on any normal screen the bar scrolled in
 * carrying a menu and nothing else. Restored from 992px, where the mobile
 * toggler takes over, to match the header above it.
 */
@media only screen and (min-width: 992px) {
	.sticky-header .logo-box {
		display: block;
	}
}

/*
 * Industry tab icons are dark line art, drawn for a light ground, and this
 * section is filled with the brand blue. The palette map had already carried
 * them from the parent's mauve to #333333, which on #338FD2 is 3.61:1 for what
 * are effectively thin strokes. Knocking them to white is the same move the
 * testimonial quote mark needed: they are images, so no colour property
 * reaches them.
 */
.industries-section .tab-btn-box .tab-btn .icon-box img,
.bg-color-1 .tab-btn-box .tab-btn .icon-box img {
	filter: brightness(0) invert(1);
}

/*
 * Card hover overlay: white copy, as asked.
 *
 * Worth recording what it costs, because it is not marginal. White on the four
 * accents measures 3.50:1 on blue, 2.83:1 on coral, 1.87:1 on amber and 1.56:1
 * on turquoise, against 4.5:1 for AA — black clears all four at 6.00, 7.42,
 * 11.25 and 13.49. If the overlay copy needs to be readable rather than
 * decorative, darkening the accent behind it is what buys white back; the
 * colour stays the brand's, it just stops being at full tint.
 */
.service-block-one .inner-box .lower-content .overlay-content,
.service-block-one .inner-box .lower-content .overlay-content p,
.service-block-one .inner-box .lower-content .overlay-content a,
.service-block-one .inner-box .lower-content .overlay-content a i {
	color: #fff;
}

/* ---------------------------------------------------------------------------
 * Footer
 *
 * It reads as empty because it is: the theme lays out four widget areas and
 * only one is filled, a stock "Useful Links" page list, so a single column sits
 * in the left third with two thirds of blue beside it. No stylesheet fixes
 * that — the columns need content from Appearance > Widgets.
 *
 * What is fixable here is the framing. The 124px top padding was sized for a
 * full four-column footer and only deepens the void, and the lone column reads
 * better centred than abandoned at the left margin.
 * ------------------------------------------------------------------------- */

.main-footer .footer-top {
	padding-top: 70px;
	padding-bottom: 50px;
}

.main-footer .footer-top .widget-section .row {
	justify-content: center;
}

.main-footer .footer-widget .widget-title h3 {
	margin-bottom: 22px;
}

/* ---------------------------------------------------------------------------
 * Industry tab list
 *
 * The label vanished on hover and while active. color.css sets both states to
 * `color: var(--main-color)`, which used to be the parent's coral against a
 * dark maroon section — but --main-color is now the brand blue and so is the
 * section, so the text landed at 1.00:1 on its own background. That is why the
 * active row and whichever row the pointer was over read as an icon with
 * nothing beside it.
 *
 * White in both states. The state is already carried by the underline, which
 * the parent animates from 50px to the full row width, so the colour does not
 * have to signal it as well.
 */
.industries-section .tab-btns li h3,
.industries-section .tab-btns li.active-btn h3,
.industries-section .tab-btns li:hover h3 {
	color: #fff;
}

/*
 * The icon sits absolutely at the row's top-left while the row is only as tall
 * as its label, so a 50px icon in a row that measured 50px left nothing between
 * one icon and the next.
 */
.industries-section .tab-btns li {
	margin-bottom: 26px;
	min-height: 58px;
}

/*
 * The address block the footer template renders. <address> italicises by
 * default, which reads as an aside rather than as contact detail.
 */
.main-footer .contact-widget .info-box li address {
	font-style: normal;
	margin-bottom: 14px;
}

/*
 * Footer social icons.
 *
 * The parent styles .about-widget .social-links as plain inline text, so the
 * glyphs need a shape of their own. Outlined circles rather than filled ones:
 * a filled disc would have to be white on this blue footer and would pull more
 * attention than three secondary links deserve.
 */
.main-footer .about-widget .social-links li a {
	display: inline-block;
	width: 38px;
	height: 38px;
	line-height: 36px;
	text-align: center;
	font-size: 15px;
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: 50%;
	transition: all 300ms ease;
}

.main-footer .about-widget .social-links li a:hover,
.main-footer .about-widget .social-links li a:focus {
	background-color: #fff;
	border-color: #fff;
	color: var(--splendit-blue);
}

/* ---------------------------------------------------------------------------
 * The blue tile in the About section
 *
 * Its icon is an Elementor field, so the image itself is a choice made in the
 * editor — but the tile is filled with the brand blue, and the theme's icons
 * are dark navy line art on a pale disc. Only the one the demo happens to use
 * is mostly white, which is why swapping it for any other icon makes it
 * disappear. Knocking it white means the choice can be made on meaning rather
 * than on which icon survives the background.
 * ------------------------------------------------------------------------- */

#content_block_2 .content-box .inner-box .icon-box img {
	filter: brightness(0) invert(1);
}

/*
 * The tile's link ends in a download glyph, hardcoded in the plugin template
 * rather than exposed as a field — `<i class="flaticon-direct-download">` in
 * about_us.php. It made sense for the demo's "Guides & E-books"; it does not
 * for a link into the vacancies. Swapping the glyph through CSS keeps the fix
 * out of the plugin, which any update would overwrite.
 */
#content_block_2 .content-box .inner-box a .flaticon-direct-download:before {
	content: "\f109";
}

/* ---------------------------------------------------------------------------
 * "How it's Possible": the badge carries a letter, not a step number
 *
 * The plugin hardcodes the badge content as a running counter —
 * `sprintf('%02d', $count)` in how_it_possible.php — so the three tiles come
 * out 01, 02, 03. That is right for a process and wrong here: this section
 * holds Splendit's three values, Hungry, Honest and Human, which are parallel,
 * not sequential. Numbering them asserts an order that does not exist, and it
 * repeats the numbering already doing real work one section up, where the
 * steps genuinely follow each other.
 *
 * The badge itself is load-bearing: a 60px white disc lapping the icon's top
 * right corner, with its own shadow. Hiding it leaves a hole in the tile. So
 * the numeral is suppressed and replaced rather than removed — with the H the
 * three values share, which is Splendit's own H3 mark.
 *
 * font-size: 0 collapses the counter without touching the disc; the pseudo
 * restores a size for the letter. line-height stays 60px from the parent and
 * is absolute, so the letter keeps centring in the disc.
 * ------------------------------------------------------------------------- */

.process-section .process-block-one .inner-box .icon-box span {
	font-size: 0;
}

.process-section .process-block-one .inner-box .icon-box span:after {
	content: "H";
	font-size: 26px;
}

/* ---------------------------------------------------------------------------
 * News cards: the hover state erased the text
 *
 * color.css sets three links inside the card to `color: var(--main-color)` on
 * hover — the headline, the same headline as h2 on the blog pages, and the
 * author and comment links under it. That worked for the parent, whose
 * --main-color was a coral against a dark maroon block. Here --main-color and
 * --two-color are both the brand blue, and --two-color is what fills
 * .lower-content .inner. So the pointer landing on a card painted its text
 * #338FD2 on #338FD2: measured 1.00:1, gone. It is the same fault already
 * fixed in the footer and on the industry tabs, in the one place left where
 * blue type can land on a blue ground.
 *
 * The colour cannot carry the state here. White is the best contrast this
 * block allows — 3.50:1, against 3.19:1 for --splendit-blue-tint, the token the
 * footer uses — so the text stays white and the underline signals the hover
 * instead. The card already answers the pointer as a whole, scaling its
 * thumbnail and firing the parent's ripple, so the underline confirms which
 * link is live rather than announcing the hover on its own.
 *
 * h2 is included because the blog and archive pages render the identical card
 * with the headline at h2, off the identical rule.
 * ------------------------------------------------------------------------- */

.news-block-one .inner-box .lower-content .inner h3 a:hover,
.news-block-one .inner-box .lower-content .inner h2 a:hover,
.news-block-one .inner-box .lower-content .inner .post-info li a:hover {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------------------------------------------------------------------------
 * About page: the values block and the co-creation band
 *
 * Two widgets registered by this theme, not by the plugin — see
 * inc/elementor.php. Everything here is layout and rhythm; the colours come
 * from tokens already declared at the top of this file, and the accent full
 * stop after each heading is the .sec-title h2::after device the rest of the
 * site uses.
 * ------------------------------------------------------------------------- */

.splendit-values {
	position: relative;
	padding: 95px 0px 100px 0px;

	/*
	 * The intro and closing rows take the brand blue; each value row overrides
	 * this with its own accent below, which is what colours its full stop.
	 */
	--splendit-accent: var(--splendit-blue);
}

.splendit-values .sec-title {
	margin-bottom: 26px;
}

.splendit-values__text p {
	margin-bottom: 18px;
}

.splendit-values__text p:last-child {
	margin-bottom: 0px;
}

.splendit-values__intro,
.splendit-values__row,
.splendit-values__outro {
	align-items: center;
	margin-bottom: 70px;
}

.splendit-values__outro {
	margin-bottom: 0px;
}

/*
 * The picture sits left on the first row and alternates from there, which is
 * what keeps three rows of the same shape from reading as a list.
 *
 * The copy comes first in the markup and the row is reversed visually, rather
 * than the other way round: a screen reader and a phone both get the heading
 * before the photograph it belongs to. That is also why the flip is confined to
 * the desktop breakpoint — once the columns stack, row-reverse would push every
 * picture above its own heading.
 */
@media only screen and (min-width: 992px) {
	.splendit-values__row--flip {
		flex-direction: row-reverse;
	}
}

.splendit-values__row--turquoise { --splendit-accent: var(--splendit-turquoise); }
.splendit-values__row--coral     { --splendit-accent: var(--splendit-coral); }
.splendit-values__row--blue      { --splendit-accent: var(--splendit-blue); }
.splendit-values__row--amber     { --splendit-accent: var(--splendit-amber); }

/*
 * No duotone filter here, unlike the service and news thumbnails. Splendit's
 * own photography is already supplied duotoned in the four brand colours, so
 * multiplying it over an accent a second time would double the tint.
 */
.splendit-values__media .image-box {
	position: relative;
	display: block;
	margin: 0px;
	border-radius: 10px;
	overflow: hidden;
}

.splendit-values__media img {
	display: block;
	width: 100%;
	height: auto;
}

.splendit-values__mark,
.splendit-values__lockup {
	text-align: center;
}

.splendit-values__mark img,
.splendit-values__lockup img {
	display: inline-block;
	max-width: 100%;
	height: auto;
}

.splendit-values__mark img {
	max-width: 300px;
}

.splendit-values__lockup img {
	max-width: 420px;
}

/*
 * The closing line under each of the outer two values — "Dare to challenge
 * us!", "Will you join us for a drink?". On the old site they are plain
 * sentences; here they are links when a URL is given, because that is what they
 * are asking the reader to do. Without one they fall back to a paragraph, so
 * the middle value, which has no such line, simply renders nothing.
 */
.splendit-values__link {
	position: relative;
	display: inline-block;
	margin-top: 6px;
	font-weight: 700;
	color: var(--splendit-blue);
}

a.splendit-values__link:hover {
	color: var(--splendit-blue-hover);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.splendit-values__link--plain {
	color: var(--splendit-muted);
}

@media only screen and (max-width: 991px) {
	.splendit-values {
		padding: 65px 0px 70px 0px;
	}

	.splendit-values__intro,
	.splendit-values__row {
		margin-bottom: 45px;
	}

	.splendit-values__mark,
	.splendit-values__lockup {
		margin-bottom: 30px;
	}
}

/* ---------------------------------------------------------------------------
 * "Let's co-create the future"
 * ------------------------------------------------------------------------- */

.splendit-cocreate {
	position: relative;
	padding: 85px 0px 90px 0px;
}

.splendit-cocreate .sec-title {
	margin-bottom: 24px;
}

.splendit-cocreate__text {
	max-width: 720px;
	margin: 0px auto 36px auto;
	color: #fff;
}

.splendit-cocreate__buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}

/*
 * Both buttons are .theme-btn-two, the parent's unfilled variant, so they keep
 * the site's button metrics. The parent sets its colour with !important — the
 * declaration is in style.css, not in a state — so the solid button has to
 * match that weight to put blue type on its white ground. It is the narrowest
 * way to win: the alternative is a button that does not belong to the theme.
 */
.splendit-cocreate__btn--outline {
	border: 2px solid #fff;
	background: transparent;
}

.splendit-cocreate__btn--solid {
	background: #fff;
	color: var(--splendit-blue) !important;
}

/*
 * The hover is painted on :after, not on the button.
 *
 * The parent does not change a button's background on hover — it wipes a
 * pseudo-element across it. `.theme-btn-two:after` covers the whole box at
 * `transform: scaleX(0)` and animates to scaleX(1) on hover, and color.css
 * fills it with --main-color. That token is now the brand blue, the same blue
 * this band is painted in.
 *
 * So the first version of these rules did nothing visible: they set the
 * button's own background, which the :after then covered over. Hovering the
 * solid button wiped brand blue across it, leaving blue type on blue at 1.00:1
 * — the button disappeared into the band. Hovering the outline button did the
 * same to its label, since its hover colour was blue against what was now a
 * blue fill. .banner-section already carries a note about this exact trap; this
 * is the same one, one section further down.
 *
 * Repainting the layer instead of fighting it keeps the theme's wipe and makes
 * it land somewhere readable. On a blue band the only safe direction is towards
 * white, so the outline button wipes to white and takes blue type, and the
 * solid one wipes to the brand tint and keeps it.
 */
.splendit-cocreate__btn--outline:after {
	background: #fff;
}

.splendit-cocreate__btn--outline:hover {
	background: transparent;
	color: var(--splendit-blue) !important;
}

.splendit-cocreate__btn--solid:after {
	background: var(--splendit-blue-tint);
}

.splendit-cocreate__btn--solid:hover {
	background: #fff;
	color: var(--splendit-blue) !important;
}

@media only screen and (max-width: 991px) {
	.splendit-cocreate {
		padding: 60px 0px 65px 0px;
	}
}

/* ---------------------------------------------------------------------------
 * Footer: Quick links
 *
 * The parent floats every item at width:50%, which suited the demo's twelve
 * theme pages — About Company, Award Block, Sample Page and the rest. Splendit
 * has four links, and four in two columns reads as a grid with a hole in it
 * rather than as a list. One column, which is also how splendit.net sets them.
 * ------------------------------------------------------------------------- */

.footer-top .links-widget .links-list li {
	width: 100%;
	float: none;
	margin-bottom: 12px;
}

.footer-top .links-widget .links-list li:last-child {
	margin-bottom: 0px;
}

/* ---------------------------------------------------------------------------
 * Contact sections: an emptied repeater row leaves no trace
 *
 * Elementor will not let a repeater go below one item, so a section whose list
 * is meant to be empty always keeps a last row. On the contact page that row
 * came out as a broken image with the alt text "Awesome Image" showing, sitting
 * beside the map and duplicating nothing, because the fields behind it had been
 * cleared.
 *
 * Hiding the list outright would have been the quick fix and the wrong one: it
 * would bury whatever anybody puts there later. This keys on the row being
 * genuinely empty instead — no heading and no text — so clearing the fields is
 * what removes it, and filling them in brings it straight back. Both halves are
 * required, so a row carrying only body copy still renders.
 *
 * The parent template prints these with no whitespace inside the tags, which is
 * what lets :empty match at all.
 *
 * The #content_block_6 prefix is not decoration. The parent holds this row open
 * with `#content_block_6 .content-box .info-list li { display: block }`, and an
 * id outranks any number of classes — so the first version of this rule, class
 * only, lost the cascade and the row stayed put with its 2px marker showing.
 * The id has to appear here to beat it. Both contact widgets happen to print the
 * same id, so one selector covers the map section and the one above it.
 * ------------------------------------------------------------------------- */

#content_block_6 .content-box .info-list li:has(h4:empty):has(p:empty) {
	display: none;
}

/*
 * The same cleared field, one layer down. wp_get_attachment_url() returns false
 * for an unset image, so the template emits src="" — and an empty src does not
 * merely fail to draw: the browser resolves it against the document and fetches
 * the page again as if it were an image. Worth stopping wherever the theme
 * builds an <img> straight from a media field.
 */
#content_block_6 .content-box .info-list .icon-box img[src=""],
#content_block_6 .content-box .info-list .icon-box img:not([src]) {
	display: none;
}

/* ---------------------------------------------------------------------------
 * The call-to-action band: buttons sized by their label
 *
 * The parent pins both buttons to `width: 170px`. That fitted the demo, whose
 * labels were "Hire" and "Apply" — one word each. Splendit's are "Our services"
 * and "See our vacancies", and a fixed 170px broke them onto two lines inside
 * a button, which reads as a layout fault rather than a choice.
 *
 * min-width keeps the demo's proportions for short labels, so a future one-word
 * button still looks like a button rather than a chip; nowrap is what actually
 * stops the break, since auto width alone still wraps once the flex line is
 * tight.
 * ------------------------------------------------------------------------- */

.clients-style-two .title-inner .btn-box a {
	width: auto;
	min-width: 170px;
	white-space: nowrap;
}

.clients-style-two .title-inner .btn-box a + a {
	margin-left: 14px;
}

/*
 * The client logo carousel under it, when there are no clients to show.
 *
 * Splendit names no client anywhere — they write about "lasting partnerships
 * with all major IT players in Belgium" and stop there — so this row stays
 * empty, and an Elementor repeater cannot be emptied below one item. The
 * leftover figure renders as a stray link with no image, above 130px of margin
 * that was reserved for logos.
 *
 * Keyed on the image being absent rather than on the row being this row, so
 * real logos would bring the whole band back on their own. Clear the image
 * field to trigger it — a transparent placeholder file counts as an image and
 * will keep the space open.
 */
.clients-style-two .clients-logo-box:has(img[src=""]),
.clients-style-two .clients-logo-box:has(img:not([src])) {
	display: none;
}

/*
 * And the 130px of margin the carousel row was given. With nothing left to sit
 * in it, that gap reads as a section that failed to load. Collapsed only while
 * no logo carries an image, so it returns by itself the moment one does.
 */
.clients-style-two:not(:has(.clients-logo-box img[src]:not([src=""]))) .title-inner {
	margin-bottom: 0px;
}

/* ---------------------------------------------------------------------------
 * Job rows: the Apply button after the salary column went
 *
 * The row is a float layout with four fixed widths that add up to exactly 100%
 * — title 45%, salary 27%, experience 15%, Apply 13%. Suppressing the salary
 * (see splendit_suppress_job_salary) drops one of them, so the floats stop at
 * 73% and the button sits stranded in the middle of the row with a quarter of
 * the card empty to its right.
 *
 * The experience column takes the freed 27% rather than the button being
 * floated right. The result is the same to look at, because that column's text
 * is left-aligned inside whatever width it has — but it keeps a single
 * unbroken float sequence, where a right float would leave a gap that behaves
 * differently as the card narrows.
 *
 * Written against the salary box being absent rather than assuming it always
 * is, so removing that filter puts the original four-column row back with no
 * second edit here.
 * ------------------------------------------------------------------------- */

.single-job-post .job-inner:not(:has(.salary-box)) .experience-box {
	width: 42%;
}

/* ---------------------------------------------------------------------------
 * Hiring section: the cut-out photographs
 *
 * These two are drawn by tools/build-hiring-artwork.py, not recoloured from the
 * parent's — the parent's are 466px photographs with an un-antialiased diagonal
 * and a one-pixel rule, and no amount of recolouring or upscaling makes those
 * sharp. The rebuild keeps the originals' corner coordinates, so both still drop
 * into the slots the parent positions absolutely, but the card and the rule are
 * geometry now and the photograph inside comes from Splendit's own duotone
 * library.
 *
 * They are drawn at twice the size the page uses them at, for 2x displays. The
 * theme sets no width at all — the img falls back to its intrinsic size — so
 * without this the section would render twice as large. The widths are the
 * parent originals', to the pixel.
 * ------------------------------------------------------------------------- */

.hiring-section .image-layer .image-1 img {
	width: 466px;
	height: auto;
}

.hiring-section .image-layer .image-2 img {
	width: 464px;
	height: auto;
}

/*
 * The paragraph in that section is rgba(255,255,255,0.6) in the parent, which
 * suited a near-black maroon column. Measured on the grounds this build paints:
 * 2.20:1 on the brand blue and 1.94:1 where it crosses the coral card. Full
 * white takes those to 3.50:1 and 2.92:1 — the same 3.50 the section labels
 * elsewhere settled on. The black column is unaffected either way, at 7.37:1
 * before and 21:1 after.
 *
 * 2.92:1 over the card is still short of AA for 17px body copy. Fixing that
 * needs the card darkened under the text rather than another colour change, so
 * it stays on the list rather than being papered over here.
 */
.hiring-section .inner-box p {
	color: #fff;
}