/* =========================
   Base styles
   ========================= */

:root {
    --green: #006400;
    --burgundy: #881912;
    --light-burgundy: #a30000;
    --dark-burgundy: #4d0000;
    --light: #fdfce7;
    --dark-grey: #222;
    
    /* --burgundy: rgb(136, 25, 18); */
    /* --burgundy: #831518; */
    /* --burgundy: rgb(131, 21, 24); */
    /* --burgundy: #800000; */
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    display: flex;
    flex-direction: column;

    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;    
    /* background: var(--light); */
    background: #f9f9f9;
    color: var(--dark-grey);
    /* color: #333; */
}

/* =========================
   Mobile tap highlight (disable default blue)
   ========================= */
a,
button,
[role="button"],
input,
textarea,
select {
  -webkit-tap-highlight-color: transparent;
}

/* =========================
   Custom tap feedback (mobile only)
   ========================= */
@media (hover: none) {
  a:active,
  button:active {
    /* background-color: rgba(255, 255, 255, 0.12); */
    /* background-color: rgba(136, 25, 18, 0.16); *//* burgundy tint */
    background-color: rgba(0, 0, 0, 0.18);
    border-radius: 6px;
  }
}

@media (hover: none) {
  .mobile-nav-toggle:active {
    background-color: rgba(0, 0, 0, 0.18);
    border-radius: 8px;
  }
}

.center {
    text-align: center;
}

/* Main content grows to fill available space */
.site-content {
    flex: 1;
    /* margin: 10px 120px; */
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* =========================
   Headings
   ========================= */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto Slab', serif;
    font-weight: 700;
    margin-top: 0;
    color: var(--dark-grey);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3); /* lighter shadow */  
}

h1 { font-size: 32px; }
h2 { font-size: 26px; margin-bottom: 10px; }
/* h3 { font-size: 20px; } */


/* ===== Page title with automatic separators ===== */
.page-title {
    margin-bottom: 25px;
}

.page-title::before,
.page-title::after {
    content: "";
    display: block;
    height: 1px;
    background-color: var(--burgundy);
    opacity: 0.45;
    /* width: 60%;
    margin-left: auto;
    margin-right: auto; */
}

.page-title::before {
    margin-bottom: 12px;
}

.page-title::after {
    margin-top: 12px;
}

/* ===== Centered page titles ===== */
.page-title h1 {
    text-align: center;
    letter-spacing: 0.3px;
}

.page-title-with-logo {
    justify-content: center;
}

/* logo before h1 start */
.page-title-with-logo {
    display: flex;
    align-items: center;
    gap: 15px; /* разстояние между логото и h1 */
}

.page-title-with-logo h1 {
    margin: 0 !important;
    line-height: 1;
}

.page-title-logo {
    height: 105px;
    /* width: auto; */
    /* display: block; */
}
/* logo before h1 end */

@media (max-width: 400px) {

    .page-title-with-logo {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }

    .page-title-logo {
        height: 70px; /* ↓ по-малко лого за mobile */
    }

    .page-title-with-logo h1 {
        font-size: 26px;
        line-height: 1.2;
        max-width: 100%;
        word-wrap: break-word;
    }
}




/* ===== Manual HR (same style as page title) ===== */
hr {
    border: none;
    height: 1px;
    background-color: var(--burgundy);
    opacity: 0.45;
    margin: 20px 0;
}

/* End of section/page HR */
hr.hr-end {
    margin: 0;
    /* margin-bottom: 0; */
}




.page-container h3 {
    text-transform: uppercase;
}

.page-container h2 {
    text-align: center;
}

@media (max-width: 420px) {

    h1 { font-size: 26px; letter-spacing: 0.2px; }
    h2 { font-size: 22px; }
    h3 { font-size: 18px; line-height: 1.4;}

}


/* .page-container ul {
    list-style: none;
    padding-left: 30px;
    margin-left: 0;
} */

.page-container ul li {
    margin-bottom: 8px;
}

.page-container ul li small {
    color: #555;
    /* font-size: 14px; */
}

/* =========================
   Custom list styles
   ========================= */

/* Списъци с навигационни линкове */
.page-container ul.link-list {
    list-style: none;
    padding-left: 10px;
    margin-left: 0;
}

/* Списъци с документи (PDF, DOC и др.) */
.page-container ul.document-list {
    list-style: none;
    padding-left: 30px;
    margin-left: 0;
}

/* по желание – малко въздух между елементите */
/* .page-container ul.link-list li,
.page-container ul.document-list li {
    margin-bottom: 10px;
} */

.page-container a.content-link {
    /* position: relative;
    text-decoration: none;
    transition: color 0.4s ease; */
    color: var(--burgundy);
    font-weight: 600;

    position: relative;
    text-decoration: none;

    /* важно за inline елементи на няколко реда */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;

    padding-bottom: 2px;

    background-image: linear-gradient(var(--burgundy), var(--dark-burgundy));
    background-size: 0% 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size 0.4s ease, color 1.1s ease;
    /* transition: background-size 0.4s ease; */
}

/* underline с фиксиран бордо цвят */
/* .page-container a.content-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 1px;
    background-color: var(--burgundy);
    transition: width 0.4s ease;
} */

/* при hover сменяме цвета на текста */
.page-container a.content-link:hover {
    color: var(--dark-burgundy);
    background-size: 100% 1px;
}

/* @media (hover: hover) and (pointer: fine) {

} */

/* .page-container a.content-link:hover::after {
    width: 100%;
} */

/* Линкове към файлове (PDF, DOC и др.) */
.page-container a.file-link::before {
    content: "📄 ";
}

/* ---------- RICH PAGE GALLERY GRID ---------- */

.rich-gallery {
    display: grid;
    gap: 14px;
    margin: 25px 0;
    grid-template-columns: repeat(4, 1fr); /* Desktop */
}

@media (max-width: 1024px) {
    .rich-gallery {
        grid-template-columns: repeat(2, 1fr); /* Tablet */
    }
}

@media (max-width: 600px) {
    .rich-gallery {
        grid-template-columns: repeat(1, 1fr); /* Mobile */
    }
}

/* FIGURE WRAPPER */
.rich-gallery figure {
    margin: 0;
    padding: 0;
}

/* IMAGE STYLE (обединен блок — няма да има втори като преди!) */
.rich-gallery img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.12);

    /* Fade-in effect start state */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* FINAL STATE — задава се чрез JS */
.rich-gallery img.loaded {
    opacity: 1;
    transform: translateY(0);
}

/* FIGCAPTION */
.rich-gallery figcaption {
    margin-top: 6px;
    font-size: 14px;
    color: #555;
    text-align: center;
}

/* =========================
   Top bar
   ========================= */
.top-bar {
    background: #222;
    color: white;
    font-size: 14px;
    padding: 6px 0;
}

.top-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* CONTACT SECTION — phone + email */
.topbar-contact {
    display: flex;
    align-items: center;
    gap: 24px;  /* ← увеличава разстоянието между телефон и имейл */
}

/* SOCIAL ICONS SECTION — Facebook + YouTube */
.topbar-social {
    display: flex;
    align-items: center;
    gap: 18px;  /* ← разстояние между социалните икони */
}

/* ------- TOPBAR BEAUTIFUL ICONS ------- */

.topbar-icon-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: white;
    font-size: 14px;
}

.topbar-icon-link img {
    width: 22px;
    height: 22px;
    transition: transform 0.25s ease, filter 0.25s ease;
}

/* TOPBAR — базов цвят */
.topbar-icon-link,
.topbar-icon-link span {
    color: white;
}

/* =========================
   Header main
   ========================= */

.site-header {
    background: var(--green);
}

.header-main {
    display: flex;
    align-items: center;
    padding: 10px 0;
    text-align: left;
}

/* =========================
   Header home link (logo + title)
   ========================= */

.header-home-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

/* LOGO */
.header-main .logo {
    height: 150px;
    margin: 15px 17px 15px 0;

    /* базова сянка */
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.35));

    transition:
        filter 0.7s ease,
        transform 0.7s ease;
}

