/* AdeniSuper Accademia Finanziaria — style.css (gradient_modern) */
/* =========================
   RESET & BASELINE
   ========================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding-left: 1.25rem; }
a { color: inherit; text-decoration: none; }
button { border: 0; background: transparent; cursor: pointer; font: inherit; }
:focus-visible { outline: 3px solid #7AD1C0; outline-offset: 2px; }

/* =========================
   THEME TOKENS
   ========================= */
:root {
  --primary: #0A3D62;
  --secondary: #1F6A52;
  --accent: #F3F6FA;
  --ink: #16222E;
  --muted: #5B6B7B;
  --white: #FFFFFF;
  --surface: #FFFFFF;
  --shadow: 0 10px 30px rgba(10, 61, 98, 0.14);
  --shadow-sm: 0 6px 18px rgba(10, 61, 98, 0.10);
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --transition: all .28s ease;
}

/* =========================
   GLOBAL STYLES
   ========================= */
body {
  font-family: Verdana, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background-color: #F7FAFD; /* fallback */
  background-image: linear-gradient(180deg, var(--accent) 0%, #FFFFFF 100%);
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Trebuchet MS", Tahoma, sans-serif;
  line-height: 1.2;
  color: var(--primary);
  margin: 0;
}

h1 { font-size: 32px; letter-spacing: -0.2px; }
h2 { font-size: 24px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; color: var(--ink); }

p { margin: 0; color: var(--ink); }
small, .eyebrow { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--secondary); }
.subheadline { color: var(--muted); font-size: 16px; }

/* Layout containers — FLEX ONLY */
.container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 16px; display: flex; flex-direction: column; }
.content-wrapper { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }

/* Sections spacing (mandatory pattern + apply to all) */
.section { margin-bottom: 60px; padding: 40px 20px; }
main section { margin-bottom: 60px; padding: 40px 20px; }

/* Utility flex patterns (mandatory) */
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; display: flex; flex-direction: column; gap: 14px; background: var(--surface); border: 1px solid #E6ECF3; border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); }
.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; background: #FFFFFF; border: 1px solid #E6ECF3; border-radius: var(--radius); box-shadow: var(--shadow-sm); color: #12202C; }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

/* =========================
   HEADER & NAVIGATION
   ========================= */
