/*
Theme Name: Sonect
Theme URI: https://www.sonect.pl/
Description: Child theme of Hello Elementor for www.sonect.pl. Holds the site's own
             header/footer behaviour, self-hosted fonts, and any CSS that should
             not live inside Elementor.
Author: Sonect
Template: hello-elementor
Version: 1.0.0
Text Domain: sonect
*/

/* Consent banner ---------------------------------------------------------- */

/* The layouts keep Landingi's own stacking order, and Landingi numbers its
   widgets from z-index 15000 up (scripts/build-elementor.py copies them as-is).
   At 9999 the banner sat underneath them: a tile's click area covered
   "Akceptuję" at 1440px and the form's submit button did at 390px, so clicking
   accept followed a tile link instead. It only shows where tracking is configured,
   i.e. production, so nothing local caught it. */
.sonect-consent {
	position: fixed;
	inset: auto 1rem 1rem 1rem;
	z-index: 2147483000;
	max-width: 32rem;
	margin-inline: auto;
	padding: 1rem 1.25rem;
	border-radius: 6px;
	background: #050b26;
	color: #fff;
	box-shadow: 0 6px 24px rgb(0 0 0 / 30%);
	font-size: 0.875rem;
	line-height: 1.5;
}

.sonect-consent p {
	margin: 0 0 0.75rem;
}

.sonect-consent a {
	color: #9db6ee;
}

.sonect-consent__actions {
	display: flex;
	gap: 0.5rem;
	justify-content: flex-end;
}

