/**
 * Base: element defaults and the brand's shared components.
 *
 * Element defaults are wrapped in :where() so they carry no specificity: any class, the plugin's
 * included, overrides them without a fight. The components (.fr-button, .fr-switch, .fr-knurl …)
 * are the ones Focus Bookings' views use too; they are defined once, here.
 *
 * Breakpoints: phone below 640px, tablet 640px to 1023px, computer from 1024px.
 */

/* ---------------------------------------------------------------- Reset */

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* The scrollbar's room kept while a modal hides it (jquery-modal sets overflow: hidden on the body),
   so the page doesn't shift sideways as one opens and closes. */
:where(html) {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scrollbar-gutter: stable;
}

:where(body) {
	margin: 0;
	background: var(--fr-color-ground);
	color: var(--fr-color-ink);
	font-family: var(--fr-font-body);
	font-size: var(--fr-text-base-narrow);
	line-height: var(--fr-leading-body);
	font-kerning: normal;
	-webkit-font-smoothing: antialiased;
}

@media (min-width: 640px) {
	:where(body) {
		font-size: var(--fr-text-base);
	}
}

:where(img, svg, video, canvas) {
	display: block;
	max-width: 100%;
}

:where(img) {
	height: auto;
}

:where(button, input, select, textarea) {
	font: inherit;
	color: inherit;
}

:where(p, ul, ol, dl, figure, blockquote) {
	margin-block: 0 1em;
}

/* ---------------------------------------------------------------- Type */

:where(h1, h2, h3, h4, h5, h6) {
	margin-block: 0 0.5em;
	font-family: var(--fr-font-heading);
	font-weight: var(--fr-weight-bold);
	line-height: var(--fr-leading-tight);
	letter-spacing: var(--fr-tracking-display);
	text-wrap: balance;
}

:where(h3, h4, h5, h6) {
	font-weight: var(--fr-weight-semibold);
	line-height: var(--fr-leading-snug);
	letter-spacing: var(--fr-tracking-heading);
}

:where(h1) { font-size: var(--fr-text-title); }
:where(h2) { font-size: var(--fr-text-section); }
:where(h3) { font-size: var(--fr-text-panel); }
:where(h4) { font-size: var(--fr-text-item); }
:where(h5, h6) { font-size: var(--fr-text-base); }

