/**
 * AHA Classes - Stylesheet
 * Version: 1.0.0
 * Matches Draco BLS branding
 */

:root {
    /* Navy carries the structure; AHA red is the only decorative accent, and green
     * is reserved for state that is genuinely positive — a seat available, a class
     * confirmed. Color that means something reads as a clinical system; color
     * sprinkled for variety reads as a template. */
    --primary-color: #1e3a5f;
    --primary-light: #2d5a87;
    --primary-dark: #152a45;
    --secondary-color: #64748b;
    --accent-color: #0ea5e9;

    /* The certifying body's red. Used for the hero rule, credential marks and
     * anything that needs to read as officially AHA. */
    --aha-red: #c41230;
    --aha-red-dark: #a00e28;

    /* Surfaces for the restrained card treatment that replaced the pastel tiles. */
    --surface-tint: #f4f7fb;
    --hairline: #dbe3ec;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;
    --text-color: #1f2937;
    --text-muted: #6b7280;
    --bg-light: #f8fafc;
    --bg-white: #ffffff;
    --border-color: #e5e7eb;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --radius: 8px;
    --radius-lg: 12px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--text-color);
    background: var(--bg-light);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
    position: relative;
    z-index: 1;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s;
}

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

/* Header - Sticky */
.site-header {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar {
    padding: 1rem 0;
}

.navbar .navbar-collapse {
    justify-content: center;
}

.navbar .navbar-nav.mx-auto {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.navbar .nav-actions {
    margin-left: auto;
}

.brand-logo-img {
    height: 40px;
    width: auto;
}

.brand-text {
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
    margin-left: 0.75rem;
}

.navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    padding: 0.5rem 1rem;
    transition: all 0.2s;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: #fff;
}

.nav-link-styled {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 0.6rem 1.25rem !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: inline-flex;
    align-items: center;
}

.nav-link-styled:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.nav-link-styled.active {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.25);
}

.user-avatar-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    margin-right: 0.5rem;
}

/* Footer */
.site-footer {
    background: var(--primary-dark);
    color: rgba(255, 255, 255, 0.8);
    padding: 1.5rem 0;
    margin-top: auto;
}

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

.footer-line-1 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.footer-line-2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    font-size: 0.8rem;
    opacity: 0.8;
}

.footer-line-2 a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
}

.footer-line-2 a:hover {
    color: #fff;
}

.footer-logo {
    height: 28px;
    width: auto;
}

.footer-separator {
    margin: 0 0.5rem;
    opacity: 0.5;
}

/* Hero Section */
.hero-section {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 50%, #0c4a6e 100%);
    color: #fff;
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.08'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
    pointer-events: none;
}

.hero-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    /* A single AHA red rule closing the hero.
     *
     * This was a 6px green-to-blue-to-purple gradient — three hues that appear
     * nowhere else on the site and mean nothing. On a page selling emergency
     * medical certification it read as a website template rather than a training
     * provider. One decisive line in the certifying body's own red does the same
     * structural job and says something true about what is being sold. */
    background: var(--aha-red);
}

.hero-content {
    position: relative;
    z-index: 1;
}