.sonect-consent button {
	padding: 0.5rem 1rem;
	border: 1px solid rgb(255 255 255 / 40%);
	border-radius: 4px;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.sonect-consent button.is-primary {
	border-color: #e03e1e;
	background: #e03e1e;
}

.sonect-consent button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Contact forms -----------------------------------------------------------
   The forms sit inside fixed-size panels carried over from the original design,
   so they have to keep the original's proportions. Forms on different pages are
   often not the same design -- translucent fields over a photograph on one, solid
   white on a coloured panel on another -- so the shared rules come first and each
   form gets its own block below, keyed on .sonect-form--<page slug>. Values
   come from the Landingi rules, verified on the live site: see docs/form-spec.md.

   These are set as WPForms' own custom properties rather than as competing
   declarations. WPForms defines them on :root and loads its stylesheet after the
   theme's, so plain rules lose; a custom property redefined on .wpforms-container
   sits closer to the elements that read it and wins regardless of load order.
   Where no variable exists, the selector has to match WPForms' own specificity
   (0,3,2) or better -- hence the `div.wpforms-container-full .wpforms-form` prefix. */

.wpforms-container {
	--wpforms-container-padding: 20px;

	--wpforms-field-size-padding-h: 14px;
	/* Unit required: WPForms sizes the checkbox with
	   calc(var(--wpforms-field-size-checkbox-size) - 2px + calc(var(--wpforms-field-border-size) * 2)),
	   and a unitless 0 makes that calc invalid, collapsing the box to nothing. */
	--wpforms-field-border-size: 0px;
	--wpforms-field-border-radius: 0;
	--wpforms-field-size-checkbox-size: 16px;

	--wpforms-label-color: rgb(255 255 255 / 80%);
	--wpforms-label-size-font-size: 12px;
	--wpforms-label-size-line-height: 16px;

	--wpforms-button-background-color: transparent;
	--wpforms-button-border-style: solid;
	--wpforms-button-border-size: 2px;
	--wpforms-button-border-color: #ffffff;
	--wpforms-button-border-radius: 0;
	--wpforms-button-text-color: #f2f9ff;
	--wpforms-button-size-height: 55px;
	--wpforms-button-size-font-size: 18px;
	--wpforms-button-size-margin-top: 4px;
	/* The original labels run the full width of a fixed-size button; WPForms'
	   default horizontal padding pushes the last letter against the border. */
	--wpforms-button-size-padding-h: 6px;

	margin: 0;
	font-family: Ubuntu, sans-serif;
}

/* WPForms adds `margin: 24px auto` through div.wpforms-container-full:not(:empty),
   which outranks the plain rule above: every field sat 24px below the original's
   and the widget grew 48px taller than the box the layout reserved for it. */
.sonect-form div.wpforms-container-full:not(:empty) {
	margin: 0;
}

/* Per-form styling goes here, one block per form, keyed on the class the
   generator puts on each form widget: .sonect-form--<page slug>. Take the
   values from the original's rules and measure them on the live page -- field
   height, colours, placeholder, submit width. For example:

.sonect-form--index .wpforms-container {
	--wpforms-field-size-input-height: 46px;
	--wpforms-field-size-font-size: 18px;
	--wpforms-field-background-color: rgb(255 255 255 / 15%);
	--wpforms-field-text-color: #ffffff;
}

.sonect-form--index .wpforms-container ::placeholder {
	color: #ffffff;
}
*/

/* Both originals used the browser's own checkbox: a white box. Borderless fields
   are right for the text inputs, but they leave the checkbox invisible against
   its panel, so it keeps a solid fill of its own. */
.sonect-form div.wpforms-container-full input[type="checkbox"]:before {
	background-color: #ffffff;
	border-radius: 0;
}

/* WPForms draws the tick in --wpforms-button-background-color, which is
   transparent here for the outlined submit button -- so a checked box looked
   exactly like an empty one, and nobody could tell whether consent was given.
   Redefining the variable on the checkbox alone recolours the tick and leaves
   the button untouched. */
.sonect-form .wpforms-container input[type="checkbox"] {
	--wpforms-button-background-color: #161616;
}

/* The box is painted 16px square but WPForms sizes the input itself to 14px
   tall (checkbox size - 2px + borders), so the bottom rim of the square did not
   take clicks. Match the input to what is painted, and show it is clickable. */
.sonect-form div.wpforms-container-full .wpforms-form input[type="checkbox"] {
	height: var(--wpforms-field-size-checkbox-size);
	cursor: pointer;
}

.sonect-form div.wpforms-container-full .wpforms-form .wpforms-field-checkbox li label {
	cursor: pointer;
}

/* Both originals are 70px, whatever the input height. WPForms derives textarea
   height from --wpforms-field-size-input-height (5.1x for "large", 2.26x for
   "small"), so this has to be stated outright -- and at its specificity. */
.sonect-form div.wpforms-container-full .wpforms-form textarea,
.sonect-form div.wpforms-container-full .wpforms-form textarea.wpforms-field-small,
.sonect-form div.wpforms-container-full .wpforms-form textarea.wpforms-field-large {
	height: 70px;
	min-height: 0;
}

.wpforms-container form.wpforms-form .wpforms-field {
	padding: 4px 0;
}

.wpforms-container form.wpforms-form .wpforms-field:first-of-type {
	padding-top: 0;
}

.wpforms-container ::placeholder {
	font-family: Ubuntu, sans-serif;
	font-size: 14px;
	opacity: 1;
}

/* WPForms draws placeholders at half opacity, with a selector that outranks the
   rule above -- so it only takes effect at this specificity. */
div.wpforms-container-full .wpforms-form input::placeholder,
div.wpforms-container-full .wpforms-form textarea::placeholder {
	opacity: 1;
}

.wpforms-container .wpforms-field-checkbox ul,
.wpforms-container .wpforms-field-checkbox li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wpforms-container .wpforms-field-checkbox label {
	font-weight: 300;
	line-height: 1.3;
}

/* Both forms drop to a shorter, smaller submit button on the mobile grid. */
@media (max-width: 767px) {
	.sonect-form .wpforms-container {
		--wpforms-button-size-height: 46px;
		--wpforms-button-size-font-size: 16px;
	}
}

/* WPForms exposes no variable for button weight; the original is bold. */
.wpforms-container form.wpforms-form button.wpforms-submit {
	font-weight: 700;
}

/* Consent tooltip ---------------------------------------------------------
   As on the original: hovering the consent label opens the full RODO clause in
   a black box below it, centred on the label, with an arrow. Measured on the
   live site -- 12px/18px Helvetica, 8px padding, 4px radius, 500px wide on
   desktop and the form's 304px on mobile.

   The original used a `title` attribute. This is the field description instead,
   which WPForms already ties to the checkbox with aria-describedby, so a screen
   reader announces the clause even while it is hidden; it also opens on
   keyboard focus, and on tap, since touch browsers give a tapped label :hover.

   "[Czytaj więcej]" is generated here rather than written into the label:
   WPForms submits the label as the checkbox's value, so it would otherwise land
   in every notification email. */

.sonect-form .wpforms-field-checkbox li label::after {
	content: " [Czytaj wi\0119 cej]";
}

.sonect-form div.wpforms-container-full .wpforms-form .wpforms-field-checkbox {
	position: relative;
}

.sonect-form div.wpforms-container-full .wpforms-form .wpforms-field-checkbox .wpforms-field-description {
	/* Where the label starts: the checkbox plus the gap before its text. The
	   tooltip is centred on the label, not on the field. */
	--label-inset: 18px;

	position: absolute;
	z-index: 100;
	left: calc(var(--label-inset) + (100% - var(--label-inset)) / 2);
	width: max-content;
	max-width: 500px;
	margin: 8px 0 0;
	padding: 8px;
	transform: translateX(-50%);
	border-radius: 4px;
	background: #000000;
	color: #ffffff;
	font: 400 12px/18px "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-align: center;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.15s ease, visibility 0s linear 0.15s;
}

/* The arrow, pointing up at the label. */
.sonect-form div.wpforms-container-full .wpforms-form .wpforms-field-checkbox .wpforms-field-description::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	margin-left: -6px;
	border: 6px solid transparent;
	border-bottom-color: #000000;
}

