/**
 * DiningOut global styles.
 */

/* --------------------------------------------------------------
 * Document
 * -------------------------------------------------------------- */

html {
	box-sizing: border-box;
	scroll-behavior: smooth;
}

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

body {
	margin: 0;
	background: var(--do-surface-page);
	color: var(--do-text-body);
	font-family: var(--do-font-body);
	font-size: var(--do-body-size);
	font-weight: var(--do-weight-light);
	line-height: var(--do-body-line-height);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.site-content {
	background: var(--do-surface-page);
}

::selection {
	background: var(--do-amber);
	color: var(--do-white);
}

/* --------------------------------------------------------------
 * Typography
 * -------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6,
.site-content h1,
.site-content h2,
.site-content h3,
.site-content h4,
.site-content h5,
.site-content h6 {
	margin-block: 0;
	color: var(--do-text-strong);
	font-family: var(--do-font-title);
	font-weight: var(--do-weight-bold);
}

h1,
.site-content h1 {
	font-size: var(--do-h1-size);
	line-height: var(--do-h1-line-height);
	letter-spacing: var(--do-h1-letter-spacing);
}

h2,
.site-content h2 {
	font-size: var(--do-h2-size);
	line-height: var(--do-h2-line-height);
	letter-spacing: var(--do-h2-letter-spacing);
}

h3,
.site-content h3 {
	font-size: var(--do-h3-size);
	line-height: var(--do-h3-line-height);
	letter-spacing: var(--do-h3-letter-spacing);
}

h4,
.site-content h4 {
	font-size: 24px;
	line-height: 1.15;
	letter-spacing: -0.012em;
}

h5,
.site-content h5 {
	font-size: 20px;
	line-height: 1.2;
}

h6,
.site-content h6 {
	font-size: 16px;
	line-height: 1.25;
}

p {
	margin-block: 0 1.55em;
}

p:last-child {
	margin-bottom: 0;
}

strong,
b {
	font-weight: var(--do-weight-semibold);
}

em,
i {
	font-style: italic;
}

blockquote {
	margin: 0;
	padding-left: var(--do-space-6);
	border-left: var(--do-border-accent-width) solid var(--do-amber);
	color: var(--do-text-body);
	font-family: var(--do-font-body);
	font-size: var(--do-quote-size);
	font-style: italic;
	font-weight: var(--do-weight-light);
	line-height: var(--do-quote-line-height);
}

/* --------------------------------------------------------------
 * Links
 * -------------------------------------------------------------- */

a {
	color: var(--do-link);
	text-decoration: none;
	transition: var(--do-transition-colour);
}

a:hover {
	color: var(--do-link-hover);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--do-focus);
	outline-offset: 3px;
}

/* --------------------------------------------------------------
 * Media
 * -------------------------------------------------------------- */

img,
picture,
svg,
video {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

/* --------------------------------------------------------------
 * Form inheritance
 * -------------------------------------------------------------- */

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

button {
	cursor: pointer;
}

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

.do-wrap {
	width: 100%;
	max-width: var(--do-wrap-max);
	margin-inline: auto;
	padding-inline: var(--do-gutter);
}

.do-section {
	padding-block: var(--do-section-spacing);
}

.do-surface-paper {
	background: var(--do-surface-page);
}

.do-surface-white {
	background: var(--do-surface-card);
}

.do-surface-teal {
	background: var(--do-surface-inverse);
	color: var(--do-text-on-inverse);
}

/* --------------------------------------------------------------
 * Editorial typography utilities
 * -------------------------------------------------------------- */

.do-eyebrow {
	margin: 0;
	color: var(--do-text-label);
	font-family: var(--do-font-label);
	font-size: var(--do-eyebrow-size);
	font-weight: var(--do-weight-semibold);
	letter-spacing: var(--do-eyebrow-tracking);
	line-height: 1.4;
	text-transform: uppercase;
}

.do-eyebrow--large {
	font-size: var(--do-eyebrow-large-size);
	letter-spacing: var(--do-eyebrow-large-tracking);
}

.do-lede {
	color: var(--do-text-body);
	font-family: var(--do-font-body);
	font-size: var(--do-lede-size);
	font-weight: var(--do-weight-light);
	line-height: var(--do-lede-line-height);
}

.do-meta {
	color: var(--do-text-muted);
	font-family: var(--do-font-label);
	font-size: var(--do-meta-size);
	font-weight: var(--do-weight-semibold);
	letter-spacing: var(--do-meta-tracking);
	line-height: 1.4;
	text-transform: uppercase;
}

.do-caps-link {
	display: inline-flex;
	align-items: center;
	gap: var(--do-space-3);
	color: var(--do-amber);
	font-family: var(--do-font-label);
	font-size: var(--do-caps-link-size);
	font-weight: var(--do-weight-semibold);
	letter-spacing: var(--do-caps-link-tracking);
	line-height: 1.4;
	text-transform: uppercase;
}

/* Rust italic clause used inside editorial headings */

.do-heading-emphasis {
	color: var(--do-rust);
	font-style: italic;
}

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

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* --------------------------------------------------------------
 * Mobile
 * -------------------------------------------------------------- */

@media (max-width: 767px) {
	body {
		font-size: var(--do-body-size);
	}

	h1,
	.site-content h1 {
		font-size: var(--do-h1-size-mobile);
		line-height: var(--do-h1-line-height-mobile);
		letter-spacing: -0.022em;
	}

	h2,
	.site-content h2 {
		font-size: var(--do-h2-size-mobile);
		line-height: var(--do-h2-line-height-mobile);
	}

	h3,
	.site-content h3 {
		font-size: var(--do-h3-size-mobile);
	}

	.do-wrap {
		padding-inline: var(--do-gutter-mobile);
	}

	.do-section {
		padding-block: var(--do-section-spacing-mobile);
	}

	.do-lede {
		font-size: var(--do-lede-size-mobile);
	}
}

/**
 * Removes Astra's default vertical margins from the primary content area.
 */
body.ast-plain-container.ast-no-sidebar #primary {
	margin-top: 0;
	margin-bottom: 0;
}