/* =============================================================
   Resume Site — Custom CSS overrides for Tailwind (v3)
   Файл: static/resume/style.css
   ============================================================= */

/***************************************************************
  0. PALETTE & DARK-MODE TOGGLE
****************************************************************/
:root {
    /* Core brand */
    --color-primary: #edb30e; /* amber-500 */
    --color-secondary: #0ea5e9; /* sky-500 */
    --color-tertiary: #10b981; /* emerald-500 */
    --color-contrast: #f43f5e; /* rose-500 */
  
    /* Neutral surfaces */
    --color-bg-light: #f9fafb; /* gray-50 */
    --color-bg-dark: #0f172a;  /* slate-900 */
    --color-text-light: #ffffff;
    --color-text-dark: #0f172a;
  }
  html.dark {
    --color-bg-light: var(--color-bg-dark);
    --color-text-dark: var(--color-text-light);
  }
  
  /***************************************************************
    1. GLOBAL RESETS & HELPERS
  ****************************************************************/
  *,*::before,*::after{box-sizing:border-box;}
  ::selection{background:var(--color-primary);color:#fff;}
  body{line-height:1.6;-webkit-font-smoothing:antialiased;}
  img{max-width:100%;height:auto;display:block;}
  
  /* Smooth anchor offset for fixed header */
  .scroll-section{scroll-margin-top:90px;}
  
  /* Simple, subtle scrollbar */
  ::-webkit-scrollbar{width:10px;height:10px;}
  ::-webkit-scrollbar-track{background:transparent;}
  ::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.15);border-radius:10px;}
  html.dark ::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.2);}
  
  /***************************************************************
    2. TYPOGRAPHY
  ****************************************************************/
  h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.25;}
  .hero-heading span{display:block;font-weight:800;line-height:.9;text-transform:uppercase;color:var(--color-primary);text-shadow:4px 4px 10px rgba(0,0,0,.35);} /* Tailwind sizes в markup */
  
  /***************************************************************
    3. NAVIGATION
  ****************************************************************/
  nav a{transition:color .2s ease-out;}
  nav a.active,nav a:hover{color:var(--color-primary)!important;}
  
  /***************************************************************
    4. HERO IMAGE WRAPPER (Padding & Shadow)
  ****************************************************************/
  .hero-wrapper{padding:1.25rem;/* 20px */}
  .hero-wrapper>img{border-radius:1.25rem;box-shadow:0 8px 24px rgba(0,0,0,.3);} /* для <img ...> внутри wrapper */
  
  /***************************************************************
    5. SECTIONS & COLOR THEMES
  ****************************************************************/
  .section{padding:5rem 1rem;} /* 80px vertical */
  .section--light{background:var(--color-bg-light);color:var(--color-text-dark);} /* default */
  .section--dark{background:var(--color-bg-dark);color:var(--color-text-light);} /* dark alt */
  .section--primary{background:var(--color-primary);color:#fff;}
  .section--secondary{background:var(--color-secondary);color:#fff;}
  .section--tertiary{background:var(--color-tertiary);color:#fff;}
  .section--contrast{background:var(--color-contrast);color:#fff;}
  
  /***************************************************************
    6. CARDS (projects)
  ****************************************************************/
  .card{background:#fff; /* light mode */
        border:1px solid #e2e8f0; /* slate-200 */
        border-radius:1rem;box-shadow:0 1px 4px rgba(0,0,0,.05);
        overflow:hidden;transition:transform .2s ease,box-shadow .2s ease;}
  html.dark .card{background:#1e293b;border-color:#334155;} /* slate-800/700 */
  .card:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(0,0,0,.1);}
  .card-img{aspect-ratio:16/9;object-fit:cover;}
  
  /***************************************************************
    7. SKILL BARS
  ****************************************************************/
  .skill{position:relative;display:block;height:.75rem;background:#e5e7eb;border-radius:9999px;overflow:hidden;}
  .skill-value{position:absolute;top:0;left:0;height:100%;background:var(--color-primary);transition:width .6s ease;}
  
  /***************************************************************
    8. BUTTONS
  ****************************************************************/
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.5rem 1.5rem;border-radius:9999px;font-weight:500;background:var(--color-primary);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.15);transition:filter .15s ease,box-shadow .15s ease;}
  .btn:hover{filter:brightness(1.05);box-shadow:0 4px 14px rgba(0,0,0,.2);} 
  .btn-outline{background:transparent;color:var(--color-primary);border:2px solid var(--color-primary);box-shadow:none;}
  .btn-outline:hover{background:var(--color-primary);color:#fff;}
  
  /***************************************************************
    9. CONTACT FORM
  ****************************************************************/
  .contact-form label{display:block;font-size:.875rem;margin-bottom:.25rem;font-weight:500;}
  .contact-form input,.contact-form textarea{width:100%;border:1px solid #e2e8f0;border-radius:.5rem;background:#fff;padding:.5rem 1rem;font-size:.875rem;resize:vertical;transition:border-color .2s ease,box-shadow .2s ease;} 
  .contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(237,179,14,.25);} 
  html.dark .contact-form input,html.dark .contact-form textarea{background:#1e293b;border-color:#334155;color:#fff;}
  
  /***************************************************************
   10. ANIMATIONS
  ****************************************************************/
  @keyframes fadeInUp{0%{opacity:0;transform:translateY(20px);}100%{opacity:1;transform:translateY(0);}}
  .animate-fadeInUp{animation:fadeInUp .4s ease-out both;}
  
  /***************************************************************
   11. MISC OVERRIDES
  ****************************************************************/
  /* Badge / tag component */
  .badge{display:inline-block;padding:.25rem .75rem;font-size:.75rem;font-weight:600;border-radius:9999px;background:rgba(237,179,14,.15);color:var(--color-primary);}

  .clamp-3 {          /* 3-строчное обрезание */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }