/* The styles are structured in a way that is easy to read and maintain. 
    Below is the structure of the styles in the CSS file. 
    This allows us to easily find the styles we are looking for and 
    add new styles to the respective sections. */
/* Font Imports and Declarations */
/* Root Variables */
/* General Body Styles */
/* Header Styles */
/* Button Styles */
/* Social Button Styles */
/* Miscellaneous Styles */
/* Footer Styles */

/* Font Imports and Declarations */
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700");

/* Root Variables */
:root {
  --primary-color: #2B5B6C;
  --secondary-color: #CC3D46;
  --tertiary-color: #FFFFFF;
  --headline-font: 'Varisse Sans', 'Open Sans', sans-serif;
  --body-copy-font: 'Varisse Sans', 'Open Sans', sans-serif;
  --button-corner: 0px;

  /* CVA Brand Palette */
  --cva-blue: #2B5B6C;
  --cva-blue-darker: #194757;
  --cva-tan: #EFE4CE;
  --cva-red: #CC3D46;
  --cva-red-darker: #A1252D;
  --cva-gray: #373A36;
}

/* General Body Styles */
html body {
  font-family: 'Varisse Sans', "Open Sans", Helvetica, Roboto, Arial, sans-serif !important;
  color: #194757 !important;
  padding-top: 105px;
}

html body div.secondary-priority,
html body h4,
html body h5,
html body h6,
html body div.top-priority,
html body h1,
html body h2,
html body h3,
html body legend {
  font-family: 'Varisse Sans', "Open Sans", sans-serif !important;
}

html body .container-petitions h1,
html body .survey-title h1 {
  color: #fff !important;
}

html body h3 a,
html body h4 a {
  color: var(--cva-blue) !important;
}

a {
  transition: all 0.3s ease-in-out;
}

html body p.fields-descriptor,
html body .volunteer-stats,
html body #survey-petition-filter li a {
  color: #94a3aa !important;
}

/* Header Styles */
.nav-filter li.active a {
  border-bottom-color: var(--cva-gray);
}

.navbar-fixed-top,
.navbar-default .navbar-collapse {
  background-color: var(--cva-tan);
}

html body .navbar-default .navbar-nav>li>a {
  font-family: 'Varisse Sans', "Open Sans", Helvetica, Roboto, Arial, sans-serif !important;
  font-size: 16px !important;
  margin-top: 5px;
  margin-bottom: 5px;
  color: var(--cva-blue) !important;
  font-weight: 600;
}

html body .footer-container a.logo-img,
html body .navbar-fixed-top .navbar-header a,
html body .navbar-default .navbar-nav>li>a:hover {
  color: var(--cva-red) !important;
  text-decoration: underline;
}

html body .navbar-header button.navbar-toggle {
  margin-top: 18px;
  margin-bottom: 18px;
}

html body .navbar-header button.navbar-toggle:hover,
html body .navbar-header button.navbar-toggle:active,
html body .navbar-header button.navbar-toggle:focus {
  background-color: var(--cva-blue) !important;
  border-radius: 0 !important;
}

html body .navbar-header button.navbar-toggle .icon-bar {
  background-color: var(--cva-blue) !important;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2843, 91, 108, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

#navbarMainMenu {
  background-color: var(--cva-tan);
}

header {
  background-color: var(--cva-tan);
  border-color: var(--cva-tan);
  height: 70px;
}

header .container {
  height: 100%;
  padding-top: 5px;
}

header .logo-toggle #logo img {
  height: 55px;
}

header .logo-toggle button.navbar-toggle {
  border-color: var(--cva-blue);
}

nav ul li a {
  font-family: 'Varisse Sans', "Open Sans", sans-serif;
  font-size: 22px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--cva-blue);
}

header .logo-toggle .navbar-toggle .icon-bar {
  background-color: var(--cva-blue);
}

