/* =====================================================================
   Index page · unified button system
   Scope: applied ONLY via <link> in index.html — does not touch other pages.
   Reference: .enroll-now-btn (Job Openings) sets the golden token.
                .view-program-btn (Job Openings) sets the green token.
   ===================================================================== */

:root {
    /* Golden CTA (primary) */
    --btn-gold-bg: linear-gradient(180deg, #ebcf9b 0%, #b97244 100%);
    --btn-gold-bg-hover: linear-gradient(180deg, #f2d9a9 0%, #c17e4f 100%);
    --btn-gold-text: #03301b;
    --btn-gold-shadow: 0 6px 20px rgba(185, 114, 68, 0.25);

    /* Green CTA (secondary) */
    --btn-green-bg: linear-gradient(180deg, #065831 0%, #03301b 100%);
    --btn-green-bg-hover: linear-gradient(180deg, #07693a 0%, #044022 100%);
    --btn-green-text: #ffffff;
    --btn-green-shadow: 0 6px 20px rgba(3, 48, 27, 0.2);

    /* Shared geometry / motion */
    --btn-radius: 8px;
    --btn-padding: 0.85rem 2rem;
    --btn-font-size: 1rem;
    --btn-font-weight: 500;
    --btn-font-weight-gold: 500;
    --btn-transition: all 0.3s ease;
    --btn-lift: translateY(-2px);
}

/* ---------------------------------------------------------------------
   1. GOLDEN BUTTONS (primary CTAs)
   ------------------------------------------------------------------- */
.menu-buttons .button.sign-up,
.enroll-now-btn,
.cta-button,
.dropdown-menu a.mobile-cta + a.mobile-cta {
    background: var(--btn-gold-bg) !important;
    color: var(--btn-gold-text) !important;
    border: none !important;
    font-weight: var(--btn-font-weight-gold) !important;
    border-radius: var(--btn-radius) !important;
    padding: var(--btn-padding);
    font-size: var(--btn-font-size);
    transition: var(--btn-transition) !important;
    box-shadow: none;
}

.menu-buttons .button.sign-up:hover,
.enroll-now-btn:hover,
.cta-button:hover,
.dropdown-menu a.mobile-cta + a.mobile-cta:hover {
    background: var(--btn-gold-bg-hover) !important;
    color: var(--btn-gold-text) !important;
    transform: var(--btn-lift);
    box-shadow: var(--btn-gold-shadow) !important;
    filter: none;
}

/* Preserve .cta-button's signature shine sweep on hover */
.cta-button:before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
}

/* Mobile-CTA pill shape stays rounded inside the dropdown */
.dropdown-menu a.mobile-cta + a.mobile-cta {
    border-radius: 999px !important;
    padding: 10px 16px;
    margin: 6px 12px;
    text-align: center;
}

/* ---------------------------------------------------------------------
   2. GREEN BUTTONS (secondary CTAs)
   ------------------------------------------------------------------- */
.view-program-btn,
.vision-section .know-more-btn,
.menu-buttons .button:not(.sign-up) {
    /* keep the outlined nav "Download Brochure" as a filled green button too,
       so that every brand-level CTA reads as one of two styles. */
}

.view-program-btn,
.vision-section .know-more-btn {
    background: var(--btn-green-bg) !important;
    color: var(--btn-green-text) !important;
    border: none !important;
    border-radius: var(--btn-radius) !important;
    padding: var(--btn-padding);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight) !important;
    transition: var(--btn-transition) !important;
    box-shadow: none;
}

.view-program-btn:hover,
.vision-section .know-more-btn:hover {
    background: var(--btn-green-bg-hover) !important;
    color: var(--btn-green-text) !important;
    transform: var(--btn-lift);
    box-shadow: var(--btn-green-shadow) !important;
}

/* ---------------------------------------------------------------------
   3. NAV "Download Brochure" — keep outline style (it sits on the dark
      green navbar; a filled button there would collide with the logo tile).
      Unify only the geometry + hover lift so it reads as the same family.
   ------------------------------------------------------------------- */
.menu-buttons .button:not(.sign-up) {
    border-radius: var(--btn-radius) !important;
    transition: var(--btn-transition) !important;
}

.menu-buttons .button:not(.sign-up):hover {
    transform: var(--btn-lift);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.15);
}

/* First mobile-cta in dropdown (Brochure) — outline style, matched geometry */
.dropdown-menu a.mobile-cta:first-of-type {
    border-radius: 999px !important;
    padding: 10px 16px;
    margin: 6px 12px;
    text-align: center;
    transition: var(--btn-transition) !important;
}
.dropdown-menu a.mobile-cta:first-of-type:hover {
    background: #03301b !important;
    color: #ffffff !important;
    filter: none;
}

/* ---------------------------------------------------------------------
   4. "FIND US NEARBY" SECTION BUTTONS
      - .contact-btn.primary-btn  (Contact US)   → golden primary
      - .contact-btn              (Get Directions) → green secondary
      Keep the signature left→right shine sweep (::after).
   ------------------------------------------------------------------- */
.find-us-section .contact-btn {
    font-size: var(--btn-font-size) !important;
    padding: var(--btn-padding) !important;
    border-radius: var(--btn-radius) !important;
    font-weight: var(--btn-font-weight) !important;
    border: none !important;
    transition: var(--btn-transition) !important;
    gap: 0.6rem !important;
}

.find-us-section .contact-btn {
    background: var(--btn-green-bg) !important;
    color: var(--btn-green-text) !important;
}

.find-us-section .contact-btn.primary-btn {
    background: var(--btn-gold-bg) !important;
    color: var(--btn-gold-text) !important;
    font-weight: var(--btn-font-weight-gold) !important;
}

.find-us-section .contact-btn:hover {
    background: var(--btn-green-bg-hover) !important;
    color: var(--btn-green-text) !important;
    transform: var(--btn-lift);
    box-shadow: var(--btn-green-shadow) !important;
}

.find-us-section .contact-btn.primary-btn:hover {
    background: var(--btn-gold-bg-hover) !important;
    color: var(--btn-gold-text) !important;
    transform: var(--btn-lift);
    box-shadow: var(--btn-gold-shadow) !important;
}

/* ---------------------------------------------------------------------
   6. SERVICE-CARD LAYOUT · pin the button row to the bottom of every card
      so "Know More" / "Talk to us" align on the same horizontal line across
      cards regardless of body-text length.
   ------------------------------------------------------------------- */
.course-card {
    display: flex;
    flex-direction: column;
}

.course-card .course-info {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.course-card .course-buttons {
    margin-top: auto;
}

/* ---------------------------------------------------------------------
   5. Small-screen sizing stays consistent across the family
   ------------------------------------------------------------------- */
@media (max-width: 768px) {
    .menu-buttons .button.sign-up,
    .enroll-now-btn,
    .cta-button,
    .view-program-btn,
    .vision-section .know-more-btn,
    .menu-buttons .button:not(.sign-up),
    .find-us-section .contact-btn,
    .find-us-section .contact-btn.primary-btn {
        padding: 0.7rem 1.4rem !important;
        font-size: 0.9rem !important;
    }
}