/* =============================
   Reset & Base (mobile-first)
   Soft Pastel x ScalaCarriera
   ============================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: Verdana, Geneva, Tahoma, sans-serif; color: #213043; background: #F9FAFB; line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
svg { display: block; }
a { color: #0B3B5E; text-decoration: none; }
a:hover, a:focus { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid #7EC7BE; outline-offset: 2px; border-radius: 8px; }

/* Color tokens (with fallbacks) */
:root {
  --primary: #0B3B5E; /* deep navy-teal */
  --secondary: #1F7A6E; /* teal */
  --accent: #F5F7FA; /* light */
  /* Soft pastel support palette */
  --pastel-sky: #EAF4FF;
  --pastel-mint: #E6F6F2;
  --pastel-peach: #FFEFE6;
  --pastel-lilac: #F4ECFF;
  --pastel-rose: #FFEFF5;
  --ink: #213043; /* base text */
  --muted: #5A6B7B;
  --line: #E4E8EE;
  --white: #FFFFFF;
  --shadow-sm: 0 2px 8px rgba(13, 37, 62, .08);
  --shadow-md: 0 8px 24px rgba(13, 37, 62, .12);
  --radius-sm: 10px; --radius-md: 16px; --radius-lg: 22px;
  --space-1: 8px; --space-2: 12px; --space-3: 16px; --space-4: 20px; --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 60px;
}

/* Typography scale */
h1, h2, h3, h4 { font-family: Georgia, 'Times New Roman', serif; color: var(--primary); line-height: 1.2; margin: 0 0 var(--space-3); }
h1 { font-size: 32px; letter-spacing: 0.2px; }
h2 { font-size: 24px; color: #153B55; }
h3 { font-size: 18px; color: #1B4B6A; }
p { margin: 0 0 var(--space-3); color: var(--ink); }
small, .micro-copy { font-size: 12px; color: var(--muted); }
.subheadline { color: #33536B; font-size: 16px; }
.privacy-note { color: #3F5566; font-size: 14px; }

/* List spacing (keep bullets for clarity) */
ul, ol { margin: 0 0 var(--space-4); padding-left: 20px; }
li { margin-bottom: 10px; }

/* Containers & Sections (Flex-only layout) */
.container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--space-4); display: flex; flex-direction: column; align-items: stretch; gap: var(--space-4); }
.content-wrapper { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
section { margin-bottom: var(--space-8); padding: var(--space-7) 0; }
.section { margin-bottom: 60px; padding: 40px 20px; }

/* Header */
header { position: relative; background: var(--white); border-bottom: 1px solid var(--line); z-index: 900; }
header .container { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-3); padding-bottom: var(--space-3); }
.logo img { height: 34px; }

.main-nav { display: none; align-items: center; gap: var(--space-3); }
.main-nav a { color: #23415A; padding: 10px 12px; border-radius: 10px; transition: background .25s ease, color .25s ease; }
.main-nav a:hover { background: var(--accent); color: var(--primary); }

/* Buttons */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 18px; border-radius: var(--radius-md); border: 1px solid transparent; background: var(--white); color: var(--primary); font-weight: 600; box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease; }
.button:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.button:active { transform: translateY(0); }
.button.primary { background: #E6F1FF; border-color: #BBD9FF; color: #0E3655; }
.button.primary:hover { background: #DCEBFF; }
.button.secondary { background: #E7F5F1; border-color: #BEE5DC; color: #145A50; }
.button.secondary:hover { background: #DFF0EB; }
.button.ghost { background: transparent; border-color: #CFE3F2; color: var(--primary); }

/* Hero */
.hero { background: var(--pastel-lilac); border-bottom: 1px solid var(--line); }
.hero .container { align-items: center; }
.hero .content-wrapper { align-items: center; text-align: center; }
.hero .cta-group { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }
.hero img { width: 72px; height: 72px; }

/* Social proof */
.social-proof { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); color: #4A5D70; }
.logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4); }
.logos img { width: 72px; height: 72px; padding: 10px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); opacity: .9; transition: transform .2s ease, opacity .2s ease; }
.logos img:hover { transform: translateY(-2px); opacity: 1; }

/* Feature grid & cards */
.feature-grid { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; }
.feature { flex: 1 1 260px; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); transition: box-shadow .25s ease, transform .15s ease; }
.feature:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.feature img { width: 36px; height: 36px; }

/* Shared card containers */
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--space-3); }

/* Content grid utility */
.content-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; }