/* An invisible bridge over the gap between label and box, so the pointer can
   move onto the tooltip -- to read or select it -- without it closing. */
.sonect-form div.wpforms-container-full .wpforms-form .wpforms-field-checkbox .wpforms-field-description::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 100%;
	left: 0;
	height: 8px;
}

.sonect-form div.wpforms-container-full .wpforms-form .wpforms-field-checkbox:has(li label:hover) .wpforms-field-description,
.sonect-form div.wpforms-container-full .wpforms-form .wpforms-field-checkbox:has(input:focus-visible) .wpforms-field-description,
.sonect-form div.wpforms-container-full .wpforms-form .wpforms-field-checkbox .wpforms-field-description:hover {
	visibility: visible;
	opacity: 1;
	transition-delay: 0s;
}

/* The form widget carries Landingi's z-index (15005) and the tile overlays
   just below the homepage form sit higher (15034), so they painted over the
   bottom of the open tooltip. Lift the form above them only while it is open,
   so the page stacks exactly as the original the rest of the time. */
.elementor-element.sonect-form:has(.wpforms-field-checkbox li label:hover, .wpforms-field-checkbox input:focus-visible, .wpforms-field-checkbox .wpforms-field-description:hover) {
	z-index: 100000;
}

@media (max-width: 767px) {
	.sonect-form div.wpforms-container-full .wpforms-form .wpforms-field-checkbox .wpforms-field-description {
		max-width: 304px;
	}
}

/* Validation errors -------------------------------------------------------
   As on the original: nothing is checked until the form is submitted (see
   js/forms.js), and each error is a small white pill beside its field -- to its
   left on desktop, under it on mobile. Measured on the live site: 14px Roboto in
   #c21f25, 1px border, 30px radius, 32px tall, a red "!" disc before the text,
   right edge 5px short of the field and centred on it.

   The pills float outside the form instead of being inserted into it. The form
   sits in a fixed-size panel, and inline messages pushed the submit button out
   of it; they also moved the form under the pointer as they came and went,
   which is how a click on the consent box could be lost. */

/* At 600px and below WPForms clips every field: overflow-x: hidden, which also
   turns overflow-y to auto. On a phone each pill hangs below its field, so it
   was cut away entirely -- all but the checkbox's, whose tall field happens to
   contain it. The WPForms rule is
   `div.wpforms-container .wpforms-form .wpforms-field:not(...):not(...)...`,
   and its chain of :not() filters outranks any ordinary selector here, so the
   override has to be !important rather than an arms race of specificity. */
.sonect-form div.wpforms-container-full .wpforms-form .wpforms-field {
	position: relative;
	overflow: visible !important;
}

.sonect-form div.wpforms-container-full .wpforms-form em.wpforms-error {
	position: absolute;
	z-index: 1;
	right: calc(100% + 5px);
	display: flex;
	align-items: center;
	gap: 6px;
	box-sizing: border-box;
	height: 32px;
	/* WPForms puts the message straight after its input, so it starts at the
	   input's bottom edge: back up half an input to centre on it. */
	margin: calc(var(--wpforms-field-size-input-height) / -2) 0 0;
	padding: 0 12px 0 6px;
	transform: translateY(-50%);
	border: 1px solid #c21f25;
	border-radius: 30px;
	background: #ffffff;
	color: #c21f25;
	font: 400 14px/1 Roboto, Ubuntu, sans-serif;
	white-space: nowrap;
}

.sonect-form div.wpforms-container-full .wpforms-form em.wpforms-error::before {
	content: "!";
	position: static;
	flex: none;
	width: 19px;
	height: 19px;
	margin: 0;
	border-radius: 50%;
	background: #c21f25;
	color: #ffffff;
	font: 700 13px/19px Arial, sans-serif;
	text-align: center;
	-webkit-mask: none;
	mask: none;
}

.sonect-form div.wpforms-container-full .wpforms-form .wpforms-field-textarea em.wpforms-error {
	margin-top: -35px;   /* half the 70px textarea */
}

