:root {
    --bs-link-color-rgb: 239, 191, 4; /* Your gold color */
    --bs-link-hover-color-rgb: 128, 0, 0 /* White for hover */
}
/* In sacstyle.css */
.site-header .top-header-bar {
    background-color: #500000; /* Your exact brand dark maroon */
}
.site-header .main-header {
    background: maroon url('https://sac.edu.ph/assets/images/bgcolor-header.png') no-repeat right;
    background-size: auto 100%;
    border-bottom: 5px solid #FFC107;
    height: 110px;
}
.site-header .college-name {
    color: #500000; 
    font-size: 1.8rem; 
    font-weight: bold; 
}
.site-header .tagline {
    color: #333333;
    font-size: 0.9rem; 
}
.site-header .site-logo {
    max-height: 80px; 
}
.text-maroon {
    color: #500000 !important;
    font-size: 1.2rem; 
    font-weight: bold; 
}
.border-maroon {	
    border: 3px solid #500000 !important;
}
.sac-navbar .nav-item .nav-link.active,
.sac-navbar .nav-item.dropdown .nav-link.active, /* For dropdown toggles */
.sac-navbar .nav-item.active-parent > .nav-link { /* For parent of active dropdown item */
    font-weight: bold;
    color: #500000 !important; /* Dark Maroon, or your preferred active color */
    /* Add other styling like a bottom border or background */
}
.sac-navbar .dropdown-item.active {
    background-color: #e9ecef; /* Or your preferred active dropdown item background */
    color: #000 !important;
}
/* --- Sidebar Specific Styles ---*/
.presidents-corner-widget img,
.img-placeholder { /* For the image placeholder */
    border: 3px solid #FFC107; /* Gold accent */
}
.presidents-corner-widget h5,
.login-widget h5,
.user-info-widget h5,
.contextual-nav-widget h5,
.contact-info-widget h5 {
    color: #500000; /* Maroon for titles */
}
.sac-btn-gold {
    background-color: #FFC107;
    border-color: #e0ac00; /* Slightly darker border for depth */
    color: #500000; /* Maroon text on gold */
}
.sac-btn-gold:hover, .sac-btn-gold:focus {
    background-color: #e0ac00;
    border-color: #c79800;
    color: #400000;
}
.sac-btn-gold-outline {
    background-color: transparent;
    border: 2px solid #400000; /* Maroon border */
    color: #400000; /* maroon text */
    transition: all 0.3s ease;
}

