/*
 Theme Name:   Lyon Martin
 Theme URI:    https://lyon-martin.org
 Description:  Custom Theme for Lyon Martin (Twenty Twenty One Child)
 Author:       Marlo Longley
 Author URI:   https://codeandcursor.com
 Template:     twentytwentyone
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         responsive-layout, accessibility-ready
 Text Domain:  lyonmartin
*/

:root {
 
  /*custom*/
  --lm--color-purple: #110070;
  --lm--color-maroon: #700027;
  --lm--color-bright-purple: #70005F;
  --lm--color-green: #c3ff2c;
  --lm--color-teal: #007049;
  --lm--color-dark-blue: #003669;
  --lm--color-pink: #A90090;
  --lm--color-brown: #836e5d;

  /*override parent */
  --global--color-primary: #000000;
  --global--color-background: #ffffff;
  --branding--title--text-transform: none;

  --font-headings: 'Playfair Display', serif;
  --font-base: 'Red Hat Text', sans-serif;
  --global--font-primary: var(--font-headings);
  --global--font-secondary: var(--font-base);

  /*Get tribe events calendar in sync with theme for dark mode*/
  --tec-color-text-primary: var(--global--color-primary);
  --tec-color-icon-primary: var(--global--color-primary);
  --tec-color-text-secondary: var(--global--color-primary);
  --tec-color-text-event-title: var(--global--color-primary);
  --tec-color-text-day-of-week-month): var(--global--color-primary);

}

/* Fonts
    ------------------------------------------------------------ */
.primary-navigation .primary-menu-container > ul > .menu-item > a {
  font-family: var(--global--font-primary);
}

.widget-area, .widget-title, .powered-by, .site-info p {
  font-family: var(--global--font-secondary);
}

.underline {
  text-decoration: underline;
}

/* bugfix: must specify font-style for safari bug in reading the the "Playfair" ital font */
/*delete if no longer using Playfair*/
h3, h2, h1, h1.entry-title,
.primary-navigation .primary-menu-container > ul > .menu-item > a, 
input[type=submit],
.schema-faq-question {
  font-style: italic;
}

@media only screen and (max-width: 481px) {
  .sub-menu {
    font-style: italic;
  }
}


/* Header
		------------------------------------------------------------ */

.site-header {
  padding-bottom: 0;
}

/*This class is inserted in our custom site-branding.php template file, used to wrap the mobile-only logo from cusotmizer */
.site-logo-mobile img {
    max-width: var(--branding--logo--max-width);
    max-height: var(--branding--logo--max-height);
    height: auto;
    width: auto;
}

/*Show/hide logo for default/dark theme*/
.site-logo#dark-theme-logo {
  display: none;
}

.is-dark-theme .site-logo#dark-theme-logo {
  display: block;
}

.site-logo#default-logo {
  display: block;
}

.is-dark-theme .site-logo#default-logo {
  display: none;
}

/*Show/hide logo for mobile/desktop*/
@media only screen and (min-width: 482px) {
  .site-header.has-logo:not(.has-title-and-tagline).has-menu .site-logo-mobile,
  .site-logo-mobile#mobile-dark,
  .site-logo-mobile#mobile-default { 
    display: none !important;
  }
  
  .site-header.has-logo:not(.has-title-and-tagline).has-menu .site-logo { 
    display: block;
  }
  .primary-navigation .primary-menu-container > ul > .menu-item > a {
    padding-right: 10px;
  }
}

@media only screen and (max-width: 481px) {
  .site-header.has-logo:not(.has-title-and-tagline).has-menu .site-logo#default-logo,
  .site-header.has-logo:not(.has-title-and-tagline).has-menu .site-logo#dark-theme-logo  { 
    display: none;
  }
  .site-header.has-logo:not(.has-title-and-tagline).has-menu .site-logo-mobile { 
    position: relative;
  }
  .site-header.has-logo:not(.has-title-and-tagline).has-menu .site-logo-mobile img { 
    max-height: 300px;
  }
  .site-header.has-logo:not(.has-title-and-tagline).has-menu .site-branding {
      margin: 0 auto;
  }

  .site-logo-mobile#mobile-dark {
    display: none;
  }

  .is-dark-theme .site-logo-mobile#mobile-dark {
    display: block;
  }

  .site-logo-mobile#mobile-default {
    display: block;
  }

  .is-dark-theme .site-logo-mobile#mobile-default {
    display: none;
  }
}



@media only screen and (min-width: 822px) {
	.site-header {
		padding-top: 20px !important;
	}
}

@media only screen and (min-width: 482px) {
  .primary-navigation {
    margin-left: auto;
  }

  .primary-navigation > div > .menu-wrapper > li > .sub-menu {
    padding-top: 0;
  }
}

