/* ============================================================
 * GoLab Academy - Header Styling (Motta Theme)
 *
 * ΣΗΜΑΝΤΙΚΟ: Το Motta ΔΕΝ χρησιμοποιεί header.php - έχει δικό του
 * header builder. Γι' αυτό στυλίζουμε τα δικά του elements αντί
 * να το αντικαταστήσουμε.
 *
 * Πραγματικοί selectors (επιβεβαιωμένοι με inspect στο live site):
 *   .site-header                    -> το header
 *   .header-search__container       -> το κουτί της αναζήτησης
 *   .header-search__field           -> το input (type="text", ΟΧΙ "search")
 *   .header-search__button          -> το κουμπί αναζήτησης
 *   .header-search__categories-label-> dropdown "Όλες οι κατηγορίες"
 *   .header-search__trending        -> dropdown δημοφιλών αναζητήσεων
 *   .main-navigation .nav-menu      -> το μενού
 * ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap');

:root {
    --golab-primary: #52899b;
    --golab-primary-dark: #416b7b;
    --golab-ink: #333;
}

/* --- 1. Καθολική γραμματοσειρά ---------------------------- */
body,
button,
input,
select,
textarea,
.site-header,
.main-navigation,
.motta-button {
    font-family: 'Fredoka', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* ============================================================
   2. SEARCH BAR
   ============================================================ */

/* Το εξωτερικό κουτί: hand-drawn στυλ με μαύρο border & σκιά
 *
 * ΠΡΟΣΟΧΗ: ΜΗΝ βάλεις overflow:hidden εδώ! Μέσα στο container ζουν
 * τα dropdowns του Motta:
 *   .header-search__categories  -> η λίστα με τις 40 κατηγορίες
 *   .header-search__trending    -> δημοφιλείς αναζητήσεις
 *   .header-search__results     -> αποτελέσματα ajax
 * Με overflow:hidden κόβονται όλα στα 48px ύψος του input.
 */
.header-search .header-search__container {
    border: 2px solid var(--golab-ink) !important;
    border-radius: 50px !important;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.08);
    overflow: visible !important;
    transition: box-shadow 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
}

/* Focus state - όταν πληκτρολογεί ο χρήστης */
.header-search .header-search__container:focus-within {
    border-color: var(--golab-primary) !important;
    box-shadow: 4px 4px 0 var(--golab-primary), 0 0 0 3px rgba(82, 137, 155, 0.15);
    transform: translate(-1px, -1px);
}

/* Το input */
.header-search__field {
    font-family: 'Fredoka', sans-serif !important;
    font-size: 0.98rem !important;
    padding: 0 18px !important;
    color: var(--golab-ink);
    background: transparent;
}

.header-search__field::placeholder {
    color: #9aa5ad;
    font-style: italic;
    opacity: 1;
}

/* Το κουμπί αναζήτησης (μεγεθυντικός φακός)
 *
 * Είναι ΑΥΤΟΝΟΜΟ element, ΕΞΩ από το .header-search__container
 * (ξεκινάει ~12px μετά το δεξί άκρο του). Άρα χρειάζεται δικό του
 * border-radius - δεν το στρογγυλεύει το container. */
.header-search__button {
    background: var(--golab-primary) !important;
    border: 2px solid var(--golab-ink) !important;
    border-radius: 50px !important;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.08);
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.header-search__button:hover,
.header-search__button:focus {
    background: var(--golab-primary-dark) !important;
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.12);
}

/* Dropdown "Όλες οι κατηγορίες" */
.header-search__categories-label {
    font-family: 'Fredoka', sans-serif !important;
    font-size: 0.9rem;
    font-weight: 500;
    padding-left: 18px !important;
    border-right: 2px dashed #e2e8ed;
    color: #5a6670;
}

.header-search__categories-text {
    letter-spacing: 0.01em;
}

/* Η λίστα που ανοίγει με τις κατηγορίες */
.header-search__categories-container,
.header-search__categories {
    font-family: 'Fredoka', sans-serif !important;
}

.header-search__categories-container {
    border: 2px solid var(--golab-ink) !important;
    border-radius: 15px !important;
    box-shadow: 4px 5px 0 rgba(0, 0, 0, 0.1) !important;
    background: #fff;
    padding: 8px !important;
}

.header-search__categories-container a,
.header-search__categories li a {
    font-size: 0.9rem;
    border-radius: 8px;
    padding: 7px 12px !important;
    transition: background 0.15s ease, color 0.15s ease;
}

.header-search__categories-container a:hover,
.header-search__categories li a:hover {
    background: #f5f9fa;
    color: var(--golab-primary) !important;
}

/* Dropdown δημοφιλών αναζητήσεων / αποτελεσμάτων */
.header-search__trending,
.header-search__results {
    font-family: 'Fredoka', sans-serif !important;
    border: 2px solid var(--golab-ink) !important;
    border-radius: 15px !important;
    box-shadow: 4px 5px 0 rgba(0, 0, 0, 0.1) !important;
    overflow: hidden;
    margin-top: 8px;
}

