/* =========================================================
   ZnovuDomov – style.css
   Nature_Organic theme: earth tones, organic shapes, natural textures, green accents
   Mobile-first, flexbox-only layouts. No CSS Grid or Columns used.
   ========================================================= */

/* ------------ CSS Reset & Normalize (lightweight) ------------ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0 0 0 1rem; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }

/* ------------ Design Tokens ------------ */
:root {
  /* Brand */
  --color-primary: #263238; /* ink/blue-grey */
  --color-secondary: #5B8A72; /* moss green */
  --color-accent: #F5F0E6; /* warm sand */

  /* Nature_organic extended palette */
  --color-forest: #3E5C4B; /* deeper green */
  --color-moss: #6C8F7A; /* soft green */
  --color-clay: #8D6E63; /* earthy brown */
  --color-soil: #5C4033; /* deep brown */
  --color-ivory: #FCFAF6; /* light background */
  --color-leaf: #7BAE7F; /* accent green */
  --color-cloud: #EFF2EE; /* pale greenish grey */
  --color-stone: #D9D6CF; /* stone grey-beige */
  --color-white: #FFFFFF;
  --color-ink: #263238; /* alias */

  /* Text */
  --text-primary: #263238; /* dark on light */
  --text-secondary: #3E5C4B; /* forest */
  --text-muted: #4A5852;

  /* Effects */
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 22px;
  --radius-pill: 999px;
  --shadow-s: 0 2px 6px rgba(38, 50, 56, 0.08);
  --shadow-m: 0 6px 18px rgba(38, 50, 56, 0.12);
  --shadow-l: 0 14px 32px rgba(38, 50, 56, 0.14);

  /* Spacing scale */
  --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-20: 20px;
  --space-24: 24px; --space-30: 30px; --space-32: 32px; --space-40: 40px; --space-48: 48px; --space-60: 60px;

  /* Transitions */
  --transition: 220ms ease;
}

/* Font stacks */
body { font-family: Verdana, "Segoe UI", Tahoma, sans-serif; }
.display-font { font-family: "Trebuchet MS", Verdana, system-ui, -apple-system, sans-serif; }

/* ------------ Base ------------ */
body {
  background: var(--color-ivory);
  color: var(--text-primary);
  line-height: 1.65;
  font-size: 16px;
}

h1, h2, h3 { font-family: "Trebuchet MS", Verdana, sans-serif; color: var(--text-secondary); letter-spacing: 0.2px; }
h1 { font-size: 32px; line-height: 1.2; margin-bottom: var(--space-16); }
h2 { font-size: 24px; line-height: 1.3; margin-bottom: var(--space-16); }
h3 { font-size: 18px; line-height: 1.35; margin-bottom: var(--space-8); }
p, li { font-size: 16px; color: var(--text-primary); }
strong { color: var(--text-secondary); font-weight: 700; }

/* Accessible focus */
:focus { outline: none; }
:focus-visible { outline: 2px dashed var(--color-secondary); outline-offset: 2px; }

/* Links */
a { color: var(--color-forest); }
a:hover { color: var(--color-secondary); }

/* ------------ Layout Utilities (Flexbox-only) ------------ */
.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--space-20);
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}
.content-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}
.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; }

/* Generic helpers */
.stack-s { display:flex; flex-direction:column; gap: var(--space-12); }
.stack-m { display:flex; flex-direction:column; gap: var(--space-20); }
.stack-l { display:flex; flex-direction:column; gap: var(--space-32); }
.row { display:flex; align-items:center; gap: var(--space-16); flex-wrap: wrap; }
.center { display:flex; align-items:center; justify-content:center; }

/* ------------ Header & Navigation ------------ */
header { position: sticky; top: 0; z-index: 50; background: var(--color-white); box-shadow: var(--shadow-s); }
header .content-wrapper { flex-direction: row; align-items: center; justify-content: space-between; }
.logo img { height: 38px; width: auto; }

