/*!
Theme Name: Dictionary
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: dictionary
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Dictionary is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
# Design tokens
--------------------------------------------------------------
Brand primitives come from the OUP / ODAAE guidelines. Semantic tokens below
map them to roles; rules further down reference only the semantic layer, so
re-skinning is an edit to this block alone.

Two brand colours cannot carry text and are mapped accordingly:
  mustard-orange  2.79:1 on white — fails even the 3:1 non-text threshold
  odaae-red       6.80:1 on white — passes AA
Derived tints use color-mix so they stay tied to the brand value rather than
becoming new invented hexes. Ratios noted inline are against alabaster white.

Fonts are self-hosted in assets/fonts/ and declared via @font-face below, which
keeps them out of functions.php (still untracked) and off any third-party CDN.
--------------------------------------------------------------*/

:root {
	/* OUP and ODAAE brand colours */
	--oup-heritage-blue:      #011e41;
	--oup-noir:       				#000000;
	--oup-alabaster-white:    #ffffff;
	--oup-accent-pink:        #f6bdca;
	--oup-paper:							#fbfbfb;
	--oup-odaae-brown:        #5B4439;
	--oup-odaae-mustard-orange:          #E2840C;
	--oup-odaae-pastel-orange:         	 #FBD7A7;
	--oup-odaae-red:          #b31b1b;
	--oup-odaae-dark-red:     #730000;


	/* Ink & paper */
	--odaae-ink:            var(--oup-heritage-blue);                                          /* 16.62 AAA */
	--odaae-ink-muted:      var(--oup-odaae-brown);                                            /*  9.01 AAA */
	--odaae-ink-faint:      color-mix(in srgb, var(--oup-odaae-brown) 80%, var(--oup-alabaster-white));  /* 5.18 AA */
	--odaae-paper:          var(--oup-paper);
	--odaae-paper-sunk:     color-mix(in srgb, var(--oup-odaae-pastel-orange) 30%, var(--oup-alabaster-white));
	--odaae-rule:           color-mix(in srgb, var(--oup-odaae-brown) 30%, var(--oup-alabaster-white));
	--odaae-rule-strong:    var(--oup-heritage-blue);

	/* Accent — links, focus, interactive */
	--odaae-accent:         var(--oup-odaae-dark-red);                                         /* 12.15 AAA */
	--odaae-accent-hover:   color-mix(in srgb, var(--oup-odaae-dark-red) 80%, var(--oup-noir)); /* 14.43 AAA */
	--odaae-accent-faint:   var(--oup-odaae-pastel-orange);

	/* Bright red is too low-contrast for text but clears the 3:1 non-text bar,
	   so it is reserved for focus rings and decorative rules. */
	--odaae-focus:          var(--oup-odaae-red);                                              /*  6.80 non-text */

	/* Section-heading rule and quotation-box border. Supplied directly rather
	   than derived from a brand primitive — slot these into the brand block
	   above if they belong there. */
	--odaae-rule-heading:   rgb(215, 223, 231);
	--odaae-link:           #215fa6;  /* 6.46 on white, AA */
	--odaae-link-hover:     color-mix(in srgb, #215fa6 80%, var(--oup-noir));

	/* Entry banner — white on dark red 12.15 AAA, pink on dark red 7.55 AAA */
	--odaae-banner-bg:      var(--oup-odaae-dark-red);
	--odaae-banner-ink:     var(--oup-alabaster-white);
	--odaae-banner-rule:    var(--oup-accent-pink);
	/* The site header row is its own field, separate from the page banner
	   below it, so the two no longer share a token. */
	--odaae-header-bg:      var(--oup-odaae-red);
	--odaae-header-rule:    var(--oup-alabaster-white);
	--odaae-header-link:    var(--oup-accent-pink);  /* 4.22 on #b31b1b — see note */
	--odaae-search-bg:      var(--oup-heritage-blue);
	--odaae-search-rule:    var(--oup-odaae-dark-red);

	/* Status */
	--odaae-warn-bg:        color-mix(in srgb, var(--oup-odaae-pastel-orange) 30%, var(--oup-alabaster-white));
	--odaae-warn-rule:      var(--oup-odaae-mustard-orange);

	/* Type — see @font-face below */
	--odaae-font-display:   "DM Serif Display", Georgia, "Times New Roman", serif;
	--odaae-font-text:      "Lora", Georgia, "Times New Roman", serif;
	--odaae-font-ui:        "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--odaae-size-headword:  3.5rem;  /* 56px */
	--odaae-size-pos:       0.9rem;  /* 14.4px */
	--odaae-size-block:     1.275rem;    /* 20.4px — section headings */
	--odaae-size-link:      0.929688rem; /* 14.875px */
	--odaae-size-result:    1.25rem;     /* 20px — search result headword */
	--odaae-size-result-def: 1rem;       /* 16px — search result definition */
	--odaae-size-body:      1.0625rem; /* 17px */
	--odaae-size-quote:     0.95rem;
	--odaae-size-cite:      0.82rem;
	--odaae-size-label:     0.7rem;

	--odaae-leading-body:   1.55;
	--odaae-leading-tight:  1.3;

	/* Measure & rhythm */
	--odaae-measure:        52rem;
	--odaae-gap:            1rem;
	--odaae-gap-lg:         1.75rem;
	--odaae-gap-box:        1.0625rem; /* 17px — quotation box padding */
}

/*--------------------------------------------------------------
# Web fonts
--------------------------------------------------------------
Self-hosted from assets/fonts/. Paths are relative to this stylesheet, so no
functions.php change is needed to enqueue them.

Open Sans and Lora both ship as variable fonts: one file each covers the whole
weight axis, replacing the dozens of static files in the Google bundles.
--------------------------------------------------------------*/

@font-face {
	font-family: "Open Sans";
	src: url("assets/fonts/open-sans-variable.woff2") format("woff2");
	font-weight: 300 800;
	font-stretch: 75% 100%;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Open Sans";
	src: url("assets/fonts/open-sans-variable-italic.woff2") format("woff2");
	font-weight: 300 800;
	font-stretch: 75% 100%;
	font-style: italic;
	font-display: swap;
}

/* Lora carries the running text: a text serif with a real 400-700 axis and a
   matching italic, so nothing in body copy is ever synthesised. */
@font-face {
	font-family: "Lora";
	src: url("assets/fonts/lora-variable.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Lora";
	src: url("assets/fonts/lora-variable-italic.woff2") format("woff2");
	font-weight: 400 700;
	font-style: italic;
	font-display: swap;
}

/* DM Serif Display is display-only: headwords and browse letters, never
   running text. One weight, no italic shipped, because none is used. */
@font-face {
	font-family: "DM Serif Display";
	src: url("assets/fonts/dm-serif-display.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: var(--odaae-link);
}

/* Underscores shipped a:visited { color: #800080 }. Because a:visited scores
   (0,1,1) it outranks any single-class rule (0,1,0), so it silently overrode
   every component link in this file — purple headwords in the browse list, and
   purple-on-red at 1.29:1 in the site header, which is effectively invisible.
   There is deliberately no :visited colour here; components decide their own,
   and nothing reintroduces the trap. */

a:hover,
a:focus,
a:active {
	color: var(--odaae-link-hover);
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: var(--odaae-ink);
	border: 1px solid var(--odaae-rule);
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/*--------------------------------------------------------------
# Search & browse
--------------------------------------------------------------
Entry styling lives in the section below. These are the list, tag and A-Z
rules that only the search and browse templates use.

The Phase 0 versions of the entry rules that used to sit here have been
removed: they duplicated the section below, which loaded later and won
anyway, and they carried hard-coded greys that bypassed the palette.
.dict-entry__pron went with them — the template no longer renders a
pronunciation line (IPA is dataset-only).
--------------------------------------------------------------*/

.dict-block__body {
	font-size: var(--odaae-size-body);
	line-height: var(--odaae-leading-body);
}

.dict-notice--draft {
	background: var(--odaae-warn-bg);
	border-color: var(--odaae-warn-rule);
}

.dict-notice--stub {
	background: var(--odaae-paper-sunk);
	border-color: var(--odaae-rule);
}

/* Results
--------------------------------------------- */

.dict-results {
	list-style: none;
	max-width: var(--odaae-measure);
	margin: 1.5rem auto;
	padding: 0;
}

.dict-result {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.25rem 0;
}

.dict-result__link {
	font-family: var(--odaae-font-text);
	font-size: 1.2rem;
	text-decoration: underline;
	color: var(--odaae-link);
}

.dict-result__link:hover,
.dict-result__link:focus {
	color: var(--odaae-link-hover);
}

.dict-search {
	max-width: var(--odaae-measure);
	margin: 0 auto;
	padding: 2rem 1.25rem;
	font-family: var(--odaae-font-text);
	color: var(--odaae-ink);
}

/* Nested inside .dict-search, so it must not repeat the measure or the
   horizontal padding — doing so indented it by 1.25rem relative to the count
   line above it. */
.dict-noresults {
	font-family: var(--odaae-font-ui);
	font-size: var(--odaae-size-body);
	color: var(--odaae-ink);
	margin-top: 1.5rem;
}

.dict-noresults p {
	margin: 0 0 0.75rem;
}

.dict-noresults p:last-child {
	margin-bottom: 0;
}

.dict-browse {
	font-family: var(--odaae-font-text);
	color: var(--odaae-ink);
}

.dict-browse__body {
	max-width: var(--odaae-measure);
	margin: 0 auto;
	padding: 0 1.25rem 4rem;
}

/* Status tags
--------------------------------------------- */

.dict-tag {
	font-family: var(--odaae-font-ui);
	font-size: var(--odaae-size-label);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 0.1rem 0.45rem;
	border-radius: 0.25rem;
	color: var(--odaae-ink-muted);
}

.dict-tag--stub {
	background: var(--odaae-accent-faint);  /* brown on pastel: 6.60 AA */
}

.dict-tag--draft {
	background: var(--odaae-warn-bg);       /* brown on tinted pastel: 7.96 AA */
}

/* A-Z navigation
--------------------------------------------- */

.dict-az {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 1rem 0 1.5rem;
}

.dict-az__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	padding: 0.35rem 0.5rem;
	border: 1px solid var(--odaae-rule);
	border-radius: 0.3rem;
	font-family: var(--odaae-font-ui);
	font-weight: 600;
	text-decoration: none;
	color: var(--odaae-link);
}

.dict-az__item:hover,
.dict-az__item:focus {
	border-color: var(--odaae-link);
	color: var(--odaae-link-hover);
}

.dict-az__item.is-current {
	background: var(--odaae-rule-strong);
	border-color: var(--odaae-rule-strong);
	color: var(--odaae-paper);              /* white on heritage blue: 16.62 AAA */
}

/* Letters with no entries yet. Still meets 4.5:1 — "unavailable" is signalled
   by the cursor and missing href, not by colour alone. */
.dict-az__item.is-empty {
	color: var(--odaae-ink-faint);
	border-color: var(--odaae-rule);
	cursor: default;
}

.dict-browse__section {
	/* Keeps the letter heading clear of the viewport edge when an anchor in
	   the A-Z nav jumps to it. */
	scroll-margin-top: 1.5rem;
}

.dict-browse__section + .dict-browse__section {
	margin-top: var(--odaae-gap-lg);
}



.dict-browse__empty {
	color: var(--odaae-ink-muted);
}

/*--------------------------------------------------------------
# Dictionary entries
--------------------------------------------------------------
Styles the markup the importer renders (.odaae-*) and the template wrapper
(.dict-*). Everything reads from the token block at the top of this file, so
re-skinning to the OUP layouts should not require touching rules down here.
--------------------------------------------------------------*/

.dict-entry {
	color: var(--odaae-ink);
	font-family: var(--odaae-font-text);
	font-size: var(--odaae-size-body);
	line-height: var(--odaae-leading-body);
}

/* Headword
--------------------------------------------- */

/* The banner spans the viewport, so the reading measure lives on the body
   wrapper rather than on .dict-entry itself. */
.dict-entry__body {
	max-width: var(--odaae-measure);
	margin: 0 auto;
	padding: 0 1.25rem 4rem;
	font-weight: 400;

	/* The body face has one weight and a real italic, so there is nothing to
	   synthesise. Refusing the fallback means a future bold renders as regular
	   — visibly missing — instead of as a smeared fake. */
	font-synthesis: none;
}

/* Site header
--------------------------------------------- */

.site-header {
	background: var(--odaae-header-bg);

	/* Separates the bright red row from the dark red page banner beneath it. */
	border-bottom: 1px solid var(--odaae-header-rule);
}

/* Same measure and padding as .dict-entry__body and .dict-browse__body, so the
   logo lines up with the left edge of the content column below it. */
.site-header__inner {
	display: flex;
	align-items: center;
	height: 6.25rem;   /* 100px */
	max-width: var(--odaae-measure);
	margin: 0 auto;
	padding: 0 1.25rem;
}

.site-header__logo {
	display: flex;   /* kills the inline-image baseline gap */
	flex: 0 0 auto;
}

.site-header__logo img {
	display: block;
	height: 2rem;    /* 32px */
	width: auto;
}

.dict-searchform {
	margin-left: 3.125rem;   /* 50px from the logo */
}

/* Pushed to the right edge of the row. */
.site-header__link--list {
	margin-left: auto;
	white-space: nowrap;
}

/* Below the point where logo + 50px + search + link stop fitting on one line. */
@media (max-width: 46rem) {
	.site-header__inner {
		height: auto;
		flex-wrap: wrap;
		gap: 0.75rem 1.25rem;
		padding: 1rem 1.25rem;
	}

	.dict-searchform {
		margin-left: 0;
		order: 3;
		width: 100%;
	}

	.site-header__link--list {
		margin-left: auto;
	}
}

.site-header__link {
	font-family: var(--odaae-font-ui);
	font-size: var(--odaae-size-link);
	color: var(--odaae-header-link);
	text-decoration: none;
}

.site-header__link:hover,
.site-header__link:focus-visible {
	color: var(--odaae-header-link);
	text-decoration: underline;
}

/* Search box — sits in the red header bar beside the links
--------------------------------------------- */

.dict-searchform {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	width: 18.75rem;   /* 300px */
	height: 1.875rem;  /* 30px  */
	background: var(--odaae-paper);
	border-radius: 999px;
	padding: 0 0.15rem 0 0.85rem;
}

/* The pill is the control; the input carries no chrome of its own, so focus
   is shown on the pill. Removing the indicator altogether would leave keyboard
   users with nothing. */
.dict-searchform:focus-within {
	outline: 2px solid var(--odaae-header-link);
	outline-offset: 2px;
}

/* Qualified by the parent deliberately. The stock form rule above matches
   input[type="search"] at specificity (0,1,1), which outranks a single class
   — so an unqualified .dict-searchform__input would keep the 1px #ccc border,
   3px radius and padding no matter how late it appeared in the file. */
.dict-searchform .dict-searchform__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	border: 0;
	background: transparent;
	font-family: var(--odaae-font-ui);
	font-size: var(--odaae-size-link);
	line-height: 1;
	color: var(--odaae-ink);
	padding: 0;
}

.dict-searchform .dict-searchform__input:focus {
	outline: none;
	border: 0;
}

/* Safari draws its own decorations on type="search". */
.dict-searchform__input::-webkit-search-decoration,
.dict-searchform__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.dict-searchform__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.5rem;
	height: 1.5rem;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--odaae-ink);
	cursor: pointer;
	padding: 0;
}