/* TITLE */
.header-main h1 {
    font-size: 36px;
    margin: 0;
    color: white;
    line-height: 1.2;

    text-shadow: 2px 2px 6px rgba(0,0,0,0.6);

    transition:
        text-shadow 0.5s ease,
        transform 0.5s ease;
}

/* =========================
   Responsive header (mobile)
   ========================= */

@media (max-width: 768px) {

    .header-main {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 15px 0;
    }

    .header-home-link {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .header-main .logo {
        margin: 0;
    }

    .header-main h1 {
        font-size: 22px;
        line-height: 1.3;
        padding: 0 10px;
    }
}

/* =========================
   Header hover effects (desktop only)
   ========================= */

@media (hover: hover) {

    /* 1️⃣ първо реагира ТЕКСТЪТ */
    .header-home-link:hover h1 {
        transform: translateY(3px);
        text-shadow: 5px 5px 10px rgba(0,0,0,0.9);
        transition-delay: 0s;
    }

    /* 2️⃣ после реагира ЛОГОТО */
    .header-home-link:hover .logo {
        transform: translateY(-5px) scale(1.03);
        filter: drop-shadow(3px 3px 7px rgba(0,0,0,0.7));
        transition-delay: 0.15s;
    }
}

/* =========================
   Navigation
   ========================= */
.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--burgundy);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.main-nav li { margin: 0; }

.main-nav a {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 15px;
    /* font-weight: 600; */
    text-transform: uppercase;
    display: block;
    padding: 12px 15px;
    color: white;
    text-decoration: none;
    transition: background 0.3s ease; /* smooth transition */
}

/* Main tabs */
.main-nav > ul > li > a {
    font-weight: 900; /* heaviest font */
}

/* Positioning for dropdown */
.main-nav ul li {
    position: relative;
}

/* Dropdown menu */
.main-nav .dropdown {
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 200px;
    z-index: 1000;
    border-radius: 2px;
    
    /* hidden by default */
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-15px); /* start slightly higher */
    transition: opacity 1.1s ease, transform 0.9s ease; /* smooth fade and slide */
    pointer-events: none;
}

/* Touch (JS-controlled) */
.main-nav ul li.open > .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Dropdown items */
.main-nav .dropdown li {
    width: 100%; /* full width */
}

.main-nav .dropdown li a {
    font-weight: 600; /* lighter font */
    padding: 10px 15px;
    display: block; /* full row clickable */
    text-transform: none;
    text-decoration: none;
    color: white;
    white-space: nowrap;
    transition: background 0.3s ease, box-shadow 0.3s ease, border-radius 0.3s ease; /* smooth transition */
}

/* отворен (JS или hover) */
.main-nav li.open > .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* стрелка само за елементи с dropdown */
.main-nav .has-dropdown > a::after {
    content: " ▾";
    font-size: 0.75em;
    margin-left: 4px;
    display: inline-block;
    transition: transform 0.25s ease;
}

/* когато е отворено (touch) или hover (desktop) */
/* .main-nav .has-dropdown:hover > a::after */
.main-nav .has-dropdown.open > a::after {
    transform: rotate(180deg);
}

/* =========================
   DROPDOWN – TOUCH OPEN
   ========================= */

.has-dropdown.open > .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* =========================
   Content
   ========================= */
/* .site-content {
    padding: 20px;
} */

.site-content {
    flex: 1;
    padding: 40px 0px;
    background: #f0f0f0; /* леко сив фон зад карето */
}

.site-content .container {
    /* max-width: 1200px; */
    margin: 0 auto;
    background: white; /* самото съдържание е в бяло каре */
    padding: 60px;     /* вътрешен отстъп */
    border-radius: 10px; /* заоблени ъгли */
    box-shadow: 0 4px 15px rgba(0,0,0,0.15); /* мека сянка */
    box-sizing: border-box;
}


/* .site-content {
    flex: 1;
    padding: 40px 20px; /* вътрешен отстъп */
    /* background: #f9f9f9; фон за цялото съдържание */
/* } */

