:root {
   --primary-color: #ffff00;
   --bg-dark: #000000;
   --bg-box: #111111;
   --bg-box-alt: #1a1a1a;
   --text-dark: #ffffff;
   --text-def: #ffffff;
   --text-misc: #eeeeee;
   --a-color: #ffff00;
   --a-hover-color: #00ffff;
   --border-color: #ffffff;
   --focus-color: #ff9900;
}

body {
   font-family: 'Inter', Arial, sans-serif;
   background: var(--bg-dark);
   color: var(--text-dark);
   display: flex;
   flex-direction: column;
   min-height: 100vh;
   font-size: 1.15rem;
   line-height: 1.7;
}

/* 1. sor: Top Bar & Navigáció */
.top-navbar {
   background-color: var(--bg-dark);
   border-bottom: 3px solid var(--border-color);
   position: fixed;
   width: 100%;
}

.date-info {
   font-size: 1rem;
   color: var(--text-misc);
   font-weight: 700;
}

a {
   text-decoration: underline;
   color: var(--a-color);
   font-weight: 700;
}

a:hover,
a:focus {
   color: var(--a-hover-color);
   background-color: #000066;
   text-decoration: underline;
}

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
.nav-link:focus,
.dropdown-item:focus {
   outline: 4px solid var(--focus-color);
   outline-offset: 3px;
}

/* 2. sor: Logo és Háttérkép banner */
.header-banner {
   background: var(--bg-dark);
   border: 3px solid var(--border-color);
   border-radius: 0;
   margin-top: 67px;
}

.logo-placeholder {
   margin-left: 10px;
}

.logo-placeholder img {
   background-color: #ffffff;
   padding: 6px;
   border: 2px solid var(--border-color);
}

/* --- BREADCRUMB SÁV STÍLUSA --- */
.breadcrumb-box {
   background: var(--bg-box);
   border: 3px solid var(--border-color);
   border-radius: 0;
   padding: 0.75rem 1.5rem;
   box-shadow: none;
   font-size: 1rem;
   color: var(--text-dark);
}

.breadcrumb {
   margin-bottom: 0;
   align-items: center;
}

.breadcrumb-item {
   color: var(--text-dark);
}

.breadcrumb-item.active {
   color: var(--text-dark);
   font-weight: 700;
}

.breadcrumb-item + .breadcrumb-item::before {
   font-family: "bootstrap-icons";
   content: "\f285";
   font-size: 0.85rem;
   color: var(--primary-color);
   text-decoration: none;
}

.fb-link {
   transition: none;
   text-decoration: underline;
}

.breadcrumb-item a {
   text-decoration: underline;
   color: var(--a-color);
   font-weight: 700;
}

.fb-link:hover,
.fb-link:focus,
.breadcrumb-item a:hover,
.breadcrumb-item a:focus {
   color: var(--a-hover-color);
}

h1 {
   font-size: 2.3rem;
   color: #ffffff;
   font-weight: 800;
}

h2 {
   font-size: 2rem;
   color: var(--primary-color);
   font-weight: 800;
}

h5 {
   font-size: 1.35rem;
   color: var(--primary-color);
   font-weight: 800;
}

p,
li,
span,
div {
   color: inherit;
}

.list-item {
   margin-bottom: 18px;
   border-bottom: 2px dotted var(--border-color);
   padding-bottom: 12px;
   display: inline-block;
}

.item-date ul {
   padding-left: 0;
}

.item-date ul li {
   display: inline;
   color: var(--text-misc);
   font-size: 1rem;
   font-weight: 700;
}

.item-date a {
   color: var(--a-color);
}

.bu {
   color: var(--primary-color);
   padding: 0 10px;
}

/* Fejléc */
.navbar {
   background-color: var(--bg-dark);
   box-shadow: none;
}

.navbar .container {
   background-color: var(--bg-dark);
}

.navbar-brand {
   font-weight: 800;
   color: var(--primary-color) !important;
}

.navbar-light .navbar-nav .nav-link,
.navbar-nav .nav-link {
   color: var(--a-color);
   font-weight: 800;
   text-decoration: underline;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
   color: var(--a-hover-color);
   background-color: #000066;
}

.navbar-toggler {
   background-color: var(--primary-color);
   border: 3px solid var(--border-color);
}

/* Finomított almenü stílus */
.dropdown-menu {
   background-color: var(--bg-box);
   border: 3px solid var(--border-color);
   border-radius: 0;
   box-shadow: none;
   margin-top: 0;
}