.main-nav { display: none; align-items: center; gap: var(--space-16); }
.main-nav a {
  padding: 10px 12px;
  border-radius: var(--radius-pill);
  color: var(--color-primary);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.main-nav a:hover { background: var(--color-accent); color: var(--color-forest); transform: translateY(-1px); }

/* Primary Button */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 18px; border-radius: var(--radius-pill); border: 2px solid transparent; cursor: pointer; transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition); }
.btn-primary { background: var(--color-secondary); color: #fff; box-shadow: var(--shadow-s); }
.btn-primary:hover { background: var(--color-forest); transform: translateY(-1px); box-shadow: var(--shadow-m); }
.btn-primary:active { transform: translateY(0); box-shadow: var(--shadow-s); }

.link-secondary { color: var(--color-forest); border-bottom: 2px solid rgba(107, 143, 122, 0.35); padding-bottom: 2px; transition: color var(--transition), border-color var(--transition); }
.link-secondary:hover { color: var(--color-secondary); border-color: var(--color-secondary); }

/* Mobile menu toggle */
.mobile-menu-toggle {
  display: inline-flex;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border: 2px solid var(--color-secondary);
  color: var(--color-secondary);
  background: transparent;
  border-radius: 10px;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.mobile-menu-toggle:hover { background: var(--color-accent); color: var(--color-forest); transform: translateY(-1px); }

/* Mobile full-screen menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 1000; /* covers screen */
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--space-20);
  background: rgba(38, 50, 56, 0.15);
  backdrop-filter: blur(2px);
  transform: translateX(100%);
  transition: transform 300ms ease;
}
.mobile-menu .mobile-nav {
  background: var(--color-white);
  margin-left: auto; /* slide from right */
  width: 85%; height: 100%;
  display: flex; flex-direction: column; gap: 6px; padding: var(--space-32) var(--space-20);
  box-shadow: var(--shadow-l);
  border-top-left-radius: 18px; border-bottom-left-radius: 18px;
}
.mobile-menu .mobile-nav a { padding: 14px 10px; border-radius: var(--radius-s); color: var(--color-primary); font-size: 18px; }
.mobile-menu .mobile-nav a:hover { background: var(--color-accent); color: var(--color-forest); }
.mobile-menu .mobile-menu-close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 8px; background: var(--color-white); color: var(--color-secondary); border: 2px solid var(--color-secondary); display: flex; align-items: center; justify-content: center; }
.mobile-menu.active { transform: translateX(0); }

body.menu-open { overflow: hidden; }

/* Desktop nav visibility */
@media (min-width: 992px) {
  .main-nav { display: flex; }
  .mobile-menu-toggle { display: none; }
}

/* ------------ Hero ------------ */
.hero { position: relative; background: var(--color-accent); }
.hero .container { position: relative; }
.hero .container::before {
  /* organic pebble shape (decorative) */
  content: "";
  position: absolute; z-index: 0; left: -30px; top: -30px;
  width: 200px; height: 200px;
  background: var(--color-cloud);
  border-radius: 45% 55% 50% 50% / 60% 45% 55% 40%;
  box-shadow: var(--shadow-s);
}
.hero .content-wrapper { position: relative; z-index: 1; padding: var(--space-32) 0; }
.hero p { color: var(--text-primary); max-width: 720px; }
.cta-group { display: flex; flex-wrap: wrap; gap: var(--space-12); align-items: center; }

/* ------------ Trust badges & Metrics ------------ */
.trust-badges { display: flex; flex-wrap: wrap; gap: var(--space-12); align-items: center; }
.badge { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--color-white); border: 1px solid var(--color-stone); border-radius: 22px; color: var(--color-primary); box-shadow: var(--shadow-s); }
.badge img { width: 18px; height: 18px; }

.metrics { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.metric { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--radius-pill); background: var(--color-cloud); color: var(--color-forest); font-weight: 700; }
.metric strong { color: var(--color-forest); font-size: 18px; }

/* ------------ Feature grid & Service list ------------ */
.feature-grid, .service-list, .pricing-tables, .faq-list { display: flex; flex-wrap: wrap; gap: var(--space-20); }
.feature, .service-card, .pricing-item, .faq-item, .case-study {
  flex: 1 1 260px;
  background: var(--color-white);
  border: 1px solid rgba(91, 138, 114, 0.22);
  border-radius: var(--radius-l);
  padding: var(--space-20);
  box-shadow: var(--shadow-s);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.feature:hover, .service-card:hover, .pricing-item:hover, .faq-item:hover, .case-study:hover { transform: translateY(-3px); box-shadow: var(--shadow-m); }

/* ------------ Steps timeline (ol) ------------ */
.steps-timeline { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-16); }
.steps-timeline li {
  position: relative;
  padding: 12px 12px 12px 38px;
  background: var(--color-white);
  border: 1px solid var(--color-stone);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-s);
}
.steps-timeline li::before {
  content: ""; position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; border-radius: 50%; background: var(--color-secondary); box-shadow: 0 0 0 4px rgba(91,138,114,0.18);
}