.hero-title {
    font-size: 2.75rem;
    font-weight: 800;
    margin-bottom: 1rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.hero-subtitle {
    font-size: 1.25rem;
    opacity: 0.95;
    max-width: 650px;
    line-height: 1.7;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Class Cards */
.classes-section {
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
    padding: 4rem 0;
}

.class-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 2rem;
    padding: 2rem 0;
}

.class-card {
    background: var(--bg-white);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.class-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.class-card-image {
    height: 160px;
    background: linear-gradient(135deg, #1e3a5f 0%, #0c4a6e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.class-card-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 20.5V18H0v-2h20v-2l4 3.5-4 3.5zM0 20h2v2H0v-2z' fill='%23ffffff' fill-opacity='.05'/%3E%3C/svg%3E");
}

.class-card-image i {
    font-size: 3.5rem;
    color: rgba(255, 255, 255, 0.2);
    position: relative;
    z-index: 1;
}

.class-card-image.has-photo {
    background: transparent;
    padding: 1rem;
}

.class-card-image.has-photo::before {
    display: none;
}

.class-card-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* A logo is not a photograph. `cover` crops to fill, which is right for a scene and
   wrong for a trademark — it would shave the edges off the mark. `contain` keeps the
   whole logo visible, and the white ground matches the artwork's own background so
   the letterboxing reads as part of the card rather than as a gap. */
.class-card-photo.is-logo {
    object-fit: contain;
    background: #fff;
    padding: .75rem;
}

.class-card-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    padding: 0.375rem 0.875rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
    z-index: 2;
}

.class-card-image.has-photo .class-card-badge {
    top: 1.5rem;
    right: 1.5rem;
}

.class-card-body {
    padding: 1.75rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.class-card-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.75rem;
}

.class-card-description {
    color: var(--text-muted);
    font-size: 0.9375rem;
    line-height: 1.6;
    flex: 1;
    margin-bottom: 1rem;
}

.class-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.class-card-meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.class-card-meta-item i {
    color: var(--primary-color);
}

.class-card-price {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 0;
}

.class-card-footer {
    padding: 0 1.75rem 1.75rem;
}

.class-card-footer .btn {
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    border-radius: 10px;
}

/* Buttons */
.btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    border: none;
    color: #fff;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius);
    transition: all 0.2s;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-color) 100%);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.btn-outline-primary {
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    background: transparent;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius);
    transition: all 0.2s;
}

.btn-outline-primary:hover {
    background: var(--primary-color);
    color: #fff;
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1.125rem;
}

/* Section Styles */
.section-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.section-subtitle {
    color: var(--text-muted);
    font-size: 1.125rem;
    margin-bottom: 2rem;
}

/* Calendar Styles */
.calendar-container {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.calendar-header {
    background: var(--primary-color);
    color: #fff;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.calendar-nav-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s;
}

.calendar-nav-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.calendar-month-year {
    font-size: 1.25rem;
    font-weight: 600;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.calendar-day-header {
    padding: 0.75rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    background: var(--bg-light);
}

.calendar-day {
    padding: 0.75rem;
    text-align: center;
    min-height: 80px;
    border: 1px solid var(--border-color);
    position: relative;
}

.calendar-day-number {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.calendar-day.has-class {
    background: rgba(14, 165, 233, 0.1);
    cursor: pointer;
}

.calendar-day.has-class:hover {
    background: rgba(14, 165, 233, 0.2);
}

.calendar-day.has-class .calendar-day-number {
    color: var(--primary-color);
    font-weight: 600;
}

.calendar-class-dot {
    width: 8px;
    height: 8px;
    background: var(--accent-color);
    border-radius: 50%;
    margin: 4px auto 0;
}

.calendar-day.other-month {
    background: var(--bg-light);
}

.calendar-day.other-month .calendar-day-number {
    opacity: 0.4;
}

/* Schedule List */
.schedule-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.schedule-item {
    background: var(--bg-white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid var(--border-color);
    transition: box-shadow 0.2s;
}

.schedule-item:hover {
    box-shadow: var(--shadow);
}

.schedule-info {
    flex: 1;
}

.schedule-date {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 1.125rem;
}

.schedule-time {
    color: var(--text-muted);
    font-size: 0.9375rem;
}

.schedule-location {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.schedule-spots {
    text-align: right;
}

.spots-available {
    font-weight: 600;
    color: var(--success-color);
}

.spots-limited {
    color: var(--warning-color);
}

.spots-full {
    color: var(--danger-color);
}

/* Full Class Styles */
.schedule-item.schedule-full {
    opacity: 0.6;
    background: #f3f4f6;
}

.schedule-item.schedule-full:hover {
    box-shadow: var(--shadow-sm);
}

.schedule-item.schedule-full .schedule-date {
    color: #6b7280;
}

.calendar-day.class-full {
    background: rgba(156, 163, 175, 0.2);
}

.calendar-day.class-full:hover {
    background: rgba(156, 163, 175, 0.3);
}

.calendar-day.class-full .calendar-day-number {
    color: #6b7280;
}

.calendar-class-dot.dot-full {
    background: #9ca3af;
}

/* Form Styles */
.form-section {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 2rem;
    margin-bottom: 1.5rem;
}

.form-section-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--primary-color);
}

.form-label {
    font-weight: 500;
    color: var(--text-color);
    margin-bottom: 0.5rem;
}

.form-control {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
    outline: none;
}

.form-select {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    font-size: 1rem;
}

/* Price Summary */
.price-summary {
    background: var(--bg-light);
    border-radius: var(--radius);
    padding: 1.5rem;
}

.price-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
}

.price-row.total {
    border-top: 2px solid var(--border-color);
    margin-top: 0.5rem;
    padding-top: 1rem;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--primary-color);
}

.discount-applied {
    color: var(--success-color);
}

/* Alert Styles */
.alert-info {
    background: rgba(14, 165, 233, 0.1);
    border: 1px solid rgba(14, 165, 233, 0.3);
    color: var(--primary-color);
}

.alert-success {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #065f46;
}

.alert-danger {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #991b1b;
}

/* Button Transitions */
.btn {
    transition: all 0.2s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    border: none;
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.3);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-color) 100%);
    box-shadow: 0 6px 16px rgba(30, 58, 95, 0.4);
}