/* .site-content .container {
    max-width: 1200px;   /* ограничаваме широчината */
    /* margin: 0 auto;      центрираме по хоризонтала */
/* }  */

@media (max-width: 1024px) {
  .site-content {
    padding: 30px 15px;
  }
}

@media (max-width: 768px) {
  .site-content {
    padding-left: 10px;
    padding-right: 10px;
  }
}

@media (max-width: 768px) {
  .site-content .container {
    padding: 20px;
  }
}

.site-content h1,
.site-content h2,
.site-content h3,
.site-content h4,
.site-content h5,
.site-content h6 {
    color: var(--burgundy);        /* бордо */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.1); /* лека сянка за четимост */
    margin-top: 0;
    margin-bottom: 20px;
}

/* =========================
   School anthem
   ========================= */

/* .school-anthem {
    margin: 40px 0;
} */

.anthem-meta {
    margin-bottom: 20px;
    text-align: center;
}

.anthem-meta p {
    font-size: 0.95em;
    color: #555; 
}

.anthem-meta h3::before,
.anthem-meta h3::after {
    content: "♪";
    font-size: 1.3em;
    color: var(--burgundy);
    margin: 0 10px;
}

.anthem-lyrics {
    column-count: 3;
    column-gap: 36px;
    /* column-fill: auto; */

    font-size: 17px;
    line-height: 1.6;
}

.anthem-lyrics p {
    break-inside: avoid;
    margin: 0 0 18px 0;
    /* margin-bottom: 18px; */
    /* text-align: left; */
}

.anthem-chorus {
    font-weight: 600;
    color: var(--burgundy);
}

.anthem-audio {
    margin-top: 25px;
    text-align: center;
}

.anthem-audio audio {
    width: 100%;
    max-width: 700px;
    box-sizing: border-box;

    accent-color: var(--burgundy);

    border: 2px solid rgba(136, 25, 18, 0.7);
    border-radius: 10px;
    padding: 4px;
    background-color: #f1f3f4;
    /* background-color: #f8f4f5; */

    display: block;
    margin: 0 auto;
}

@media (max-width: 1024px) {
    .anthem-lyrics {
        column-count: 2;
        column-gap: 32px;
    }
}

@media (max-width: 768px) {
    .anthem-lyrics {
        column-count: 1;
    }
}



/* ----------- NEWS LIST STYLES ----------- */

.news-grid,
.gallery-album-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* MAX 3 на ред */
    gap: 30px;
    margin: 30px 0;
}

/* Tablet */
@media (max-width: 1024px) {
    .news-grid,
    .gallery-album-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 600px) {
    .news-grid,
    .gallery-album-grid {
        grid-template-columns: 1fr;
    }
}

.news-card {
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.news-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.news-content {
    padding: 15px 20px;
}

.news-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 10px;
}

.news-title a {
    color: var(--burgundy);
    text-decoration: none;
}

.news-title a:hover {
    text-decoration: underline;
    color: var(--light-burgundy);
}

.news-date {
    color: #777;
    font-size: 14px;
    margin-bottom: 12px;
}

.news-excerpt {
    font-size: 16px;
    margin-bottom: 15px;
    color: #444;

    display: -webkit-box;
    -webkit-box-orient: vertical;

    -webkit-line-clamp: 3; /* 👈 брой редове – тук избираш */
    line-clamp: 3;

    overflow: hidden;

    /* важно – за да се пазят новите редове */
    white-space: normal;
}

.read-more {
    color: var(--burgundy);
    font-weight: 600;
    text-decoration: none;
}

.read-more:hover {
    text-decoration: underline;
    color: #a00000;
}

/* Pagination */
.pagination {
    margin: 40px 0;
    text-align: center;
}

.pagination a {
    padding: 8px 14px;
    border: 1px solid var(--burgundy);
    color: var(--burgundy);
    margin: 0 5px;
    border-radius: 4px;
    text-decoration: none;
}

.pagination a:hover {
    background: var(--burgundy);
    color: white;
}

.pagination span {
    margin: 0 10px;
    font-size: 16px;
}

/* =========================
   Creativity cards layout
   ========================= */

