/* ==============================
   PORTAL PROF. CLAUDIO MATOS
   Estilo unificado para todas as páginas
   ============================== */

/* RESET BÁSICO */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* CONFIGURAÇÕES GERAIS */
html {
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
  background: #f8f9fa;
  color: #222;
  transition: background 0.3s, color 0.3s;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* FOCOS VISÍVEIS */
:focus {
  outline: 3px solid #007bff;
  outline-offset: 3px;
}

/* CABEÇALHO */
header {
  background: linear-gradient(90deg, #1a237e, #283593);
  color: #fff;
  padding: 1rem;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

header .brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}

header #logo {
  width: 120px;
  height: auto;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255,255,255,0.5);
}

header h1 {
  font-size: 1.8rem;
}

header p {
  font-size: 1rem;
  max-width: 600px;
  margin: 0.5rem auto;
}

/* MENU PRINCIPAL */
#menu {
  margin-top: 1rem;
}

#menu ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem;
  padding: 0;
}

#menu a {
  text-decoration: none;
  color: #fff;
  background: #3949ab;
  padding: 0.6rem 1rem;
  border-radius: 5px;
  transition: background 0.2s, transform 0.2s;
}

#menu a:hover,
#menu a:focus {
  background: #5c6bc0;
  transform: scale(1.05);
}

/* BOTÃO LER PÁGINA */
#lerPaginaBtn {
  margin-top: .8rem;
  background: #ffb300;
  color: #000;
  padding: .6rem 1.2rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s;
}
#lerPaginaBtn:hover,
#lerPaginaBtn:focus {
  background: #ffc947;
}

/* OPÇÕES DE ACESSIBILIDADE */
#acessibilidade {
  background: #e8eaf6;
  padding: .8rem;
  border-radius: 8px;
  margin: 1rem auto;
  max-width: 500px;
}
#acessibilidade h4 {
  margin-bottom: .5rem;
  font-size: 1.1rem;
  color: #1a237e;
}
#acessibilidade button {
  margin: .3rem;
  padding: .5rem .8rem;
  border: none;
  border-radius: 5px;
  background: #3949ab;
  color: #fff;
  cursor: pointer;
  transition: background 0.3s;
}
#acessibilidade button:hover,
#acessibilidade button:focus {
  background: #5c6bc0;
}

/* CONTEÚDO PRINCIPAL */
main {
  flex: 1;
  max-width: 1000px;
  margin: 2rem auto;
  padding: 1rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

main h2 {
  color: #1a237e;
  margin-bottom: .8rem;
  font-size: 1.4rem;
}

main p {
  margin-bottom: .8rem;
  font-size: 1rem;
}

/* GRADE DE VÍDEOS */
.grade-videos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.video-item {
  background: #f1f2f6;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s;
  text-align: center;
}
.video-item:hover {
  transform: scale(1.03);
}
.video-item img {
  width: 100%;
  height: auto;
}
.video-item h3 {
  background: #283593;
  color: #fff;
  margin: 0;
  padding: .5rem;
  font-size: 1rem;
}

/* FORMULÁRIO DE CONTATO */
form {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  background: #e8eaf6;
  padding: 1rem;
  border-radius: 10px;
  margin-top: 1.5rem;
}

form label {
  font-weight: bold;
  color: #1a237e;
}

form input,
form textarea {
  padding: .6rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
}

form button[type="submit"] {
  background: #283593;
  color: #fff;
  border: none;
  padding: .7rem 1.2rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.3s;
}

form button:hover,
form button:focus {
  background: #3f51b5;
}

/* NOTÍCIAS DE TECNOLOGIA */
.noticia-item h3 {
  font-size: 1.1rem;
}
.noticia-item p {
  font-size: .95rem;
}

/* RODAPÉ */
footer, .footer-inner {
  background: #1a237e;
  color: #fff;
  text-align: center;
  padding: 1.5rem;
  border-top: 4px solid #3949ab;
}

.footer-brand {
  font-size: 1.2rem;
  margin-bottom: .8rem;
  font-weight: bold;
}

.rodape-info {
  margin-bottom: .8rem;
}

#falarHora {
  background: #ffb300;
  color: #000;
  border: none;
  padding: .5rem .8rem;
  border-radius: 5px;
  cursor: pointer;
  margin-right: .5rem;
}
#falarHora:hover {
  background: #ffc947;
}

.social-nav {
  margin-top: .8rem;
}
.social-list {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 0;
}
.social-link svg {
  fill: #fff;
  transition: transform 0.3s;
}
.social-link:hover svg,
.social-link:focus svg {
  transform: scale(1.2);
  fill: #ffeb3b;
}
.footer-copy {
  margin-top: 1rem;
  font-size: .9rem;
  color: #ddd;
}

/* MODO ALTO CONTRASTE */
.high-contrast {
  background: #000 !important;
  color: #fff !important;
}
.high-contrast a {
  color: #0ff !important;
}
.high-contrast header,
.high-contrast footer,
.high-contrast button {
  background: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}

/* MODO ESCURO */
.mode-dark {
  background: #121212;
  color: #e0e0e0;
}
.mode-dark header,
.mode-dark footer {
  background: #0d47a1;
}
.mode-dark main {
  background: #1e1e1e;
}
.mode-dark a {
  color: #90caf9;
}

/* RESPONSIVIDADE */
@media (max-width: 768px) {
  header h1 {
    font-size: 1.5rem;
  }
  #menu a {
    font-size: .95rem;
    padding: .5rem .8rem;
  }
  main {
    margin: 1rem;
  }
  .grade-videos {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 500px) {
  .grade-videos {
    grid-template-columns: 1fr;
  }
}