/*
  Componentstyling — WooCommerce en Booknetic
  Schoonheidsstudio Ingrid Buelens
  Basisinstructie 14.3 en 15, versie 0.1.0

  Alle waarden verwijzen naar tokens uit tokens.css. Voeg hier geen losse
  hexkleuren of pixelgroottes toe die niet uit een token komen.
*/

/* ------------------------------------------------------------------ */
/*  Zichtbare focus, WCAG 2.2 AA 2.4.7 en 2.4.11                       */
/* ------------------------------------------------------------------ */

/*
  TheGem zet `outline: none` op zijn interactieve elementen. Wie met de
  toetsenbordtab door de site gaat, ziet daardoor nergens waar hij staat. Dat is
  geen schoonheidsfoutje: zonder dit is de site met een toetsenbord niet te
  bedienen, en het is de meest voorkomende reden waarom een site zakt op 2.4.7.

  :focus-visible en niet :focus, zodat een muisklik geen ring achterlaat maar
  tabben wel. Twee pixels dik met twee pixels afstand: dat haalt de eis van
  2.4.11 dat de aanduiding minstens 3:1 afsteekt tegen wat eromheen ligt, ook
  wanneer het element zelf een achtergrondkleur heeft.

  Geen :where() rond de elementnamen. TheGem zet in style.css een eigen
  `a:focus-visible { outline: -webkit-focus-ring-color auto 5px }`; dat weegt
  (0,1,1). Binnen :where() wegen onze elementnamen nul, dus dan haalt onze regel
  maar (0,1,0) en wint het thema: de ring bleef het oranje van de browser in
  plaats van ons accent. Uitgeschreven wegen beide even zwaar en beslist de
  volgorde van laden, en het kindthema laadt na het thema.
*/
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: var(--focus-ring);
	outline-offset: var(--focus-offset);
	border-radius: var(--radius-sm);
}