.primary-navigation .primary-menu-container > ul > .menu-item > a {
  font-weight: 500;
  font-size: 28px;
  letter-spacing: -1px;
  color: var(--global--color-dark-gray);
}

.primary-navigation .primary-menu-container > ul > .menu-item span.icon-plus,
.primary-navigation .primary-menu-container > ul > .menu-item span.icon-minus {
  color: var(--lm--color-brown);
}

.primary-navigation > div > .menu-wrapper .sub-menu-toggle .icon-plus svg,
.primary-navigation > div > .menu-wrapper .sub-menu-toggle .icon-minus svg {
	margin-top: 6px;
}


/* Toolbar with quick links
		------------------------------------------------------------ */

/*Offset*/
.admin-bar .home-tools {
  top: 46px;
}

@media screen and (min-width: 783px) {
  .admin-bar .home-tools {
    top: 32px;
  }
  @media screen and (min-width: 783px) {
    .admin-bar .home-tools {
      top: 32px;
    }
  }
}

.home-tools {
  background-color: #F9E6F4;
  position: absolute;
  top: 0;
  right: 0;
}

@media only screen and (max-width: 481px) { 
  .home-tools {
    position: relative;
  }
}

.home-tools li a {
  /* Overrides font awesome font for icon from menu */
  font-family: var(--branding--description--font-family);
  padding-left: 10px;
}

ul.header-extra-navigation {
  display: flex;
  justify-content: flex-end;
  padding: 0;
}
ul.header-extra-navigation li {
  align-self: center;
  font-size: 21px;
  list-style: none;
  padding: 0 20px;
}

ul.header-extra-navigation li a {
  color: var(--global--color-dark-gray);
  font-weight: 300;
  text-decoration: none;
}

ul.header-extra-navigation li.lm-donate-button a {
  font-weight: 600;
}

ul.header-extra-navigation li a:hover {
  text-decoration: underline;
}

.primary-navigation > div > .menu-wrapper .sub-menu-toggle {
  justify-content: flex-start;
}

.home .wp-block-spacer {
  visibility: visible;
}

.home .site-main {
  padding-top: 0;
}

@media only screen and (max-width: 481px) {
  .site-header {
    padding-bottom: 15px !important;
  }
  .home-tools {
    padding-top: 20px;
  }
  ul.header-extra-navigation {
    display: block;
    padding: 0;
  }
  ul.header-extra-navigation li {
    padding-left: 5px;
    font-weight: 600;
    font-size: 22px;
    list-style: none;
    width: 100%;
    margin-bottom: 15px
  }
  .home .wp-block-spacer {
    visibility: hidden;
  }
}

h1.entry-title {
  letter-spacing: -4px;
}


@media only screen and (max-width: 481px) { 
  .desktop-only {
    display: none !important;
  }
}

/* Footer
    ------------------------------------------------------------ */
  .legacy-business {
    margin-right: auto;
  }

  .site-info .site-logo, .site-info #ein {
    text-align: center;
  }

  @media only screen and (max-width: 822px) {
    .site-info .site-logo, .site-info #ein {
      text-align: left;
    }
  }

  @media only screen and (max-width: 481px) {
    .legacy-business {
      max-width: 50px;
    }
  }
/* Dark Mode
  ------------------------------------------------------------ */

 /*Override background image which wasn't playing nice in dark mode*/
 .is-dark-theme body.custom-background {
   background-image: none !important;
 } 

.is-dark-theme ul.header-extra-navigation li a {
  color: var(--global--color-primary);
}
.is-dark-theme .home-tools {
  background-color: var(--global--color-background);
  color: var(--global--color-primary);
}

.is-dark-theme .primary-navigation .primary-menu-container > ul > .menu-item > a {
  color: var(--global--color-primary);
}

.is-dark-theme  .header-wrap {
  background-color: var(--global--color-background);
}

/* Twentytwentyone parent theme overrides
    ------------------------------------------------------------ */\

.home .entry-content {
  margin-top: 0 !important;
}

.singular .entry-header {
  border-bottom: 3px solid var(--lm--color-brown);
  padding-bottom: 0px;
}

.powered-by, .site-info p {
  font-size: 14px;
}

.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers:not(.is-grid) > li, 
.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers > li {
  border-bottom: none;
}

.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers {
  border-bottom: none;
  border-top: none;

}

.has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
  background: none;
  color: var(--global--color-dark-gray);
}

.blog .post-thumbnail-inner img {
  max-width: 610px !important;
}


/* Accordion / FAQ Collapse Yoast Overrides
		------------------------------------------------------------ */
.schema-faq-section {
  margin: 15px 0;

}
.schema-faq-question {
  cursor: pointer;
  font-family: var(--global--font-primary);
  /* must specify font-style for safari bug in reading the ital font */
  font-style: italic;
  font-size: 28px;
}

