/* ================= GLOBAL ================= */

html, body {
    font-family: "Roboto", Arial, sans-serif;
    background: #f2f2f2;
}

h1,h2,h3,h4,h5,h6{
    font-family: "Roboto", sans-serif;
}

p{
    color:#020a02;
}

img{
    vertical-align: middle;
}

/* Content area */
.main-layout{
    margin-left:220px;
    margin-top:103px;
    /* padding:20px; */
}

/* Mobile layout */
@media (max-width: 992px){
.main-layout{
    margin-left:0;
    margin-top:100px;
}

.w3-sidebar{
    width:250px;
}

}

/* Responsive adjustments */
@media (max-width: 600px) {
    .form-row.two > div {
        flex: 1 1 100%;
    }
}

/* mobile layout */
@media (max-width:900px){
    .main-layout{
        flex-direction:column;
    }
}

/* ----------------------------------------------------
   MOBILE (≤768px)
   - Stack form rows
   - Hide news images by default
   - Show toggle button
---------------------------------------------------- */
@media (max-width: 768px) {
    .toggle-image-btn { display:inline-block !important; }
    .news-image-container { display:none; }

    /* On mobile, image should be full width when shown */
    .news-image img {
        width: 100%;
        max-width: 100%;
    }

    /* Form layout: stack two-column rows */
    .form-row.two > div {
        flex: 1 1 100%;
    }

}

/* ----------------------------------------------------
   DESKTOP (≥769px)
   - Keep original small-left image layout
   - Hide toggle button
   - Show images by default
---------------------------------------------------- */
@media (min-width: 769px) {
    .toggle-image-btn { display:none !important; }
    .news-image-container { 
        margin-top: 15px; 
        margin-left: 10px;
        display:block !important; }

    /* Restore original desktop layout */
    .news-image {
        width: 220px;
        flex-shrink: 0;
    }
    
    .news-image img {
        width: 220px;          /* same as your original CSS */
        height: auto;
        object-fit: cover;
    }
}

/* ================= HEADER ================= */

#banner{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    background:#1f3a5f;
}

#banner-content{
    margin:auto;
    padding:10px;
}

.title-banner{
    font-size:2em;
    font-family:cursive;
    color:white;
}

/* ================= PAGE LAYOUT ================= */

.main-layout{
    display:flex;
    gap:30px;
    padding:20px;
}

.content{
    flex:3;
    background:white;
    padding:20px;
}

.sidebar{
    flex:1;
    background:#f1f1f1;
    padding:20px;
}


/* ================= SLIDESHOW ================= */

.slideshow-container{
    max-width:1000px;
    margin:auto;
    position:relative;
}

.mySlides{
    display:none;
    background:#99e0e5;
}

.numbertext{
    position:absolute;
    top:0;
    padding:8px 12px;
    font-size:12px;
}

/* navigation arrows */

.prev,.next{
    cursor:pointer;
    position:absolute;
    top:40%;
    padding:16px;
    font-size:20px;
    color:white;
}

.prev:hover,.next:hover{
    background:rgba(0,0,0,0.8);
}

/* dots */

.dot{
    height:15px;
    width:15px;
    margin:0 2px;
    background:#bbb;
    border-radius:50%;
}

/* ================= NAVIGATION ================= */

.currentmenu{
    color:red;
    font-weight:bold;
}

.dropdown-container{
    display:none;
    background:white;
    padding-left:10px;
}

.dropdown-btn:hover{
    color:#f1f1f1;
}

.fa-caret-down{
    float:right;
}

/* ================= TABLES ================= */

table{
    width:100%;
    border-collapse:collapse;
}

td,th{
    border-bottom:1px solid #ccc;
    padding:3px;
}

/* textbook tables */

.textbook table,
.textbook td,
.textbook th{
    border:1px solid rgb(22,7,158);
    padding:5px;
}

.textbook tr:nth-child(even){
    background:#f2f2f2;
}

/* Collapsible header base style */
.collapsible-header {
    cursor: pointer;
    padding: 10px 0;
    transition: color 0.2s ease;
}

/* Closed state (default) */
.collapsible-header.closed {
    color: navy; /* navy */
}

/* Open state */
.collapsible-header.open {
    color: #4CAF50; /* green */
    font-weight: bold;
}

/* Hidden content */
.collapsible-content {
    display: none;
    margin-bottom: 20px;
}


/* ================= IMAGE EFFECTS ================= */

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

.thumbnail:hover{
    position:relative;
    top:-25px;
    left:-35px;
    width:300px;
    z-index:999;
}

/* ================= FORMS ================= */

form {
    max-width: 900px; /* full form width */
    margin: 0 auto;
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* spacing between columns */
    margin-bottom: 15px;
}

