/* ===================================================
   PORTALE DIDATTICO — main.css
   Material Design 3 inspired, palette per materia
   =================================================== */

/* ---- TOKENS ---- */
:root {
  --font-main: 'Roboto', sans-serif;
  --font-mono: 'Roboto Mono', monospace;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Superficie */
  --bg:         #f6f8fa;
  --bg-surface: #ffffff;
  --bg-alt:     #f0f2f5;

  /* Testo */
  --text-primary:   #1a1a2e;
  --text-secondary: #555566;
  --text-hint:      #9999aa;

  /* Bordi */
  --border:      rgba(0,0,0,0.08);
  --border-md:   rgba(0,0,0,0.14);

  /* App bar */
  --appbar-bg:   #1a1a2e;
  --appbar-text: #ffffff;

  /* Elevation / shadow MD3 */
  --elev-1: 0 1px 2px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.06);
  --elev-2: 0 2px 4px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.08);

  /* Palette materie */
  --java-base:  #EF9F27; --java-bg:  #FAEEDA; --java-text:  #633806;
  --cpp-base:   #5DCAA5; --cpp-bg:   #E1F5EE; --cpp-text:   #085041;
  --php-base:   #85B7EB; --php-bg:   #E6F1FB; --php-text:   #0C447C;
  --sql-base:   #ED93B1; --sql-bg:   #FBEAF0; --sql-text:   #72243E;
  --reti-base:  #AFA9EC; --reti-bg:  #EEEDFE; --reti-text:  #3C3489;
  --tpsit-base: #F0997B; --tpsit-bg: #FAECE7; --tpsit-text: #4A1B0C;
  --docs-base:  #B4B2A9; --docs-bg:  #F1EFE8; --docs-text:  #444441;
}

html.dark {
  --bg:         #0d1117;
  --bg-surface: #161b22;
  --bg-alt:     #1a2030;
  --text-primary:   #e6edf3;
  --text-secondary: #8b949e;
  --text-hint:      #484f58;
  --border:      rgba(255,255,255,0.08);
  --border-md:   rgba(255,255,255,0.14);
  --appbar-bg:   #0d1117;

  --java-bg:  #412402; --java-text:  #FAC775;
  --cpp-bg:   #04342C; --cpp-text:   #9FE1CB;
  --php-bg:   #042C53; --php-text:   #B5D4F4;
  --sql-bg:   #4B1528; --sql-text:   #F4C0D1;
  --reti-bg:  #26215C; --reti-text:  #CECBF6;
  --tpsit-bg: #4A1B0C; --tpsit-text: #F5C4B3;
  --docs-bg:  #2C2C2A; --docs-text:  #D3D1C7;
}

