/*
Theme Name: Varenik&Pelmen
Theme URI: https://www.eatpelmeni.com
Author: Varenik&Pelmen
Author URI: https://www.eatpelmeni.com
Description: Apple-inspired minimal theme for Varenik & Pelmen — Eastern European dumpling bar at London food markets. Bootstrap 5, mobile-first, pure white design.
Version: 2.0.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: eat-pelmeni
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
Tags: food-and-drink, custom-menu, translation-ready, one-column, blog
*/

/* ═══════════════════════════════════════════════════════
   DESIGN SYSTEM — Apple-inspired, pure white
   Bootstrap 5 handles grid, spacing, nav.
   This file = overrides + custom components only.
   ═══════════════════════════════════════════════════════ */

/* ─── Custom Properties ───────────────────────────── */
:root {
  --ep-black: #1d1d1f;
  --ep-gray: #86868b;
  --ep-light: #f5f5f7;
  --ep-white: #ffffff;
  --ep-accent: #d32f2f;
  --ep-radius: 20px;
  --ep-radius-sm: 12px;
  --ep-transition: 0.3s cubic-bezier(.4,0,.2,1);
  --ep-shadow: 0 4px 24px rgba(0,0,0,0.06);
  --ep-shadow-lg: 0 16px 48px rgba(0,0,0,0.08);
  --ep-font: -apple-system, 'SF Pro Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ─── Base ────────────────────────────────────────── */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
body { font-family: var(--ep-font); color: var(--ep-black); background: var(--ep-white); overflow-x: hidden; }
img { max-width: 100%; height: auto; }
::selection { background: var(--ep-accent); color: var(--ep-white); }

/* ─── Typography ──────────────────────────────────── */
h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; color: var(--ep-black); }
.display-hero { font-size: clamp(3rem, 8vw, 5.5rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
.display-section { font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; }
.eyebrow { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ep-accent); font-weight: 600; margin-bottom: 0.5rem; }
.lead-text { font-size: 1.1875rem; color: var(--ep-gray); line-height: 1.45; }
.text-gray { color: var(--ep-gray) !important; }

/* ─── Buttons ─────────────────────────────────────── */
.btn-ep { display: inline-block; padding: 0.875rem 2.25rem; border-radius: 980px; font-size: 1rem; font-weight: 500; transition: var(--ep-transition); border: none; cursor: pointer; text-decoration: none; }
.btn-ep-dark { background: var(--ep-black); color: var(--ep-white); }
.btn-ep-dark:hover { background: #333; color: var(--ep-white); }
.btn-ep-light { background: var(--ep-white); color: var(--ep-black); }
.btn-ep-light:hover { background: #f0f0f0; color: var(--ep-black); }
.btn-ep-outline { background: transparent; color: var(--ep-black); border: 2px solid var(--ep-black); }
.btn-ep-outline:hover { background: var(--ep-black); color: var(--ep-white); }
.btn-ep-accent { background: var(--ep-accent); color: var(--ep-white); }
.btn-ep-accent:hover { background: #b71c1c; color: var(--ep-white); }
.link-arrow { font-size: 0.9375rem; color: #0066cc; font-weight: 500; text-decoration: none; }
.link-arrow::after { content: ' \2192'; }
.link-arrow:hover { color: #004499; }

/* ═══════════════════════════════════════════════════════
   HEADER — frosted glass navbar
   ═══════════════════════════════════════════════════════ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1040;
  background: rgba(255,255,255,0.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  transition: box-shadow var(--ep-transition);
}
.site-header.scrolled { box-shadow: 0 1px 12px rgba(0,0,0,0.08); }
body { padding-top: 72px; }

/* Logo */
.navbar-brand img { height: 14px; width: auto; }
@media (min-width: 768px) { .navbar-brand img { height: 16px; } }

/* Nav links — Apple style */
.navbar-nav .nav-link {
  font-size: 0.8125rem; color: var(--ep-black); opacity: 0.8;
  padding: 0.5rem 1rem !important; transition: opacity 0.2s;
  white-space: nowrap;
}
.navbar-nav .nav-link:hover { opacity: 1; color: var(--ep-black); }

/* Dropdown */
.dropdown-menu {
  border: none; border-radius: var(--ep-radius-sm);
  box-shadow: var(--ep-shadow-lg); padding: 0.75rem 0;
  min-width: 220px;
}
.dropdown-item { font-size: 0.875rem; padding: 0.5rem 1.25rem; color: var(--ep-black); }
.dropdown-item:hover { background: var(--ep-light); }

/* Social icons in navbar */
.nav-social a { display: flex; align-items: center; }
.nav-social svg { width: 16px; height: 16px; fill: var(--ep-black); opacity: 0.5; transition: opacity 0.2s; }
.nav-social a:hover svg { opacity: 1; }

/* Language switcher (Polylang) — EN - RU - UK */
.lang-switcher { display: flex; align-items: center; gap: 1px; }
.lang-switcher .lang-link {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500;
  color: var(--ep-gray); text-decoration: none; padding: 3px 7px; border-radius: 4px;
  transition: color 0.2s, background 0.2s;
}
.lang-switcher a.lang-link:hover { color: var(--ep-black); background: var(--ep-light); }
.lang-switcher .lang-link.current { color: var(--ep-black); font-weight: 700; cursor: default; }
.lang-switcher .lang-sep { color: var(--ep-gray); opacity: 0.4; font-size: 0.7rem; }

/* Hamburger */
.navbar-toggler { border: none; padding: 0; box-shadow: none !important; }
.navbar-toggler:focus { box-shadow: none !important; }
.navbar-toggler-icon { width: 24px; height: 24px; }

/* Offcanvas nav */
.offcanvas { border: none; max-width: 320px; }
.offcanvas-header { border-bottom: 1px solid rgba(0,0,0,0.06); padding: 1.25rem 1.5rem; }
.offcanvas-header .btn-close:focus { box-shadow: none; }
.offcanvas-body .nav-link { font-size: 1.125rem; padding: 0.75rem 0 !important; border-bottom: 1px solid var(--ep-light); color: var(--ep-black); }
.offcanvas-body .dropdown-menu { box-shadow: none; background: var(--ep-light); border-radius: var(--ep-radius-sm); position: static !important; transform: none !important; }
.offcanvas .footer-social { padding: 1.5rem 0; }

/* ═══════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════ */
.hero-section {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 6rem 1rem 4rem; position: relative;
}
.hero-section .hero-image {
  max-width: min(500px, 70vw); margin: 0 auto 3rem;
  filter: drop-shadow(0 20px 60px rgba(0,0,0,0.08));
  animation: ep-float 6s ease-in-out infinite;
}
@keyframes ep-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* ═══════════════════════════════════════════════════════
   SECTIONS
   ═══════════════════════════════════════════════════════ */
.ep-section { padding: 6rem 0; }
.ep-section-lg { padding: 8rem 0; }
.bg-light-ep { background: var(--ep-light); }

/* ═══════════════════════════════════════════════════════
   PRODUCT CARDS
   ═══════════════════════════════════════════════════════ */
.product-card {
  background: var(--ep-white);
  padding: 0 2rem 2.5rem; text-align: center;
  transition: transform var(--ep-transition);
  height: 100%;
}
.product-card img {
  width: 280px; height: 280px; object-fit: contain;
}
.product-card .product-name { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.25rem; }
.product-card .product-desc { font-size: 0.9375rem; color: var(--ep-gray); margin-bottom: 0.75rem; }
.product-card .product-price { font-size: 1.0625rem; font-weight: 600; color: var(--ep-accent); }

@media (max-width: 575.98px) {
  .product-card img { width: 180px; height: 180px; }
  .product-card { padding: 2rem 1.25rem 1.75rem; }
}

/* ═══════════════════════════════════════════════════════
   STEPS
   ═══════════════════════════════════════════════════════ */
.step-circle {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--ep-black); color: var(--ep-white);
  font-size: 1.375rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
}

/* ═══════════════════════════════════════════════════════
   TOPPING / DRINK CARDS
   ═══════════════════════════════════════════════════════ */
.topping-card {
  background: var(--ep-light); border-radius: var(--ep-radius);
  padding: 2rem 1.25rem 1.5rem; text-align: center;
  height: 100%;
}
.topping-card img {
  width: 120px; height: 120px; object-fit: cover;
  margin: 0 auto 1rem; border-radius: 50%;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,0.06));
}
.drink-card { text-align: center; height: 100%; }
.drink-card img {
  width: 160px; height: 160px; object-fit: contain;
  margin: 0 auto 1rem;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.06));
}

/* ═══════════════════════════════════════════════════════
   DARK BANNER
   ═══════════════════════════════════════════════════════ */
.banner-dark {
  background: var(--ep-black); color: var(--ep-white);
  padding: 6rem 0; text-align: center; overflow: hidden;
}
.banner-dark h2, .banner-dark h3 { color: var(--ep-white); }
.banner-dark .lead-text { color: rgba(255,255,255,0.65); }
.banner-dark img {
  filter: drop-shadow(0 20px 60px rgba(0,0,0,0.4));
  border-radius: var(--ep-radius);
}

/* ═══════════════════════════════════════════════════════
   PAGE TEMPLATES
   ═══════════════════════════════════════════════════════ */
.breadcrumbs { font-size: 0.8125rem; color: var(--ep-gray); padding: 1rem 0; }
.breadcrumbs a { color: var(--ep-gray); text-decoration: none; }
.breadcrumbs a:hover { color: var(--ep-black); }
.breadcrumbs .sep { margin: 0 0.4rem; }

.page-hero { padding: 3rem 0 2rem; text-align: center; max-width: 800px; margin: 0 auto; }
.page-hero h1 { margin-bottom: 1rem; }
.page-hero .lead-text { margin: 0 auto; max-width: 600px; }

.entry-content { font-size: 1.0625rem; line-height: 1.75; color: #333; max-width: 760px; margin: 0 auto; }
.entry-content h2 { font-size: 1.75rem; margin: 2.5rem 0 1rem; }
.entry-content h3 { font-size: 1.375rem; margin: 2rem 0 0.75rem; }
.entry-content p { margin-bottom: 1.25rem; }
.entry-content ul, .entry-content ol { margin-bottom: 1.25rem; padding-left: 1.5rem; }
.entry-content img { border-radius: var(--ep-radius-sm); margin: 1.5rem 0; }
.entry-content a { color: #0066cc; }
.entry-content a:hover { color: #004499; }

/* Child pages grid */
.child-page-card {
  background: var(--ep-light); border-radius: var(--ep-radius);
  padding: 2rem; transition: transform var(--ep-transition);
  text-decoration: none; color: var(--ep-black); display: block; height: 100%;
}
.child-page-card:hover { transform: translateY(-4px); color: var(--ep-black); }
.child-page-card h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.child-page-card p { font-size: 0.9375rem; color: var(--ep-gray); margin: 0; }

/* ═══════════════════════════════════════════════════════
   FAQ ACCORDION
   ═══════════════════════════════════════════════════════ */
.faq-section { max-width: 760px; margin: 0 auto; }
.faq-list { list-style: none; padding: 0; margin: 0; }
.faq-item { border-bottom: 1px solid #e5e5e5; }
.faq-item:first-child { border-top: 1px solid #e5e5e5; }
.faq-question {
  width: 100%; background: none; border: none;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.25rem 0; font-size: 1.125rem; font-weight: 600;
  color: var(--ep-black); text-align: left; cursor: pointer;
  font-family: var(--ep-font);
}
.faq-question .icon-plus {
  font-size: 1.5rem; color: var(--ep-gray);
  transition: transform 0.35s ease; flex-shrink: 0; margin-left: 1rem;
}
.faq-item.is-open .faq-question .icon-plus { transform: rotate(45deg); }
.faq-answer {
  max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.35s ease;
  font-size: 0.9375rem; color: var(--ep-gray); line-height: 1.65;
}
.faq-item.is-open .faq-answer { padding-bottom: 1.25rem; }

/* ═══════════════════════════════════════════════════════
   BLOG CARDS
   ═══════════════════════════════════════════════════════ */
.post-card {
  background: var(--ep-light); border-radius: var(--ep-radius);
  overflow: hidden; transition: transform var(--ep-transition); height: 100%;
}
.post-card:hover { transform: translateY(-4px); }
.post-card .card-img-top { aspect-ratio: 16/10; object-fit: cover; }
.post-card .card-body { padding: 1.75rem; }
.post-card .post-meta { font-size: 0.8125rem; color: var(--ep-gray); margin-bottom: 0.5rem; }
.post-card h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.post-card h3 a { color: var(--ep-black); text-decoration: none; }
.post-card h3 a:hover { color: var(--ep-accent); }

/* ═══════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════ */
.site-footer { background: var(--ep-light); padding-top: 4rem; padding-bottom: 2rem; }
.site-footer .footer-logo img { height: 14px; width: auto; margin-bottom: 1rem; }
.site-footer .footer-desc { font-size: 0.8125rem; color: var(--ep-gray); line-height: 1.55; margin-bottom: 1.25rem; }
.footer-social a { display: inline-flex; margin-right: 0.75rem; }
.footer-social svg { width: 20px; height: 20px; fill: var(--ep-black); opacity: 0.45; transition: opacity 0.2s; }
.footer-social a:hover svg { opacity: 1; }
.footer-heading { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ep-gray); margin-bottom: 1rem; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 0.5rem; }
.footer-links a { font-size: 0.875rem; color: var(--ep-black); opacity: 0.7; text-decoration: none; }
.footer-links a:hover { opacity: 1; }
.footer-bottom {
  border-top: 1px solid #ddd; padding-top: 1.5rem; margin-top: 2.5rem;
  font-size: 0.75rem; color: var(--ep-gray);
}

/* ═══════════════════════════════════════════════════════
   SEARCH FORM
   ═══════════════════════════════════════════════════════ */
.search-form { display: flex; max-width: 400px; margin: 0 auto; gap: 0.5rem; }
.search-form .search-field {
  flex: 1; padding: 0.75rem 1.25rem; border: 1px solid #e0e0e0;
  border-radius: 980px; font-size: 1rem; background: var(--ep-light);
  outline: none; transition: border-color 0.2s;
}
.search-form .search-field:focus { border-color: var(--ep-black); }
.search-form .search-submit {
  padding: 0.75rem 1.5rem; border-radius: 980px; border: none;
  background: var(--ep-black); color: var(--ep-white);
  font-size: 0.9375rem; font-weight: 500; cursor: pointer; transition: background 0.2s;
}
.search-form .search-submit:hover { background: #333; }

/* ═══════════════════════════════════════════════════════
   PAGINATION (Bootstrap .pagination — used if any template
   still renders Bootstrap-style pager markup)
   ═══════════════════════════════════════════════════════ */
.pagination .page-link { border: none; color: var(--ep-black); border-radius: 8px !important; }
.pagination .page-item.active .page-link { background: var(--ep-black); color: var(--ep-white); }

/* ═══════════════════════════════════════════════════════
   WORDPRESS NATIVE PAGINATION (.page-numbers)
   This is what archive.php / search.php actually render via
   paginate_links() — Apple-style pill nav using the same
   design tokens as the rest of the theme.
   ═══════════════════════════════════════════════════════ */
nav[aria-label="Posts navigation"],
nav[aria-label="Post navigation"] {
  display: flex;
  justify-content: center;
  margin: 3rem 0;
}
nav[aria-label="Posts navigation"] .page-numbers,
nav[aria-label="Post navigation"] .page-numbers {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}
nav[aria-label="Posts navigation"] .page-numbers li,
nav[aria-label="Post navigation"] .page-numbers li {
  display: flex;
}
nav[aria-label="Posts navigation"] a.page-numbers,
nav[aria-label="Posts navigation"] span.page-numbers,
nav[aria-label="Post navigation"] a.page-numbers,
nav[aria-label="Post navigation"] span.page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.75rem;
  border-radius: 999px;
  font-family: var(--ep-font);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ep-black);
  background: var(--ep-light);
  text-decoration: none;
  transition: var(--ep-transition);
}
nav[aria-label="Posts navigation"] a.page-numbers:hover,
nav[aria-label="Post navigation"] a.page-numbers:hover {
  background: var(--ep-white);
  box-shadow: var(--ep-shadow);
  transform: translateY(-1px);
}
nav[aria-label="Posts navigation"] .page-numbers.current,
nav[aria-label="Post navigation"] .page-numbers.current {
  background: var(--ep-accent);
  color: var(--ep-white);
  box-shadow: var(--ep-shadow);
}
nav[aria-label="Posts navigation"] .page-numbers.dots,
nav[aria-label="Post navigation"] .page-numbers.dots {
  background: transparent;
  color: var(--ep-gray);
}
nav[aria-label="Posts navigation"] a.next.page-numbers,
nav[aria-label="Posts navigation"] a.prev.page-numbers,
nav[aria-label="Post navigation"] a.next.page-numbers,
nav[aria-label="Post navigation"] a.prev.page-numbers {
  background: var(--ep-black);
  color: var(--ep-white);
  font-weight: 600;
}
nav[aria-label="Posts navigation"] a.next.page-numbers:hover,
nav[aria-label="Posts navigation"] a.prev.page-numbers:hover,
nav[aria-label="Post navigation"] a.next.page-numbers:hover,
nav[aria-label="Post navigation"] a.prev.page-numbers:hover {
  background: var(--ep-accent);
  box-shadow: var(--ep-shadow-lg);
  transform: translateY(-1px);
}
@media (max-width: 480px) {
  nav[aria-label="Posts navigation"] a.page-numbers,
  nav[aria-label="Posts navigation"] span.page-numbers,
  nav[aria-label="Post navigation"] a.page-numbers,
  nav[aria-label="Post navigation"] span.page-numbers {
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.5rem;
    font-size: 0.85rem;
  }
}

/* ═══════════════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════════════ */
.img-float { filter: drop-shadow(0 16px 48px rgba(0,0,0,0.08)); }
.rounded-ep { border-radius: var(--ep-radius) !important; }

/* ═══════════════════════════════════════════════════════
   PRINT
   ═══════════════════════════════════════════════════════ */
@media print {
  .site-header, .site-footer, .breadcrumbs, .faq-section, .offcanvas { display: none !important; }
  body { padding-top: 0; }
}