.dict-searchform__icon {
	width: 0.95rem;
	height: 0.95rem;
}

.dict-searchform__submit:hover,
.dict-searchform__submit:focus-visible {
	color: var(--odaae-link);
}

/* Search results
--------------------------------------------- */

.dict-search__count {
	font-family: var(--odaae-font-ui);
	font-size: var(--odaae-size-body);  /* 17px */
	font-weight: 400;
	line-height: var(--odaae-leading-body);
	color: var(--odaae-ink);
	margin: 0;
}

/* Closed on all four sides: the list draws left, right and top, and each row
   draws its own bottom — so the last row's bottom is the table's. */
.dict-searchresults {
	list-style: none;
	margin: 1.25rem 0;
	padding: 0;
	border: 1px solid var(--odaae-rule-heading);
	border-bottom: 0;
}

.dict-searchresult {
	display: grid;
	grid-template-columns: 6.5rem 1fr;
	border-bottom: 1px solid var(--odaae-rule-heading);
}

.dict-searchresult__year {
	font-family: var(--odaae-font-ui);
	font-weight: 700;
	font-size: var(--odaae-size-cite);
	color: var(--odaae-ink);
	padding: 1rem 0.75rem 1rem 1rem;
	white-space: nowrap;
}

.dict-searchresult__body {
	border-left: 2px solid var(--odaae-search-rule);
	padding: 0.85rem 1rem 0.85rem 1.25rem;
}