/* Ensure equal height cards in creativity grid */
.creativity-grid {
    align-items: stretch;
}

/* Make cards flex containers */
.creativity-grid .creativity-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Common content behavior */
.creativity-grid .news-content {
    display: flex;
    flex-direction: column;
}

/* Text-only cards should fill the available height */
.creativity-grid .creativity-text-only {
    flex: 1;
}

/* Let excerpt take remaining space */
.creativity-grid .creativity-text-only .news-excerpt {
    flex: 1;
}

/* =========================
   Creativity excerpt limits
   ========================= */

/* Limit text-only cards to a fixed number of lines */
.creativity-grid .creativity-text-only .news-excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5; /* number of visible lines */
    overflow: hidden;
}

/* =========================
   Creativity poetry spacing
   ========================= */

/* Reduce vertical spacing between lines in poetry */
.creativity-detail p {
    margin-top: 0.2em;
    margin-top: 0.2em;
    margin-bottom: 0.2em;
    /* margin-left: 50px; */
}

.creativity-detail {
    line-height: 1.45;
    padding-left: 1.5rem;
}


/* =========================
   Creativity – poetry preview
   ========================= */

/* Poetry-style typography (TEMP preview) */
/* .creativity-detail {
    max-width: 780px;
    margin: 0 auto;
    font-size: 1.05rem;
    line-height: 1.9;
    letter-spacing: 0.01em;
} */

/* Reduce paragraph spacing for poems */
/* .creativity-detail p {
    margin: 0.15em 0;
    color: #006400;
} */



/* ----------- NEWS DETAIL STYLES ----------- */

.news-detail-img {
    max-width: 100%;
    height: auto;
    margin: 20px 0;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.news-detail-content {
    font-size: 18px;
    line-height: 1.7;
    color: #333;
    margin: 20px 0 30px 0;
}

.back-to-news {
    margin-top: 30px;
}

.back-to-news a {
    font-size: 18px;
}


.news-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin: 30px 0;
}

.news-gallery-thumb {
    width: 240px;
    height: 160px;
    object-fit: cover;
    border-radius: 8px;
    cursor: zoom-in;
    transition: transform 0.2s ease;
}

.news-gallery-thumb:hover {
    transform: scale(1.05);
}

.news-gallery-grid {
    display: grid;
    gap: 15px;
    margin: 30px 0;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.news-gallery-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.news-video-wrapper, .gallery-video-wrapper {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 20px 0;
    cursor: pointer;
}

.news-video-thumbnail {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
}

.news-video-wrapper:hover .news-video-thumbnail,
.gallery-video-wrapper:hover .gallery-video-thumbnail {
    transform: scale(1.02);
}

.news-video-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 60px;
    color: white;
    background: rgba(0,0,0,0.5);
    padding: 20px 30px;
    border-radius: 50%;
    pointer-events: none;
    transition: background 0.3s ease;
}

.news-video-wrapper:hover .news-video-play-icon,
.gallery-video-wrapper:hover .gallery-video-play-icon {
    background: rgba(0,0,0,0.7);
}

.related-albums-block {
    margin-top: 40px;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}

.related-albums-block h3 {
    font-size: 22px;
    margin-bottom: 10px;
    color: var(--burgundy);
}

.related-albums-list {
    list-style: none;
    padding-left: 0;
}

.related-albums-list li {
    margin-bottom: 8px;
}

.related-albums-list a {
    color: var(--burgundy);
    font-size: 18px;
    text-decoration: none;
}

.related-albums-list a:hover {
    text-decoration: underline;
}


.homepage-news-heading {
    /* text-align: center; */
    padding-top: 50px;
    font-size: 28px;
    color: var(--burgundy);
}

.homepage-news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 25px;
    margin-bottom: 30px;
}

.homepage-news-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #ddd;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.homepage-news-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.homepage-news-content {
    padding: 15px 20px;
}

.homepage-news-content h3 a {
    color: var(--burgundy);
    text-decoration: none;
    font-size: 20px;
    font-weight: 600;
}

.homepage-news-content h3 a:hover {
    text-decoration: underline;
}