/* ---- RESET ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-main);
  background: var(--bg);
  color: var(--text-primary);
  line-height: 1.6;
  transition: background .25s, color .25s;
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; }

/* ---- TOP APP BAR ---- */
.top-app-bar {
  position: sticky; top: 0; z-index: 100;
  background: var(--appbar-bg);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  height: 56px;
}
.top-app-bar__inner {
  max-width: 1200px; margin: 0 auto;
  height: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 0 24px;
}
.app-logo { color: #AFA9EC; font-size: 24px; }
.app-title { color: #fff; font-size: 16px; font-weight: 500; flex: 1; }
.nav-links { display: flex; gap: 4px; }
.nav-link {
  color: rgba(255,255,255,0.65);
  font-size: 14px; font-weight: 400;
  padding: 6px 14px; border-radius: 20px;
  transition: background .15s, color .15s;
}
.nav-link:hover { background: rgba(255,255,255,0.08); color: #fff; }
.nav-link.active { color: #fff; background: rgba(255,255,255,0.12); }
.theme-toggle {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.7);
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: background .15s, color .15s;
}
.theme-toggle:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* ---- HERO ---- */
.hero {
  position: relative;
  height: 520px;
  background: #0a0e1a;
  overflow: hidden;
}
#heroCanvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.hero__overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0;
  pointer-events: none;
  text-align: center;
  padding: 24px;
}
.hero__eyebrow {
  font-size: 11px; letter-spacing: 0.18em;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase; margin-bottom: 12px;
}
.hero__title {
  font-size: 40px; font-weight: 500;
  color: #fff; line-height: 1.1;
  margin-bottom: 8px;
}
.hero__subtitle {
  font-size: 15px; color: rgba(255,255,255,0.45);
  margin-bottom: 10px;
}
.hero__yt-link {
  pointer-events: all;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: #FF5555;
  margin-bottom: 24px;
  padding: 5px 14px; border-radius: 20px;
  border: 1px solid rgba(255,85,85,0.3);
  background: rgba(255,85,85,0.08);
  transition: background .15s, border-color .15s;
}
.hero__yt-link:hover { background: rgba(255,85,85,0.18); border-color: rgba(255,85,85,0.6); }
.hero__badges { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.badge {
  font-size: 11px; padding: 3px 13px;
  border-radius: 20px; border: 1px solid;
}
.badge--java  { color: var(--java-base);  border-color: rgba(239,159,39,.4);  background: rgba(239,159,39,.08); }
.badge--cpp   { color: var(--cpp-base);   border-color: rgba(93,202,165,.4);  background: rgba(93,202,165,.08); }
.badge--php   { color: var(--php-base);   border-color: rgba(133,183,235,.4); background: rgba(133,183,235,.08); }
.badge--sql   { color: var(--sql-base);   border-color: rgba(237,147,177,.4); background: rgba(237,147,177,.08); }
.badge--reti  { color: var(--reti-base);  border-color: rgba(175,169,236,.4); background: rgba(175,169,236,.08); }
.badge--tpsit { color: var(--tpsit-base); border-color: rgba(240,153,123,.4); background: rgba(240,153,123,.08); }

/* ---- LAYOUT ---- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section { padding: 64px 0; }
.section--alt { background: var(--bg-alt); }
.section__title {
  font-size: 24px; font-weight: 500;
  color: var(--text-primary); margin-bottom: 8px;
}
.section__sub {
  font-size: 15px; color: var(--text-secondary);
  margin-bottom: 36px;
}

/* ---- MATERIE GRID ---- */
.materie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.materia-card {
  display: flex; flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  cursor: pointer;
  transition: box-shadow .2s, transform .15s, border-color .2s;
  position: relative; overflow: hidden;
}
.materia-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.materia-card:hover {
  box-shadow: var(--elev-2);
  transform: translateY(-2px);
  border-color: var(--border-md);
}
.materia-card__icon {
  font-size: 28px; margin-bottom: 14px;
}
.materia-card__title {
  font-size: 16px; font-weight: 500;
  margin-bottom: 6px;
}
.materia-card__desc {
  font-size: 13px; color: var(--text-secondary);
  flex: 1; margin-bottom: 16px;
}
.materia-card__arrow {
  font-size: 18px;
  align-self: flex-end;
  opacity: 0; transform: translateX(-4px);
  transition: opacity .2s, transform .2s;
}
.materia-card:hover .materia-card__arrow {
  opacity: 1; transform: translateX(0);
}

/* Colori per materia */
.materia-card--java  { --mc: var(--java-base);  --mc-bg: var(--java-bg);  --mc-text: var(--java-text); }
.materia-card--cpp   { --mc: var(--cpp-base);   --mc-bg: var(--cpp-bg);   --mc-text: var(--cpp-text); }
.materia-card--php   { --mc: var(--php-base);   --mc-bg: var(--php-bg);   --mc-text: var(--php-text); }
.materia-card--sql   { --mc: var(--sql-base);   --mc-bg: var(--sql-bg);   --mc-text: var(--sql-text); }
.materia-card--reti  { --mc: var(--reti-base);  --mc-bg: var(--reti-bg);  --mc-text: var(--reti-text); }
.materia-card--tpsit { --mc: var(--tpsit-base); --mc-bg: var(--tpsit-bg); --mc-text: var(--tpsit-text); }
.materia-card--docs  { --mc: var(--docs-base);  --mc-bg: var(--docs-bg);  --mc-text: var(--docs-text); }

.materia-card--java::before,
.materia-card--cpp::before,
.materia-card--php::before,
.materia-card--sql::before,
.materia-card--reti::before,
.materia-card--tpsit::before,
.materia-card--docs::before  { background: var(--mc); }

.materia-card--java  .materia-card__icon,
.materia-card--cpp   .materia-card__icon,
.materia-card--php   .materia-card__icon,
.materia-card--sql   .materia-card__icon,
.materia-card--reti  .materia-card__icon,
.materia-card--tpsit .materia-card__icon,
.materia-card--docs  .materia-card__icon  { color: var(--mc); }

.materia-card--java  .materia-card__arrow,
.materia-card--cpp   .materia-card__arrow,
.materia-card--php   .materia-card__arrow,
.materia-card--sql   .materia-card__arrow,
.materia-card--reti  .materia-card__arrow,
.materia-card--tpsit .materia-card__arrow,
.materia-card--docs  .materia-card__arrow  { color: var(--mc); }

/* ---- NOVITÀ ---- */
.novita-header {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 24px;
}
.novita-header .section__title { margin-bottom: 0; }
.feed-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-secondary);
  padding: 6px 14px; border-radius: 20px;
  border: 1px solid var(--border);
  transition: border-color .15s, color .15s;
}
.feed-link:hover { border-color: var(--border-md); color: var(--text-primary); }
.novita-list { display: flex; flex-direction: column; gap: 1px; }
.novita-item {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg-surface);
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
}
.novita-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.novita-dot--java  { background: var(--java-base); }
.novita-dot--cpp   { background: var(--cpp-base); }
.novita-dot--php   { background: var(--php-base); }
.novita-dot--sql   { background: var(--sql-base); }
.novita-dot--reti  { background: var(--reti-base); }
.novita-dot--tpsit { background: var(--tpsit-base); }
.novita-dot--docs  { background: var(--docs-base); }
.novita-item__body { flex: 1; }
.novita-item__title { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.novita-item__tag {
  font-size: 11px; padding: 2px 8px; border-radius: 10px;
}
.novita-item__tag--java  { background: var(--java-bg);  color: var(--java-text); }
.novita-item__tag--cpp   { background: var(--cpp-bg);   color: var(--cpp-text); }
.novita-item__tag--php   { background: var(--php-bg);   color: var(--php-text); }
.novita-item__tag--sql   { background: var(--sql-bg);   color: var(--sql-text); }
.novita-item__tag--reti  { background: var(--reti-bg);  color: var(--reti-text); }
.novita-item__tag--tpsit { background: var(--tpsit-bg); color: var(--tpsit-text); }
.novita-item__tag--docs  { background: var(--docs-bg);  color: var(--docs-text); }
.novita-item__date {
  font-size: 12px; color: var(--text-hint);
  font-family: var(--font-mono); white-space: nowrap;
}

/* ---- EMPTY STATE ---- */
.empty-state {
  text-align: center; padding: 48px 24px;
  color: var(--text-hint);
}
.empty-state__icon { font-size: 48px; display: block; margin-bottom: 12px; }

/* ---- FOOTER ---- */
.footer {
  background: var(--appbar-bg);
  padding: 24px 0;
}
.footer .container {
  display: flex; align-items: center;
  justify-content: space-between; gap: 16px;
}
.footer p { font-size: 13px; color: rgba(255,255,255,0.4); }
.footer a { color: rgba(255,255,255,0.4); transition: color .15s; }
.footer a:hover { color: #FF5555; }

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
  .hero { height: 460px; }
  .hero__title { font-size: 28px; }
  .nav-links { display: none; }
  .top-app-bar__inner { padding: 0 16px; }
  .container { padding: 0 16px; }
  .section { padding: 40px 0; }
  .materie-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .footer .container { flex-direction: column; text-align: center; }
}
@media (max-width: 480px) {
  .materie-grid { grid-template-columns: 1fr; }
  .hero__badges { gap: 6px; }
}

/* ---- REDUCED MOTION ---- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}