/* Vibe Kuchni — Industrial Modern Theme (Mobile-first, Flexbox-only) */
/* ===================================================================== */
/* RESET + NORMALIZE */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: Verdana, Arial, sans-serif; color: #E6E9EF; background: #121417; line-height: 1.6; }
img, svg { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; background: transparent; border: none; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding-left: 1.2rem; }
p { margin: 0; }
hr { border: 0; border-top: 1px solid #2A2F36; margin: 24px 0; }

/* THEME TOKENS */
:root {
  /* brand */
  --brand-primary: #B23A2A; /* brick red */
  --brand-secondary: #2E7D32; /* deep green */
  --brand-accent: #FFF4E6; /* warm accent */
  /* industrial palette */
  --bg-900: #121417; /* coal */
  --bg-800: #15181C; /* dark slate */
  --bg-700: #1A1F24; /* gunmetal */
  --steel-600: #2A2F36; /* steel */
  --steel-500: #3A4048; /* steel mid */
  --steel-400: #505661; /* softer steel */
  --text-100: #F2F4F7; /* near white */
  --text-200: #D7DBE2; /* light */
  --text-300: #B3BACC; /* muted */
  --light-card: #F5F7FA; /* light for testimonials */
  --light-text: #111418; /* dark text on light */
  /* spacing */
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-60: 60px;
  /* radii & shadows */
  --radius-8: 8px;
  --radius-12: 12px;
  --shadow-1: 0 1px 0 rgba(255,255,255,0.03), 0 6px 18px rgba(0,0,0,0.35);
  --shadow-2: 0 2px 0 rgba(255,255,255,0.04), 0 10px 24px rgba(0,0,0,0.45);
}

/* TYPOGRAPHY */
h1, h2, h3, h4, h5, h6 { font-family: Georgia, 'Times New Roman', serif; color: var(--text-100); margin: 0; letter-spacing: 0.2px; }
h1 { font-size: 32px; line-height: 1.25; }
h2 { font-size: 24px; line-height: 1.3; }
h3 { font-size: 18px; line-height: 1.35; }
.subheadline { color: var(--text-200); font-size: 16px; }

@media (min-width: 768px) {
  h1 { font-size: 44px; }
  h2 { font-size: 28px; }
  h3 { font-size: 20px; }
  .subheadline { font-size: 18px; }
}

/* LAYOUT BASICS (Flexbox everywhere) */
.container { display: flex; flex-direction: column; align-items: center; padding: 0 var(--space-16); }
.content-wrapper { display: flex; flex-direction: column; gap: var(--space-20); width: 100%; max-width: 1200px; }
section { padding: var(--space-40) 0; border-bottom: 1px solid var(--steel-600); }

/* MANDATORY SPACING & ALIGNMENT PATTERNS */
.section { margin-bottom: 60px; padding: 40px 20px; }
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; }
.content-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; }
.text-image-section { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.testimonial-card { display: flex; align-items: center; gap: 20px; padding: 20px; }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

/* HEADER */
header { position: sticky; top: 0; z-index: 1000; background: var(--bg-800); border-bottom: 1px solid var(--steel-600); box-shadow: var(--shadow-1); }
header .content-wrapper { padding: var(--space-16) 0; }
header .logo img { height: 36px; filter: contrast(1.05) saturate(0.9); }

.main-nav { display: none; gap: var(--space-16); align-items: center; }
.main-nav a { padding: 10px 12px; color: var(--text-200); text-transform: uppercase; letter-spacing: 0.8px; font-size: 13px; border-radius: 6px; border: 1px solid transparent; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.main-nav a:hover { color: var(--text-100); border-color: var(--steel-600); background: var(--bg-700); }
.main-nav a[aria-current="page"] { color: var(--text-100); border-color: var(--brand-primary); }

.header-cta { display: none; gap: var(--space-12); align-items: center; }

/* MOBILE NAV BUTTON */
.mobile-menu-toggle { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--text-100); background: var(--bg-700); border: 1px solid var(--steel-600); border-radius: 8px; box-shadow: var(--shadow-1); transition: transform .2s ease, background .2s ease; }
.mobile-menu-toggle:hover { transform: translateY(-1px); background: #1E242A; }

/* DESKTOP HEADER LAYOUT */
@media (min-width: 992px) {
  header .content-wrapper { flex-direction: row; align-items: center; justify-content: space-between; }
  .main-nav { display: flex; }
  .header-cta { display: flex; }
  .mobile-menu-toggle { display: none; }
}

/* MOBILE MENU OVERLAY */
.mobile-menu { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--bg-800); border-left: 1px solid var(--steel-600); transform: translateX(100%); transition: transform .35s ease; z-index: 1200; }
.mobile-menu.open { transform: translateX(0%); }
.mobile-menu-close { align-self: flex-end; margin: var(--space-16); width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-100); background: var(--bg-700); border: 1px solid var(--steel-600); border-radius: 8px; }
.mobile-nav { display: flex; flex-direction: column; gap: var(--space-12); padding: 0 var(--space-20) var(--space-40); }
.mobile-nav a { display: flex; align-items: center; min-height: 48px; padding: 10px 14px; border-radius: 8px; color: var(--text-200); border: 1px solid var(--steel-600); background: #161A1F; }
.mobile-nav a:hover { color: var(--text-100); background: #1E242A; border-color: var(--steel-500); }
.mobile-nav a[aria-current="page"] { border-color: var(--brand-primary); color: var(--text-100); }

/* HERO */
.hero { background: var(--bg-800); }
.hero .content-wrapper { gap: var(--space-20); padding: var(--space-20) 0; }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-12); align-items: center; }