/*
  Op de donkere vlakken — voettekst, titelbalk, citaat, overlaymenu — steekt het
  accent te weinig af tegen inkt (ongeveer 2,5:1). Daar wordt de ring papier.
  Hier mag :where() wel: de afstammingsselector maakt deze regel al zwaarder dan
  die hierboven, en de kleur is het enige wat ze overneemt.
*/
:where(.site-footer, #page-title, .ssb-quote, .overlay-menu-wrapper)
	a:focus-visible,
:where(.site-footer, #page-title, .ssb-quote, .overlay-menu-wrapper)
	button:focus-visible,
:where(.site-footer, #page-title, .ssb-quote, .overlay-menu-wrapper)
	input:focus-visible,
:where(.site-footer, #page-title, .ssb-quote, .overlay-menu-wrapper)
	[tabindex]:focus-visible {
	outline-color: var(--paper);
}

/*
  Tekst die alleen voor een schermlezer bestaat. Niet `display: none` en niet
  `visibility: hidden`: die halen de tekst ook bij de schermlezer weg. Dit is de
  gebruikelijke constructie die hem wel laat staan maar niet laat zien.
*/
.ssb-alleen-voorlezen {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
  Het logo is een link met `display: inline` rond een inline-block. De omhullende
  box is daardoor 205 bij 0: de focusring werd een streepje van nul hoog, en als
  klikdoel bestond de link strikt genomen niet. Een inline-block eromheen geeft
  de link de maat van het beeld dat erin staat.
*/
.site-logo a,
.site-logo a:focus-visible {
	display: inline-block;
}

/*
  De zoekoverlay staat gesloten op `opacity: 0` maar blijft `visibility: visible`
  met `pointer-events: auto`. Wie tabt, belandt dus in een zoekveld dat nergens
  te zien is — de ring wordt keurig getekend op iets wat buiten beeld staat. Dat
  is precies de situatie die 2.4.3 en 2.4.7 uitsluiten.

  `visibility: hidden` haalt de hele overlay uit de tabvolgorde én vangt de
  muisklikken niet meer af. TheGem opent met een klasse `active` en zet geen
  inline stijlen, dus deze regel komt het openen niet in de weg. De vertraging
  laat het uitfaden nog aflopen voor de overlay verdwijnt.
*/
.thegem-fullscreen-search:not(.active) {
	visibility: hidden;
	pointer-events: none;
	transition: visibility 0s linear var(--dur-slow, 0.3s);
}

.thegem-fullscreen-search.active {
	visibility: visible;
	pointer-events: auto;
	transition: visibility 0s linear 0s;
}

/* ------------------------------------------------------------------ */
/*  Klikdoelen van TheGem op maat, WCAG 2.2 AA 2.5.8                   */
/* ------------------------------------------------------------------ */

/*
  TheGem tekent zijn sociale iconen als 30 bij 16 in de bovenbalk en 16 bij 16
  in de voettekst. De norm is 24 bij 24. Een icoon van zestien pixels is met een
  vingertop niet betrouwbaar te raken, en het staat bovendien vlak naast zijn
  buur, dus de uitzondering voor "voldoende afstand" geldt evenmin.

  Het icoon zelf blijft even groot; alleen het aanraakvlak groeit.
*/
.socials-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 26 en niet 24: browsers ronden af en de meting kwam anders net onder de
	   norm uit. Twee pixels marge kost hier niets. */
	min-width: 26px;
	min-height: 26px;
	padding: var(--space-1);
}

/*
  Het kruisje waarmee een regel uit de winkelmand gaat. TheGem laat dat op het
  grijsblauw van zijn demo staan (#99a9b5), goed voor 1,89:1 — nauwelijks te
  zien tegen het vlak eronder. Het is bovendien maar zestien pixels breed.

  De kleur wordt pas rood bij aanwijzen: verwijderen is onomkeerbaar, dus het
  hoort zichtbaar te zijn, maar het mag niet het eerste zijn wat opvalt naast de
  knop die wél naar de kassa leidt.
*/
.woocommerce a.remove,
.woocommerce-mini-cart-item a.remove {
	color: var(--ink-soft);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	min-height: 26px;
}

.woocommerce a.remove:hover,
.woocommerce-mini-cart-item a.remove:hover {
	color: var(--danger);
	background: none;
}

/* Het adres en het e-mailadres in de voettekst zijn eveneens links. */
.footer-site-info a,
.site-footer a {
	display: inline-block;
	min-height: 24px;
	line-height: 24px;
}

/* ------------------------------------------------------------------ */
/*  Knoppen — gedeelde basis voor WooCommerce en Booknetic             */
/* ------------------------------------------------------------------ */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.booknetic-container .booknetic-btn,
.bkntc-booking-panel button.bkntc_next_step {
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-base);
	line-height: 1.2;
	background-color: var(--ink);
	color: var(--paper);
	border: 1px solid var(--ink);
	border-radius: var(--radius-pill);
	padding: var(--space-3) var(--space-6);
	min-height: var(--tap-min);
	box-shadow: none;
	transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.booknetic-container .booknetic-btn:hover,
.bkntc-booking-panel button.bkntc_next_step:hover {
	background-color: var(--accent-text);
	border-color: var(--accent-text);
	color: var(--paper);
}

/* De hoofdactie in checkout en boeking krijgt het accent, niet het donkere vlak. */
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order {
	background-color: var(--accent-text);
	border-color: var(--accent-text);
	color: var(--paper);
}

.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #place_order:hover {
	background-color: var(--ink);
	border-color: var(--ink);
}

/* Secundaire actie: alleen omtrek, zodat hiërarchie zichtbaar blijft zonder kleur als enige signaal. */
.woocommerce a.button.wc-backward,
.woocommerce button.button.ssb-secondary {
	background-color: transparent;
	color: var(--ink);
	border-color: var(--line-strong);
}

/* Uitgeschakelde knoppen zijn herkenbaar aan tekst én vorm, niet enkel aan kleur. */
.woocommerce button.button:disabled,
.woocommerce button.button[disabled] {
	background-color: var(--bone);
	border-color: var(--line-strong);
	color: var(--ink-soft);
	cursor: not-allowed;
	opacity: 1;
}

/* ------------------------------------------------------------------ */
/*  Formuliervelden                                                    */
/* ------------------------------------------------------------------ */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.booknetic-container input[type='text'],
.booknetic-container input[type='email'],
.booknetic-container input[type='tel'],
.booknetic-container textarea,
.booknetic-container select {
	font-family: var(--font-body);
	font-size: var(--fs-base);
	color: var(--ink);
	background-color: #fff;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	padding: var(--space-3) var(--space-4);
	min-height: var(--tap-min);
}

.woocommerce form .form-row input.input-text:focus-visible,
.woocommerce form .form-row textarea:focus-visible,
.woocommerce form .form-row select:focus-visible,
.booknetic-container input:focus-visible,
.booknetic-container textarea:focus-visible,
.booknetic-container select:focus-visible {
	outline: var(--focus-ring);
	outline-offset: var(--focus-offset);
	border-color: var(--accent-text);
}

.woocommerce form .form-row label {
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--ink-soft);
}

/* Verplichte velden: sterretje plus leesbare kleur, niet enkel rood. */
.woocommerce form .form-row .required {
	color: var(--danger);
	text-decoration: none;
}

/* Foutmeldingen benoemen het probleem; kleur is nooit het enige signaal. */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
	border-color: var(--danger);
	border-width: 2px;
}

/* ------------------------------------------------------------------ */
/*  Meldingen                                                          */
/* ------------------------------------------------------------------ */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background-color: var(--bone);
	color: var(--ink);
	border-top: 3px solid var(--accent-text);
	border-radius: var(--radius);
	font-size: var(--fs-base);
}

