/*
================================================
Custom Footer Styles for The AI Chronicle
================================================
*/

#footer {
  padding: 1rem 1rem 1rem;
  text-align: center;
  color: #acb3c2;
}

/* 1. Main Footer Grid Layout
--------------------------------------------- */
.footer-container {
    display: grid;
    /* Mobile: 1 column */
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-color-light, #eee);
}

/* Tablet: 2 columns */
@media (min-width: 768px) {
    .footer-container {
        grid-template-columns: 1fr 1fr;
    }
}

/* Desktop: 4 columns */
@media (min-width: 1024px) {
    .footer-container {
        /* Give more space to the 'about' and 'newsletter' columns */
        grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
        gap: 2rem;
    }
}


/* 2. Column Content Styling
--------------------------------------------- */
.footer-column h3 {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1rem;
    /* Uses Quark's variable for the main text color */
    color: var(--text-color-strong, #333);
}

.footer-column p {
    font-size: 0.7rem;
    line-height: 1.6;
    /* Uses Quark's variable for standard text */
    color: var(--text-color, #555);
}

.footer-column ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.footer-column li {
    margin-bottom: 0.6rem;
}

/* Style all links in the footer columns */
.footer-column ul a {
    text-decoration: none;
    /* Uses Quark's primary color variable for links */
    color: var(--primary-color, #007bff);
    transition: color 0.2s ease;
}

.footer-column ul a:hover {
    text-decoration: underline;
    /* Uses a slightly darker version of the primary color */
    filter: brightness(85%);
}


/* 3. Social Media Icons
--------------------------------------------- */
.social-icons {
    margin-top: 1rem;
}

.social-icons a {
    font-size: 1.5rem; /* Makes icons larger and easier to tap */
    margin-right: 1.25rem;
    color: var(--text-color, #555);
    text-decoration: none;
    transition: color 0.2s ease;
}

.social-icons a:hover {
    color: var(--primary-color, #007bff);
}


/* 4. Newsletter Form
--------------------------------------------- */
#newsletter-form {
    display: flex;
    /* Stack form on mobile */
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

#newsletter-form input[type="email"] {
    padding: 0.75rem;
    border: 1px solid var(--border-color, #ccc);
    border-radius: 4px;
    font-size: 0.7rem;
    width: 100%;
    /* Ensure it works in light/dark mode */
    background-color: var(--bg-color-alt, #fff);
    color: var(--text-color, #333);
}

#newsletter-form button[type="submit"] {
    padding: 0.55rem;
    border: none;
    border-radius: 4px;
    background-color: var(--primary-color, #007bff);
    color: #fff;
    font-weight: 600;
    font-size: 0.7rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#newsletter-form button[type="submit"]:hover {
    filter: brightness(85%);
}




/* 5. Bottom Legal Bar
--------------------------------------------- */
.footer-legal-bar {
    padding-top: 1.5rem;
    margin-top: 1.5rem;
    
    /* Mobile: Stack and center */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    
    font-size: 0.85rem;
    color: var(--text-color-light, #777);
}

.footer-legal-bar p {
    margin: 0;
}

.footer-legal-bar ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
    /* Mobile: items are already centered, let them flow */
    display: flex;
    flex-wrap: wrap; /* Allow links to wrap on small screens */
    justify-content: center;
    gap: 1rem;
}

.footer-legal-bar a {
    color: var(--text-color-light, #777);
    text-decoration: none;
}

.footer-legal-bar a:hover {
    color: var(--primary-color, #007bff);
    text-decoration: underline;
}



/*************/
#header .logo img, #header .logo svg {
  display: inherit;
  height: 30px;
}

/* 1. Le conteneur (la section "hero") */
.hero-video-container {
  position: relative;
  overflow: hidden; /* Important pour cacher les bords de la vidéo */
}

/* 2. La vidéo en arrière-plan */
#heroVideoBackground {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 1; /* Niveau 1 (tout au fond) */
}

/* 3. L'overlay EXISTANT du thème (on s'assure qu'il est au-dessus de la vidéo) */
.hero-video-container .image-overlay {
  position: absolute; /* Normalement déjà fait, mais on s'en assure */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2; /* Niveau 2 (par-dessus la vidéo) */
  /* Le thème Quark lui donne déjà un 'background: rgba(0,0,0,0.4)' ou similaire */
}

/* 4. Le contenu (texte, boutons) doit être par-dessus tout */
.hero-video-container .container {
  position: relative; /* Nécessaire pour que z-index fonctionne */
  z-index: 3; /* Niveau 3 (par-dessus l'overlay) */
}

/* S'assure que la section h3 ne "saute" pas quand le texte change */
.hero h3 {
  /* Ajustez min-height pour correspondre à 2 lignes de texte */
  min-height: 2.5em; 
}

/* Style le curseur de frappe (vous pouvez le personnaliser) */
.typed-cursor {
  opacity: 1;
  animation: typedjsBlink 0.7s infinite;
  color: #ffffff; /* Couleur du curseur, à adapter */
  font-weight: 100;
}

@keyframes typedjsBlink {
  50% { opacity: 0.0; }
}

/* ==========================================================================
   Style pour le bloc TL;DR personnalisé
   ========================================================================== */

.tldr-block {
  background-color: #f7f9fc;      /* Couleur de fond claire */
  border-left: 5px solid #0077b5; /* Bordure colorée (style "quote") */
  padding: 15px 20px;             /* Espace intérieur (un peu plus sur les côtés) */
  margin: 30px 0;                 /* Marge verticale pour bien le séparer du texte */
  border-radius: 4px;             /* Bords légèrement arrondis pour un look moderne */
}

/* Style pour le titre du bloc */
.tldr-block h4 {
  margin-top: 0;                  /* Enlève la marge par défaut du h4 en haut */
  margin-bottom: 15px;            /* Ajoute de l'espace sous le titre */
  color: #0077b5;                 /* Couleur du titre, assortie à la bordure */
  font-weight: bold;
}

/* Style pour la liste à puces */
.tldr-block ul {
  margin-bottom: 0;               /* Enlève la marge en bas de la liste */
  padding-left: 20px;             /* Garde une indentation pour les puces */
}

/* Style pour chaque point de la liste */
.tldr-block li {
  margin-bottom: 8px;             /* Espace entre les points pour une meilleure lisibilité */
  padding-left: 5px;              /* Petit espace entre la puce et le texte */
}

/* Cible le dernier point pour enlever la marge du bas */
.tldr-block li:last-child {
  margin-bottom: 0;
}