/* Article / Resource / Service / Event / Bundle / Price cards */
.article-cards, .resource-cards, .service-cards, .event-cards, .bundle-cards, .price-cards { display: flex; flex-wrap: wrap; gap: 24px; }
.article-cards article, .resource-cards article, .event-cards article { flex: 1 1 260px; display: flex; flex-direction: column; gap: var(--space-3); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); }
.service-cards .card, .bundle-cards .card, .price-cards .card { flex: 1 1 260px; }

/* Text + image / text-only sections */
.text-image-section { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.text-section { display: flex; flex-direction: column; gap: var(--space-3); }

/* Feature item utility */
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

/* Testimonials (high contrast) */
.testimonials { display: flex; flex-wrap: wrap; gap: 24px; }
.testimonial-card { display: flex; align-items: center; gap: 20px; padding: 20px; background: var(--white); border: 1px solid #DCE3EA; border-left: 5px solid #A8DADC; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); color: #1A2A3A; }
.testimonial-card p { margin: 0; }
.testimonial-card strong { color: #17364E; }

/* FAQ accordion (static open styling) */
.faq-accordion { display: flex; flex-direction: column; gap: var(--space-3); }
.faq-accordion .item { background: var(--pastel-mint); border: 1px solid #D4ECE6; border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-sm); }
.faq-accordion .item h3 { margin-bottom: 6px; }

/* Stats / Milestones / Snippets blocks */
.stats, .milestones, .case-snippets { display: flex; flex-direction: column; gap: var(--space-3); background: var(--pastel-sky); border: 1px solid #D9E8F7; border-radius: var(--radius-lg); padding: var(--space-5); }

/* Pagination / tags / notes */
.pagination { display: flex; justify-content: center; align-items: center; padding: var(--space-3); color: var(--muted); }
.tags { color: #476079; font-size: 14px; }
.calendar-note { display: flex; align-items: center; justify-content: center; background: var(--pastel-rose); border: 1px solid #F8DDE9; color: #5D3A4A; border-radius: var(--radius-md); padding: var(--space-3); }

/* Links utility */
.link { display: inline-flex; align-items: center; gap: 8px; color: #1C577C; border-bottom: 1px dashed #B7D3E8; padding-bottom: 2px; }
.link:hover { border-bottom-style: solid; }

/* Header actions */
.mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; font-size: 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); color: var(--primary); box-shadow: var(--shadow-sm); }
.mobile-menu-toggle:hover { box-shadow: var(--shadow-md); }

/* Mobile menu overlay */
.mobile-menu { position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 420px; background: var(--white); border-left: 1px solid var(--line); box-shadow: -12px 0 30px rgba(20, 43, 66, .18); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-5); transform: translateX(100%); opacity: 0; transition: transform .35s ease, opacity .3s ease; z-index: 1000; }
.mobile-menu.active { transform: translateX(0); opacity: 1; }
.mobile-menu-close { align-self: flex-end; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-size: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--accent); color: var(--primary); }
.mobile-nav { display: flex; flex-direction: column; gap: 12px; }
.mobile-nav a { padding: 12px 14px; border-radius: 10px; color: #27445C; background: #F7FAFD; border: 1px solid #E6EEF5; }
.mobile-nav a:hover { background: #EEF6FE; }

/* Footer */
footer { background: var(--accent); border-top: 1px solid var(--line); }
footer .content-wrapper { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-5); padding-top: var(--space-5); padding-bottom: var(--space-5); }
footer nav { display: flex; flex-direction: column; gap: 10px; }
footer p, footer a { color: #2F4E66; }
.footer-brand img { height: 32px; }
.footer-contact p img, footer p img { display: inline-block; vertical-align: middle; width: 18px; height: 18px; margin-right: 8px; }

/* Forms (for toggles in cookie modal, if injected) */
input[type="checkbox"], input[type="radio"] { accent-color: #1F7A6E; }

/* Cookie Consent Banner & Modal */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(15, 40, 72, .08); z-index: 1200; transform: translateY(20px); opacity: 0; pointer-events: none; transition: transform .3s ease, opacity .3s ease; }
.cookie-banner.show { transform: translateY(0); opacity: 1; pointer-events: auto; }
.cookie-banner .cookie-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.cookie-banner .button { padding: 10px 14px; }
.cookie-banner .accept { background: #E6F6F2; border-color: #BFE7DE; color: #0F5B51; }
.cookie-banner .reject { background: #FFEFE6; border-color: #FFDCC8; color: #6B3B1A; }
.cookie-banner .settings { background: #F1F4FA; border-color: #E1E7F0; color: #294761; }

.cookie-modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: rgba(16, 33, 52, .48); z-index: 1300; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.cookie-modal.active { opacity: 1; pointer-events: auto; }
.cookie-modal .modal-content { width: 100%; max-width: 720px; background: var(--white); border-radius: 18px; border: 1px solid var(--line); box-shadow: var(--shadow-md); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.cookie-modal .modal-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 12px 0; border-bottom: 1px dashed #E3EAF2; }
.cookie-modal .modal-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: flex-end; }

/* Utility spacing for CTA groups */
.cta-group { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Accessibility color helpers */
.bg-peach { background: var(--pastel-peach); }
.bg-lilac { background: var(--pastel-lilac); }
.bg-mint { background: var(--pastel-mint); }

/* Tables (if any appear) */
table { width: 100%; border-collapse: collapse; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: block; }
tr { display: flex; width: 100%; }
th, td { flex: 1 1 0; padding: 12px; border-bottom: 1px solid var(--line); }
th { background: #F1F5FA; text-align: left; font-weight: 700; color: #2A4A64; }

/* Mandatory spacing rules assurance */
section > * + * { margin-top: 0; }
.article-cards > *,
.resource-cards > *,
.event-cards > *,
.service-cards > *,
.bundle-cards > *,
.price-cards > *,
.testimonials > * { margin: 0; }

/* Micro-interactions */
article:hover, .card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* Images in text rows */
.text-section img, .footer-contact img { filter: saturate(.9); opacity: .95; }

/* Header actions alignment in narrow widths */
header .button.primary { display: none; }

/* RESPONSIVE: ≥768px */
@media (min-width: 768px) {
  h1 { font-size: 40px; }
  h2 { font-size: 28px; }
  h3 { font-size: 20px; }
  .subheadline { font-size: 18px; }
  .hero { padding: var(--space-8) 0; }
  .hero .content-wrapper { max-width: 820px; }
  .content-wrapper { gap: var(--space-5); }
  .text-image-section { flex-direction: row; }
}

/* RESPONSIVE: ≥900px (show desktop nav) */
@media (min-width: 900px) {
  .main-nav { display: flex; }
  .mobile-menu-toggle { display: none; }
  header .button.primary { display: inline-flex; }
  .hero .content-wrapper { align-items: center; text-align: center; }
  .feature-grid { justify-content: flex-start; }
}

/* Page-specific soft backgrounds to vary sections (pastel, solid) */
.hero + section:nth-of-type(2) .content-wrapper,
section:nth-of-type(odd) .content-wrapper.bg-soft { background: var(--pastel-sky); border: 1px solid #D7E7F7; border-radius: var(--radius-lg); padding: var(--space-6); }

/* Additional helpers used across pages */
.filters { display: flex; flex-direction: column; gap: 10px; background: var(--pastel-peach); border: 1px solid #FFD9C4; border-radius: var(--radius-md); padding: var(--space-4); }
.pagination p { margin: 0; }

/* Header sticky optional (gentle) */
@media (min-width: 1024px) {
  header { position: sticky; top: 0; backdrop-filter: saturate(1.1); }
}

/* Ensure no overlap and adequate spacing */
section .content-wrapper > * { margin-right: 0; }
section .content-wrapper { width: 100%; }

/* Prevent card text from touching edges */
.card p:last-child, article p:last-child { margin-bottom: 0; }

/* Text contrast in review/testimonial areas */
.testimonials, .testimonial-card p { color: #1A2A3A; }

/* Mobile nav focus states */
.mobile-nav a:focus-visible { outline: 2px solid #B9DDF0; outline-offset: 2px; }

/* Header link spacing on desktop */
@media (min-width: 1100px) {
  .main-nav a { padding: 10px 14px; }
}

/* Content-specific small utilities */
.stats ul, .milestones ul, .case-snippets ul { margin: 0; }
.calendar-note p { margin: 0; }

/* Make sure all layout groups use flex with gaps >= 20px */
.content-grid, .card-container, .testimonials, .feature-grid, .article-cards, .resource-cards, .service-cards, .event-cards, .bundle-cards, .price-cards, .cta-group, .footer .content-wrapper { gap: 24px; }

/* Header/Footer link refinements */
footer nav a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Accessibility-friendly hover/focus for buttons */
.button:focus-visible { box-shadow: 0 0 0 3px rgba(31, 122, 110, .25), var(--shadow-md); }

/* Decorative only (no absolute for content). Safe accent badges if needed */
.badge { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; font-size: 12px; background: #FFF4E8; color: #6A4A1F; border: 1px solid #FFE2BF; }

/* Ensure testimonial, review, and legal pages remain readable on all backgrounds */
.hero + section .text-section, .text-section { background: transparent; color: var(--ink); }

/* End of file */