/* ============================================================================
   brand-shell.css — the shared navbar + footer for the two-brand site.

   ONE structural component (.brand-nav / .brand-footer) used by both EGAO and
   NIKORI, rendered from templates/partials/_brand_nav.html + _brand_footer.html.
   The structure lives here once; each brand's personality is a skin
   (.brand-nav--egao / .brand-nav--nikori) that references that brand's OWN CSS
   custom properties — those resolve because the brand stylesheet (egao.css /
   nikori.css) is loaded on the page alongside this file.

   Linked for every page in templates/base.html. Pages that don't use the shell
   (account, booking) are unaffected — nothing here matches their markup.
   ========================================================================== */

/* ── Photo frames (brand-agnostic) ──────────────────────────────────────────
   The one photo contract for both venues — see
   docs/proposals/imagery-photo-ratio-proposal.html.

   A slot declares its RATIO here and nowhere else; app/core/images.py decides,
   per photo, whether it crops to fill that ratio (.is-cover) or sits whole on a
   mat (.is-contain). The two must agree: --card is 4:3 because images.CARD is
   4/3, --tile is 3:4 because images.TILE is 3/4. Change one, change both.

   Why no pixel heights: a fixed height inside a fluid grid makes the frame's
   shape a function of the viewport, so the same photo was cropped differently on
   a phone, a 3-column grid and a 4-column grid. Declaring the ratio is what makes
   the crop a decision instead of an accident.

   The mat is the photo again, blurred and scaled — so a padded frame still reads
   full and is colour-matched to its own subject. Its picture arrives as the
   inline --ph custom property (a ::before can't be written in a style attribute);
   only .is-contain ever paints it. Backgrounds stay with each brand's CSS.
   ────────────────────────────────────────────────────────────────────────── */
.photo-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.photo-frame--card { aspect-ratio: 4 / 3; }
.photo-frame--tile { aspect-ratio: 3 / 4; }

.photo-frame > img {
  position: relative;           /* above the mat */
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-frame.is-contain > img { object-fit: contain; }
.photo-frame.is-contain::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--ph);
  background-size: cover;
  background-position: center;
  filter: blur(15px) saturate(1.2);
  transform: scale(1.2);        /* hides the blur's soft edge */
}
/* A frame with no photo at all paints neither mat nor image — each brand skins
   .is-placeholder / .is-ph itself. Nothing here fights that. */

/* ── Structure (brand-agnostic) ─────────────────────────────────────────── */
.brand-nav {
  position: sticky;         /* in-flow: never overlaps content on inner pages */
  top: 0;
  z-index: 100;
  width: 100%;
}
.brand-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  padding: 0.85rem 5%;
}
.brand-nav .bn-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: 0 0 auto;
}
.brand-nav .bn-logo img {
  height: 38px;
  width: 38px;
  border-radius: 50%;
  object-fit: cover;
}
.brand-nav .bn-logo-text { white-space: nowrap; }
.brand-nav .bn-jp { font-weight: 500; font-size: 0.72em; opacity: 0.82; margin-left: 3px; }