.sac-btn-gold-outline:hover,
.sac-btn-gold-outline:focus {
    background-color: #e0ac00; /* Gold fill on hover */
    border-color: #400022; /* Slightly darker border */
    color: #400000; /* Maroon text on gold */
}
.sac-btn-maroon {
    background-color: #500000;
    border-color: #400000;
    color: #FFFFFF;
}
.sac-btn-maroon:hover, .sac-btn-maroon:focus {
    background-color: #400000;
    border-color: #300000;
    color: #FFFFFF;
}
.sac-btn-maroon-outline {
    color: #500000; /* Maroon text */
    border-color: #500000; /* Maroon border */
}
.sac-btn-maroon-outline:hover,
.sac-btn-maroon-outline:focus {
    color: #FFFFFF; /* White text on hover */
    background-color: #500000; /* Maroon background on hover */
    border-color: #500000;
}
/* Login/User Pills */
.sac-sidebar .nav-pills .nav-link {
    color: #500000; /* Maroon text */
    background-color: #e9ecef; /* Light grey inactive */
    margin: 0 2px; /* Small gap between pills */
}
.sac-sidebar .nav-pills .nav-link.active,
.sac-sidebar .nav-pills .show > .nav-link {
    color: #FFFFFF;
    background-color: #500000; /* Maroon active */
}
/* Contextual Nav Pills */
.contextual-nav-widget .nav-pills .nav-link {
    color: #500000;
    padding: 0.5rem 1rem;
    text-align: left;
}
.contextual-nav-widget .nav-pills .nav-link:hover {
    background-color: #e9ecef; /* Light hover */
}
.contextual-nav-widget .nav-pills .nav-link.active,
.contextual-nav-widget .nav-pills .nav-link.sac-nav-active { /* Custom active class */
    background-color: #FFC107; /* Gold active */
    color: #500000;
    font-weight: bold;
}
.user-info-widget .list-group-item {
    background-color: transparent; /* Make list items transparent within the widget bg */
}
.user-info-widget .btn-outline-secondary {
    border-color: #adb5bd;
    color: #495057;
}
.user-info-widget .btn-outline-secondary:hover {
    background-color: #e9ecef;
    color: #343a40;
}
.user-info-widget .btn-outline-danger { /* For admin panel button */
    border-color: #dc3545;
    color: #dc3545;
}
.user-info-widget .btn-outline-danger:hover {
    background-color: #dc3545;
    color: #fff;
}
/* SAC Nav bar... exact brand gold */
.sac-navbar {
    background-color: #FFD700; /* Your exact brand gold */
}
.sac-navbar .nav-link {
    color: #500000; /* Dark Maroon text on gold background */
}
.sac-navbar .nav-link:hover,
.sac-navbar .nav-link:focus {
    color: #300000; /* Darker Maroon on hover/focus */
}
/* Style the search button if needed */
.sac-navbar .sac-search-button {
    border-color: #500000;
    color: #500000;
}
.sac-navbar .sac-search-button:hover {
    background-color: #500000;
    color: #FFD700;
}
/* --- Pre-Footer Cards --- */
.pre-footer-cards h2 {
    color: #500000; /* Maroon heading */
}
.sac-card .card-title a {
    color: #500000; /* Maroon title for cards */
    text-decoration: none;
}
.sac-card .card-title a:hover {
    text-decoration: underline;
}
.sac-card .card-meta {
    font-size: 0.85rem;
}
.sac-card .card-img-top {
    border-bottom: 1px solid #eee;
}
/* --- Scholarship Cards --- */ 
.card-glow {
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease;
}
.card-glow:hover {
    box-shadow: 4px rgba(0, 123, 255, 0.6); /* Blue glow */
    transform: translateY(-5px); /* Slight lift */
}
/* --- Main Footer Styles --- */
.site-footer {
    background-color: #500000 !important;  /* Maroon */
    color: #f0f0f0; /* Light text color for good contrast on maroon */
    font-size: 0.9rem;
}
.footer-heading {
    color: #FFD700; /* Gold */
    font-weight: 600;
    margin-bottom: 1rem;
    text-transform: uppercase;
    font-size: 1rem;
}
.footer-links li {
    margin-bottom: 0.5rem;
}
.img-fluid .certified {
    border-radius: 50% !important;
}
.site-footer .text-gold {
    color: #FFD700; /* Gold for icons or specific text */
}
.site-footer a.footer-link-styled {
    color: #EFBF04 !important;
    text-decoration: none !important;
}
.site-footer a.footer-link-styled:hover,
.site-footer a.footer-link-styled:focus {
    color: #FFFFFF !important;
    text-decoration: underline !important;
}
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.15); /* Lighter border on maroon */
    padding-top: 1rem;
    margin-top: 1.5rem;
}
.footer-bottom p {
    color: #cccccc;
    font-size: 0.85rem;
}
.eb-garamond-tagline {
    font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: italic;
    color: #FFF;
}
.sac-core-values-list li {
    font-size: 1.1rem; /* Adjust font size */
}
.sac-core-values-list .fa-fw {
    text-align: center; /* Ensures fixed-width icons align well if you change icon sizes */
}
/* Specific icon colors (Bootstrap text color utilities are used in HTML for quick coloring) */
/* You can also define them here if preferred: */
.sac-core-values-list .text-primary { color: #800000 !important; }
.sac-core-values-list .text-success { color: #198754 !important; }
.sac-core-values-list .text-info   { color: #0dcaf0 !important; }
/* CSS for responsive iFrame for calendar*/
@media (min-width: 550px) {
    .responsive-iframe-container {padding-bottom: 75%;}
}
@media (max-width: 550px) {
    .responsive-iframe-container {padding-bottom: 150%;}
}
.responsive-iframe-container {
    position: relative;
    padding-top: 0;
    height: 0;
    overflow: hidden;
}
.responsive-iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* --- Multi-Step Feedback Form Styles --- */
/* 1. Hide all form steps by default */
#feedbackForm .form-step {
    display: none;
    /* Optional: Add a smooth transition effect */
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
/* 2. ONLY show the step that has the 'active' class */
#feedbackForm .form-step.active {
    display: block;
    /* Optional: Fade in the active step */
    opacity: 1;
}
/* Optional: Style for the button-based radio groups to make them look nice */
#feedbackForm .btn-check:checked + .btn-outline-primary {
    background-color: #0d6efd; /* Bootstrap primary blue */
    color: #fff;
    border-color: #0d6efd;
}
.video-wrapper {
    width: auto;
    height: auto;
    margin: 1px auto; 
}
.video-wrapper video {
    width: 100%;
    height: auto;
    display: block;
}
/* --- Video Gallery Styles --- */
.video-thumb-link {
    display: block;
    color: inherit;
}
.video-thumb-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.video-thumb-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
.video-thumb-image-wrapper {
    position: relative;
    overflow: hidden;
}
.video-thumb-image-wrapper .play-icon-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 2rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.video-thumb-link:hover .play-icon-overlay {
    opacity: 1;
}
/* Custom background color for card headers */
.bg-maroon {
    background-color: #500000 !important; /* Your brand's dark maroon */
}
/* Custom styles for the fees table */
.fee-details-table th,
.fee-details-table td {
    vertical-align: middle; /* Aligns text vertically in the center of the cell */
}
/* --- Give & Support Page Styles --- */
.text-maroon {
    color: #500000; /* Your brand's dark maroon */
}
.project-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #e9ecef;
}
.project-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.1) !important;
}
.project-card .project-icon i {
    /* You can add a background to the icon if you wish */
    /* For example:
    background-color: #f8f9fa;
    border-radius: 50%;
    padding: 20px;
    width: 70px;
    height: 70px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    */
}
/* --- Extension Programs Page Styles --- */
.program-card .program-icon-col {
    background-color: #f8f9fa; /* Light grey background for the icon area */
    border-right: 1px solid #dee2e6;
    padding: 1.5rem;
}
/* On smaller screens, the icon column will be on top */
@media (max-width: 767.98px) {
    .program-card .program-icon-col {
        border-right: none;
        border-bottom: 1px solid #dee2e6;
    }
}
/* Style for the subtle "how to help" alert */
.alert-success-subtle {
    background-color: #d1e7dd; /* A light green from Bootstrap */
    border-color: #badbcc;
    color: #0f5132;
}
/* --- Volunteer Programs Page Styles --- */
.text-golden {
    color: #FFD700; /* Gold for icons or specific text */
}
.bg-maroon-light {
    background-color: rgba(80, 0, 0, 0.1); /* A light, transparent version of your maroon */
}
.opportunity-card {
    border-left: 4px solid #FFD700; /* Gold accent on the left border */
}
.opportunity-card .card-header {
    border-bottom: 1px solid rgba(0,0,0,0.125);
}
.btn-large {
  padding: 16px 32px;
  font-size: 14px;
}