/* The checkbox's message is appended to the whole field, below its label, so
   it is placed from the top instead: the field's 4px padding plus half the box. */
.sonect-form div.wpforms-container-full .wpforms-form .wpforms-field-checkbox em.wpforms-error {
	top: 12px;
	margin-top: 0;
}

/* The pills reach outside the form widget, which keeps Landingi's z-index;
   lift the form while any field is marked invalid so nothing paints over them. */
.elementor-element.sonect-form:has(input.wpforms-error, textarea.wpforms-error) {
	z-index: 100000;
}

/* On a phone there is no room beside the form: the original moves each pill
   4px under its field, against the field's right edge -- and the checkbox's
   under the box. */
@media (max-width: 767px) {
	.sonect-form div.wpforms-container-full .wpforms-form em.wpforms-error,
	.sonect-form div.wpforms-container-full .wpforms-form .wpforms-field-textarea em.wpforms-error {
		right: 0;
		margin-top: 4px;
		transform: none;
	}

	.sonect-form div.wpforms-container-full .wpforms-form .wpforms-field-checkbox em.wpforms-error {
		top: 24px;   /* 4px padding + 16px box + 4px */
		right: auto;
		left: -1px;
		margin-top: 0;
	}
}

/* Required markers would add visual noise to a four-field panel. */
.wpforms-container .wpforms-required-label {
	display: none;
}

/* Buttons ----------------------------------------------------------------
   Every button here came from a Landingi widget: a fixed-size box with
   `overflow: hidden`, holding a single line. Some of them, such as the phone
   numbers, fit their text to the pixel, so letting the label wrap turns a 34px
   box into a 57px one and pushes it into whatever sits below. */

.sonect-btn .elementor-button-text {
	white-space: nowrap;
}

/* Browsers give the hand cursor only to an <a> with an href. A button published
   without a target has none, but Landingi still showed the hand over it. */
.sonect-btn .elementor-button {
	cursor: pointer;
}

/* Tile links -------------------------------------------------------------
   Each tile on the homepage is a coloured panel with its labels on top and a
   transparent anchor covering the whole thing -- that anchor is what makes the
   panel clickable. Its height comes from the original layout, passed in as a
   custom property because it differs per tile and per breakpoint. */

.sonect-hit {
	display: block;
	width: 100%;
	height: var(--h);
}

/* The desktop box is also written inline on the anchor, so that a tile stays
   clickable even if this stylesheet is stale in a browser cache or fails to
   load -- an empty anchor with no box cannot be clicked at all. An inline style
   outranks any selector here, so the mobile height has to say so explicitly. */
@media (max-width: 767px) {
	.sonect-hit {
		height: var(--h-m, var(--h)) !important;
	}
}

/* Icon links --------------------------------------------------------------
   The social icons sit on a coloured disc drawn behind them at the original
   widget's size, but Elementor sizes the icon's own anchor to the glyph -- so
   the rim of the disc looked clickable and was not. The discs are square, so
   the link can fill its box without needing a height passed in. */

.sonect-icon .elementor-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1;
}

/* Fixed sections ----------------------------------------------------------
   A header bar Landingi pins to the top of the window. It takes no room in the
   page -- the design leaves a spacer section of its height below it -- and stays
   above the content at Landingi's own z-index (widgets number from 15000; the
   consent banner is higher still). The generator marks it; Elementor free has no
   sticky containers. The admin-bar offsets only matter to a logged-in editor. */

.sonect-fixed {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	z-index: 199999;
}

@media (min-width: 768px) {
	.sonect-fixed-desktop {
		position: fixed !important;
		top: 0;
		left: 0;
		right: 0;
		z-index: 199999;
	}
}

@media (max-width: 767px) {
	.sonect-fixed-mobile {
		position: fixed !important;
		top: 0;
		left: 0;
		right: 0;
		z-index: 199999;
	}
}

.admin-bar .sonect-fixed,
.admin-bar .sonect-fixed-desktop,
.admin-bar .sonect-fixed-mobile {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .sonect-fixed,
	.admin-bar .sonect-fixed-desktop,
	.admin-bar .sonect-fixed-mobile {
		top: 46px;
	}
}

/* Images ------------------------------------------------------------------
   Hello Elementor sets `vertical-align: middle` on every <img>. Inside an
   absolutely positioned image widget that centres the picture on the text line
   rather than the box, which dropped sonect's 22px envelope icon 5px below where
   Landingi drew it. The generator gives each picture its box's height. */

.elementor-widget-image img {
	vertical-align: top;
}