/*
Theme Name: Thorn 2.0
Theme URI: http: //mysite.com/
Description: This is a custom child theme for Salient
Author: My Name
Author URI: http: //mysite.com/
Template: salient
Version: 0.2
*/

/* ******************************* */
/*     A11Y UPDATES - AUG 2022     */
/* ******************************* */

:root {
  --brand-color-coral: #f87b5e;
  --brand-color-indigo: #221a45;
  --brand-color-mint: #66deca;
  --brand-color-purple: #7e47ff;
  --brand-color-darkgray: #676767;
  --brand-color-mediumgray: #99999d;
  --brand-color-lightgray: #ededf0;

  /* Indicator colors configured with vars so they can be adjusted */
  /* with container/section classes. */
  --focus-indicator-color-outer: #66deca;
  --focus-indicator-color-inner: #ffffff;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ------- FOCUS INDICATOR ------- */

/* Re-enable the focus indicator */
button:focus,
a[href]:focus {
  outline: 2px solid var(--focus-indicator-color-outer, #66deca);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--focus-indicator-color-inner, #ffffff);
}

/* Re-disable the focus indicator for browsers that support focus-visible. */
button:focus:not(:focus-visible),
a[href]:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* Nonsense :not selector for elevated specificity */
button:focus-visible:not(#null),
a[href]:focus-visible:not(#null) {
  /* Fallback for Windows High-Contrast mode. */
  outline: 2px solid transparent;
  outline-offset: 1px;

  /* Two-color indicator */
  box-shadow: 0 0 0 2px var(--focus-indicator-color-inner, #ffffff),
    0 0 0 5px var(--focus-indicator-color-outer, #66deca);
}

/* Spot fix for Nectar buttons having unreadable text */
/* Nectar buttons override interaction colors using a js interaction, but */
.nectar-button[data-hover-text-color-override="#ffffff"]:focus-visible {
  color: #ffffff !important;
}

/* ------- CONTINUITY STYLING ------- */

/* 
 * To allow for the flexible styling of logically-ordered headings,
 * a good number of theme styles that were flagged as !important
 * had to have that flag removed. 
 *
 * Any styling which changed due to its reliance on those !important-
 * flagged properties will have its previous styling restored here.
 *
 */

/* Blog Preview Title */
body .masonry.classic_enhanced .masonry-blog-item h3.title {
  font-size: 22px;
}

/* ******************************* */
/*         UTILITY CLASSES         */
/* ******************************* */

/*
 * Use these to avoid over-specified single-use classes in page layouts. Please!!!!    
 *
 * Seriously, if I have to go hunt down and correct another misused high-specificity
 * selector whose properties are all !important tagged, I'm actually going to lose it.  
 */

/* ------- TYPOGRAPHY ------- */

/* Alignment */
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}

/* Color */
.text-current {
  color: currentColor;
}
.text-black {
  color: #000000;
}
.text-white {
  color: #ffffff;
}
.text-darkgray {
  color: var(--brand-color-darkgray);
}
.text-mediumgray {
  color: var(--brand-color-mediumgray);
}
.text-lightgray {
  color: var(--brand-color-lightgray);
}
.text-coral {
  color: var(--brand-color-coral);
}
.text-indigo {
  color: var(--brand-color-indigo);
}
.text-mint {
  color: var(--brand-color-mint);
}
.text-purple {
  color: var(--brand-color-purple);
}

/* Font Style */
.italic {
  font-style: italic;
}
.not-italic {
  font-style: normal;
}

/* Font Weight */
.font-thin {
  font-weight: 100;
}
.font-extralight {
  font-weight: 200;
}
.font-light {
  font-weight: 300;
}
.font-normal {
  font-weight: 400;
}
.font-medium {
  font-weight: 500;
}
.font-semibold {
  font-weight: 600;
}
.font-bold {
  font-weight: 700;
}
.font-extrabold {
  font-weight: 800;
}
.font-heavy {
  font-weight: 900;
}

/* Tracking */
.tracking-tighter {
  letter-spacing: -0.05em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-normal {
  letter-spacing: 0em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}

/* Text Transform */
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.capitalize {
  text-transform: capitalize;
}
.normal-case {
  text-transform: none;
}

/* Reusable Styles */
.heading-small {
  font-size: 1rem;
  letter-spacing: 0.07em;
  font-weight: 500;
  text-transform: uppercase;
}

.heading-section {
  font-size: 38px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-weight: 400;
}

@media only screen and (min-width: 691px) {
  .heading-section {
    font-size: 50px;
    line-height: 1.1;
    letter-spacing: -0.01em;
    font-weight: 400;
  }
}