.homepage-news-date {
    color: #777;
    font-size: 14px;
    margin: 8px 0;
}

.homepage-news-excerpt {
    color: #444;
    font-size: 16px;
}

.homepage-news-more {
    text-align: center;
    margin-top: 20px;
}

.homepage-news-more a {
    font-size: 18px;
    color: var(--burgundy);
    text-decoration: none;
    font-weight: bold;
}

.homepage-news-more a:hover {
    text-decoration: underline;
}


/* ----------- GALLERY ALBUM GRID ----------- */

/* .gallery-album-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 30px;
    margin: 30px 0;
} */

.gallery-album-card {
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.2s ease;
    text-align: center;
    box-sizing: border-box;
}

.gallery-album-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    transform: translateY(-4px);
}

.gallery-album-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.gallery-album-card h2 {
    margin: 15px 0 10px;
    font-size: 22px;
}

.gallery-album-card h2 a {
    text-decoration: none;
    color: var(--burgundy);
}

.gallery-album-card h2 a:hover {
    text-decoration: underline;
}

.gallery-related-news {
    margin-bottom: 15px;
    font-size: 15px;
    color: #555;
}

.gallery-related-news a {
    color: var(--burgundy);
    text-decoration: none;
}

.gallery-related-news a:hover {
    text-decoration: underline;
}


/* ----------- GALLERY DETAIL GRID ----------- */

.gallery-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 15px;
    margin: 30px 0;
}

/* Thumbnail styling (modern, unified) */
.gallery-thumb {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 6px;
    cursor: zoom-in;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.gallery-thumb:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

/* Album description */
.gallery-description {
    font-size: 17px;
    color: #444;
    margin-bottom: 20px;
}

/* Link to related news */
.album-related-news {
    margin: 10px 0 20px 0;
    padding: 10px 15px;
    background: #f8f4f5;
    border-left: 4px solid var(--burgundy);
    font-size: 15px;
}

.album-related-news a {
    color: var(--burgundy);
    text-decoration: none;
    font-weight: 600;
}

.album-related-news a:hover {
    text-decoration: underline;
}

/* Back link */
.back-to-gallery {
    margin-top: 20px;
}

.back-to-gallery a {
    color: var(--burgundy);
    text-decoration: none;
    font-size: 18px;
}

.back-to-gallery a:hover {
    text-decoration: underline;
}


/* ----------- NEWSPAPER FIXED-SIZE CARDS (A4 at 250px height) ----------- */

.newspaper-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.newspaper-card {
    width: 177px; /* Пропорционално на 250px височина */
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 6px;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.25s ease;
}

.newspaper-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}

.newspaper-cover {
    width: 100%;
    height: 250px; /* твоето изискване */
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #bbb;
    margin-bottom: 2px;
    transition: transform 0.25s ease;
}

.newspaper-card:hover .newspaper-cover {
    transform: scale(1.04);
}

.newspaper-issue-title {
    font-size: 15px;
    color: var(--burgundy);
    margin: 4px 0 2px 0;
    font-weight: 600;
}

.newspaper-title {
    font-size: 13px;
    color: #444;
    margin: 0 0 4px 0;
}

.newspaper-date {
    font-size: 12px;
    color: #666;
    margin: 2px 0;
}


/* -------- HEADER INLINE CENTERED WITH SLASH -------- */

.newspaper-header-center {
    display: inline-flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 0px;      /* повдига реда максимално нагоре */
    margin-bottom: 2px;   /* по-малко пространство към title */
}

/* Брой */
.issue-number {
    font-size: 15px;
    color: var(--burgundy);
    font-weight: 600;
}

/* слагаме "/" след issue-number */
.issue-number::after {
    content: " / ";
    color: #666;
    font-weight: normal;
    font-size: 13px;
}

/* Дата */
.issue-date {
    font-size: 12px;
    color: #666;
}


/* ---------- CONTACTS PAGE (two-column layout) ---------- */

.contacts-two-column {
    display: flex;
    gap: 35px;
    margin-top: 20px;
    flex-wrap: wrap;

    /* align-items: flex-end; */
}

