/* ============================================================
   top_Menu.css
   Styles for C_Top_Menu.ascx navigation control.

   INTEGRATION NOTE:
   This file is designed to work ALONGSIDE your existing
   css/C_Styles.css.  Load order in your master page / layout:
       <link rel="stylesheet" href="css/C_Styles.css" />
       <link rel="stylesheet" href="css/top_Menu.css" />

   All selectors use the "topnav-" prefix to avoid conflicts
   with rules already in C_Styles.css.

   COLOR PALETTE: Shades of gray (white -> black) only.
   ============================================================ */

/* ── CSS custom properties (easy single-point tuning) ──────── */
:root {
    --tnav-height:          120px;      /* total bar height              */
    --tnav-bottom-pad:       10px;      /* bottom margin for items       */
    --tnav-max-width:      1400px;      /* effective content width       */
    --tnav-logo-width:      400px;      /* logo image width              */
    --tnav-bg:             #ffffff;     /* bar background                */
    --tnav-border:         #d0d0d0;     /* bottom border of bar          */
    --tnav-link-color:     #222222;     /* normal link text              */
    --tnav-link-hover:     #000000;     /* hovered link text             */
    --tnav-link-active:    #000000;     /* active / current page link    */
    --tnav-sub-bg:         #f5f5f5;     /* sub-menu panel background     */
    --tnav-sub-border:     #cccccc;     /* sub-menu panel border         */
    --tnav-sub-link-hover: #f0f0f0;     /* sub-menu item hover bg        */
    --tnav-drawer-bg:      #ffffff;     /* mobile drawer background      */
    --tnav-drawer-border:  #e0e0e0;     /* mobile drawer dividers        */
    --tnav-overlay-bg:     rgba(0,0,0,0.35);
    --tnav-font-size:       0.95rem;
    --tnav-font-weight:     500;
    --tnav-sub-font-size:   0.875rem;
    --tnav-transition-open: 220ms ease;
    --tnav-transition-close:140ms ease;
    --tnav-shadow:          0 2px 8px rgba(0,0,0,0.10);
}

/* ── Bar ────────────────────────────────────────────────────── */
.topnav-bar {
    position:        sticky;
    top:             0;
    left:            0;
    width:           100%;
    height:          var(--tnav-height);
    background:      var(--tnav-bg);
    border-bottom:   1px solid var(--tnav-border);
    box-shadow:      var(--tnav-shadow);
    z-index:         1000;
    box-sizing:      border-box;
}

/* ── Inner centering wrapper ────────────────────────────────── */
.topnav-inner {
    max-width:   var(--tnav-max-width);
    height:      100%;
    margin:      0 auto;
    padding:     0 20px;
    display:     flex;
    align-items: flex-end;          /* bottom-justify all children      */
    box-sizing:  border-box;
}

/* ── Logo ───────────────────────────────────────────────────── */
.topnav-logo {
    flex-shrink: 0;
    margin-bottom: var(--tnav-bottom-pad);
}

.topnav-logo a {
    display: block;
    line-height: 0;
}

.topnav-logo-img {
    width:      var(--tnav-logo-width);
    max-width:  100%;
    height:     auto;
    display:    block;
}

/* ── Desktop menu wrapper ───────────────────────────────────── */
.topnav-menu-wrap {
    flex:          1 1 auto;
    display:       flex;
    justify-content: flex-end;      /* right-justify the menu           */
    align-items:   flex-end;
    margin-bottom: var(--tnav-bottom-pad);
    min-width:     0;               /* allow shrinking                  */
}

/* ── Menu list ─────────────────────────────────────────────── */
.topnav-menu {
    list-style:  none;
    margin:      0;
    padding:     0;
    display:     flex;
    flex-wrap:   nowrap;
    align-items: flex-end;
    gap:         0 4px;             /* small gap; spacing via link pad  */
}

/* ── Menu items ─────────────────────────────────────────────── */
.topnav-item {
    position: relative;
}

/* ── Links and trigger buttons share the same look ─────────── */
.topnav-link,
.topnav-sub-trigger {
    display:         block;
    padding:         6px 14px;
    color:           var(--tnav-link-color);
    font-size:       var(--tnav-font-size);
    font-weight:     var(--tnav-font-weight);
    text-decoration: none;
    white-space:     nowrap;
    background:      transparent;
    border:          none;
    border-radius:   3px;
    cursor:          pointer;
    font-family:     inherit;       /* pick up whatever C_Styles.css sets */
    letter-spacing:  0.01em;
    transition:      background 150ms ease, color 150ms ease;
}

.topnav-link:hover,
.topnav-sub-trigger:hover,
.topnav-link:focus-visible,
.topnav-sub-trigger:focus-visible {
    color:      var(--tnav-link-hover);
    background: #f0f0f0;
    outline:    none;
}

.topnav-link:focus-visible,
.topnav-sub-trigger:focus-visible {
    box-shadow: 0 0 0 2px #888;
}

/* Arrow indicator inside trigger button */
.topnav-arrow {
    display:     inline-block;
    font-size:   0.7em;
    margin-left: 4px;
    transition:  transform var(--tnav-transition-open);
    vertical-align: middle;
}

.topnav-has-sub.topnav-open > .topnav-sub-trigger .topnav-arrow {
    transform: rotate(180deg);
}

/* ── Sub-menu panel ─────────────────────────────────────────── */
.topnav-submenu {
    position:       absolute;
    top:            calc(100% + 4px);
    left:           0;
    min-width:      200px;
    background:     var(--tnav-sub-bg);
    border:         1px solid var(--tnav-sub-border);
    border-radius:  4px;
    box-shadow:     0 4px 16px rgba(0,0,0,0.12);
    list-style:     none;
    margin:         0;
    padding:        6px 0;
    z-index:        1100;

    /* closed state */
    opacity:        0;
    transform:      translateY(-6px);
    pointer-events: none;
    transition:     opacity  var(--tnav-transition-close),
                    transform var(--tnav-transition-close);
}

