/*
Theme Name: The yoSHEta Test
Theme URI: https://yosheta.com/
Author: THE yoSHEta
Description: Clean test theme for THE yoSHEta.
Version: 1.0.0
Text Domain: the-yosheta-test
*/

:root {
    --yosheta-purple: #4b0757;
    --yosheta-purple-dark: #35033f;
    --yosheta-purple-light: #74406f;
    --yosheta-pink: #a7649a;
    --yosheta-white: #ffffff;
    --yosheta-black: #111111;
    --yosheta-text: #292929;
    --yosheta-muted: #777777;
    --yosheta-border: #e5e5e5;
    --yosheta-bg: #ffffff;
    --yosheta-soft-bg: #faf7fa;
    --yosheta-max-width: 1200px;
    --yosheta-font-body: Arial, Helvetica, sans-serif;
    --yosheta-font-heading: Georgia, "Times New Roman", serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    background: var(--yosheta-bg);
    color: var(--yosheta-text);
    font-family: var(--yosheta-font-body);
    font-size: 16px;
    line-height: 1.6;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

.wrap {
    width: min(100% - 32px, var(--yosheta-max-width));
    margin-inline: auto;
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.alignleft {
    float: left;
    margin: 0 24px 16px 0;
}

.alignright {
    float: right;
    margin: 0 0 16px 24px;
}

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

.wp-caption {
    max-width: 100%;
}

.wp-caption-text {
    font-size: 13px;
    color: var(--yosheta-muted);
}

@media (max-width: 767px) {
    .wrap {
        width: min(100% - 24px, var(--yosheta-max-width));
    }
}


/* =========================================================
   THE yoSHEta HEADER
   =========================================================

   PURPOSE:
   Controls the visual layout of:

   - Logo
   - Primary navigation
   - Language switcher
   - Search
   - Mobile menu button

   IMPORTANT:
   Header structure is controlled by header.php.
   Header appearance is controlled here.

   DESKTOP:
   Logo → Navigation → Languages → Search

   MOBILE:
   Menu → Logo → Languages → Search
   ========================================================= */


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

.yosheta-header {
    width: 100%;
    background: var(--yosheta-white);
    border-bottom: 1px solid var(--yosheta-border);
    position: relative;
    z-index: 1000;
}


/* =========================================================
   HEADER INNER CONTAINER
   ========================================================= */

.yosheta-header-inner {
    min-height: 82px;

    display: grid;

    grid-template-columns:
        minmax(220px, 280px)
        minmax(0, 1fr)
        auto;

    grid-template-areas:
        "brand navigation actions";

    align-items: center;

    gap: 24px;
}


/* =========================================================
   LOGO / BRAND
   ========================================================= */

.yosheta-brand {
    grid-area: brand;

    min-width: 0;
}


.yosheta-logo {
    display: inline-flex;

    flex-direction: column;

    justify-content: center;

    max-width: 100%;

    color: var(--yosheta-purple);

    line-height: 1;

    text-decoration: none;
}


/*
 * If WordPress Custom Logo is being used.
 */

.yosheta-logo .custom-logo-link {
    display: block;
}


.yosheta-logo .custom-logo {
    width: auto;

    max-width: 260px;

    max-height: 62px;

    object-fit: contain;
}


/*
 * Text logo fallback.
 */

.yosheta-logo-main {
    font-family: var(--yosheta-font-heading);

    font-size: 28px;

    font-weight: 400;

    letter-spacing: -0.5px;

    white-space: nowrap;
}


.yosheta-logo-main strong {
    font-weight: 700;
}


.yosheta-logo-tagline {
    margin-top: 5px;

    color: var(--yosheta-muted);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 2px;

    white-space: nowrap;
}


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

.yosheta-navigation {
    grid-area: navigation;

    min-width: 0;
}


.yosheta-nav-menu {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 22px;

    margin: 0;

    padding: 0;

    list-style: none;
}


.yosheta-nav-menu li {
    margin: 0;

    padding: 0;
}


.yosheta-nav-menu a {
    display: inline-block;

    padding: 8px 0;

    color: var(--yosheta-text);

    font-size: 14px;

    font-weight: 600;

    white-space: nowrap;

    transition:
        color 0.2s ease,
        border-color 0.2s ease;
}


.yosheta-nav-menu a:hover,
.yosheta-nav-menu .current-menu-item > a,
.yosheta-nav-menu .current_page_item > a {
    color: var(--yosheta-purple);
}


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

.yosheta-header-actions {
    grid-area: actions;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 12px;

    min-width: max-content;
}


/* =========================================================
   LANGUAGE SWITCHER
   ========================================================= */

.yosheta-languages {
    display: flex;

    align-items: center;

    gap: 5px;

    white-space: nowrap;
}


.yosheta-language {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 30px;

    padding: 4px 8px;

    border: 1px solid var(--yosheta-pink);

    border-radius: 3px;

    background: var(--yosheta-white);

    color: var(--yosheta-purple);

    font-size: 11px;

    font-weight: 700;

    line-height: 1;

    white-space: nowrap;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}


.yosheta-language:hover,
.yosheta-language.active {
    background: var(--yosheta-purple);

    color: var(--yosheta-white);
}


/* =========================================================
   SEARCH
   ========================================================= */

.yosheta-search form {
    display: flex;

    align-items: center;

    gap: 5px;

    margin: 0;
}


.yosheta-search input {
    width: 150px;

    height: 34px;

    padding: 6px 10px;

    border: 1px solid var(--yosheta-border);

    border-radius: 3px;

    background: var(--yosheta-white);

    color: var(--yosheta-text);

    font-size: 13px;

    outline: none;
}


.yosheta-search input:focus {
    border-color: var(--yosheta-purple);
}


.yosheta-search button {
    height: 34px;

    padding: 6px 10px;

    border: 0;

    border-radius: 3px;

    background: var(--yosheta-purple);

    color: var(--yosheta-white);

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;

    transition: background 0.2s ease;
}


.yosheta-search button:hover {
    background: var(--yosheta-purple-dark);
}


/* =========================================================
   MOBILE MENU BUTTON
   =========================================================

   Hidden on desktop.

   Displayed only on smaller screens.
   ========================================================= */

.yosheta-menu-toggle {
    display: none;

    width: 42px;

    height: 42px;

    padding: 8px;

    border: 0;

    background: transparent;

    flex-direction: column;

    justify-content: center;

    gap: 5px;

    cursor: pointer;
}


.yosheta-menu-toggle span {
    display: block;

    width: 100%;

    height: 2px;

    background: var(--yosheta-purple);

    border-radius: 2px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .yosheta-header-inner {
        grid-template-columns:
            minmax(190px, 230px)
            minmax(0, 1fr)
            auto;

        gap: 14px;
    }


    .yosheta-nav-menu {
        gap: 14px;
    }


    .yosheta-nav-menu a {
        font-size: 13px;
    }


    .yosheta-search input {
        width: 120px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .yosheta-header-inner {
        min-height: 64px;

        grid-template-columns:
            42px
            minmax(0, 1fr)
            auto;

        grid-template-areas:
            "menu brand actions";

        gap: 8px;
    }


    /* Show hamburger */

    .yosheta-menu-toggle {
        grid-area: menu;

        display: flex;
    }


    /* Keep logo in the middle */

    .yosheta-brand {
        grid-area: brand;

        min-width: 0;
    }


    .yosheta-logo-main {
        font-size: 21px;

        overflow: hidden;

        text-overflow: ellipsis;
    }


    .yosheta-logo-tagline {
        font-size: 6px;

        letter-spacing: 1.2px;
    }


    .yosheta-logo .custom-logo {
        max-width: 190px;

        max-height: 46px;
    }


    /* Header actions */

    .yosheta-header-actions {
        grid-area: actions;

        gap: 5px;

        min-width: 0;
    }


    /* Hide search input on mobile */

    .yosheta-search input {
        display: none;
    }


    .yosheta-search button {
        width: 34px;

        height: 34px;

        padding: 0;

        font-size: 0;
    }


    /*
     * Use a simple magnifying-glass symbol
     * when the text button is hidden.
     */

    .yosheta-search button::before {
        content: "⌕";

        font-size: 20px;

        line-height: 1;
    }


    /* Smaller language buttons */

    .yosheta-languages {
        gap: 3px;
    }


    .yosheta-language {
        min-height: 29px;

        padding: 4px 6px;

        font-size: 9px;
    }


    /* Hide desktop navigation initially */

    .yosheta-navigation {
        display: none;

        position: absolute;

        top: 100%;

        left: 0;

        right: 0;

        width: 100%;

        background: var(--yosheta-white);

        border-bottom: 1px solid var(--yosheta-border);

        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);

        padding: 14px 16px;
    }


    /*
     * JavaScript will add .is-open
     * when the hamburger is clicked.
     */

    .yosheta-navigation.is-open {
        display: block;
    }


    .yosheta-nav-menu {
        flex-direction: column;

        align-items: stretch;

        justify-content: flex-start;

        gap: 0;
    }


    .yosheta-nav-menu li {
        border-bottom: 1px solid var(--yosheta-border);
    }


    .yosheta-nav-menu li:last-child {
        border-bottom: 0;
    }


    .yosheta-nav-menu a {
        display: block;

        padding: 11px 4px;

        font-size: 14px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {

    .yosheta-header-inner {
        gap: 5px;
    }


    .yosheta-logo-main {
        font-size: 18px;
    }


    .yosheta-logo-tagline {
        display: none;
    }


    .yosheta-language {
        padding: 4px 5px;

        font-size: 8px;
    }

}