/* =====================================================================
   CIVIC THEME  —  Step 2: header / nav reskin
   ---------------------------------------------------------------------
   Additive override. Loads AFTER civic-theme.css. Only re-skins the top
   bar (surface, search pill, tabs) — no structure/layout is changed.
   Remove the <link> to revert to Step 1.

   INSTALL
     1. Save as:  tappet/static/css/civic-theme-step2-header.css
     2. In templates/base_index.html, add immediately AFTER civic-theme.css:

          <link rel="stylesheet" href="{% static '/css/civic-theme-step2-header.css' %}" />

     3. Hard-refresh (Cmd/Ctrl-Shift-R).
   ===================================================================== */

/* ---- Bar surface: white with a soft lift ---------------------------- */
.fixed-bar {
    background-color: #ffffff;
    border-bottom: 1px solid #eceef2;
    box-shadow: 0 4px 14px -8px rgba(30, 40, 60, .28);
}

/* Brand stays obida; lock to ink so it reads on white. */
.nav .brand,
.brand {
    color: #1b1f26;
}

/* ---- Search: rounded grey pill -------------------------------------- */
#autoComplete {
    background: #f2f3f6;
    border: 1px solid #e6e8ec;
    border-radius: 10px;
    color: #1b1f26;
}
#autoComplete::placeholder {
    color: #9aa0ab;
}

/* ---- Tabs: muted by default, ink + slate underline when active ------ */
.tabs > a,
.tabs > .dropdown > summary {
    color: #9aa0ab;
    font-weight: 600;
    transition: color .15s ease;
}
.tabs > a:hover {
    color: #4a505b;
}
.tabs > a.active,
.tabs > a[aria-current=page] {
    color: #1b1f26;
    /* tappet.css already draws the active underline from --color-primary,
       which Step 1 re-tinted to slate (#566277) — so it matches for free.
       Soften its weight to match the redesign. */
    border-bottom-width: 3px;
}

/* Location / calendar icons in the bar: mute to slate-grey. */
.nav-right a {
    color: #566277;
    font-weight: 600;
}

/* ---- Top-row icons: calendar, then the profile link -----------------
   tappet.css pins .view-calendar with position:absolute, which leaves no
   room for a sibling — lay the pair out as a normal flex row instead. */
.fixed-bar .nav-right {
    display: flex;
    align-items: center;
    gap: 4px;
}
.view-calendar {
    position: static;
    right: auto;
    top: auto;
}
.view-calendar,
#profile-page-icon {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    display: block;
    margin: 0;
}
.view-calendar,
.nav-profile {
    padding: 7px;
    border-radius: 9px;
    display: inline-flex;
    box-sizing: content-box;
    transition: background .15s ease;
}
.view-calendar:hover,
.nav-profile:hover {
    background: #f2f3f6;
}
/* Only the profile link carries an active state — the calendar icon just
   duplicates the Events tab, which shows its own underline. */
.nav-profile.on {
    background: #eef1f7;
    box-shadow: inset 0 0 0 1px #dbe0ea;
}

@media screen and (max-width: 480px) {
    /* chota stacks .nav into a column at this width, which would hand the
       two icons a row of their own. Tuck them up beside the brand — the
       placement .view-calendar used to get from its own absolute rule. */
    .fixed-bar .nav {
        position: relative;
    }
    .fixed-bar .nav-right {
        position: absolute;
        top: 6px;
        right: 8px;
    }
}

/* ---- Step 2b fallout: the tab row now holds four items --------------
   Adding the Events tab pushed the row past the viewport on phones
   (chota pads each tab 1rem 2rem at 1.3em). Tighten and let it scroll. */
.tabs {
    max-width: 100%;
}
@media (max-width: 899px) {
    /* min-width:0 is what actually lets the flex child shrink so its own
       overflow-x can take over — without it the row runs off both edges. */
    .fixed-bar .nav-center {
        min-width: 0;
    }
    .nav-center .tabs {
        justify-content: flex-start;
        min-width: 0;
        width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .nav-center .tabs::-webkit-scrollbar {
        display: none;
    }
    .tabs > a {
        font-size: 1em;
        padding: .8rem 1rem;
        white-space: nowrap;
    }
}