/* Table Striping & Hover */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.02);
}

.table-hover tbody tr:hover {
    background-color: rgba(30, 58, 95, 0.05);
}

/* Status Badges */
.badge {
    font-weight: 500;
    padding: 0.4em 0.8em;
    border-radius: 6px;
}

.badge-confirmed, .badge-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.badge-pending, .badge-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.badge-cancelled, .badge-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

.badge-completed {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

/* Scroll to Top Button */
.scroll-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.4);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.scroll-to-top:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(30, 58, 95, 0.5);
}

/* Loading Spinner */
.spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.spinner-overlay.active {
    opacity: 1;
    visibility: visible;
}

.spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Toast Notifications */
.toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
}

.toast {
    background: white;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    padding: 1rem 1.5rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    animation: slideIn 0.3s ease;
}

.toast-success {
    border-left: 4px solid var(--success-color);
}

.toast-error {
    border-left: 4px solid var(--danger-color);
}

.toast-warning {
    border-left: 4px solid var(--warning-color);
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Empty States */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-muted);
}

.empty-state-icon {
    font-size: 4rem;
    color: var(--border-color);
    margin-bottom: 1rem;
}

.empty-state-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.5rem;
}

/* Active Nav Indicator */
.navbar-nav .nav-link.active {
    position: relative;
}

/* Legacy indicator, kept for any nav that still uses the plain .nav-link styling.
   Explicitly excluded from .site-nav-link: it sets width and transform, which are
   longhands the newer rule never overrode, so both applied and the active bar came
   out 20px wide and shifted left. */
.navbar-nav .nav-link.active:not(.site-nav-link)::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 3px;
    background: white;
    border-radius: 2px;
}

/* Responsive */
@media (max-width: 768px) {
    .hero-title {
        font-size: 1.75rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .class-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-content {
        flex-direction: column;
        text-align: center;
    }
    
    .schedule-item {
        flex-direction: column;
        text-align: center;
    }
    
    .schedule-spots {
        text-align: center;
    }
}

/* ===========================================================================
   Value cards  (replaced the four pastel gradient tiles)
   ---------------------------------------------------------------------------
   One treatment repeated four times, rather than four color schemes. The mark
   is navy on a tinted square; the card itself is white with a hairline. Equal
   height comes from the flex column, so the four titles sit on one line however
   long the body text runs.
   =========================================================================== */
.value-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .85rem;
    padding: 1.75rem 1.5rem;
    background: var(--bg-white);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.value-card:hover {
    border-color: var(--primary-light);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}
.value-card-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--surface-tint);
    color: var(--primary-color);
    flex-shrink: 0;
}
.value-card-mark svg { width: 22px; height: 22px; }
.value-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0;
    letter-spacing: -.01em;
}
.value-card-body {
    font-size: .925rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
}

/* ===========================================================================
   Credential bar
   ---------------------------------------------------------------------------
   The single most useful thing a training site can show, and this one showed
   none of it: who authorizes the certification, under which training center,
   and against which instructor ID. Every value here comes from the settings
   table, so it cannot drift from what the certificates actually say.
   =========================================================================== */
