/* ==========================================================================
   1. GLOBAL LAYER ARCHITECTURE DECLARATION
   ========================================================================== */
/* This exact order dictates specificity. Last layer wins over previous ones. */
@layer bootstrap, reset, base, layout, components, custom;

/* ==========================================================================
   2. THIRD-PARTY FRAMEWORK LAYER
   ========================================================================== */
/* Sandboxes Bootstrap entirely so its classes don't override your custom work */

@import "style.css" layer(bootstrap);

/* ==========================================================================
   3. IMPORT OTHER CSS PARTIALS AND SET THEIR LAYER
   If a section of main grows too large, consider breaking it into a separate file and importing it here.
   ========================================================================== */
@import "custom.css" layer(custom);
@import "tables.css" layer(base);

/* Override unlayered Normalize; retain Bootstrap's button variables. */
a.btn,
a.button {
  background-color: var(--bs-btn-bg);
}
.active > .page-link {
  background-color: var(--old-growth);
}

a.btn:hover,
a.button:hover,
a.btn:focus-visible,
a.button:focus-visible {
  background-color: var(--bs-btn-hover-bg);
}

a.btn:active,
a.button:active,
a.btn.active,
a.button.active,
a.btn.show,
a.button.show {
  background-color: var(--bs-btn-active-bg);
}

a.btn.disabled,
a.button.disabled {
  background-color: var(--bs-btn-disabled-bg);
}

/* ==========================================================================
   4. BASE DESIGN TOKENS & SYSTEM DEFAULTS
   ========================================================================== */
@layer base {
  :root {
    /* Custom Design Tokens */
    --brand-primary: var(--old-growth);
    --brand-secondary: var(--old-growth);
    --paper: #fdfbee;
    --ink: #050505;
    --blue: var(--sea-glass);
    --white: #ffffff;
    --old-growth: #004c46;
    --sea-glass: #00856a;
    --gold: #ffc72c;
    --pacific-blue: #98b8ad;
    --sand: #f5f3e7;
    --white: #ffffff;
    --brick: #864e27;
    --font-serif: "motiva-sans", sans-serif;

    /* Global Bootstrap variables; component variables belong on their selectors. */
    --bs-primary: var(--old-growth);
    --bs-secondary: var(--sea-glass);
    --bs-primary-rgb: 0, 76, 70;
    --bs-secondary-rgb: 0, 133, 106;
    --bs-font-sans-serif: "poppins", sans-serif;
    --bs-font-monospace: "pt-mono", monospace;
    --bs-body-bg: var(--paper);
    --bs-link-color-rgb: 134, 78, 39;
    --bs-link-hover-color-rgb: 0, 76, 70;
    --bs-heading-color: var(--old-growth);
    --bs-body-color: var(--old-growth);
    --bs-body-font-weight: 500;
    --bs-border-radius: 15px;
    --bs-border-radius-sm: var(--bs-border-radius);
    --bs-border-radius-lg: var(--bs-border-radius);
    --bs-border-radius-xl: var(--bs-border-radius);
    --bs-border-radius-xxl: var(--bs-border-radius);
    --bs-border-radius-2xl: var(--bs-border-radius);
    --bs-btn-border-radius: var(--bs-border-radius);
  }

  .pagination {
    --bs-pagination-color: var(--brick);
    --bs-pagination-active-bg: var(--old-growth);
    --bs-pagination-active-border-color: var(--old-growth);
    --bs-pagination-hover-color: var(--old-growth);
    --bs-pagination-focus-color: var(--old-growth);
  }
}

.dropdown-menu {
  background-color: var(--pacific-blue);
  border: none;
  border-radius: 0;
  margin-top: 0;
  /* box-shadow: none; */
  color: var(--old-growth);
  a.active {
    color: var(--old-growth);
    &:hover {
      background-color: rgba(255, 255, 255, 0.5);
    }
  }
}
.cph-logo p svg {
  max-width: 175px;
  padding: 15px 0 10px;
}
.cph-logo p {
  padding: 0;
  margin-bottom: 0;
}

@media (min-width: 992px) {
  .cph-logo p svg {
    max-width: 100%;
    width: 225px;
  }
}
/* Baseline for site branding */
.navbar-brand a.site-title {
  color: var(--white);
  text-transform: capitalize;
}