/* open state */
.topnav-has-sub.topnav-open > .topnav-submenu {
    opacity:        1;
    transform:      translateY(0);
    pointer-events: auto;
    transition:     opacity  var(--tnav-transition-open),
                    transform var(--tnav-transition-open);
}

/* Sub-menu links */
.topnav-sublink {
    display:         block;
    padding:         8px 18px;
    color:           var(--tnav-link-color);
    font-size:       var(--tnav-sub-font-size);
    font-weight:     400;
    text-decoration: none;
    white-space:     nowrap;
    transition:      background 120ms ease;
}

.topnav-sublink:hover,
.topnav-sublink:focus-visible {
    background: var(--tnav-sub-link-hover);
    color:      var(--tnav-link-hover);
    outline:    none;
}

/* ── Mobile strip (hidden on desktop) ───────────────────────── */
.topnav-mobile-strip {
    display:       none;
    align-items:   flex-end;
    gap:           0 12px;
    margin-bottom: var(--tnav-bottom-pad);
    margin-left:   auto;
}

.topnav-mobile-home {
    color:           var(--tnav-link-color);
    font-size:       var(--tnav-font-size);
    font-weight:     var(--tnav-font-weight);
    text-decoration: none;
    padding:         6px 10px;
    border-radius:   3px;
    transition:      background 150ms ease;
}

.topnav-mobile-home:hover {
    background: #f0f0f0;
}

.topnav-hamburger {
    background:  transparent;
    border:      none;
    cursor:      pointer;
    padding:     6px 8px;
    border-radius: 3px;
    line-height: 0;
    transition:  background 150ms ease;
}

.topnav-hamburger:hover {
    background: #f0f0f0;
}

.topnav-hamburger-img {
    width:  30px;
    height: 30px;
    display: block;
}

/* ── Overlay ────────────────────────────────────────────────── */
.topnav-overlay {
    display:    none;
    position:   fixed;
    inset:      0;
    background: var(--tnav-overlay-bg);
    z-index:    1199;
}

.topnav-overlay.topnav-overlay-visible {
    display: block;
}

/* ── Mobile drawer ──────────────────────────────────────────── */
.topnav-mobile-drawer {
    position:   fixed;
    top:        0;
    right:      0;
    bottom:     0;
    width:      min(320px, 85vw);
    background: var(--tnav-drawer-bg);
    box-shadow: -4px 0 20px rgba(0,0,0,0.15);
    z-index:    1200;
    overflow-y: auto;
    padding:    16px 0 32px;

    /* closed */
    transform:  translateX(100%);
    transition: transform var(--tnav-transition-close);
}

.topnav-mobile-drawer.topnav-drawer-open {
    transform:  translateX(0);
    transition: transform var(--tnav-transition-open);
}

/* Drawer list */
.topnav-drawer-list {
    list-style: none;
    margin:     0;
    padding:    0;
}

.topnav-drawer-item {
    border-bottom: 1px solid var(--tnav-drawer-border);
}

.topnav-drawer-link,
.topnav-drawer-sub-trigger {
    display:         block;
    width:           100%;
    padding:         13px 22px;
    color:           var(--tnav-link-color);
    font-size:       1rem;
    font-weight:     500;
    text-decoration: none;
    background:      transparent;
    border:          none;
    text-align:      left;
    cursor:          pointer;
    font-family:     inherit;
    box-sizing:      border-box;
    transition:      background 120ms ease;
}

.topnav-drawer-link:hover,
.topnav-drawer-sub-trigger:hover {
    background: #f5f5f5;
}

/* Drawer sub-menu (accordion) */
.topnav-drawer-submenu {
    list-style:  none;
    margin:      0;
    padding:     0;
    max-height:  0;
    overflow:    hidden;
    background:  #fafafa;
    transition:  max-height var(--tnav-transition-close);
}

.topnav-drawer-item.topnav-drawer-open > .topnav-drawer-submenu {
    max-height:  600px;             /* large enough for any sub-menu    */
    transition:  max-height var(--tnav-transition-open);
}

.topnav-drawer-sublink {
    display:         block;
    padding:         11px 22px 11px 38px;   /* indent */
    color:           #444;
    font-size:       0.9rem;
    text-decoration: none;
    border-top:      1px solid var(--tnav-drawer-border);
    transition:      background 120ms ease;
}

.topnav-drawer-sublink:hover {
    background: #efefef;
}

/* Rotate arrow when drawer sub is open */
.topnav-drawer-item.topnav-drawer-open .topnav-arrow {
    transform: rotate(180deg);
}

/* ── Responsive breakpoint ──────────────────────────────────── */
/*
   Switch to mobile layout when the full menu would be too cramped.
   Adjust the breakpoint (default 860px) to taste.
*/
@media (max-width: 860px) {
    .topnav-menu-wrap  { display: none; }
    .topnav-mobile-strip { display: flex; }
}

/* Ensure hamburger / drawer hidden on desktop */
@media (min-width: 861px) {
    .topnav-mobile-strip  { display: none; }
    .topnav-mobile-drawer { display: none !important; }
    .topnav-overlay       { display: none !important; }
}

/* ── Utility: visually hidden (accessibility) ───────────────── */
.topnav-sr-only {
    position:  absolute;
    width:     1px;
    height:    1px;
    padding:   0;
    margin:    -1px;
    overflow:  hidden;
    clip:      rect(0,0,0,0);
    border:    0;
}