/* ==========================================================
   GERALFIN ACADEMY — UPDATE LAYER
   Load this AFTER style.css, responsive.css and
   instructor-dashboard.css:

   <link rel="stylesheet" href="assets/css/style.css">
   <link rel="stylesheet" href="assets/css/responsive.css">
   <link rel="stylesheet" href="assets/css/instructor-dashboard.css">
   <link rel="stylesheet" href="assets/css/geralfin-updates.css">

   Nothing here is destructive — it overrides existing rules
   by cascade order, so the original three files stay intact
   and this can be removed with zero risk at any time.
   ========================================================== */

/* ----------------------------------------------------------
   1. GLOBAL TEXT SCALE-DOWN
   Section titles, headings and body copy trimmed ~12-18%
   across the whole site.
---------------------------------------------------------- */
body{ font-size:15px; }

.section-title h2,
.section-heading h2{ font-size:32px; margin-bottom:12px; }
.section-title p,
.section-heading p{ font-size:15px; }

.hero-content h1{ font-size:46px; }
.hero-content p{ font-size:16px; }
.hero-badge{ padding:8px 16px; font-size:13px; }

.page-hero h1{ font-size:44px; }
.page-hero p{ font-size:17px; }

.cta-section h2{ font-size:34px; }
.cta-section p{ font-size:16px; }

.faculty-section h2{ font-size:32px; }
.faculty-section .section-title p{ font-size:15px; }

h1{ font-size:32px; }
h2{ font-size:26px; }
h3{ font-size:19px; }
p{ line-height:1.65; }

/* ----------------------------------------------------------
   2. CARDS / BOXES — reduced padding + tighter type
   Applies to every major card component across the site.
---------------------------------------------------------- */
.market-card,
.why-card,
.course-card .course-content,
.tool-card,
.news-card,
.testimonial-card,
.mission-card,
.basic-card,
.roadmap-item,
.dashboard-card,
.calculator-card,
.contact-info,
.contact-form,
.quiz-card,
.admin-card,
.instructor-card,
.analytics-card,
.action-card,
.quick-card,
.glossary-card,
.guide-card,
.investment-checklist,
.risk-card,
.wealth-card,
.stat-card,
.stat-box,
.faculty-content,
.download-card,
.register-card,
.login-card,
.upload-card,
.course-form-card,
.detail-box,
.content-card,
.announcement-card{
  padding:22px;
  border-radius:14px;
}

.market-card h3,
.why-card h3,
.tool-card h3,
.news-card h3,
.mission-card h3,
.basic-card h3,
.glossary-card h3,
.guide-card h2,
.course-content h3{
  font-size:17px;
  margin-bottom:10px;
}

.market-card h1,
.market-card h2,
.dashboard-card h2,
.admin-card h2,
.instructor-card h2,
.analytics-card h2,
.stat-card h2,
.stat-box h2{
  font-size:26px;
  margin-bottom:8px;
}

.why-card p,
.tool-card p,
.news-card p,
.mission-card p,
.basic-card p,
.glossary-card p,
.course-content p,
.testimonial-card p{
  font-size:13.5px;
  line-height:1.6;
  margin-bottom:14px;
}

.why-icon,
.tool-icon,
.roadmap-icon{
  width:64px;
  height:64px;
  font-size:26px;
  margin-bottom:16px;
}

.market-card .icon{
  width:52px;
  height:52px;
  font-size:20px;
  margin-bottom:16px;
}

/* Grid gaps tightened slightly so smaller cards don't float */
.market-grid,
.why-grid,
.course-grid,
.tools-grid,
.news-grid,
.testimonial-grid,
.basics-grid,
.glossary-grid,
.mission-grid,
.faculty-grid,
.admin-grid,
.instructor-cards,
.dashboard-grid,
.quick-actions-grid{
  gap:20px;
}

/* Buttons — trimmed to match the smaller card scale */
.btn-primary,
.btn-secondary{ padding:13px 26px; font-size:14px; }
.primary-btn{ padding:12px 22px; font-size:14px; }
.register-btn,
.login-btn{ height:38px; padding:0 18px; font-size:14px; }
.continue-btn,
.continue-learning-btn{ padding:10px 20px; font-size:14px; }

/* ----------------------------------------------------------
   3. TABLES — tighter rows, smaller type
---------------------------------------------------------- */
.admin-table th,
.admin-table td,
.course-table th,
.course-table td,
.student-table th,
.student-table td,
.dashboard-table th,
.dashboard-table td,
.instructor-table th,
.instructor-table td,
.activity-table th,
.activity-table td{
  padding:11px 14px;
  font-size:13.5px;
}

