/* Crucial Survival - Ionic Color Variables and Minimal Custom Styles */

:root {
    /* Ionic Color Theme - Primary (Dark Green) */
    --ion-color-primary: #004A2F;
    --ion-color-primary-rgb: 0, 74, 47;
    --ion-color-primary-contrast: #ffffff;
    --ion-color-primary-contrast-rgb: 255, 255, 255;
    --ion-color-primary-shade: #003d26;
    --ion-color-primary-tint: #1a5f44;

    /* Ionic Color Theme - Secondary (Rust) */
    --ion-color-secondary: #B7410E;
    --ion-color-secondary-rgb: 183, 65, 14;
    --ion-color-secondary-contrast: #ffffff;
    --ion-color-secondary-contrast-rgb: 255, 255, 255;
    --ion-color-secondary-shade: #A1370C;
    --ion-color-secondary-tint: #BF5526;

    /* Ionic Color Theme - Tertiary (Sandy Tan) */
    --ion-color-tertiary: #D4A574;
    --ion-color-tertiary-rgb: 212, 165, 116;
    --ion-color-tertiary-contrast: #000000;
    --ion-color-tertiary-contrast-rgb: 0, 0, 0;
    --ion-color-tertiary-shade: #BB9166;
    --ion-color-tertiary-tint: #D8AE82;

    /* Custom Color - Orange (Phone) */
    --ion-color-orange: #FF6A00;
    --ion-color-orange-rgb: 255, 106, 0;
    --ion-color-orange-contrast: #ffffff;
    --ion-color-orange-contrast-rgb: 255, 255, 255;
    --ion-color-orange-shade: #e05e00;
    --ion-color-orange-tint: #ff7a1a;

    /* Custom Color - WhatsApp Green */
    --ion-color-whatsapp: #25D366;
    --ion-color-whatsapp-rgb: 37, 211, 102;
    --ion-color-whatsapp-contrast: #ffffff;
    --ion-color-whatsapp-contrast-rgb: 255, 255, 255;
    --ion-color-whatsapp-shade: #20ba5a;
    --ion-color-whatsapp-tint: #3ad773;
}

.ion-color-orange {
    --ion-color-base: var(--ion-color-orange);
    --ion-color-base-rgb: var(--ion-color-orange-rgb);
    --ion-color-contrast: var(--ion-color-orange-contrast);
    --ion-color-contrast-rgb: var(--ion-color-orange-contrast-rgb);
    --ion-color-shade: var(--ion-color-orange-shade);
    --ion-color-tint: var(--ion-color-orange-tint);
}

.ion-color-whatsapp {
    --ion-color-base: var(--ion-color-whatsapp);
    --ion-color-base-rgb: var(--ion-color-whatsapp-rgb);
    --ion-color-contrast: var(--ion-color-whatsapp-contrast);
    --ion-color-contrast-rgb: var(--ion-color-whatsapp-contrast-rgb);
    --ion-color-shade: var(--ion-color-whatsapp-shade);
    --ion-color-tint: var(--ion-color-whatsapp-tint);
}

/* Section Divider Prominence - Make section titles larger and bolder.
   Ionic injects its own scoped ion-label styles (font-size: 14px) after
   this stylesheet, so !important is required to actually win. */
ion-item-divider ion-label {
    font-size: 2rem !important;
    font-weight: bold;
}

/* Course category headings (Foundation Courses, Specialised Training
   Programmes, Extreme Environments, Custom Training) - grow to match the
   prominence of the section dividers above them */
.course-category-title {
    font-size: 1.5rem;
    font-weight: bold;
}

/* Keep email address lower case instead of the default button uppercase transform */
.no-uppercase {
    text-transform: none;
}

/* Instructor photo frame */
.instructor-photo {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid var(--ion-color-secondary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    margin-bottom: 1rem;
}

/* Hazard hook banner - vertically centre icons with text */
.hazard-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.hazard-icon {
    font-size: 1.75rem;
    transform: translateY(4px);
}

.hazard-text {
    display: inline-block;
    font-size: 1.1em;
    transform: translateY(-3px);
}

/* Center course icons with vertical margin */
ion-card-content ion-icon.ion-margin-vertical,
.ion-text-center > ion-icon.ion-margin-vertical {
    display: block;
    margin-left: auto;
    margin-right: auto;
}