/*
 * Gotowe na nowe - WCAG 2.1 AA layer (theme 2.19.0).
 *
 * Loaded last on every page, also on the homepage (after the inlined home bundle).
 * Only two kinds of visible change live here:
 *   1. the approved colour shifts (one block below, the only place to tune them),
 *   2. keyboard focus indicators, shown only on :focus-visible (mouse users see nothing new).
 * Everything else in this file is invisible (screen-reader text, text-spacing safety).
 */

/* =========================================================================
 * 1. COLOUR SHIFTS (WCAG 1.4.3 text contrast, 1.4.11 non-text contrast)
 *
 * Every theme stylesheet (also home-critical.min.css and home-performance.min.css)
 * reads these variables. The colour after the comma in each var() there is the same
 * approved value and is used only if this file is missing.
 *
 *   before                         where                                      after     contrast
 *   #569788 brand sage             background / border under white text       #498074   white 4.54:1
 *   #569788 brand sage             text on cream #fff4eb / white              #467a6e   4.54:1 / 4.92:1
 *   #41776b darker sage            hover/strong states, popup eyebrow         #3d7065   stays darker than the new base;
 *                                  (#dceadf background)                                 4.56:1 on #dceadf
 *   #8b8380 #8a817d #817873        old (struck) prices, checkout step labels, #776f6b   4.54:1 on cream, 4.92:1 on white
 *   #8b827e #807773                small meta ("Ostatnia aktualizacja")
 *   rgba(255,255,255,.94/.96)      copy on sage heroes (/programy/, /blog/)   #ffffff   4.54:1 on #498074
 *   rgba(86,151,136,.92)           programme card caption on the homepage     rgba(73,128,116,.92) (literal in the bundles)
 *
 * To undo one shift, put the old value back here, e.g. --gnn-a11y-sage: #569788.
 * Not changed on purpose: SVG icon files and data-URI icons in #569788 (non-text, 3.13:1 on cream >= 3:1),
 * the e-mail templates (inc/emails.php) and the editor palette in theme.json.
 * ========================================================================= */
:root {
	--gnn-a11y-sage: #498074;
	--gnn-a11y-sage-text: #467a6e;
	--gnn-a11y-sage-hover: #3d7065;
	--gnn-a11y-muted: #776f6b;
	--gnn-a11y-on-sage: #ffffff;
	--gnn-a11y-focus: #3d7065;
	--gnn-a11y-focus-on-sage: #ffffff;
}

.gnnh-programs-hero p,
.gnn-blog-hero__lead,
.gnn-blog-hero__breadcrumbs .gnn-breadcrumbs__list,
.gnn-blog-hero__breadcrumbs .gnn-breadcrumbs__item,
.gnn-blog-hero__breadcrumbs .gnn-breadcrumbs__item:last-child,
.gnn-blog-hero__breadcrumbs .gnn-breadcrumbs__item a {
	color: var(--gnn-a11y-on-sage);
}

/*
 * 1b. Light textured sage panels with white text (NOT in the original colour table - needs approval).
 * Measured behind the text: #69a291-#75aa9b, white text only 2.6-3.2:1. A dark sage veil
 * rgba(47,92,82,.57) over the panel background (under the content) brings the lightest spot to
 * 4.6:1; the panels end up about #487a6d, the same depth as the approved #498074.
 * Panels: Kobiecy Weekend hero, Oferta dla firm hero (below the cream breadcrumb band),
 * Lifting spojrzenia "efekt otwartego oka", Olejki "Jakie korzyści zauważysz?",
 * Warsztaty "Poznaj sekret..." (the warsztaty hero fades into the veiled colour, so there is no seam).
 * To undo: --gnn-a11y-panel-veil: transparent; and --gnn-a11y-panel-veiled: #6ba594;
 */
:root {
	--gnn-a11y-panel-veil: rgba(47, 92, 82, 0.57);
	--gnn-a11y-panel-veiled: #4b7d70; /* #6ba594 under the veil, for the fade that ends in the panel colour */
}

.gnn-miodowa-hero,
.gnn-pdf-company-hero,
.gnnh-pdf-eye,
.gnnh-oils-benefits,
.gnn-pdf-ws-problems {
	position: relative;
	isolation: isolate;
}

.gnn-miodowa-hero::before,
.gnn-pdf-company-hero::before,
.gnnh-pdf-eye::before,
.gnnh-oils-benefits::before,
.gnn-pdf-ws-problems::before {
	position: absolute;
	z-index: -1;
	inset: 0;
	background: var(--gnn-a11y-panel-veil);
	content: "";
	pointer-events: none;
}