/* --- Scholarship Page Styles --- */
/* Style for the main navigation tabs */
#scholarshipTabs .nav-link {
    font-weight: 600;
    color: #FFD700; /* gold text */
    background-color: #f8f9fa; /* Light grey inactive */
    border: 1px solid #dee2e6;
    margin: 0 5px;
    transition: all 0.3s ease;
}

#scholarshipTabs .nav-link.active {
    background-color: #500000; /* Maroon active */
    color: #FFD700; /* Gold text */
    border-color: #500000;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

#scholarshipTabs .nav-link:not(.active):hover {
    background-color: #e9ecef;
}

/* Style for the accordion buttons to be more engaging */
.accordion-button {
    font-weight: 500;
    color: #343a40;
}
.accordion-button:not(.collapsed) {
    color: #FFFFFF;
    background-color: #500000; /* Maroon when open */
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .125);
}
/* --- Portal vs. Gmail Section Styles --- */
.portal-vs-gmail-section {
    /* You can add a subtle background pattern here if desired */
    /* background-image: url('../images/patterns/subtle-pattern.png'); */
}

.portal-card {
    border-top: 5px solid #500000; /* Maroon accent for the Portal card */
}

.gmail-card {
    border-top: 5px solid #4285F4; /* Google Blue accent for the Gmail card */
}

