/* ==========================================================================
   Hebrides People Accessibility 1.0.3
   1. The Aa button and panel
   2. The display options (classes on <html>, set by the button)
   3. Fixes to the live site
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The Aa button and panel
   -------------------------------------------------------------------------- */

.hp-aa {
	position: relative;
	display: inline-flex;
	align-self: center;
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--signika, sans-serif);
	font-style: normal;
}

.hp-aa__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	min-height: 30px;
	padding: 2px 0.5rem 0;
	border: 1px solid var(--hp-teal, #11464a);
	border-radius: 4px;
	background: transparent;
	color: var(--hp-teal, #11464a);
	font-family: var(--wp--preset--font-family--newsreader, Georgia, serif);
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
}

.hp-aa__toggle:hover {
	background: #fff;
}

.hp-aa__toggle[aria-expanded="true"],
html:is(.hp-aa-size-1, .hp-aa-size-2, .hp-aa-size-3, .hp-aa-size-4, .hp-aa-font, .hp-aa-space, .hp-aa-contrast, .hp-aa-links, .hp-aa-still) .hp-aa__toggle {
	background: var(--hp-teal, #11464a);
	color: #fff;
}

.hp-aa__panel {
	position: absolute;
	z-index: 1000;
	top: calc(100% + 10px);
	right: 0;
	box-sizing: border-box;
	width: min(20rem, calc(100vw - 2rem));
	padding: 1rem 1rem 1.125rem;
	background: #fff;
	color: var(--hp-ink, #1f2a2b);
	border: 1px solid var(--hp-teal, #11464a);
	border-top: 3px solid var(--hp-orange, #e58556);
	border-radius: var(--hp-radius-card, 8px);
	box-shadow: 0 14px 30px rgba(17, 70, 74, 0.18);
	font-size: 1rem;
	line-height: 1.4;
	text-align: left;
}

.hp-aa__panel[hidden] {
	display: none;
}

.hp-aa__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

.hp-aa__title {
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--newsreader, Georgia, serif);
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--hp-teal, #11464a);
}

.hp-aa__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: var(--hp-teal, #11464a);
	font-size: 1.625rem;
	line-height: 1;
	cursor: pointer;
}

.hp-aa__close:hover {
	background: var(--hp-paper, #f5f3ec);
}

.hp-aa__size {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.5rem 0 0.75rem;
	border-bottom: 1px solid var(--hp-line, #e1e1e1);
}

.hp-aa__label {
	font-weight: 600;
}

.hp-aa__stepper {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

.hp-aa__stepper button {
	min-width: 44px;
	min-height: 40px;
	padding: 0 0.5rem;
	border: 1px solid var(--hp-teal, #11464a);
	border-radius: 4px;
	background: #fff;
	color: var(--hp-teal, #11464a);
	font-family: var(--wp--preset--font-family--newsreader, Georgia, serif);
	font-size: 1.125rem;
	cursor: pointer;
}

.hp-aa__stepper button:hover:not(:disabled) {
	background: var(--hp-paper, #f5f3ec);
}

.hp-aa__stepper button:disabled {
	opacity: 0.45;
	cursor: default;
}

.hp-aa__value {
	min-width: 3.5em;
	text-align: center;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.hp-aa__opts {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.hp-aa__opts li {
	margin: 0 !important;
	padding: 0;
	border-bottom: 1px solid var(--hp-line, #e1e1e1);
}

.hp-aa__opt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	min-height: 48px;
	padding: 0.25rem 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.hp-aa__opt:hover .hp-aa__opt-label {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* The switch: a track with a knob, filled teal when on */
.hp-aa__switch {
	position: relative;
	flex: 0 0 auto;
	width: 42px;
	height: 24px;
	border: 2px solid var(--hp-teal, #11464a);
	border-radius: 999px;
	box-sizing: border-box;
	background: #fff;
}

.hp-aa__switch::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--hp-teal, #11464a);
	transition: transform 0.15s ease;
}

.hp-aa__opt[aria-pressed="true"] .hp-aa__switch {
	background: var(--hp-teal, #11464a);
}

.hp-aa__opt[aria-pressed="true"] .hp-aa__switch::after {
	background: #fff;
	transform: translateX(18px);
}

/* A tick inside the knob when on, so the state isn't shown by colour alone */
.hp-aa__opt[aria-pressed="true"] .hp-aa__switch::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: 6px;
	left: 26px;
	width: 4px;
	height: 7px;
	border: solid var(--hp-teal, #11464a);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.hp-aa__reset {
	margin-top: 0.875rem;
	padding: 0.5rem 0;
	border: 0;
	background: transparent;
	color: var(--hp-teal, #11464a);
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.18em;
	cursor: pointer;
}

/* Top bar: even spacing. The account and basket icons carry 6px of
   padding plus empty space inside their SVGs, so pull them in to make
   every visible gap 20px. Their tap targets stay the full size. */
.hp-utility .hp-utility-icons:has(.hp-aa) {
	column-gap: 1.25rem;
}

@media (min-width: 600px) {
	.hp-utility .hp-utility-icons > .wp-block-woocommerce-customer-account {
		margin: 0 -10px 0 -11px !important;
	}

	.hp-utility .hp-utility-icons > .wc-block-mini-cart {
		margin-inline: -10px !important;
	}

	/* The orange count badge sticks out to the right, so give it room */
	.hp-utility .hp-utility-icons > .wc-block-mini-cart:has(.wc-block-mini-cart__badge:not([hidden])) {
		margin-right: 3px !important;
	}
}

@media (max-width: 599px) {
	.hp-utility .hp-utility-icons:has(.hp-aa) {
		column-gap: 0.5rem !important;
	}

	/* On phones the panel spans the screen under the top bar */
	.hp-aa {
		position: static;
	}

	.hp-utility {
		position: relative;
	}

	.hp-aa__panel {
		left: 1rem;
		right: 1rem;
		top: calc(100% + 6px);
		width: auto;
	}
}

/* --------------------------------------------------------------------------
   2. Display options
   -------------------------------------------------------------------------- */

/* Text size: everything on the site is sized in rem, so the root size
   scales the whole page, header and menus included. */
html.hp-aa-size-1 { font-size: 112.5%; }
html.hp-aa-size-2 { font-size: 125%; }
html.hp-aa-size-3 { font-size: 137.5%; }
html.hp-aa-size-4 { font-size: 150%; }

/* With bigger text the full menu no longer fits beside the logo, so it moves
   into the menu button (the same overlay phones use). */
html:is(.hp-aa-size-2, .hp-aa-size-3, .hp-aa-size-4) .hp-header .wp-block-navigation__responsive-container-open:not(.always-shown, .hidden-by-default) {
	display: inline-flex !important;
}

html:is(.hp-aa-size-2, .hp-aa-size-3, .hp-aa-size-4) .hp-header .wp-block-navigation:has(> .wp-block-navigation__responsive-container-open) > .wp-block-navigation__responsive-container:not(.is-menu-open) {
	display: none !important;
}

html:is(.hp-aa-size-2, .hp-aa-size-3, .hp-aa-size-4) .hp-header .wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
	--navigation-layout-align: flex-start;
}

html:is(.hp-aa-size-2, .hp-aa-size-3, .hp-aa-size-4) .hp-header .is-menu-open :is(.wp-block-navigation__responsive-container-content, .wp-block-navigation__container, .wp-block-navigation-item, .wp-block-navigation__submenu-container) {
	align-items: flex-start !important;
	text-align: left !important;
}

/* On phones the buttons drop below the logo instead of running off the edge */
@media (max-width: 599px) {
	html:is(.hp-aa-size-2, .hp-aa-size-3, .hp-aa-size-4) .hp-header :has(> .hp-logo) {
		flex-wrap: wrap !important;
		row-gap: 0;
	}

	html:is(.hp-aa-size-2, .hp-aa-size-3, .hp-aa-size-4) .hp-header .hp-logo {
		margin-bottom: 56px !important;
	}
}

/* Easy-read font: a plain sans serif everywhere, no italics.
   Gaelic is italic Newsreader by default, which is harder to read. */
html.hp-aa-font {
	--wp--preset--font-family--signika: Verdana, Tahoma, "Segoe UI", Arial, sans-serif;
	--wp--preset--font-family--newsreader: Verdana, Tahoma, "Segoe UI", Arial, sans-serif;
}

html.hp-aa-font body,
html.hp-aa-font :is(h1, h2, h3, h4, h5, h6, .hp-hero-slide__heading, .hp-hero-slide__gaelic, .hp-hero-slide__text, .hp-lead, .hp-statement, .hp-statement-p, blockquote, cite, figcaption) {
	font-family: Verdana, Tahoma, "Segoe UI", Arial, sans-serif !important;
}

html.hp-aa-font :is(em, i, cite, blockquote, .hp-gd, .is-style-hp-gaelic, .hp-hero-slide__gaelic, [lang|="gd"]) {
	font-style: normal !important;
}

html.hp-aa-font :is(h1, h2, h3, .hp-hero-slide__heading) {
	letter-spacing: 0 !important;
	font-weight: 600 !important;
}

/* The fingerprint motif keeps a wide strip of its box free of text. With
   wider letters, more spacing or bigger text that strip squeezes headings
   until words break, so these options take the motif out and give the text
   the room back. */
html:is(.hp-aa-font, .hp-aa-space, .hp-aa-contrast, .hp-aa-size-2, .hp-aa-size-3, .hp-aa-size-4) [class*="is-style-hp-print-"]::before {
	display: none !important;
}

@media (min-width: 900px) {
	html:is(.hp-aa-font, .hp-aa-space, .hp-aa-contrast, .hp-aa-size-2, .hp-aa-size-3, .hp-aa-size-4) [class*="is-style-hp-print-"]:not(.alignfull) {
		padding-right: clamp(1.5rem, 3vw, 2.25rem) !important;
		padding-left: clamp(1.5rem, 3vw, 2.25rem) !important;
	}
}

/* More space: the WCAG 1.4.12 text-spacing values */
html.hp-aa-space :is(p, li, dd, dt, td, th, label, blockquote, figcaption, .hp-hero-slide__text) {
	line-height: 1.9 !important;
	letter-spacing: 0.04em !important;
	word-spacing: 0.16em !important;
}

html.hp-aa-space :is(h1, h2, h3, h4, h5, h6, .hp-hero-slide__heading) {
	line-height: 1.35 !important;
}

html.hp-aa-space main p + p {
	margin-block-start: 1.5em !important;
}

/* High contrast: the site's own colours, pushed darker.
   Teal goes to deep teal, grey text to near-black, borders show clearly. */
html.hp-aa-contrast {
	--wp--preset--color--contrast: #0b3336;
	--wp--preset--color--ink: #000;
	--wp--preset--color--black: #000;
	--wp--preset--color--muted: #1f2a2b;
	--wp--preset--color--primary-ink: #7a2e0e;
	--wp--preset--color--line: #4a5657;
	--hp-teal: #0b3336;
	--hp-ink: #000;
	--hp-muted: #1f2a2b;
	--hp-line: #4a5657;
	--hp-on-teal: #fff;
	--hp-orange-ink: #7a2e0e;
	--hp-focus: 4px solid #000;
}

html.hp-aa-contrast body {
	color: #000;
}

html.hp-aa-contrast .hp-hero {
	--hp-h-teal: #0b3336;
	--hp-h-on-teal: #fff;
	--hp-h-muted: #1f2a2b;
}

html.hp-aa-contrast :is(input, select, textarea) {
	border-color: #1f2a2b !important;
	color: #000 !important;
}

html.hp-aa-contrast ::placeholder {
	color: #3a3a3a !important;
	opacity: 1;
}

/* The fingerprint motif sits behind text panels; take it out */
html.hp-aa-contrast .hp-hero-slide__panel::before,
html.hp-aa-contrast [class*="hp-print"]::before,
html.hp-aa-contrast [class*="hp-print"]::after {
	display: none !important;
}

/* Thicker focus ring with a white halo, so it shows on any background */
html.hp-aa-contrast :focus-visible {
	outline: 3px solid #000 !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 5px #fff !important;
}

html.hp-aa-contrast :is(a, p, li, span, h1, h2, h3, h4) {
	text-shadow: none !important;
}

/* Underline links (buttons stay as buttons) */
html.hp-aa-links a:not(.wp-block-button__link, .wp-element-button, .hp-hero-btn, .button, .hp-lang a, .wc-block-mini-cart__button, .wc-block-customer-account__link) {
	text-decoration-line: underline !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 0.2em !important;
}

/* Stop moving content: no animations, transitions or smooth scrolling.
   The script also pauses the homepage slider. */
html.hp-aa-still,
html.hp-aa-still *,
html.hp-aa-still *::before,
html.hp-aa-still *::after {
	animation-duration: 0.001ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.001ms !important;
	transition-delay: 0s !important;
	scroll-behavior: auto !important;
}

/* --------------------------------------------------------------------------
   3. Fixes to the live site
   -------------------------------------------------------------------------- */

/* Phones and tablets: the logo tab overlapped the top of the menu button
   and "Make a donation". Keep the logo and the buttons on one row. */
@media (max-width: 1279px) {
	.hp-header .hp-logo {
		flex-shrink: 0;
	}

	.hp-header .hp-logo + .wp-block-group,
	.hp-header :has(> .hp-logo) {
		flex-wrap: nowrap !important;
	}
}

/* The narrowest phones (370px and under): the buttons drop below the logo */
@media (max-width: 370px) {
	.hp-header :has(> .hp-logo) {
		flex-wrap: wrap !important;
		row-gap: 0;
	}

	.hp-header .hp-logo {
		margin-bottom: 56px !important;
	}
}

/* Shop breadcrumbs: links inside a line of text need more than colour to
   stand out (WCAG 1.4.1) */
.woocommerce-breadcrumb a,
.wc-block-breadcrumbs a {
	text-decoration-line: underline !important;
	text-underline-offset: 0.18em;
}

/* Social feed (Curator): visible focus ring and a bigger tap area on the icons */
[class*="crt-"]:focus-visible,
[class*="crt-"] :focus-visible {
	outline: 3px solid var(--hp-teal-deep, #0b3336) !important;
	outline-offset: 2px !important;
}

.crt-social-icon {
	min-width: 24px;
	min-height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* "Skip past the social media feed" link: hidden until it has focus */
.hp-skip-feed:focus {
	position: static !important;
	display: inline-block;
	width: auto !important;
	height: auto !important;
	margin: 0 0 1rem !important;
	padding: 0.75rem 1.125rem !important;
	clip: auto !important;
	clip-path: none !important;
	background: var(--hp-teal, #11464a);
	color: #fff !important;
	font-weight: 600;
	border-radius: var(--hp-radius, 6px);
}

/* New-tab notice: read out, not shown */
.hp-new-tab {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}