/* ============================================================
   KGBV GALLERY – UNIFIED THEME & COMPONENT STYLES
   ------------------------------------------------------------
   Author: Awadhesh Kumar Sahu
   Project: NIEPA – KGBV Training Programme Gallery
   ------------------------------------------------------------
   Scope:
   • Theme color tokens (centralized color system)
   • Buttons (global + dropdown triggers)
   • Dropdown menus (themed alignment & hover states)
   • Gallery tiles (grid layout & hover elevation)
   • Navbar (transparent modern look)
   • Crop stage small helpers
   • Responsive adjustments
   ------------------------------------------------------------
   NOTE:
   Place this stylesheet AFTER Bootstrap & component CSS so
   these overrides apply predictably.
============================================================ */


/* ============================================================
   1) THEME TOKENS
   ------------------------------------------------------------
   Single source of truth for colors across the gallery page.
   Adjust these to re-theme globally.
============================================================ */
:root {
    --primary: #1A486B;
    /* Core brand color – buttons/menus */
    --light: #2C6286;
    /* Hover/focus tone for interactivity */
    --soft: #5E8EA7;
    /* Active/pressed/border tint */
    --accent: #F4F7FA;
    /* Light text on dark elements */
    --ink: #1A2E40;
    /* Primary readable ink on light BGs */
}


/* ============================================================
   2) GLOBAL BUTTON THEME
   ------------------------------------------------------------
   Applies to all .btn for consistent pill shape, elevation,
   and smooth transitions using the theme tokens.
============================================================ */
.btn {
    font-weight: 600;
    border-radius: 30px;
    /* pill shape */
    box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;

    /* Base color (normal state) */
    background: var(--primary);
    border: 1px solid var(--primary);
    color: var(--accent);
}

/* Hover & focus lift */
.btn:hover,
.btn:focus {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, .25);
    background: var(--light);
    border-color: var(--light);
    color: var(--accent);
}

/* Active / open dropdown */
.btn:active,
.btn.show {
    background: var(--soft);
    border-color: var(--soft);
    color: var(--accent);
}


/* ============================================================
   3) DROPDOWN TRIGGER BUTTONS (ID-SPECIFIC)
   ------------------------------------------------------------
   Force the four triggers (Consultative/Warden/Master/Nodal)
   to use uniform theme colors, overriding Bootstrap variants.
============================================================ */
#btnConsultativeGallery.btn,
#btnWardenGallery.btn,
#btnMasterGallery.btn,
#btnNodalGallery.btn {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--accent) !important;

    font-weight: 600;
    border-radius: 30px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

/* Hover / focus for the four triggers */
#btnConsultativeGallery.btn:hover,
#btnConsultativeGallery.btn:focus,
#btnWardenGallery.btn:hover,
#btnWardenGallery.btn:focus,
#btnMasterGallery.btn:hover,
#btnMasterGallery.btn:focus,
#btnNodalGallery.btn:hover,
#btnNodalGallery.btn:focus {
    background: var(--light) !important;
    border-color: var(--light) !important;
    color: var(--accent) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, .25);
}

/* Active / open state for triggers */
#btnConsultativeGallery.btn:active,
#btnConsultativeGallery.btn.show,
#btnWardenGallery.btn:active,
#btnWardenGallery.btn.show,
#btnMasterGallery.btn:active,
#btnMasterGallery.btn.show,
#btnNodalGallery.btn:active,
#btnNodalGallery.btn.show {
    background: var(--soft) !important;
    border-color: var(--soft) !important;
    color: var(--accent) !important;
}


/* ============================================================
   4) CROP STAGE SMALL HELPERS
   ------------------------------------------------------------
   Keeps modal image stage cozy; enables move cursor on desktop.
============================================================ */
#cropStage {
    padding: 8px;
}

@media (hover:hover) and (pointer:fine) {
    #cropBox {
        cursor: move;
    }
}


/* ============================================================
   5) DROPDOWN MENU THEMING
   ------------------------------------------------------------
   Menus match the primary theme, align width with triggers, and
   provide clear hover/active feedback.
============================================================ */
.dropdown-menu[aria-labelledby="btnConsultativeGallery"],
.dropdown-menu[aria-labelledby="btnWardenGallery"],
.dropdown-menu[aria-labelledby="btnMasterGallery"],
.dropdown-menu[aria-labelledby="btnNodalGallery"] {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
    min-width: 100%;
    /* visually align to trigger width */
}

/* Section headers inside menus */
.dropdown-menu[aria-labelledby="btnConsultativeGallery"] .dropdown-header,
.dropdown-menu[aria-labelledby="btnWardenGallery"] .dropdown-header,
.dropdown-menu[aria-labelledby="btnMasterGallery"] .dropdown-header,
.dropdown-menu[aria-labelledby="btnNodalGallery"] .dropdown-header {
    color: var(--accent) !important;
    background: transparent !important;
    font-size: 14px;
    opacity: .85;
}

/* Dividers inside menus */
.dropdown-menu[aria-labelledby="btnConsultativeGallery"] .dropdown-divider,
.dropdown-menu[aria-labelledby="btnWardenGallery"] .dropdown-divider,
.dropdown-menu[aria-labelledby="btnMasterGallery"] .dropdown-divider,
.dropdown-menu[aria-labelledby="btnNodalGallery"] .dropdown-divider {
    border-top-color: rgba(244, 247, 250, .25) !important;
}

