/* ==========================================================================
   Site-wide navigation -- nav.css
   Two-row layout: the top row carries only the brand mark and the buttons on the right, and the
   categories sit left-aligned on a full-width white ground in the row below.
   Modelled on the navigation at cupidso.com.
   
   Approach: css/style.css is left untouched (its .nav-inner is a fixed 64px single-row flex),
        this file only overrides, and the HTML structure is unchanged apart from the logo
        becoming an image.
   Careful: this file depends on no palette variable -- the colours are hard-coded. The pink
        palette in home.css only loads on the home page while the rest stay on beige and gold,
        so using var(--paper)/var(--line) would make the nav look different from page to page,
        when the whole point here is that it looks the same everywhere.
   Load order: must come after css/style.css.
   ========================================================================== */

/* Nav ground: frosted pale pink (style.css:84 hard-codes beige) */
.nav { background: rgba(253, 239, 242, .86); }

/* Brand mark: a halo (also the ring of the vow) held between two wings, replacing the original
   rounded-square seal. The artwork is a transparent webp (roughly 1.71:1), so the height is
   fixed and the width follows; the footer sits on a dark ground and uses the white
   logo-white.webp one size down */
.logo-mark { height: 36px; width: auto; }
.footer .logo-mark { height: 30px; }

/* The brand type matches the mark (style.css:89 had it in ink); the footer sits on a dark ground
   and must not follow */
.nav .logo { color: #a3164c; }

/* Brand name with the domain on a line beneath: .logo is itself a horizontal flex, so these two
   lines need a wrapper to stack. The domain is small sans in a lighter shade and must not
   compete with the name above it */
.logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.logo-text em {
  margin-top: 3px;
  font-family: var(--sans);
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.1px;
  color: #c98aa4;
}

/* The seal's shadow hard-codes a vermilion rgba (style.css:94); the seal itself is no longer
   used, but pages that have not been reworked yet still rely on it, so it is shifted to wine
   red along with everything else */
.logo .seal { box-shadow: 0 4px 12px rgba(163, 22, 76, .32); }

/* At 1024px and below, style.css:121 hides .nav-menu entirely in favour of a hamburger, and
   js/main.js hard-codes the open dropdown at top:64px, so the two-row layout has to be scoped
   to min-width:1025px and must never reach the mobile end. */
@media (min-width: 1025px) {
  /* The white ground on the second row has to run to both edges of the screen, which takes a
     100vw pseudo-element; 100vw includes the vertical scrollbar width, so without trimming it
     a horizontal scrollbar appears */
  .nav { overflow-x: clip; }
  .nav-inner {
    flex-wrap: wrap;
    height: auto;
    /* The 20px on both sides from .wrap (style.css:59) has to be kept; writing padding:18px 0 0
       would wipe it out and leave the nav 20px wider on each side than the blocks below */
    padding: 18px 20px 0;
    /* 16px between the rows: it separates the first row (logo and the buttons on the right) from
       the white ground of the second, leaves a pink gap showing through, and gives the primary
       call-to-action room for its shadow */
    gap: 16px 28px;
  }
  .nav-cta { order: 2; }
  .nav-menu {
    order: 3;
    position: relative;
    flex-basis: 100%;
    margin-left: 0;
    padding: 15px 0 14px;
    gap: 30px;
  }
  /* Full-width white ground plus the divider between the rows: the negative z-index puts it above
     the pink background of .nav and below the nav text */
  .nav-menu::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: #ffffff;
    border-top: 1px solid #f6dce5;
    z-index: -1;
  }
}

/* Current category only changes colour and underline; fixed weight prevents menu items shifting on navigation. */
.nav-menu a,
.nav-menu a.active { font-weight: 500; }

/* ==========================================================================
   Language switch, the sign-in pair and the drawer menu on a phone
   Same rule as everything above: every colour is hard-coded, because home.css rewrites the palette
   variables on the home page only.
   ========================================================================== */

/* Top right of a wide screen: the current language sits on the left in solid wine red and the other one
   follows as a pale pink link, so the Chinese site reads "中文 / English" and the English site
   "English / 中文" -- switching over simply swaps the two round. The link points at the same page on the
   other site, not at its home page.
   position is here to anchor the notice underneath */