/* BUTTONS */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border-radius: 10px; border: 1px solid var(--steel-600); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; font-size: 13px; transition: transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease; box-shadow: var(--shadow-1); }
.button:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.button:focus { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.button.primary { background: var(--brand-primary); color: #fff; border-color: #9A2F23; }
.button.primary:hover { background: #9E3426; }
.button.secondary { background: transparent; color: var(--brand-accent); border-color: var(--steel-500); }
.button.secondary:hover { background: var(--bg-700); color: #fff; }

/* GENERIC TEXT BLOCKS */
.text-section { display: flex; flex-direction: column; gap: var(--space-12); color: var(--text-200); }
.text-section p { color: var(--text-200); }

/* SEARCH PLACEHOLDER + INFO CARDS */
.search-placeholder { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px; background: var(--bg-700); color: var(--text-200); border: 1px dashed var(--steel-500); border-radius: var(--radius-8); }

/* TRUST BADGES */
.trust-badges ul { display: flex; flex-wrap: wrap; gap: var(--space-12); list-style: none; padding-left: 0; }
.trust-badges li { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: #161A1F; border: 1px solid var(--steel-600); border-radius: 10px; color: var(--text-300); }
.trust-badges img { width: 18px; height: 18px; filter: brightness(1.2) saturate(0.8); }

/* FEATURE GRID */
.feature-grid { display: flex; flex-wrap: wrap; gap: var(--space-24); }
.feature-grid .text-section { flex: 1 1 260px; padding: 18px; background: #151A1F; border: 1px solid var(--steel-600); border-radius: var(--radius-12); box-shadow: var(--shadow-1); }
.feature-grid .text-section h3 { color: var(--brand-accent); }

/* STEP LIST */
.step-list { display: flex; flex-direction: column; gap: var(--space-12); counter-reset: steps; padding-left: 0; list-style: none; }
.step-list li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--steel-600); border-left: 4px solid var(--brand-secondary); background: #14181D; border-radius: 8px; }

/* CATEGORY GRID */
.category-grid { display: flex; flex-wrap: wrap; gap: var(--space-24); }
.category-grid .text-section { flex: 1 1 240px; padding: 18px; background: #151A1F; border: 1px solid var(--steel-600); border-radius: var(--radius-12); }
.category-grid .text-section h3 { color: var(--text-100); }

/* RECIPES */
.recipe-cards { display: flex; flex-wrap: wrap; gap: var(--space-24); }
.recipe-cards .text-section { flex: 1 1 260px; padding: 18px; background: #14181D; border: 1px solid var(--steel-600); border-radius: var(--radius-12); box-shadow: var(--shadow-1); }
.recipe-cards .text-section h3 { color: var(--brand-accent); }
.recipe-cards .text-section .button { align-self: flex-start; }

/* TESTIMONIALS & REVIEWS — light cards for readability */
.testimonials { display: flex; flex-wrap: wrap; gap: var(--space-20); }
.reviews-list { display: flex; flex-wrap: wrap; gap: var(--space-20); }
.testimonial-card { background: var(--light-card); color: var(--light-text); border: 1px solid #E3E7EE; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
.testimonial-card p { color: var(--light-text); }
.testimonial-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.12); }
.ratings-summary { display: inline-flex; align-items: center; gap: 10px; color: var(--text-200); background: #161A1F; border: 1px solid var(--steel-600); padding: 10px 12px; border-radius: 8px; }
.ratings-summary img { width: 18px; height: 18px; }

/* BENEFITS */
.benefits-list { display: flex; flex-direction: column; gap: 10px; color: var(--text-200); }
.benefits-list li { position: relative; padding-left: 10px; }

.privacy-note { color: var(--text-300); }
.privacy-note a { color: var(--brand-accent); text-decoration: underline; }

/* TIPS & QA */
.tips-list, .qa-highlights { display: flex; flex-direction: column; gap: var(--space-16); }
.qa-highlights { flex-wrap: wrap; }
.qa-highlights .testimonial-card { flex: 1 1 280px; }

/* FOOTER */
footer { background: #0E1013; color: var(--text-200); border-top: 1px solid var(--steel-600); }
footer .content-wrapper { padding: var(--space-20) 0; }
.footer-brand, .footer-nav, .footer-legal, .footer-contact { display: flex; flex-direction: column; gap: 10px; }
footer nav { display: flex; flex-direction: column; gap: 8px; }
footer a { color: var(--text-300); }
footer a:hover { color: var(--text-100); }
.social-links { display: flex; gap: var(--space-16); align-items: center; }
.legal-links { display: flex; align-items: center; }

@media (min-width: 992px) {
  footer .content-wrapper:first-of-type { flex-direction: row; align-items: flex-start; justify-content: space-between; }
  .legal-links { margin-left: auto; }
}

/* ARIA CURRENT STATE */
a[aria-current="page"] { position: relative; }
a[aria-current="page"]::after { content: ""; display: block; height: 2px; background: var(--brand-primary); margin-top: 4px; border-radius: 2px; }

/* LIST UTILITIES INSIDE CONTENT-WRAPPER */
.content-wrapper > .text-section ul { display: flex; flex-direction: column; gap: 8px; }

/* TEXT-IMAGE SECTION RESPONSIVE RULE */
@media (max-width: 768px) { .text-image-section { flex-direction: column; } }

/* COOKIE CONSENT BANNER */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: var(--space-16); align-items: center; background: #0F1317; color: var(--text-200); border-top: 1px solid var(--steel-600); padding: 16px; box-shadow: 0 -8px 24px rgba(0,0,0,0.4); z-index: 1300; transform: translateY(100%); transition: transform .35s ease; }
.cookie-banner.show { transform: translateY(0); }
.cookie-banner .cookie-inner { display: flex; flex-direction: column; gap: var(--space-12); width: 100%; max-width: 1100px; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-actions .btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; min-height: 40px; border-radius: 8px; border: 1px solid var(--steel-600); font-weight: 700; letter-spacing: .5px; }
.cookie-actions .accept { background: var(--brand-secondary); color: #fff; border-color: #256628; }
.cookie-actions .reject { background: #1A1F24; color: var(--text-100); }
.cookie-actions .settings { background: transparent; color: var(--brand-accent); }
.cookie-actions .btn:hover { filter: brightness(1.05); }

/* COOKIE PREFERENCES MODAL */
.cookie-modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.65); z-index: 1400; }
.cookie-modal.open { display: flex; }
.cookie-modal .modal-content { display: flex; flex-direction: column; gap: var(--space-16); width: min(92%, 720px); background: #161B21; border: 1px solid var(--steel-600); border-radius: 12px; padding: 20px; box-shadow: var(--shadow-2); color: var(--text-200); }
.cookie-modal .modal-header { display: flex; align-items: center; justify-content: space-between; }
.cookie-modal .modal-body { display: flex; flex-direction: column; gap: var(--space-12); }
.cookie-modal .pref-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; background: #13171C; border: 1px solid var(--steel-600); border-radius: 8px; }
.cookie-modal .modal-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
/* simple toggle */
.toggle { display: inline-flex; align-items: center; gap: 10px; }
.toggle .switch { width: 44px; height: 24px; background: #2A3139; border: 1px solid var(--steel-600); border-radius: 16px; position: relative; }
.toggle .switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #8E98A7; border-radius: 50%; transition: left .2s ease, background .2s ease; }
.toggle input:checked + .switch { background: #214A23; border-color: #256628; }
.toggle input:checked + .switch::after { left: 22px; background: #7ED27E; }

/* UTILITIES */
.muted { color: var(--text-300); }
.lead { font-size: 18px; color: var(--text-200); }
.stack-16 { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; flex-wrap: wrap; gap: 16px; }

/* ACCESSIBILITY FOCUS */
:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

/* RESPONSIVE GRIDS VIA FLEX (no CSS Grid) */
/* 2–4 columns depending on width */
.responsive-panes { display: flex; flex-wrap: wrap; gap: 20px; }
.responsive-panes > * { flex: 1 1 260px; }

/* PAGE-SPECIFIC TWEAKS */
/* Index: trust badges spacing already handled; */
/* Przepisy & Sezonowe: emphasize sections */
.hero + section .content-wrapper > h2 { margin-top: 0; }

/* CONTACT INFO ROWS */
.footer-contact p, .footer-contact .newsletter-mini, .text-section p img { display: flex; align-items: center; gap: 8px; }

/* ICONS WITH TEXT INLINE */
.text-section p img, .footer-contact p img { width: 18px; height: 18px; }

/* LEGAL PAGES TYPO */
main .hero .subheadline { color: var(--text-300); }

/* DESKTOP ADJUSTMENTS */
@media (min-width: 768px) {
  .hero .content-wrapper { padding: var(--space-32) 0; }
  .feature-grid .text-section, .category-grid .text-section, .recipe-cards .text-section { padding: 20px; }
}

@media (min-width: 992px) {
  .content-wrapper.section-row { flex-direction: row; align-items: flex-start; justify-content: space-between; }
  .text-image-section { flex-wrap: nowrap; }
}

/* CARDS MICRO-INTERACTIONS */
.feature-grid .text-section:hover, .category-grid .text-section:hover, .recipe-cards .text-section:hover { border-color: var(--steel-500); transform: translateY(-2px); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; box-shadow: var(--shadow-2); }

/* LINKS */
a:hover { color: var(--brand-accent); }

/* HIDE OVERFLOW FROM MOBILE MENU SLIDE */
body.menu-open { overflow: hidden; }

/* ENSURE MINIMUM SPACING BETWEEN ELEMENTS */
.content-wrapper > * + * { margin-top: 0; }

/* ADDITIONAL FLEX CONTAINERS FROM HTML STRUCTURE */
.trust-badges, .tips-list, .reviews-list { display: flex; flex-direction: column; gap: var(--space-16); }

/* READABILITY IN TESTIMONIALS & REVIEWS */
.testimonials .testimonial-card p strong, .reviews-list .testimonial-card p strong { color: #0E1013; }

/* HERO CTA ON SMALL SCREENS */
@media (max-width: 480px) {
  .cta-row .button { flex: 1 1 auto; }
}

/* PRINTABLE HINTS */
@media print {
  header, footer, .mobile-menu, .cookie-banner { display: none !important; }
  body { background: #fff; color: #000; }
}

/* END OF FILE */