/* ============================================
   ANM Site CSS — Theme (anm-theme.css)
   Colors, border-radius, shadows, fonts only.
   Swap this file to rebrand the site.
   For layout changes see anmV2.css
   ============================================ */

:root {
    --color-primary:      #417aac;
    --color-primary-dk:   #2d6090;
    --color-primary-lt:   rgba(65, 122, 172, 0.15);
    --color-primary-nav:  rgba(255, 255, 255, 0.2);
    --color-text:         #2d4a6a;
    --color-text-lt:      #6a8faf;
    --color-white:        white;
    --color-error:        #c0392b;
    --color-error-lt:     rgba(192, 57, 43, 0.08);
    --color-overlay-bio:  rgba(10, 31, 61, 0.82);
    --color-overlay-hero: rgba(65, 122, 172, 0.4);
    --color-overlay-review: rgba(65, 122, 172, 0.5);
    --radius-pill:        20px;
    --radius-nav:         15px;
    --radius-circle:      50%;
    --radius-sm:          8px;
    --shadow-pill-blue:   0px 4px var(--color-primary);
    --shadow-pill-white:  0px 4px white;
    --shadow-card:        0 8px 32px rgba(0, 0, 0, 0.3);
    --shadow-dropdown:    0 6px 12px rgba(0, 0, 0, 0.15);
    --font-main:          sans-serif;
    --font-size-sm:       0.8rem;
    --font-size-base:     1rem;
    --font-size-lg:       1.2rem;
}

/* ============================================
   CONDITIONS
   ============================================ */

ul.conditions-list li {
    color: white;
}

ul.conditions-list li::marker {
    content: '✓';
    color: white;
    font-size: 1.2em;
}

.condition-item summary {
    color: white;
    background: rgba(0, 0, 0, 0.25);
    border-radius: var(--radius-pill);
}

.condition-item[open] summary {
    border-radius: var(--radius-pill) var(--radius-pill) 0 0;
    background: rgba(0, 0, 0, 0.35);
}

.condition-item summary::after {
    color: rgba(255, 255, 255, 0.85);
}

.condition-body {
    background: white;
    border-radius: 0 0 var(--radius-pill) var(--radius-pill);
    box-shadow: var(--shadow-pill-blue);
}

/* ============================================
   BASE
   ============================================ */

body {
    background-color: white;
    font-family: var(--font-main);
}

/* ============================================
   CONTACT BAR
   ============================================ */

.contact {
    background-color: var(--color-primary);
    color: white;
}

/* Global link colors */
a {
    color: var(--color-primary);
}

a:visited {
    color: var(--color-text);
}

a:hover {
    color: var(--color-primary-dk);
}

a:active {
    color: #1a3f5f;
}

/* White links in contact bar */
.contact a,
.contact a:visited,
.contact a:hover,
.contact a:active {
    color: white;
}

/* Nav links white */
.nav-menu li a,
.nav-menu li a:visited,
.nav-menu li a:hover,
.nav-menu li a:active {
    color: white;
}

/* Dropdown links blue */
.nav-dropdown li a,
.nav-dropdown li a:visited {
    color: var(--color-primary);
}

/* ============================================
   SOCIAL LINKS
   ============================================ */

.social-links a {
    border-radius: var(--radius-circle);
    background: rgba(255, 255, 255, 0.15);
}

.social-links a:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ============================================
   TAGLINE
   ============================================ */

.tagline {
    color: var(--color-primary);
}

/* ============================================
   NAV BAR
   ============================================ */

.accent {
    background-color: var(--color-primary);
    border-radius: var(--radius-nav);
    box-shadow: var(--shadow-pill-white);
}

.nav-menu li a {
    border-radius: var(--radius-nav);
}

.nav-menu li a:hover {
    background: var(--color-primary-nav);
}

.nav-toggle {
    border-radius: var(--radius-sm);
}

.nav-toggle:hover {
    background: var(--color-primary-nav);
}

.nav-toggle span {
    background: white;
    border-radius: 2px;
}

.nav-dropdown {
    background: white;
    border-radius: 0 0 var(--radius-nav) var(--radius-nav);
    box-shadow: var(--shadow-dropdown);
}