.credential-bar {
    background: var(--bg-white);
    border-bottom: 1px solid var(--hairline);
}
.credential-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem 2.5rem;
    padding: 1.1rem 0;
}
.credential-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
}
.credential-item svg {
    width: 18px;
    height: 18px;
    color: var(--aha-red);
    flex-shrink: 0;
}
.credential-label {
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-muted);
    display: block;
    line-height: 1.3;
}
.credential-value {
    font-size: .9rem;
    font-weight: 650;
    color: var(--primary-color);
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}
/* The Authorized Training Center lockup is a wide 4.65:1 mark, so it is sized by
   height and left to find its own width. 38px keeps "AUTHORIZED TRAINING CENTER"
   readable without the strip becoming mostly logo. */
.credential-logo {
    height: 38px;
    width: auto;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .credential-strip { gap: .9rem 1.5rem; padding: .9rem 0; }
    .credential-value { font-size: .82rem; }
}

/* Next-session line on a class card. Sits between the meta row and the price, so
   the eye runs: what it is -> when it is -> what it costs -> book it. */
.class-card-next {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    padding: .7rem .85rem;
    margin: .25rem 0 1rem;
    background: var(--surface-tint);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    font-size: .875rem;
    color: var(--text-color);
    line-height: 1.45;
}
.class-card-next svg {
    width: 16px;
    height: 16px;
    color: var(--primary-color);
    flex-shrink: 0;
    margin-top: .12rem;
}
.class-card-next strong { font-weight: 650; color: var(--primary-color); }
.class-card-next-where { color: var(--text-muted); }
.class-card-seats {
    display: inline-block;
    margin-left: .4rem;
    padding: .06rem .45rem;
    border-radius: 999px;
    background: rgba(196, 18, 48, .09);
    color: var(--aha-red);
    font-size: .74rem;
    font-weight: 650;
    white-space: nowrap;
}

/* ===========================================================================
   Hero calls to action
   ---------------------------------------------------------------------------
   The primary was a mint-to-emerald gradient set inline — a third green with no
   relationship to anything else on the page. Green here now means one thing:
   go, book this. It is a flat, confident fill rather than a gradient, which is
   what the rest of the page does now.
   =========================================================================== */
.btn-hero-primary,
.btn-hero-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .95rem 2rem;
    border-radius: 10px;
    font-weight: 650;
    font-size: 1rem;
    letter-spacing: -.005em;
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn-hero-primary {
    background: #0f9d63;
    border: 1px solid #0f9d63;
    color: #fff;
}
.btn-hero-primary:hover,
.btn-hero-primary:focus-visible {
    background: #0c8353;
    border-color: #0c8353;
    color: #fff;
    transform: translateY(-1px);
}
.btn-hero-ghost {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
}
.btn-hero-ghost:hover,
.btn-hero-ghost:focus-visible {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .55);
    color: #fff;
    transform: translateY(-1px);
}
.btn-hero-primary:focus-visible,
.btn-hero-ghost:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* Payment assurance in the order summary. Stated where the decision is made,
   not in gray under the button after it. */
.checkout-assurance {
    margin-top: 1.25rem;
    padding: .9rem 1rem;
    background: var(--surface-tint);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
}
.checkout-assurance-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .9rem;
    font-weight: 650;
    color: var(--primary-color);
}
.checkout-assurance-head svg { width: 17px; height: 17px; flex-shrink: 0; }
.checkout-assurance-body {
    margin: .45rem 0 0;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--text-muted);
}

/* ===========================================================================
   Footer
   ---------------------------------------------------------------------------
   Was a single centered line. A footer is the last place a visitor checks before
   deciding a business is real, so it now answers what they go there for: what is
   taught, who authorizes it, where it happens, and how to make contact.
   =========================================================================== */
