/*
                ------------------------------------------------------------------
                |     Title :::::::::::    Super Eventawy - Enhancements          |
                ------------------------------------------------------------------

    A light polish layer loaded after the original stylesheets. The 2019 look
    is kept on purpose: same navy (#002147) / gold (#FFB606) palette, same
    layout, same typography. Only the rough edges are smoothed out - images
    that stretch, cards with no hover feedback, missing focus states and a few
    jumpy transitions.

    Nothing here changes structure, so removing this one <link> restores the
    original design exactly.
*/

/*********************** Images ***********************/

/* keep every picture inside its box instead of stretching it */
img {
  max-width: 100%;
}

.courses .course .course-img,
.news .news-img,
.events .event-image .event-img,
.member .TeamMemberImg,
.image-div .image img,
.comments .image img,
.post-image {
  width: 100%;
  object-fit: cover;
  background-color: #002147;
}

/* sponsor logos must never be cropped */
.sponsers .sponsor img {
  object-fit: contain;
}

/* round thumbnails should crop, not squash */
.courses .course div .teacher-img,
.auth-img,
.comment-photo,
.profile-img {
  object-fit: cover;
}

/* fade pictures in once they decode, so cards stop flashing white */
img {
  animation: se-fade-in .45s ease both;
}

@keyframes se-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* generated placeholders (see js/fallback.js) sit flush in their frame */
img.is-placeholder {
  object-fit: cover;
  background-color: #002147;
}

/*********************** Cards ***********************/

.courses .course,
.news .news-single,
.team .member,
.about .square,
.events .event .event-image {
  transition: transform .25s ease, box-shadow .25s ease;
  -webkit-transition: transform .25s ease, box-shadow .25s ease;
}

.courses .course:hover,
.news .news-single:hover,
.team .member:hover,
.about .square:hover {
  transform: translateY(-5px);
  -webkit-transform: translateY(-5px);
  box-shadow: 0 12px 26px rgba(0, 33, 71, .18);
  -webkit-box-shadow: 0 12px 26px rgba(0, 33, 71, .18);
}

/* the gold rule under card titles grows on hover */
.courses .course div h4::after {
  transition: width .3s ease;
  -webkit-transition: width .3s ease;
}

.courses .course:hover div h4::after {
  width: 120px;
}

/*********************** Buttons & links ***********************/

button,
.seeAll,
.navbar-nav .nav-link,
footer .footer-links li {
  transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .2s ease;
  -webkit-transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .2s ease;
}

button:active,
.seeAll:active {
  transform: translateY(1px);
  -webkit-transform: translateY(1px);
}

.courses .course div button:hover,
.seeAll:hover {
  box-shadow: 0 4px 14px rgba(0, 33, 71, .35);
  -webkit-box-shadow: 0 4px 14px rgba(0, 33, 71, .35);
}

footer .footer-links li:hover {
  transform: translateX(-6px);
  -webkit-transform: translateX(-6px);
}

/* visible keyboard focus - the original design had none at all */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #FFB606;
  outline-offset: 2px;
  border-radius: 3px;
}

/*********************** Forms ***********************/

input:focus,
textarea:focus,
select:focus {
  border-color: #FFB606;
}

/*********************** Loader ***********************/

.loader img {
  animation: se-pulse 1.6s ease-in-out infinite;
}

@keyframes se-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

/*********************** Small niceties ***********************/

html {
  scroll-behavior: smooth;
}

::selection {
  background: #FFB606;
  color: #002147;
}

/* the navbar sits over the hero - soften the edge while scrolling */
.navbar.bg-light {
  box-shadow: 0 2px 10px rgba(0, 33, 71, .12);
}

/* respect users who ask for less motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}