/* Custom styling for the Key Distinctions list */
.key-distinctions-list .list-group-item {
    display: flex;
    align-items: center;
    border-left: 4px solid #FFD700; /* Gold accent */
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 0.25rem !important; /* Override default list-group radius */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.key-distinctions-list .list-group-item i {
    font-size: 1.5rem;
    width: 40px; /* Ensures text alignment is consistent */
}

.alert-warning-subtle {
    background-color: #fff3cd;
    border-color: #ffe69c;
    color: #664d03;
}

/* --- Video Playlist Widget Styles --- */
.video-playlist-widget .video-player-wrapper {
    background-color: #000;
    border-radius: 0.25rem;
}
.video-playlist-items {
    max-height: 250px; /* Set a max height for the playlist */
    overflow-y: auto;  /* Add a vertical scrollbar if the list is too long */
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
}
.video-playlist-items .playlist-item {
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
}
.video-playlist-items .playlist-item .play-indicator {
    opacity: 0; /* Hide the play icon by default */
    transition: opacity 0.2s ease-in-out;
    color: #0d6efd; /* Bootstrap primary color */
}
.video-playlist-items .playlist-item.active .play-indicator,
.video-playlist-items .playlist-item:hover .play-indicator {
    opacity: 1; /* Show the play icon on hover or when active */
}
/* Style for the active item in the playlist */
.video-playlist-items .playlist-item.active {
    background-color: #500000; /* Maroon */
    color: #FFD700; /* Gold */
    border-color: #500000;
}
.video-playlist-items .playlist-item.active .play-indicator {
    color: #FFD700; /* Gold */
}


/* --- Directory Page Styles --- */

.directory-controls {
    top: 60px; /* Adjust this to be below your main navbar */
    z-index: 1000;
    backdrop-filter: blur(5px);
    background-color: rgba(248, 249, 250, 0.85) !important; /* Semi-transparent light bg */
}

.quick-jumps {
    white-space: nowrap;
    overflow-x: auto;
    padding-bottom: 5px; /* for scrollbar */
}

.section-title {
    color: #500000;
    border-bottom: 2px solid #FFD700;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

.directory-card {
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
}

.directory-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.1) !important;
    border-left-color: #FFD700; /* Gold accent on hover */
}

.avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 1.2rem;
}

.avatar-initials {
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.contact-info .contact-link {
    text-decoration: none;
    color: maroon; /* Bootstrap primary blue */
    transition: color 0.2s ease;
}

.contact-info .contact-link:hover {
    color: #0a58ca; /* Darker blue */
    text-decoration: underline;
}


/* --- Pre-Footer Facebook Card Styles --- */
.facebook-card {
    /* Ensures the card itself has a defined height boundary */
    display: flex;
    flex-direction: column;
}
.facebook-card .card-header {
    font-weight: 600;
}
.facebook-card .card-body {
    /* Remove padding and allow the content to grow */
    padding: 0 !important;
    flex-grow: 1;
    overflow: hidden; /* Important for containing the iframe */
}

/* The Facebook plugin creates an iframe. This ensures it's responsive. */
/* It targets the container div, the span, and the iframe Facebook generates */
.facebook-card .fb-page,
.facebook-card .fb-page span,
.facebook-card .fb-page iframe {
    width: 100% !important;
}
 /* Style for active category pill in the gallery */
.nav-pills .nav-link.sac-nav-active {
    background-color: #500000; /* Maroon */
    color: gold;
    padding: 1rem;
}
.hover-zoom {
    transition: transform 0.3s ease-in-out; /* Smooth transition for transform property */
}
.hover-zoom:hover {
    transform: scale(1.1); /* Enlarge image by 10% on hover */
}



/* ALWAYS THE END OF LINE */
.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFD700'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); /* Gold arrow when open */
}
/* Navbar toggler icon color (if default is hard to see) */
.sac-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='rgba(80, 0, 0, 1)' 
    stroke-linecap='round' 
    stroke-miterlimit='10' 
    stroke-width='2' 
    d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}