/* =====================================================
   mobile.css — Mobile overrides for 390px (iPhone 14)
   Loaded after style.css and a11y.css.
   All rules scoped to max-width: 480px.
   ===================================================== */

@media (max-width: 480px) {

  /* --- General layout --- */
  .container {
    padding: 0 1rem;
  }

  /* --- Navigation: hide lang/theme toggles from header — they're in the burger menu --- */
  .controls .lang-toggle,
  .controls .theme-toggle {
    display: none;
  }

  /* --- Burger button: push to far right --- */
  .mobile-menu-toggle {
    margin-left: auto;
  }

  /* --- Navigation: prevent logo wrapping --- */
  .logo {
    font-size: 1.4rem;
    white-space: nowrap;
    letter-spacing: -0.5px;
  }

  /* --- Mobile menu header --- */
  .mobile-menu-header {
    padding: 1.25rem 1.5rem;
  }

  .mobile-menu-logo {
    font-size: 1.75rem;
  }

  /* --- Mobile nav links --- */
  .mobile-nav-links > a {
    padding: 0.875rem 1.5rem;
    font-size: 1.0625rem;
  }

  /* --- Mobile resume dropdown --- */
  .mobile-resume-toggle {
    padding: 0.875rem 1.5rem;
    font-size: 1.0625rem;
  }

  .mobile-resume-menu a {
    padding: 0.75rem 1.5rem 0.75rem 2.25rem;
  }

  /* --- Mobile controls --- */
  .mobile-controls {
    padding: 1rem 1.5rem;
    gap: 0.75rem;
  }

  .mobile-theme-toggle,
  .mobile-lang-toggle {
    width: 44px;
    height: 44px;
  }

  /* --- Footer social links: force single row --- */
  .social-links {
    gap: 0.75rem;
    flex-wrap: nowrap;
  }

  /* --- Timeline: push line/indicators as far left as possible ---
       padding-left:0 on ol guarantees li starts at x=0, so the same left value
       on ol::before (line) and li::before (indicator) produces exact alignment.
       item padding-left creates the visual gap between indicator and text. */
  .projects-unified .timeline,
  .education-unified .timeline {
    padding-left: 0 !important;
  }

  .projects-unified .timeline::before,
  .education-unified .timeline::before {
    left: 8px !important;
  }

  .projects-unified .timeline-item,
  .education-unified .timeline-item {
    padding-left: 28px !important;
  }

  .projects-unified .timeline-item::before,
  .education-unified .timeline-item::before {
    left: 8px !important;
  }

  /* --- Hero section --- */
  .hero-typing-line,
  .hero-content .typing-text,
  .hero-content .typing-cursor {
    font-size: 1.5rem;
  }

  .hero-description {
    font-size: 1rem;
    line-height: 1.6;
  }

  .cta-button {
    width: 100% !important;
    font-size: 1.05rem;
    padding: 1.1rem;
    display: block;
    text-align: center;
  }

  /* --- About section --- */
  .about-image {
    height: 220px !important;
  }

  .profile-photo-wrapper {
    width: 100%;
  }

  /* --- Timeline list items --- */
  .timeline-item li,
  .timeline-item p {
    font-size: 0.9rem;
  }

  /* --- Contact section --- */
  .contact-container {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    margin-top: 2rem;
  }
  
  .contact-item {
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
    gap: 1rem !important;
    padding: 1rem !important;
  }
  
  .contact-icon {
    min-width: 48px !important;
    height: 48px !important;
  }
  
  .contact-icon svg {
    width: 24px !important;
    height: 24px !important;
  }
  
  .contact-text h3 {
    font-size: 1.125rem !important;
  }
  
  .contact-text p,
  .contact-text a {
    font-size: 0.9375rem !important;
    word-break: break-word;
  }

  /* Contact form */
  .contact-form input,
  .contact-form textarea {
    width: 100%;
    padding: 0.75rem;
  }

  .contact-form button[type="submit"] {
    width: 100%;
    min-height: 44px;
  }

}