.dict-searchresult__head {
	margin: 0 0 0.15rem;
}

.dict-searchresult__link {
	font-family: var(--odaae-font-ui);
	font-size: var(--odaae-size-result);
	font-weight: 700;
	color: var(--odaae-link);
	text-decoration: none;
}

.dict-searchresult__link:hover,
.dict-searchresult__link:focus {
	color: var(--odaae-link-hover);
	text-decoration: underline;
}

.dict-searchresult__pos {
	font-family: var(--odaae-font-ui);
	font-size: var(--odaae-size-quote);
	color: var(--odaae-ink-muted);
}

.dict-searchresult__def {
	margin: 0;
	font-family: var(--odaae-font-text);
	font-size: var(--odaae-size-result-def);
	color: var(--odaae-ink);
}

@media (max-width: 34rem) {
	.dict-searchresult {
		grid-template-columns: 4.5rem 1fr;
	}
}

/* "Did you mean?"
--------------------------------------------- */

.dict-suggest {
	border: 1px solid var(--odaae-rule-heading);
	padding: 1.5rem 2rem 1.75rem;
	margin: 1.25rem 0;
}

.dict-suggest__title {
	font-family: var(--odaae-font-ui);
	font-size: var(--odaae-size-result);
	font-weight: 700;
	color: var(--odaae-ink);
	margin: 0 0 1rem;
}

