/* lesson_frame.css v1.01 2026-10-14 (the header search line, B6; imp-takase takase-s1026) — v1.00 2026-10-09 — the site's header, navigation bar, breadcrumb and footer, around the reworked lesson page
 * (templates/_lesson_frame_top.html and _lesson_frame_bottom.html).
 *
 * These are the rules the site already uses for those parts (the inline <style> in base.html, then style.css, which
 * wins where both say something), each one scoped under .sf. They are scoped because the lesson player's
 * stylesheet and script work on bare elements and global names (body, main, h1, h2, a, img, header ... .eyebrow,
 * .byline, .path): the site's own stylesheet cannot be loaded on that page, and these rules must not reach the player.
 * Nothing here styles html, body, or a name the player uses. No new design: when base.html's header, style.css's
 * nav/breadcrumb/footer rules or the gallery-nav pattern change, change the same rule here (the markup is checked
 * against base.html by routes/test_lesson_preview.py; these rules are not).
 */

.sf {
  --color-text: #1a1a1a; --color-bg-warm: #f8f7f5; --color-accent: #800000; --color-link: #2c5282;
  --color-muted: #666; --color-border: #eee;
  --font-heading: 'Exo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: Georgia, 'Times New Roman', Times, serif;
  --font-sans: 'Oxygen', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* the player sets these on body; the site's chrome has its own */
  grid-column: 1 / -1;
  font-family: var(--font-sans); font-size: 16px; font-weight: 400; line-height: 1.6;
  font-synthesis: initial; color: var(--color-text);
}
.sf * { margin: 0; padding: 0; box-sizing: border-box; }