.dropdown-item {
   color: var(--a-color);
   font-weight: 700;
   text-decoration: underline;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item:active {
   color: var(--a-hover-color);
   background-color: #000066;
}

/* Bootstrap szöveg- és ikonsegédek felülírása gyengénlátó módhoz */
.text-primary,
.text-muted,
.small.text-muted,
i.text-primary {
   color: var(--primary-color) !important;
}

.text-dark {
   color: var(--text-dark) !important;
}

.text-white-50 {
   color: var(--text-misc) !important;
}

/* --- HOVER EFFEKT AZ ALMENÜHÖZ (Asztali nézetben) --- */
@media (min-width: 992px) {
   .navbar-nav .nav-item.dropdown:hover .dropdown-menu {
      display: block;
      animation: none;
   }
}

@media (max-width: 992px) {
   .header-banner {
      display: none;
   }

   .breadcrumb-box {
      margin-top: 50px;
   }
}

/* Opcionális: Finom áttűnés animáció a megjelenéskor */
@keyframes fadeIn {
   from {
      opacity: 1;
      transform: none;
   }

   to {
      opacity: 1;
      transform: none;
   }
}

/* Fő tartalom elrendezés */
main {
   flex: 1;
}

/* Kártyák / Dobozok stílusa (Fő tartalom és Sidebar) */
.content-box {
   background: var(--bg-box);
   border: 3px solid var(--border-color);
   border-radius: 0;
   padding: 2rem;
   box-shadow: none;
   margin-bottom: 1.5rem;
   color: var(--text-dark);
}

.teacher-group {
   text-align: center;
   font-size: 2.2rem;
   padding: 10px 0 30px 0;
   color: var(--primary-color);
   font-weight: 800;
   text-transform: uppercase;
}

.sidebar-box {
   background: var(--bg-box);
   border: 3px solid var(--border-color);
   border-radius: 0;
   padding: 1rem;
   box-shadow: none;
   margin-bottom: 1.5rem;
   color: var(--text-dark);
}

.sidebar-box h5 {
   font-weight: 800;
   border-bottom: 3px solid var(--primary-color);
   padding-bottom: 0.5rem;
   margin-bottom: 1rem;
   color: var(--primary-color);
}

.sidebar-box ul {
   padding-left: 1.4rem;
}

.sidebar-box li {
   margin-bottom: 0.45rem;
}

.sidebar-box img,
.content-box img,
.footer-icons img {
   background-color: #ffffff;
   border: 2px solid var(--border-color);
   padding: 4px;
}

/* Lábléc */
footer {
   background-color: var(--bg-dark);
   color: var(--text-dark);
   padding: 2rem 0;
   margin-top: auto;
   border-top: 3px solid var(--border-color);
}

footer a {
   color: var(--a-color);
}

footer a:hover,
footer a:focus {
   color: var(--a-hover-color);
}

.footer-icons img {
   height: 55px;
   padding: 4px 12px;
}

.blind-box {
   background-color: var(--bg-box-alt);
   border: 3px solid var(--primary-color);
   padding: 10px;
   text-align: center;
}

.blind-box a {
   color: var(--a-color);
   font-size: 1.15rem;
   font-weight: 800;
}

.mnu-blind img {
   width: 45px;
   margin: 0 auto;
   display: block;
}

/* Sidebar calendar */
#c-tab2 p {
   margin-bottom: 0.2rem;
   padding-bottom: 0.2rem;
}

.c-title {
   text-align: center;
   font-weight: 800;
   color: var(--primary-color);
}

.c-nav {
   text-align: center;
}

.c-nav .button {
   border: 3px solid var(--border-color);
   background-color: var(--bg-dark);
   color: var(--primary-color);
   font-size: 1rem;
   font-weight: 800;
   height: auto;
   line-height: 1.4;
   vertical-align: top;
   min-width: 36px;
   padding: 4px 8px;
}

.c-nav .button:hover,
.c-nav .button:focus {
   color: var(--a-hover-color);
   background-color: #000066;
}

/* Űrlapok és gombok */
.btn,
button,
input,
select,
textarea {
   font-size: 1rem;
}

.btn,
button {
   border: 3px solid var(--border-color);
   font-weight: 800;
}

.btn-primary,
.bg-primary {
   background-color: var(--primary-color) !important;
   border-color: var(--border-color) !important;
   color: #000000 !important;
}

.btn-primary:hover,
.btn-primary:focus {
   background-color: var(--a-hover-color) !important;
   color: #000000 !important;
}

input,
select,
textarea,
.form-control {
   background-color: #000000;
   color: #ffffff;
   border: 3px solid var(--border-color);
}

input::placeholder,
textarea::placeholder {
   color: #dddddd;
}

/* Listák, táblázatok */
.list-group-item {
   background-color: var(--bg-box);
   color: var(--text-dark);
   border-color: var(--border-color);
}

.badge {
   background-color: var(--primary-color) !important;
   color: #000000 !important;
   font-weight: 800;
}

table {
   color: var(--text-dark);
   border-color: var(--border-color);
}

th,
td {
   border-color: var(--border-color);
}

/* Kijelölés */
::selection {
   background-color: var(--primary-color);
   color: #000000;
}

div.pager span.plain {
   text-align: center;
   margin: 2px 3px;
   padding: 4px 10px;
   border: 1px solid #bebebe;
   color: #363636;
   font-weight: bold;
   background-color: #fff;
}

div.pager a {
   height: 15px;
   padding: 4px 10px;
   margin: 2px 3px;
   border: 1px solid #BCBCBC;
   text-decoration: none;
   color: #404040;
   font-weight: bold;
   background-color: #fff;
}

div.pager a:hover,
div span.plain.selected {
   border: 1px solid var(--text-dark);
   background-color: var(--a-color);
   color: #fff;
   font-weight: bold;
}


/* GALLERY */

.list-sublist {
   text-align: center;
   padding-left: 20px;
   margin-bottom: 20px;
   display: inline-block;
}

.list-sublist div {
   float: left;
   padding: 2px;
}

.list-sublist div img {
   margin: 0 10px 10px;
}

img.gallery-tn {
   padding: 2px;
   text-align: center;
   width: 92px;
}

/* Sidebar gallery */
.sidebar-gallery-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 12px;
   width: 100%;
}

.sidebar-gallery-item {
   display: block;
   width: 100%;
   aspect-ratio: 4 / 3;
   overflow: hidden;
   background-color: var(--bg-dark);
   border: 3px solid var(--border-color);
}

.sidebar-gallery-item:hover,
.sidebar-gallery-item:focus {
   border-color: var(--primary-color);
   background-color: #000066;
}

.sidebar-gallery-item .gallery-tn {
   display: block;
   width: 100%;
   height: 100%;
   max-width: none;
   object-fit: cover;
}

.article-lead-image {
   width: 200px;
   margin-right: 10px;
}