/* MAP BOX */

.contact-map-box {
    flex: 1.2;
    min-width: 220px;
    border-radius: 10px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.15);
    height: 420px;
    transition: transform 0.35s ease;
}

.contact-map-box iframe {
    width: 100%;
    height: 100%;
    /* height: 420px; */
    border: none;
}

/* INFO BOX */
.contact-info-box {
    flex: 1;
    min-width: 200px;
    /* overflow: hidden; */
    background: white;
    padding: 25px 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.14);
    transition: transform 0.35s ease;
}

/* each line in the contact info */
.contact-info-box p {
    margin: 12px 0;
    font-size: 18px;
    color: var(--burgundy);   /* ВСИЧКИ данни — бордо */
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.5;
}


/* The actual data (телефон, имейл, адрес) */
.contact-text {
    color: var(--burgundy);
    font-weight: 600;
}

/* icons */
.contact-icon {
    width: 24px;
    height: 24px;
    filter: brightness(0) saturate(100%) invert(17%) sepia(63%)
            saturate(2464%) hue-rotate(342deg) brightness(94%) contrast(89%);
    transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Social icons */
.contact-social {
    margin-top: 15px;
    display: flex;
    gap: 15px;
}

.contact-social img {
    width: 34px;
    height: 34px;
    filter: brightness(0) saturate(100%) invert(17%) sepia(63%)
            saturate(2464%) hue-rotate(342deg) brightness(94%) contrast(89%);
    transition: transform 0.25s ease, opacity 0.25s ease;
}

@media (hover: hover) {
    .contact-social img:hover,
    .contact-icon:hover {
        transform: scale(1.23);
        opacity: 0.9;
    }

    .contact-info-box:hover,
    .contact-map-box:hover {
        transform: scale(1.03);
    }
}
/* 
.contact-social img:active {
    transform: scale(1.05);
} */

/* .contact-social img:hover {
    transform: scale(1.1);
    opacity: 0.85;
} */

.contact-label {
    color: var(--burgundy);
    font-weight: 700;
}

.contact-value {
    color: #222; /* черно */
    font-weight: 600;
}

@media (max-width: 500px) {

  .contact-info-box p {
    flex-wrap: wrap;
    margin-bottom: 20px;
  }

  /* иконка + label остават на първия ред */
  .contact-icon,
  .contact-label {
    flex: 0 0 auto;
  }

  /* стойността отива на нов ред */
  .contact-value {
    flex: 0 0 100%;
    margin-left: 34px; /* подравняване под текста, не под иконата */
    font-size: 16px;
    line-height: 1.4;
    margin-top: -7px;
  }
}

/* =========================
   Footer
   ========================= */
.site-footer {
    background: var(--green);
    color: white;
    text-align: center;
    /* padding: 0; */
    /* margin: 0; */
    /* margin-top: 20px; */
}

/* =========================
   Topbar – mobile toggle
   ========================= */

@media (max-width: 768px) {

    .topbar-contact .contact-text {
        display: none; /* скрито по подразбиране */
        font-size: 14px;
        white-space: nowrap;
        color: white;
    }

    .topbar-contact .topbar-icon-link {
        gap: 6px;
    }

    .topbar-contact .topbar-icon-link.active .contact-text {
        display: inline;
        color: white;
    }
}

/* =========================
   Hover effects – desktop only
   ========================= */

@media (hover: hover) {
    
    /* desktop hover */
    .main-nav li:hover > .dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }

    .main-nav .has-dropdown:hover > a::after {
        transform: rotate(180deg);
    }
}