:where(a) {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

:where(a:hover) {
	color: var(--fr-color-text-muted);
}

:where(strong, b) {
	font-weight: var(--fr-weight-bold);
}

:where(small) {
	font-size: var(--fr-text-small);
}

/* Keyboard focus is always visible, and always the same: an ink ring clear of the control. */
:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/*
 * Safari on a touch screen counts focus moved by a script as keyboard focus, so a dialog opening
 * would ring its cross. There the ring waits for Tab to be pressed: site.js sets data-fr-keys.
 */
@media (hover: none) {
	html:not([data-fr-keys]) :focus-visible {
		outline: none;
	}
}

::selection {
	background: var(--fr-color-ink);
	color: var(--fr-color-ground);
}

/* Capitals: the main navigation and the markings on camera-style controls, nowhere else. */
.fr-mark {
	font-family: var(--fr-font-mark);
	font-stretch: var(--fr-mark-stretch);
	font-weight: var(--fr-weight-semibold);
	font-size: var(--fr-text-mark);
	letter-spacing: var(--fr-tracking-mark);
	line-height: 1.2;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------- Layout */

.fr-container {
	width: 100%;
	max-width: var(--fr-layout-container);
	margin-inline: auto;
	padding-inline: var(--fr-layout-gutter-narrow);
}

@media (min-width: 640px) {
	.fr-container {
		padding-inline: var(--fr-layout-gutter);
	}
}

.fr-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.fr-skip-link {
	position: absolute;
	top: var(--fr-space-2);
	left: var(--fr-space-2);
	z-index: 1000;
	padding: var(--fr-space-3) var(--fr-space-4);
	background: var(--fr-color-ink);
	color: var(--fr-color-white);
	border-radius: var(--fr-radius-control);
	transform: translateY(-200%);
}

.fr-skip-link:focus {
	transform: none;
	color: var(--fr-color-white);
}

/* ---------------------------------------------------------------- Motifs */

/*
 * The two textures, as custom properties so a place that swaps one for the other at some width
 * uses the same drawing. Each is a whole background value, for the background shorthand.
 *
 * The scale is two layers standing on the bottom edge: fine marks at every pitch, and over every
 * third a mark twice as wide and a third taller, as a lens barrel marks its main distances.
 */
:root {
	--fr-motif-knurl-image: repeating-linear-gradient(
		90deg,
		var(--fr-color-ink) 0 var(--fr-motif-knurl-ridge),
		var(--fr-color-ribbing-light) var(--fr-motif-knurl-ridge) calc(var(--fr-motif-knurl-ridge) + var(--fr-motif-knurl-groove))
	);
	--fr-motif-scale-image:
		repeating-linear-gradient(
			90deg,
			var(--fr-color-ink) 0 var(--fr-motif-scale-weight-major),
			transparent var(--fr-motif-scale-weight-major) calc(3 * var(--fr-motif-scale-pitch))
		) 0 100% / 100% var(--fr-motif-scale-height-major) no-repeat,
		repeating-linear-gradient(
			90deg,
			var(--fr-color-ink) 0 var(--fr-motif-scale-weight),
			transparent var(--fr-motif-scale-weight) var(--fr-motif-scale-pitch)
		) 0 100% / 100% var(--fr-motif-scale-height) no-repeat;
}

/* Focus-ring ribbing: a band over the footer, and the top edge of a panel. */
.fr-knurl {
	height: var(--fr-motif-knurl-height-narrow);
	background: var(--fr-motif-knurl-image);
}

@media (min-width: 640px) {
	.fr-knurl {
		height: var(--fr-motif-knurl-height);
	}
}

/* The lens distance scale: fine marks, every third heavier, under a featured product. */
.fr-scale {
	display: block;
	height: var(--fr-motif-scale-height-major);
	background: var(--fr-motif-scale-image);
}

/* The record light: a state has changed (added, chosen, live). */
.fr-dot {
	display: inline-block;
	flex: none;
	width: var(--fr-motif-dot);
	height: var(--fr-motif-dot);
	border-radius: 50%;
	background: var(--fr-color-record);
}

/* ---------------------------------------------------------------- Icons */

.fr-icon {
	width: 24px;
	height: 24px;
	flex: none;
}

.fr-icon--small {
	width: 16px;
	height: 16px;
}

.fr-icon--stroke {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: butt;
	stroke-linejoin: round;
}

.fr-icon--fill {
	fill: currentColor;
	stroke: none;
}

.fr-logo {
	width: auto;
	height: 100%;
	fill: currentColor;
}

/* ---------------------------------------------------------------- Buttons
 *
 * .fr-button              outline: most actions
 * .fr-button--primary     record red: the one action a view exists for
 * .fr-button--filled      camera-body black: a chosen state ("Added", the set dates)
 * .fr-button--on-dark     outline on a dark panel
 * .fr-button--wide        full width
 * .fr-button--large       the product page's main action
 */

.fr-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--fr-space-2);
	min-height: var(--fr-control-height);
	padding: 0 var(--fr-space-4);
	border: var(--fr-control-border) solid var(--fr-color-ink);
	border-radius: var(--fr-radius-control);
	background: transparent;
	color: var(--fr-color-ink);
	font-family: var(--fr-font-body);
	font-size: var(--fr-text-small);
	font-weight: var(--fr-weight-semibold);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--fr-motion-quick) var(--fr-motion-ease), color var(--fr-motion-quick) var(--fr-motion-ease), border-color var(--fr-motion-quick) var(--fr-motion-ease);
}

/* Only with a pointer to hover: on a touch screen a tap would leave this look behind. */
@media (hover: hover) {
	.fr-button:hover {
		background: var(--fr-color-ink);
		color: var(--fr-color-ground);
	}
}

.fr-button:active {
	transform: translateY(1px);
}

