/* ===============================
   Nature_Organic x Brand Styles
   RentenKompass International
   Single style.css for all pages
   Mobile-first, Flexbox-only
   =============================== */

/* RESET & NORMALIZE */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding-left: 20px; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
:focus { outline: 2px solid #2E7D32; outline-offset: 2px; }

/* THEME TOKENS */
:root {
  /* Brand */
  --brand-primary: #0B3D91; /* calm deep blue for headings/links */
  --brand-secondary: #1D6F8A; /* supportive blue for accents */
  --brand-accent: #F5F7FA; /* light UI tint */
  /* Nature Organic Palette */
  --leaf: #2E7D32; /* primary green accent */
  --sage: #8BA889; /* muted green */
  --moss: #3F5D45; /* deep green/earth */
  --earth: #9E7E5B; /* clay brown accent */
  --sand: #F3EFE7; /* warm sand background */
  --stone: #6B6F70; /* neutral text gray */
  --ink: #1D1D1B;  /* main text */
  --white: #FFFFFF;
  --shadow: rgba(29,29,27,0.08);
  --shadow-strong: rgba(29,29,27,0.14);
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 24px;
  --radius-pill: 999px;
  --transition: 200ms ease;
}

/* BASE TYPOGRAPHY */
body {
  font-family: Arial, Helvetica, sans-serif; /* brand body */
  color: var(--ink);
  background: var(--sand);
  line-height: 1.6;
  font-size: 16px;
}
h1, h2, h3, h4 { font-family: Georgia, 'Times New Roman', serif; color: var(--brand-primary); line-height: 1.2; }
h1 { font-size: 32px; margin-bottom: 12px; }
h2 { font-size: 24px; margin-bottom: 12px; }
h3 { font-size: 20px; margin-bottom: 8px; }
h4 { font-size: 18px; margin-bottom: 8px; }
p { color: var(--ink); font-size: 16px; }
small { font-size: 14px; color: var(--stone); }

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

/* LAYOUT PRIMITIVES (Flexbox-only) */
.container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 1200px;
  padding: 0 20px;
  margin: 0 auto;
}
.content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
section { margin-bottom: 60px; padding: 30px 0; }

/* MANDATORY SPACING & ALIGNMENT CLASSES */
.section { margin-bottom: 60px; padding: 40px 20px; }
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; display: flex; flex-direction: column; }
.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 { background: var(--white); border-bottom: 1px solid rgba(0,0,0,0.06); position: sticky; top: 0; z-index: 1000; }
.header-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px; }
.header-bar img { height: 38px; }
.main-nav { display: none; align-items: center; gap: 16px; }
.main-nav a { padding: 8px 12px; border-radius: var(--radius-pill); color: var(--moss); }
.main-nav a:hover { background: var(--brand-accent); color: var(--brand-primary); }
.cta-buttons { display: flex; align-items: center; gap: 10px; }

