/**
 * @file
 * Theme-wide CSS custom properties (variables) and color palette for Alaska Bahá'í.
 */

:root {
  /* Brand colors */
  --color-primary: #424874;
  --color-primary-light: #f4eeff;
  --color-primary-lighter: #dcd6f7;
  --color-accent: #d7b221;
  --color-text: #424874;
  --color-text-dark: #333333;
  --color-text-muted: #555555;
  --color-text-meta: #91969e;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-border: #adadad;
  --color-border-light: #efefef;
  --color-nav-active: #E8E2F2;

  /* Typography */
  --font-body: Arial, sans-serif;
  --font-quote: 'Charm', Arial, sans-serif;

  /* Layout */
  --max-width: 960px;
}

/* Base body */
body {
  background-color: var(--color-white);
  background-image: url(/sites/default/files/background.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: 0 -40px;
}

.dialog-off-canvas-main-canvas {
  background-color: var(--color-primary-light);
  padding: 1rem;
}

/* Links */
a {
  color: var(--color-primary);
}

/* Field body colors */
.field--name-field-body {
  background-color: var(--color-primary-lighter);
  color: var(--color-text);
  line-height: 1.5;
  font-size: 1.2rem;
  padding: .8em;
  border-radius: 1rem;
}


.field--name-body a,
.field--name-body a:hover,
.field--name-body a:active,
.field--name-body a:focus,
.field--name-body a:visited {
  color: var(--color-text);
  text-decoration: underline;
}

/* What we do field */
.field--name-field-what-we-do {
  color: var(--color-primary);
  text-align: center;
  margin-top: .5em;
}

/* Subtitle field */
.field--name-field-subtitle a {
  color: #423874;
  text-decoration: none;
}

.field--name-field-subtitle,
.path-frontpage .field--name-body h1 {
  text-align: center;
}

/* Active menu item */
ul.menu a.is-active {
  background-color: var(--color-nav-active);
}

/* Superfish nav colors */
.main-nav {
  background-color: var(--color-primary-light);
}

#superfish-main li a {
  color: var(--color-black);
}

ul.sf-menu a,
ul.sf-menu span.nolink {
  padding: .5em 1em;
  text-decoration: none;
  color: var(--color-black);
}

.sf-depth-2 {
  margin-left: 2rem;
}

#superfish-main-toggle span {
  color: var(--color-black);
}

ul.sf-menu .sf-sub-indicator {
  right: .1em !important;
}

ul.sf-menu.sf-horizontal.sf-shadow ul {
  background-color: var(--color-white);
}

ul.menu.sf-menu .menuparent ul {
  margin-left: 1rem;
  border-left: thin solid var(--color-border-light);
}

/* Blockquote colors */
blockquote > p {
  font-family: var(--font-quote);
  font-style: normal;
  font-weight: normal;
  color: var(--color-primary);
}

.field--name-field-intro-paragraph blockquote .author,
.field--name-field-intro-paragraph blockquote .author a,
.blockquote-reference {
  font-style: italic;
  font-size: 1em;
  color: var(--color-accent);
}

blockquote .author a:hover,
blockquote .author a:active,
blockquote .author a:focus,
blockquote .author a:visited,
blockquote .author {
  color: var(--color-accent);
}

/* Site name link colors */
.site-name a:hover,
.site-name a:active,
.site-name a:focus,
.site-name a:visited {
  color: var(--color-black);
}

.header .site-name a {
  font-style: normal;
  text-decoration: none;
  color: var(--color-black);
}

/* Edit tab indicator for logged-in users */
.block-local-tasks-block {
  background-color: red;
}

/* Copyright */
.block-copyright-footer {
  color: var(--color-text-meta);
}


.field--name-field-body.is-collapsed {
  max-height: 120px;
  overflow: hidden;
  background: linear-gradient(to bottom,  var(--color-primary-lighter),transparent);
}



.read-more-toggle {
  display: block;
  margin-top: 0.5em;
  cursor: pointer;
  color: var(--color-link, #0066cc);
  background: none;
  border: none;
  padding: .5rem;
  font: inherit;
  text-decoration: underline;
  font-size: 1.2rem;
  text-align: center;
}