/* =======================================
   GLOBAL DESIGN TOKENS
   Shared variables and base styles for the
   new site design. Component stylesheets
   should build on these rather than
   redefining colors/fonts locally.
   ======================================= */

@font-face {
	font-family: 'Plantin MT Pro';
	src: url('../fonts/plantin-mt-pro/PlantinMTProLight.TTF') format('truetype');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Plantin MT Pro';
	src: url('../fonts/plantin-mt-pro/PlantinMTProLightIt.TTF') format('truetype');
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Plantin MT Pro';
	src: url('../fonts/plantin-mt-pro/PlantinMTProRg.TTF') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Plantin MT Pro';
	src: url('../fonts/plantin-mt-pro/PlantinMTProRgIt.TTF') format('truetype');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Plantin MT Pro';
	src: url('../fonts/plantin-mt-pro/PlantinMTProSmBd.TTF') format('truetype');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Plantin MT Pro';
	src: url('../fonts/plantin-mt-pro/PlantinMTProSemiBdIt.TTF') format('truetype');
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Plantin MT Pro';
	src: url('../fonts/plantin-mt-pro/PlantinMTProBold.TTF') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Plantin MT Pro';
	src: url('../fonts/plantin-mt-pro/PlantinMTProBoldIt.TTF') format('truetype');
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Plantin MT Pro Condensed';
	src: url('../fonts/plantin-mt-pro/PlantinMTProCnBd.TTF') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-stretch: condensed;
	font-display: swap;
}

:root {
	/* Brand colors */
	--color-apple: #AE2228;
	--color-charcoal: #231F20;
	--color-off-white: #FCFAFA;
	--color-stone-100: #E2D4D4;
	--color-stone-200: #F2EBEB;
	--color-stone-400: #756E6E;
	--color-plum: #3F2021;
	--color-plum-200: #52292B;
	--color-gold: #E0A529;
	--color-brick: #C4393F;
	--color-scarlet: #EF3F33;

	/* Typography */
	--font-family-base: 'Montserrat', 'Helvetica', 'Arial', sans-serif;
	--font-family-serif: 'Plantin MT Pro', 'Georgia', serif;

	/* Layout */
	--container-max-width: 1328px;
	--container-padding: 24px;
}

body {
	font-family: var(--font-family-base);
	color: var(--color-charcoal);
	background: var(--color-off-white);
}

a {
	transition: color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}

/* Plain in-copy links (wysiwyg body text) get an underline on hover;
   nav/button/card links define their own hover treatment separately. */
p a {
	text-underline-offset: 2px;
}

p a:hover {
	text-decoration: underline;
}

/* External-link icon after in-copy links that open in a new tab (buttons define
   their own icon treatment separately, so they're excluded here). */
@media screen and (max-width:767px){
	p a[target="_blank"]:not(.feature-tab-link)::after, 
	p a[target="_blank"]:not(.button)::after {
		content: "";
		display: inline-block;
		width: 14px;
		height: 14px;
		margin-left: 4px;
		vertical-align: -2px;
		background: url("../img/icon-external-link.svg") no-repeat center / contain;
	}
	.feature-tab-body a[target="_blank"]:not(.button)::after{
		background-image:url("../img/icon-external-link-white.svg");
	}
}

.container {
	width: 100%;
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: 0 var(--container-padding);
}

/* Front-end "edit this section" affordance, added around every ACF block for logged-in
   admins only — see flint_acf_block_render_callback() in functions.php. */
.flint-block-edit-wrap {
	position: relative;
}

.flint-block-edit-icon {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 100px;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.flint-block-edit-icon:hover {
	background: rgba(0, 0, 0, 0.85);
	color: #fff;
}

.flint-block-edit-icon .dashicons {
	width: 18px;
	height: 18px;
	font-size: 18px;
}