/* header */
.sf header {
  background: var(--color-bg-warm) url('/static/images/bg-header-japanese-paper.jpg') center / cover no-repeat;
  padding: 1rem 2rem; border-bottom: 2px solid var(--color-accent);
}
.sf .header-inner { position: relative; max-width: 920px; margin: 0 auto; }
.sf .logo { position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: flex; align-items: center; text-decoration: none; }
.sf .logo img { height: 50px; width: auto; }
.sf .header-catchphrase { flex: 1; text-align: center; }
.sf .catchphrase-main { font-family: 'Times New Roman', Times, var(--font-serif); font-size: 2rem; font-weight: 700; color: var(--color-accent); line-height: 1.2; }
.sf .catchphrase-sub { font-size: 1rem; color: var(--color-text); margin-top: .15rem; }
.sf .catchphrase-sub em { font-style: italic; }
.sf a.eri-attribution { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.sf a.eri-attribution:hover { border-bottom-style: solid; color: var(--color-link); }
.sf .header-currency { margin-top: .35rem; font-size: .78rem; color: var(--color-muted); }
.sf .header-currency label { margin-right: .3rem; }
/* the header search line (templates/_header_search.html), base.html's rules for it; the secondary button's gradient is written out because style.css is not loaded here */
.sf .hdr-search { display: flex; align-items: center; justify-content: center; gap: .35rem; max-width: 19rem; height: 21px; margin: .35rem auto 0; }
.sf header .hdr-search input { flex: 1; min-width: 0; height: 21px; box-sizing: border-box; padding: 0 .5rem; margin: 0; border: 1px solid #b9a98a; border-radius: 3px; font: 400 .82rem Oxygen, sans-serif; color: var(--color-text); background: #fff; box-shadow: inset 0 1px 2px rgba(0,0,0,.08); -webkit-appearance: none; appearance: none; }
.sf header .hdr-search button.btn-secondary { height: 21px; box-sizing: border-box; padding: 0 .7rem; margin: 0; font: 600 .78rem Oxygen, sans-serif; letter-spacing: .02em; line-height: 1; color: #fff; background: linear-gradient(to bottom, #333, #1a1a1a); border: 1px solid #111; border-radius: 3px; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.18); }
.sf header .hdr-search button.btn-secondary:hover { background: linear-gradient(to bottom, #444, #222); }
.sf .hdr-search .hdr-cur { margin: 0; display: flex; align-items: center; gap: .3rem; }
.sf .hdr-search .hdr-cur label { margin: 0; }
@media (min-width: 769px) {
  .sf .hdr-search .hdr-cur { position: absolute; z-index: 1; right: 0; top: calc(50% + 14.1px); width: 180px; justify-content: center; font-size: .85rem; }
  .sf header:has(.hdr-cur) .header-social { min-width: 180px; padding-bottom: 26.8px; }
}
.sf .header-currency select { font-size: .78rem; padding: .1rem .3rem; border: 1px solid var(--color-border); border-radius: 4px; background: #fff; color: var(--color-text); }
.sf .header-cart-icon { display: inline-flex; align-items: center; justify-content: center; position: relative; margin-left: .6rem; width: 1.05rem; height: 1.05rem; vertical-align: middle; color: var(--color-muted); visibility: hidden; text-decoration: none; }
.sf .header-cart-icon.is-visible { visibility: visible; }
.sf .header-cart-icon.is-active { color: var(--color-accent); }
.sf .header-cart-icon-svg { width: 100%; height: 100%; fill: currentColor; }
.sf .header-cart-count { position: absolute; top: -.5rem; right: -.55rem; min-width: 1rem; height: 1rem; padding: 0 .2rem; border-radius: .6rem; background: var(--color-accent); color: #fff; font-size: .6rem; line-height: 1rem; text-align: center; display: none; }
.sf .header-cart-icon.is-active .header-cart-count { display: block; }
.sf .header-social { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 5px; }
.sf .header-social-icons { display: flex; align-items: center; gap: .35rem; }
.sf .header-social-icons a { display: inline-flex; align-items: center; color: #1a1a1a; text-decoration: none; transition: color .15s; }
.sf .header-social-icons a[data-s="x"]:hover { color: #000; }
.sf .header-social-icons a[data-s="fb"]:hover { color: #1877F2; }
.sf .header-social-icons a[data-s="pi"]:hover { color: #E60023; }
.sf .header-social-icons svg { width: 20px; height: 20px; fill: currentColor; }
.sf .header-social img { display: inline; max-width: none; height: 20px; }   /* the player's bare `img` rule sets display:block and height:auto; the site's card strip is inline at its height attribute */

/* site navigation bar */
.sf .site-nav { background: #1a1a1a; text-align: center; padding: .6rem 2rem; }
.sf .site-nav a { color: #fff; text-decoration: none; font-family: var(--font-heading); font-size: .85rem; font-weight: 600; letter-spacing: .08em; margin: 0 1.4rem; white-space: nowrap; }
.sf .site-nav a:hover { color: #ccc; }

/* breadcrumb */
.sf .breadcrumb { max-width: 920px; margin: 0 auto; padding: .5rem 2rem; font-size: .82rem; color: var(--color-muted); }
.sf .breadcrumb a { color: var(--color-link); text-decoration: underline; text-underline-offset: 2px; }
.sf .breadcrumb a:hover { color: var(--color-accent); }

/* previous / next lesson: the gallery pages' .gallery-nav, in the breadcrumb's measure */
.sf .lesson-nav { max-width: 920px; margin: 0 auto; padding: .75rem 2rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: .9rem; }
.sf .lesson-nav a { color: var(--color-link); text-decoration: none; }
.sf .lesson-nav a:hover { text-decoration: underline; }
.sf .lesson-nav-next { text-align: right; margin-left: auto; }

/* footer */
.sf footer { text-align: center; padding: 2rem 1rem; color: var(--color-muted); font-size: .875rem; border-top: 2px solid var(--color-accent); background: var(--color-bg-warm) url('/static/images/bg-header-japanese-paper.jpg') center / cover no-repeat; }
.sf footer p { margin-bottom: .35rem; }
.sf footer p:last-child { margin-bottom: 0; }
.sf .footer-links a { color: #888; text-decoration: none; }
.sf .footer-links a:hover { color: var(--color-text); }

@media (max-width: 768px) {
  .sf .header-inner { text-align: center; }
  .sf .logo { position: static; transform: none; display: inline-flex; margin-bottom: .5rem; }
  .sf .catchphrase-main { font-size: 1.4rem; }
  .sf .catchphrase-sub { font-size: .85rem; }
  .sf .site-nav a { margin: 0 .8rem; }
  .sf .header-social { display: none; }
  .sf .hdr-search { max-width: 100%; gap: .3rem; }
  .sf .hdr-search .hdr-cur label { display: none; }
  .sf .hdr-search .hdr-cur select { height: 21px; font-size: .72rem; padding: 0 .15rem; }
  .sf header .hdr-search button.btn-secondary { padding: 0 .5rem; font-size: .74rem; }
  .sf header .hdr-search input { font-size: .8rem; padding: 0 .35rem; }
}