/* VinětkaExpert - Custom Styles */
:root {
  --primary: #be185d;
  --secondary: #fdf2f8;
  --accent: #0ea5e9;
  --dark: #831843;
  --text: #1f2937;
  --bg: #ffffff;
  --card-bg: #f9fafb;
  --border: #e5e7eb;
  --nav-bg: #ffffff;
  --footer-bg: #831843;
  --footer-text: #f3f4f6;
}
[data-theme="dark"] {
  --bg: #111827;
  --card-bg: #1f2937;
  --border: #374151;
  --text: #f9fafb;
  --nav-bg: #1f2937;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background:var(--bg); color:var(--text); line-height:1.6; transition: background 0.3s, color 0.3s; }
a { color:var(--primary); text-decoration:none; }
a:hover { text-decoration:underline; }
.container { max-width:1200px; margin:0 auto; padding:0 1rem; }
/* NAVBAR */
.navbar { background:var(--nav-bg); border-bottom:2px solid var(--primary); position:sticky; top:0; z-index:100; box-shadow:0 2px 8px rgba(0,0,0,0.08); }
.nav-inner { display:flex; align-items:center; gap:1.5rem; padding:0.75rem 1rem; flex-wrap:wrap; }
.brand-logo { display:flex; align-items:center; gap:0.5rem; font-weight:700; font-size:1.2rem; color:var(--primary); text-decoration:none; }
.brand-name { color:var(--primary); }
.nav-links { display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; margin-left:auto; }
.nav-link { padding:0.4rem 0.8rem; border-radius:6px; font-weight:500; color:var(--text); transition:background 0.2s; border:none; background:none; cursor:pointer; font-size:0.95rem; }
.nav-link:hover, .nav-link.active { background:var(--secondary); color:var(--primary); text-decoration:none; }
.nav-cat-link { display:block; padding:0.4rem 1rem; color:var(--text); font-size:0.9rem; }
.nav-cat-link:hover { background:var(--secondary); color:var(--primary); text-decoration:none; }
.dropdown { position:relative; }
.dropdown-menu { display:none; position:absolute; top:100%; left:0; background:var(--nav-bg); border:1px solid var(--border); border-radius:8px; min-width:200px; box-shadow:0 4px 16px rgba(0,0,0,0.12); z-index:200; }
.dropdown:hover .dropdown-menu { display:block; }
.dropdown-btn { background:none; border:none; cursor:pointer; }
.theme-toggle { background:none; border:1px solid var(--border); border-radius:6px; padding:0.3rem 0.6rem; cursor:pointer; font-size:1rem; margin-left:auto; }
.nav-toggle { display:none; background:none; border:none; cursor:pointer; flex-direction:column; gap:4px; padding:4px; }
.nav-toggle span { display:block; width:24px; height:2px; background:var(--text); border-radius:2px; }
/* HERO */
.hero { background:linear-gradient(135deg, #831843 0%, #be185d 100%); color:white; padding:4rem 1rem 3rem; }
.hero-inner { display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center; }
.hero-title { font-size:2.5rem; font-weight:800; line-height:1.2; margin-bottom:1rem; }
.hero-subtitle { font-size:1.1rem; opacity:0.9; margin-bottom:1.5rem; }
.hero-cta { display:inline-block; background:#0ea5e9; color:white; padding:0.75rem 1.5rem; border-radius:8px; font-weight:700; font-size:1rem; text-decoration:none; transition:opacity 0.2s; }
.hero-cta:hover { opacity:0.9; text-decoration:none; }
.hero-img { border-radius:12px; overflow:hidden; box-shadow:0 8px 32px rgba(0,0,0,0.3); }
.hero-img img { width:100%; height:280px; object-fit:cover; display:block; }
/* CATEGORIES BAR */
.categories-bar { background:var(--secondary); padding:1rem 0; border-bottom:1px solid var(--border); }
.categories-bar .container { display:flex; gap:0.75rem; flex-wrap:wrap; align-items:center; }
.cat-badge { background:var(--primary); color:white; padding:0.3rem 0.8rem; border-radius:20px; font-size:0.85rem; font-weight:600; text-decoration:none; transition:opacity 0.2s; }
.cat-badge:hover { opacity:0.85; text-decoration:none; }
/* ARTICLES GRID */
.section { padding:3rem 0; }
.section-title { font-size:1.8rem; font-weight:700; margin-bottom:0.5rem; color:var(--primary); }
.section-subtitle { color:#6b7280; margin-bottom:2rem; }
.articles-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:1.5rem; }
.article-card { background:var(--card-bg); border:1px solid var(--border); border-radius:12px; overflow:hidden; transition:transform 0.2s, box-shadow 0.2s; }
.article-card:hover { transform:translateY(-4px); box-shadow:0 8px 24px rgba(0,0,0,0.12); }
.card-img { width:100%; height:200px; object-fit:cover; display:block; }
.card-body { padding:1.25rem; }
.card-category { font-size:0.78rem; font-weight:700; color:var(--primary); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.5rem; }
.card-title { font-size:1.1rem; font-weight:700; margin-bottom:0.5rem; line-height:1.4; }
.card-excerpt { font-size:0.9rem; color:#6b7280; margin-bottom:1rem; }
.card-link { display:inline-block; color:var(--primary); font-weight:600; font-size:0.9rem; }
/* ARTICLE PAGE */
.article-header { background:linear-gradient(135deg, #831843 0%, #be185d 100%); color:white; padding:3rem 1rem 2rem; }
.article-header .article-category { font-size:0.85rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; opacity:0.8; margin-bottom:0.5rem; }
.article-header h1 { font-size:2rem; font-weight:800; line-height:1.3; margin-bottom:1rem; }
.article-header .article-excerpt { font-size:1.05rem; opacity:0.9; max-width:700px; }
.article-hero-img { width:100%; max-height:400px; object-fit:cover; display:block; }
.article-body { max-width:800px; margin:0 auto; padding:2rem 1rem; }
.article-body h2 { font-size:1.5rem; font-weight:700; color:var(--primary); margin:2rem 0 1rem; padding-bottom:0.5rem; border-bottom:2px solid var(--secondary); }
.article-body p { margin-bottom:1.2rem; font-size:1rem; line-height:1.8; }
.article-body blockquote { background:var(--secondary); border-left:4px solid var(--primary); padding:1rem 1.5rem; margin:1.5rem 0; border-radius:0 8px 8px 0; font-style:italic; font-size:1.05rem; }
/* CATEGORY HUB */
.category-hub { padding:3rem 0; }
.hub-header { background:linear-gradient(135deg, #831843 0%, #be185d 100%); color:white; padding:2.5rem 1rem; margin-bottom:2rem; border-radius:12px; }
.hub-header h1 { font-size:2rem; font-weight:800; }
.hub-header p { opacity:0.9; margin-top:0.5rem; }
/* FORMS */
.form-group { margin-bottom:1.25rem; }
.form-label { display:block; font-weight:600; margin-bottom:0.4rem; }
.form-input, .form-textarea { width:100%; padding:0.75rem; border:1px solid var(--border); border-radius:8px; font-size:1rem; background:var(--bg); color:var(--text); transition:border-color 0.2s; }
.form-input:focus, .form-textarea:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px #fdf2f8; }
.form-textarea { min-height:140px; resize:vertical; }
.btn-primary { background:var(--primary); color:white; padding:0.75rem 1.5rem; border:none; border-radius:8px; font-size:1rem; font-weight:700; cursor:pointer; transition:opacity 0.2s; }
.btn-primary:hover { opacity:0.9; }
/* CONTACT */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.contact-info h3 { font-size:1.3rem; font-weight:700; margin-bottom:1rem; color:var(--primary); }
.contact-info p { margin-bottom:0.75rem; }
.contact-info strong { color:var(--primary); }
/* ABOUT */
.about-content { max-width:800px; margin:0 auto; }
.about-content h2 { font-size:1.5rem; font-weight:700; color:var(--primary); margin:1.5rem 0 0.75rem; }
.about-content p { margin-bottom:1rem; line-height:1.8; }
/* COOKIE */
.cookie-banner { position:fixed; bottom:0; left:0; right:0; background:#831843; color:white; padding:1rem; z-index:1000; box-shadow:0 -4px 16px rgba(0,0,0,0.2); }
.cookie-content { max-width:1200px; margin:0 auto; display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.cookie-content p { flex:1; font-size:0.9rem; }
.cookie-content a { color:#0ea5e9; }
.cookie-buttons { display:flex; gap:0.5rem; }
.btn-accept { background:#0ea5e9; color:white; border:none; padding:0.5rem 1rem; border-radius:6px; cursor:pointer; font-weight:600; }
.btn-reject { background:transparent; color:white; border:1px solid white; padding:0.5rem 1rem; border-radius:6px; cursor:pointer; }
/* FOOTER */
.footer { background:var(--footer-bg); color:var(--footer-text); padding:3rem 0 0; }
.footer-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:2rem; padding-bottom:2rem; }
.footer-brand { display:flex; align-items:center; gap:0.5rem; font-size:1.1rem; margin-bottom:0.75rem; }
.footer-slogan { font-size:0.9rem; opacity:0.8; margin-bottom:0.5rem; }
.footer-company, .footer-address, .footer-phone { font-size:0.85rem; opacity:0.7; margin-bottom:0.25rem; }
.footer-email a { color:#0ea5e9; font-size:0.85rem; }
.footer h4 { font-size:1rem; font-weight:700; margin-bottom:0.75rem; color:#0ea5e9; }
.footer ul { list-style:none; }
.footer ul li { margin-bottom:0.4rem; }
.footer ul li a { color:var(--footer-text); opacity:0.8; font-size:0.9rem; }
.footer ul li a:hover { opacity:1; color:#0ea5e9; text-decoration:none; }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.1); padding:1rem 0; text-align:center; font-size:0.85rem; opacity:0.7; }
.footer-bottom a { color:#0ea5e9; }
/* PRIVACY / TERMS */
.legal-content { max-width:800px; margin:0 auto; padding:2rem 1rem; }
.legal-content h1 { font-size:2rem; font-weight:800; color:var(--primary); margin-bottom:1rem; }
.legal-content h2 { font-size:1.3rem; font-weight:700; color:var(--primary); margin:1.5rem 0 0.75rem; }
.legal-content p { margin-bottom:1rem; line-height:1.8; }
.legal-content ul { margin:0.5rem 0 1rem 1.5rem; }
.legal-content ul li { margin-bottom:0.4rem; }
/* BREADCRUMB */
.breadcrumb { padding:0.75rem 0; font-size:0.85rem; color:#6b7280; }
.breadcrumb a { color:var(--primary); }
.breadcrumb span { margin:0 0.4rem; }
/* RESPONSIVE */
@media (max-width: 768px) {
  .hero-inner { grid-template-columns:1fr; }
  .hero-img { display:none; }
  .hero-title { font-size:1.8rem; }
  .contact-grid { grid-template-columns:1fr; }
  .nav-links { display:none; width:100%; flex-direction:column; align-items:flex-start; background:var(--nav-bg); padding:1rem; border-top:1px solid var(--border); }
  .nav-links.open { display:flex; }
  .nav-toggle { display:flex; margin-left:auto; }
  .dropdown-menu { position:static; box-shadow:none; border:none; padding-left:1rem; }
  .dropdown:hover .dropdown-menu { display:none; }
  .dropdown.open .dropdown-menu { display:block; }
  .theme-toggle { margin-left:0; }
}