/* ==========================================================================
   Header: main bar, dropdown cards, search panel, mobile menu
   (follows the rules in base.css: white and black only, gap spacing)
   ========================================================================== */

/* 1. Main bar ------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--white); border-bottom: 1px solid var(--line); transition: box-shadow .4s; }
.site-header.is-scrolled { box-shadow: none; }

.bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--gap-lg); height: var(--bar-h); transition: height .4s var(--ease); }
.site-header.is-scrolled .bar { height: 70px; }
.bar-start { display: flex; align-items: center; gap: var(--gap-sm); }
.bar-end { display: flex; align-items: center; justify-content: flex-end; gap: var(--gap-xs); }
.bar nav { display: flex; justify-content: center; }

.menu { display: flex; align-items: center; gap: 2px; }
.menu-item { position: relative; }
.menu-link {
    display: inline-flex; align-items: center; gap: var(--gap-xs);
    height: 42px; padding-inline: 14px; border-radius: 999px;
    transition: background-color .3s, color .3s;
}
.menu-link svg { transition: transform .4s var(--ease); }
.menu-item:hover > .menu-link, .menu-item:focus-within > .menu-link { background: var(--ink); color: var(--white); }
.menu-item:hover > .menu-link svg, .menu-item:focus-within > .menu-link svg { transform: rotate(180deg); }
.menu-link.is-active { background: var(--ink); color: var(--white); }

/* Dropdown card with a pointer and an "all of" row. */
.card-drop {
    position: absolute; top: calc(100% + 12px); left: 50%; width: 290px;
    display: flex; flex-direction: column;
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card);
    opacity: 0; visibility: hidden; transform: translate(-50%, 8px) scale(.98); transform-origin: top center;
    transition: opacity .25s, transform .4s var(--ease), visibility .25s;
}
.card-drop::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.card-drop::after {
    content: ""; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px;
    background: var(--white); border-left: 1px solid var(--line); border-top: 1px solid var(--line);
    transform: translateX(-50%) rotate(45deg);
}
.menu-item:hover > .card-drop, .menu-item:focus-within > .card-drop { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); }
.card-drop ul { display: flex; flex-direction: column; gap: 2px; padding: 12px; }
.card-drop ul a {
    display: flex; align-items: center; justify-content: space-between; gap: var(--gap-sm);
    padding: 10px 14px; border-radius: var(--radius-sm); transition: background-color .25s;
}
.card-drop ul a svg { opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .35s var(--ease); }
.card-drop ul a:hover { background: var(--ink); color: var(--white); }
.card-drop ul a:hover svg { opacity: 1; transform: none; }
.card-drop-all {
    display: flex; align-items: center; justify-content: space-between; gap: var(--gap-sm);
    padding: 14px 26px; border-radius: 0 0 var(--radius) var(--radius);
    background: var(--ink); color: var(--white);
}
.card-drop-all svg { transition: transform .4s var(--ease); }
.card-drop-all:hover svg { transform: translateX(5px); }

/* Icon buttons */
.tool {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-xs);
    min-width: 46px; height: 46px; border-radius: 999px;
    border: 1px solid var(--line); transition: background-color .3s, border-color .3s, color .3s;
}
.tool:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.tool-menu { display: none; }

/* Hamburger: two lines that become a cross when the menu is open. */
.lines { position: relative; display: block; width: 22px; height: 12px; }
.lines i { position: absolute; left: 0; display: block; height: 1.5px; width: 100%; background: currentColor; border-radius: 2px; transition: transform .45s var(--ease), width .4s var(--ease), top .45s var(--ease); }
.lines i:nth-child(1) { top: 0; }
.lines i:nth-child(2) { top: 10px; width: 62%; }
.tool:hover .lines i:nth-child(2) { width: 100%; }
body.menu-open .lines i:nth-child(1) { top: 5px; transform: rotate(45deg); }
body.menu-open .lines i:nth-child(2) { top: 5px; width: 100%; transform: rotate(-45deg); }

/* 2. Search panel ----------------------------------------------------------- */
.search-panel {
    position: fixed; left: 0; right: 0; top: 0; z-index: 230; max-height: 100%; overflow-y: auto;
    background: var(--white); box-shadow: var(--shadow-card);
    transform: translateY(-104%); visibility: hidden;
    transition: transform .55s var(--ease), visibility .55s;
}
.search-panel.is-open { transform: none; visibility: visible; }
.search-panel .container { display: flex; flex-direction: column; gap: var(--gap-lg); padding-block: var(--gap-lg) var(--gap-xl); }
.search-head { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md); }
.search-head h2 { font-family: var(--font-head); font-size: var(--fs-xl); font-weight: 400; line-height: 1.15; }

.search-form { display: flex; align-items: center; gap: var(--gap-sm); padding-bottom: var(--gap-sm); border-bottom: 1px solid var(--line); }
.search-form input { flex: 1; min-width: 0; height: 56px; border: 0; outline: 0; background: transparent; font-size: var(--fs-base); }
.search-form input::placeholder { color: var(--muted); }
.search-form input::-webkit-search-cancel-button { display: none; }
.search-go { display: grid; place-items: center; flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: var(--white); transition: transform .5s var(--ease); }
.search-go:hover { transform: rotate(-45deg); }

.search-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-xl); }
.search-group { display: flex; flex-direction: column; gap: var(--gap-sm); }
.tags { display: flex; flex-wrap: wrap; gap: var(--gap-xs); }
.tag { display: block; padding: 8px 18px; border-radius: 999px; border: 1px solid var(--line); transition: border-color .3s, color .3s, background-color .3s; }
.tag:hover { border-color: var(--ink); color: var(--white); background: var(--ink); }
.topic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.topic-grid a { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-sm); padding: 13px 4px; border-bottom: 1px solid var(--line); transition: padding .4s var(--ease); }
.topic-grid li:nth-child(odd) a { padding-right: var(--gap-md); }
.topic-grid a svg { transition: transform .4s var(--ease); }
.topic-grid a:hover { padding-left: 12px; }
.topic-grid a:hover svg { transform: translateX(4px); }

