/* ===========================================================
   My Strand — layout layer
   Site chrome shared by every page: header, navigation,
   language toggle, page-header block, section spacing, footer.
   =========================================================== */

/* Header */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--bg-frosted); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-color); padding: 16px 0; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand-logo { font-family: var(--font-serif); font-size: 1.45rem; font-weight: 700; letter-spacing: 0.14em; color: var(--text-main); text-transform: uppercase; }
.brand-logo span { color: var(--accent-leather); }
.main-nav ul { display: flex; list-style: none; gap: 22px; }
.main-nav a { font-size: 0.9rem; font-weight: 500; color: var(--text-muted); transition: var(--transition); padding: 4px 0; }
.main-nav a:hover, .main-nav a.active { color: var(--accent-leather); }

.header-controls { display: flex; align-items: center; gap: 10px; }
.select-control { background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-main); padding: 0 10px; height: 32px; border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 600; outline: none; cursor: pointer; }
#currency-select { width: 68px; color: var(--text-muted); }

/* Full-width header: logo left, controls right, menu centered */
.site-header .container { max-width: none; }
.header-inner { gap: 16px; }
.brand-logo { flex-shrink: 0; }
.header-nav-group { flex: 1 1 auto; display: flex; align-items: center; gap: 16px; min-width: 0; }
.main-nav { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
.main-nav ul { gap: 16px; flex-wrap: wrap; justify-content: center; }
.header-controls { flex-shrink: 0; }

/* Hamburger button (hidden by default; shown on narrow screens) */
.nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 9px; background: transparent; border: none; cursor: pointer; flex-shrink: 0; }
.nav-toggle span { display: block; width: 100%; height: 2px; background: var(--text-main); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Info links (How to order / Reviews / About) — same 16px spacing as categories */
.nav-info { display: inline-flex; align-items: center; gap: 16px; }
/* Compensate inline-flex baseline shift — links align with the other items */
.nav-info a { position: relative; top: -2px; }
/* Separators between menu groups */
.main-nav ul .nav-sep { color: var(--accent-leather); font-size: 1rem; opacity: 0.7; line-height: 1.7; padding: 0; user-select: none; pointer-events: none; }

/* Language selector RUS/ENG/SRB — same base style as the currency selector (.select-control),
   but muted text color to read as a secondary control */
#lang-select { color: var(--text-muted); width: 68px; }

/* Page Header Block + section spacing */
.page-header-block { padding: 40px 0 40px; background: var(--bg-subtle); border-bottom: 1px solid var(--border-color); text-align: center; }
.section-badge { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-leather); margin-bottom: 8px; }
.section-title { font-family: var(--font-serif); font-size: 2.2rem; font-weight: 700; margin-bottom: 10px; }
.section-subtitle { color: var(--text-muted); font-size: 1rem; }
.section-block { padding: 60px 0 80px; }

/* Footer */
.site-footer { background: var(--bg-dark); color: var(--text-light); padding: 40px 0 24px; }
.footer-bottom { display: flex; justify-content: space-between; font-size: 0.85rem; color: #A3968B; }

/* Tablet width (before hamburger): logo on two lines, controls stacked; menu already wraps */
@media (min-width: 1025px) and (max-width: 1280px) {
  .brand-logo { line-height: 1.1; }
  .brand-logo span { display: block; }
  .header-controls { flex-wrap: wrap; justify-content: flex-end; gap: 8px; width: 132px; }
  /* Controls occupy two rows here; force the menu to two rows too so it never
     snaps back to a single line while the controls are stacked (avoids a narrow
     band where freeing the controls' width let the menu re-collapse). */
  .main-nav ul .nav-info { flex-basis: 100%; justify-content: center; }
}
/* Mobile menu: nav group (menu + controls) collapses under the hamburger into a panel */
@media (max-width: 1024px) {
  .nav-toggle { display: flex; }
  .header-inner { position: relative; }
  .header-nav-group {
    display: none;
    position: absolute; top: calc(100% + 1px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 12px 32px rgba(35, 27, 21, 0.14);
    padding: 6px 24px 18px;
    max-height: calc(100vh - 70px); overflow-y: auto;
  }
  .site-header.nav-open .header-nav-group { display: flex; }
  .main-nav { flex: none; display: block; }
  .main-nav ul { flex-direction: column; align-items: flex-start; gap: 2px; flex-wrap: nowrap; }
  .main-nav a { display: block; width: 100%; padding: 11px 0; font-size: 1rem; }
  .header-controls { flex-wrap: wrap; justify-content: flex-start; gap: 14px; width: 132px; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--border-color); }
  .nav-info { flex-direction: column; align-items: stretch; gap: 2px; width: 100%; }
  .nav-info a { top: 0; }
  .main-nav ul .nav-sep { display: none; }
}

/* Theme toggle (light/dark) — sits next to the language switch.
   Icons are single-colour SVG silhouettes used as CSS masks, so they
   take `currentColor`-style tinting and flip with the theme for free.
   Light theme shows the moon (→ switch to dark); dark shows the sun. */
.theme-toggle { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-sm); color:var(--text-muted); cursor:pointer; transition:var(--transition); }
.theme-toggle:hover { color:var(--accent-leather); border-color:var(--accent-leather); }
.theme-toggle .theme-icon { width:20px; height:20px; background-color:currentColor;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain;    mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; }
.theme-icon-moon { -webkit-mask-image:url(/assets/images/icons/half-moon.svg); mask-image:url(/assets/images/icons/half-moon.svg); }
.theme-icon-sun  { -webkit-mask-image:url(/assets/images/icons/sun.svg);       mask-image:url(/assets/images/icons/sun.svg); }
.theme-toggle .theme-icon-sun { display:none; }
html[data-theme="dark"] .theme-toggle .theme-icon-moon { display:none; }
html[data-theme="dark"] .theme-toggle .theme-icon-sun  { display:inline-block; }