.dict-suggest__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dict-suggest__item + .dict-suggest__item {
	margin-top: 0.9rem;
}

.dict-suggest__link {
	font-family: var(--odaae-font-ui);
	font-size: var(--odaae-size-result-def);
	color: var(--odaae-link);
	text-decoration: none;
}

.dict-suggest__link:hover,
.dict-suggest__link:focus {
	color: var(--odaae-link-hover);
	text-decoration: underline;
}

/* Banner — shared by the entry headword and the A-Z page title, so the two
   cannot drift apart.
--------------------------------------------- */

.dict-entry__banner,
.dict-browse__banner {
	background: var(--odaae-banner-bg);
	color: var(--odaae-banner-ink);
	text-align: center;
	padding: 2.75rem 1.25rem 2rem;
	margin-bottom: var(--odaae-gap-lg);
}

/* Sized to the headword so the rules sit just off each end of the word.
   Two short pseudo-elements rather than one full-width rule masked by the
   text: no dependence on the h1 background matching the banner exactly. */
.headword-group {
	display: inline-block;
	position: relative;
	padding: 0 3rem;
}

.headword-group::before,
.headword-group::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 1.75rem;
	height: 1px;
	background-color: var(--odaae-banner-rule);
}

.headword-group::before {
	left: 0.5rem;
}