.form-row.one > div {
    flex: 1 1 100%; /* full width for single-column rows */
}

.form-row.two > div {
    flex: 1 1 calc(50% - 10px); /* two-column layout */
}

label {
    display: block;
    margin-bottom: 5px;
    /* font-weight: bold; */
}

input[type="text"],
input[type="email"],
input[type="date"],
select,
textarea {
    width: 100%;
    padding: 6px 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

textarea {
    min-height: 60px;
}

.section-title {
    font-weight: bold;
    font-size: 16px;
    margin: 25px 0 10px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
}

/* Checkbox styling */
.checkbox-label {
    display: block;
    position: relative;
    padding-left: 30px; /* space for checkbox */
    cursor: pointer;
    margin-bottom: 10px;
}

.checkbox-label input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    margin: 0;
}

.checkbox-text {
    display: block;
}

/* Submit button */
button[type="submit"] {
    padding: 10px 25px;
    font-size: 16px;
    background-color: #0055a5;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button[type="submit"]:hover {
    background-color: #004080;
}



/* ================= LOGIN PAGE ================= */

/* ===============NEWS LAYOUT ==============  */
.news-container{
    /* max-width:1000px; */
    margin:auto;
    padding:20px;
}

.news-card{
    display:flex;
    gap:5px;
    background:white;
    border-radius:5px;
    box-shadow:0 3px 5px rgba(0,0,0,0.1);
    margin-bottom:15px;
    overflow:hidden;
}

.news-image img{
    width:220px;
    height:auto;
    object-fit:cover;  

}

.news-content{
    padding:15px;
}

.news-title{
    font-size:20px;
    font-weight:bold;
    margin-bottom:6px;
}

.news-meta{
    color:#888;
    font-size:13px;
    margin-bottom:10px;
}

.news-text{
    line-height:1.5;
}

.news-attachments {
    margin-top: 10px;
    padding: 10px;
    background: #f1f1f1;
    border-radius: 4px;
}

.news-attachments ul {
    margin: 0;
    padding-left: 20px;
}

.news-attachments li {
    margin-bottom: 5px;
}

/* ========================== RESPONSIVE GALLERY =========================*/
.gallery-header {
    margin-top: 40px;
    font-size: 24px;
    color: #ff9800;
    border-bottom: 2px solid #ddd;
    padding-bottom: 5px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.gallery-item img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
}

.gallery-desc {
    font-size: 14px;
    color: #555;
    margin-top: 5px;
}

.gallery-desc:empty {
    display: none;
}

.gallery-admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 15px;
}

.gallery-admin-item img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 6px;
}

.dropzone {
    border: 2px dashed #999;
    padding: 40px;
    text-align: center;
    cursor: pointer;
    border-radius: 10px;
    background: #fafafa;
}

.dropzone.dragover {
    border-color: #4CAF50;
    background: #e8ffe8;
}

.gallery-admin-item.selected {
    border: 2px solid red;
    padding: 3px;
}
/* hover effects for nicer UI */
.w3-button:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    transition: 0.2s;
}

#dropzone.dragover {
    border-color: #4CAF50;
    background: #e8ffe8;
}

.preview-thumb {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.preview-wrapper {
    position: relative;
}

.remove-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0,0,0,0.6);
    color: white;
    border: none;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    cursor: pointer;
    font-size: 14px;
    line-height: 20px;
}

.remove-btn:hover {
    background: red;
}

.preview-thumb {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

#imgModal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
}

.pg-nav-btn {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.6);
    color: white;
    border: none;
    padding: 16px 22px;
    font-size: 32px;
    cursor: pointer;
    border-radius: 4px;
    z-index: 9999;
}

.pg-prev {
    left: 20px;
}

.pg-next {
    right: 20px;
}

.pg-nav-btn:hover {
    background: rgba(0,0,0,0.9);
}

#imgModal .w3-modal-content {
    display: flex;
    flex-direction: column;
    justify-content: center;   /* vertical centering */
    align-items: center;       /* horizontal centering */
    height: 100%;
    background: transparent;   /* optional: removes white box */
    box-shadow: none;          /* optional: removes shadow */
     padding: 0;
}

#modalImg {
    max-width: 100%;
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
}

.pg-close-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    background: rgba(0,0,0,0.6);
    color: white;
    border: none;
    padding: 10px 16px;
    font-size: 18px;
    cursor: pointer;
    border-radius: 4px;
    z-index: 10000;
}

.pg-close-btn:hover {
    background: rgba(0,0,0,0.9);
}

/* ========================== New Galary View =========================*/
/* Desktop: expanded by default */
.gallery-section {
    display: block;
}