.schema-faq-question:before {
  width: 16px;
  height: 20px;
  display: inline-block;
  content: "+";
  margin-right: 5px;
  vertical-align: top;
}

.schema-faq-question.collapse:before {
  content: "-";
}

.schema-faq-question:hover {
  opacity: 0.8;
}

.schema-faq-answer {
  display: none;
  padding-left: 1em;
  border-left: 1px #000 solid;
}
.schema-faq-answer.default {
  display: block;
}

@media only screen and (min-width: 822px) {
  .healthcare-faq-wrap .schema-faq-answer {
    column-count: 3;
    height: 500px;
  }
}

@media only screen and (min-width: 482px) {
  .healthcare-faq-wrap .schema-faq-answer {
    column-count: 2;
    height: 600px;
  }
}

/*TODO? delete*/
.wp-block-latest-posts__list {
  visibility: hidden;
}

/* Forms
		------------------------------------------------------------ */

.form-download i {
  padding-left: 10px;
}

/* Calendar, mods of the plugin
		------------------------------------------------------------ */

.tribe-events .tribe-events-l-container,
.tribe-common--breakpoint-medium.tribe-events .tribe-events-l-container,
.tribe-common--breakpoint-medium.tribe-common .tribe-common-l-container,
.tribe-common--breakpoint-medium.tribe-common .tribe-common-l-container
{
  padding-top: 0;
}


.home .tribe-events-widget-events-list__header {
  text-align: center;
}

.tribe-events-before-html .calendar-intro {
  padding-bottom: 25px;
}

.home .tribe-events-widget .tribe-events-widget-events-list__view-more {
  padding-top: 15px;
  text-align: center;
}

/* Team Member Block -- custom ACF block in /lyon-martin/template-parts/team-member.php
		------------------------------------------------------------ */

.team-member-block {
  margin-bottom: 30px;
  text-align: center;
}

.entry-content img.bio-image {
  max-width: 250px;
  border-radius: 50%;
}

.wp-block-columns .wp-block-column h4.bio-title {
  margin-bottom: 0;
  margin-top: 5px;
}

.wp-block-columns .wp-block-column p.bio-pronouns {
  font-size: 14px;
}

/* Tranlsate Press overrides
------------------------------------------------------------ */

/*Switcher links in the menu nav*/

/*underline the current lang*/
body.translatepress-en_US ul.header-extra-navigation > li:nth-last-child(2) > a {
  text-decoration-color: var(--global--color-primary);
  text-decoration: underline !important;
}

body.translatepress-es_MX ul.header-extra-navigation > li:last-child > a {
  text-decoration-color: var(--global--color-primary);
  text-decoration: underline !important;
}

/*Smash the last two (language switcher) elements together on non-mobile*/
@media only screen and (min-width: 482px) {
  ul.header-extra-navigation > li:nth-last-child(2) {
    padding-right: 0;
  }

  ul.header-extra-navigation > li:last-child {
    padding-left: 0;
  }

  ul.header-extra-navigation > li.menu-item.trp-language-switcher-container > a {
    padding: 0;
  }

  /*Add the slash between languages*/
  ul.header-extra-navigation > li:last-child::before {
    text-decoration: none;
    content: "\00a0 /\00a0";
    display: inline-block;
  }
}

@media only screen and (max-width: 481px) { 
  ul.header-extra-navigation > li:last-child {
    margin-bottom: 0;
  }
}

ul.header-extra-navigation > li.menu-item.trp-language-switcher-container {
  align-items: center;
  text-transform: lowercase;
}

ul.header-extra-navigation > li.menu-item.trp-language-switcher-container > a {
  font-size: 20px;
  font-family: var(--global--font-secondary)
}

/*the floater widget: not currently in use*/
#trp-floater-ls {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--global--font-size-xs);
  font-size: var(--global--font-size-xs);
  padding: 0.5em;
  max-height: 44px;
  min-width: max-content;
  border: 2px solid currentColor;
  box-shadow: none;
  background: var(--button--color-text);
  color: var(--button--color-background);
  z-index: 9998;
  border-radius: 0;
  bottom: 5px;
  transition: bottom 0.5s;
  left: unset;
  right: 160px;
}

.trp-color-light #trp-floater-ls-current-language a, .trp-color-light #trp-floater-ls-language-list a {
  background: var(--button--color-text);
  color: var(--button--color-background);
  font-weight: 500;
}

/* Timeline Express plugin overrides
------------------------------------------------------------ */
.cd-timeline-img img {
  margin-left: 0 !important;
  margin-top: 0 !important;
  position: static !important;
}

/* Instagram Feeds plugin overrides
------------------------------------------------------------ */
#wdi_feed_0_users {
  display: none;
}

#sb_instagram #sbi_images .sbi_item {
  max-height: none;
}

.sbi_caption_wrap {
  background-color: rgba(255, 255, 255, 0.5);
}