.admin-table th,
.course-table th,
.student-table th,
.dashboard-table th,
.instructor-table th{
  font-size:12.5px;
  letter-spacing:.3px;
  text-transform:uppercase;
}

.table-avatar,
.student-avatar{ width:42px; height:42px; }

.status,
.status-badge,
.badge{ padding:5px 12px; font-size:12px; }

/* ----------------------------------------------------------
   4. ANIMATIONS
---------------------------------------------------------- */
@keyframes fadeInUp{
  from{ opacity:0; transform:translateY(22px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes fadeIn{
  from{ opacity:0; } to{ opacity:1; }
}
@keyframes popIn{
  from{ opacity:0; transform:scale(.92); }
  to{ opacity:1; transform:scale(1); }
}
@keyframes underlineGrow{
  from{ width:0; } to{ width:60px; }
}

/* Section titles ease in as they're built */
.section-title h2,
.section-heading h2{
  animation:fadeInUp .6s ease both;
}
.section-title p,
.section-heading p{
  animation:fadeInUp .6s ease .1s both;
}

/* Hero entrance */
.hero-content h1{ animation:fadeInUp .7s ease both; }
.hero-content p{ animation:fadeInUp .7s ease .12s both; }
.hero-buttons{ animation:fadeInUp .7s ease .22s both; }
.hero-badge{ animation:fadeIn .6s ease both; }

/* Card grids — staggered rise-in, plays once per view.
   Add class="in-view" via a tiny IntersectionObserver if you
   want it to trigger on scroll; otherwise it plays on load. */
.market-card,
.why-card,
.course-card,
.tool-card,
.news-card,
.testimonial-card,
.mission-card,
.basic-card,
.roadmap-item,
.glossary-card,
.guide-card,
.risk-card,
.wealth-card,
.faculty-card,
.download-card,
.admin-card,
.instructor-card,
.analytics-card,
.action-card,
.quick-card,
.stat-card,
.stat-box{
  animation:fadeInUp .55s ease both;
}
.market-grid > :nth-child(1),.why-grid > :nth-child(1),.course-grid > :nth-child(1),
.tools-grid > :nth-child(1),.news-grid > :nth-child(1),.testimonial-grid > :nth-child(1),
.faculty-grid > :nth-child(1),.admin-grid > :nth-child(1){ animation-delay:.05s; }
.market-grid > :nth-child(2),.why-grid > :nth-child(2),.course-grid > :nth-child(2),
.tools-grid > :nth-child(2),.news-grid > :nth-child(2),.testimonial-grid > :nth-child(2),
.faculty-grid > :nth-child(2),.admin-grid > :nth-child(2){ animation-delay:.12s; }
.market-grid > :nth-child(3),.why-grid > :nth-child(3),.course-grid > :nth-child(3),
.tools-grid > :nth-child(3),.news-grid > :nth-child(3),.testimonial-grid > :nth-child(3),
.faculty-grid > :nth-child(3),.admin-grid > :nth-child(3){ animation-delay:.19s; }
.market-grid > :nth-child(4),.why-grid > :nth-child(4),.course-grid > :nth-child(4),
.tools-grid > :nth-child(4),.news-grid > :nth-child(4),.testimonial-grid > :nth-child(4),
.faculty-grid > :nth-child(4),.admin-grid > :nth-child(4){ animation-delay:.26s; }
.market-grid > :nth-child(n+5),.why-grid > :nth-child(n+5),.course-grid > :nth-child(n+5),
.tools-grid > :nth-child(n+5),.news-grid > :nth-child(n+5),.testimonial-grid > :nth-child(n+5),
.faculty-grid > :nth-child(n+5),.admin-grid > :nth-child(n+5){ animation-delay:.32s; }

/* Smooth, consistent hover lift (replaces mismatched
   translateY values scattered across the original file) */
.market-card,.why-card,.course-card,.tool-card,.news-card,.testimonial-card,
.mission-card,.basic-card,.roadmap-item,.glossary-card,.guide-card,
.risk-card,.wealth-card,.faculty-card,.download-card,.admin-card,
.instructor-card,.analytics-card,.quick-card,.stat-card,.action-card{
  transition:transform .3s ease, box-shadow .3s ease;
}
.market-card:hover,.why-card:hover,.course-card:hover,.tool-card:hover,
.news-card:hover,.testimonial-card:hover,.mission-card:hover,.basic-card:hover,
.roadmap-item:hover,.glossary-card:hover,.guide-card:hover,.risk-card:hover,
.wealth-card:hover,.faculty-card:hover,.download-card:hover,.admin-card:hover,
.instructor-card:hover,.analytics-card:hover,.quick-card:hover,
.stat-card:hover,.action-card:hover{
  transform:translateY(-6px);
  box-shadow:0 14px 30px rgba(7,44,99,.12);
}

/* Buttons — tactile press feedback */
.btn-primary,.btn-secondary,.primary-btn,.register-btn,.login-btn,
.enroll-btn,.continue-btn,.continue-learning-btn,.create-course-btn,
.action-btn,.view-btn,.approve-btn,.suspend-btn,.edit-btn,.delete-btn{
  transition:transform .2s ease, background .3s ease, box-shadow .2s ease;
}
.btn-primary:active,.btn-secondary:active,.primary-btn:active,
.register-btn:active,.enroll-btn:active,.continue-btn:active,
.create-course-btn:active{
  transform:scale(.96);
}

/* Modals — pop in the instant JS flips display:none → flex
   (CSS animations auto-replay whenever an element re-enters
   the render tree, so no JS changes are required) */
.register-modal-content,
.login-modal-content,
.modal-content{
  animation:popIn .3s ease;
}

/* Table rows — quick staggered fade so lists feel alive */
.admin-table tbody tr,
.course-table tbody tr,
.student-table tbody tr,
.instructor-table tbody tr,
.dashboard-table tbody tr{
  animation:fadeIn .4s ease both;
}
.admin-table tbody tr:hover,
.course-table tbody tr:hover,
.student-table tbody tr:hover,
.instructor-table tbody tr:hover,
.dashboard-table tbody tr:hover{
  background:#f4f8ff;
  transition:background .25s ease;
}

/* Progress bars — smoother animated fill */
.progress-fill,
.goal-fill,
.completion-fill,
.learning-progress-fill{
  transition:width 1s cubic-bezier(.4,0,.2,1);
}

/* Underline accent for section titles, drawn on load */
.section-title h2::after,
.section-heading h2::after{
  content:"";
  display:block;
  width:60px;
  height:3px;
  background:var(--secondary,#D4AF37);
  margin:12px auto 0;
  border-radius:3px;
  animation:underlineGrow .6s ease .3s both;
}

/* Respect users who've asked for less motion */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ----------------------------------------------------------
   5. MOBILE — keep the same reductions, just tighter
---------------------------------------------------------- */
@media (max-width:768px){
  body{ font-size:14px; }
  .hero-content h1{ font-size:32px; }
  .section-title h2,.section-heading h2{ font-size:24px; }
  .market-card,.why-card,.tool-card,.news-card,.mission-card,
  .basic-card,.dashboard-card,.admin-card,.instructor-card{
    padding:18px;
  }
  .admin-table th,.admin-table td,
  .course-table th,.course-table td,
  .student-table th,.student-table td{
    padding:9px 10px;
    font-size:12.5px;
  }
}

.footer-bottom{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;
    flex-wrap:wrap;
    text-align:center;
}

.footer-legal-links{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:14px;
}

.footer-legal-links a{
    color:#ddd;
    transition:.3s;
}

.footer-legal-links a:hover{
    color:var(--secondary);
}

.footer-legal-links span{
    color:rgba(255,255,255,.3);
}

@media (max-width:480px){
    .footer-bottom{
        flex-direction:column;
        gap:8px;
    }
}

/* ----------------------------------------------------------
   6. FACULTY FIXES — restore avatar clearance the generic
   card-padding rule above accidentally overwrote, and
   tighten the grid spacing.
---------------------------------------------------------- */
.faculty-content{
  padding:68px 18px 22px;   /* restore clearance for the avatar */
}
.faculty-grid{
  gap:16px;
}
.faculty-card{
  max-width:none;
  width:100%;
}

@media (min-width:1201px){
  .faculty-grid{
    gap:18px;
  }
}

@media (max-width:768px){
  .faculty-grid{
    gap:18px;
  }
  .faculty-card{
    max-width:320px;   /* keep single-column mobile cards from stretching edge to edge */
    width:100%;
  }
}

@media (max-width:480px){
  .faculty-grid{
    gap:16px;
  }
}