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

/* 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 opened /ipbox instead. It only shows where tracking is configured,
   i.e. production, so nothing local caught it. */
.consulle-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;
}

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

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

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

.consulle-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;
}

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

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

/* Contact forms -----------------------------------------------------------
   The forms sit inside fixed-size coloured panels carried over from the original
   design, so they have to keep the original's proportions. The two are NOT the
   same design: the homepage form floats on a dark photograph with translucent
   fields and white text, /ipbox uses solid white fields on an orange panel. Both
   share an outlined submit button. Values taken from the Landingi rules and
   verified against 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;
}

/* Homepage: translucent fields over the hero photograph. */
.consulle-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;
	--wpforms-label-size-line-height: 20.4px;   /* 12px x 1.7 */
}

.consulle-form--index .wpforms-container ::placeholder {
	color: #ffffff;
	font-weight: 300;
}

.consulle-form--index .wpforms-container form.wpforms-form button.wpforms-submit {
	width: 236px;
	margin-left: 13px;
	font-family: Lato, sans-serif;
}

/* WPForms hard-codes line-height:1.3 on the choice label at (0,4,3); the
   homepage's consent line is set 1.7. */
.consulle-form--index div.wpforms-container-full .wpforms-field.wpforms-field-checkbox ul li input + label {
	line-height: 1.7;
}

/* The mobile grid is narrower and the submit button shrinks with it. */
@media (max-width: 767px) {
	.consulle-form--index .wpforms-container form.wpforms-form button.wpforms-submit {
		width: 252px;
		margin-left: 14px;
	}
}

/* /ipbox: solid white fields on the orange panel. */
.consulle-form--ipbox .wpforms-container {
	--wpforms-field-size-input-height: 55px;
	--wpforms-field-size-font-size: 16px;
	--wpforms-field-background-color: #ffffff;
	--wpforms-field-text-color: #161616;
}

.consulle-form--ipbox .wpforms-container ::placeholder {
	color: #7e7e7e;
}

.consulle-form--ipbox .wpforms-container form.wpforms-form button.wpforms-submit {
	width: 100%;
}

@media (max-width: 767px) {
	.consulle-form--ipbox .wpforms-container {
		--wpforms-field-size-input-height: 46px;
	}

	.consulle-form--ipbox .wpforms-container form.wpforms-form button.wpforms-submit {
		width: 249px;
		margin-left: 15px;
		font-family: Lato, sans-serif;
	}
}

/* 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. */
.consulle-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. */
.consulle-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. */
.consulle-form div.wpforms-container-full .wpforms-form input[type="checkbox"] {
	height: var(--wpforms-field-size-checkbox-size);
	cursor: pointer;
}

.consulle-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. */
.consulle-form div.wpforms-container-full .wpforms-form textarea,
.consulle-form div.wpforms-container-full .wpforms-form textarea.wpforms-field-small,
.consulle-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-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) {
	.consulle-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. */

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

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

.consulle-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. */
.consulle-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. */
.consulle-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;
}

.consulle-form div.wpforms-container-full .wpforms-form .wpforms-field-checkbox:has(li label:hover) .wpforms-field-description,
.consulle-form div.wpforms-container-full .wpforms-form .wpforms-field-checkbox:has(input:focus-visible) .wpforms-field-description,
.consulle-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.consulle-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) {
	.consulle-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. */
.consulle-form div.wpforms-container-full .wpforms-form .wpforms-field {
	position: relative;
	overflow: visible !important;
}

.consulle-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;
}

.consulle-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;
}

.consulle-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. */
.consulle-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.consulle-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) {
	.consulle-form div.wpforms-container-full .wpforms-form em.wpforms-error,
	.consulle-form div.wpforms-container-full .wpforms-form .wpforms-field-textarea em.wpforms-error {
		right: 0;
		margin-top: 4px;
		transform: none;
	}

	.consulle-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. */

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

/* 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. */

.consulle-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) {
	.consulle-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. */

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