.site-footer {
    background: var(--primary-dark);
    color: rgba(255, 255, 255, .72);
    padding: 3.25rem 0 0;
    margin-top: auto;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.15fr;
    gap: 2.5rem 2rem;
    padding-bottom: 2.5rem;
}
.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: 1rem;
    text-decoration: none;
}
.footer-brand-mark { height: 34px; width: auto; }
.footer-brand-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.01em;
}
.footer-blurb {
    font-size: .875rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, .62);
    margin: 0 0 1.4rem;
    max-width: 34ch;
}
.footer-credential {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .85rem 1rem;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--radius);
    font-size: .78rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, .62);
    max-width: 22rem;
}
.footer-credential strong { color: #fff; font-weight: 650; }

/* The ATC lockup on a white plate, so the black wordmark holds against the navy. */
.footer-aha-logo {
    height: 40px;
    width: auto;
    background: #fff;
    padding: 5px 7px;
    border-radius: 5px;
    flex-shrink: 0;
}

.footer-heading {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 1.1rem;
}
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.footer-list a {
    color: rgba(255, 255, 255, .72);
    font-size: .875rem;
    text-decoration: none;
    transition: color .15s ease;
}
/* Never underline. Links are distinguished by color and weight; focus gets a
   visible outline instead, so keyboard users still get an indicator. */
.footer-list a:hover { color: #fff; }
.footer-list a:focus-visible {
    color: #fff;
    outline: 2px solid rgba(255,255,255,.7);
    outline-offset: 2px;
    border-radius: 2px;
}
.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .875rem;
    color: rgba(255, 255, 255, .72);
}
.footer-contact svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    margin-top: .18rem;
    color: var(--aha-red);
}

.footer-social { display: flex; gap: .55rem; margin-top: 1.4rem; flex-wrap: wrap; }
.footer-social-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .8);
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.footer-social-mark svg { width: 17px; height: 17px; }
a.footer-social-mark:hover,
a.footer-social-mark:focus-visible {
    background: var(--aha-red);
    border-color: var(--aha-red);
    color: #fff;
}
/* Accounts that do not exist yet: present, but not pretending to be clickable. */
.footer-social-mark.is-placeholder { opacity: .45; cursor: default; }

.footer-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1.5rem;
    padding: 1.15rem 0 1.4rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: .78rem;
    color: rgba(255, 255, 255, .5);
}
.footer-bar-meta { color: rgba(255, 255, 255, .38); }

@media (max-width: 991px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .footer-col-brand { grid-column: 1 / -1; }
}
@media (max-width: 575px) {
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bar { flex-direction: column; align-items: flex-start; }
}

/* ===========================================================================
   No underlined links, anywhere.
   ---------------------------------------------------------------------------
   Owner preference, and it holds for hover and focus too. Links stay
   distinguishable by color and weight; keyboard focus is shown with an outline,
   which is a stronger indicator than an underline anyway and does not shift
   the text baseline.
   =========================================================================== */