/* Button Styles */
html body .btn:not(.btn-pill),
html body .btn-default,
html body .btn-primary {
  background-color: var(--secondary-color);
  font-family: 'Varisse Sans', "Open Sans", Helvetica, Roboto, Arial, sans-serif;
  font-size: 16px;
  border: 0 solid #9aa4af;
  color: #fff;
  transition: background-color 0.3s ease-out;
  letter-spacing: 2.5px;
  font-weight: bold;
  border: none !important;
}

html body .btn:hover,
html body .btn:focus,
html body .btn:active,
html body .btn-default:hover,
html body .btn-default:focus,
html body .btn-default:active,
html body .btn-primary:hover,
html body .btn-primary:focus,
html body .btn-primary:active {
  outline: none;
  color: #fff !important;
  background-color: var(--cva-red-darker) !important;
  box-shadow: none !important;
  border: none !important;
}

/* Social Button Styles */
html body .btn[data-share-type="FacebookPost"],
html body .btn[data-share-type="Tweet"] {
  font-size: 12px !important;
}

html body .btn[data-share-type="FacebookPost"].fb-btn-unlinked:hover,
html body .btn[data-share-type="FacebookPost"].fb-btn-linked {
  background-color: transparent !important;
  border: 1px solid #3b5998 !important;
  color: #3b5998 !important;
  opacity: 1;
}

html body .btn[data-share-type="FacebookPost"].fb-btn-unlinked {
  background-color: #3b5998 !important;
  border: 1px solid #3b5998 !important;
  color: #fff !important;
}

html body .btn[data-share-type="Tweet"].tw-btn-unlinked {
  background-color: #4099ff !important;
  border: 1px solid #4099ff !important;
  color: #fff !important;
}

html body .btn[data-share-type="Tweet"].tw-btn-unlinked:hover,
html body .btn[data-share-type="Tweet"].tw-btn-linked {
  background-color: transparent !important;
  border: 1px solid #4099ff !important;
  color: #4099ff !important;
  opacity: 1;
}

/* Miscellaneous Styles */
html body .thumbnail .caption .image-tag>span {
  background-color: var(--cva-gray) !important;
  color: #fff !important;
  font-family: 'Varisse Sans', "Open Sans", Helvetica, Roboto, Arial, sans-serif !important;
}

html body .thumbnail .caption .task-type {
  color: #94a3aa !important;
}

.volunteer-stats strong {
  color: var(--cva-gray);
}

html body .volunteer-name {
  font-family: 'Varisse Sans', "Open Sans", Helvetica, Roboto, Arial, sans-serif !important;
}

html body .volunteer-panel {
  color: var(--cva-blue) !important;
}

/* Footer Styles */
footer {
  text-transform: uppercase;
  color: #fff;
  padding: 36px 0px !important;
  font-size: 13.5px;
  font-weight: 500 !important;
  letter-spacing: 0.675px;
  opacity: 1;
}

footer .text-center {
  text-align: center;
}

footer p {
  display: none;
}

footer div p {
  display: block;
  padding-bottom: 13.5px;
}

footer a {
  transition: .2s ease;
  border-bottom-width: 1px;
  border-color: transparent;
  color: #9aa4af !important;
  white-space: nowrap;
}

footer a:hover {
  border-color: #9aa4af !important;
}

footer img {
  height: auto;
  max-width: 216px;
}

footer .brand {
  width: 216px;
  margin: 9px 0 27px;
}

footer .max-w-md {
  max-width: 720px;
}

footer .mx-auto {
  margin: auto;
}

footer #menu-footer-menu {
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  list-style: none;
  margin-left: auto;
  margin-right: auto;
  max-width: 30rem;
  padding: 0;
}

footer #menu-footer-menu li {
  padding: 18px;
}

footer .disclaimer {
  padding: 18px 18px 0;
  border: 1px solid #fff;
  max-width: 720px;
  margin: auto;
}

html body footer>p {
  display: none;
}

