/* =============================
   Voltrop Quest – Warm Friendly UI
   Complete flexbox-only CSS for all pages
   ============================= */

/* -------- CSS Reset & Base -------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, blockquote, dd, dl { margin: 0; padding: 0; }
ul, ol { padding-left: 1.2rem; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { background: none; border: none; cursor: pointer; font: inherit; }
input, button, textarea, select { font: inherit; }

/* -------- Design Tokens -------- */
:root {
  --color-primary: #1E3A5F; /* brand primary */
  --color-secondary: #1FA37A; /* brand secondary */
  --color-accent: #F5F8FC; /* brand accent (cool light) */
  --color-surface: #FFFFFF;
  --color-warm-50: #FFF9F4; /* warm light */
  --color-warm-100: #FFEBD8; /* warm tint */
  --color-warm-150: #FFE2C7; /* subtle */
  --color-warm-200: #FFD8B5; /* stronger warm */
  --text-900: #2A2A2A;
  --text-700: #3F3D3C;
  --text-600: #4F4B49;
  --text-muted: #6B6764;
  --border-200: #E9E4E0;
  --border-300: #E2DED9;
  --success-600: #148D6A;
  --warning-500: #B06000;
  --focus: #F59E0B; /* warm amber focus */
  --shadow-sm: 0 2px 6px rgba(30,58,95,0.08);
  --shadow-md: 0 6px 20px rgba(30,58,95,0.10);
  --shadow-lg: 0 12px 28px rgba(30,58,95,0.12);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --container-max: 1200px;
}

/* -------- Typography -------- */
body {
  font-family: Arial, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, sans-serif;
  color: var(--text-900);
  background: #FFFDFB; /* warm backdrop */
  line-height: 1.6;
  font-size: 16px;
}
h1, h2, h3, h4 { font-family: 'Trebuchet MS', 'Segoe UI', Arial, sans-serif; color: var(--color-primary); }
h1 { font-size: 32px; line-height: 1.2; margin-bottom: 16px; }
h2 { font-size: 26px; line-height: 1.3; margin-bottom: 14px; }
h3 { font-size: 20px; line-height: 1.3; margin-bottom: 10px; color: var(--text-700); }
h4 { font-size: 18px; margin-bottom: 8px; color: var(--text-700); }
p, li { color: var(--text-700); font-size: 16px; }
small, .muted { color: var(--text-muted); font-size: 14px; }

/* Accessible focus */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }

/* -------- Layout Containers (Flex-only) -------- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 18px;
  display: flex; /* flexbox only */
  flex-direction: column;
  gap: 20px;
}
.content-wrapper {
  display: flex; /* flexbox only */
  flex-direction: column;
  gap: 18px;
  background: var(--color-surface);
  border: 1px solid var(--border-200);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
main section { margin: 24px 0; }

/* MANDATORY SPACING AND 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 & Navigation -------- */
header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--border-200);
  box-shadow: 0 2px 10px rgba(30,58,95,0.04);
  position: relative;
  z-index: 20;
}
header nav {
  display: flex; /* flexbox only */
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
}
header nav a:first-child { margin-right: auto; display: flex; align-items: center; }
header nav img { height: 32px; width: auto; }
header nav a {
  color: var(--text-700);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
header nav a:hover { background: var(--color-accent); color: var(--color-primary); }

/* Buttons */
.btn-primary, .btn-secondary, .newsletter-optin-minimal button, .newsletter-optin-form button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 16px; border-radius: 999px; font-weight: 700;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.btn-primary { background: #F4A460; color: #1E1C1A; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: #E08D44; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-secondary { background: var(--color-secondary); color: #FFFFFF !important; box-shadow: var(--shadow-sm); }
.btn-secondary:hover { background: #168C66; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-primary:active, .btn-secondary:active { transform: translateY(0); box-shadow: var(--shadow-sm); }

/* Trust badges & small pills */
.trust-badges { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.trust-badges span {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--color-warm-50);
  border: 1px solid var(--border-200);
  border-radius: 999px;
  padding: 6px 10px; color: var(--text-700);
}
.trust-badges img { width: 18px; height: 18px; }

/* Breadcrumbs */
.breadcrumbs { color: var(--text-muted); font-size: 14px; display: flex; gap: 6px; }

/* Stats bar */
.stats-bar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  background: var(--color-accent);
  border: 1px dashed var(--border-300);
  border-radius: var(--radius-md);
  padding: 10px 12px; color: var(--color-primary);
}

/* Micro CTA row */
.micro-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; background: var(--color-warm-50); border: 1px solid var(--border-200); border-radius: var(--radius-md); padding: 12px 14px; }
.micro-cta-row span { color: var(--text-700); font-weight: 600; }

/* Feature grid */
.feature-grid { display: flex; flex-wrap: wrap; gap: 20px; }
.feature-grid > div {
  flex: 1 1 260px;
  background: #FFFFFF;
  border: 1px solid var(--border-200);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.feature-grid > div:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.feature-grid img { width: 28px; height: 28px; }

/* Service cards / lists */
.service-cards, .service-list, .package-cards { display: flex; flex-wrap: wrap; gap: 20px; }
.service-cards > div, .service-list .service-card, .package-cards > div {
  flex: 1 1 260px;
  background: #FFFFFF;
  border: 1px solid var(--border-200);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.service-cards > div:hover, .service-list .service-card:hover, .package-cards > div:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.service-cards a, .package-cards a { color: var(--color-secondary); font-weight: 700; }

/* Stepper */
.stepper { display: flex; flex-wrap: wrap; gap: 10px; }
.stepper > div {
  flex: 1 1 240px;
  display: flex; align-items: center; gap: 8px;
  background: var(--color-warm-50);
  border: 1px solid var(--border-200);
  border-radius: 999px;
  padding: 10px 14px;
  color: var(--text-700);
}
.stepper strong { color: var(--color-primary); }

/* Checklists / Lists */
.documents-checklist, .included-documents-list, .requirements-checklist, .scope-of-work-list, .values-list, .expertise-areas, .reassurance-points, .included-list, .support-levels, .document-management-practices, .roles_and_responsibilities, .next-steps-list, .benefit-list {
  display: flex; flex-direction: column; gap: 8px; list-style: none; padding-left: 0;
}
.documents-checklist li, .included-documents-list li, .requirements-checklist li, .scope-of-work-list li, .values-list li, .expertise-areas li, .reassurance-points li, .included-list li, .support-levels li, .document-management-practices li, .roles_and_responsibilities li, .next-steps-list li, .benefit-list li {
  display: flex; align-items: flex-start; gap: 10px; position: relative; padding-left: 28px;
}
.documents-checklist li::before, .included-documents-list li::before, .requirements-checklist li::before, .scope-of-work-list li::before, .reassurance-points li::before, .included-list li::before, .support-levels li::before, .benefit-list li::before, .next-steps-list li::before, .roles_and_responsibilities li::before, .document-management-practices li::before, .values-list li::before, .expertise-areas li::before {
  content: '\2713'; /* check */
  position: absolute; left: 0; top: 0; color: var(--success-600);
  background: #E7FAF3; border: 1px solid #CFF5E7; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px;
}

/* Feature icons row */
.feature-icons { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.feature-icons span { display: inline-flex; align-items: center; gap: 8px; background: var(--color-accent); border: 1px solid var(--border-200); border-radius: 999px; padding: 8px 12px; }
.feature-icons img { width: 18px; height: 18px; }

/* Testimonial cards – ensure dark text on light background */
.testimonial-card {
  background: var(--color-warm-50);
  border: 1px solid var(--border-200);
  border-radius: var(--radius-lg);
  color: var(--text-900);
  box-shadow: var(--shadow-sm);
}
.testimonial-card blockquote { color: var(--text-900); font-size: 18px; }
.testimonial-card p { color: var(--text-700); margin-left: auto; }
.rating-summary {
  display: inline-flex; align-items: center; gap: 8px;
  background: #FFF3E5; color: #5C3B00;
  border: 1px solid #FFE2C7; border-radius: 999px; padding: 8px 12px; font-weight: 700;
}
.logo-row-text-only, .case-snippets-text-only { color: var(--text-muted); font-style: italic; }

/* Contact prompt */
.contact-prompt {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  background: #FFF3E5; border: 1px solid #FFE2C7; border-radius: var(--radius-md); padding: 12px 14px; color: #5C3B00;
}
.contact-prompt a { color: var(--color-secondary); font-weight: 700; }

/* Category filters / pagination */
.category-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--text-muted); }
.category-filters a { color: var(--color-secondary); font-weight: 700; }
.pagination { display: flex; gap: 8px; }
.pagination a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; background: var(--color-accent); color: var(--color-primary); border: 1px solid var(--border-200); }
.pagination a:hover { background: #E8F1FF; }

/* Articles */
.featured-article, .article-list {
  display: flex; flex-direction: column; gap: 10px;
  background: #FFFFFF; border: 1px solid var(--border-200); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-sm);
}
.article-list a { color: var(--color-secondary); font-weight: 700; }
.reading-time-hint { color: var(--text-muted); font-size: 14px; }

/* Topic tags */
.topic-tags-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.topic-tags-cloud span { background: var(--color-accent); border: 1px solid var(--border-200); padding: 6px 10px; border-radius: 999px; color: var(--color-primary); }

/* Forms */
input[type="email"], input[type="text"], input[type="tel"], textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border-200); border-radius: var(--radius-md);
  background: #FFFFFF; color: var(--text-900);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, textarea:focus { border-color: var(--color-secondary); box-shadow: 0 0 0 4px rgba(31,163,122,0.12); outline: none; }
.newsletter-optin-minimal, .newsletter-optin-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.newsletter-optin-minimal label, .newsletter-optin-form label { font-weight: 600; color: var(--text-700); }
.newsletter-optin-minimal button, .newsletter-optin-form button { background: var(--color-secondary); color: #fff; }
.newsletter-optin-minimal button:hover, .newsletter-optin-form button:hover { background: #168C66; }
.privacy-note { color: var(--text-muted); font-size: 14px; }

/* Tables (pricing & legal) */
.pricing-table table, table {
  width: 100%; border-collapse: collapse; background: #FFFFFF; border: 1px solid var(--border-200); border-radius: var(--radius-lg);
}
.pricing-table table th, .pricing-table table td, table th, table td {
  text-align: left; padding: 12px; border-bottom: 1px solid var(--border-200); color: var(--text-700);
}
.pricing-table table th, table th { background: var(--color-warm-100); color: #4A2E00; }
.pricing-table table tr:nth-child(even), table tr:nth-child(even) { background: #FFFAF5; }

/* Details / FAQ */
details { border: 1px solid var(--border-200); border-radius: var(--radius-md); padding: 10px 12px; background: #FFFFFF; box-shadow: var(--shadow-sm); }
details + details { margin-top: 10px; }
summary { cursor: pointer; font-weight: 700; color: var(--color-primary); list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '\25BC'; margin-left: 8px; font-size: 12px; color: var(--text-muted); transition: transform .2s ease; }
details[open] summary::after { transform: rotate(180deg); }

/* Special notes & highlights */
.sla-summary, .methodology-summary, .responsibilities-matrix-summary, .data-protection-points, .service-limits-notes, .response-time-note, .free-consultation-note, .expected-response-time {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--color-accent); border: 1px solid var(--border-200); border-radius: var(--radius-md); padding: 12px 14px; color: var(--color-primary);
}
.success-message {
  display: flex; flex-direction: column; gap: 8px;
  background: #E8FFF6; border: 1px solid #C9F7E7; color: #0F6E54;
  border-radius: var(--radius-md); padding: 12px 14px;
}
.order-or-request-reference { color: var(--text-700); background: var(--color-warm-50); border: 1px dashed var(--border-300); border-radius: var(--radius-md); padding: 10px 12px; display: inline-flex; }
.resources-links { display: flex; flex-wrap: wrap; gap: 12px; color: var(--color-secondary); font-weight: 700; }

/* Contact blocks */
.company-overview, .team-overview-text { display: flex; flex-direction: column; gap: 12px; }

/* Reading sections warm striping */
main section:nth-child(odd) .content-wrapper { background: #FFFFFF; }
main section:nth-child(even) .content-wrapper { background: var(--color-warm-50); }

/* -------- Footer -------- */
footer { background: #FCF7F2; border-top: 1px solid var(--border-200); padding: 18px 0; margin-top: 24px; }
footer nav { display: flex; flex-wrap: wrap; gap: 12px; }
footer nav a { color: var(--text-muted); padding: 6px 8px; border-radius: var(--radius-sm); }
footer nav a:hover { background: var(--color-accent); color: var(--color-primary); }
.brand-badge { display: flex; align-items: center; gap: 10px; color: var(--text-700); }
.brand-badge img { width: 28px; height: 28px; }
.social-links { display: flex; gap: 10px; }
.social-links a { display: inline-flex; padding: 6px; background: #FFFFFF; border: 1px solid var(--border-200); border-radius: 999px; box-shadow: var(--shadow-sm); }
.social-links a:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* -------- Links -------- */
a { transition: color .2s ease, background-color .2s ease; }
a:hover { color: var(--color-secondary); }

/* -------- Mobile Navigation (Hamburger) -------- */
.mobile-menu-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; margin: 10px 18px; border-radius: 10px;
  background: var(--color-warm-100); color: #4A2E00;
  box-shadow: var(--shadow-sm);
}
.mobile-menu-toggle:hover { background: var(--color-warm-150); }

.mobile-menu {
  position: fixed; inset: 0; /* full screen */
  display: flex; flex-direction: column; gap: 12px; align-items: stretch;
  background: rgba(30,30,30,0.28);
  transform: translateX(100%);
  transition: transform .35s ease;
  z-index: 1000;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu .mobile-menu-close {
  align-self: flex-end; margin: 14px 16px 0 0; width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center; border-radius: 12px;
  background: #FFFFFF; border: 1px solid var(--border-200); box-shadow: var(--shadow-sm);
}
.mobile-nav {
  background: #FFFFFF; border-top-left-radius: 18px; border-top-right-radius: 18px;
  margin-top: auto; padding: 16px; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 6px;
}
.mobile-nav a {
  display: flex; align-items: center; padding: 12px; border-radius: 10px; color: var(--text-700);
}
.mobile-nav a:hover { background: var(--color-accent); color: var(--color-primary); }

/* Hide/Show desktop nav vs toggle */
@media (min-width: 993px) {
  .mobile-menu-toggle { display: none; }
}
@media (max-width: 992px) {
  header nav { display: none; }
}

/* Prevent scroll when menu open */
body.menu-open { overflow: hidden; }

/* -------- Cookie Consent Banner & Modal -------- */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: #FFF3E5; color: #4A2E00;
  border-top: 1px solid #FFE2C7; box-shadow: 0 -8px 20px rgba(30,58,95,0.08);
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  padding: 12px 16px; z-index: 1200;
  transform: translateY(110%);
  transition: transform .35s ease;
}
.cookie-banner.show { transform: translateY(0); }
.cookie-banner .cookie-text { flex: 1 1 260px; }
.cookie-banner .cookie-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-accept { background: var(--color-secondary); color: #fff; border-radius: 999px; padding: 10px 14px; }
.cookie-accept:hover { background: #168C66; }
.cookie-reject { background: #FFFFFF; color: #5C3B00; border: 1px solid #FFD8B5; border-radius: 999px; padding: 10px 14px; }
.cookie-reject:hover { background: #FFF; box-shadow: var(--shadow-sm); }
.cookie-settings { background: #F4A460; color: #1E1C1A; border-radius: 999px; padding: 10px 14px; }
.cookie-settings:hover { background: #E08D44; }

.cookie-modal {
  position: fixed; inset: 0; z-index: 1300;
  background: rgba(15, 23, 42, 0.35);
  display: none; align-items: center; justify-content: center; padding: 16px;
}
.cookie-modal.open { display: flex; }
.cookie-modal .cookie-modal-content {
  background: #FFFFFF; border-radius: 16px; border: 1px solid var(--border-200);
  width: 100%; max-width: 720px; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 14px; padding: 18px;
}
.cookie-modal .cookie-categories { display: flex; flex-direction: column; gap: 10px; }
.cookie-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: var(--color-accent); border-radius: 10px; }
.cookie-modal .modal-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* -------- Utility & Helpers -------- */
.hr { height: 1px; background: var(--border-200); border: none; }
.badge { display: inline-flex; align-items: center; padding: 6px 10px; background: var(--color-accent); color: var(--color-primary); border: 1px solid var(--border-200); border-radius: 999px; }

/* -------- Responsive Rules -------- */
@media (max-width: 768px) {
  .text-image-section { flex-direction: column; }
  .micro-cta-row { flex-direction: column; align-items: flex-start; }
  .testimonial-card { flex-direction: column; align-items: flex-start; }
  .container { padding: 0 14px; }
  h1 { font-size: 28px; }
  h2 { font-size: 22px; }
}
@media (min-width: 769px) {
  .text-image-section { flex-direction: row; }
}

/* -------- Page-specific subtle touches -------- */
/* Home hero spacing */
body.home-hero .content-wrapper, body.index .content-wrapper { padding-top: 28px; padding-bottom: 28px; }

/* Pricing comparison points */
.comparison-points { display: flex; flex-wrap: wrap; gap: 10px; color: var(--text-700); }
.addons-list { display: flex; flex-direction: column; gap: 8px; }

/* Contact lists */
.content-wrapper p img, li img { display: inline-block; vertical-align: middle; margin-right: 8px; }

/* Legal pages highlight cards */
.case-snippets-text-only p { background: var(--color-accent); border: 1px solid var(--border-200); border-radius: var(--radius-md); padding: 10px 12px; }

/* Header section accent backgrounds for first section on pages */
main section:first-of-type .content-wrapper { background: #FFF7EF; border-color: #FFE2C7; }

/* -------- Cards (generic) -------- */
.card { background: #FFFFFF; border: 1px solid var(--border-200); border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* -------- Links inside content -------- */
.content-wrapper a { color: var(--color-secondary); }
.content-wrapper a:hover { text-decoration: underline; }

/* -------- Buttons alignment groups -------- */
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* -------- Accessibility: high contrast in testimonials/reviews -------- */
/* Already enforced by warm light BG and dark text above */

/* -------- Ensure spacing between all elements -------- */
.content-wrapper > * + * { margin-top: 6px; }

/* -------- Header + Footer containers with flex compliance -------- */
footer .content-wrapper, footer .container, header .container { display: flex; flex-direction: column; gap: 14px; }

/* -------- Misc small components -------- */
.logo-row-text-only, .brand-badge { gap: 8px; }

/* -------- Print tweaks (optional) -------- */
@media print {
  .mobile-menu, .mobile-menu-toggle, .cookie-banner, .cookie-modal { display: none !important; }
  a { text-decoration: underline; }
}