/* Give main container some padding */
main > .container:first-of-type {
  padding-top: 1rem;
  padding-bottom: 2rem;
}
/* Navbar */
.navbar {
   padding: 0;
}
/* Dropdown customizations */
.dropdown-toggle::after {
  border: none;
  border-radius: 0;
  background: transparent;
  content: "";
  border: none;
  outline: none;
  transition: all 300ms ease-in-out;
  background-image: url(../images/plus-circle.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center center;
  position: absolute;
  width: 24px;
  height: 24px;
  margin: 0 0.5rem;
  top: auto;
  right: 0;
  margin-bottom: 3px;
}
.dropdown-toggle {
  margin: 0 32px 0 5px;
}
.dropdown:hover {
  background-color: var(--pacific-blue);
  color: var(--old-growth);
}

.nav-link {
  padding-top: 1rem;
  padding-bottom: 1rem;
  color: var(--white);
  text-transform: capitalize;
  font-weight: 500;
  &:hover {
    background-color: var(--pacific-blue);
    color: var(--old-growth);
  }
}
.nav-tabs .nav-link {
  color: var(--old-growth);
  &:hover {
    background-color: var(--pacific-blue);
    color: var(--old-growth);
  }
  &.active {
    background-color: var(--pacific-blue);
    color: var(--old-growth);
  }
}
.dropdown-item {
   color: var(--old-growth);
}
.dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.5);
  }

.dropdown-toggle.show::after,
.dropdown.show > .dropdown-toggle::after {
  transition: all 300ms ease-in-out;
  transform: rotate(45deg);
}
/* Typography */
/* target the wrapper surrounding the Drupal content output */

/* Scope your custom layout shifts */
/* .main {
} */

.main p {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

/* The adjacent sibling combinator (+) targets headings ONLY if they follow another element */
.main * + h2,
.main * + h3,
.main * + h4 {
  margin-top: 2.5rem;
}

.main h2,
.main h3,
.main h4 {
  margin-bottom: 0.75rem;
}

/* ==========================================================================
   6. MICRO COMPONENT ARCHITECTURE
   If a section of main grows too large, consider breaking it into a separate file and importing it in the partials import section above.
   ========================================================================== */
@layer components {
  .btn {
    --bs-btn-font-family: var(--bs-font-monospace);
    --bs-btn-font-weight: 700;

  }
  .btn-primary,
  .button--primary {
    --bs-btn-color: var(--white);
    --bs-btn-bg: var(--old-growth);
    --bs-btn-border-color: var(--old-growth);

    --bs-btn-hover-color: var(--old-growth);
    --bs-btn-hover-bg: var(--white);
    --bs-btn-hover-border-color: var(--old-growth);

    --bs-btn-active-color: var(--white);
    --bs-btn-active-bg: var(--old-growth);
    --bs-btn-active-border-color: var(--old-growth);

    --bs-btn-focus-shadow-rgb: 0, 76, 70;

    --bs-btn-disabled-color: var(--white);
    --bs-btn-disabled-bg: var(--old-growth);
    --bs-btn-disabled-border-color: var(--old-growth);
  }
  .btn-secondary,
  .button--secondary {
    --bs-btn-color: var(--old-growth);
    --bs-btn-bg: var(--gold);
    --bs-btn-border-color: var(--old-growth);

    --bs-btn-hover-color: var(--old-growth);
    --bs-btn-hover-bg: var(--white);
    --bs-btn-hover-border-color: var(--old-growth);

    --bs-btn-active-color: var(--white);
    --bs-btn-active-bg: var(--old-growth);
    --bs-btn-active-border-color: var(--old-growth);

    --bs-btn-focus-shadow-rgb: 0, 76, 70;

    --bs-btn-disabled-color: var(--white);
    --bs-btn-disabled-bg: var(--gold);
    --bs-btn-disabled-border-color: var(--old-growth);
  }
  .btn-default,
  .button--default {
    --bs-btn-color: var(--old-growth);
    --bs-btn-bg: var(--white);
    --bs-btn-border-color: var(--old-growth);

    --bs-btn-hover-color: var(--white);
    --bs-btn-hover-bg: var(--old-growth);
    --bs-btn-hover-border-color: var(--old-growth);

    --bs-btn-active-color: var(--white);
    --bs-btn-active-bg: var(--old-growth);
    --bs-btn-active-border-color: var(--old-growth);

    --bs-btn-focus-shadow-rgb: 0, 76, 70;

    --bs-btn-disabled-color: var(--old-growth);
    --bs-btn-disabled-bg: var(--white);
    --bs-btn-disabled-border-color: var(--old-growth);
  }

}