/* IFACCA – base styles */

/* ---- CSS custom properties ---- */
:root {
  --color-red: #a61e22;
  --color-red-dark: #7a1519;
  --color-blue: #314d5a;
  --radius-pill: 17px;
}

/* ---- Fonts ---- */
@font-face {
  font-family: "gotham-bold";
  src: url(../fonts/gotham-bold.eot);
  src: url(../fonts/gotham-bold.svg);
  src: url(../fonts/gotham-bold.ttf);
  src: url(../fonts/gotham-bold.woff);
}

@font-face {
  font-family: "gotham-medium";
  src: url(../fonts/gotham-medium.eot);
  src: url(../fonts/gotham-medium.svg);
  src: url(../fonts/gotham-medium.ttf);
  src: url(../fonts/gotham-medium.woff);
}
@font-face {
  font-family: "gotham-book";
  src: url(../fonts/gotham-book.eot);
  src: url(../fonts/gotham-book.svg);
  src: url(../fonts/gotham-book.ttf);
  src: url(../fonts/gotham-book.woff);
}

/* ---- Body / typography defaults ---- */
body {
  font-family: "gotham-book", arial, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > * {
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
}
body > main {
  flex: 1;
}
body > footer {
  max-width: 100%;
  margin: 0;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
a {
  color: #808080;
}
a:hover,
a:focus {
  color: var(--color-red);
}
a:focus {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
.h1,
.h2,
.h3,
h1,
h2,
h3 {
  margin-top: 15px;
  font-family: "gotham-bold";
  color: var(--color-red);
}
.h1,
h1 {
  font-size: 48px;
}
figure figcaption {
  padding: 13px 0px 13px 17px;
  font-size: 10px;
  color: #fff;
  margin: 0px;
}
figure .img-responsive {
  width: 100%;
  margin: 0 auto;
}

/* ---- Utility classes ---- */
.clear {
  clear: both;
}
.hidden {
  display: none;
}
.inherit,
.inherit:hover {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  background-color: inherit;
  text-decoration: inherit;
  text-transform: inherit;
}
.d-block {
  display: block;
}
.d-block {
  color: #000000;
}
.fill-fullwidth {
  position: absolute;
  left: 0;
  right: 0;
}
.bg-red {
  background-color: var(--color-red) !important;
  color: #fff;
}
.bg-blue {
  background-color: var(--color-blue) !important;
  color: #fff;
}
.bg-red:hover,
.bg-blue:hover {
  color: #fff;
}
.medium-line {
  width: 100%;
  height: 5px;
  margin: 0;
  padding: 0;
}
.thin-line {
  width: 100%;
  height: 2px;
  margin: 0;
  padding: 0;
}
.make-bold {
  font-family: "gotham-medium";
}
.red {
  color: var(--color-red);
}
.blue {
  color: var(--color-blue);
}
.right {
  float: right;
}
.no-padding {
  padding: 0 !important;
}
.heading-accent {
  font-family: "gotham-bold";
  color: var(--color-red);
  margin-top: 24px;
}

/* ---- Bootstrap overrides ---- */
.container-fluid {
  padding-left: 10px;
  padding-right: 10px;
}
.row {
  margin-left: -10px;
  margin-right: -10px;
}
.navbar-collapse {
  padding-left: 0;
  padding-right: 0;
}

/* ---- Richtext / content area shared styles ---- */
/* Both .content (StreamField blocks) and .rich-text (|richtext filter output) */
.content h2,
.rich-text h2 {
  font-size: 28px;
  margin-top: 24px;
  margin-bottom: 10px;
}
.content h3,
.rich-text h3 {
  font-size: 22px;
  margin-top: 20px;
  margin-bottom: 8px;
}
.content h4,
.rich-text h4 {
  font-size: 16px;
  margin-top: 12px;
  margin-bottom: 6px;
}
.content p,
.rich-text p {
  margin-bottom: 10px;
}
.content a,
.rich-text a {
  color: var(--color-red);
  text-decoration: underline;
}
.content a:hover,
.rich-text a:hover {
  color: var(--color-red-dark);
}
.content a.basic-button,
.content a.basic-button:hover,
.content a.inherit,
.content a.inherit:hover {
  text-decoration: none;
  color: inherit;
}
.content blockquote,
.rich-text blockquote {
  border-left: 4px solid var(--color-red);
  padding: 8px 16px;
  margin: 16px 0;
  color: #555;
  font-style: italic;
}
.content table,
.rich-text table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
  font-size: 14px;
}
.content table td,
.rich-text table td {
  vertical-align: top;
  word-wrap: break-word;
  padding: 8px 12px;
  border-bottom: 1px solid #ddd;
}
.content table th,
.rich-text table th {
  background: var(--color-blue);
  color: #fff;
  padding: 8px 12px;
  text-align: left;
  font-family: "gotham-bold";
}
.content table thead ~ tbody td,
.rich-text table thead ~ tbody td,
.content table th ~ td,
.rich-text table th ~ td {
  padding: 8px 12px;
  border-bottom: 1px solid #ddd;
}
.content table tr:nth-child(even),
.rich-text table tr:nth-child(even) {
  background: #f9f9f9;
}
.content img,
.rich-text img {
  max-width: 100%;
  height: auto;
  margin-bottom: 10px;
}
.content ul,
.rich-text ul {
  list-style: disc;
  padding: 0 0 0 40px;
  margin: 0 0 0 10px;
}
.content ol,
.rich-text ol {
  list-style: decimal;
  padding: 0 0 0 40px;
  margin: 0 0 0 10px;
}
.content li,
.rich-text li {
  margin-bottom: 6px;
}
.rich-text a {
  color: var(--color-red);
  text-decoration: underline;
}
.rich-text a:hover {
  color: var(--color-red-dark);
}

/* Consistent form controls — make selects match text inputs */
select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23555'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}