.fr-button:disabled,
.fr-button[aria-disabled="true"] {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

.fr-button--primary {
	border-color: var(--fr-color-record);
	background: var(--fr-color-record);
	color: var(--fr-color-white);
}

/* Only with a pointer to hover: on a touch screen a tap would leave this look behind. */
@media (hover: hover) {
	.fr-button--primary:hover {
		border-color: var(--fr-color-ink);
		background: var(--fr-color-ink);
		color: var(--fr-color-white);
	}
}

.fr-button--filled {
	border-color: var(--fr-color-body);
	background: var(--fr-color-body);
	color: var(--fr-color-white);
}

/* Only with a pointer to hover: on a touch screen a tap would leave this look behind. */
@media (hover: hover) {
	.fr-button--filled:hover {
		border-color: var(--fr-color-ink);
		background: var(--fr-color-ink);
		color: var(--fr-color-white);
	}
}

.fr-button--on-dark {
	border-color: var(--fr-color-body-line-strong);
	color: var(--fr-color-on-dark);
}

/* Only with a pointer to hover: on a touch screen a tap would leave this look behind. */
@media (hover: hover) {
	.fr-button--on-dark:hover {
		border-color: var(--fr-color-on-dark);
		background: var(--fr-color-on-dark);
		color: var(--fr-color-ink);
	}
}

.fr-button--wide {
	width: 100%;
	min-height: var(--fr-control-height-wide);
}

.fr-button--large {
	min-height: var(--fr-control-height-large);
	padding-inline: var(--fr-space-7);
	font-size: var(--fr-text-lead);
}

/*
 * WooCommerce's .button, which Focus Bookings' older views use too: filled black, outline for
 * .secondary, record red for .alt (WooCommerce's "Place order"). Zero specificity, so a view's own
 * class wins. Views are moved onto .fr-button as they are redesigned.
 */
:where(.button, button.button, a.button, input.button, #place_order) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--fr-space-2);
	min-height: var(--fr-control-height);
	padding: 0 var(--fr-space-4);
	border: var(--fr-control-border) solid var(--fr-color-body);
	border-radius: var(--fr-radius-control);
	background: var(--fr-color-body);
	color: var(--fr-color-white);
	font-family: var(--fr-font-body);
	font-size: var(--fr-text-small);
	font-weight: var(--fr-weight-semibold);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

:where(.button.secondary) {
	border-color: var(--fr-color-ink);
	background: transparent;
	color: var(--fr-color-ink);
}

:where(.button.alt, #place_order) {
	border-color: var(--fr-color-record);
	background: var(--fr-color-record);
}

/* Only with a pointer to hover: on a touch screen a tap would leave this look behind. */
@media (hover: hover) {
	:where(.button:hover, #place_order:hover) {
		border-color: var(--fr-color-ink);
		background: var(--fr-color-ink);
		color: var(--fr-color-white);
	}
}

/* A square button holding only an icon, with its name for screen readers inside. */
.fr-icon-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--fr-control-height);
	height: var(--fr-control-height);
	padding: 0;
	border: 0;
	border-radius: var(--fr-radius-control);
	background: transparent;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

.fr-icon-button--outline {
	border: var(--fr-control-border) solid currentColor;
	transition: background-color var(--fr-motion-quick) var(--fr-motion-ease), color var(--fr-motion-quick) var(--fr-motion-ease);
}

/* Only with a pointer to hover: on a touch screen a tap would leave this look behind. */
@media (hover: hover) {
	.fr-icon-button--outline:hover {
		background: var(--fr-color-ink);
		color: var(--fr-color-ground);
	}
}

/* The count on the kit list. */
.fr-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: var(--fr-radius-badge);
	background: var(--fr-color-record);
	color: var(--fr-color-white);
	font-size: var(--fr-text-mark);
	font-weight: var(--fr-weight-bold);
	line-height: 1;
}

.fr-badge[hidden] {
	display: none;
}

/* ---------------------------------------------------------------- Breadcrumb
 *
 * The categories above a product or a category: "Lenses / Sony lenses", each a link, muted. Never
 * the home page (the logo is the way home) nor the page itself (its title says that).
 */

.fr-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--fr-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--fr-color-text-muted);
	font-size: var(--fr-text-small);
}

.fr-breadcrumb li + li::before {
	content: "/" / "";
	margin-right: var(--fr-space-2);
}

.fr-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.fr-breadcrumb a:hover {
	color: var(--fr-color-ink);
	text-decoration: underline;
}

/* ---------------------------------------------------------------- Prices
 *
 * "£75 /day": the amount in ink, the unit muted. Focus Bookings prints both VAT forms of an
 * amount, .fr-excl-vat and .fr-incl-vat, and shows the one the visitor has chosen.
 */

.fr-price {
	white-space: nowrap;
}

.fr-price__amount {
	font-weight: var(--fr-weight-semibold);
}

.fr-price__unit {
	color: var(--fr-color-text-muted);
}

/* ---------------------------------------------------------------- Slide switch
 *
 * A camera's slide switch: markings either side, a squared track and knob. The markup is a
 * <button role="switch" aria-checked> holding .fr-switch__mark, .fr-switch__track and another
 * .fr-switch__mark; aria-checked moves the knob, so script only flips that attribute.
 */

.fr-switch {
	display: inline-flex;
	align-items: center;
	gap: var(--fr-space-3);
	min-height: var(--fr-control-height);
	padding: 0;
	border: 0;
	background: none;
	color: var(--fr-color-ink);
	cursor: pointer;
}

.fr-switch__mark {
	color: var(--fr-color-text-muted);
}

.fr-switch[aria-checked="false"] .fr-switch__mark:first-child,
.fr-switch[aria-checked="true"] .fr-switch__mark:last-child {
	color: var(--fr-color-ink);
}

.fr-switch__track {
	position: relative;
	width: 44px;
	height: 24px;
	border-radius: var(--fr-radius-switch);
	background: var(--fr-color-ink);
}