.brand-nav .bn-right {
  display: flex;
  align-items: center;
  gap: 1.3rem;
}
.brand-nav .bn-links {
  display: flex;
  align-items: center;
  gap: 1.3rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.brand-nav .bn-links a { text-decoration: none; transition: color 0.2s ease; }
.brand-nav .bn-signin {
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
  padding: 6px 14px;
  border-radius: 8px;
  transition: all 0.2s ease;
}
.brand-nav .bn-book {
  text-decoration: none;
  font-weight: 700;
  font-size: 0.85rem;
  white-space: nowrap;
  padding: 8px 18px;
  border-radius: 8px;
  transition: all 0.2s ease;
}
.brand-nav .bn-book:hover { transform: translateY(-1px); }

.brand-footer { padding: 58px 5% 34px; text-align: center; }
.brand-footer .bf-inner { max-width: 1000px; margin: 0 auto; }
.brand-footer .bf-brand { font-weight: 700; font-size: 1.55rem; }
.brand-footer .bf-jp { font-size: 0.9rem; opacity: 0.82; margin-left: 4px; }
.brand-footer .bf-tag { margin: 8px 0 18px; font-size: 0.9rem; opacity: 0.85; }
/* The reserve-by-phone line. Per-brand link colour is set with .bf-links a below. */
.brand-footer .bf-call { margin: 0 0 18px; font-size: 0.9rem; opacity: 0.9; }
.brand-footer .bf-call a { text-decoration: none; font-weight: 700; transition: color 0.2s ease; }
.brand-footer .bf-links {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0;
  margin: 0 0 18px;
}
.brand-footer .bf-links a { text-decoration: none; font-weight: 600; font-size: 0.9rem; transition: color 0.2s ease; }
.brand-footer .bf-copy { font-size: 0.78rem; opacity: 0.6; margin: 0; }

/* ── NIKORI skin (references nikori.css vars) ───────────────────────────── */
.brand-nav--nikori {
  background: rgba(11, 15, 13, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-body);
}
.brand-nav--nikori .bn-logo-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  color: var(--color-text-primary);
}
.brand-nav--nikori .bn-jp { color: var(--color-accent-gold-light); }
.brand-nav--nikori .bn-links a {
  color: var(--color-text-secondary);
  font-weight: 500;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.brand-nav--nikori .bn-links a:hover,
.brand-nav--nikori .bn-links a.active { color: var(--color-accent-gold-light); }
.brand-nav--nikori .bn-signin {
  color: var(--color-bg-primary);
  background: var(--gradient-cream);
}
.brand-nav--nikori .bn-signin:hover { box-shadow: 0 4px 12px rgba(232, 213, 184, 0.3); }
.brand-nav--nikori .bn-book { color: #fff; background: var(--color-accent-gold); }
.brand-nav--nikori .bn-book:hover { background: var(--color-accent-gold-light); }

.brand-footer--nikori {
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  border-top: 1px solid var(--color-border);
}
.brand-footer--nikori .bf-brand { color: var(--color-cream); font-family: var(--font-display); }
.brand-footer--nikori .bf-links a { color: var(--color-text-secondary); }
.brand-footer--nikori .bf-links a:hover { color: var(--color-accent-gold-light); }
/* The phone reads as the accent, not as body text: it stands in for the Book Table
   button that E8 gated off, so it should carry that button's weight. */
.brand-footer--nikori .bf-call a { color: var(--color-accent-gold-light); }
.brand-footer--nikori .bf-call a:hover { color: var(--color-cream); }

/* ── EGAO skin (references egao.css vars) ───────────────────────────────── */
.brand-nav--egao {
  background: var(--primary);
  border-bottom: 2px solid var(--secondary);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
.brand-nav--egao .bn-logo-text {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 2px;
  font-size: 1.5rem;
  color: var(--secondary);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}
.brand-nav--egao .bn-jp { color: #fff; }
.brand-nav--egao .bn-links a {
  color: #fff;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
  font-size: 1.05rem;
}
.brand-nav--egao .bn-links a:hover,
.brand-nav--egao .bn-links a.active { color: var(--secondary); }
.brand-nav--egao .bn-signin {
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.4);
}
.brand-nav--egao .bn-signin:hover { border-color: var(--secondary); color: var(--secondary); }
.brand-nav--egao .bn-book {
  background: var(--secondary);
  color: var(--primary);
  box-shadow: 0 4px 15px rgba(255, 192, 0, 0.4);
}
.brand-nav--egao .bn-book:hover { filter: brightness(1.05); }

.brand-footer--egao {
  background: var(--primary);
  color: #cccccc;
  border-top: 5px solid var(--secondary);
}
.brand-footer--egao .bf-brand { color: var(--secondary); font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 1px; }
.brand-footer--egao .bf-links a { color: #cccccc; }
.brand-footer--egao .bf-links a:hover { color: var(--secondary); }
.brand-footer--egao .bf-call a { color: var(--secondary); }
.brand-footer--egao .bf-call a:hover { color: #fff; }

/* ── Small screens ──────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .brand-nav-inner { gap: 0.8rem; flex-wrap: wrap; }
  .brand-nav .bn-right { gap: 0.8rem; }
  .brand-nav .bn-links { gap: 0.9rem; }
  .brand-nav .bn-jp { display: none; }
  .brand-nav--egao .bn-logo-text { font-size: 1.2rem; }
  .brand-nav--egao .bn-links a { font-size: 0.92rem; }
}