/* =============================
   Dynax Light Nieruchomości — style.css
   Geometric Structured Theme (Flex-only layouts)
   ============================= */

/* ===== CSS RESET & BASELINE ===== */
* { box-sizing: border-box; }
html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: transparent; font: inherit; }
ul, ol { list-style: none; }

/* ===== BRAND TOKENS ===== */
:root {
  --color-primary: #102A43; /* deep navy */
  --color-secondary: #C9A227; /* gold */
  --color-accent: #F4F2EC; /* light parchment */
  --color-ink: #0C2233; /* darker ink */
  --color-muted: #627D98; /* cool grey */
  --color-border: #D9E2EC; /* light border */
  --color-surface: #FFFFFF; /* white */
  --shadow-sm: 0 2px 10px rgba(16,42,67,0.08);
  --shadow-md: 0 8px 24px rgba(16,42,67,0.12);
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --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-60: 60px;
}

/* ===== TYPOGRAPHY ===== */
html { font-size: 16px; }
body {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--color-ink);
  background: var(--color-surface);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; color: var(--color-primary); }
h1 { font-size: 2rem; line-height: 1.2; letter-spacing: 0.5px; text-transform: none; }
h2 { font-size: 1.5rem; line-height: 1.25; letter-spacing: 1px; text-transform: uppercase; }
h3 { font-size: 1.125rem; line-height: 1.3; letter-spacing: 0.5px; text-transform: uppercase; }
p, li, td, th, span { font-size: 1rem; color: var(--color-ink); }
.small { font-size: 0.875rem; color: var(--color-muted); }

/* Geometric heading accent */
h2 { position: relative; padding-top: var(--space-12); }
h2:before {
  content: ""; position: relative; display: inline-block; width: 28px; height: 4px; background: var(--color-secondary);
  margin-right: var(--space-12); vertical-align: middle; transform: skewX(-20deg);
}

/* ===== LAYOUT FOUNDATIONS (Flex-only) ===== */
section { margin-bottom: var(--space-60); padding: var(--space-40) var(--space-20); background: transparent; }
.container {
  width: 100%; max-width: 1180px; margin: 0 auto; 
  display: flex; flex-direction: column; gap: var(--space-24);
}
.content-wrapper {
  display: flex; flex-direction: column; gap: var(--space-20);
}

/* Mandatory spacing & alignment patterns (also available as utilities) */
.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 & NAV ===== */
header { position: sticky; top: 0; z-index: 1000; background: var(--color-surface); box-shadow: var(--shadow-sm); }
header > nav { 
  display: flex; align-items: center; justify-content: flex-start; gap: var(--space-16);
  padding: var(--space-12) var(--space-20);
}
header nav a { color: var(--color-primary); font-weight: 600; padding: 10px 12px; border-radius: var(--radius-xs); transition: color .2s ease, background-color .2s ease; }
header nav a:hover, header nav a:focus-visible { color: var(--color-secondary); background: rgba(201,162,39,0.1); outline: none; }
header nav img { height: 34px; margin-right: var(--space-8); }

/* CTA group */
.cta-group { display: flex; gap: var(--space-12); align-items: center; padding: 0 var(--space-20) var(--space-12); }

/* Header layout stack on mobile */
header { display: flex; flex-direction: column; gap: 0; }

/* ===== BUTTONS ===== */
.btn { 
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 18px; border-radius: 0; /* angular */
  border: 2px solid transparent; text-transform: uppercase; letter-spacing: .8px; font-weight: 700;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn-primary { background: var(--color-secondary); color: #0D0D0D; border-color: var(--color-secondary); }
.btn-primary:hover, .btn-primary:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-md); background: #B8901F; border-color: #B8901F; color: #0B0B0B; }
.btn-secondary { background: var(--color-surface); color: var(--color-primary); border-color: var(--color-primary); }
.btn-secondary:hover, .btn-secondary:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-md); background: var(--color-primary); color: #fff; }