/* BUTTONS */
.button-primary, .button-secondary, .newsletter-signup button, .mobile-menu-close, .mobile-menu-toggle, button, .cta-buttons a.button-primary, .cta-buttons a.button-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; cursor: pointer; text-align: center; padding: 12px 18px; border-radius: var(--radius-pill);
  transition: transform var(--transition), background var(--transition), color var(--transition), box-shadow var(--transition);
}
.button-primary { background: var(--leaf); color: var(--white); box-shadow: 0 4px 10px var(--shadow); }
.button-primary:hover { background: #2a6f2d; transform: translateY(-1px); box-shadow: 0 6px 14px var(--shadow-strong); }
.button-secondary { background: var(--brand-accent); color: var(--moss); border: 1px solid rgba(0,0,0,0.08); }
.button-secondary:hover { background: #E9F1EC; color: var(--leaf); border-color: rgba(46,125,50,0.3); }
button:disabled { opacity: 0.6; cursor: not-allowed; }

/* HERO */
.hero-section { position: relative; overflow: hidden; background: var(--brand-accent); border-bottom-left-radius: var(--radius-l); border-bottom-right-radius: var(--radius-l); }
.hero-section .container { padding-top: 24px; padding-bottom: 24px; }
.hero-section .content-wrapper { padding: 12px; background: var(--white); border-radius: var(--radius-l); box-shadow: 0 6px 20px var(--shadow); border-left: 6px solid var(--leaf); }
.hero-section::before { content: ""; position: absolute; inset: -60px auto auto -60px; width: 200px; height: 200px; border-radius: 50%; background: rgba(46,125,50,0.08); z-index: 0; }
.hero-section .content-wrapper > * { position: relative; z-index: 1; }
.tagline { color: var(--stone); }
.breadcrumb { display: flex; align-items: center; gap: 8px; color: var(--stone); font-size: 14px; }
.usp-bullets, .proof-points { display: flex; flex-direction: column; gap: 8px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.support-snippet { display: flex; align-items: center; gap: 10px; color: var(--moss); background: #EAF3EA; padding: 10px 12px; border-radius: var(--radius-s); }
.support-snippet img { width: 18px; height: 18px; }
.trust-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; color: var(--stone); }
.trust-badges img { width: 18px; height: 18px; }

/* FEATURES */
.feature-grid, .issue-grid { display: flex; flex-wrap: wrap; gap: 20px; }
.feature-block, .issue-block { flex: 1 1 260px; display: flex; flex-direction: column; gap: 10px; background: var(--white); border-radius: var(--radius-m); padding: 16px; box-shadow: 0 4px 12px var(--shadow); border: 1px solid rgba(0,0,0,0.06); }
.feature-block img, .issue-block img { width: 36px; height: 36px; }
.feature-block:hover, .issue-block:hover { transform: translateY(-2px); box-shadow: 0 8px 20px var(--shadow-strong); }

/* VALUE PROPOSITIONS */
.value-propositions ul { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }

/* SERVICES CARDS */
.service-cards, .service-cards-detailed, .testimonial-cases { display: flex; flex-wrap: wrap; gap: 20px; }
.service-card { flex: 1 1 260px; background: var(--white); border-radius: var(--radius-m); padding: 18px; border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 4px 12px var(--shadow); display: flex; flex-direction: column; gap: 10px; }
.service-card h3 { color: var(--moss); }
.service-card:hover { border-color: rgba(46,125,50,0.25); box-shadow: 0 8px 20px var(--shadow-strong); }

/* TABLES (comparisons/pricing) */
.service-comparison table, .responsibilities-matrix table, .pricing-table table { width: 100%; border-collapse: collapse; background: var(--white); border-radius: var(--radius-m); overflow: hidden; box-shadow: 0 4px 12px var(--shadow); }
.service-comparison th, .service-comparison td,
.responsibilities-matrix th, .responsibilities-matrix td,
.pricing-table th, .pricing-table td { padding: 12px 14px; border-bottom: 1px solid rgba(0,0,0,0.06); text-align: left; }
.service-comparison th, .responsibilities-matrix th, .pricing-table th { background: #E9F1EC; color: var(--moss); font-weight: 700; }
.service-comparison tr:nth-child(even) td, .responsibilities-matrix tr:nth-child(even) td, .pricing-table tr:nth-child(even) td { background: var(--brand-accent); }

/* PROCESS STEPS */
.step-list { display: flex; flex-direction: column; gap: 10px; counter-reset: steps; padding-left: 0; list-style: none; }
.step-list li { display: flex; align-items: flex-start; gap: 10px; background: var(--white); padding: 12px 14px; border: 1px solid rgba(0,0,0,0.06); border-radius: var(--radius-m); box-shadow: 0 4px 10px var(--shadow); }
.step-list li::before { counter-increment: steps; content: counter(steps); display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; border-radius: var(--radius-pill); background: var(--leaf); color: var(--white); font-weight: 700; margin-top: 2px; }

/* TRUST & METRICS */
.certifications-list, .press-mentions, .success-metrics { display: flex; flex-direction: column; gap: 10px; }
.certifications-list li, .press-mentions li { display: flex; align-items: center; gap: 10px; }
.certifications-list img { width: 20px; height: 20px; }
.success-metrics p strong { color: var(--moss); font-size: 20px; }

/* TESTIMONIALS (light background, dark text for readability) */
.testimonial-slider { display: flex; flex-wrap: nowrap; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
.testimonial-slider .testimonial-card { flex: 0 0 85%; scroll-snap-align: start; }
.testimonial-card { background: #FAFBF8; color: var(--ink); border: 1px solid rgba(0,0,0,0.08); border-left: 6px solid var(--sage); border-radius: var(--radius-m); box-shadow: 0 4px 12px var(--shadow); }
.testimonial-card span { color: var(--stone); font-size: 14px; }
.rating-summary { display: flex; align-items: center; gap: 8px; color: var(--moss); background: var(--brand-accent); padding: 10px 12px; border-radius: var(--radius-s); width: fit-content; }
.rating-summary img { width: 18px; height: 18px; }

/* FAQ */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-list details { background: var(--white); border: 1px solid rgba(0,0,0,0.06); border-radius: var(--radius-m); box-shadow: 0 4px 10px var(--shadow); overflow: hidden; }
.faq-list summary { cursor: pointer; padding: 14px 16px; font-weight: 700; color: var(--moss); }
.faq-list details > div { padding: 0 16px 16px 16px; color: var(--ink); }
.faq-list details[open] summary { background: #E9F1EC; }

/* INLINE PROMPTS & NOTES */
.contact-prompt-inline, .communication-cadence, .document-flow-map, .before-after-outcomes, .escalation-path-info, .deadlines-timeline, .resolution-outcomes-options, .appeal-deadlines-overview, .case-description-prompt, .privacy-consent-notice, .response-time-expectation, .emergency-contact-note, .payment-options, .refund-policy-notes, .fine-print, .whats-included, .package-comparison, .methodology-overview, .quality-assurance, .service-benefits, .target-groups, .service-scope-bullets, .kpis-list, .jurisdiction-coverage, .mission-statement, .vision-statement, .definitions-glossary, .documents-needed-list, .inclusions-list, .exclusions-list, .add-on-services, .guarantees-and-limits {
  display: flex; flex-direction: column; gap: 10px;
}
.compliance-note, .privacy-consent-notice p { display: flex; align-items: center; gap: 10px; color: var(--stone); }
.compliance-note img, .privacy-consent-notice img { width: 16px; height: 16px; }

/* COUNTRY TABS (cards) */
.country-tabs { display: flex; flex-wrap: wrap; gap: 16px; }
.country-tab { flex: 1 1 240px; background: var(--white); border: 1px solid rgba(0,0,0,0.06); border-radius: var(--radius-m); padding: 16px; box-shadow: 0 4px 12px var(--shadow); }
.country-tab h4 { color: var(--moss); }

/* OVERVIEW BOX SPLIT */
.overview-box { display: flex; flex-wrap: wrap; gap: 16px; }
.dr-system-overview, .cross-border-challenges { flex: 1 1 260px; background: #FAFBF8; border: 1px solid rgba(0,0,0,0.06); border-radius: var(--radius-m); padding: 16px; }

/* DOCUMENT CHECKLISTS */
.document-checklist, .risk-mitigation-points, .documents-checklist { display: flex; flex-direction: column; gap: 8px; }
.document-checklist ul, .risk-mitigation-points ul, .documents-checklist ul { display: flex; flex-direction: column; gap: 6px; }

/* CONTACT SECTIONS */
.contact-snippet .content-wrapper, section.contact-info .content-wrapper { background: var(--white); border-radius: var(--radius-m); padding: 16px; box-shadow: 0 4px 12px var(--shadow); border-left: 6px solid var(--earth); }
.contact-info { display: flex; flex-wrap: wrap; gap: 12px; }
.contact-info > div, .contact-info a { color: var(--moss); }
.preferred-language { display: flex; flex-direction: column; gap: 8px; }
.preferred-language ul { display: flex; flex-wrap: wrap; gap: 8px; }
.preferred-language li { background: var(--brand-accent); color: var(--moss); padding: 6px 10px; border-radius: var(--radius-pill); }
.callback-request { background: #EAF3EA; padding: 12px; border-radius: var(--radius-m); color: var(--moss); }

/* LEGAL CONTENT */
.legal { display: flex; flex-direction: column; gap: 14px; background: var(--white); border-radius: var(--radius-m); padding: 16px; box-shadow: 0 4px 12px var(--shadow); border: 1px solid rgba(0,0,0,0.06); }
.legal h2, .legal h3 { color: var(--moss); }

/* FOOTER */
footer { background: var(--moss); color: var(--white); padding: 24px 0; margin-top: 40px; }
footer .container { gap: 16px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 12px; }
.footer-nav a { color: #E3EFE5; padding: 6px 8px; border-radius: var(--radius-pill); }
.footer-nav a:hover { background: rgba(255,255,255,0.12); }
.legal-info { display: flex; flex-direction: column; gap: 6px; color: #E3EFE5; }
.newsletter-signup { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.newsletter-signup input[type="email"] { flex: 1 1 220px; min-width: 0; padding: 10px 12px; border-radius: var(--radius-pill); border: 1px solid rgba(255,255,255,0.4); background: rgba(255,255,255,0.1); color: var(--white); }
.newsletter-signup input::placeholder { color: rgba(255,255,255,0.8); }
.newsletter-signup button { background: var(--leaf); color: var(--white); }
.social-links { display: flex; align-items: center; gap: 10px; }
.social-links img { width: 24px; height: 24px; filter: brightness(0) invert(1); opacity: 0.9; transition: opacity var(--transition); }
.social-links a:hover img { opacity: 1; }

/* FORMS - GENERIC */
input[type="email"], input[type="text"], textarea { background: var(--white); border: 1px solid rgba(0,0,0,0.12); border-radius: var(--radius-s); padding: 10px 12px; color: var(--ink); }
input[type="email"]:focus, input[type="text"]:focus, textarea:focus { border-color: var(--leaf); box-shadow: 0 0 0 3px rgba(46,125,50,0.15); }

/* MOBILE NAVIGATION */
.mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--leaf); color: var(--white); border-radius: var(--radius-pill); margin: 10px 20px; }
.mobile-menu { position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; background: rgba(0,0,0,0.35); transform: translateX(100%); transition: transform 280ms ease; z-index: 2000; }
.mobile-menu .mobile-nav { margin-left: auto; width: 82%; max-width: 360px; background: var(--white); height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 20px; box-shadow: -6px 0 20px rgba(0,0,0,0.15); }
.mobile-menu .mobile-nav a { padding: 12px; border-radius: var(--radius-s); color: var(--moss); }
.mobile-menu .mobile-nav a:hover { background: #E9F1EC; color: var(--leaf); }
.mobile-menu-close { position: relative; align-self: flex-end; margin: 12px 16px; background: var(--white); color: var(--moss); border: 1px solid rgba(0,0,0,0.1); width: 36px; height: 36px; border-radius: var(--radius-pill); }
.mobile-menu.open { transform: translateX(0); }

/* Hide/Show desktop nav depending on viewport */
@media (min-width: 992px) {
  .main-nav { display: flex; }
  .mobile-menu-toggle { display: none; }
}

/* COOKIE CONSENT BANNER & MODAL */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; background: var(--white); color: var(--ink); border-top: 1px solid rgba(0,0,0,0.08); box-shadow: 0 -6px 20px var(--shadow); padding: 14px 16px; z-index: 2500; transform: translateY(110%); transition: transform 280ms ease; }
.cookie-banner.show { transform: translateY(0); }
.cookie-banner .cookie-text { flex: 1 1 260px; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-actions .accept { background: var(--leaf); color: var(--white); }
.cookie-actions .reject { background: var(--brand-accent); color: var(--moss); border: 1px solid rgba(0,0,0,0.1); }
.cookie-actions .settings { background: var(--earth); color: var(--white); }

.cookie-modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.45); z-index: 3000; }
.cookie-modal.open { display: flex; }
.cookie-dialog { display: flex; flex-direction: column; gap: 14px; width: 92%; max-width: 640px; background: var(--white); border-radius: var(--radius-l); box-shadow: 0 10px 30px rgba(0,0,0,0.25); padding: 18px; border-left: 6px solid var(--leaf); }
.cookie-categories { display: flex; flex-direction: column; gap: 10px; }
.cookie-category { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--brand-accent); border-radius: var(--radius-m); }
.cookie-category .toggle { display: inline-flex; width: 50px; height: 28px; border-radius: 20px; background: #D0D7D4; position: relative; }
.cookie-category .toggle::after { content: ""; width: 24px; height: 24px; border-radius: 50%; background: var(--white); position: absolute; left: 2px; top: 2px; transition: left var(--transition), background var(--transition); box-shadow: 0 2px 6px var(--shadow); }
.cookie-category .toggle.on { background: #BFD7C2; }
.cookie-category .toggle.on::after { left: 24px; background: var(--leaf); }
.cookie-dialog .dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* NEWSLETTER CTA IN FOOTER on small screens */
@media (max-width: 480px) {
  .newsletter-signup span { width: 100%; }
}

/* UTILITIES */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--radius-pill); background: #E9F1EC; color: var(--moss); }
.divider { height: 1px; background: rgba(0,0,0,0.08); width: 100%; }

/* ACCESSIBILITY & INTERACTIONS */
[role="button"], a.button-primary, a.button-secondary, button { transition: transform var(--transition); }
[role="button"]:active, a.button-primary:active, a.button-secondary:active, button:active { transform: translateY(1px); }

/* TABLE OF CONTENT STYLE FOR ANY UL/OL IN CONTENT */
.content-wrapper ul:not(.main-nav):not(.testimonial-slider):not(.social-links) { gap: 6px; }

/* RICH LIST STYLES */
.value-list ul, .expertise-points ul, .jurisdiction-coverage ul, .kpis-list ul, .timeline-of-milestones ul, .service-scope-bullets, .target-groups ul, .service-benefits ul, .methodology-overview ul, .quality-assurance ul, .package-comparison ul, .whats-included ul, .inclusions-list ul, .exclusions-list ul, .guarantees-and-limits ul, .documents-needed-list ul, .next-steps, .impact-explanations, .appeal-preparation-steps ol, .evidence-strategy-points ul {
  display: flex; flex-direction: column; gap: 8px; }

/* RATING/STAR inline blocks already defined via rating-summary */

/* THANK YOU PAGE SUPPORT SNIPPET */
.support-contact-snippet { display: flex; flex-direction: column; gap: 6px; background: var(--white); border-radius: var(--radius-m); padding: 12px; border: 1px solid rgba(0,0,0,0.06); }
.support-contact-snippet p { display: flex; align-items: center; gap: 8px; }
.support-contact-snippet img { width: 18px; height: 18px; }

/* HEADER RESPONSIVE ALIGNMENT */
@media (min-width: 768px) {
  .header-bar { padding: 14px 20px; }
}

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

/* DESKTOP ENHANCEMENTS */
@media (min-width: 768px) {
  h1 { font-size: 40px; }
  h2 { font-size: 28px; }
  .hero-section .container { padding-top: 36px; padding-bottom: 36px; }
  .testimonial-slider .testimonial-card { flex-basis: 46%; }
}
@media (min-width: 1200px) {
  h1 { font-size: 48px; }
  h2 { font-size: 32px; }
  .hero-section .content-wrapper { padding: 24px; }
}

/* PREVENT OVERLAPPING: ensure spacing around cards/sections */
section .service-card, section .feature-block, section .issue-block, section .testimonial-card { margin-bottom: 20px; }

/* ORGANIC BORDERS ON HOVER FOR LINKS IN TEXT */
.content-wrapper a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* BREADCRUMB MICRO-UI */
.breadcrumb::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--leaf); display: inline-block; }

/* HEADER MENU ALIGNMENT ON WIDE SCREENS */
@media (min-width: 1200px) {
  .header-bar { gap: 24px; }
  .main-nav { gap: 20px; }
  .cta-buttons { gap: 14px; }
}

/* GENERAL CARDS (fallback for any .card) */
.card { background: var(--white); border: 1px solid rgba(0,0,0,0.06); border-radius: var(--radius-m); box-shadow: 0 4px 12px var(--shadow); padding: 16px; }
.card:hover { box-shadow: 0 8px 20px var(--shadow-strong); }

/* RICH ADDITIONAL BLOCKS */
.timeline-of-milestones { display: flex; flex-direction: column; gap: 10px; background: #FAFBF8; padding: 12px; border-radius: var(--radius-m); border: 1px solid rgba(0,0,0,0.06); }

/* ADDRESS styling */
address { font-style: normal; color: var(--ink); }

/* PRINT BASIC TWEAKS */
@media print {
  .mobile-menu-toggle, .mobile-menu, .cookie-banner, .cookie-modal { display: none !important; }
  a { text-decoration: underline; }
}

/* END OF FILE */