header { background: #FFFFFF; box-shadow: 0 2px 12px rgba(10,61,98,.06); position: relative; z-index: 50; }
header .container { flex-direction: row; align-items: center; justify-content: center; padding: 12px 16px; }
header .content-wrapper { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
.logo img { height: 36px; width: auto; }

.main-nav { display: none; gap: 16px; align-items: center; }
.main-nav a { color: var(--ink); padding: 8px 10px; border-radius: 8px; transition: var(--transition); }
.main-nav a:hover { background: var(--accent); }

.header-cta { display: none; gap: 10px; align-items: center; }

/* Mobile burger */
.mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; color: var(--white); background-color: var(--primary); background-image: linear-gradient(135deg, var(--primary), var(--secondary)); box-shadow: var(--shadow-sm); transition: var(--transition); }
.mobile-menu-toggle:hover { transform: translateY(-1px); box-shadow: var(--shadow); }

/* Mobile menu overlay */
.mobile-menu { position: fixed; inset: 0; display: flex; flex-direction: column; background-color: #0B2F47; background-image: linear-gradient(165deg, rgba(10,61,98,.98), rgba(31,106,82,.95)); padding: 20px; transform: translateX(100%); transition: transform .35s ease; z-index: 999; }
.mobile-menu-close { align-self: flex-end; color: #EAF4FF; font-size: 20px; width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,.08); }
.mobile-nav { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
.mobile-nav a { color: #EAF4FF; padding: 12px 14px; border-radius: 10px; background: rgba(255,255,255,.06); transition: var(--transition); }
.mobile-nav a:hover { background: rgba(255,255,255,.12); transform: translateX(4px); }

/* When open (toggle via JS: add .open on .mobile-menu or .menu-open on body) */
.mobile-menu.open, body.menu-open .mobile-menu { transform: translateX(0); }
body.menu-open { overflow: hidden; }

/* =========================
   HERO & SECTIONS STYLE (gradient_modern)
   ========================= */
/* First section as gradient hero */
main > section:first-of-type { background-color: var(--primary); /* fallback */ background-image: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); color: var(--white); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
main > section:first-of-type h1,
main > section:first-of-type h2,
main > section:first-of-type p,
main > section:first-of-type .subheadline,
main > section:first-of-type .eyebrow { color: var(--white); }

/* Alternating subtle section background for rhythm */
main section:nth-of-type(odd):not(:first-of-type) { background: var(--accent); border-radius: var(--radius-lg); }

/* =========================
   TYPOGRAPHY DETAILS
   ========================= */
.eyebrow { display: inline-flex; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.12); color: var(--secondary); backdrop-filter: saturate(130%); }
main > section:first-of-type .eyebrow { color: #C7F2E8; background: rgba(255,255,255,.16); }

.breadcrumb { color: var(--muted); font-size: 14px; }
.rating-summary { color: var(--muted); }
.mobile-note { font-size: 14px; color: var(--muted); }

/* Links */
a { color: var(--primary); text-underline-offset: 2px; }
a:hover { text-decoration: underline; }

/* =========================
   BUTTONS
   ========================= */
.btn-primary, .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 12px; font-weight: bold; transition: var(--transition); box-shadow: var(--shadow-sm); }

.btn-primary { color: var(--white); background-color: var(--primary); /* fallback */ background-image: linear-gradient(135deg, var(--primary), var(--secondary)); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

.btn-secondary { color: var(--primary); background: #EAF2F8; border: 1px solid rgba(10,61,98,.2); }
.btn-secondary:hover { background: #DBEAF5; transform: translateY(-2px); }

/* =========================
   FEATURE GRIDS & CARDS
   ========================= */
.feature-grid { display: flex; flex-wrap: wrap; gap: 20px; }
.feature-grid .text-section { flex: 1 1 100%; background: var(--surface); border: 1px solid #E6ECF3; border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); }

.text-section { display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid #E9EEF5; border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); }
.text-section a { align-self: flex-start; font-weight: bold; }
.text-section ul { display: flex; flex-direction: column; gap: 8px; }

/* Mini badge inside headings */
.text-section h3 span, .text-section h4 span { margin-left: 8px; font-size: 12px; color: var(--secondary); background: #E6F4EF; border: 1px solid #C9EAE0; border-radius: 999px; padding: 2px 8px; }

/* Stats, badges, highlights */
.trust-badges ul, .platform-highlights ul, .stats ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.trust-badges li, .platform-highlights li, .stats li { display: flex; align-items: center; gap: 8px; background: #FFFFFF; border: 1px solid #E6ECF3; border-radius: 999px; padding: 8px 12px; box-shadow: var(--shadow-sm); color: var(--ink); }
.trust-badges img, .platform-highlights img, .text-section p img, .content-wrapper p img { width: 20px; height: 20px; object-fit: contain; }

/* Testimonials — ensure light background and strong contrast */
.testimonial-card p { margin: 0; }
.testimonial-card strong { color: var(--primary); }

/* Lists in content */
.content-wrapper ul { display: flex; flex-direction: column; gap: 8px; }
.content-wrapper ol { display: flex; flex-direction: column; gap: 8px; }

/* Rating emphasize */
.stats strong { color: var(--secondary); }

/* =========================
   FOOTER
   ========================= */
footer { margin-top: 20px; background: #0E2E48; background-image: linear-gradient(160deg, #0A3D62, #0E2E48); color: #E6F1FA; }
footer section { margin-bottom: 0; padding: 32px 20px; }
footer .content-wrapper { gap: 20px; }
footer .text-section { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: #E6F1FA; }
footer .text-section h4, footer .text-section p, footer a { color: #E6F1FA; }
.footer-links { display: flex; flex-wrap: wrap; gap: 12px; }
.footer-links a { padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.06); }
.footer-links a:hover { background: rgba(255,255,255,.14); }

/* =========================
   ACCESSORY ELEMENTS
   ========================= */
.cta-group { display: flex; flex-wrap: wrap; gap: 12px; }
.rating-summary, .breadcrumb { display: flex; align-items: center; gap: 8px; }

/* Pricing emphasis */
/* No pricing tables provided; emphasize cards */

/* =========================
   MOBILE MENU & RESPONSIVE
   ========================= */
@media (min-width: 768px) {
  h1 { font-size: 40px; }
  h2 { font-size: 28px; }
  h3 { font-size: 20px; }

  .feature-grid .text-section { flex: 1 1 calc(50% - 10px); }
  .text-image-section { flex-direction: row; }
}

@media (min-width: 1024px) {
  header .content-wrapper { gap: 24px; }
  .main-nav { display: flex; }
  .header-cta { display: flex; }
  .mobile-menu-toggle { display: none; }

  .feature-grid .text-section { flex: 1 1 calc(25% - 15px); }
}

/* Responsive rule for text-image sections on mobile */
@media (max-width: 768px) {
  .text-image-section { flex-direction: column; align-items: flex-start; }
}

/* =========================
   ACCESSIBILITY & INTERACTIONS
   ========================= */
button:focus-visible, a:focus-visible { box-shadow: 0 0 0 4px rgba(122,209,192,.5); border-radius: 10px; }

/* Subtle reveal animation utility */
.reveal { opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* =========================
   COOKIE CONSENT BANNER
   ========================= */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 14px; background: #FFFFFF; border-top: 1px solid #D9E3EE; box-shadow: 0 -8px 24px rgba(10,61,98,.12); padding: 16px; z-index: 998; transform: translateY(110%); transition: transform .35s ease; }
.cookie-banner.show { transform: translateY(0); }
.cookie-banner .cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-banner .btn-primary, .cookie-banner .btn-secondary { height: 40px; padding: 0 14px; }
.cookie-banner .btn-outline { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid #C9D7E6; color: var(--primary); background: #FFFFFF; transition: var(--transition); }
.cookie-banner .btn-outline:hover { background: #EFF5FB; }

/* Cookie Preferences Modal */
.cookie-modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(7, 23, 33, .6); z-index: 1000; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.cookie-modal.show { opacity: 1; pointer-events: all; }
.cookie-modal .cookie-dialog { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 640px; background: #FFFFFF; border: 1px solid #E2EAF3; border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow); }
.cookie-dialog .cookie-header { display: flex; align-items: center; justify-content: space-between; }
.cookie-dialog .cookie-content { display: flex; flex-direction: column; gap: 12px; }
.cookie-options { display: flex; flex-direction: column; gap: 10px; }
.cookie-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #F7FAFD; border: 1px solid #E2EAF3; border-radius: 12px; padding: 12px; }
.cookie-option .label { display: flex; flex-direction: column; gap: 4px; }
.cookie-option small { color: var(--muted); }

/* Toggle switch (decorative) */
.toggle { position: relative; width: 46px; height: 26px; border-radius: 999px; background: #CBD8E6; transition: var(--transition); }
.toggle input { appearance: none; width: 100%; height: 100%; margin: 0; }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #FFFFFF; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,.12); transition: var(--transition); }
.toggle input:checked + .knob { /* helper, if used */ }
.toggle input:checked ~ .indicator, .toggle input:checked ~ * {}
.toggle input:checked + .vis { /* not used but kept for compatibility */ }
.toggle input:checked ~ .toggle-proxy {}
/* Use sibling technique with wrapper */
.cookie-option input[type="checkbox"] { appearance: none; position: absolute; opacity: 0; }
.cookie-option .switch { position: relative; width: 48px; height: 28px; background: #CBD8E6; border-radius: 999px; transition: var(--transition); }
.cookie-option .switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; background: #FFFFFF; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,.12); transition: var(--transition); }
.cookie-option input[type="checkbox"]:checked + .switch { background: linear-gradient(135deg, var(--secondary), var(--primary)); }
.cookie-option input[type="checkbox"]:checked + .switch::after { transform: translateX(20px); }

.cookie-dialog .cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

/* =========================
   HELPER CLASSES
   ========================= */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #E6F4EF; color: var(--secondary); border: 1px solid #C9EAE0; font-size: 12px; }
.muted { color: var(--muted); }
.center { text-align: center; }

/* =========================
   PAGE-SPECIFIC NUANCES
   ========================= */
/* Breadcrumb small spacing */
.subheadline + .cta-group { margin-top: -6px; }

/* Icons inside paragraphs */
.content-wrapper p img { margin-right: 8px; display: inline-block; vertical-align: middle; }
.content-wrapper p { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Rating and notes */
.rating-summary p, .mobile-note { background: #FFFFFF; border: 1px solid #E6ECF3; border-radius: 10px; padding: 10px 12px; box-shadow: var(--shadow-sm); }

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