/*
 * TorahMates theme — "Jewish Resources" look
 * ------------------------------------------------------------
 * Matches the look of torahmates.org/jewish-resources/ (WordPress
 * "Additional CSS"): backgrounds, text colors, fonts and buttons.
 *
 * Colors, fonts and button styles ONLY. No sizes, margins, padding
 * or positioning are changed here.
 *
 * Loaded from includes/_scripts.php after b_main.css, on every page
 * except /mileage and /junior.
 *
 * TO SWITCH BACK: delete this file. The loader checks that it
 * exists, so nothing else needs to change.
 */

/* Adobe Fonts kit used by the Jewish Resources site
   (proxima-nova, myriad-pro-condensed). Must stay the first rule. */
@import url("https://use.typekit.net/jda8wly.css");

:root {
  --tm-cream: #FBF4E9;      /* page background, text on navy */
  --tm-navy: #0E3355;       /* body text, top nav bar, footer */
  --tm-navy-nav: #083355;   /* main nav bar */
  --tm-blue: #005895;       /* headings */
  --tm-accent: #009ED0;     /* links, blue button, h3/h5 */
  --tm-pale: #BBD7EB;       /* hovers, soft backgrounds */
  --tm-gray: #8E949F;       /* muted text */
  --tm-cta: #FFCB05;        /* yellow call-to-action */
  --tm-cta-border: #EDBD07;

  --tm-font-body: "proxima-nova", "Proxima Nova", "Open Sans", sans-serif;
  --tm-font-condensed: "myriad-pro-condensed", "Roboto Condensed", sans-serif;
  --tm-font-serif: "Taviraj", serif;
}


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

body,
body.about {
  background-color: var(--tm-cream);
  color: var(--tm-navy);
  font-family: var(--tm-font-body);
  letter-spacing: 0.3px;
}

.row.featurette,
.carousel .item,
.panel,
.panel-default .panel-heading {
  background-color: var(--tm-cream);
}

.resources-home-overlay {
  background-color: rgba(251, 244, 233, 0.8);
}

a {
  color: var(--tm-accent);
}
a:hover,
a:focus,
a:active,
.row.featurette .col-md-5.text .lead a:hover {
  color: var(--tm-pale);
}

hr {
  border-top-color: var(--tm-pale);
}

/* inline style="color:#2AA7DF" links (index, oorah, ppc pages) */
[style*="#2AA7DF"],
[style*="#2aa7df"] {
  color: var(--tm-accent) !important;
}


/* ============================================================
   HEADINGS
   ============================================================ */

