/* ============================================================
   Siprolla — additive styles for real app.js header/footer markup
   ============================================================ */

/* ---------- Shared shell ---------- */
#site-header,
#site-footer {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Header ---------- */
.site-header {
  position: relative;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 14px 0 0;
  z-index: 50;
}

.site-header__bar {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: nowrap;
  padding-bottom: 14px;
}

/* Wordmark / logo */
.wordmark {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1;
  flex: 0 0 auto;
  padding: 4px 0;
}
.wordmark:hover { color: var(--accent); }
.wordmark svg,
.wordmark img {
  max-height: 34px;
  width: auto;
  display: block;
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.nav-toggle:hover { border-color: var(--accent); }
.nav-toggle__lines,
.nav-toggle__lines::before,
.nav-toggle__lines::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  position: relative;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle__lines::before,
.nav-toggle__lines::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-toggle__lines::before { top: -6px; }
.nav-toggle__lines::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__lines { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__lines::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__lines::after  { transform: translateY(-6px) rotate(-45deg); }

/* Primary nav */
.primary-nav { flex: 1 1 auto; min-width: 0; }
.primary-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 22px;
}
.primary-nav__list > li { position: relative; }
.primary-nav__link {
  font: inherit;
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 6px 0;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.primary-nav__link:hover,
.primary-nav__link[aria-expanded="true"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.has-dropdown > .primary-nav__link::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform .15s;
}
.has-dropdown > .primary-nav__link[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

/* Dropdown */
.dropdown {
  list-style: none;
  margin: 0;
  padding: 8px;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 240px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(31, 42, 48, .12);
  display: none;
  z-index: 60;
}
.dropdown.is-open { display: block; }
.dropdown li { margin: 0; }
.dropdown a {
  display: block;
  padding: 9px 12px;
  font-size: .88rem;
  color: var(--ink);
  border-radius: 6px;
  transition: background .12s, color .12s;
}
.dropdown a:hover {
  background: var(--paper);
  color: var(--accent);
}

/* Search */
.search {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 3px 3px 14px;
  flex: 0 1 240px;
  min-width: 0;
  transition: border-color .15s, box-shadow .15s;
}
.search:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(91, 124, 141, .18);
}
.search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: .88rem;
  color: var(--ink);
  padding: 6px 0;
  outline: none;
}
.search input[type="search"]::placeholder { color: var(--muted); }
.search__btn {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s;
}
.search__btn:hover { background: #a8461f; }

/* Cart link */
.cart-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  flex: 0 0 auto;
  transition: border-color .15s, color .15s;
}
.cart-link:hover { border-color: var(--accent); color: var(--accent); }
.cart-link svg { flex: 0 0 auto; }

/* Mobile search row (hidden on desktop) */
.site-header__searchrow { display: none; padding-bottom: 12px; }
.search--mobile { flex: 1 1 auto; width: 100%; }

/* Mobile menu */
.mobile-menu {
  border-top: 1px solid var(--line);
  padding: 14px 0 18px;
  background: var(--paper);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__group {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 700;
  color: var(--accent);
  margin: 12px 0 6px;
}
.mobile-menu__group:first-child { margin-top: 0; }
.mobile-menu__list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: grid;
  gap: 2px;
}
.mobile-menu__list a {
  display: block;
  padding: 10px 12px;
  font-size: .92rem;
  color: var(--ink);
  border-radius: 8px;
  background: var(--white);
  border: 1px solid var(--line);
}
.mobile-menu__list a:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  margin-top: var(--pad-d);
  padding: 36px 0 28px;
  font-size: .85rem;
  color: var(--muted);
}
.site-footer__cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
}
.site-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}
.site-footer__col a {
  color: var(--muted);
  transition: color .12s;
}
.site-footer__col a:hover { color: var(--accent); }
.site-footer__h {
  font-family: var(--sans);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 12px;
}
.site-footer__brand .wordmark {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 1.25rem;
}
.site-footer__brand p {
  margin: 0 0 10px;
  max-width: 34ch;
  line-height: 1.55;
}
.site-footer__contact a { color: var(--blue); }
.site-footer__contact a:hover { color: var(--accent); }
.site-footer__note {
  font-size: .78rem;
  color: var(--muted);
  opacity: .85;
}
.site-footer__base {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: .78rem;
}
.site-footer__base p { margin: 0; }
.site-footer__paypal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px dashed var(--line);
  border-radius: 999px;
  color: var(--muted);
}