/* 3. Mobile menu ------------------------------------------------------------ */
.side {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 220; width: min(100%, 460px);
    display: flex; flex-direction: column;
    background: var(--white); overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(-100%); visibility: hidden;
    transition: transform .55s var(--ease), visibility .55s;
}
.side.is-open { transform: none; visibility: visible; }
.side-head {
    position: sticky; top: 0; z-index: 1;
    display: grid; grid-template-columns: 46px 1fr 46px; align-items: center; gap: var(--gap-sm);
    height: var(--bar-h); flex-shrink: 0; padding-inline: var(--gutter);
    background: var(--white); border-bottom: 1px solid var(--line);
}
.side-head .logo { justify-self: center; }
.side-body { display: flex; flex-direction: column; gap: var(--gap-lg); flex: 1; padding: var(--gap-md) var(--gutter) var(--gap-lg); }

.side-list { display: flex; flex-direction: column; }
.side-item { border-bottom: 1px solid var(--line); opacity: 0; transform: translateX(-14px); transition: opacity .45s, transform .6s var(--ease); }
.side.is-open .side-item { opacity: 1; transform: none; transition-delay: calc(140ms + var(--i) * 50ms); }
.side-toggle { display: flex; align-items: center; gap: var(--gap-sm); width: 100%; padding: 18px 0; text-align: left; }
.side-num { width: 24px; }
.side-label { flex: 1; line-height: 1.4; transition: transform .45s var(--ease); }
.side-toggle:hover .side-label, .side-item.is-open .side-label { transform: translateX(4px); }
.side-plus { position: relative; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); transition: background-color .35s, border-color .35s, color .35s, transform .5s var(--ease); }
.side-plus::before, .side-plus::after { content: ""; position: absolute; left: 10px; right: 10px; top: 50%; height: 1.5px; background: currentColor; transition: transform .4s var(--ease); }
.side-plus::after { transform: rotate(90deg); }
.side-item.is-open .side-plus { background: var(--ink); border-color: var(--ink); color: var(--white); transform: rotate(180deg); }
.side-item.is-open .side-plus::after { transform: rotate(0deg); }

.side-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.side-item.is-open .side-sub { grid-template-rows: 1fr; }
.side-clip { min-height: 0; overflow: hidden; }
.side-panel { display: flex; flex-direction: column; gap: var(--gap-md); padding: 0 0 22px 40px; }
.side-panel ul { display: flex; flex-direction: column; gap: var(--gap-sm); padding: 4px 0 4px 18px; border-left: 1px solid var(--line); }
.side-panel ul a { display: flex; align-items: center; gap: 10px; }
.side-panel ul a::before { content: ""; width: 8px; height: 1px; background: currentColor; transition: width .4s var(--ease); }
.side-panel ul a:hover::before { width: 20px; }
.side-all { display: inline-flex; align-items: center; gap: var(--gap-xs); align-self: flex-start; }
.side-all svg { transition: transform .4s var(--ease); }
.side-all:hover svg { transform: translateX(5px); }

.side-foot { display: flex; flex-direction: column; gap: var(--gap-md); margin-top: auto; }
.side-search { display: flex; align-items: center; gap: var(--gap-sm); width: 100%; height: 54px; padding-inline: 20px; border-radius: 999px; background: var(--tint); color: var(--muted); text-align: left; }
.side-search svg { color: var(--ink); }
.side-links { display: flex; flex-wrap: wrap; gap: var(--gap-md); }

.shade {
    position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, .4);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; visibility: hidden; transition: opacity .45s, visibility .45s;
}
.shade.is-open { opacity: 1; visibility: visible; }

/* 4. Smaller screens -------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .menu-link { padding-inline: 10px; }
}
/* Tablet and phone: menu button left, logo centred, search right. */
@media (max-width: 1099.98px) {
    .bar { grid-template-columns: 1fr auto 1fr; gap: var(--gap-sm); }
    .bar nav { display: none; }
    .tool-menu { display: inline-flex; }
    .bar .logo { justify-self: center; }
    .tool-label { display: inline; }
    .bar .tool { border-color: transparent; padding-inline: 10px; }
    .bar .tool:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
}
@media (min-width: 1100px) {
    .tool-label, .bar-start { display: none; }
}
@media (max-width: 899.98px) {
    .site-header.is-scrolled .bar { height: 64px; }
    .search-cols { grid-template-columns: minmax(0, 1fr); gap: var(--gap-lg); }
}
@media (max-width: 560px) {
    .bar { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: var(--gap-xs); }
    .bar .logo { max-width: 100%; overflow: hidden; text-overflow: clip; padding-inline: 2px; }
    .side-head { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: var(--gap-xs); }
    .side-head .logo { max-width: 100%; overflow: hidden; }
    .tool-label { display: none; }
    .bar .tool { padding-inline: 0; min-width: 44px; height: 44px; }
    .side { width: 100%; }
    .side-panel { padding-left: 0; }

    /* Search becomes a full-screen sheet on phones. */
    .search-panel { bottom: 0; }
    .search-panel .container { padding-block: var(--gap-md) var(--gap-lg); gap: var(--gap-lg); }
    .search-head h2 { font-size: 26px; }
    .search-form input { height: 48px; }
    .search-go { width: 46px; height: 46px; }
    .topic-grid { grid-template-columns: minmax(0, 1fr); }
    .topic-grid li:nth-child(odd) a { padding-right: 4px; }
}