/*
Theme Name: SiOwelArch Theme
Theme URI: https://example.com/arca-studio
Author: Si Owel Studio
Description: Minimalist SiOwelArch theme with centered logo, editable WordPress navigation, responsive mobile menu, and simple footer.
Version: 1.1.8
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: arca-studio
*/

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

/* Typography */
body,
button,
input,
select,
textarea {
    font-family: "Lexend", sans-serif;
}

/* Keep the header layout as previously configured. */
.arca-header__inner {
    position: relative;
    align-items: center;
}

/* Tablet and desktop: force a smaller centered logo, including WordPress custom-logo output. */
@media (min-width: 901px) {
    .arca-header .arca-logo,
    .arca-header .custom-logo-link {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 90px !important;
        min-width: 90px !important;
        max-width: 90px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 0 !important;
        z-index: 10 !important;
    }

    .arca-header .arca-logo img,
    .arca-header .arca-logo .custom-logo,
    .arca-header .custom-logo-link img,
    .arca-header img.custom-logo {
        display: block !important;
        width: 90px !important;
        min-width: 90px !important;
        max-width: 90px !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .arca-header .arca-nav {
        width: calc(50% - 90px) !important;
        max-width: calc(50% - 90px) !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding-right: 30px !important;
    }

    .arca-header .arca-menu {
        gap: 12px !important;
    }

    .arca-header .arca-contact {
        margin-left: auto !important;
    }

    .arca-header .arca-toggle {
        display: none !important;
    }
}

/* Tablet: enforce the same smaller logo and target WordPress logo markup. */
@media (min-width: 601px) and (max-width: 900px) {
    .arca-header .arca-logo,
    .arca-header .custom-logo-link,
    .arca-header .arca-logo img,
    .arca-header .arca-logo .custom-logo,
    .arca-header .custom-logo-link img,
    .arca-header img.custom-logo {
        width: 60px !important;
        min-width: 60px !important;
        max-width: 60px !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
        box-sizing: border-box !important;
    }
}

/* Footer: keep the brand text, hide any footer logo image. */
.arca-footer__brand {
    text-decoration: none;
}

.arca-footer__brand img {
    display: none !important;
}

/* Mobile: 70px logo and visible, usable menu button. */
@media (max-width: 900px) {
    .arca-header__inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .arca-header .arca-logo {
        position: static !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        display: block !important;
        width: 50px !important;
        min-width: 50px !important;
        max-width: 50px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: normal !important;
    }

    /* Target the actual WordPress custom-logo link and image directly.
       WordPress outputs .custom-logo-link around .custom-logo. */
    .arca-header .custom-logo-link,
    .arca-header .arca-logo img,
    .arca-header .custom-logo {
        display: block !important;
        width: 50px !important;
        min-width: 50px !important;
        max-width: 50px !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .arca-header .arca-nav {
        display: none;
        width: 100%;
        max-width: 100%;
        flex-basis: 100%;
        padding: 12px 0;
    }

    .arca-header .arca-nav.is-open {
        display: block !important;
    }

    .arca-header .arca-menu {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .arca-header .arca-menu .sub-menu {
        margin-top: 8px;
        padding-left: 18px;
        list-style: none;
    }

    .arca-header .arca-toggle {
        display: inline-flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 5px !important;
        width: 44px !important;
        height: 44px !important;
        margin-left: 12px !important;
        padding: 10px !important;
        position: relative !important;
        z-index: 20 !important;
        border: 0 !important;
        background: transparent !important;
        cursor: pointer;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .arca-header .arca-toggle span {
        display: block !important;
        width: 22px !important;
        height: 2px !important;
        min-height: 2px !important;
        margin: 0 !important;
        background-color: #292824 !important;
        border: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .arca-header .arca-contact {
        margin-left: auto;
    }
}


/* Final responsive logo sizes: tablet override comes after the general mobile rules. */
@media (min-width: 601px) and (max-width: 900px) {
    .arca-header .arca-logo,
    .arca-header .custom-logo-link,
    .arca-header .arca-logo img,
    .arca-header .arca-logo .custom-logo,
    .arca-header .custom-logo-link img,
    .arca-header img.custom-logo {
        width: 65px !important;
        min-width: 65px !important;
        max-width: 65px !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
        box-sizing: border-box !important;
    }
}