/* ---------- Motion sequence: tighten empty space ---------- */
.motion__track {
  align-items: start;
  gap: 14px;
}
.motion__card {
  margin: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.motion__frames {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--white);
}
.motion__frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .6s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}
.motion__frame.is-active { opacity: 1; }
.motion__frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  aspect-ratio: auto;
}
.motion__name {
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
  padding: 10px 12px 12px;
  color: var(--ink);
}
.motion__name a { color: inherit; }
.motion__name a:hover { color: var(--accent); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .site-footer__cols {
    grid-template-columns: 1fr 1fr;
    gap: 26px;
  }
  .site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .primary-nav { display: none; }
  .site-header nav.primary-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-header__bar { gap: 12px; }
  .search { display: none; }
  .site-header__searchrow { display: block; }
  .cart-link__label { display: none; }
  .cart-link { padding: 8px; width: 40px; height: 40px; justify-content: center; }
}

@media (max-width: 760px) {
  #site-header,
  #site-footer { padding-left: 18px; padding-right: 18px; }
  .site-header { padding-top: 10px; }
  .site-header__bar { padding-bottom: 10px; }
  .wordmark { font-size: 1.2rem; }
  .site-footer { margin-top: var(--pad-m); padding: 26px 0 22px; }
  .site-footer__cols {
    grid-template-columns: 1fr 1fr;
    gap: 20px 18px;
  }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__brand p { max-width: none; }
  .site-footer__base {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 20px;
    padding-top: 14px;
  }
  .motion__track { gap: 12px; }
}

@media (max-width: 420px) {
  .site-footer__cols { grid-template-columns: 1fr; }
  .site-footer__col ul { gap: 6px; }
  .site-footer__h { margin-bottom: 8px; }
}

@media (max-width: 860px) {
  /* Hide only the desktop search; keep the mobile search form visible */
  .site-header__bar .search { display: none; }
  .site-header__searchrow { display: block; }
  .site-header__searchrow .search--mobile { display: flex; }
  /* Ensure the mobile menu stays visible when expanded, even if [hidden] is toggled */
  .mobile-menu[hidden] { display: none; }
  .nav-toggle[aria-expanded="true"] ~ .mobile-menu:not([hidden]) { display: block; }
}


.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.site-header__bar .search {
  flex: 0 1 260px;
  min-width: 180px;
  align-items: center;
  flex-wrap: nowrap;
}

.site-header__bar .search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.site-header__bar .search__btn {
  flex: 0 0 auto;
}

.site-header__bar .search .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.site-header__searchrow .search--mobile {
  flex-wrap: nowrap;
  align-items: center;
}

.site-header__searchrow .search--mobile input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}

.site-header__searchrow .search--mobile .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

@media (max-width: 860px) {
  .site-header__bar .search {
    display: none;
  }
  .site-header__searchrow {
    display: block;
  }
  .site-header__searchrow .search--mobile {
    display: flex;
  }
}

@media (min-width: 861px) {
  .site-header__searchrow {
    display: none;
  }
  .site-header__bar .search {
    display: flex;
  }
}

.search input[type="search"]:focus-visible,
.search__btn:focus-visible,
.cart-link:focus-visible,
.primary-nav__link:focus-visible,
.nav-toggle:focus-visible,
.dropdown a:focus-visible,
.mobile-menu__list a:focus-visible {
  outline: 2px solid var(--blue, #5b7c8d);
  outline-offset: 2px;
}

.search:focus-within {
  border-color: var(--blue, #5b7c8d);
  box-shadow: 0 0 0 3px rgba(91, 124, 141, .18);
}
/* Siprolla isolated visual QA fix 2026-11-12. */
/* ---------- 2) Desktop nav button: no wrap ---------- */
/* Only applies above the 860px mobile breakpoint so mobile
   behavior is unchanged. Text stays on one line; padding and
   height (tap target) are preserved. */
@media (min-width: 861px) {
  .primary-nav__link {
    white-space: nowrap;
  }
  .has-dropdown > .primary-nav__link {
    white-space: nowrap;
  }
}

/* ---------- 3) Desktop/tablet nav: reserve content width ---------- */
/* .primary-nav uses flex:1 1 auto with min-width:0, so its flex
   list can overflow its allocated width and the last link (Help)
   can overlap the search field's left border. Reserving the nav's
   content width keeps every link and dropdown fully separated
   from the search at all desktop/tablet widths. Nothing is hidden
   or wrapped; search, cart and nav remain visible. */
@media (min-width: 861px) {
  .primary-nav {
    min-width: max-content;
  }
}