/* ===== HERO & COMMON ELEMENTS ===== */
.kpi-badges, .trust-logos, .security-badges, .rating-summary { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-12); }
.kpi-badges span, .security-badges span, .price-guarantee-badge {
  display: inline-flex; align-items: center; gap: var(--space-8);
  background: var(--color-accent); color: var(--color-ink);
  padding: 8px 12px; border: 1px solid var(--color-border); border-radius: 0; box-shadow: var(--shadow-sm);
}
.kpi-badges img, .security-badges img { width: 18px; height: 18px; }
.trust-logos img { height: 28px; filter: grayscale(20%); opacity: 0.9; }

/* ===== FEATURE / SERVICE / DASHBOARD LISTS ===== */
.feature-grid, .service-cards, .dashboard-features, .kpi-grid, .pricing-table, .case-study-cards, .testimonial-cards, .metric-grid, .team-bio-snippets, .testimonial-quotes {
  display: flex; flex-wrap: wrap; gap: var(--space-20);
}
.feature-grid > div, .service-cards > div, .dashboard-features > div, .kpi-grid > div, .pricing-table > div, .case-study-cards > div, .testimonial-cards > .testimonial-card, .metric-grid > div, .team-bio-snippets > div, .testimonial-quotes > .testimonial-card {
  flex: 1 1 100%;
  border: 1px solid var(--color-border); background: var(--color-surface);
  padding: var(--space-20); box-shadow: var(--shadow-sm); border-radius: 0; position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
.feature-grid > div:hover, .service-cards > div:hover, .dashboard-features > div:hover, .case-study-cards > div:hover, .team-bio-snippets > div:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.feature-grid img, .service-cards img, .dashboard-features img { width: 32px; height: 32px; }

/* KPI cards typographic hierarchy */
.kpi-grid h3 { font-size: 1.75rem; color: var(--color-primary); }
.kpi-grid p { color: var(--color-muted); }

/* ===== TESTIMONIALS ===== */
.testimonial-slider {
  display: flex; flex-wrap: nowrap; gap: var(--space-20); overflow-x: auto; padding-bottom: var(--space-12);
  scroll-snap-type: x mandatory;
}
.testimonial-slider .testimonial-card, .testimonial-cards .testimonial-card, .testimonial-quotes .testimonial-card {
  background: #FAFAF7; color: #0B1F2E; border: 1px solid var(--color-border); box-shadow: var(--shadow-sm);
  scroll-snap-align: start;
}
.testimonial-card p { color: #0B1F2E; }
.testimonial-card span { color: var(--color-primary); }
.rating-summary span { font-weight: 700; color: var(--color-primary); }

/* ===== LISTS & UTILITY BLOCKS ===== */
.benefit-list, .service-inclusions-list, .add-on-services ul, .process-overview ul, .process-steps ol, .sla-highlights ul, .screening-criteria-list, .insurance-options ul, .legal-framework-points ul, .reporting-dashboard-features ul, .expense-tracking-points ul, .before-after-kpis ul, .faq-accordion, .policy-summaries ul, .response-times-info, .support-channels-list ul, .service-area-list ul, .meeting-options ul, .mandate-models-list ul, .investment-thesis-points ul, .risk-matrix ul, .checklist ul, .revenue-management-points ul, .capex-opex-plan ul, .operational-kpis ul, .dashboard-modules ul, .esg-metrics ul, .sample-kpi-list ul, .result-highlights ul, .property-types-list, .framework-points, .quality-assurance-list ul, .values-list ul, .vision-points ul, .certifications-list ul, .industry-memberships ul, .timeline ul, .milestones ul, .growth-kpis ul, .next-steps-list, .cookie-categories-list, .cookies-list-with-lifespan, .definitions-list ul, .user-rights-obligations ul, .liability-clauses ul, .data-scope-list ul, .legal-basis-points ul, .retention-periods ul, .data-subject-rights-list ul, .data-processing-purposes ul, .categories-of-data ul, .recipients-list ul, .rights-and-requests-process ul, .billing-faq ul, .add-ons-list ul, .one-time-fees ul, .support-levels ul, .inclusions-checklist, .volume-discounts-info ul {
  display: flex; flex-direction: column; gap: var(--space-12);
}
.benefit-list li, .inclusions-checklist li, .framework-points li, .property-types-list li { padding-left: 14px; border-left: 3px solid var(--color-secondary); }

/* ===== CONTACT INFO CARD ===== */
.contact-info-card { display: flex; flex-wrap: wrap; gap: var(--space-12); border: 1px solid var(--color-border); padding: var(--space-20); box-shadow: var(--shadow-sm); }
.contact-info-card > div { display: inline-flex; align-items: center; gap: var(--space-8); padding: 10px 12px; background: var(--color-accent); border: 1px solid var(--color-border); }
.contact-info-card img { width: 18px; height: 18px; }

/* ===== TABLES ===== */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; border: 1px solid var(--color-border); padding: 12px; }
th { background: var(--color-accent); font-weight: 700; color: var(--color-primary); }
.feature-comparison-table table tr:nth-child(even), .purposes-table table tr:nth-child(even) { background: #FBFBF8; }

/* ===== CTA GROUPS ===== */
.cta-buttons-group { display: flex; flex-wrap: wrap; gap: var(--space-12); }

/* ===== TAGS / BADGES ===== */
.sector-tags { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.sector-tags span { background: var(--color-surface); border: 2px solid var(--color-primary); color: var(--color-primary); padding: 6px 10px; text-transform: uppercase; letter-spacing: .6px; }

/* ===== COMPLIANCE BADGES ===== */
.compliance-badges { display: flex; align-items: center; gap: var(--space-12); }
.compliance-badges img { width: 22px; height: 22px; }
.compliance-badges span { font-weight: 700; color: var(--color-primary); }

/* ===== FOOTER ===== */
footer { background: var(--color-primary); color: #E8EDF2; }
footer a { color: #E8EDF2; }
footer section { padding-top: var(--space-40); padding-bottom: var(--space-40); }
footer .content-wrapper { display: flex; flex-direction: column; gap: var(--space-20); }
footer nav { display: flex; flex-wrap: wrap; gap: var(--space-12); }
footer .legal-links { display: flex; flex-wrap: wrap; gap: var(--space-12); }
footer .contact-info-footer { display: flex; flex-direction: column; gap: var(--space-8); }
footer img { height: 34px; filter: brightness(0) invert(1); }

/* ===== MOBILE NAVIGATION ===== */
.mobile-menu-toggle { 
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 8px 20px 16px; 
  color: var(--color-primary); border: 2px solid var(--color-primary);
}
.mobile-menu { 
  position: fixed; top: 0; right: 0; bottom: 0; width: 88%; max-width: 360px; background: var(--color-surface); 
  box-shadow: -8px 0 24px rgba(16,42,67,0.15); transform: translateX(100%); transition: transform .35s ease; z-index: 2000;
  display: flex; flex-direction: column; gap: var(--space-20); padding: var(--space-20);
}
.mobile-menu.open, .mobile-menu.active { transform: translateX(0); }
.mobile-menu-close { align-self: flex-end; width: 40px; height: 40px; border: 2px solid var(--color-primary); color: var(--color-primary); display: inline-flex; align-items: center; justify-content: center; }
.mobile-nav { display: flex; flex-direction: column; gap: var(--space-12); }
.mobile-nav a { padding: 12px; border: 1px solid var(--color-border); border-left: 4px solid var(--color-secondary); background: var(--color-accent); font-weight: 700; color: var(--color-primary); }

/* Hide desktop nav on mobile, show burger */
@media (max-width: 768px) {
  header > nav { display: none; }
  .cta-group { display: none; }
  .mobile-menu-toggle { display: inline-flex; }
}

/* Desktop: show nav, place header items inline */
@media (min-width: 769px) {
  header { flex-direction: row; align-items: center; justify-content: space-between; }
  header > nav { display: flex; }
  .cta-group { display: flex; }
  .mobile-menu-toggle { display: none; }
}

/* ===== COOKIE CONSENT BANNER & MODAL ===== */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 3000; 
  background: var(--color-primary); color: #FFFFFF; 
  display: flex; flex-direction: column; gap: var(--space-16);
  padding: var(--space-16) var(--space-20); box-shadow: 0 -8px 24px rgba(16,42,67,0.2);
  transform: translateY(100%); transition: transform .35s ease;
}
.cookie-banner.show { transform: translateY(0); }
.cookie-banner .cookie-content { display: flex; flex-direction: column; gap: var(--space-12); }
.cookie-buttons { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.cookie-buttons .btn { border-radius: 0; }
.cookie-buttons .btn-accept { background: var(--color-secondary); color: #0D0D0D; border-color: var(--color-secondary); }
.cookie-buttons .btn-reject { background: #FFFFFF; color: var(--color-primary); border: 2px solid #FFFFFF; }
.cookie-buttons .btn-settings { background: transparent; color: #FFFFFF; border: 2px solid #FFFFFF; }

/* Cookie modal */
.cookie-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: none; align-items: center; justify-content: center; z-index: 3500; }
.cookie-modal-overlay.show { display: flex; }
.cookie-modal {
  width: 92%; max-width: 680px; background: #FFFFFF; color: var(--color-ink); border: 1px solid var(--color-border); box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-20);
}
.cookie-modal h3 { margin-bottom: var(--space-8); }
.cookie-category { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--color-border); padding: 10px 12px; background: var(--color-accent); }
.cookie-modal .modal-actions { display: flex; flex-wrap: wrap; gap: var(--space-12); justify-content: flex-end; }

/* ===== ACCESSIBILITY STATES ===== */
a:focus-visible, button:focus-visible, .btn:focus-visible { outline: 3px solid var(--color-secondary); outline-offset: 2px; }

/* ===== RESPONSIVE CARDS (Desktop columns via flex-basis) ===== */
@media (min-width: 640px) {
  .feature-grid > div, .service-cards > div, .dashboard-features > div, .pricing-table > div, .case-study-cards > div, .team-bio-snippets > div, .testimonial-cards > .testimonial-card { flex: 1 1 calc(50% - 10px); }
}
@media (min-width: 992px) {
  .feature-grid > div, .service-cards > div, .dashboard-features > div, .pricing-table > div, .case-study-cards > div { flex: 1 1 calc(33.333% - 14px); }
  .kpi-grid { display: flex; flex-wrap: wrap; gap: var(--space-20); }
  .kpi-grid > div { flex: 1 1 calc(25% - 15px); }
  .metric-grid > div { flex: 1 1 calc(33.333% - 14px); }
}

/* ===== TEXT-IMAGE SECTION RULE (if used) ===== */
@media (max-width: 768px) { .text-image-section { flex-direction: column; align-items: center; } }
@media (min-width: 769px) { .text-image-section { flex-direction: row; align-items: center; } }

/* ===== HERO EMPHASIS (first sections) ===== */
main > section:first-of-type { background: var(--color-accent); border-top: 4px solid var(--color-secondary); border-bottom: 1px solid var(--color-border); }
main > section:first-of-type .content-wrapper { gap: var(--space-16); }

/* ===== FAQ ACCORDION (static styling; JS can toggle .open) ===== */
.faq-accordion { display: flex; flex-direction: column; gap: var(--space-12); }
.faq-accordion h3 { background: var(--color-surface); border: 1px solid var(--color-border); padding: 12px; cursor: pointer; position: relative; }
.faq-accordion h3:after { content: "+"; float: right; color: var(--color-muted); }
.faq-accordion h3.open:after { content: "−"; }
.faq-accordion p { display: none; border-left: 3px solid var(--color-secondary); padding: 12px; background: var(--color-accent); }
.faq-accordion h3.open + p { display: block; }

/* ===== RATING, BADGES & SUMMARY ROWS ===== */
.rating-summary { padding-top: var(--space-8); border-top: 2px solid var(--color-border); }

/* ===== POLICY / LEGAL PAGES ===== */
.data-controller-info, .contact-for-privacy, .market-research-highlights, .reporting-scope, .onboarding-details, .portfolio-mix-info, .mission-statement, .brand-promise, .licenses, .response-times-info, .expected-response-time, .service-scope, .transfer-outside-eu-info, .dpo-contact-info, .complaint-procedure, .consent-management-info, .disable-instructions, .volume-discounts-info, .billing-faq, .price-guarantee-badge {
  border: 1px solid var(--color-border); background: var(--color-surface); padding: var(--space-16); box-shadow: var(--shadow-sm);
}

/* ===== GEOMETRIC DIVIDER UTILITIES ===== */
.hr-geo { height: 4px; background: var(--color-secondary); width: 80px; transform: skewX(-20deg); }

/* ===== LINKS HOVER ===== */
a:hover { color: var(--color-secondary); }

/* ===== Z-INDEX SAFE LAYERS ===== */
header { z-index: 1000; }
.mobile-menu { z-index: 2000; }
.cookie-banner { z-index: 3000; }
.cookie-modal-overlay { z-index: 3500; }

/* ===== PREVENT OVERLAP: Consistent gaps between blocks ===== */
.content-wrapper > * + * { margin-top: 0; }
.container > * + * { margin-top: 0; }

/* ===== ANGULAR ACCENTS FOR CARDS ===== */
.feature-grid > div:before, .service-cards > div:before, .dashboard-features > div:before, .case-study-cards > div:before, .team-bio-snippets > div:before {
  content: ""; position: absolute; top: 0; left: 0; width: 0; height: 0; border-top: 18px solid var(--color-secondary); border-right: 18px solid transparent;
}

/* ===== PRINT BASIC OPTIMIZATION ===== */
@media print {
  .mobile-menu, .mobile-menu-toggle, .cookie-banner, .cookie-modal-overlay { display: none !important; }
  a { text-decoration: underline; }
  header { position: static; box-shadow: none; }
}

/* ===== PAGE-SPECIFIC MINOR ADJUSTMENTS ===== */
.price-guarantee-badge { display: inline-flex; align-items: center; gap: var(--space-8); }
.metric-grid strong { font-size: 1.5rem; color: var(--color-primary); }
.metric-grid span { color: var(--color-muted); }
.timeline ul li { padding-left: 14px; border-left: 3px solid var(--color-secondary); }

/* ===== DESKTOP FOOTER GRID (via flex) ===== */
@media (min-width: 992px) {
  footer .content-wrapper { flex-direction: row; align-items: flex-start; justify-content: space-between; }
  footer nav { max-width: 40%; }
}

/* ===== Ensuring min 20px spacing between cards via gaps / margins ===== */
.feature-grid, .service-cards, .dashboard-features, .kpi-grid, .pricing-table, .case-study-cards, .testimonial-cards, .metric-grid, .team-bio-snippets, .testimonial-quotes { gap: 24px; }
.card, .testimonial-card, .contact-info-card > div { margin-bottom: 20px; }

/* ===== Hover micro-interactions for links inside cards ===== */
.feature-grid h3 a, .service-cards h3 a, .case-study-cards h3 a { border-bottom: 2px solid transparent; }
.feature-grid h3 a:hover, .service-cards h3 a:hover, .case-study-cards h3 a:hover { border-color: var(--color-secondary); }

/* ===== Forms (if added later) ===== */
input, select, textarea { width: 100%; padding: 12px; border: 1px solid var(--color-border); border-radius: 0; background: #fff; font: inherit; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(201,162,39,0.35); border-color: var(--color-secondary); }

/* ===== Additional responsive tuning ===== */
@media (min-width: 1200px) {
  h1 { font-size: 2.5rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.25rem; }
}

/* ===== End of stylesheet ===== */