/* Header: masthead, social + search row, navigation. Uses tokens.css. */
.main-head.head-nav-below .inner { background: var(--rrd-card); }

.main-head .logo-wrap { padding: 28px 0 0; text-align: center; }
/* Needed: the parent theme gives this logo 65px top padding when the nav is below. */
.main-head.nav-below .title { padding: 0; }
.main-head .logo-wrap .logo { margin: 0 auto; }

.main-head .logo-wrap h1 {
    margin: 8px 0 0;
    padding: 0;
    color: var(--rrd-navy);
    font-size: var(--rrd-text-14);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-align: center;
}

.by_club_romania {
    display: block;
    margin-top: 4px;
    color: var(--rrd-muted);
    font-size: var(--rrd-text-13);
    text-align: center;
}

.top-bar-content { background: var(--rrd-card); box-shadow: none; height: auto; min-height: 60px; line-height: 1.3; }
.top-bar .wrap::before, .top-bar .wrap::after { content: none; }
.top-bar .actions { align-items: center; }
.top-bar .search-form { display: flex; align-items: center; }
.top-bar .wrap { display: flex; justify-content: center; align-items: center; gap: var(--rrd-space-2); padding-block: 8px; }
.top-bar .search-action { float: none; display: flex; align-items: center; }

.top-bar .social-icons a {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--rrd-hit); height: var(--rrd-hit);
    padding: 0; margin: 0;
    border-radius: 50%;
    color: var(--rrd-navy);
}
.top-bar .social-icons a:hover { background: var(--rrd-bg); color: var(--rrd-navy); }

.top-bar .search-form input[type="search"] {
    height: 32px; min-height: 32px; padding: 0 10px; font-size: var(--rrd-text-14); margin: 0 0 0 8px; vertical-align: middle; box-sizing: border-box;
    border: 1px solid var(--rrd-field);
    border-radius: var(--rrd-radius-img);
}
.top-bar .search-field { width: 180px; }
.top-bar .search-field:focus { width: 220px; }
.top-bar .search-submit { min-width: var(--rrd-hit); min-height: var(--rrd-hit); }

.navigation-wrap,
.navigation.below,
.navigation.below.light,
.menu-main-container,
#menu-main { background: var(--rrd-card); border: 0; }

.navigation.below { height: auto; line-height: 1.3; }
.navigation.below ul.menu > li:first-child { margin-left: 0; }

.navigation-wrap { border-top: 2px solid var(--rrd-accent); border-bottom: 1px solid var(--rrd-line); }

.navigation.below ul.menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
.navigation.below ul.menu > li > a {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: var(--rrd-hit);
    padding: 0 14px;
    color: var(--rrd-navy);
    font-size: var(--rrd-text-14);
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    line-height: 1.3;
}
.navigation.below ul.menu > li > a:hover { background-color: var(--rrd-bg); color: var(--rrd-navy); }

/* Dropdowns open directly under the hovered item (parent anchors them to the whole menu bar). */
.navigation.below ul.menu > li { position: relative; }
.navigation.below ul.menu > li > ul.sub-menu {
    top: 100%; left: 0; margin: 0; z-index: 120;
    background: var(--rrd-card); border: 1px solid var(--rrd-line);
    text-align: left;
}
/* Keyboard: same reveal as :hover (see parent .sub-menu rules). */
.navigation.below ul.menu > li:focus-within > ul.sub-menu { visibility: visible; opacity: 1; pointer-events: auto; }
/* Right-edge guard: the last two dropdowns open leftwards so they never leave the viewport. */
.navigation.below ul.menu > li:nth-last-child(-n+2) > ul.sub-menu { left: auto; right: 0; }
.navigation.below ul.menu > li:nth-last-child(-n+2) ul.sub-menu ul.sub-menu { left: auto; right: 100%; }
.navigation.below ul.menu > li li > a {
    display: flex; align-items: center; min-height: var(--rrd-hit);
    padding: 0 16px;
    border-top: 1px solid var(--rrd-line);
    color: var(--rrd-navy);
    font-size: var(--rrd-text-14); font-weight: 600; letter-spacing: .02em; line-height: 1.3;
}
.navigation.below ul.menu > li li:first-child > a { border-top: 0; }
.navigation.below ul.menu > li li:hover > a { background-color: var(--rrd-bg); color: var(--rrd-navy); }

/* Items that carry the small RRD logo or the clepsidra icon keep it. */
ul#menu-main li.rrd > a,
ul#menu-main li.menu-cat-15 > a,
ul#menu-main li.menu-cat-16 > a {
    padding-left: 50px;
    background-image: url(../../img/logo-final-cat.png);
    background-repeat: no-repeat;
    background-position: left center;
}
#menu-item-84 > a,
#menu-item-224 > a,
#menu-item-86 > a {
    padding-left: 20px;
    background-image: url(../../img/rrd-clepsidra.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 12px;
}

/* Mobile: compact masthead; the parent's off-canvas menu gets 48px rows. */
@media (max-width: 940px) {
    /* Closed off-canvas panel: hidden (no sliver at x=0, links out of tab order); reveal after the slide-in starts. */
    .off-canvas { visibility: hidden; transition: transform .4s ease-in-out, visibility 0s .4s; }
    .off-canvas-active .off-canvas { visibility: visible; transition-delay: 0s; }
    .scheme-switcher .toggle { min-width: var(--rrd-hit); min-height: var(--rrd-hit); justify-content: center; }
    .mobile-menu-container .close {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: var(--rrd-hit); min-height: var(--rrd-hit); padding: 0; line-height: 1;
    }
    .main-head .logo-wrap { padding-top: 8px; }
    .main-head .logo-wrap h1 { font-size: 11px; }
    .top-bar .mobile-nav {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 44px; min-height: 44px; margin: 0;
    }
    .top-bar .wrap { justify-content: space-between; padding: 0 16px; }
    .top-bar .search-field, .top-bar .search-field:focus { width: 140px; }
    .mobile-menu-container { background: var(--rrd-card); }
    .mobile-menu-container .mobile-menu > li > a {
        display: flex; align-items: center;
        min-height: 48px;
        padding: 10px 50px 10px 16px;
        border-bottom: 1px solid var(--rrd-line);
        color: var(--rrd-navy);
        font-size: var(--rrd-text-14);
        font-weight: 600;
        letter-spacing: .02em;
        text-transform: uppercase;
    }
}