/* =========================================================
   PAGE CONTENT MIN HEIGHT
   Footer stays naturally below content and does not overlap
   ========================================================= */

/* MTIC official colour tokens + shared motion tokens */
:root {
    --mtic-teal: #01B496;
    --mtic-dark-green: #032F3C;

    --mtic-teal-rgb: 1, 180, 150;
    --mtic-dark-green-rgb: 3, 47, 60;

    --mtic-color-primary: #01B496;
    --mtic-color-accent: #01B496;
    --mtic-color-dark: #032F3C;

    /* Theme aliases used by existing component CSS */
    --mtic-primary: var(--mtic-teal);
    --mtic-primary-rgb: var(--mtic-teal-rgb);
    --mtic-primary-light: #21D1B4;
    --mtic-accent: var(--mtic-teal);
    --mtic-dark: var(--mtic-dark-green);
    --mtic-dark-rgb: var(--mtic-dark-green-rgb);

    --mtic-link-color: #032F3C;
    --mtic-link-hover-color: #01B496;

    --mtic-button-hover-speed: 360ms;
    --mtic-button-hover-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --mtic-button-shadow: 0 10px 24px rgba(var(--mtic-dark-green-rgb), 0.18);
    --mtic-button-shine-strong: rgba(255, 255, 255, 0.30);
    --mtic-button-shine-soft: rgba(255, 255, 255, 0.09);
}

#main-content,
.site-main,
main {
    min-height: calc(75vh - 126px);
}

.mtic-footer,
footer {
    position: relative;
    bottom: auto;
}

/* =========================================================
   Shared MTIC hover animation helpers
   - Teal base, soft white shine, dark-green half hover wash
   - Used by component CSS and safe for existing .mtic-btn buttons
   ========================================================= */

.mtic-btn,
.mtic-slide-cta,
.mtic-speech-card__readmore,
.mtic-speeches-sidebar__search-btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transform: translateZ(0);
    transition:
        color var(--mtic-button-hover-speed) var(--mtic-button-hover-ease),
        border-color var(--mtic-button-hover-speed) var(--mtic-button-hover-ease),
        background-position var(--mtic-button-hover-speed) var(--mtic-button-hover-ease),
        box-shadow var(--mtic-button-hover-speed) var(--mtic-button-hover-ease),
        transform var(--mtic-button-hover-speed) var(--mtic-button-hover-ease);
}

.mtic-btn:hover,
.mtic-slide-cta:hover,
.mtic-speech-card__readmore:hover,
.mtic-speeches-sidebar__search-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--mtic-button-shadow);
}

.mtic-btn:focus-visible,
.mtic-slide-cta:focus-visible,
.mtic-speech-card__readmore:focus-visible,
.mtic-speeches-sidebar__search-btn:focus-visible {
    outline: 2px solid var(--mtic-teal);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}


/* =========================================================
   PETRONAS-style hover wash
   The reference does not fully flood the button. A narrow overlay
   slides in from the right: soft white/transparent leading edge,
   then MTIC dark green, stopping around the right half.
   ========================================================= */
:root {
    --mtic-petronas-hover-width: 62%;
    --mtic-petronas-hover-speed: 360ms;
    --mtic-petronas-hover-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --mtic-petronas-hover-gradient: linear-gradient(90deg,
        rgba(255, 255, 255, 0.30) 0%,
        rgba(255, 255, 255, 0.12) 18%,
        rgba(var(--mtic-dark-green-rgb), 0.62) 46%,
        rgba(var(--mtic-dark-green-rgb), 0.94) 100%
    );
}

/* Keep normal buttons subtle. The stronger circular wash is defined
   in each component file so text-only buttons are not covered badly. */
.mtic-btn:hover,
.mtic-slide-cta:hover,
.mtic-speech-card__readmore:hover,
.mtic-speeches-sidebar__search-btn:hover {
    transform: translateY(-1px);
}