/* Clean frontend stylesheet - minimal, overrides messy rules */
:root{
    --site-accent: #764ba2;
    --site-font: 'Roboto', sans-serif;
}

body.frontend{
    font-family: var(--site-font);
    color: #222;
    margin: 0;
    padding: 0;
    background: #fff;
}

/* Header / Logo */
.header-cnt{background:transparent;padding:10px 0}
.logo.site-title{font-family:var(--site-font);font-weight:700;color:var(--site-accent);font-size:1.5rem;display:flex;align-items:center;gap:8px}

/* Ensure menu logo area doesn't squash text */
.menu-logo{width:auto;height:auto;opacity:1}
.menu-logo .logo{width:auto;height:auto;padding:0 12px}

/* Main menu */
.main-menu nav ul.main{display:flex;align-items:center;gap:18px;padding-left:0;margin:0}
.main-menu nav ul.main li{list-style:none}
.main-menu nav ul.main li a{color:#222;text-decoration:none;font-weight:600}

/* Responsive */
@media (max-width:768px){
    .logo.site-title{font-size:2.2rem}
    .main-menu nav ul.main{gap:8px}
}

/* Reset potential problematic inherited rules */
.logo.site-title{ text-transform:none !important; text-indent:0 !important; }

/* Small helpers */
.mw1200{max-width:1200px;margin:0 auto}
.base-cnt{padding:0 12px}

/* Strong desktop overrides to force consistent logo appearance */
@media (min-width: 769px) {
    /* target all logo placements */
    .header-cnt .logo.site-title,
    #menu-container .menu-logo .logo.site-title,
    .main-menu .menu-logo .logo.site-title,
    nav > ul.main > li.menu-logo > .logo.site-title,
    .logo.site-title {
        font-family: var(--site-font) !important;
        font-size: 1.5rem !important;
        font-weight: 700 !important;
        color: var(--site-accent) !important;
        text-transform: none !important;
        display: inline-block !important;
        width: auto !important;
        height: auto !important;
        padding: 0 12px !important;
        margin: 0 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }

    /* ensure the menu container doesn't force a tiny box */
    #main-menu.fixed .menu-logo,
    .menu-logo {
        width: auto !important;
        height: auto !important;
        opacity: 1 !important;
    }
}