html {
  scroll-behavior: smooth;
  padding: 1%;
}

body {
    background-color: #001523;
    font-family: "Aldrich", sans-serif;
    color: #952EEC !important;
    padding-top: 70px;
}

p, h5 {
    text-align: center;
}

.post-image {
  height: 30%;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2%;
  margin-bottom: 2%;
  display: block;
}



#intro-img {
    width: 100%;
}

hr {
  border: none;          /* removes default browser styling */
  height: 2px;           /* thickness */
  background-color: #333; /* color */
  margin: 30px 0;        /* spacing above and below */
}

header {
    font-family: "Aldrich", sans-serif;
    font-size: xx-large;
    font-weight: 500;
}

.navbar-light .navbar-brand,
.navbar-light .navbar-nav .nav-link {
    color: #952EEC !important;
    background-color: #001523;
}

#navbarNav{
  width: 100%;
}


.mr-3 {
    height: 150px;
    width: 200px;
}



/* ticker styles */

.ticker span {
  margin-right: 50px;
}

.ticker-wrap {
  width: 100%;
  overflow: hidden;
  color: #fff;          
  padding: 10px 0;
}

.ticker {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  animation: ticker 25s linear infinite;
}

@keyframes ticker {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* news styles */
.carousel-caption {
  backdrop-filter: blur(10px);        /* the actual blur */
  -webkit-backdrop-filter: blur(10px); /* safari support */
  background-color: rgba(0, 0, 0, 0.3); /* optional: adds a dark tint for better contrast */
  padding: 20px;
  border-radius: 10px;
}


/* social button styles */
.social-icons {
  text-align: center;          /* centers everything inside */
  margin: 20px 0;              /* optional spacing above/below */
}

.social-icons a {
  font-size: 32px;             /* icon size */
  margin: 0 15px;              /* spacing between icons */
  color: #952EEC;              /* your base color */
  text-decoration: none;       /* remove underline from links */
}

.social-icons a:hover {
  color: #ff0000;              /* your hover color */
}

#qr-code {
    width: 100%;
    height: 100%;
}

/* blog */

#blog .card-img-top {
  object-fit: cover;
  height: 200px; /* adjust as needed */
}

#blog .card-text {
  font-size: 0.9rem;
}

.card-title {
  text-align: center;
}

.flex-blog-type-one {
  display: flex;
}

.flex-blog {
  display: flex;
  align-items: stretch;       /* keeps both columns same height */
  gap: 12px;                  /* small spacing; not a big gap */
  margin-bottom: 16px;
}

/* text slightly larger than image */
.blog-text {
  flex: 3;                    /* 3 parts */
  padding: 12px;
  text-align: center;
}

.blog-media {
  flex: 2;                    /* 2 parts */
  overflow: hidden;           /* enables clean cropping */
  border-radius: 8px;         /* optional */
}

/* make the image fill its box nicely */
.blog-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;             /* removes tiny baseline gap under images */
}

/* Alternating order */
.flex-blog.type-one .blog-text { order: 1; }
.flex-blog.type-one .blog-media { order: 2; }

.flex-blog.type-two .blog-text { order: 2; }
.flex-blog.type-two .blog-media { order: 1; }

/* Mobile: stack vertically */
@media (max-width: 768px) {
  .flex-blog {
    flex-direction: column;
  }
  .flex-blog.type-two .blog-text,
  .flex-blog.type-two .blog-media,
  .flex-blog.type-one .blog-text,
  .flex-blog.type-one .blog-media {
    order: initial;
  }

  .blog-media img {
    height: 240px; /* gives a nice consistent image height on mobile */
  }
}

.map{
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* Mobile styles */
@media (max-width: 768px) {
    .media {
        display: block;               /* stack image and text */
        text-align: center;           /* optional – looks cleaner on phones */
        margin-bottom: 2rem;
    }


    .media img {
        width: 100%;                  /* image takes full width */
        height: auto;
        margin: 0 0 15px 0 !important; /* remove right margin from .mr-3 */
        display: block;
    }

    .media-body {
        display: block;
        text-align: center;            
        padding: 0 10px;
    }
}

/* TEST */

/* FORCE mobile hamburger icon to white */
.navbar .navbar-toggler {
  border: 1px solid rgba(255,255,255,0.75) !important;
}

.navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}