/* Foundation Custom Styles - Charte graphique Ayat Fadhila */
/* Couleur principale : Vert #045104 */
/* Couleur d'accent : Jaune clair #FFE861 */

/* Polices élégantes pour les titres */
.site-header h1,
.site-header h2,
.site-header h3,
.site-header h4 {
  font-family: 'Playfair Display', 'Cormorant Garamond', 'Lora', serif !important;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.site-header h1 {
  font-weight: 700;
  letter-spacing: 1px;
}

/* Header personnalisé */
.custom-header,
.site-header {
  background: linear-gradient(135deg, rgba(4, 81, 4, 0.85), rgba(4, 81, 4, 0.75)), url('/static/images/logo.jpg') center center / cover no-repeat !important;
  padding: 2rem 0;
  color: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1), 0 0 20px rgba(255, 232, 97, 0.1);
  position: relative;
  min-height: 250px;
  overflow: hidden;
}

.custom-header::before,
.site-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(4, 81, 4, 0.3);
  z-index: 0;
}

.custom-header > *,
.site-header > * {
  position: relative;
  z-index: 1;
}

.custom-header h1,
.custom-header h2,
.custom-header h3,
.custom-header h4 {
  color: white !important;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.custom-header a {
  color: white !important;
  text-decoration: underline;
  transition: all 0.3s ease;
}

.custom-header a:hover {
  color: #FFE861 !important;
  text-shadow: 0 0 8px rgba(255, 232, 97, 0.6);
}

/* Cards avec effet hover */
.card {
  transition: all 0.25s ease;
  border-radius: 16px;
  border: 2px solid transparent;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(4, 81, 4, 0.2), 0 0 20px rgba(255, 232, 97, 0.15) !important;
  border-color: rgba(255, 232, 97, 0.4) !important;
}

.card:active {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(4, 81, 4, 0.3), 0 0 15px rgba(255, 232, 97, 0.2) !important;
  border-color: rgba(255, 232, 97, 0.6) !important;
}

/* Boutons personnalisés */
.button.primary,
.button.success {
  background-color: #045104 !important;
  color: white !important;
  border: 2px solid transparent;
  transition: all 0.3s ease;
  font-weight: 600;
}

.button.primary:hover,
.button.success:hover {
  background-color: #034403 !important;
  border-color: #FFE861 !important;
  box-shadow: 0 4px 12px rgba(255, 232, 97, 0.3) !important;
  color: #FFE861 !important;
}

/* Inputs avec focus personnalisé */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
  border-color: #045104 !important;
  box-shadow: 0 0 0 2px rgba(4, 81, 4, 0.2), 0 0 8px rgba(255, 232, 97, 0.3) !important;
}

/* Checkboxes */
input[type="checkbox"] {
  accent-color: #045104;
}

input[type="checkbox"]:checked {
  filter: drop-shadow(0 0 4px rgba(255, 232, 97, 0.5));
}

/* Texte arabe */
.arabic-text {
  font-family: 'Amiri', 'Scheherazade New', 'Noto Naskh Arabic', 'Arial Unicode MS', serif;
  font-feature-settings: "liga" 1, "kern" 1;
  -webkit-font-feature-settings: "liga" 1, "kern" 1;
  -moz-font-feature-settings: "liga" 1, "kern" 1;
  text-rendering: optimizeLegibility;
  direction: rtl;
}

/* Logo */
.site-logo {
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 180px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
  display: block;
}

.logo-container {
  max-width: 600px;
  margin: 0 auto;
}

/* Top Bar personnalisé */
.top-bar {
  background: linear-gradient(135deg, #045104, #034403) !important;
}

.top-bar ul.menu {
  background: transparent;
}

.top-bar ul.menu a {
  color: white !important;
}

.top-bar ul.menu a:hover {
  color: #FFE861 !important;
}

/* Tables */
table thead {
  background: #045104 !important;
  color: white !important;
}

table tbody tr:nth-child(even) {
  background: #f2f4f8;
}

/* Alert boxes */
.alert-box.success,
.callout.success {
  background-color: rgba(4, 81, 4, 0.1);
  border-left: 4px solid #045104;
  color: #034403;
}

.alert-box.alert,
.callout.alert {
  background-color: rgba(255, 0, 0, 0.1);
  border-left: 4px solid #c33;
  color: #c33;
}

/* Titre du site - style élégant */
.site-title {
  font-family: 'Playfair Display', 'Cormorant Garamond', serif !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
}

/* Titres de sourates - style élégant */
.sourate-arabe {
  font-family: 'Playfair Display', 'Cormorant Garamond', serif !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
}

/* Barres de progression HTML5 - Style inspiré de CSS-Tricks */
/* https://css-tricks.com/html5-progress-element/ */
.custom-progress {
  width: 100%;
  height: 30px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  border-radius: 10px;
  overflow: hidden;
  background-color: #f0f0f0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) inset;
}

/* WebKit/Blink (Chrome, Safari, Edge) */
.custom-progress::-webkit-progress-bar {
  background-color: #f0f0f0;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) inset;
}

.custom-progress::-webkit-progress-value {
  background-image:
    -webkit-linear-gradient(-45deg, 
                            transparent 33%, rgba(255, 255, 255, 0.15) 33%, 
                            rgba(255, 255, 255, 0.15) 66%, transparent 66%),
    -webkit-linear-gradient(top, 
                            rgba(255, 255, 255, 0.3), 
                            rgba(0, 0, 0, 0.2)),
    -webkit-linear-gradient(left, #045104, #034403, #045104);
  border-radius: 10px;
  background-size: 40px 30px, 100% 100%, 100% 100%;
  -webkit-animation: animate-stripes 2s linear infinite;
  animation: animate-stripes 2s linear infinite;
  box-shadow: 0 2px 8px rgba(4, 81, 4, 0.4);
}

/* Firefox */
.custom-progress::-moz-progress-bar {
  background-image:
    -moz-linear-gradient(135deg, 
                        transparent 33%, rgba(255, 255, 255, 0.15) 33%, 
                        rgba(255, 255, 255, 0.15) 66%, transparent 66%),
    -moz-linear-gradient(top, 
                        rgba(255, 255, 255, 0.3), 
                        rgba(0, 0, 0, 0.2)),
    -moz-linear-gradient(left, #045104, #034403, #045104);
  border-radius: 10px;
  background-size: 40px 30px, 100% 100%, 100% 100%;
  box-shadow: 0 2px 8px rgba(4, 81, 4, 0.4);
}

/* Animation pour les rayures (WebKit uniquement) */
@-webkit-keyframes animate-stripes {
  100% { background-position: -100px 0px; }
}

@keyframes animate-stripes {
  100% { background-position: -100px 0px; }
}

/* Pourcentage au-dessus de la barre */
.progress-percentage {
  font-family: 'Lora', serif;
  letter-spacing: 0.5px;
}

/* Responsive adjustments */
@media screen and (max-width: 39.9375em) {
  .site-logo {
    max-height: 120px;
  }
  
  .logo-container {
    max-width: 90%;
  }
  
  .site-title {
    font-size: 1.8rem !important;
  }
  
  .sourate-arabe {
    font-size: 2.5rem !important;
    letter-spacing: 1px !important;
  }
  
  .custom-progress {
    height: 25px;
  }
  
  .progress-percentage {
    font-size: 0.8rem !important;
  }
}