.note, .disclaimer { color: var(--text-muted); background: var(--color-ivory); padding: 12px 14px; border-left: 4px solid var(--color-secondary); border-radius: var(--radius-s); }

/* ------------ Testimonials (readable, high contrast) ------------ */
.testimonial-card {
  background: var(--color-white);
  color: var(--text-primary);
  border: 1px solid var(--color-stone);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-s);
}
.testimonial-card p { font-size: 16px; }
.testimonial-card .person { color: var(--color-forest); font-weight: 700; }
.rating-summary {
  display: inline-flex; align-items: center; gap: 10px; margin-top: var(--space-12);
  background: var(--color-cloud); color: var(--color-forest);
  padding: 10px 14px; border-radius: var(--radius-pill);
}
.rating-summary img { width: 18px; height: 18px; }

/* ------------ Lists styled to match theme ------------ */
.guarantees, .inclusions, .exclusions, .upgrades, .value-tips, .required-inputs, .certificate-list, .quality-standards, .roles-overview, .value-grid {
  display: flex; flex-wrap: wrap; gap: var(--space-12);
  list-style: none; padding-left: 0;
}
.guarantees li, .inclusions li, .exclusions li, .upgrades li, .value-tips li, .required-inputs li, .certificate-list li, .quality-standards li, .roles-overview li, .value-grid li {
  flex: 1 1 260px;
  background: var(--color-white);
  border: 1px solid var(--color-stone);
  border-radius: var(--radius-m);
  padding: 12px 14px;
  box-shadow: var(--shadow-s);
}