/* Menu items: transparent base */
.dropdown-menu[aria-labelledby="btnConsultativeGallery"] .dropdown-item,
.dropdown-menu[aria-labelledby="btnWardenGallery"] .dropdown-item,
.dropdown-menu[aria-labelledby="btnMasterGallery"] .dropdown-item,
.dropdown-menu[aria-labelledby="btnNodalGallery"] .dropdown-item {
    color: var(--accent) !important;
    background: transparent !important;
    font-size: 18px;

}

/* Hover / focus on menu items */
.dropdown-menu[aria-labelledby="btnConsultativeGallery"] .dropdown-header:hover,
.dropdown-menu[aria-labelledby="btnWardenGallery"] .dropdown-header:hover,
.dropdown-menu[aria-labelledby="btnMasterGallery"] .dropdown-header:hover,
.dropdown-menu[aria-labelledby="btnNodalGallery"] .dropdown-header:hover,
.dropdown-menu[aria-labelledby="btnConsultativeGallery"] .dropdown-header:focus,
.dropdown-menu[aria-labelledby="btnWardenGallery"] .dropdown-header:focus,
.dropdown-menu[aria-labelledby="btnMasterGallery"] .dropdown-header:focus,
.dropdown-menu[aria-labelledby="btnNodalGallery"] .dropdown-header:focus {
    background: var(--light) !important;
    color: var(--accent) !important;
}

/* Active / pressed items */
.dropdown-menu[aria-labelledby="btnConsultativeGallery"] .dropdown-header.active,
.dropdown-menu[aria-labelledby="btnWardenGallery"] .dropdown-header.active,
.dropdown-menu[aria-labelledby="btnMasterGallery"] .dropdown-header.active,
.dropdown-menu[aria-labelledby="btnNodalGallery"] .dropdown-header.active,
.dropdown-menu[aria-labelledby="btnConsultativeGallery"] .dropdown-header:active,
.dropdown-menu[aria-labelledby="btnWardenGallery"] .dropdown-header:active,
.dropdown-menu[aria-labelledby="btnMasterGallery"] .dropdown-header:active,
.dropdown-menu[aria-labelledby="btnNodalGallery"] .dropdown-header:active {
    background: var(--soft) !important;
    color: var(--accent) !important;
}

/* Ensure “All Images” links use accent text in themed menus */
.dropdown-menu[aria-labelledby="btnConsultativeGallery"] .dropdown-item.text-primary,
.dropdown-menu[aria-labelledby="btnWardenGallery"] .dropdown-item.text-primary,
.dropdown-menu[aria-labelledby="btnMasterGallery"] .dropdown-item.text-primary,
.dropdown-menu[aria-labelledby="btnNodalGallery"] .dropdown-item.text-primary {
    color: var(--accent) !important;
}


/* ============================================================
   6) GALLERY GRID & IMAGE TILES
   ------------------------------------------------------------
   Uniform tiles with fixed height, center-cropped images,
   and subtle hover elevation.
============================================================ */
.row.gallery .gallery-tile {
    display: block;
    height: 220px;
    /* consistent rows */
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .06);
    transition: transform .2s ease, box-shadow .2s ease;
}

/* Remove link underlines for tiles */
.row.gallery a.gallery-tile {
    text-decoration: none;
}

/* Make images fill the tile (center-cropped) */
.row.gallery img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border: 0;
}

/* Hover: lift + tinted shadow + soft border */
.row.gallery .gallery-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(26, 72, 107, 0.25);
    /* tinted from --primary */
    border: 2px solid var(--soft);
}


/* ============================================================
   7) NAVBAR (THEMED TRANSPARENT HEADER)
   ------------------------------------------------------------
   Minimal glassy navbar that matches the theme.
============================================================ */
.kgbv-navbar {
    width: 95%;
    margin: auto;
    border-radius: 12px;
    background: transparent;
    /* no solid fill */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    /* gentle elevation */
    backdrop-filter: blur(8px);
    /* glass effect */
    border: 1px solid rgba(26, 72, 107, 0.15);
    /* faint blue border */
    animation: fadeIn 0.8s ease-in-out;
    /* soft entry */
}

/* Brand text */
.kgbv-navbar .navbar-brand {
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--primary);
    letter-spacing: 0.5px;
}

/* Brand hover */
.kgbv-navbar .navbar-brand:hover {
    color: var(--light);
    text-decoration: none;
}

/* Entry animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ============================================================
   8) RESPONSIVE ADJUSTMENTS
   ------------------------------------------------------------
   Slightly taller tiles on small phones to better accommodate
   portrait photos.
============================================================ */
@media (max-width: 576px) {
    .row.gallery .gallery-tile {
        height: 260px;
    }
}

/* ============================================================
   9) DROPDOWN SCROLLABLE
   ------------------------------------------------------------
   Scrollable dropdown menu
============================================================ */

.dropdown-menu {
    max-height: 350px;   /* height after which scroll appears */
    overflow-y: auto;    /* enable vertical scroll */
    overflow-x: hidden;  /* prevent horizontal scroll */
}

/* Smooth scrollbar (optional but better UI) */
.dropdown-menu::-webkit-scrollbar {
    width: 6px;
}

.dropdown-menu::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 10px;
}

.dropdown-menu::-webkit-scrollbar-track {
    background: transparent;
}