html body footer {
  background-color: var(--cva-tan);
  padding: 0;
}

html body footer .blue-bar>div {
  text-align: left;
  background-color: var(--cva-blue-darker) !important;
  color: #fff !important;
}

html body footer .blue-bar>div p {
  padding-top: 16px;
  margin-bottom: 20px;
  font-size: 11px;
}

html body footer .primary-items>.row {
  text-align: left;
}

html body footer .footer-title {
  font-size: 14.4px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--cva-blue) !important;
}

html body footer .primary-items {
  padding: 30px 20px 56px 20px;
  background-color: var(--cva-tan);
}

html body footer .primary-items .align-center {
  text-align: center;
}

html body footer .primary-items .inline-list {
  list-style: none;
  display: inline-block;
}

html body footer .primary-items .star-container {
  width: 15px;
  height: 15px;
  display: inline-block;
}

html body footer .primary-items .star-container svg {
  fill: var(--cva-blue) !important;
}

html body footer .primary-items h6,
html body footer .primary-items h6 a {
  text-transform: uppercase;
  color: var(--cva-blue) !important;
  font-size: 21px;
  font-weight: 600;
}

html body footer .primary-items h6 span,
html body footer .primary-items h6 a span {
  margin: 0 20px;
  display: inline-block;
}

html body footer .primary-items a:hover,
html body footer .primary-items a:active,
html body footer .primary-items a:focus,
html body footer .primary-items a>h6:hover,
html body footer .primary-items a>h6:active,
html body footer .primary-items a>h6:focus {
  text-decoration: none;
  color: var(--cva-red) !important;
}

html body footer .primary-items .footer-content-item a {
  font-size: 14px;
  line-height: 19.6px;
  text-transform: uppercase;
  color: var(--cva-blue) !important;
}

html body footer .primary-items .footer-content-item a:hover,
html body footer .primary-items .footer-content-item a:focus,
html body footer .primary-items .footer-content-item a:active {
  color: var(--cva-red) !important;
}

html body footer .primary-items .footer-info-region {
  font-size: 13px;
  margin-top: 15px;
  color: var(--cva-gray) !important;
}

html body footer .primary-items .footer-info-region .info-link {
  color: var(--cva-red) !important;
  text-transform: uppercase;
}

html body footer .primary-items .menu-item {
  display: inline-block;
}

html body footer .primary-items .menu-item h6 {
  font-size: 18px;
}

html body footer .primary-items .menu-item h6:after {
  content: "/";
  position: relative;
  margin: 0 7px;
}

html body footer .primary-items .menu-item:last-child h6:after {
  content: "";
}

html body footer .primary-items .social-link {
  border-radius: 13px;
  border: 2px solid var(--cva-blue) !important;
  display: inline-block;
  width: 26px;
  height: 26px;
  position: relative;
}

html body footer .primary-items .social-link a {
  color: var(--cva-blue) !important;
  font-size: 16px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

html body footer .primary-items .social-link a.fa-facebook {
  font-size: 18px;
  top: 12px;
}

html body footer .primary-items a.btn-red-blue,
html body footer .primary-items a.btn-ghost {
  background-color: var(--cva-tan) !important;
  color: var(--cva-blue) !important;
  border: 3px solid var(--cva-blue) !important;
  padding: 10px;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  display: inline-block;
  margin-top: 10px;
}

html body footer .primary-items a.btn-red-blue {
  border-color: var(--cva-red) !important;
  color: var(--cva-red) !important;
}

html body footer .primary-items a.btn-red-blue:hover,
html body footer .primary-items a.btn-red-blue:active,
html body footer .primary-items a.btn-red-blue:focus,
html body footer .primary-items a.btn-ghost:hover,
html body footer .primary-items a.btn-ghost:active,
html body footer .primary-items a.btn-ghost:focus {
  border-color: var(--cva-blue) !important;
  color: var(--cva-blue) !important;
}

@media (max-width: 480px) {
  nav.navbar {
    height: auto;
  }
}

@media (max-width: 767px) {
  header .logo-toggle #logo img {
    padding-left: 20px;
  }

  header nav {
    background-color: var(--cva-tan);
  }

  header nav ul {
    border-top: solid 1px var(--cva-blue);
  }
}