.headword-group::after {
	right: 0.5rem;
}

.dict-entry__headword,
.dict-browse__title {
	font-family: var(--odaae-font-display);
	font-weight: 400;
	font-size: var(--odaae-size-headword);
	line-height: 1.1;
	color: var(--odaae-banner-ink);

	/* h1 carries a browser default of margin: 0.67em 0; the banner controls
	   its own spacing through padding, so zero it explicitly. */
	margin: 0;
}

.dict-entry__pos {
	font-family: var(--odaae-font-ui);
	font-size: var(--odaae-size-pos);
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--odaae-banner-rule);
	margin: 0;
}

.dict-entry__audio {
	margin-top: 0.5rem;
	height: 2rem;
}

/* Blocks
--------------------------------------------- */

.dict-block {
	margin-bottom: var(--odaae-gap-lg);
}

/* Sentence case comes from the template, which already writes "Definitions",
   "Etymology" and so on — so this drops the uppercase transform rather than
   adding one. Letter-spacing goes with it: it was there to open up small caps
   and reads as a defect at 20.4px. */
.dict-block__title,
.dict-browse__letter {
	font-family: var(--odaae-font-ui);
	font-size: var(--odaae-size-block);
	font-weight: 700;
	color: var(--odaae-ink);
	margin: 0 0 0.6rem;
	padding-bottom: 0.4rem;
	border-bottom: 1px solid var(--odaae-rule-heading);
}

/* Part-of-speech unit
--------------------------------------------- */

.odaae-pos + .odaae-pos {
	margin-top: var(--odaae-gap-lg);
	border-top: 1px solid var(--odaae-rule);
	padding-top: var(--odaae-gap);
}

.odaae-pos__head {
	margin: 0 0 0.3rem;
	color: var(--odaae-ink-muted);
}

/* DM Serif Display ships a single weight, so 700 here would be synthesised —
   the browser smearing the roman rather than drawing a bold. Italic is a real
   face, so the emphasis comes from that alone. */
