/* === Global Styles === */
/* Basic Reset & Font */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; line-height: 1.7; color: #343a40; background-color: #f8f9fa; }
/* === Layout Container === */
.encyclopedia-container { max-width: 1140px; margin: 30px auto; padding: 25px 30px; background-color: #ffffff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); border-radius: 8px; overflow: hidden; }

/* === Header === */
.encyclopedia-header {
    display: flex;
    justify-content: space-between; /* Όπως ήταν στο backup */
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    padding: 15px 30px; /* Προσαρμοσμένο padding */
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 25px; /* Επαναφορά κανονικού margin */
}
.encyclopedia-header .logo img { max-height: 55px; width: auto; height: auto; display: block; }

.encyclopedia-header nav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap; /* Επιτρέπει σπάσιμο */
    justify-content: flex-start;
    gap: 5px 10px; /* Μικρότερο κενό */
    padding-left: 0; margin: 0;
}
.encyclopedia-header nav ul li { margin-bottom: 5px; }
.encyclopedia-header nav ul li a {
    text-decoration: none; color: #007bff; font-weight: 500; padding: 6px 8px;
    border-radius: 5px; transition: background-color 0.2s ease, color 0.2s ease;
    display: inline-block; vertical-align: middle; font-size: 0.9em; /* Μικρότερο font */
    max-width: 110px; /* Όριο αναδίπλωσης */ text-align: center; /* Κεντράρισμα */
    line-height: 1.3; border: 1px solid transparent; min-height: 34px;
    display: flex; align-items: center; justify-content: center;
}
.encyclopedia-header nav ul li a:hover,
.encyclopedia-header nav ul li a.active { background-color: #e7f3ff; color: #0056b3; border-color: #e7f3ff; }

/* === Search Bar Area (Graco Search Page) === */
.encyclopedia-sidebar { width: 100%; background-color: #f8f9fa; padding: 20px; border-radius: 6px; margin-bottom: 15px; border: 1px solid #e9ecef; }
.sidebar-top-links { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 15px; }
.sidebar-top-links a { text-decoration: none; color: #495057; font-weight: 500; font-size: 0.95em; transition: color 0.2s ease; }
.sidebar-top-links a:hover { color: #0056b3; }
.sidebar-top-links strong { font-weight: 600; }
.encyclopedia-sidebar h3 { font-size: 1.1em; margin-bottom: 12px; color: #0056b3; border-bottom: 1px solid #dee2e6; padding-bottom: 8px; margin-top: 0; }
.encyclopedia-sidebar hr { margin: 20px 0; border: 0; border-top: 1px solid #dee2e6; }
#gracoSearchInput { width: 100%; padding: 10px 12px; border: 1px solid #ced4da; border-radius: 4px; font-size: 0.95em; margin-bottom: 10px;}
#gracoSearchResults { max-height: 280px; overflow-y: auto; list-style-type: none; padding: 10px; margin-top: 5px; border: 1px solid #e9ecef; border-radius: 4px; background-color: #fff; min-height: 40px; }
#gracoSearchResults li { padding: 6px 2px; font-size: 0.9em; border-bottom: 1px dotted #e9ecef; }
#gracoSearchResults li:last-child { border-bottom: none; }
#gracoSearchResults li a { color: #007bff; text-decoration: none; word-break: break-word; }
#gracoSearchResults li a:hover { text-decoration: underline; }
#gracoSearchResults li span { font-size: 0.9em; color: #6c757d; margin-left: 0; display: block; margin-top: 3px; }
.external-search-link-container { margin-top: 15px; margin-bottom: 10px; text-align: center; display: none; min-height: 38px; }
a.external-graco-link { display: inline-block; padding: 8px 15px; background-color: #f0f0f0; color: #0056b3; border: 1px solid #ccc; border-radius: 5px; text-decoration: none; font-size: 0.9em; font-weight: 500; transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease; cursor: pointer; line-height: 1.5; }
a.external-graco-link:hover { background-color: #e2e6ea; box-shadow: 0 1px 3px rgba(0,0,0,0.1); color: #003f8a; text-decoration: none; }
a.external-graco-link i.fas { margin-left: 8px; font-size: 0.9em; opacity: 0.8; }

/* === Main Content Area === */
.encyclopedia-main { padding-top: 0; }
.encyclopedia-content { width: 100%; }

/* --- Article & Category Specific Styling --- */
/* (Ο κώδικας για breadcrumbs και content παραμένει ίδιος) */
.breadcrumbs { list-style: none; padding-left: 0; margin-bottom: 25px; font-size: 0.9em; color: #6c757d; border-bottom: 1px solid #eee; padding-bottom: 10px; white-space: nowrap; overflow-x: auto; overflow-y: hidden; }
.breadcrumbs li { display: inline-block; margin-right: 5px; }
.breadcrumbs li:not(:last-child)::after { content: ">"; margin-left: 8px; color: #6c757d; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
.breadcrumbs li a { color: #007bff; text-decoration: none; }
.breadcrumbs li a:hover { text-decoration: underline; }
.breadcrumbs li.active { font-weight: normal; color: #343a40; }
.encyclopedia-content h1, .encyclopedia-content h2, .encyclopedia-content h3, .encyclopedia-content h4, .encyclopedia-content h5, .encyclopedia-content h6 { color: #212529; margin-top: 1.2em; margin-bottom: 0.6em; line-height: 1.3; font-weight: 600; }
.encyclopedia-content h1 { font-size: 2.2em; }
.encyclopedia-content h2 { font-size: 1.8em; border-bottom: 1px solid #eee; padding-bottom: 0.3em; }
.encyclopedia-content h3 { font-size: 1.5em; } .encyclopedia-content h4 { font-size: 1.25em; } .encyclopedia-content h5 { font-size: 1.1em; } .encyclopedia-content h6 { font-size: 1em; color: #495057; }
.encyclopedia-content p { margin-bottom: 1.2em; }
.encyclopedia-content a { color: #007bff; text-decoration: none; transition: color 0.2s ease, text-decoration 0.2s ease; }
.encyclopedia-content a:hover { color: #0056b3; text-decoration: underline; }
.encyclopedia-content ul, .encyclopedia-content ol { margin-bottom: 1.2em; padding-left: 25px; }
.encyclopedia-content ul { list-style-type: disc; } .encyclopedia-content ol { list-style-type: decimal; }
.encyclopedia-content li { margin-bottom: 0.5em; }
.encyclopedia-content ul ul, .encyclopedia-content ol ol, .encyclopedia-content ul ol, .encyclopedia-content ol ul { margin-top: 0.5em; margin-bottom: 0.5em; }
.encyclopedia-content blockquote { margin: 1.5em 0; padding: 15px 20px; background-color: #f8f9fa; border-left: 4px solid #007bff; color: #495057; font-style: italic; } .encyclopedia-content blockquote p { margin-bottom: 0; }
.encyclopedia-content hr { border: 0; height: 1px; background-color: #dee2e6; margin: 2.5em 0; }
.encyclopedia-content img { max-width: 100%; height: auto; display: block; margin: 1.5em auto; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.07); }
.encyclopedia-content code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 0.9em; background-color: #e9ecef; padding: 0.2em 0.4em; border-radius: 3px; color: #343a40; }
.encyclopedia-content pre { background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; padding: 15px; overflow-x: auto; margin: 1.5em 0; font-size: 0.9em; line-height: 1.5; }
.encyclopedia-content pre code { background-color: transparent; padding: 0; border-radius: 0; font-size: inherit; color: inherit; }

/* === Table Styling (Global & Responsive Scroll) === */
.encyclopedia-content table { width: auto; max-width: 100%; border-collapse: collapse; margin: 1.5em 0; border: 1px solid #dee2e6; font-size: 0.95em; box-shadow: 0 1px 3px rgba(0,0,0,0.05); display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.encyclopedia-content th, .encyclopedia-content td { border: 1px solid #dee2e6; padding: 10px 14px; text-align: left; vertical-align: top; white-space: nowrap; }
.encyclopedia-content th { background-color: #f8f9fa; font-weight: 600; }
.encyclopedia-content tr:nth-of-type(even) { background-color: #fdfdfe; }
/* --- End Table Styling --- */

/* === Homepage Specific Styles === */
.homepage-main-area { display: flex; flex-wrap: wrap; gap: 30px; margin-top: 20px; }
.homepage-categories { flex: 2; min-width: 250px; }
.homepage-categories h2 { font-size: 1.5em; margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 5px; }
.homepage-categories ul { list-style: none; padding-left: 0; margin: 0; }
.homepage-categories ul li { margin-bottom: 12px; font-size: 1.1em; }
.homepage-categories ul li a { text-decoration: none; color: #007bff; font-weight: 500; }
.homepage-categories ul li a:hover { text-decoration: underline; color: #0056b3; }
.homepage-categories ul li strong { font-weight: 600; }
.homepage-graco { flex: 1; min-width: 200px; text-align: center; }
.graco-box-link { display: block; padding: 20px 15px; border: 1px solid #dee2e6; border-radius: 6px; text-decoration: none; transition: background-color 0.2s ease, box-shadow 0.2s ease; height: 100%; background-color: #fff; }
.graco-box-link:hover { background-color: #f8f9fa; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.homepage-graco img { max-width: 160px; height: auto; display: block; margin: 0 auto 15px auto; }
.graco-link-text { display: block; font-weight: bold; color: #007bff; font-size: 1.1em; }
/* === End Homepage Specific Styles === */

/* === Site Search Page Specific Styles (Pagefind) === */
.pagefind-search-page-content { padding-top: 1em; }
.search-page-intro p { margin-bottom: 1.5em; font-size: 1.1em; text-align: center; }
#search .pagefind-ui__search-input {
    font-size: 1.1em; padding: 10px 15px; border-radius: 5px;
    border: 1px solid #aaa; margin-bottom: 25px;
    display: block; max-width: 700px; margin-left: auto; margin-right: auto;
}
.back-link-container { margin-top: 40px; margin-bottom: 20px; text-align: center;}
a.button.back-to-home-btn { display: inline-block; padding: 10px 20px; background-color: #6c757d; color: #ffffff; border: none; border-radius: 5px; text-decoration: none; font-weight: 500; transition: background-color 0.2s ease;}
a.button.back-to-home-btn:hover { background-color: #5a6268; color: #ffffff;}
a.button.back-to-home-btn i { margin-right: 8px;}
/* === End Site Search Page Styles === */

/* === Footer === */
.encyclopedia-footer { text-align: center; padding: 25px 20px; margin-top: 40px; background-color: #f8f9fa; border-top: 1px solid #dee2e6; font-size: 0.9em; color: #6c757d; }
.encyclopedia-footer p { margin-bottom: 8px; }
.encyclopedia-footer a { color: #007bff; text-decoration: none; transition: text-decoration 0.2s ease; }
.encyclopedia-footer a:hover { text-decoration: underline; }
.footer-social-icons { margin-top: 20px; padding-top: 20px; border-top: 1px solid #eee; text-align: center; }
.footer-social-icons a { display: inline-block; margin: 0 10px; font-size: 1.6em; color: #5a6268; text-decoration: none; transition: color 0.2s ease, transform 0.2s ease; }
.footer-social-icons a:hover { color: #007bff; transform: scale(1.1); }
/* === End Footer === */

/* === Scroll to Top Button (ΕΝΗΜΕΡΩΜΕΝΟ) === */
#scrollToTopBtn {
  display: none;
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 100;
  border: none;
  outline: none;
  background-color: #dc3545;
  color: white;
  cursor: pointer;
  padding: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  font-size: 24px;
  line-height: 60px;
  text-align: center;
  transition: background-color 0.2s ease, opacity 0.3s ease;
  opacity: 0.8;
}
#scrollToTopBtn:hover {
  background-color: #c82333;
  opacity: 1;
}

/* --- Responsive Design --- */

/* Μεγαλύτερες Tablet και κάτω (π.χ., <= 992px) */
@media (max-width: 992px) {
    .encyclopedia-container { margin: 20px auto; padding: 20px; }
    .encyclopedia-header { justify-content: space-between; }
}

/* Μικρότερα Tablet και Κινητά (π.χ., <= 768px) */
@media (max-width: 768px) {
    .encyclopedia-container { margin: 15px auto; padding: 15px; }
    .encyclopedia-header { flex-direction: column; align-items: center; gap: 15px; padding: 15px;}
    .encyclopedia-header .logo { margin-right: 0; margin-bottom: 15px; }
    .header-nav { width: 100%; margin-left: 0; padding-left: 0; order: 2; }
    .encyclopedia-header nav ul {
        justify-content: center; /* Κεντράρισμα li μέσα στο ul */
        gap: 8px 10px;
        /* --- ΠΡΟΣΘΗΚΗ ΓΙΑ ΚΕΝΤΡΑΡΙΣΜΑ UL --- */
        margin-left: auto;
        margin-right: auto;
        max-width: max-content; /* Το UL παίρνει μόνο το πλάτος που χρειάζεται */
        /* --------------------------------- */
    }

    .encyclopedia-content h1 { font-size: 1.9em; }
    .encyclopedia-content h2 { font-size: 1.6em; }
    .encyclopedia-content h3 { font-size: 1.35em; }
    .homepage-main-area { flex-direction: column; gap: 25px; }
    .homepage-categories, .homepage-graco { flex-basis: 100%; }

    /* Ενημέρωση ScrollToTop για mobile */
    #scrollToTopBtn {
      width: 50px;
      height: 50px;
      right: 15px;
      bottom: 15px;
      font-size: 20px;
      line-height: 50px;
    }
}

/* Πολύ Μικρές Οθόνες (π.χ., <= 480px) */
@media (max-width: 480px) {
    .encyclopedia-container { margin: 10px auto; padding: 10px; border-radius: 4px; }
    .footer-social-icons a { font-size: 1.4em; margin: 0 6px;}
    /* Δεν χρειάζεται πλέον ξεχωριστός κανόνας για το #scrollToTopBtn εδώ, καλύπτεται από το max-width: 768px */

    /* Προσαρμογές για Graco Search σε πολύ μικρές οθόνες */
     .search-header-wrapper { /* ... */ }
     .external-link-placeholder { width: 100%; text-align: center; margin-top: 5px; }
}

/* === Dropdown Menu Styling === */
.encyclopedia-header nav ul { position: relative; }
.encyclopedia-header nav ul li { position: relative; }
.encyclopedia-header nav ul ul { /* Υπομενού */
    display: none; position: absolute; left: 0; top: 100%;
    background-color: #ffffff; border: 1px solid #eee;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); list-style: none;
    padding: 5px 0; margin: 0; min-width: 180px; z-index: 1010;
    border-radius: 0 0 4px 4px;
}
.encyclopedia-header nav ul ul li { width: 100%; margin-bottom: 0; }
.encyclopedia-header nav ul ul li a {
    display: block; padding: 8px 15px; color: #333; font-size: 0.85em;
    white-space: nowrap; text-align: left; max-width: none; border: none;
    min-height: auto; line-height: 1.5; justify-content: flex-start;
    border-radius: 0; transition: background-color 0.2s ease, color 0.2s ease;
}
.encyclopedia-header nav ul ul li a:hover,
.encyclopedia-header nav ul ul li a.active { background-color: #f0f0f0; color: #0056b3; }

/* Εμφάνιση υπομενού ΜΟΝΟ με hover σε DESKTOP (π.χ. >= 769px) */
@media (min-width: 769px) {
    .encyclopedia-header nav ul li:hover > ul { display: block; }
}
/* Εμφάνιση υπομενού όταν το li παίρνει την κλάση .submenu-active (από JS για mobile κλικ) */
.encyclopedia-header nav ul li.submenu-active > ul { display: block; }
/* Στυλ για το βελάκι ▼ (submenu indicator) */
.encyclopedia-header nav ul li a .submenu-indicator {
    font-size: 0.7em; margin-left: 5px; display: inline-block;
    vertical-align: middle; transition: transform 0.2s ease;
}
/* Περιστροφή βέλους όταν το μενού είναι ενεργό */
.encyclopedia-header nav ul li.submenu-active > a .submenu-indicator { transform: rotate(180deg); }
/* === End Dropdown Menu Styling === */

/* === Styling for Graco Search Header Wrapper === */
.search-header-wrapper {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 15px; flex-wrap: wrap; gap: 10px;
}
.external-link-placeholder { text-align: right; }
.external-link-placeholder .external-graco-link {
  font-size: 0.85em; display: inline-block; padding: 5px 8px;
  background-color: #f0f0f0; color: #0056b3; border: 1px solid #ccc;
  border-radius: 5px; text-decoration: none; font-weight: 500;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
  cursor: pointer; line-height: 1.4;
}
.external-link-placeholder .external-graco-link:hover {
  background-color: #e2e6ea; box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  color: #003f8a; text-decoration: none;
}
.external-link-placeholder .external-graco-link i.fas { margin-left: 5px; font-size: 0.9em; opacity: 0.8; }
/* === End Graco Search Header Wrapper === */