/**
 * Figma Design System - Warm Gold Portfolio Theme
 * Design from Figma: https://www.figma.com/design/6b454gN3c3hkeHsaYhm0dQ
 * This file extends and overrides style.css to apply Figma design
 * Version: 2.0 - Fixed all conflicts
 */

/* ===== CSS VARIABLES (Design Tokens from Figma) ===== */
:root {
  /* Color Palette from Figma */
  --color-primary: #000000;
  --color-background: #F5F5F5;
  --color-surface: #FFFFFF;
  --color-surface-light: #FAFAFA;
  --color-accent: #F5DFA5;
  --color-accent-dark: #D8B457;
  --color-accent-medium: #ECC868;
  --color-accent-light: #F9EAC2;
  --color-accent-warmwhite: #FDFAF2;
  --color-text-secondary: #6D6D6D;
  --color-text-dark: #343434;
  --color-gray-light: #D9D9D9;
  --color-gray-medium: #E6E6E6;

  /* Gradient Definitions */
  --gradient-header: linear-gradient(180deg, #F5DFA5 0%, #FFF8E4 50%, #FFFFFF 100%);
  --gradient-section-badge: linear-gradient(180deg, #F3DDA3 0%, #FFF2D1 25%, #F6E4B2 50%, #F5DFA5 75%, #D8B457 100%);
  --gradient-skill-bar: linear-gradient(90deg, #F5DFA5 0%, #F6E4B2 50%, #F9EAC2 100%);
  --gradient-button: linear-gradient(180deg, #F5DFA5 0%, #ECC868 100%);

  /* Typography from Figma */
  --font-heading: 'Lustria', Georgia, serif;
  --font-nav: 'Doppio One', Arial, sans-serif;
  --font-card-label: 'Francois One', Arial, sans-serif;
  --font-contact: 'Oranienbaum', Georgia, serif;
  --font-footer: 'Philosopher', Georgia, serif;
  --font-body: 'Lustria', Georgia, serif;

  /* Shadows from Figma */
  --shadow-soft: 0 4px 50px rgba(0, 0, 0, 0.10);
  --shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.25);
  --shadow-card: 0 4px 49px rgba(0, 0, 0, 0.25);
  --shadow-skill: 0 2px 40px rgba(0, 0, 0, 0.10);

  /* Spacing */
  --nav-height: 113px;
  --card-size: 263px;
  --content-max-width: 1680px;
}

/* ===== GOOGLE FONTS ===== */
@import url('https://fonts.googleapis.com/css2?family=Lustria&family=Doppio+One&family=Francois+One&family=Oranienbaum&family=Philosopher&display=swap');

/* ===== BODY & BASE ===== */
body {
  background-color: var(--color-background) !important;
  font-family: var(--font-body) !important;
  color: var(--color-text-dark) !important;
}

/* ===== NAVIGATION ===== */
.fh5co-nav {
  background: var(--gradient-header) !important;
  height: var(--nav-height) !important;
  min-height: var(--nav-height) !important;
  box-shadow: var(--shadow-soft) !important;
  border-bottom: none !important;
  padding: 0 !important;
}

.fh5co-nav .fh5co-top-logo {
  display: flex !important;
  align-items: center !important;
  height: var(--nav-height) !important;
}

#fh5co-logo a,
.fh5co-nav #fh5co-logo a {
  font-family: var(--font-nav) !important;
  font-size: 39px !important;
  color: #000000 !important;
  font-weight: 400 !important;
  letter-spacing: 1px !important;
}

.fh5co-nav ul.fh5co-main-menu li a,
.fh5co-nav #fh5co-main-menu li a {
  font-family: var(--font-nav) !important;
  font-size: 17px !important;
  color: #000000 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  padding: 10px 15px !important;
}

.fh5co-nav ul.fh5co-main-menu li a:hover,
.fh5co-nav ul.fh5co-main-menu li.fh5co-active > a,
.fh5co-nav ul li.active > a {
  color: var(--color-accent-dark) !important;
}

/* FIX: Dropdown menu - ensure visibility */
.fh5co-nav ul li.has-dropdown .dropdown {
  background: var(--color-surface) !important;
  border: none !important;
  box-shadow: var(--shadow-medium) !important;
  border-radius: 4px !important;
}

.fh5co-nav ul li.has-dropdown .dropdown li a {
  color: #000000 !important;
  font-size: 15px !important;
}

.fh5co-nav ul li.has-dropdown .dropdown li a:hover {
  color: var(--color-accent-dark) !important;
}

.fh5co-nav ul li.has-dropdown .dropdown:before {
  border-bottom-color: var(--color-surface) !important;
}

/* Social icons in nav */
.fh5co-nav ul.fh5co-social li a,
.fh5co-nav .fh5co-social li a {
  color: #000000 !important;
  font-size: 20px !important;
}

.fh5co-nav ul.fh5co-social li a:hover,
.fh5co-nav .fh5co-social li a:hover {
  color: var(--color-accent-dark) !important;
}

/* ===== HEADINGS ===== */
.fh5co-heading h2 {
  font-family: var(--font-heading) !important;
  font-size: 50px !important;
  font-weight: 400 !important;
  color: var(--color-text-dark) !important;
  margin-bottom: 20px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.fh5co-heading p {
  font-family: var(--font-body) !important;
  font-size: 20px !important;
  color: var(--color-text-secondary) !important;
  line-height: 1.6 !important;
}

/* ===== WORK/PROJECTS SECTION ===== */
#fh5co-work {
  background: var(--color-surface-light) !important;
  padding: 80px 0 !important;
}

#fh5co-work .fh5co-heading {
  margin-bottom: 50px !important;
}