.odaae-pos__cat {
	font-style: italic;
	font-weight: 400;
	color: var(--odaae-ink);
}

.odaae-variants {
	font-size: var(--odaae-size-quote);
	color: var(--odaae-ink-muted);
	margin: 0.2rem 0 0.6rem;
}

.odaae-variants__label {
	font-style: italic;
}

/* Senses
--------------------------------------------- */

.odaae-senses {
	margin: 0.5rem 0;
	padding-left: 1.4rem;
}

.odaae-sense {
	margin-bottom: var(--odaae-gap);
}

/* The date range is first in source order so the float takes it to the top
   right and the definition wraps beneath it. */
.definition-container::after {
	content: "";
	display: block;
	clear: both;
}

.date-range {
	float: right;
	margin-left: 0.75rem;
	padding: 0.05rem 0.35rem;
	border-radius: 2px;
	background: var(--odaae-paper-sunk);
	font-family: var(--odaae-font-ui);
	font-size: var(--odaae-size-cite);
	font-weight: 700;
	color: var(--odaae-ink);
	white-space: nowrap;
}

/* Same reason as .odaae-pos__cat: no bold exists in the body face. */
.odaae-sense::marker {
	font-weight: 400;
	color: var(--odaae-ink-faint);
}

.odaae-chip {
	display: inline-block;
	font-family: var(--odaae-font-ui);
	font-size: var(--odaae-size-label);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--odaae-ink-muted);
	background: var(--odaae-accent-faint);
	border-radius: 2px;
	padding: 0.1rem 0.4rem;
	margin-right: 0.25rem;
}

/* Notes
--------------------------------------------- */

.odaae-note {
	font-size: var(--odaae-size-quote);
	background: var(--odaae-paper-sunk);
	border-left: 3px solid var(--odaae-rule);
	padding: 0.5rem 0.75rem;
	margin: 0.6rem 0 0;
}

.odaae-note__label {
	display: block;
	font-family: var(--odaae-font-ui);
	font-size: var(--odaae-size-label);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--odaae-ink-faint);
}

/* Etymology
--------------------------------------------- */

.odaae-etym {
	margin: 0 0 0.6rem;
}

/* Quotations
--------------------------------------------- */

/* column-reverse puts the quotation box above its own summary, so the link
   reads "Hide quotations" underneath the open box. */
/* The toggle sits inside its sense, after the definition and any notes. */
.odaae-sense .quotations-toggle {
	margin-top: 0.6rem;
}

.quotations-toggle {
	display: flex;
	flex-direction: column-reverse;

	/* align-items is left at its default `stretch` deliberately. With
	   flex-start the content box shrink-to-fits the quotation grid's
	   max-content width, which for long quotation lines is wider than the
	   page — the box's right border ends up off-screen. Only the summary
	   opts out, below, so the link is no wider than its text. */
}

.quotations-toggle__link {
	align-self: flex-start;
}

/* Animating <details> takes two modern pieces: ::details-content to target the
   collapsible box at all, and interpolate-size so a height can transition to
   and from `auto`. Without them the toggle still opens and closes correctly,
   just instantly — the animation is an enhancement, not the mechanism. */
:root {
	interpolate-size: allow-keywords;
}

.quotations-toggle::details-content {
	block-size: 0;
	overflow: hidden;

	/* The details is a column-reverse flex container, and flex items default to
	   min-height: auto — which would stop the box collapsing to zero. */
	min-block-size: 0;

	/* content-visibility flips discretely rather than over time, so it needs
	   allow-discrete to hold the content visible for the duration of the
	   collapse instead of vanishing on frame one. */
	transition:
		block-size 0.5s ease,
		content-visibility 0.5s allow-discrete;

	align-self: stretch;
}

.quotations-toggle[open]::details-content {
	block-size: auto;
}

@media (prefers-reduced-motion: reduce) {
	.quotations-toggle::details-content {
		transition: none;
	}
}

.quotations-toggle__link {
	display: inline-block;
	cursor: pointer;
	font-family: var(--odaae-font-ui);
	font-size: var(--odaae-size-link);
	font-weight: 400;
	color: var(--odaae-link);
	padding: 0.15rem 0;

	/* Both properties are needed to drop the disclosure triangle: the
	   pseudo-element for WebKit, list-style for everyone else. */
	list-style: none;
}