@media (max-width: 992px) {
  html body footer .logo-img {
    display: none !important;
  }

  html body footer .primary-items>.row {
    text-align: center;
  }
}

/* Hide 'Attend Events' tab and section */
#actions-section-nav > div > a[href="#actiontab_2562-section"] {
  display: none;
}

#actiontab_2562-section {
  display: none;
}

/* Navbar overrides */
nav.navbar {
  background-color: var(--cva-tan);
}

#navbarMainMenu {
  background-color: var(--cva-tan);
}

nav ul li a:hover {
  color: var(--secondary-color);
  text-decoration: underline;
}

.section-navigation .icon {
  background: var(--primary-color) !important;
}

.card-section .badge {
  background-color: var(--primary-color) !important;
}

.variant-b {
  background-color: var(--primary-color) !important;
}

.form-section form {
  background-color: var(--primary-color) !important;
}

a#read-more-link {
  color: var(--cva-blue);
}

.event-container a, .read-disclaimer a {
  color: var(--cva-blue);
}

#registration-form input[type="checkbox"] {
  accent-color: var(--cva-blue);
}

/* ── Footer 3-column layout ── */
.footer-top-section {
  padding: 48px 0 40px;
  border-bottom: 1px solid rgba(43, 91, 108, 0.2);
  margin-bottom: 32px;
}

.footer-brand-col .brand img {
  max-width: 200px;
  height: auto;
  margin-bottom: 20px;
}

.footer-social-list {
  display: flex;
  justify-content: center;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-social-list a {
  color: var(--cva-blue) !important;
  border: none !important;
  transition: color 0.2s ease;
}

.footer-social-list a:hover {
  color: var(--cva-red) !important;
}

.footer-contact-col,
.footer-links-col {
  padding-top: 8px;
}

.footer-section-heading {
  font-family: 'Varisse Sans', 'Open Sans', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--cva-blue) !important;
  text-transform: none !important;
  margin-bottom: 16px !important;
  letter-spacing: 0 !important;
}

.footer-contact-body {
  color: var(--cva-gray) !important;
  font-size: 14px;
  line-height: 1.65;
  margin-bottom: 16px;
  display: block !important;
}

.footer-contact-link {
  color: var(--cva-red) !important;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  border: none !important;
}

.footer-contact-link:hover {
  color: var(--cva-red-darker) !important;
  text-decoration: underline;
}

.footer-cta-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-cta-btn {
  display: block !important;
  background-color: var(--cva-red) !important;
  color: #fff !important;
  font-weight: 800 !important;
  letter-spacing: 2px;
  padding: 11px 20px !important;
  border-radius: 6px !important;
  text-align: center;
  text-decoration: none !important;
  border: none !important;
}

.footer-cta-btn:hover {
  background-color: var(--cva-red-darker) !important;
  color: #fff !important;
}

/* Legal section below the 3 columns */
.footer-legal-section {
  text-align: center;
  margin-bottom: 24px;
}

.footer-legal-section .textwidget p {
  color: var(--cva-blue) !important;
  font-size: 11px;
  padding-top: 0;
  margin-bottom: 8px;
  display: block !important;
}

/* Responsive */
@media (max-width: 767px) {
  .footer-top-section {
    text-align: center;
  }
  .footer-contact-col,
  .footer-links-col {
    margin-top: 24px;
  }
  .footer-cta-list {
    align-items: center;
  }
  .footer-brand-col .brand img {
  max-width: 200px;
  height: auto;
  margin-bottom: 20px;
  display: inline-block;
  mix-blend-mode: multiply;
}
}