/* Base Typography */
body { font-family: Roboto, sans-serif; color: #333; font-size: 14px; line-height: 20px; }
h1 { margin-right: 0; margin-bottom: 10px; margin-left: 0; font-size: 38px; line-height: 37px; font-weight: 300; }
h2 { margin-bottom: 10px; float: none; font-family: Roboto, sans-serif; font-size: 32px; line-height: 36px; font-weight: 300; }
h3 { display: block; margin: 0 auto 17px; font-size: 24px; line-height: 30px; font-weight: 300; }
h4 { margin: 10px 0; font-size: 18px; line-height: 24px; font-weight: 400; }
h5 { margin: 10px 0; font-size: 14px; line-height: 20px; font-weight: 400; }
h6 { margin: 10px 0; font-size: 12px; line-height: 18px; font-weight: 400; }
p { margin-bottom: 15px; color: #9ea8a4; font-size: 14px; line-height: 23px; }

/* Buttons */
.button { display: inline-block; padding: 14px 26px; background-color: #25c485; color: white; text-align: center; text-decoration: none; border: none; border-radius: 4px; font-size: 16px; font-weight: 500; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease; width: auto; min-width: 160px; }
.button:hover { background-color: #1ea36d; transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button:disabled { background-color: #b5b5b5; cursor: not-allowed; transform: none; }

/* Header */
.header { height: 530px; background-image: url('/images/book-75.webp'); background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; background-attachment: scroll; box-shadow: black 0 3px 0 0 inset; }

/* Sections */
.section { padding-top: 65px; padding-bottom: 65px; }
.section.green { background-color: #f7f7f7; }

/* Navigation */
.nav-link { display: block; margin-bottom: 8px; font-family: 'Roboto Condensed', sans-serif; color: #692f90; font-size: 18px; font-weight: 300; text-decoration: none; text-transform: capitalize; }
.nav-link:hover { color: #166bcc; }
.navigation { position: fixed; z-index: 10; display: block; overflow-x: auto; overflow-y: auto; padding: 33px 19px 38px; border-top: 3px solid #25c485; background-color: white; box-shadow: rgba(0,0,0,0) 0 0 0 1px; }

/* Layout */
.align-right { display: block; overflow-x: visible; overflow-y: visible; padding-right: 25px; text-align: right; }
.image { margin-bottom: 20px; max-width: 100%; height: auto; }
.thumbnail { margin-right: 21px; margin-bottom: 26px; padding: 7px; background-color: white; box-shadow: rgba(0,0,0,0) 0 0 0 1px; }

/* FAQ / Journal Entries */
.journal-entry { display: block; margin-bottom: 19px; padding: 18px 20px; border: 1px solid #dce6e4; transition: background-color 300ms ease; color: #333; text-decoration: none; }
.journal-entry:hover { background-color: #f2f7f6; }
.journal-entry summary { cursor: pointer; list-style: none; }
.journal-entry summary::-webkit-details-marker { display: none; }
.journal-entry summary h3 { display: inline; margin: 0; }
.journal-entry summary::after { content: '+'; float: right; font-size: 24px; font-weight: 300; color: #692f90; }
.journal-entry[open] summary::after { content: '\2212'; }
.journal-entry p { margin-top: 15px; }

/* Logo */
.logo-link { max-width: 250px; color: #333; text-decoration: none; }
.logo-img { margin-bottom: 20px; }

/* Form Fields */
.field { display: block; height: 53px; width: 100%; padding: 0.75rem; border: 1px solid #d1e6dd; border-radius: 4px; box-shadow: transparent 0 1px 0 0 inset; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.field:focus { border-color: #24c786; box-shadow: 0 0 0 3px rgba(36, 199, 134, 0.1); outline: none; }

/* Content */
.list-home { margin-bottom: 0; color: #9ea8a4; }
.image-home { float: right; max-width: 100%; height: auto; object-fit: cover; aspect-ratio: 4/3; margin-left: 20px; margin-bottom: 20px; }
.list-box { margin-bottom: 26px; }
.contact-box { margin-top: 10px; color: #008940; font-size: 14px; text-align: left; text-decoration: none; }
.contact-box a { color: #008940; text-decoration: none; }
.contact-box a:hover { text-decoration: underline; }
.map-div { margin-left: 0; margin-top: 40px; }
.map-div iframe { width: 100%; height: 450px; }
.embed-form { display: block; }

/* Skip Link */
.skip-link { position: absolute; left: -9999px; z-index: 999; padding: 1em; background-color: white; color: black; text-decoration: none; }
.skip-link:focus { left: 50%; transform: translateX(-50%); }

/* Focus States */
a:focus, button:focus { outline: 2px solid #4A90E2; outline-offset: 2px; }

/* High Contrast Mode */
@media (forced-colors: active) {
    .button { border: 2px solid currentColor; }
}

/* Form Styles */
.contact-form { max-width: 600px; margin: 0 auto; }
.form-group { margin-bottom: 1.5rem; }
.form-group:last-of-type { margin-bottom: 2rem; }
.form-group label { display: block; margin-bottom: 0.5rem; color: #333; font-weight: 500; }
.contact-form .button { margin-top: 10px; margin-bottom: 20px; }

/* Mobile Menu Base */
.mobile-menu-button { display: none; padding: 10px; background: none; border: none; cursor: pointer; }
.mobile-icon { width: 24px; height: 24px; position: relative; }
.mobile-menu { display: none; background-color: white; padding: 0; margin: 0; }

/* Tablet */
@media (max-width: 991px) {
    .align-right { padding-right: 10px; }
    .logo-link { max-width: 195px; }
}

/* Mobile */
@media (max-width: 767px) {
    h2 { float: none; text-align: center; margin-bottom: 20px; }

    .header { height: auto; min-height: 300px; background-image: url('/images/book-75-mobile.webp'); }
    .section { padding-top: 29px; padding-bottom: 29px; }

    .navigation { position: static; width: 100%; padding: 10px 15px; background-color: transparent; box-shadow: none; margin-bottom: 0; height: auto; }
    .align-right { text-align: center; padding-right: 0; margin-bottom: 20px; }

    .thumbnail { margin-right: 14px; margin-bottom: 15px; }
    .contact-box { float: none; text-align: center; margin: 10px auto; }

    .mobile-nav { padding: 10px 0; background-color: transparent; position: relative; height: auto; }
    .mobile-brand { max-width: 150px; display: inline-block; padding: 5px 0; }
    .logo-img { margin-bottom: 0; width: 100%; height: auto; }

    .mobile-menu-button { display: block; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); z-index: 2; }
    .mobile-menu-button.is-active .mobile-icon { color: #711daf; opacity: 0.9; }
    .mobile-menu-button:hover .mobile-icon { opacity: 0.8; }

    .mobile-menu { position: fixed; top: 70px; left: 0; right: 0; background-color: white; box-shadow: 0 2px 5px rgba(0,0,0,0.1); padding: 20px 0; display: none; }
    .mobile-menu.is-active { display: block; }

    .mobile-link { display: block; padding: 15px 20px; border-bottom: 1px solid rgba(105,47,144,0.1); color: #692f90; text-decoration: none; font-size: 16px; }
    .mobile-link.w--current { color: #692f90; }

    .phone-link-mobile { display: block; padding: 15px 20px; color: #008940; text-decoration: none; font-weight: 500; }
    .mobile-icon { color: #711daf; width: 24px; height: 24px; }

    .map-div iframe { height: 300px; }
    .image-home { float: none; display: block; margin: 0 auto 20px; max-width: 300px; }
    .list-box { padding-left: 20px; margin-bottom: 15px; }
    .w-col-6 { width: 100%; float: none; padding: 0 15px; }
    .w-nav { background-color: transparent; }
}

/* Small Mobile */
@media (max-width: 479px) {
    h2 { float: none; font-size: 28px; }
    p { font-size: 16px; line-height: 1.6; }

    .section { padding-top: 20px; padding-bottom: 20px; }
    .thumbnail { margin-right: 0; margin-bottom: 15px; display: block; }

    .embed-form { margin: 0 -15px; }
    .map-div { margin: 30px -15px 0; }

    .button { display: block; width: 100%; margin-bottom: 10px; padding: 16px 24px; font-size: 16px; }

    .mobile-brand { max-width: 130px; }
    .mobile-nav { padding: 8px 0; }

    .contact-form { padding: 0 15px; }
    .contact-form .button { margin-top: 15px; margin-bottom: 25px; }
    .field { font-size: 16px; }
}