.nav-cta { gap: 14px; position: relative; }
.nav-lang { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; }
.nav-lang .cur { color: #a3164c; }
.nav-lang .sep { color: #e3b9c8; font-weight: 500; }
.nav-lang a { color: #a8798b; }
.nav-lang a:hover { color: #a3164c; }
/* Login and Register are rectangles, not the pills the body uses: login is outlined with no fill,
   register is solid wine red -- one light, one heavy, which sets the order between them.
   The 1px difference in padding is deliberate: login carries a 1px border, so both boxes end up exactly
   the same height. margin-left pushes the pair clear of the language switch */
.nav-login {
  margin-left: 10px;
  padding: 6px 15px; border-radius: 8px; border: 1px solid #e3b9c8;
  font-size: 13.5px; font-weight: 600; color: #55606f;
  transition: color .2s, border-color .2s, background .2s;
}
.nav-login:hover { color: #a3164c; border-color: #a3164c; background: rgba(255, 255, 255, .6); }
.nav-reg {
  padding: 7px 16px; border-radius: 8px;
  background: linear-gradient(135deg, #a3164c, #7d0f39); color: #fff;
  box-shadow: 0 5px 14px rgba(163, 22, 76, .28);
}
.nav-reg:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 9px 20px rgba(163, 22, 76, .38); }
/* The notice: the wording is written into the static HTML and the script only switches .active, the same
   principle main.js works to (no copy injected through innerHTML).
   It hangs off the bottom edge of .nav-cta, right-aligned with the register button, rather than floating
   in the middle of the screen over the first thing you see. Pink ground with wine red type, one step
   darker than the pink of the nav itself, plus a border and a shadow -- two pinks against each other
   would have no outline at all. The overflow-x: clip above only trims sideways, so this is not cut off. */
.soon-tip {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 10;
  padding: 10px 20px; border-radius: 10px; white-space: nowrap;
  background: #fce7ee; border: 1px solid #f2c6d6; color: #a3164c;
  font-size: 13.5px; font-weight: 600;
  box-shadow: 0 10px 26px rgba(163, 22, 76, .16);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .25s, transform .25s, visibility .25s;
}
.soon-tip.active { opacity: 1; visibility: visible; transform: translateY(0); }

/* ===== The drawer (1024px and below, where style.css:134-136 hides the menu and the buttons) =====
   It used to be a full-width dropdown that main.js built out of inline styles on .nav-menu; now it is a
   narrow panel sliding in from the right, 78vw wide and 320px at most, with the ground behind it dimmed
   so it is obvious that tapping beside it closes the thing.
   The panel has to sit outside <header>: .nav carries a backdrop-filter, which makes it the containing
   block for any fixed element inside it, and the panel would then travel with the nav. */
.nav-drawer { position: fixed; inset: 0; z-index: 200; visibility: hidden; }
.nav-drawer.active { visibility: visible; }
.drawer-mask { position: absolute; inset: 0; background: rgba(47, 58, 74, .48); opacity: 0; transition: opacity .28s; }
.nav-drawer.active .drawer-mask { opacity: 1; }
.drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(78vw, 320px);
  display: flex; flex-direction: column;
  padding: 18px 20px 26px;
  background: #fff;
  box-shadow: -14px 0 34px rgba(163, 22, 76, .16);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .28s ease;
}
.nav-drawer.active .drawer-panel { transform: translateX(0); }
/* The heading is centred on the panel and the close key is pinned to the top right, so the heading is
   never pushed off centre by it */
.drawer-head { position: relative; padding: 2px 0 12px; text-align: center; }
.drawer-title { font-family: var(--serif); font-size: 17px; font-weight: 700; color: #a3164c; }
/* The close key: a 2px ring with the × inside it in the same colour, so the two read as one thing. The
   ring is 28px and the × 19px -- any bigger a ring and there is a gap around the mark. The × is centred
   with grid rather than line-height: a button lays its text out on a baseline, and line-height alone
   leaves the mark sitting high or low of the middle. Hovering turns ring and mark wine red together. */
.drawer-x {
  position: absolute; top: 0; right: -2px;
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid #c98aa4; color: #c98aa4; font-size: 19px; line-height: 1;
  transition: background .2s, border-color .2s, color .2s;
}
.drawer-x:hover { background: #fce7ee; border-color: #a3164c; color: #a3164c; }
/* The language switch reuses the .nav-lang colours above; all that is set here is centring it */
.drawer-lang { position: relative; justify-content: center; padding: 12px 0; font-size: 14px; }
/* The items are separated by the rules below, so gap comes down to 0, and the line height is tightened a
   little as well, to keep six of them from standing so far apart */
.drawer-menu { position: relative; display: flex; flex-direction: column; padding: 0; }
.drawer-menu a { position: relative; padding: 9px 12px; border-radius: 10px; text-align: center; font-size: 15px; font-weight: 500; color: #55606f; }
/* One hairline under every band of the panel, all the same colour.
   The rules have to be drawn with a pseudo-element rather than border-bottom: the items carry a 10px
   radius, and a border follows that radius and curls up at both ends. Each is inset 14px, so it stops a
   little short of the type, and never reaches the edge of the panel.
   The last item is left alone -- the menu block already draws one under it, and two rules on top of each
   other read as a dark line */
.drawer-head::after,
.drawer-lang::after,
.drawer-menu::after,
.drawer-menu a:not(:last-child)::after {
  content: "";
  position: absolute; left: 14px; right: 14px; bottom: 0;
  height: 1px; background: #f6dce5;
}
.drawer-menu a:hover { background: #fdf3f6; color: #a3164c; }
/* The page you are on gets a pale pink fill */
.drawer-menu a.active { background: #fce7ee; color: #a3164c; font-weight: 600; }
/* Login and Register side by side, half each: the same light-and-heavy split as the pair top right, only
   widened into blocks. The 1px difference in padding again leaves room for login's border, so the two
   boxes match in height */
.drawer-auth { display: flex; gap: 10px; margin-top: 14px; }
.drawer-login, .drawer-reg { flex: 1; border-radius: 10px; font-size: 14.5px; font-weight: 600; }
.drawer-login { padding: 11px 10px; border: 1px solid #e3b9c8; color: #55606f; }
.drawer-login:hover { color: #a3164c; border-color: #a3164c; background: #fdf3f6; }
.drawer-reg {
  padding: 12px 10px;
  background: linear-gradient(135deg, #a3164c, #7d0f39); color: #fff;
  box-shadow: 0 6px 16px rgba(163, 22, 76, .26);
}
.drawer-reg:hover { color: #fff; }
/* The notice inside the drawer does not float, it follows the buttons down the panel. Closed it is
   display:none, or its border and padding would leave a gap under the buttons; the fade is handled by an
   animation instead */
.drawer-panel .soon-tip {
  display: none;
  position: static; margin-top: 12px;
  white-space: normal; text-align: center;
  transform: none; transition: none;
}
.drawer-panel .soon-tip.active { display: block; transform: none; animation: soonIn .25s ease; }
@keyframes soonIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* On a wide screen the drawer is not just hidden, it is taken out of the layout altogether */
@media (min-width: 1025px) { .nav-drawer { display: none; } }

/* ==========================================================================
   Install card .nav-install -- fixed to the bottom-right corner; nav.js reveals it once
   beforeinstallprompt fires (the browser confirming the site is installable), hidden until
   then. "Later" or a dismissal in the native dialog keeps it hidden for the session.
   It lives in nav.css because every page loads that file, so the card needs no extra link.
   ========================================================================== */
.nav-install { position: fixed; right: 24px; bottom: 24px; z-index: 900; width: 300px;
  background: #fff; border-radius: 8px; padding: 14px 16px 12px; box-shadow: 0 6px 24px rgba(74, 42, 42, .18); }
.nav-install[hidden] { display: none; }
.ni-title { display: block; font-size: 13px; color: #8a1c42; font-weight: 700; }
.ni-desc { margin: 6px 0 10px; font-size: 12px; color: #8a8496; line-height: 1.6; }
.ni-acts { display: flex; justify-content: flex-end; gap: 8px; }
.ni-later { border: 1px solid #e4d9c8; background: #fff; color: #6b6b6b; font-size: 12px; border-radius: 4px; padding: 4px 14px; cursor: pointer; }
.ni-later:hover { border-color: #c9bda9; }
.ni-add { border: 0; background: var(--vermilion, #c0392b); color: #fff; font-size: 12px; font-weight: 700; border-radius: 4px; padding: 5px 16px; cursor: pointer; }
.ni-add:hover { background: var(--vermilion-dark, #a12c20); }
@media (max-width: 640px) { .nav-install { left: 12px; right: 12px; bottom: 12px; width: auto; } }