.quotations-toggle__link::-webkit-details-marker {
	display: none;
}

.quotations-toggle__link:hover,
.quotations-toggle__link:focus-visible {
	text-decoration: underline;
}

/* Only one of the two labels shows, so the link has real text for screen
   readers rather than generated content. */
.quotations-toggle__hide,
.quotations-toggle[open] .quotations-toggle__show {
	display: none;
}

.quotations-toggle[open] .quotations-toggle__hide {
	display: inline;
}

.quotation-block {
	border: 1px solid var(--odaae-rule-heading);
	padding: var(--odaae-gap-box);
	margin-bottom: 0.5rem;
}


.odaae-quotes + .odaae-quotes {
	margin-top: var(--odaae-gap-lg);
}

/* Two columns: the year sizes to its content, the body takes the remainder.
   Each quotation contributes exactly two children, so one quotation is one
   implicit row. */
.quotation-container {
	display: grid;
	grid-template-columns: min-content auto;
	gap: 0.75rem;
}

/* Quotations are set in the UI face rather than the body serif — the year
   column and citations read as apparatus, not as running text. */
.odaae-quotes {
	font-family: var(--odaae-font-ui);
}

.odaae-quote__year {
	font-weight: 700;
	font-size: var(--odaae-size-cite);
	line-height: 1.5;
	color: var(--odaae-ink);
	white-space: nowrap;
}

.odaae-quote__text {
	margin: 0;
	font-size: var(--odaae-size-quote);
	line-height: var(--odaae-leading-body);
}

.odaae-cite {
	display: block;
	font-style: normal;
	font-size: var(--odaae-size-cite);
	line-height: 1.4;
	color: var(--odaae-ink-muted);
	margin-top: 0.15rem;
}

.odaae-bib--author {
	font-variant: small-caps;
}

.odaae-bib + .odaae-bib::before {
	content: " ";
}

/* Cross-references
--------------------------------------------- */

.odaae-xrefs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.odaae-xrefs__item a,
.odaae-xrefs__item span {
	display: inline-block;
	font-size: var(--odaae-size-quote);
	border: 1px solid var(--odaae-rule);
	border-radius: 3px;
	padding: 0.15rem 0.5rem;
	text-decoration: none;
	color: var(--odaae-accent);
}

.odaae-xrefs__item a:hover,
.odaae-xrefs__item a:focus {
	color: var(--odaae-accent-hover);
	border-color: var(--odaae-accent);
}

/* Entries not in the dataset yet render as plain text, not dead links. */
.odaae-xref--unresolved {
	color: var(--odaae-ink-faint);
	border-style: dashed;
}

/* Status notices & CTA
--------------------------------------------- */

.dict-notice {
	font-family: var(--odaae-font-ui);
	font-size: var(--odaae-size-quote);
	background: var(--odaae-warn-bg);
	border: 1px solid var(--odaae-warn-rule);
	border-radius: 3px;
	padding: 0.75rem 1rem;
	margin-bottom: var(--odaae-gap-lg);
}

.dict-entry__cta {
	border-top: 1px solid var(--odaae-rule);
	padding-top: var(--odaae-gap);
	margin-top: var(--odaae-gap-lg);
}

.dict-cta__button {
	display: inline-block;
	font-family: var(--odaae-font-ui);
	font-size: var(--odaae-size-quote);
	text-decoration: none;
	color: var(--odaae-paper);
	background: var(--odaae-accent);
	border-radius: 3px;
	padding: 0.5rem 1rem;
}

.dict-cta__button:hover,
.dict-cta__button:focus {
	background: var(--odaae-accent-hover);
	color: var(--odaae-paper);
}

/* Brand red is legible enough for a focus indicator even though it is not for text. */
.dict-entry a:focus-visible,
.dict-cta__button:focus-visible {
	outline: 2px solid var(--odaae-focus);
	outline-offset: 2px;
}

@media (max-width: 34rem) {
	:root {
		--odaae-size-headword: 2.4rem;
	}

	.odaae-senses {
		padding-left: 1.1rem;
	}

	/* The year column would squeeze the quotation text at narrow widths, so
	   the grid collapses to a single column and the year sits above. */
	.quotation-container {
		grid-template-columns: 1fr;
		gap: 0.35rem;
	}

	.odaae-quote__body {
		margin-bottom: 0.5rem;
	}
}