/* FIX: Make work cards visible */
.work .work-grid {
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  width: 263px !important;
  height: 263px !important;
  margin: 0 auto 20px !important;
}

.work .work-grid .inner {
  opacity: 1 !important;
  visibility: visible !important;
  background: transparent !important;
  display: table !important;
  height: 100% !important;
  width: 100% !important;
}

.work .work-grid .inner .desc {
  display: none !important;
}

.work .work-grid .inner .desc h3 {
  font-family: var(--font-card-label) !important;
  font-size: 25px !important;
  color: var(--color-primary) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin-bottom: 8px !important;
}

.work .work-grid .inner .desc h3 a {
  color: var(--color-primary) !important;
}

.work:hover .work-grid .inner .desc h3 a {
  color: var(--color-accent-dark) !important;
}

.work .work-grid .inner .desc .cat {
  font-family: var(--font-body) !important;
  font-size: 17px !important;
  color: var(--color-text-secondary) !important;
  text-transform: uppercase !important;
}

.work:hover .inner {
  opacity: 1 !important;
}

/* ===== AUTHOR/PROFILE SECTION ===== */
#fh5co-author {
  background: var(--color-accent-warmwhite) !important;
  padding: 80px 0 !important;
}

#fh5co-author .fh5co-heading h2 {
  font-family: var(--font-heading) !important;
  color: var(--color-text-dark) !important;
}

.author {
  background: var(--color-surface) !important;
  box-shadow: var(--shadow-soft) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

.author-inner {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.author .desc {
  padding: 40px !important;
}

.author .desc h3 {
  font-family: var(--font-heading) !important;
  font-size: 38px !important;
  color: var(--color-text-dark) !important;
  margin-bottom: 15px !important;
}

.author .desc > span {
  font-family: var(--font-card-label) !important;
  font-size: 20px !important;
  color: var(--color-accent-dark) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  display: block !important;
  margin-bottom: 20px !important;
}

.author .desc p {
  font-family: var(--font-body) !important;
  font-size: 20px !important;
  color: var(--color-text-secondary) !important;
  line-height: 1.6 !important;
  margin-bottom: 20px !important;
}

/* ===== SOCIAL ICONS ===== */
.fh5co-social-icons {
  list-style: none !important;
  padding: 0 !important;
  margin: 30px 0 0 0 !important;
  display: flex !important;
  gap: 15px !important;
}

.fh5co-social-icons li {
  list-style: none !important;
}

.fh5co-social-icons a {
  width: 50px !important;
  height: 50px !important;
  background: var(--gradient-button) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--color-text-dark) !important;
  font-size: 20px !important;
  transition: all 0.3s ease !important;
  box-shadow: var(--shadow-skill) !important;
}

.fh5co-social-icons a:hover {
  background: var(--color-accent-dark) !important;
  color: var(--color-surface) !important;
  transform: translateY(-3px) !important;
}

/* ===== BUTTONS ===== */
.btn-primary,
#fh5co-started .btn {
  background: var(--gradient-button) !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 12px 30px !important;
  font-family: var(--font-nav) !important;
  font-size: 17px !important;
  color: var(--color-text-dark) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  box-shadow: var(--shadow-skill) !important;
  transition: all 0.3s ease !important;
}