@media (hover: hover) and (pointer: fine) {

    /* TOP BAR */
    /* при hover – уголемяване + по-светло бордо */
    .topbar-icon-link:hover img {
        transform: scale(1.15);
        filter: brightness(1.25);
    }

    /* Анимация и за текста */
    .topbar-icon-link:hover span {
        color: #b32020;
    }

    /* =========================
   DROPDOWN – DESKTOP ONLY
   ========================= */

    /* NAVIGATION */

    /* Show dropdown on hover */
    /* .main-nav ul li:hover > .dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    } */

    /* Main navigation hover with rounded corners and subtle shadow */
    .main-nav > ul > li > a:hover {
        background: var(--dark-burgundy);
        transition: background 0.4s ease, box-shadow 0.4s ease, border-radius 0.4s ease;
        border-radius: 4px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    }

    /* Dropdown items hover with gradient, rounded corners, and subtle shadow */
    .main-nav .dropdown li a:hover {
        background: linear-gradient(90deg, var(--dark-burgundy), #330000);
        border-radius: 7px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.3);
        transition: background 0.4s ease, box-shadow 0.4s ease, border-radius 0.4s ease;
    }

    /* NEWS CARDS */
    .news-card:hover,
    .homepage-news-card:hover {
        box-shadow: 0 6px 20px rgba(0,0,0,0.15);
        transform: translateY(-4px);
    }

    /* GALLERY */
    .rich-gallery a:hover img {
        transform: scale(1.05);
        transition: transform 0.25s ease;
    }

    .news-gallery-grid img:hover {
        transform: scale(1.02);
        box-shadow: 0 6px 16px rgba(0,0,0,0.2);
    }
}

/* =========================
   Mobile burger bar (Step 2)
   ========================= */

/* по подразбиране лентата е скрита (desktop/tablet) */
.main-nav .mobile-nav-bar {
  display: none;
}

/* показваме я само на телефон */
@media (max-width: 600px) and (hover: none) {
  .main-nav .mobile-nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    background: var(--burgundy);
    color: white;

    padding: 12px 18px;
  }

  .main-nav .mobile-nav-title {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 15px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.2px;
  }

  .main-nav .mobile-nav-toggle {
    appearance: none;
    -webkit-appearance: none;

    background: transparent;
    border: 0;
    padding: 6px;

    display: inline-flex;
    flex-direction: column;
    gap: 5px;

    cursor: pointer;
  }

  .main-nav .mobile-nav-toggle span {
    display: block;
    width: 26px;
    height: 1.5px;
    background: white;
    border-radius: 2px;

    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
  }

  /* МАХАМЕ грозния default outline, но пазим достъпност */
  .main-nav .mobile-nav-toggle:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.7);
    outline-offset: 3px;
    border-radius: 6px;
  }

  /* X анимацията ще я активираме по-късно с клас (Step 4) */
  .main-nav .mobile-nav-toggle.is-open span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
  }
  .main-nav .mobile-nav-toggle.is-open span:nth-child(2) {
    opacity: 0;
  }
  .main-nav .mobile-nav-toggle.is-open span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
  }
}

/* subtle feedback on tap / hover */
@media (hover: hover) {
  .main-nav .mobile-nav-toggle:hover span {
    opacity: 0.85;
  }
}

.main-nav .mobile-nav-toggle:active span {
  transform: scaleX(0.9);
}

/* =========================
   Mobile menu open / close
   ========================= */

@media (max-width: 600px) and (hover: none) {

  /* по подразбиране менюто е скрито */
  .main-nav > ul {
    display: none;
    flex-direction: column;
    width: 100%;
  }

  /* при отворено меню */
  .main-nav.mobile-open > ul {
    display: flex;
  }

  /* линковете на мобилно – пълна ширина */
  .main-nav > ul > li > a {
    width: 100%;
  }
}

/* =========================
   Mobile dropdown behavior
   ========================= */

@media (max-width: 600px) and (hover: none) {

  /* dropdown – скрит по подразбиране */
  .main-nav .dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    display: none;

    background: #6d0f0f;
    /*margin-left: 18px;   */   /* леко навътре */
    border-left: 2px solid rgba(255,255,255,0.2);
  }

  /* отворен dropdown */
  .main-nav li.open > .dropdown {
    display: block;
  }

  /* подменю линкове */
  .main-nav .dropdown li a {
    padding: 10px 50px;
    font-size: 14px;
    text-transform: none;
  }
}

/* =========================
   Hide city name on mobile
   ========================= */

@media (max-width: 600px) {
    .school-city {
        display: none;
    }
}