.fr-switch__track::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: var(--fr-radius-knob);
	background: var(--fr-color-ground);
	transition: transform var(--fr-motion-quick) var(--fr-motion-ease);
}

.fr-switch[aria-checked="true"] .fr-switch__track::after {
	transform: translateX(20px);
}

/*
 * The same switch where a form or script reads a checkbox: an <input type="checkbox" role="switch"
 * class="fr-switch__input">, out of sight, then a <label class="fr-switch" aria-hidden="true">
 * drawing it. Unchecked is the left marking, checked the right. A checkbox is on or off, unlike
 * the two settings of a button's switch (Ex VAT, Inc VAT), so off its track is light.
 */
.fr-switch__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
}

.fr-switch__input + .fr-switch .fr-switch__track {
	transition: background-color var(--fr-motion-quick) var(--fr-motion-ease);
}

.fr-switch__input:not(:checked) + .fr-switch .fr-switch__track {
	background: var(--fr-color-switch-off);
}

.fr-switch__input:not(:checked) + .fr-switch .fr-switch__mark:first-child,
.fr-switch__input:checked + .fr-switch .fr-switch__mark:last-child {
	color: var(--fr-color-ink);
}

.fr-switch__input:checked + .fr-switch .fr-switch__track::after {
	transform: translateX(20px);
}

.fr-switch__input:focus-visible + .fr-switch .fr-switch__track {
	outline: 2px solid var(--fr-color-ink);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------- Form fields */

/* A single-line field is a line to write on: an ink rule under it, no box, no rounding. */
:where(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="hidden"], [type="range"], [type="file"]), select, textarea) {
	width: 100%;
	min-height: var(--fr-control-height);
	padding: 0 var(--fr-space-3);
	border: solid var(--fr-color-ink);
	border-width: 0 0 var(--fr-control-hairline) 0;
	border-radius: 0;
	background: transparent;
	color: var(--fr-color-ink);
	font-size: var(--fr-text-small);
}

/* iOS zooms the page in on any field set under 16px when it takes focus, and leaves it zoomed. */
@media (pointer: coarse) {
	:where(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="hidden"], [type="range"], [type="file"]), select, textarea) {
		font-size: 16px;
	}
}

/* Several lines need an edge all round to show where the field is. */
:where(textarea) {
	min-height: 7em;
	padding: var(--fr-space-3);
	border-width: var(--fr-control-hairline);
	line-height: var(--fr-leading-body);
}

/*
 * A field in use shows it by its line doubling in weight, not the focus ring other controls get:
 * fields take focus on every click, and a box would undo the open line. The shadow adds the
 * second pixel inside, so nothing shifts.
 */
:where(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="hidden"], [type="range"], [type="file"]), select):focus {
	outline: none;
	box-shadow: inset 0 -1px 0 var(--fr-color-ink);
}

:where(textarea):focus {
	outline: none;
	box-shadow: inset 0 0 0 1px var(--fr-color-ink);
}

:where(input, select, textarea)::placeholder {
	color: var(--fr-color-text-muted);
	opacity: 1;
}

:where(input[type="checkbox"], input[type="radio"]) {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--fr-color-ink);
}

:where(label) {
	font-size: var(--fr-text-small);
	font-weight: var(--fr-weight-medium);
}

/* ---------------------------------------------------------------- Tables */

:where(table) {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fr-text-small);
}

:where(th, td) {
	padding: var(--fr-space-3) var(--fr-space-2);
	border-top: var(--fr-control-hairline) solid var(--fr-color-rule-soft);
	text-align: left;
	vertical-align: top;
}

:where(th) {
	font-weight: var(--fr-weight-semibold);
}

/* ---------------------------------------------------------------- Running text */

.fr-prose {
	max-width: var(--fr-layout-measure);
	color: var(--fr-color-text-soft);
}

.fr-prose :where(h2, h3, h4) {
	margin-top: 1.6em;
	color: var(--fr-color-ink);
}

.fr-prose :where(h2) { font-size: var(--fr-text-panel); }
.fr-prose :where(h3) { font-size: var(--fr-text-item); }

.fr-prose :where(ul, ol) {
	padding-left: 1.2em;
}

.fr-prose :where(li + li) {
	margin-top: 0.35em;
}

/* Bold within running text is semibold in ink, as in modals: 700 here outweighed the headings over it. */
.fr-prose :where(strong, b) {
	color: var(--fr-color-ink);
	font-weight: var(--fr-weight-semibold);
}

.fr-prose :where(a) {
	color: var(--fr-color-ink);
	text-decoration-line: underline;
}

/* ---------------------------------------------------------------- Motion */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}