a,
a:hover,
a:focus,
a:active,
a:visited {
    text-decoration: none;
}
a:focus-visible {
    outline: 2px solid var(--primary-light);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ===========================================================================
   Header — utility bar, brand lockup, navigation, primary action
   ---------------------------------------------------------------------------
   Two tiers. The thin top strip carries the three facts a prospective student
   checks first — how to phone, where classes run, who authorizes them — and the
   main bar carries identity, navigation and the one action we want clicked.
   =========================================================================== */
.utility-bar {
    background: #0a1220;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    font-size: .8rem;
}
.utility-inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: .5rem 0;
    color: rgba(255, 255, 255, .62);
    flex-wrap: wrap;
}
.utility-spacer { flex: 1; }
.utility-item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: rgba(255, 255, 255, .62);
    white-space: nowrap;
    transition: color .15s ease;
}
.utility-item svg { width: 14px; height: 14px; color: var(--aha-red); flex-shrink: 0; }
a.utility-item:hover, a.utility-item:focus-visible { color: #fff; }
.utility-strong { color: #fff; font-weight: 600; }

/* Brand lockup: the mark, the name, and a line saying what the business does.
   "Draco BLS" on its own tells a first-time visitor nothing. */
.navbar-brand { display: inline-flex; align-items: center; gap: .7rem; }
.brand-lockup { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.015em;
    margin: 0;
}
.brand-tagline {
    font-size: .68rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .58);
    font-weight: 500;
    margin-top: .12rem;
    white-space: nowrap;
}

/* The tagline names both certifying bodies, which makes it long. On a narrow
   viewport the brand lockup and the hamburger compete for the same row, and a
   wrapping tagline pushes the header taller and shunts the toggle out of line.
   Below 480px the brand name alone carries the identity, so the tagline steps
   aside rather than breaking the header. */
@media (max-width: 480px) {
    .brand-tagline { display: none; }
}

/* Navigation as text, not buttons. The filled shape is reserved for the CTA, so
   the page has exactly one thing that looks like the thing to press. */
.site-nav { gap: .35rem; }
.navbar-nav .nav-link.site-nav-link {
    color: rgba(255, 255, 255, .82);
    font-weight: 500;
    font-size: .95rem;
    padding: .5rem .85rem !important;
    border-radius: 6px;
    background: transparent;
    border: 0;
    position: relative;
    transition: color .15s ease, background-color .15s ease;
}
.navbar-nav .nav-link.site-nav-link:hover,
.navbar-nav .nav-link.site-nav-link:focus-visible { color: #fff; background: rgba(255, 255, 255, .07); }
/* Active state.
 *
 * A raised tab rather than a rule underneath the words: a soft lift off the bar,
 * brighter text, and a red edge seated along the bottom of the tab itself. The
 * edge is an inset box-shadow, so it is drawn on the element's own box and spans
 * it exactly — there is no offset to get wrong and nothing for another rule's
 * width or transform to interfere with.
 *
 * It also reads differently from hover, which only tints, so "where I am" and
 * "what I am about to click" are never the same signal. */
.navbar-nav .nav-link.site-nav-link.active {
    color: #fff;
    font-weight: 650;
    background: rgba(255, 255, 255, .11);
    box-shadow: inset 0 -2px 0 0 var(--aha-red);
}
.navbar-nav .nav-link.site-nav-link.active:hover {
    background: rgba(255, 255, 255, .15);
}

.nav-actions { align-items: center; gap: .5rem; }
.nav-cta {
    display: inline-flex;
    align-items: center;
    padding: .55rem 1.15rem;
    background: var(--aha-red);
    border: 1px solid var(--aha-red);
    color: #fff;
    font-weight: 650;
    font-size: .94rem;
    border-radius: 8px;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.nav-cta:hover, .nav-cta:focus-visible {
    background: var(--aha-red-dark);
    border-color: var(--aha-red-dark);
    color: #fff;
    transform: translateY(-1px);
}
.nav-cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.cert-menu { border: 0; box-shadow: var(--shadow-lg); border-radius: 10px; padding: .4rem; }
/* The certifications menu.
 *
 * Bootstrap sizes a dropdown to its toggle, which left the longest course name —
 * "AHA Pediatric Emergency Assessment, Recognition, and Stabilization (PEARS)" —
 * wrapping over five lines in a column narrower than the words in it. Given a real
 * width every name sits on one line or two, and the list reads as a menu rather
 * than a paragraph. */
.cert-menu {
    min-width: 27rem;
    border: 1px solid var(--hairline);
    box-shadow: 0 12px 32px -8px rgba(15, 27, 42, .28);
    border-radius: 12px;
    padding: .45rem;
    margin-top: .4rem;
}
.cert-menu .dropdown-item {
    border-radius: 8px;
    padding: .6rem .8rem;
    font-size: .93rem;
    font-weight: 500;
    color: var(--primary-color);
    white-space: normal;
    line-height: 1.35;
    transition: background-color .13s ease, color .13s ease;
}
.cert-menu .dropdown-item:hover,
.cert-menu .dropdown-item:focus {
    background: var(--surface-tint);
    color: var(--primary-dark);
}
@media (max-width: 991px) {
    /* Inside the collapsed mobile menu a fixed width would overflow the viewport. */
    .cert-menu { min-width: 0; width: 100%; box-shadow: none; border: 0; padding-left: 0; }
}

@media (max-width: 991px) {
    .utility-inner { justify-content: center; gap: 1rem; }
    .utility-spacer { display: none; }
    .site-nav { margin-top: .75rem; }
    .nav-actions { margin-top: .5rem; align-items: stretch; }
    .nav-cta { justify-content: center; }
    /* In the stacked mobile menu the tab reads as a full-width selected row. */
    .navbar-nav .nav-link.site-nav-link.active { box-shadow: inset 3px 0 0 0 var(--aha-red); }
}
@media (max-width: 767px) { .utility-hide-md { display: none; } }
@media (max-width: 575px) { .utility-hide-sm { display: none; } }