.btn-primary:hover,
#fh5co-started .btn:hover {
  background: var(--color-accent-dark) !important;
  color: var(--color-surface) !important;
  box-shadow: var(--shadow-medium) !important;
  transform: translateY(-2px) !important;
  border: none !important;
}

.btn-outline {
  background: transparent !important;
  border: 2px solid var(--color-accent-dark) !important;
  color: var(--color-accent-dark) !important;
}

.btn-outline:hover {
  background: var(--color-accent-dark) !important;
  color: var(--color-surface) !important;
}

/* ===== CONTACT/CTA SECTION ===== */
#fh5co-started {
  background: var(--gradient-section-badge) !important;
  padding: 80px 0 !important;
  text-align: center !important;
}

#fh5co-started .fh5co-heading h2 {
  font-family: var(--font-contact) !important;
  font-size: 70px !important;
  color: var(--color-text-dark) !important;
  margin-bottom: 20px !important;
}

#fh5co-started .fh5co-heading p {
  font-family: var(--font-body) !important;
  font-size: 20px !important;
  color: var(--color-text-secondary) !important;
  margin-bottom: 30px !important;
}

/* ===== FOOTER ===== */
#fh5co-footer {
  background: var(--color-text-dark) !important;
  color: var(--color-gray-light) !important;
  padding: 50px 0 !important;
  font-family: var(--font-footer) !important;
}

#fh5co-footer .fh5co-social li a {
  color: var(--color-gray-light) !important;
}

#fh5co-footer .fh5co-social li a:hover {
  color: var(--color-accent) !important;
}

#fh5co-footer p {
  color: var(--color-gray-light) !important;
}

/* FIX: Footer links visibility */
#fh5co-footer .fh5co-footer-links li a {
  color: var(--color-gray-light) !important;
}

#fh5co-footer .fh5co-footer-links li a:hover {
  color: var(--color-accent) !important;
}

/* ===== LOADER ===== */
.fh5co-loader {
  background: var(--color-surface) !important;
  position: fixed !important;
  left: 0px !important;
  top: 0px !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 9999 !important;
  background-image: url(../images/loader.gif) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* FIX: Animate boxes - ALWAYS visible by default, animation is enhancement */
.js .animate-box,
.animate-box {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Animate boxes that also have animated-fast class (from waypoint animation) */
.animate-box.animated-fast {
  opacity: 1 !important;
  visibility: visible !important;
  animation: fadeInUp 0.6s ease-out !important;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* GOTOTOP */
.gototop {
  background: var(--color-accent) !important;
  border-radius: 50% !important;
}

.gototop:hover {
  background: var(--color-accent-dark) !important;
}

/* ===== ANIMATIONS ===== */
.animate-box {
  animation: fadeInUp 0.6s ease-out !important;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== RESPONSIVE ===== */
@media screen and (max-width: 768px) {
  .fh5co-nav {
    height: auto !important;
    min-height: auto !important;
  }
  
  .fh5co-heading h2 {
    font-size: 35px !important;
  }
  
  #fh5co-started .fh5co-heading h2 {
    font-size: 40px !important;
  }
  
  .work .work-grid .inner {
    opacity: 1 !important;
  }
}

/* ===== LINKS ===== */
a {
  color: var(--color-accent-dark) !important;
  transition: color 0.3s ease !important;
}

a:hover {
  color: var(--color-text-dark) !important;
  text-decoration: none !important;
}

/* ===== CONTAINERS ===== */
.container {
  max-width: var(--content-max-width) !important;
}