@media (min-width: 1025px) {
	.gnn-pdf-company .gnn-pdf-company-hero::before {
		top: 92px;
	}

	html body.gnn-design-v3 .gnn-pdf-workshops .gnn-pdf-ws-hero {
		background: linear-gradient(180deg, var(--gnn-v3-cream) 0, var(--gnn-v3-cream) calc(100% - 180px), #cfe1d8 calc(100% - 95px), var(--gnn-a11y-panel-veiled) 100%);
	}
}

/* Kobiecy Weekend breadcrumbs #357d6f on cream 4.49:1 -> #347c6e (4.56:1), the smallest darkening of the same hue. */
html body .gnn-miodowa__breadcrumbs {
	color: var(--gnn-a11y-miodowa-crumbs, #347c6e);
}

/* Kobiecy Weekend: the hero lead is white in the design; below 1025px a generic ".gnn-miodowa p"
   reset turned it near-black on the green panel. */
html body .gnn-miodowa p.gnn-miodowa-hero__lead {
	color: var(--gnn-a11y-on-sage);
}

html body .gnnh-oils-benefits__media::after {
	background: linear-gradient(180deg, rgba(75, 125, 112, 0) 0%, rgba(75, 125, 112, 0.42) 52%, var(--gnn-a11y-panel-veiled) 100%);
}

/* =========================================================================
 * 2. KEYBOARD FOCUS (WCAG 2.4.7) - :focus-visible only.
 * An outline in the element's own shape (it follows border-radius), 2px, offset 3px,
 * dark sage #3d7065 (>= 5:1 on white and cream); white on sage surfaces.
 * ========================================================================= */
html body :is(a[href], area[href], button, input, select, textarea, summary, iframe, [tabindex]:not([tabindex="-1"]), [role="button"], [contenteditable="true"]):focus-visible {
	outline: 2px solid var(--gnn-a11y-focus) !important;
	outline-offset: 3px !important;
}

/* Text fields and boxes: the ring sits close to the field. */
html body :is(input:not([type="submit"]):not([type="button"]):not([type="image"]), select, textarea):focus-visible {
	outline-offset: 2px !important;
}

/* Elements on the sage bands (hero bands, veiled panels) and the sage mega-menu panel get a white ring. */
html body :is(.gnnh-programs-hero, .gnn-blog-hero, .gnnh-mega__intro, .gnn-miodowa-hero, .gnn-pdf-company-hero > .gnnh-shell > .gnnh-pdf-two-col, .gnnh-pdf-eye, .gnnh-oils-benefits, .gnn-pdf-ws-problems) :is(a[href], button, [tabindex]:not([tabindex="-1"])):focus-visible {
	outline-color: var(--gnn-a11y-focus-on-sage) !important;
}

@media (max-width: 1024px) {
	html body .gnn-pdf-company-hero .gnnh-breadcrumbs a:focus-visible {
		outline-color: var(--gnn-a11y-focus-on-sage) !important;
	}
}

/* FAQ: the ring goes around the whole question card (as the design wants) instead of across the open answer. */
html body .gnnh-accordion__item > button:focus-visible {
	outline: none !important;
}

html body .gnnh-accordion__item:has(> button:focus-visible) {
	outline: 2px solid var(--gnn-a11y-focus);
	outline-offset: 3px;
}

/* Homepage programme cards: the whole card is the link (an empty overlay anchor), so the ring goes around the card. */
html body .gnnh-program-card > a:focus-visible {
	outline: none !important;
}

html body .gnnh-program-card:has(> a:focus-visible) {
	outline: 2px solid var(--gnn-a11y-focus);
	outline-offset: 3px;
}

/* =========================================================================
 * 3. FORM FIELD BORDERS (WCAG 1.4.11) - the lightest colour of the same hue that
 *    reaches 3:1 against the surface around the field.
 *      sage fields (contact form, cart, checkout, product quantity, login)  rgba(86,151,136,.30-.62) -> #5f9a8c
 *      warm-grey fields (product review form)                               #d7cec6 -> #a48f7d
 *      neutral fields (other WooCommerce account forms)                     rgba(45,37,37,.16) -> #979494
 * ========================================================================= */
:root {
	--gnn-a11y-field-border: #5f9a8c;
	--gnn-a11y-field-border-warm: #a48f7d;
	--gnn-a11y-field-border-neutral: #979494;
}

html body .woocommerce form .form-row :is(input.input-text, textarea, select),
html body .woocommerce form .form-row .select2-container--default .select2-selection--single {
	border-color: var(--gnn-a11y-field-border-neutral);
}

html body :is(
	.gnn-pdf-form-card input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
	.gnn-pdf-form-card textarea,
	.gnn-pdf-form-card select,
	.gnn-cart-item__qty .quantity input.qty,
	.gnn-cart-coupon__row .input-text,
	.woocommerce-checkout form .form-row input.input-text,
	.woocommerce-checkout form .form-row textarea,
	.woocommerce-checkout form .form-row select,
	.woocommerce-checkout .select2-container--default .select2-selection--single,
	.woocommerce-checkout input[type="checkbox"]:not(:checked),
	.woocommerce-checkout input[type="radio"]:not(:checked),
	.gnnh-product-cart-form .quantity input,
	.woocommerce-form-login input.input-text
) {
	border-color: var(--gnn-a11y-field-border);
}

html body .gnnh-product-reviews-inline :is(textarea, input[type="text"], input[type="email"]) {
	border-color: var(--gnn-a11y-field-border-warm);
}

/* =========================================================================
 * 4. INVISIBLE HELPERS
 * ========================================================================= */

/* Reviews carousel track is focusable for keyboard scrolling (2.1.1); its ring sits inside the track. */
html body .gnnh-review-list:focus-visible {
	outline-offset: -2px !important;
}

/* Checkout digital-content consent: WooCommerce's own `label.checkbox { display: inline }` and
   `.input-checkbox { display: inline }` beat the theme rules, which squashed the box to 2px (1.4.11).
   This restores the 18px box and the 14px/15px inner padding the theme already defines
   (form .form-row { padding: 0 } had overridden it). */
html body.woocommerce-checkout form .form-row.gnn-digital-consent {
	padding: 14px 15px;
}

html body.woocommerce-checkout .gnn-digital-consent label.checkbox {
	position: relative;
	display: block;
	padding-left: 27px;
}

html body.woocommerce-checkout .gnn-digital-consent .input-checkbox {
	position: absolute;
	top: 2px;
	left: 0;
	display: inline-block;
	margin: 0;
}