/*
 * Celeb Bet brand colors, from celeb-bet-logo.png
 * Loaded after skeleton.css / celeb.bet.css to recolor them.
 *
 * Contrast (WCAG): plum on pink 4.6:1, white on plum 14.7:1,
 * link pink on white 5.4:1, plum text on page tint 13.8:1
 */
:root {
   --cb-pink: #ff4f66;       /* logo, left half of the heart */
   --cb-plum: #33213e;       /* logo, right half + wordmark */
   --cb-link: #c92a45;       /* darker pink, readable as text */
   --cb-muted: #8a7d91;      /* plum-grey for de-emphasized text */
   --cb-tint: #fbf6f8;       /* page background */
   --cb-border: #ead9e1;     /* soft pink-grey borders */
}

body {
   color: var(--cb-plum);
   background-color: var(--cb-tint);
}

h1, h2, h3, h4, h5, h6 {
   color: var(--cb-plum);
}

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

/* buttons */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
   color: var(--cb-plum);
   border-color: var(--cb-border);
}
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
   color: var(--cb-plum);
   border-color: var(--cb-plum);
}
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
   color: var(--cb-plum);
   background-color: var(--cb-pink);
   border-color: var(--cb-pink);
}
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
   color: #fff;
   background-color: var(--cb-plum);
   border-color: var(--cb-plum);
}

/* form fields */
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
   border-color: var(--cb-pink);
}

/* tables, rules */
th, td {
   border-bottom-color: var(--cb-border);
}
hr {
   border-top-color: var(--cb-border);
}

/* the nav list sits on the page background, not a white strip */
.nav-bar ul {
   background-color: var(--cb-tint) !important;
}

/* phone/tablet dropdown nav: open below the logo (20px padding + ~85px
   image) instead of over it, and set it apart from the page content */
@media (max-width: 1030px) {
   .nav-bar ul {
      top: 108px;
      border-top: 1px solid var(--cb-border);
      border-bottom: 1px solid var(--cb-border);
      box-shadow: 0 6px 12px rgba(51, 33, 62, 0.08);
   }
}

/* links inside tables (home couple list, my games): plum names, pink on
   hover; the bet/play icons stay pink as the call to action. Inactive
   couples carry an inline muted color and keep it, icons included. */
td a {
   color: var(--cb-plum);
   text-decoration: none;
}
td a:hover {
   color: var(--cb-link);
   text-decoration: underline;
}
td a:not([style]) i {
   color: var(--cb-link);
}
td a:not([style]):hover i {
   color: var(--cb-plum);
}

/* an <h1> that keeps Skeleton's h4 look (couple name, Play!) */
h1.h4-size { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
@media (min-width: 550px) {
   h1.h4-size { font-size: 3.0rem; }
}

/* couple page story: section heads sit below the h1, above the 30px stats heads */
.couple-story h2 { font-size: 2.2rem; line-height: 1.3; letter-spacing: -.05rem; margin: 2.5rem 0 1rem; }
.couple-story ul { margin-left: 1.5rem; }
.couple-story li { margin-bottom: .6rem; }
.couple-story .as-of { color: var(--cb-muted); font-size: 1.3rem; }
@media (min-width: 550px) {
   .couple-story h2 { font-size: 2.6rem; }
}

/* leaderboard: couples in their 14-day post-breakup grace period */
.ended-badge {
   display: inline-block;
   margin-left: .6rem;
   padding: .1rem .7rem;
   border-radius: 1rem;
   background: var(--cb-plum);
   color: #fff;
   font-size: 1.1rem;
   font-weight: 600;
   letter-spacing: .05rem;
   text-transform: uppercase;
   vertical-align: middle;
}