/* Custom site styles */

:root {
  --approach-orange: #de4a28;
  --approach-cream: #f3f2e1;
  --approach-navy: #021e2a;
}

h2, .h2 { color: var(--approach-orange); }
.color-highlight { color: var(--approach-orange); }

.article-qa h4 { color: var(--approach-orange); }

#main .info-links a { color: var(--approach-cream); }
#main .info-links a:hover, #main .info-links a:focus { color: var(--approach-orange); }

.notice-item { white-space: nowrap; }
@media (max-width: 767px) {
    .notice-item { display: block; }
}

.notice--bar {
    font-size: 0.9rem;
    color: var(--approach-cream);
    letter-spacing: 0.04em;
    padding: 0.3rem 0;
    min-height: 2rem;
}
.notice--bar strong {
    font-weight: 600;
}
.notice--bar .notice-sep {
    color: var(--approach-orange);
}

#hours-display {
    display: table;
    border-collapse: collapse;
}
.hours-row {
    display: table-row;
}
.hours-days,
.hours-time {
    display: table-cell;
    padding: 0.4rem 0;
    vertical-align: baseline;
}
.hours-time {
    padding-left: 2rem;
}
.hours-row + .hours-row .hours-days,
.hours-row + .hours-row .hours-time {
    border-top: 1px solid rgba(244, 245, 226, 0.15);
}
.hours-exception-date {
    color: var(--approach-orange);
}

.btn:hover img,
.btn:focus img {
    filter: brightness(0);
}
.btn.d-inline-flex {
    justify-content: center;
}

.sc-rules h3 {
    font-family: 'Antonio', sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--approach-orange);
    margin-top: 1.75rem;
    margin-bottom: 0.25rem;
}
.sc-rules h2 + h3 {
    margin-top: 0;
}
.sc-rules p,
.sc-rules ul {
    font-size: 0.9rem;
}

.article-overlap {
    margin-top: calc(-3rem - 135px);
    margin-bottom: 1.5rem;
    position: relative;
}
.article-slide {
    background-size: cover;
    background-position: center;
    height: 400px;
}

.row.align-items-end {
    align-items: start !important;
}
.row.align-items-end > div {
    margin-top: 20px;
}
.price-notes {
    list-style: none;
    padding: 0;
    margin-top: -0.5rem;
    font-size: 0.8rem;
    opacity: 0.7;
}
.price-notes li::before {
    content: "* ";
}

.sc-prices .highlight-row td {
    font-weight: 600;
}

.sc-prices .table th:not(:first-child),
.sc-prices .table td:not(:first-child) {
    width: 1%;
    white-space: nowrap;
}

.table th:nth-child(2),
.table td:nth-child(2),
.table th:nth-child(3),
.table td:nth-child(3) {
    text-align: right;
}

.home-cards-row {
    margin-top: 4rem;
    margin-bottom: 3rem;
}
.home-card {
    position: relative;
    min-height: 260px;
    background-size: cover;
    background-position: center;
    transition: filter 0.2s ease;
}
.home-card:hover {
    filter: brightness(0.88);
}
.home-card-overlay {
    position: absolute;
    inset: 0;
    opacity: 0.75;
    z-index: 0;
}
.home-card-label {
    position: relative;
    z-index: 1;
    font-family: 'Antonio', sans-serif;
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    padding: 1rem;
}

.header-menu .current-menu-item > a {
    display: inline-block;
    border-top: 2px solid var(--approach-orange);
    padding-top: 2px;
}

/* Offcanvas (mobile) menu */
.offcanvas-menu li { display: block; padding-right: 0; }
.offcanvas-menu li a { display: block; font-size: 1.25rem; padding: 7px 0; color: #000; }
.offcanvas-menu li.current-menu-item a { color: var(--approach-orange); }

/* Dropdown — desktop */
.header-menu li.dropdown { padding-bottom: 0.75rem; }
.header-menu .dropdown-menu { background-color: transparent; border: 2px solid #fff; border-radius: 0; padding: 0.375rem 0.9375rem; margin-left: -0.9375rem; margin-top: 0.5rem; min-width: 0; width: max-content; }
.header-menu .dropdown-menu li { display: block; padding-right: 0; }
.header-menu .dropdown:hover > .dropdown-menu { display: block; }
/* Reset: .theme-menu li.current-menu-item a would color all child <a>s orange; override for dropdown items */
.header-menu .dropdown-item,
.header-menu li.current-menu-item .dropdown-item { background-color: transparent; color: #e0e1d1; font-family: 'Antonio', sans-serif; font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; padding: 0.4rem 0; }
.header-menu .dropdown-item.active,
.header-menu li.current-menu-item .dropdown-item.active { color: var(--approach-orange); }
.header-menu .dropdown-item:hover,
.header-menu .dropdown-item:focus,
.header-menu li.current-menu-item .dropdown-item:hover,
.header-menu li.current-menu-item .dropdown-item:focus { background-color: transparent; color: var(--approach-orange); }


/* Suppress browser autofill highlight on contact form inputs */
.contact-form .form-control:-webkit-autofill,
.contact-form .form-control:-webkit-autofill:hover,
.contact-form .form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #081620 inset;
    -webkit-text-fill-color: #4f6777;
    transition: background-color 5000s ease-in-out 0s;
}

.resume-filename {
    font-size: 0.85rem;
    opacity: 0.6;
}

.form-message-box {
    border: 1px solid var(--approach-orange);
    padding: 0.75rem 1rem;
}
.form-message-box p {
    margin: 0;
    font-size: 0.9rem;
    color: #e0e1d1;
}

/* Programs layout */
.programs-intro {
    margin-bottom: 2rem;
    font-size: 1.05rem;
}

.program-card {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    padding: 1.25rem 0;
    border-bottom: 1px solid #233948;
}
.program-card:first-of-type {
    border-top: 1px solid #233948;
}

.program-card-img {
    flex-shrink: 0;
    width: 140px;
    height: 140px;
    background-size: cover;
    background-position: center;
}

.program-card-body {
    flex: 1;
    min-width: 0;
}
.program-card-body h4 {
    color: var(--approach-cream);
    margin-bottom: 0.5rem;
    font-weight: 300;
}
.program-card-body p {
    margin-bottom: 0;
    font-size: 0.95rem;
    opacity: 0.85;
}

.program-card-price {
    color: var(--approach-orange);
}

.sc-programs h5 {
    margin-top: 1.5rem;
}
.sc-programs .price-notes {
    margin-top: 0.75rem;
}

@media (max-width: 575px) {
    .program-card {
        flex-wrap: wrap;
        gap: 1rem;
    }
    .program-card-img {
        width: 100%;
        height: 200px;
    }
}