/* ------------ Mini pricing & general CTAs ------------ */
.mini-pricing { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.mini-pricing > div { flex: 1 1 260px; background: var(--color-white); border: 1px solid var(--color-stone); border-radius: var(--radius-m); padding: 12px 14px; }

.cta { display: flex; align-items: center; justify-content: center; margin-top: var(--space-16); }

/* ------------ Case studies ------------ */
.case-study h3 { margin-bottom: 6px; }
.result-metrics { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding-left: 0; margin-top: 8px; }
.result-metrics li { background: var(--color-cloud); color: var(--color-forest); border-radius: var(--radius-pill); padding: 6px 10px; }

/* ------------ Contact details & Map placeholder ------------ */
.contact-details { display: flex; flex-direction: column; gap: 10px; }
.contact-details p { display: flex; align-items: center; gap: 10px; }
.contact-details img { width: 18px; height: 18px; }
.map-placeholder { display: flex; align-items: center; justify-content: center; text-align: center; border: 2px dashed var(--color-stone); border-radius: var(--radius-l); padding: var(--space-20); background: var(--color-cloud); color: var(--text-muted); min-height: 140px; }

/* ------------ Footer ------------ */
footer { background: var(--color-primary); color: #E7ECEA; padding: var(--space-32) 0; margin-top: var(--space-40); }
footer a { color: #E7ECEA; opacity: 0.95; }
footer a:hover { color: #fff; }
footer .content-wrapper { flex-direction: column; gap: var(--space-20); }
.brand-signature { display: flex; align-items: center; gap: 12px; }
.brand-signature img { width: 28px; height: 28px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 12px; }
.footer-nav a { padding: 6px 10px; border-radius: var(--radius-pill); transition: background var(--transition); }
.footer-nav a:hover { background: rgba(255,255,255,0.08); }
.footer-contact { display: flex; flex-wrap: wrap; gap: 10px; opacity: 0.95; }

/* ------------ Page-level section styling ------------ */
main section { margin-bottom: var(--space-60); padding: var(--space-40) 0; }

/* ------------ Pricing tables specifics ------------ */
.pricing-item h3 { color: var(--color-forest); }
.pricing-item p:first-of-type { font-weight: 700; color: var(--color-forest); }

/* ------------ FAQ items ------------ */
.faq-item h3 { color: var(--color-forest); }

/* ------------ Brand personality micro-interactions ------------ */
.feature, .service-card, .pricing-item, .faq-item, .case-study, .testimonial-card { will-change: transform; }

/* ------------ Mobile-first responsive enhancements ------------ */
@media (min-width: 600px) {
  h1 { font-size: 38px; }
  h2 { font-size: 28px; }
}

@media (min-width: 768px) {
  .content-wrapper { gap: var(--space-24); }
  .text-image-section { flex-direction: row; }
  .hero .content-wrapper { padding: var(--space-48) 0; }
  .feature, .service-card, .pricing-item, .faq-item, .case-study { padding: var(--space-24); }
}

@media (min-width: 992px) {
  h1 { font-size: 44px; }
  h2 { font-size: 32px; }

  header .content-wrapper { gap: var(--space-20); }
  .trust-badges { gap: var(--space-16); }
  .feature-grid, .service-list, .pricing-tables { gap: var(--space-24); }
}

/* ------------ Buttons - alt styles (for cookie & actions) ------------ */
.btn-outline { background: transparent; border-color: var(--color-secondary); color: var(--color-secondary); }
.btn-outline:hover { background: var(--color-accent); }
.btn-neutral { background: var(--color-primary); color: #fff; }
.btn-neutral:hover { background: #1b252a; }

/* ------------ Cookie Consent Banner ------------ */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
  display: none; /* toggled by .show */
  background: var(--color-white);
  border-top: 1px solid var(--color-stone);
  box-shadow: 0 -8px 24px rgba(38,50,56,0.12);
}
.cookie-banner.show { display: flex; }
.cookie-banner .container { flex-direction: column; gap: var(--space-12); padding: var(--space-16) var(--space-20); }
.cookie-banner .cookie-content { display: flex; flex-direction: column; gap: var(--space-12); }
.cookie-banner .cookie-actions { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.cookie-banner .btn-accept { background: var(--color-secondary); color: #fff; }
.cookie-banner .btn-accept:hover { background: var(--color-forest); }
.cookie-banner .btn-reject { background: var(--color-primary); color: #fff; }
.cookie-banner .btn-reject:hover { background: #1b252a; }
.cookie-banner .btn-settings { border: 2px solid var(--color-secondary); color: var(--color-secondary); background: transparent; }
.cookie-banner .btn-settings:hover { background: var(--color-accent); }

/* Cookie Preferences Modal */
.cookie-modal {
  position: fixed; inset: 0; z-index: 1300; display: none;
  align-items: center; justify-content: center; padding: var(--space-20);
  background: rgba(38,50,56,0.45);
}
.cookie-modal.show { display: flex; }
.cookie-modal .cookie-modal-content {
  width: 100%; max-width: 680px; background: var(--color-white);
  border-radius: var(--radius-l);
  border: 1px solid var(--color-stone);
  box-shadow: var(--shadow-l);
  display: flex; flex-direction: column; gap: var(--space-16);
  padding: var(--space-24);
}
.cookie-modal .cookie-modal-header { display: flex; align-items: center; justify-content: space-between; }
.cookie-modal .cookie-modal-body { display: flex; flex-direction: column; gap: var(--space-12); }
.cookie-modal .cookie-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); padding: 10px 0; border-bottom: 1px solid var(--color-stone); }
.cookie-modal .cookie-row:last-child { border-bottom: 0; }
.cookie-modal .cookie-actions { display: flex; flex-wrap: wrap; gap: var(--space-12); justify-content: flex-end; }

/* ------------ Accessibility & Forms (generic) ------------ */
label { display: inline-flex; align-items: center; gap: 8px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--color-secondary); }

/* ------------ Organic decorative accents for sections ------------ */
main section .container::after {
  content: ""; position: absolute; /* decorative only */
  width: 120px; height: 120px; border-radius: 55% 45% 60% 40% / 50% 60% 40% 50%;
  background: rgba(123, 174, 127, 0.08);
  filter: blur(0.2px);
  box-shadow: var(--shadow-s);
  right: -40px; bottom: -40px;
  z-index: 0;
}
main section .container { position: relative; z-index: 1; }

/* Ensure gaps between all cards/sections */
section > .container > .content-wrapper > * + * { margin-top: 20px; }

/* ------------ Print friendly basics ------------ */
@media print {
  header, .mobile-menu, .cookie-banner, .cookie-modal { display: none !important; }
  a { text-decoration: underline; }
}

/* ------------ Desktop refinements ------------ */
@media (min-width: 1100px) {
  .hero .container::before { left: -50px; top: -50px; width: 260px; height: 260px; }
}

/* ------------ Additional classes present in HTML (styling refinements) ------------ */
.brand-signature span { font-size: 14px; opacity: 0.95; }
.privacy-note { font-size: 14px; color: #2f3b37; background: var(--color-accent); padding: 10px 12px; border-left: 4px solid var(--color-secondary); border-radius: var(--radius-s); }

/* Ensure testimonial and review sections maintain dark text on light background */
.testimonial-card, .rating-summary, .testimonial-card * { color: var(--text-primary); }

/* ---------- End of stylesheet ---------- */