.woocommerce-error { border-top-color: var(--danger); }
.woocommerce-message { border-top-color: var(--success); }

/* ------------------------------------------------------------------ */
/*  Prijzen                                                            */
/* ------------------------------------------------------------------ */

.woocommerce .price,
.woocommerce span.amount,
.booknetic-container .booknetic-price {
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

/* Doorgestreepte oude prijs krijgt ook tekstuele context via screenreader-labels in de templates. */
.woocommerce .price del,
.woocommerce .price del span.amount {
	color: var(--ink-soft);
	font-weight: var(--fw-regular);
	opacity: 1;
}

.woocommerce .price ins {
	text-decoration: none;
	color: var(--accent-text);
}

/*
  Voorschot en openstaand saldo, basisinstructie 8.4 en 9.2.
  Deze worden bewust visueel gescheiden weergegeven: een voorschot is een
  betaling, geen korting. De opmaak mag dat onderscheid niet vertroebelen.
*/
.ssb-deposit-paid,
.ssb-balance-due {
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	font-variant-numeric: tabular-nums;
	display: block;
}

.ssb-deposit-paid { color: var(--success); }
.ssb-balance-due { color: var(--ink); font-weight: var(--fw-semibold); }

/* ------------------------------------------------------------------ */
/*  Productoverzicht en -kaarten                                       */
/* ------------------------------------------------------------------ */

.woocommerce ul.products li.product {
	background-color: var(--bone);
	border-radius: var(--radius-lg);
	padding: var(--space-4);
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--dur) var(--ease);
}

.woocommerce ul.products li.product:hover { box-shadow: var(--shadow); }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	font-weight: var(--fw-semibold);
	color: var(--ink);
}

.woocommerce span.onsale {
	background-color: var(--accent-text);
	color: var(--paper);
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	min-height: auto;
	line-height: 1.6;
	padding: var(--space-1) var(--space-3);
}

/* Voorraadstatus: tekst is leidend, kleur is ondersteunend. */
.woocommerce .stock.in-stock { color: var(--success); }
.woocommerce .stock.out-of-stock { color: var(--danger); font-weight: var(--fw-semibold); }

/* ------------------------------------------------------------------ */
/*  Booknetic — boekingspaneel                                         */
/* ------------------------------------------------------------------ */

.booknetic-container,
.bkntc-booking-panel {
	font-family: var(--font-body);
	color: var(--ink);
	background-color: var(--paper);
}

.booknetic-container h1,
.booknetic-container h2,
.booknetic-container h3,
.bkntc-booking-panel .bkntc-step-title {
	font-family: var(--font-display);
	color: var(--ink);
}

/* Geselecteerd tijdslot: accentvlak plus vetter tekst, zodat de keuze niet alleen op kleur berust. */
.booknetic-container .booknetic-time-slot.selected,
.bkntc-booking-panel .bkntc-time-slot.selected {
	background-color: var(--accent-text);
	border-color: var(--accent-text);
	color: var(--paper);
	font-weight: var(--fw-semibold);
}

/* Niet-beschikbaar tijdslot krijgt ook een doorhaling, niet alleen een lichte kleur. */
.booknetic-container .booknetic-time-slot.disabled,
.bkntc-booking-panel .bkntc-time-slot.disabled {
	background-color: var(--bone);
	color: var(--ink-soft);
	text-decoration: line-through;
	cursor: not-allowed;
}

.booknetic-container .booknetic-service-card,
.bkntc-booking-panel .bkntc-service-item {
	background-color: var(--bone);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	min-height: var(--tap-min);
}

/* ------------------------------------------------------------------ */
/*  Geen horizontale overflow op smalle schermen, basisinstructie 15   */
/* ------------------------------------------------------------------ */

@media (max-width: 480px) {
	.woocommerce table.shop_table,
	.woocommerce-cart table.cart,
	.booknetic-container table {
		display: block;
		overflow-x: auto;
		max-width: 100%;
	}
}