/* =============================================================================
   DESIGN TOKENS
   ============================================================================= */

:root {
	/* Colors */
	--color-bg-primary:    #FFFFFF;
	--color-bg-subtle:     #F6F7F8;
	--color-border-subtle: #E4E6E8;
	--color-border-hover:  #B0B5BA;
	--color-text-primary:  #0A0A0A;
	--color-text-secondary:#4A4E52;
	--color-accent:        #96001B;
	--color-accent-hover:  #7A0016;

	/* Font family
	   Montserrat: 500, 500 italic, 800, 800 italic, 900, 900 italic */
	--font-base: 'Montserrat', system-ui, -apple-system, sans-serif;

	/* Heading sizes */
	--text-h1: 48px;
	--text-h2: 36px;
	--text-h3: 28px;
	--text-h4: 22px;
	--text-h5: 18px;
	--text-h6: 16px;

	/* Body sizes */
	--text-body:       16px;
	--text-body-small: 14px;

	/* Line heights */
	--leading-tight:   1.15;
	--leading-normal:  1.5;
	--leading-relaxed: 1.7;

	/* Font weights */
	--weight-regular: 500;
	--weight-bold:    800;
	--weight-black:   900;
}

/* =============================================================================
   BASE STYLES
   ============================================================================= */

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

body,
h1, h2, h3, h4, h5, h6,
p, ul, ol, figure, blockquote, dl, dd {
	margin: 0;
	padding: 0;
}

ul,
ol {
	list-style: none;
}

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

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

[hidden] { display: none !important; }

body {
	font-family:           var(--font-base);
	font-size:             var(--text-body);
	font-weight:           var(--weight-regular);
	color:                 var(--color-text-primary);
	background-color:      var(--color-bg-primary);
	line-height:           var(--leading-normal);
	font-variant-ligatures: none;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-base);
	font-weight: var(--weight-black);
	line-height: var(--leading-tight);
	color:       var(--color-text-primary);
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }
h5 { font-size: var(--text-h5); }
h6 { font-size: var(--text-h6); }

p {
    margin-top: 0;
    margin-bottom: 15px;
}

p:last-of-type {
    margin-bottom: 0;
}



/* =============================================================================
   LAYOUT
   ============================================================================= */

.layout-section {
	width: 100%;
	padding-left: 25px;
	padding-right: 25px;
}

.layout-section__inner {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
}

a {
	color:           var(--color-accent);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

/* =============================================================================
   BREADCRUMBS -- shared component, rendered by fss_breadcrumbs()
   ============================================================================= */

.fss-breadcrumbs {
	padding-top:    40px;
	padding-bottom: 0;
}

.fss-breadcrumbs__list {
	display:     flex;
	align-items: center;
	flex-wrap:   wrap;
	gap:         6px;
}

.fss-breadcrumbs__item {
	display:     flex;
	align-items: center;
	gap:         6px;
	font-size:   var(--text-body-small);
	color:       var(--color-text-secondary);
}

/* Chevron separator before every item except the first */
.fss-breadcrumbs__item + .fss-breadcrumbs__item::before {
	content:     '›';
	color:       var(--color-text-secondary);
	flex-shrink: 0;
}

.fss-breadcrumbs__link {
	color:      var(--color-text-secondary);
	transition: color 150ms ease;
}

.fss-breadcrumbs__link:hover {
	color:           var(--color-accent);
	text-decoration: none;
}

.fss-breadcrumbs__item--current {
	font-weight: var(--weight-bold);
}

/* =============================================================================
   EYEBROW
   ============================================================================= */

.eyebrow {
	font-size:      14px;
	font-weight:    var(--weight-bold);
	letter-spacing: 2.5px;
	line-height:    1;
	text-transform: uppercase;
	color:          var(--color-accent);
	margin-bottom: 5px;
}

/* =============================================================================
   BUTTONS
   ============================================================================= */

.button--solid,
.button--outline {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	font-family:     var(--font-base);
	font-size:       15px;
	font-weight:     var(--weight-bold);
	line-height:     var(--leading-tight);
	border:          2px solid;
	padding:         10px 24px;
	min-width:       225px;
	text-align:      center;
	text-decoration: none;
	white-space:     nowrap;
	border-radius:   5px;
	cursor:          pointer;
	transition:      transform 250ms ease, box-shadow 250ms ease;
}

.button--solid:hover,
.button--outline:hover {
	text-decoration: none;
	transform:       translateY(-1px);
	box-shadow:      0 4px 8px rgba(0, 0, 0, 0.10);
}

.button--solid:active,
.button--outline:active,
.button--icon:active {
	transform:  translateY(0);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

.button--solid:focus-visible,
.button--outline:focus-visible,
.button--icon:focus-visible {
	outline:        3px solid currentColor;
	outline-offset: 3px;
}

/* -- Burgundy --------------------------------------------------------------- */

.button--burgundy {
	border-color: var(--color-accent);
	color:        var(--color-accent);
}

.button--solid.button--burgundy {
	background-color: var(--color-accent);
	border-color:     var(--color-accent);
	color:            #ffffff;
}