.header-search__trending-label {
    font-weight: 600;
    color: var(--golab-primary);
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}

.header-search__trending-links a {
    font-size: 0.92rem;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.header-search__trending-links a:hover {
    color: var(--golab-primary);
    padding-left: 4px;
}

/* ============================================================
   3. MENU
   ============================================================ */
.main-navigation .nav-menu > li > a {
    font-family: 'Fredoka', sans-serif !important;
    font-weight: 500;
    letter-spacing: 0.01em;
    border-radius: 30px;
    transition: color 0.2s ease, background 0.2s ease;
}

.main-navigation .nav-menu > li > a:hover,
.main-navigation .nav-menu > li.current-menu-item > a {
    color: var(--golab-primary) !important;
}

/* Sub-menus */
.main-navigation .sub-menu {
    font-family: 'Fredoka', sans-serif !important;
    border-radius: 12px !important;
}

/* ============================================================
   4. HEADER ICONS (καλάθι, λογαριασμός, γλώσσα, hamburger)
   ============================================================ */
.header-cart .motta-button,
.header-account .motta-button,
.header-preferences .motta-button {
    transition: transform 0.15s ease, color 0.2s ease;
}

.header-cart .motta-button:hover,
.header-account .motta-button:hover,
.header-preferences .motta-button:hover {
    transform: translateY(-2px);
    color: var(--golab-primary);
}

/* Το bubble με τον αριθμό προϊόντων στο καλάθι */
.header-cart .motta-button__count,
.header-cart .cart-counter,
.motta-button--icon .count {
    font-family: 'Fredoka', sans-serif !important;
    font-weight: 700;
}

/* ============================================================
   5. HEADER γενικά
   ============================================================ */
.site-header {
    font-family: 'Fredoka', sans-serif;
}

/* ΛΟΓΟΤΥΠΟ - ΜΗΝ ΠΕΙΡΑΞΕΙΣ ΤΑ <a> ΜΕΣΑ ΣΤΟ .header-logo!
 *
 * Το .header-logo περιέχει ΔΥΟ anchors:
 *   1. <a><img logo></a>                      -> η εικόνα
 *   2. <h1 class="site-title"><a>...</a></h1>  -> κρυφό κείμενο για screen readers
 *
 * Κανόνας τύπου `.header-logo a { ... }` πιάνει και τα δύο και ακυρώνει
 * το screen-reader hiding του Motta (ίδια specificity, αλλά το δικό μας
 * CSS φορτώνει τελευταίο) -> εμφανίζεται το κείμενο "GoLabAcademy"
 * αντί για το λογότυπο.
 *
 * Αν χρειαστεί hover effect στο μέλλον, στόχευσε ΜΟΝΟ την εικόνα:
 *   .header-logo > a > img { transition: transform .2s ease; }
 *   .header-logo > a:hover > img { transform: scale(1.03); }
 */

/* ============================================================
   6. WooCommerce buttons (Add to cart κλπ)
   ============================================================ */
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.motta-button {
    font-family: 'Fredoka', sans-serif !important;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ============================================================
   7. RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
    /* Στο κινητό το search container είναι πιο συμπαγές */
    .header-search .header-search__container {
        box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.08);
    }

    .header-search__field {
        font-size: 0.92rem !important;
        padding: 0 14px !important;
    }

    /* Το dropdown κατηγοριών κρύβεται σε στενές οθόνες για χώρο */
    .header-search__categories-label {
        display: none;
    }
}

@media (max-width: 480px) {
    .header-search .header-search__container {
        border-radius: 40px !important;
    }
}

/* ============================================================
   8. Accessibility - ορατό focus παντού
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.motta-button:focus-visible {
    outline: 3px solid rgba(82, 137, 155, 0.5);
    outline-offset: 2px;
}

/* ============================================================
 * Gutenberg blocks — ελάχιστο CSS αντικατάστασης
 *
 * ΓΙΑΤΙ ΥΠΑΡΧΕΙ:
 * Κάναμε dequeue το wp-block-library (19.6 KiB render-blocking)
 * επειδή το site χτίζεται με Elementor + custom templates.
 * ΟΜΩΣ η σελίδα /blog/ χρησιμοποιεί 17 Gutenberg blocks στο sidebar
 * και δύο από αυτά έσπασαν:
 *   - .wp-block-search      -> το κουμπί έπεφτε κάτω από το input
 *   - .wp-block-categories  -> εμφάνιζε bullets
 *
 * Αυτές οι ~12 γραμμές τα διορθώνουν, αντί να επαναφέρουμε 19.6 KiB.
 * ============================================================ */

.wp-block-search__inside-wrapper {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.wp-block-search__input {
    flex: 1 1 auto;
    min-width: 0;
}

.wp-block-search__button {
    flex: 0 0 auto;
    white-space: nowrap;
}

.wp-block-categories-list,
.wp-block-latest-posts,
.wp-block-latest-posts__list,
.wp-block-archives-list {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

.wp-block-group { margin-bottom: 24px; }
.wp-block-heading { margin: 0 0 10px; }