/* =====================================================
   CSS Variables
===================================================== */
:root {
    --color-primary:     #56389b;
    --color-primary-dark:#552b97;
    --color-accent:      #f6a641;
    --color-danger:      #f16667;
    --color-teal:        #67c5c7;
    --color-blue:        #007ea6;
    --color-stripe:      #6772E5;
    --color-text-muted:  #6c757d;
    --color-white:       #ffffff;

    /* These should be defined globally in your base/theme file */
    --cream:     #faf9f6;
    --ink:       #1a1a1a;
    --ff-sans:   'Your Chosen Font', sans-serif;
}

/* =====================================================
   Base Body Styles
===================================================== */
body {
    background: var(--cream);
    color: var(--ink);
    font-family: var(--ff-sans);
    font-weight: 300;
    min-height: 100vh;
    overflow-x: hidden;
}

/* =====================================================
   Page Header
===================================================== */
.page-header-articles {
    background: #f8f9fa;
    padding: 4rem 0;
    text-align: center;
}
.page-header-articles h1 {
    font-weight: 700;
}
.page-header-articles p {
    max-width: 600px;
    margin: 0 auto;
    color: var(--color-text-muted);
}

/* =====================================================
   Article Cards
===================================================== */
.article-card {
    border: none;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 100%;
}
.article-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}
.article-card img {
    height: 240px;
    object-fit: cover;
    width: 100%;
    display: block;
}
.article-meta {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}
.read-more {
    text-decoration: none;
    font-weight: 600;
    color: var(--color-stripe);
}
.read-more:hover {
    text-decoration: underline;
}

/* Line-clamp: removed conflicting min-height */
.card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}
.card-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-clamp: 3;
    overflow: hidden;
}

/* =====================================================
   Buttons & Utilities
===================================================== */
.text-white {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-white-rgb), var(--bs-text-opacity));
}
@media (max-width: 768px) {
    .btn,
    .btn-group {
        width: auto;
        display: block;
        text-align: center;
    }
}

/* =====================================================
   Header & Top Accent
===================================================== */
header {
    border-top: 10px solid var(--color-primary-dark);
}

header .header-links .social-media {
    background-color: var(--color-teal);
}

header .header-links .donate {
    background-color: var(--color-blue);
}

header .header-links .full-date {
    background: #017cbf url("../images/shared/left-angle.png") no-repeat left center;
    background-size: auto 100%;
}