.nav-dropdown li a {
    border-radius: var(--radius-nav);
}

.nav-dropdown li a:hover {
    box-shadow: 0px 5px var(--color-primary);
    background: var(--color-primary-lt);
}

.accent li {
    color: white;
}

.accent li a {
    color: white;
    border-radius: var(--radius-nav);
}

.accent li a:hover {
    background-color: var(--color-primary-nav);
}

/* ============================================
   HERO IMAGE
   ============================================ */

.graphic {
    background-color: white;
}

.overlay {
    background-color: var(--color-overlay-hero);
}

.hero-byline {
    color: #0a1f3d !important;
    background: rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-pill);
}

/* ============================================
   REVIEWS / CAROUSEL
   ============================================ */

.reviews {
    color: var(--color-primary);
}

.nav-dots label {
    background-color: rgba(65, 122, 172, 0.5);
}

#slide1:checked ~ .nav-dots label[for="slide1"],
#slide2:checked ~ .nav-dots label[for="slide2"],
#slide3:checked ~ .nav-dots label[for="slide3"],
#slide4:checked ~ .nav-dots label[for="slide4"],
#slide5:checked ~ .nav-dots label[for="slide5"],
#slide6:checked ~ .nav-dots label[for="slide6"] {
    background-color: rgba(65, 122, 172, 1.0);
}

/* ============================================
   REVIEW OVERLAY
   ============================================ */

.review-overlay {
    background: var(--color-overlay-review);
}

.review-overlay img {
    border: 2px solid var(--color-primary);
}

.overlay-close {
    background: rgba(65, 122, 172, 0.8);
    border-radius: var(--radius-circle);
}

/* ============================================
   BIO OVERLAY
   ============================================ */

.bio-overlay {
    background: var(--color-overlay-bio);
}

.bio-card {
    background: rgba(255, 255, 255, 0.97);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-card);
}

.bio-card p,
.bio-p {
    color: var(--color-text) !important;
}

.bio-close {
    background: rgba(65, 122, 172, 0.8);
    border-radius: var(--radius-circle);
}

/* ============================================
   PAGE SECTIONS
   ============================================ */

.page {
    background-color: rgba(0, 0, 0, 0);
    color: var(--color-primary);
}

.pagealt {
    background-color: var(--color-primary);
    color: white;
}

/* ============================================
   HEADINGS
   ============================================ */

h1 {
    color: var(--color-primary);
}

h2, .corpus > div > h3 {
    color: var(--color-primary);
    border-radius: var(--radius-pill);
    background-color: white;
    box-shadow: var(--shadow-pill-blue);
}

.pagealt h2 {
    color: white;
    background-color: var(--color-primary);
    box-shadow: var(--shadow-pill-white);
    border-radius: var(--radius-pill);
}

.pagealt h3 {
    color: white !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.page h3 {
    color: var(--color-primary) !important;
    border-bottom: 1px solid rgba(65, 122, 172, 0.2);
}

h5 {
    color: white;
}

h6 {
    color: var(--color-primary);
    text-align: center;
}

/* ============================================
   LEGACY
   ============================================ */

.hname {
    text-shadow: 2px 2px 5px darkslategrey;
}

.dropbtn {
    background-color: rgba(65, 122, 172, 0);
    background-image: linear-gradient(
        rgba(65,122,172,1) 2%,
        rgba(253,245,230,1) 10%,
        rgba(65,122,172,1) 20%,
        rgba(65,122,172,1) 80%,
        rgba(47,79,79,0) 100%
    );
    color: oldlace;
    border-color: oldlace;
    border-radius: 7px;
    border-style: ridge;
    cursor: pointer;
}

.hamburger:hover .dropbtn {
    background-image: linear-gradient(
        rgba(64,108,108,1) 2%,
        rgba(253,245,230,1) 10%,
        rgba(64,108,108,1) 20%,
        rgba(64,108,108,1) 80%,
        rgba(64,108,108,0) 100%
    );
}

.dropdown-content {
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

h3 a {
    color: oldlace;
    background-color: darkslategrey;
    border-radius: var(--radius-sm);
}

h3 a:hover {
    color: black;
    background-color: cadetblue;
}