/* ============================================================
   COMPONENT: navbar-primary (Themes 2.1)
   Source:    generic-cld/assets/css/navbar-primary.css
   Extends:   generic/assets/css/navbar-primary.css
              (loaded separately by the existing component)

   This file is loaded exclusively by component-navbar-primary-view.
   It does NOT replace or modify navbar-primary.css.

   Approach: all existing rules are inherited from navbar-primary.css
   which the system loads separately. This file adds only:
     1. CSS custom property hooks for theme-level overrides
     2. The cg-navbar-logo sizing utility
   ============================================================ */

/* ------------------------------------------------------------
   CSS CUSTOM PROPERTY HOOKS
   Define these in theme.css to restyle without a template override.
   All values fall back to the existing navbar-primary.css behavior.
   ------------------------------------------------------------ */
.component-navbar-primary {
    /* Top-level nav link size: 1rem collapsed, 1.15rem at lg+ (see the media
       query below). This file loads AFTER components.css, which declares the
       same pair — they must stay identical or whichever loads last silently
       wins. Load order: components.css → navbar-primary.css → theme.css. */
    --cg-nav-link-font-size:       1rem;
    --cg-nav-link-font-weight:     inherit;
    --cg-nav-link-text-transform:  none;
    --cg-nav-link-letter-spacing:  normal;
    --cg-nav-link-px:              0.75rem;
    --cg-nav-link-py:              0.75rem;

    --cg-nav-logo-height:          auto;
    --cg-nav-logo-max-height:      2.25rem;
    --cg-nav-logo-max-height-lg:   3.5rem;

    --cg-nav-dropdown-border-top:  3px solid var(--bs-secondary);
    --cg-nav-item-hover-bg:        rgba(0, 0, 0, 0.05);
    --cg-nav-item-hover-bg-dark:   rgba(255, 255, 255, 0.05);
    --cg-nav-divider-color:        rgba(0, 0, 0, 0.125);
    --cg-nav-divider-color-dark:   rgba(255, 255, 255, 0.2);
}

/* Top-level nav link size steps up once the navbar expands. Mirrors the same
   media query in components.css — keep the two in sync. */
@media (min-width: 992px) {
    .component-navbar-primary {
        --cg-nav-link-font-size:   1.15rem;
    }
}

/* ------------------------------------------------------------
   APPLY HOOKS — only when a theme has customized the variables
   Uses low-specificity so existing navbar-primary.css rules
   take precedence unless the theme sets a value.
   ------------------------------------------------------------ */

/* Nav link typography hooks — TOP-LEVEL links only.
   Scoped to direct .nav-item children (and the .d-flex wrapper the split /
   centered layouts use) to match the equivalent rule in components.css.
   A descendant selector here would also catch dropdown-panel items, which
   carry class="nav-link dropdown-item": harmless while the token was
   `inherit`, but it would push the top-level 1.15rem into every panel link
   the moment the token holds a real size. Panel links keep the body default
   and their own --cg-nav-panel-link-* padding. */
.component-navbar-primary .navbar .navbar-nav > .nav-item > .nav-link,
.component-navbar-primary .navbar .navbar-nav > .nav-item > .d-flex > .nav-link {
    font-size:      var(--cg-nav-link-font-size);
    font-weight:    var(--cg-nav-link-font-weight);
    text-transform: var(--cg-nav-link-text-transform);
    letter-spacing: var(--cg-nav-link-letter-spacing);
}

/* Same child-combinator scoping as the font-size rule above, and for the same
   reason: the submenu template emits class="nav-link dropdown-item" on panel
   items, so a descendant selector here caught them too and the `padding`
   shorthand overrode the panel's own padding-inline/padding-block. At five
   classes it also outweighed the four-class PANEL INTERIOR rule in
   components.css, so columns-N panel rows (which carry .nav-link) rendered
   with the top-level 0.75rem while mega-column rows (.dropdown-item only) kept
   the intended 0.5rem/0.25rem — visibly inconsistent padding within one
   dropdown. Top-level split triggers stay covered: at level 0 the submenu
   template puts d-flex on the <li class="nav-item"> itself, with the <a> and
   <button> as its direct children, so `> .nav-item > .nav-link` still matches. */
@media (min-width: 992px) {
    .component-navbar-primary.layout-standard .navbar .navbar-nav > .nav-item > .nav-link {
        padding: var(--cg-nav-link-py) var(--cg-nav-link-px);
    }
}

/* ------------------------------------------------------------
   [3.0] SITE LOGO — cg-navbar-logo class
   Applied when logo=true is passed to the template.
   ------------------------------------------------------------ */
.component-navbar-primary .cg-navbar-logo {
    height:     var(--cg-nav-logo-height);
    max-height: var(--cg-nav-logo-max-height);
    width:      auto;
}

@media (min-width: 992px) {
    .component-navbar-primary .cg-navbar-logo {
        max-height: var(--cg-nav-logo-max-height-lg);
    }
}