/* Header Social Media Hover Colors */
.header-links .social-media li .fa-facebook:hover  { color: #3765a3; }
.header-links .social-media li .fa-twitter:hover   { color: #55acee; }
.header-links .social-media li .fa-google-plus:hover { color: #d44132; }

/* =====================================================
   Navbar
===================================================== */
.navbar {
    padding: 0.9rem 1rem;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.navbar-brand .logo {
    max-height: 60px;
}
.navbar-nav .nav-link {
    font-weight: 500;
    transition: color 0.2s ease;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--color-primary);
}
.navbar-nav .nav-link.active {
    font-weight: 600;
}
.navbar-nav > li {
    position: relative;
}
.navbar-nav > li.open > .nav-link,
.navbar-nav > li.open > .nav-link:hover,
.navbar-nav > li.open > .nav-link:focus {
    background-color: var(--color-danger);
    color: var(--color-white);
    border-radius: 5px 5px 0 0;
}

/* Pseudo-element creates visual bridge between nav item and dropdown */
.navbar-nav > li.open > .nav-link::before {
    content: '';
    display: block;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: -30px;
    border-radius: 5px 5px 0 0;
    background-color: var(--color-danger);
}
@media (max-width: 767px) {
    .navbar-nav > li.open > .nav-link::before {
        background-color: transparent;
    }
}

.dropdown-menu {
    border-radius: 0.75rem;
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    padding: 0.5rem 0;
    background-color: #707070;
    min-width: 195px;
}
.dropdown-item {
    padding: 0.6rem 1.2rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.dropdown-item:hover {
    background-color: rgba(86, 56, 155, 0.08);
    color: var(--color-primary);
}

/* Right-align dropdowns for later nav items */
.navbar-nav > li:nth-child(n+5) > .dropdown-menu {
    left: auto;
    right: 1px;
    border-radius: 5px 0 5px 5px;
}

/* Navbar social icons & donate button */
.social-icons i {
    font-size: 36px;
    transition: transform 0.15s ease;
}
.social-icons i:hover {
    transform: scale(1.1);
}
.social-icons a {
    color: inherit;
}
.navbar .donate-btn {
    background-color: var(--color-primary);
    border-radius: 50px;
    padding: 0.5rem 1.25rem;
    font-weight: 600;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.navbar .donate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}
@media (max-width: 991px) {
    .navbar .social-icons,
    .navbar .donate-btn {
        display: none;
    }
}

/* =====================================================
   Prayers
===================================================== */
.prayers {
    background: #9b7fe2;
}

/* =====================================================
   Inside Main
===================================================== */
#insideMain .breadCrumb {
    top: 0;
}
#insideMain .side-bar {
    margin-top: 80px;
}

/* =====================================================
   Timetable
===================================================== */
.dptTimetable > tbody:first-child > tr:nth-child(4) {
    display: none;
}

/* Footer Logo */
footer .footer-logo {
    max-height: 50px;
}

/* Ensure social icons wrap nicely on small screens */
footer .footer-social {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

footer .footer-social li {
    display: flex;
    align-items: center;
    margin: 0.5rem;
    position: relative;
}

footer .footer-social li a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #fff;
}

footer .footer-social li a i {
    font-size: 30px;
    margin-right: 0.5rem;
    transition: transform 0.3s ease-in-out;
}

footer .footer-social li a i:hover {
    transform: scale(1.1);
}

footer .footer-social li a span {
    display: flex;
    flex-direction: column;
    font-size: 12px;
}

footer .footer-social li a span em {
    font-style: normal;
    font-size: 11px;
}

/* Mobile adjustments */
@media (max-width: 576px) {
    footer .footer-social li {
        width: 45%;
        justify-content: center;
    }
    footer .footer-social li a span {
        font-size: 11px;
        text-align: center;
    }
    footer .footer-social li a span em {
        font-size: 10px;
    }
}

/* =====================================================
   Prayer – Desktop / Mobile Toggle
===================================================== */
#prayer_mobile {
    margin-left: 0;
    margin-right: 0;
    text-align: center;
}
@media (max-width: 767px) {
    #prayer_desktop { display: none; }
}
@media (min-width: 768px) {
    #prayer_mobile  { display: none; }
}

.dropdown-item {
  display: block;
  width: 100%; // For `<button>`s
  padding: var(--#{$prefix}dropdown-item-padding-y) var(--#{$prefix}dropdown-item-padding-x);
  clear: both;
  font-weight: $font-weight-normal;
  color: var(--#{$prefix}dropdown-link-color);
  text-align: inherit; // For `<button>`s
  text-decoration: if($link-decoration == none, null, none);
  white-space: nowrap; // prevent links from randomly breaking onto new lines
  background-color: transparent; // For `<button>`s
  border: 0; // For `<button>`s
  @include border-radius(var(--#{$prefix}dropdown-item-border-radius, 0));

  &:hover,
  &:focus {
    color: var(--#{$prefix}dropdown-link-hover-color);
    text-decoration: if($link-hover-decoration == underline, none, null);
    @include gradient-bg(var(--#{$prefix}dropdown-link-hover-bg));
  }

  &.active,
  &:active {
    color: var(--#{$prefix}dropdown-link-active-color);
    text-decoration: none;
    @include gradient-bg(var(--#{$prefix}dropdown-link-active-bg));
  }