h1.pageheading,
.pageheading {
  color: var(--tm-blue);
  font-family: var(--tm-font-condensed);
  font-weight: bold;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

h2, .h2 {
  color: var(--tm-blue);
  font-family: var(--tm-font-serif);
}

h2.sectionheading,
h2.prog-descr,
h3.prog-descr {
  color: var(--tm-blue);
  font-family: var(--tm-font-condensed);
}

h3 {
  color: var(--tm-accent);
  font-family: var(--tm-font-condensed);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

h4 {
  color: var(--tm-blue);
  font-family: var(--tm-font-serif);
  font-weight: normal;
}

h5 {
  color: var(--tm-accent);
  font-family: var(--tm-font-condensed);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

h6 {
  color: var(--tm-blue);
  font-family: var(--tm-font-serif);
  font-weight: normal;
}

h2 .blue,
.h2 .blue {
  color: var(--tm-accent);
}


/* ============================================================
   NAV  (same as the Jewish Resources site)
   ============================================================ */

.navbar.tm {
  background: var(--tm-navy-nav);
  border-radius: 0;
}

.tm-upper {
  background-color: var(--tm-navy);
}

/* white TorahMates logo: shown behind the existing <img>, same size */
.navbar-brand.tm {
  background: url("https://www.oorah.org/img/logos/TMwhite.png") no-repeat;
  background-origin: content-box;
  background-size: 110px auto;
}
.navbar-brand.tm img {
  opacity: 0;
}

/* Jewish Resources asks for "Proxima Nova", which its Adobe kit doesn't
   provide (it's "proxima-nova"), so its nav links actually render in
   Arial. Use Arial here so the nav looks identical. */
.navbar-nav.tm li a,
.tm-upper .navbar-nav.tm li a {
  color: var(--tm-cream);
  font-family: Arial, sans-serif;
  letter-spacing: 0.3px;
}

/* slightly larger than Jewish Resources (14px / 12px) for readability */
.navbar-nav.tm li,
.navbar.tm .navbar-nav li a.btn {
  font-size: 15px;
}
.tm-upper .navbar-nav.tm li {
  font-size: 14px;
}

/* Bootstrap's 20px margin under the lower nav row showed as empty navy
   below the logo/links (it was invisible on the old see-through nav).
   Split it 10px above / 10px below so they sit centered; total height
   stays the same so nothing else moves. */
.navbar.tm nav.tm-lower {
  margin-bottom: 0;
  padding-top: 10px;
  padding-bottom: 10px;
}

.navbar-nav.tm > li > a:hover,
.navbar-nav li a:focus {
  color: var(--tm-pale);
}

.icon-bar {
  background-color: var(--tm-cream);
}

@media (max-width: 767px) {
  .navbar-collapse.in {
    background: var(--tm-navy-nav);
  }
}

/* nav "Join TorahMates" — blue */
.navbar.tm .navbar-nav li a.btn-primary {
  font-family: var(--tm-font-body);
  font-weight: bold;
  letter-spacing: 1px;
  background-color: var(--tm-accent);
  border: solid thin var(--tm-accent);
  color: var(--tm-cream);
}
.navbar.tm .navbar-nav li a.btn-primary:hover,
.navbar.tm .navbar-nav li a.btn-primary:active,
.navbar.tm .navbar-nav li a.btn-primary:focus {
  background-color: var(--tm-pale);
  border-color: var(--tm-pale);
  color: var(--tm-blue);
}

/* nav "Log Minutes" — cream */
.navbar.tm .navbar-nav li a.btn-info,
.navbar.tm .navbar-nav li a.btn-info:hover,
.navbar.tm .navbar-nav li a.btn-info:active,
.navbar.tm .navbar-nav li a.btn-info:focus {
  font-family: var(--tm-font-body);
  font-weight: bold;
  letter-spacing: 1px;
  background-color: var(--tm-cream);
  border: solid thin var(--tm-cream);
  color: var(--tm-accent);
}


/* ============================================================
   BUTTONS  (only the 3 designs used on Jewish Resources)
   ============================================================ */

/* 1. Blue — default for .btn-primary */
.btn-primary {
  font-family: var(--tm-font-body);
  letter-spacing: 0.5px;
  background-color: var(--tm-accent);
  border: thin solid var(--tm-accent);
  color: var(--tm-cream);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--tm-pale);
  border: thin solid var(--tm-blue);
  color: var(--tm-blue) !important;
}

/* 2. Cream — .btn-info / outline buttons */
.btn-info,
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
a.btn.btn-enter,
a.btn.btn-enter:hover {
  font-family: var(--tm-font-body);
  letter-spacing: 0.5px;
  background-color: var(--tm-cream) !important;
  border: thin solid var(--tm-cream);
  color: var(--tm-accent) !important;
}

/* 404 page buttons (.joinSign has !important styles in _head.php) */
.row.featurette .btn.joinSign {
  font-family: var(--tm-font-body) !important;
  letter-spacing: 0.5px;
  background-color: var(--tm-accent) !important;
  border: thin solid var(--tm-accent) !important;
  color: var(--tm-cream) !important;
}
.row.featurette .btn.joinSign:hover,
.row.featurette .btn.joinSign:focus,
.row.featurette .btn.joinSign:active {
  background-color: var(--tm-pale) !important;
  border: thin solid var(--tm-blue) !important;
  color: var(--tm-blue) !important;
}

/* 3. Yellow — main calls to action (was orange) */
.btn.join-main,
.btn.join-testimonials,
.row.featurette a.btn-primary[href*="application"],
.row.featurette .btn.joinSign[href*="application"],
.btn-danger,
.btn-warning,
.btn.join-main:hover,
.btn.join-testimonials:hover,
.row.featurette a.btn-primary[href*="application"]:hover,
.row.featurette .btn.joinSign[href*="application"]:hover,
.btn-danger:hover,
.btn-warning:hover,
.btn.join-main:focus,
.btn.join-testimonials:focus,
.row.featurette a.btn-primary[href*="application"]:focus,
.row.featurette .btn.joinSign[href*="application"]:focus,
.btn-danger:focus,
.btn-warning:focus,
.btn.join-main:active,
.btn.join-testimonials:active,
.row.featurette a.btn-primary[href*="application"]:active,
.row.featurette .btn.joinSign[href*="application"]:active,
.btn-danger:active,
.btn-warning:active {
  font-family: var(--tm-font-condensed) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background-color: var(--tm-cta) !important;
  border: thin solid var(--tm-cta-border) !important;
  color: var(--tm-navy) !important;
}


/* ============================================================
   FOOTER
   ============================================================ */

footer.tm {
  background-color: var(--tm-navy);
  color: var(--tm-cream);
  border-top-color: var(--tm-navy);
}
footer.tm a,
footer.tm .social a,
footer.tm .social a.btn {
  color: var(--tm-cream);
  background-color: transparent;
}
footer.tm a:hover {
  color: var(--tm-pale);
}
footer li a {
  font-family: var(--tm-font-body);
}
footer h6 {
  font-family: var(--tm-font-condensed);
  font-style: normal;
  font-weight: bold;
  color: var(--tm-pale);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}


/* ============================================================
   PAGE SECTIONS (b_main.css colors mapped to the new palette)
   orange text/borders -> accent blue, dark blue -> heading blue
   ============================================================ */

/* homepage */
.jumbotron.homebanner h1.sectionheading,
.testimonials-pics h5,
.how-it-works-steps h4,
.how-it-works-steps h5,
.stat,
.ppc-points li,
form h3 {
  color: var(--tm-blue);
}
.jumbotron.homebanner .h2 {
  color: var(--tm-navy);
}
.how-it-works-steps i,
.how-it-works-steps a,
.ppc-points a {
  color: var(--tm-accent);
}
.how-it-works-steps h5,
.fun-fact p,
.topics li,
.ppc-points li,
form h3 {
  font-family: var(--tm-font-condensed);
}

/* testimonials */
.item blockquote p:before {
  color: var(--tm-accent);
}
.testimonials-bottom p:before {
  color: rgba(0, 158, 208, 0.35);
}
#quote-carousel .carousel-indicators .active {
  border-color: var(--tm-blue);
}

/* about: topics + timeline + FAQ */
.topics-img-outer {
  border-color: var(--tm-accent);
}
.topics h4,
.question,
.panel-title > a:before {
  color: var(--tm-accent);
}
h6.panel-title {
  font-family: var(--tm-font-condensed);
}
.cd-timeline-content {
  background: var(--tm-pale);
}
.cd-timeline-content-inner {
  background-color: var(--tm-navy);
}
.cd-timeline-content h4 {
  color: var(--tm-cream);
}
h5.timeline-date {
  color: var(--tm-navy);
}
.cd-timeline-content::before {
  border-right-color: var(--tm-navy);
}
.cd-timeline-content.secondary::before {
  border-right-color: var(--tm-pale);
}
@media (min-width: 1170px) {
  .cd-timeline-content::before {
    border-color: transparent;
    border-left-color: var(--tm-navy);
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content::before {
    border-color: transparent;
    border-right-color: var(--tm-navy);
  }
  .cd-timeline-content.secondary::before {
    border-color: transparent;
    border-left-color: var(--tm-pale);
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content.secondary::before {
    border-color: transparent;
    border-right-color: var(--tm-pale);
  }
}
.cd-timeline-img.cd-picture {
  background: var(--tm-cta);
}

/* staff */
.tmm-team .item .face,
.tmm-team .item:hover .face {
  border-color: var(--tm-accent);
}
.tmm-team .item .title h4 {
  background-color: var(--tm-navy);
  color: var(--tm-cream);
}
.tmm-team .item:hover .title h4 {
  background-color: var(--tm-blue);
}
.tmm-team .item .title h3,
h3.profile-text {
  color: var(--tm-accent);
  font-family: var(--tm-font-condensed);
}

/* books */
.book-search,
h6.thumbtitle {
  color: var(--tm-accent);
}

/* jewish resources (local page) */
a.resources h4 {
  color: var(--tm-blue);
}
a.resources:hover h4,
a.resources:focus h4 {
  color: var(--tm-accent);
}
.resources img {
  border-color: var(--tm-accent);
}

/* retreat */
/* top banner sat behind the old see-through nav; the nav is solid now,
   so start the banner below it (85px = main nav bar height).
   "body" prefix beats the margin-top:0 in the retreat pages' own <style>. */
body .container_retreat {
  margin-top: 85px;
}
.retreat-program h4,
.retreat-testimonials-header {
  color: var(--tm-accent);
}
.retreat-program ul {
  color: var(--tm-blue);
  font-family: var(--tm-font-condensed);
}
.retreat-signature {
  color: var(--tm-accent);
  font-family: var(--tm-font-condensed);
}
.retreat-testimonials {
  border-color: var(--tm-accent);
}

/* app / misc */
.app-features h6 {
  color: var(--tm-accent);
}
.app-features ul li strong {
  color: var(--tm-accent);
}
.portfolio-sorting li {
  border-right-color: var(--tm-accent);
}
ol.torahmateslist li a {
  border-color: var(--tm-accent);
  color: var(--tm-accent);
}