/**
 * Vestelli site CSS, part 1 (loaded right before assets/css/site.css on the front end; NOT an editor style): the base
 * styles of plain buttons and form fields, the keyboard focus ring and the header's menu fill. Split off site.css on
 * 2026-10-16 so that site.css (the content styles: lead and kicker, quotes, check lists, tables, buttons ...) can be an
 * editor style too without recolouring the editor's own buttons and fields. The order of the rules is unchanged.
 *
 * The base rules are wrapped in :where() so that they never win over a class of a component.
 */

/* ------------------------------------------------------------ base: buttons and form fields */

/* (navy text on the accent: 5.0:1; white on it was 2.8:1. Round 4) */
:where(button, input[type="button"], input[type="submit"]) {
	background-color: var(--wp--preset--color--accent, #01a6e6);
	color: var(--wp--preset--color--navy, #1b2a57);
	font-size: 16px;
	line-height: 1.2;
	padding: 6px 12px;
	font-weight: 400;
	text-transform: none;
	text-shadow: none;
	border: 0 none;
	box-shadow: none;
	border-radius: 0;
}

:where(button, input[type="button"], input[type="submit"]):hover {
	background-color: #33b8eb;
}

/* a submit button is a 44px tap target */
:where(input[type="submit"], button[type="submit"]) {
	min-height: var(--ab-tap, 44px);
	padding: 10px 20px;
}

/* form fields: 16px text (phones do not zoom in), 44px high */
:where(input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="number"], input[type="search"], input[type="url"], textarea, select) {
	display: block;
	width: 100%;
	min-height: var(--ab-tap, 44px);
	padding: 10px 12px;
	font-size: 16px;
	line-height: 1.4;
	color: var(--wp--preset--color--navy, #1b2a57);
	background-color: #fcfcfc;
	background-image: none;
	border: 1px solid #d5d8e0;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	box-shadow: none;
	border-radius: 0;
}

:where(select) {
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%231b2a57' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 36px;
	appearance: none;
}

:where(input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="number"], input[type="search"], input[type="url"], textarea)::placeholder {
	color: rgba(27, 42, 87, 0.55);
}

/* the focused field: a navy border and the site's focus ring (the old theme removed every outline) */
:where(input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="number"], input[type="search"], input[type="url"], textarea, select):focus {
	background-color: #fff;
	border-color: var(--wp--preset--color--navy, #1b2a57);
	outline: 2px solid var(--wp--preset--color--accent, #01a6e6);
	outline-offset: 0;
	box-shadow: none;
}

:where(textarea) {
	height: 160px;
}

/* Keyboard focus is always visible (2px accent ring, 2px away from the element); a mouse click shows none. Components
   with a ring of their own (buttons, accordion rows, the header) set theirs with a class. */
:where(a, button, summary, [tabindex], input[type="checkbox"], input[type="radio"]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #01a6e6);
	outline-offset: 2px;
}

:focus:not(:focus-visible) {
	outline: none;
}

/* ------------------------------------------------------------ header (custom.css: "full-height cyan hover fill") */

/* the nav section has no vertical padding so that the menu links fill the full header height (90px) */
.vestelli-header .vestelli-header-nav-section {
	padding-top: 0;
	padding-bottom: 0;
}

.vestelli-header .vestelli-main-menu > li > a {
	min-height: 90px;
	padding-top: 0;
	padding-bottom: 0;
	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.vestelli-header .vestelli-main-menu > li > a:hover,
.vestelli-header .vestelli-main-menu > li > a:focus-visible {
	background-color: #00adee;
	color: #fff;
	opacity: 1;
}