/* =========================================================
   GLOBALS
   ========================================================= */

:root {
  --navy: #063b73;
  --navy-dark: #032c57;
  --blue: #0066b3;

  --red: #c8102e;
  --gold: #f2c94c;

  --white: #ffffff;
  --off-white: #f7f7f5;
  --text: #222222;
  --muted: #666666;
  --border: #dddddd;

  --container-width: 1280px;
}


/* ---------------------------------------------------------
   Reset / Base
   --------------------------------------------------------- */

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

html {
  margin: 0;
  padding: 0;
  font-size: 16px;
}

body {
  margin: 0;
  padding: 0;

  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  background: var(--off-white);

  line-height: 1.6;
}

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

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

a:hover {
  text-decoration: underline;
}

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


/* ---------------------------------------------------------
   Application
   --------------------------------------------------------- */

#app {
  min-height: 100vh;
}


/* ---------------------------------------------------------
   Main
   --------------------------------------------------------- */

.page-body {
  min-height: 60vh;
}


/* ---------------------------------------------------------
   Container
   --------------------------------------------------------- */

.container {
  width: min(
    var(--container-width),
    calc(100% - 2rem)
  );

  margin-inline: auto;
}

@media (max-width: 767px) {
  .mobile-full-height {
    padding-top: 0 !important;
  }
  .mobile-full-width {
    margin: 0;
    padding: 0;
    width: 100% !important;
    max-width: 100%;
  }
}

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

.btn {
	display: inline-block;

	padding: 9px 20px;

	border: 1px solid transparent;
	border-radius: 5px;

	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.4;

	text-decoration: none;

	cursor: pointer;

	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease;
}


/* =========================================================
   PRIMARY
   ========================================================= */

.btn-primary {
	background: #173f68;
	border-color: #173f68;

	color: #f8f4eb !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
	background: #123454;
	border-color: #123454;

	color: #fff !important;
	text-decoration: none;
}


/* =========================================================
   SECONDARY
   ========================================================= */

.btn-secondary {
	background: transparent;
	border-color: #a99d87;

	color: #625b4e !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
	background: #625b4e;
	border-color: #625b4e;

	color: #f8f4eb !important;
	text-decoration: none;
}

/* =========================================================
   OUTLINE PRIMARY
   ========================================================= */

.btn-outline-primary {
	background: transparent;
	border-color: #173f68;

	color: #173f68 !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
	background: #173f68;
	border-color: #173f68;

	color: #f8f4eb !important;
	text-decoration: none;
}


/* =========================================================
   OUTLINE SECONDARY
   ========================================================= */

.btn-outline-secondary {
	background: transparent;
	border-color: #a99d87;

	color: #625b4e !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
	background: #625b4e;
	border-color: #625b4e;

	color: #f8f4eb !important;
	text-decoration: none;
}


/* =========================================================
   DANGER
   ========================================================= */

.btn-danger {
	background: #a63d3d;
	border-color: #a63d3d;

	color: #f8f4eb !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
	background: #8f3333;
	border-color: #8f3333;

	color: #fff !important;
	text-decoration: none;
}


/* =========================================================
   BUTTON SPACING
   ========================================================= */

.btn + .btn {
	margin-left: 8px;
}


/* =========================================================
   EAGLE PAGINATION
   ========================================================= */

.pagination {
	max-width: 850px;

	margin: 28px auto 10px;
	padding-top: 22px;

	display: flex;
	align-items: center;
	justify-content: space-between;

	border-top: 1px solid #d8cbb3;

	gap: 24px;
}


/* =========================================================
   PAGE NUMBERS
   ========================================================= */

.pagination-pages {
	display: flex;
	align-items: center;

	gap: 5px;
}


.pagination-page,
.pagination-arrow {
	min-width: 38px;
	height: 38px;

	padding: 0 10px;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	background: transparent;

	border: 1px solid transparent;
	border-radius: 5px;

	color: #625b4e;

	font-family: Georgia, "Times New Roman", serif;
	font-size: 0.9rem;
	font-weight: 700;

	cursor: pointer;

	transition:
		background 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease,
		transform 0.2s ease;
}


/* ---------------------------------------------------------
   Hover
   --------------------------------------------------------- */

.pagination-page:hover,
.pagination-arrow:hover:not(:disabled) {
	background: #f8f4eb;

	border-color: #cfc3ac;

	color: #173f68;

	transform: translateY(-1px);
}


/* ---------------------------------------------------------
   Active Page
   --------------------------------------------------------- */

.pagination-page.is-active {
	background: #173f68;

	border-color: #173f68;

	color: #f8f4eb;

	box-shadow:
		0 2px 5px rgba(0, 0, 0, 0.12);

	cursor: default;
}


/* ---------------------------------------------------------
   Previous / Next
   --------------------------------------------------------- */

.pagination-arrow {
	font-family: Arial, sans-serif;

	font-size: 1.35rem;
	font-weight: 400;
}

.pagination-arrow:disabled {
	color: #b8ae9d;

	opacity: 0.55;

	cursor: default;
}


/* =========================================================
   RESULTS PER PAGE
   ========================================================= */

.pagination-size {
	display: flex;
	align-items: center;

	gap: 9px;

	color: #625b4e;

	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}


.pagination-size label {
	margin: 0;
}


.pagination-size select {
	min-width: 105px;

	padding: 9px 30px 9px 11px;

	background-color: #f8f4eb;

	border: 1px solid #cfc3ac;
	border-radius: 5px;

	color: #4f4a42;

	font-family: Georgia, "Times New Roman", serif;
	font-size: 0.85rem;

	cursor: pointer;

	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}


.pagination-size select:hover {
	border-color: #a99b83;
}


.pagination-size select:focus {
	outline: none;

	border-color: #173f68;

	box-shadow:
		0 0 0 3px rgba(23, 63, 104, 0.12);
}


.pagination-page.is-special {
	color: #173f68;
	font-size: 1.25rem;
}

.pagination-page.is-special:hover {
	background: #eee3cd;
	border-color: #cfc3ac;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

	.pagination {
		flex-direction: column-reverse;

		align-items: stretch;

		gap: 18px;
	}


	.pagination-pages {
		justify-content: center;
	}


	.pagination-size {
		justify-content: flex-end;
	}

}


@media (max-width: 450px) {

	.pagination-page,
	.pagination-arrow {
		min-width: 34px;
		height: 34px;

		padding: 0 7px;

		font-size: 0.8rem;
	}


	.pagination-pages {
		gap: 2px;
	}

}