/*
Theme Name: Sharif Ahsan Portfolio
Theme URI: https://sharif-ahsan.com
Author: Sharif Ahsan
Author URI: https://sharif-ahsan.com
Description: Custom personal portfolio theme for Sharif Ahsan — IPE Engineer, AI/ML Learner, CAD Designer.
Version: 1.0.0
License: Private
Tags: portfolio, personal, minimal
*/


  :root {
    --navy: #0f172a;
    --teal: #0f766e;
    --teal-light: #14b8a6;
    --parchment: #fdfbf7;
    --charcoal: #1c1917;
    --stone: #78716c;
    --border: #d6d3d1;
  }
  * { box-sizing: border-box; }
  img, table, pre { max-width: 100%; }
  html, body { overflow-x: hidden; max-width: 100%; }
  body { font-family: 'Inter', sans-serif; background: var(--parchment); color: var(--charcoal); margin: 0; }
  .serif { font-family: 'Playfair Display', serif; }
  .nav-link { font-size: 13px; font-weight: 500; color: #57534e; cursor: pointer; padding: 6px 0; border-bottom: 2px solid transparent; transition: all 0.2s; letter-spacing: 0.04em; text-transform: uppercase; }
  .nav-link:hover, .nav-link.active { color: var(--teal); border-bottom-color: transparent; }
  .nav-logo { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 18px; letter-spacing: 0.12em; color: var(--charcoal); cursor: pointer; }
  .view { display: none; }
  .view.active { display: block; }
  .btn-solid { background: var(--teal); color: white; padding: 10px 24px; font-size: 13px; font-weight: 600; border: none; cursor: pointer; letter-spacing: 0.06em; text-transform: uppercase; transition: background 0.2s; }
  .btn-solid:hover { background: #0d9488; }
  .btn-outline { background: transparent; color: var(--teal-light); padding: 10px 24px; font-size: 13px; font-weight: 600; border: 1px solid var(--teal-light); cursor: pointer; letter-spacing: 0.06em; text-transform: uppercase; transition: all 0.2s; }
  .btn-outline:hover { background: rgba(20,184,166,0.08); }
  .btn-ghost { background: transparent; color: var(--charcoal); padding: 8px 18px; font-size: 12px; font-weight: 500; border: 1px solid var(--border); cursor: pointer; letter-spacing: 0.04em; transition: all 0.2s; }
  .btn-ghost:hover { border-color: var(--teal); color: var(--teal); }
  .tag { display: inline-block; font-size: 11px; font-weight: 500; padding: 3px 10px; background: transparent; color: var(--stone); border: 1px solid var(--border); letter-spacing: 0.03em; }
  .metric-card { border-left: 3px solid var(--teal); padding-left: 14px; }
  .proj-card { border: 1px solid var(--border); background: white; transition: box-shadow 0.2s, border-color 0.2s; }
  .proj-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.07); border-color: #a8a29e; }
  .blog-card { border: 1px solid var(--border); background: white; cursor: pointer; transition: all 0.2s; }
  .blog-card:hover { border-color: var(--teal); box-shadow: 0 2px 12px rgba(15,118,110,0.08); }
  .exp-card { border: 1px solid var(--border); background: white; border-left: 3px solid var(--teal); }
  .video-placeholder { background: #e7e5e4; aspect-ratio: 16/9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: background 0.2s; }
  .video-placeholder:hover { background: #d6d3d1; }
  .play-circle { width: 44px; height: 44px; border-radius: 50%; background: rgba(15,118,110,0.85); display: flex; align-items: center; justify-content: center; }
  .headshot-box { border: 1px dashed #475569; background: #1e293b; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
  .section-rule { height: 1px; background: var(--border); margin: 32px 0; }
  .gh-grid { display: grid; grid-template-columns: repeat(26, 1fr); gap: 2px; }
  .gh-cell { aspect-ratio: 1; border-radius: 2px; }
  .pillar-card { border-top: 2px solid var(--teal); background: white; border: 1px solid var(--border); border-top: 3px solid var(--teal); }
  .sticky-nav { position: sticky; top: 0; z-index: 100; }
  .research-block { border: 1px solid var(--border); background: white; border-left: 4px solid var(--teal); }
  
  @media (max-width: 900px) {
    .identity-bar-wrap { flex-direction: column !important; gap: 10px !important; }
    .identity-divider { display: none !important; }
    .identity-item { padding: 0 !important; min-width: unset !important; }
  }
  @media (min-width: 901px) {
    .identity-bar-wrap { flex-wrap: nowrap !important; align-items: center !important; }
    .identity-divider { display: block !important; }
  }
  @media (max-width: 768px) {
    .hero-grid { flex-direction: column !important; gap: 32px !important; }
    .hide-mobile { display: none !important; }
    .pillar-grid { grid-template-columns: 1fr !important; }
    .proj-grid-3 { grid-template-columns: 1fr !important; }
    .blog-grid { grid-template-columns: 1fr !important; }
    .identity-bar-wrap { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; flex-wrap: wrap !important; }
    .identity-divider { display: none !important; }
    .identity-item { padding: 0 !important; min-width: unset !important; }
    .hero-name { font-size: 56px !important; }
    .hero-buttons { flex-direction: column !important; }
    .hero-buttons .btn-solid,
    .hero-buttons .btn-outline { width: 100% !important; text-align: center !important; }
    .research-block { padding: 20px !important; }
    .exp-header { flex-direction: column !important; gap: 4px !important; }
    .exp-card { padding: 20px !important; }
    .three-col-cert { grid-template-columns: 1fr 1fr !important; }
    .tech-video-grid { grid-template-columns: 1fr !important; }
    .about-intro-grid { grid-template-columns: 1fr !important; }
    .expertise-grid { grid-template-columns: 1fr !important; }
    .intro-split-grid { grid-template-columns: 1fr !important; }
    .get-in-touch-buttons { flex-direction: column !important; align-items: center !important; }
    .get-in-touch-buttons button { width: 100% !important; max-width: 280px !important; justify-content: center !important; }
    .footer-inner { flex-direction: column !important; text-align: center !important; gap: 12px !important; }
    .max-w-6xl, .max-w-5xl, .max-w-4xl { padding-left: 16px !important; padding-right: 16px !important; }
  }

  /* ── MODAL STYLES ─────────────────────────────────────── */
  .modal-overlay {
    display:none; position:fixed; inset:0; background:rgba(15,23,42,0.7);
    z-index:1000; align-items:center; justify-content:center; padding:20px;
    backdrop-filter:blur(4px);
  }
  .modal-overlay.open { display:flex; animation:fadeIn 0.2s ease; }
  .modal-box {
    background:white; width:100%; max-width:520px; max-height:90vh;
    overflow-y:auto; position:relative; box-shadow:0 24px 60px rgba(0,0,0,0.3);
  }
  .modal-box-wide {
    background:#1a1a1a; width:100%; max-width:900px; height:92vh;
    position:relative; box-shadow:0 24px 60px rgba(0,0,0,0.5);
    display:flex; flex-direction:column; overflow:hidden;
  }
  .modal-input {
    width:100%; padding:10px 14px; font-size:14px; font-family:inherit;
    border:1px solid var(--border); background:#fdfbf7; color:var(--charcoal);
    outline:none; transition:border-color 0.2s; box-sizing:border-box;
  }
  .modal-input:focus { border-color:var(--teal); background:white; }
  .modal-input.error { border-color:#ef4444; }
  .field-error { font-size:11px; color:#ef4444; margin-top:4px; display:none; }
  .field-error.show { display:block; }
  textarea.modal-input { resize:vertical; min-height:110px; }
  .fade-in { animation: fadeIn 0.25s ease; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
  .view { transition: opacity 0.15s ease; }
  .teal-underline { text-decoration: underline; text-decoration-color: var(--teal); text-underline-offset: 4px; }
  .nav-mobile-btn { display: none; cursor: pointer; padding: 4px; }
  .mobile-menu {
    display: flex; flex-direction: column; gap: 0;
    max-height: 0; overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.25s ease;
    opacity: 0; border-top: 0px solid var(--border);
  }
  .mobile-menu.open {
    max-height: 400px; opacity: 1;
    border-top: 1px solid var(--border);
  }
  @media (max-width: 768px) {
    .nav-mobile-btn { display: block; }
    .nav-links-desktop { display: none !important; }
    .mobile-nav-link { padding: 14px 24px; font-size: 13px; font-weight: 500; color: #57534e; cursor: pointer; border-bottom: 1px solid #f5f5f4; letter-spacing: 0.04em; text-transform: uppercase; transition: color 0.2s, background 0.2s; }
    .mobile-nav-link:hover { color: var(--teal); background: #f0fdf4; }
  }

  @media (max-width: 430px) {
    .hero-grid { flex-direction: column !important; gap: 24px !important; }
    .identity-bar-wrap { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
    .identity-divider { display: none !important; }
    .identity-item { padding: 0 !important; }
    .hero-buttons { flex-direction: column !important; width: 100%; }
    .hero-buttons .btn-solid,
    .hero-buttons .btn-outline { width: 100% !important; text-align: center !important; justify-content: center !important; }
    .proj-grid-3 { grid-template-columns: 1fr !important; }
    .blog-grid { grid-template-columns: 1fr !important; }
    .three-col { grid-template-columns: 1fr !important; }
    .pillar-grid { grid-template-columns: 1fr !important; }
    .research-two-col { grid-template-columns: 1fr !important; }
    .tech-video-grid { grid-template-columns: 1fr !important; }
    .expertise-grid { grid-template-columns: 1fr !important; }
    section { padding-left: 16px !important; padding-right: 16px !important; }
    .max-w-6xl, .max-w-5xl, .max-w-4xl, .max-w-3xl, .max-w-2xl { padding-left: 16px !important; padding-right: 16px !important; }
    h1 { font-size: 42px !important; }
    .modal-box, .modal-box-wide { margin: 10px; width: calc(100% - 20px) !important; }
    .nav { padding: 10px 16px !important; }
  }

/* ── TAILWIND REPLACEMENT CLASSES ─────────────────────────────── */
.max-w-6xl { max-width: 72rem; margin-left: auto; margin-right: auto; }
.max-w-5xl { max-width: 64rem; margin-left: auto; margin-right: auto; }
.max-w-4xl { max-width: 56rem; margin-left: auto; margin-right: auto; }
.max-w-3xl { max-width: 48rem; margin-left: auto; margin-right: auto; }
.max-w-2xl { max-width: 42rem; margin-left: auto; margin-right: auto; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.flex { display: flex; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.justify-between { justify-content: space-between; }
.gap-8 { gap: 2rem; }
.gap-6 { gap: 1.5rem; }
.gap-4 { gap: 1rem; }
.border-b { border-bottom-width: 1px; border-bottom-style: solid; }
.border-stone-200 { border-color: #e7e5e0; }
.bg-\[\#fdfbf7\] { background-color: #fdfbf7; }

/* ── NAVBAR FIX ─────────────────────────────────────────────────── */
.sticky-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fdfbf7;
  border-bottom: 1px solid #e7e5e0;
}

.sticky-nav .max-w-6xl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
}

.nav-links-desktop {
  display: flex !important;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: nowrap;
}

/* ── HERO SECTION FIX ───────────────────────────────────────────── */
.hero-grid {
  display: flex;
  gap: 3rem;
  align-items: center;
}

/* ── WORDPRESS BODY CLASS ───────────────────────────────────────── */
body.home .hero-grid { min-height: auto; }

/* ── POST CONTENT STYLES ────────────────────────────────────────── */
.post-content h1, .post-content h2, .post-content h3 {
  font-family: 'Playfair Display', serif;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: var(--charcoal);
}
.post-content p { margin-bottom: 1.25rem; line-height: 1.85; }
.post-content img { max-width: 100%; height: auto; margin: 1.5rem 0; }
.post-content ul, .post-content ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.post-content li { margin-bottom: 0.5rem; line-height: 1.7; }
.post-content blockquote {
  border-left: 3px solid var(--teal);
  padding: 1rem 1.25rem;
  background: #f9fafb;
  font-style: italic;
  margin: 1.5rem 0;
}
.post-content a { color: var(--teal); }
.post-content strong { font-weight: 600; }

/* ── PAGINATION FIX ─────────────────────────────────────────────── */
.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  background: white;
  color: var(--stone);
  font-size: 13px;
  text-decoration: none;
  transition: all 0.2s;
  margin: 0 2px;
}
.page-numbers.current {
  background: var(--teal);
  color: white;
  border-color: var(--teal);
  font-weight: 600;
}
.page-numbers:hover:not(.current) { border-color: var(--teal); color: var(--teal); }
.page-numbers.prev, .page-numbers.next { font-size: 16px; }

/* ── WORDPRESS ADMIN BAR FIX ────────────────────────────────────── */
html { margin-top: 0 !important; }
#wpadminbar { position: fixed !important; }
.sticky-nav { top: 32px; }
@media screen and (max-width: 782px) { .sticky-nav { top: 46px; } }
@media screen and (max-width: 600px) { .sticky-nav { top: 0; } #wpadminbar { display: none; } }

/* ── MOBILE NAVBAR FIX ──────────────────────────────────────────── */
.nav-logo {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.1em;
  color: var(--charcoal);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Hide desktop nav on mobile */
@media (max-width: 768px) {
  .nav-links-desktop {
    display: none !important;
  }
  .nav-mobile-btn {
    display: flex !important;
    cursor: pointer;
    padding: 4px;
    background: none;
    border: none;
    flex-direction: column;
    gap: 3px;
    align-items: center;
    justify-content: center;
  }
  .nav-logo {
    font-size: 14px;
    letter-spacing: 0.06em;
  }
  .sticky-nav .max-w-6xl {
    padding: 12px 16px;
  }
}

/* Show desktop nav on desktop */
@media (min-width: 769px) {
  .nav-mobile-btn {
    display: none !important;
  }
  .nav-links-desktop {
    display: flex !important;
  }
}

/* Mobile menu slide animation */
.mobile-menu {
  display: flex;
  flex-direction: column;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.25s ease;
  opacity: 0;
  background: #fdfbf7;
}
.mobile-menu.open {
  max-height: 400px;
  opacity: 1;
  border-top: 1px solid var(--border);
}
.mobile-nav-link {
  padding: 14px 20px;
  font-size: 13px;
  font-weight: 500;
  color: #57534e;
  cursor: pointer;
  border-bottom: 1px solid #f5f5f4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  display: block;
  transition: color 0.2s, background 0.2s;
}
.mobile-nav-link:hover {
  color: var(--teal);
  background: #f0fdf4;
}

/* ── COMPLETE TAILWIND UTILITY REPLACEMENTS ─────────────────────── */
.max-w-6xl  { max-width: 72rem; margin-left: auto; margin-right: auto; }
.max-w-5xl  { max-width: 64rem; margin-left: auto; margin-right: auto; }
.max-w-4xl  { max-width: 56rem; margin-left: auto; margin-right: auto; }
.max-w-3xl  { max-width: 48rem; margin-left: auto; margin-right: auto; }
.max-w-2xl  { max-width: 42rem; margin-left: auto; margin-right: auto; }
.mx-auto    { margin-left: auto; margin-right: auto; }
.px-6       { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-4       { padding-left: 1rem; padding-right: 1rem; }
.py-16      { padding-top: 4rem; padding-bottom: 4rem; }
.py-12      { padding-top: 3rem; padding-bottom: 3rem; }
.py-8       { padding-top: 2rem; padding-bottom: 2rem; }
.py-4       { padding-top: 1rem; padding-bottom: 1rem; }
.pt-8       { padding-top: 2rem; }
.pb-8       { padding-bottom: 2rem; }
.mt-8       { margin-top: 2rem; }
.mb-8       { margin-bottom: 2rem; }
.flex       { display: flex; }
.flex-col   { flex-direction: column; }
.items-center    { align-items: center; }
.items-start     { align-items: flex-start; }
.items-baseline  { align-items: baseline; }
.items-end       { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.flex-wrap  { flex-wrap: wrap; }
.flex-1     { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.gap-1      { gap: 0.25rem; }
.gap-2      { gap: 0.5rem; }
.gap-4      { gap: 1rem; }
.gap-6      { gap: 1.5rem; }
.gap-8      { gap: 2rem; }
.gap-12     { gap: 3rem; }
.gap-16     { gap: 4rem; }
.w-full     { width: 100%; }
.h-full     { height: 100%; }
.hidden     { display: none; }
.block      { display: block; }
.inline-flex { display: inline-flex; }
.grid       { display: grid; }
.relative   { position: relative; }
.absolute   { position: absolute; }
.sticky     { position: sticky; }
.top-0      { top: 0; }
.z-10       { z-index: 10; }
.z-50       { z-index: 50; }
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }
.font-bold  { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }
.uppercase  { text-transform: uppercase; }
.tracking-widest { letter-spacing: 0.1em; }
.leading-tight   { line-height: 1.25; }
.leading-relaxed { line-height: 1.625; }
.rounded    { border-radius: 0.25rem; }
.border     { border-width: 1px; border-style: solid; }
.border-b   { border-bottom-width: 1px; border-bottom-style: solid; }
.border-t   { border-top-width: 1px; border-top-style: solid; }
.overflow-hidden { overflow: hidden; }
.truncate   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cursor-pointer { cursor: pointer; }
.transition { transition: all 0.2s; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }

/* ── HERO GRID FIX ──────────────────────────────────────────────── */
.hero-grid {
  display: grid !important;
  grid-template-columns: 1fr 340px !important;
  gap: 3rem !important;
  align-items: center !important;
  padding: 80px 48px !important;
  max-width: 72rem !important;
  margin: 0 auto !important;
}

@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr !important;
    padding: 48px 24px !important;
  }
}

/* ── BLOG GRID ──────────────────────────────────────────────────── */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* ── PROJ GRID ──────────────────────────────────────────────────── */
.proj-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 768px) {
  .blog-grid,
  .proj-grid-3 {
    grid-template-columns: 1fr !important;
  }
  .hero-grid {
    grid-template-columns: 1fr !important;
    padding: 40px 20px !important;
  }
}

/* ── CRITICAL LAYOUT REPLACEMENTS (Tailwind CDN removed) ────────── */
.px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-16 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
.py-24 { padding-top: 6rem !important; padding-bottom: 6rem !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.max-w-6xl { max-width: 72rem !important; }
.max-w-5xl { max-width: 64rem !important; }
.max-w-4xl { max-width: 56rem !important; }
.max-w-3xl { max-width: 48rem !important; }
.max-w-2xl { max-width: 42rem !important; }
.max-w-xl  { max-width: 36rem !important; }
.flex { display: flex !important; }
.hidden { display: none !important; }
.items-center { align-items: center !important; }
.items-start  { align-items: flex-start !important; }
.items-end    { align-items: flex-end !important; }
.justify-between { justify-content: space-between !important; }
.justify-center  { justify-content: center !important; }
.flex-col    { flex-direction: column !important; }
.flex-wrap   { flex-wrap: wrap !important; }
.gap-2  { gap: 0.5rem !important; }
.gap-4  { gap: 1rem !important; }
.gap-6  { gap: 1.5rem !important; }
.gap-8  { gap: 2rem !important; }
.gap-12 { gap: 3rem !important; }
.gap-16 { gap: 4rem !important; }
.w-full { width: 100% !important; }
.h-full { height: 100% !important; }
.text-center { text-align: center !important; }
.font-bold   { font-weight: 700 !important; }
.font-medium { font-weight: 500 !important; }
.relative { position: relative !important; }
.absolute { position: absolute !important; }
.grid { display: grid !important; }
.border { border-width: 1px !important; }
.overflow-hidden { overflow: hidden !important; }
.rounded { border-radius: 0.25rem !important; }
.block  { display: block !important; }
.inline-flex { display: inline-flex !important; }
.shrink-0 { flex-shrink: 0 !important; }
.min-h-screen { min-height: 100vh !important; }

/* Hero section specific */
.hero-section-inner {
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE FIXES
   ══════════════════════════════════════════════════════════════════ */

/* Blog grid: 3 col → 1 col on mobile */
@media (max-width: 768px) {
  .blog-grid-home {
    grid-template-columns: 1fr !important;
  }
}

/* Disciplines grid: 1 column on mobile, keep desktop unchanged */
@media (max-width: 768px) {
  .disc-grid {
    grid-template-columns: 1fr !important;
    background: transparent !important;
  }
  .disc-grid > div {
    border-bottom: 1px solid var(--border);
  }
}

/* Cert cards: always stack on small mobile */
@media (max-width: 480px) {
  .cert-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Hero section: stack photo below text on mobile */
@media (max-width: 640px) {
  /* Headshot: smaller, centered on mobile */
  #view-home .hero-photo {
    max-width: 240px !important;
    margin: 0 auto !important;
  }
  /* Hero buttons: full width */
  .hero-buttons {
    flex-direction: column !important;
  }
  .hero-buttons button {
    width: 100% !important;
    justify-content: center !important;
  }
  /* Identity bar: wrap items */
  .identity-bar-wrap {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  .identity-divider {
    display: none !important;
  }
  .identity-item {
    padding: 0 !important;
  }
}

/* Expertise grid: add gap on mobile when stacked */
@media (max-width: 480px) {
  .expertise-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

@media (min-width: 481px) {
  .expertise-grid {
    gap: 0 48px !important;
  }
}

/* Experience page: CV block stack on mobile */
@media (max-width: 520px) {
  .cv-download-block {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* General: prevent any element from causing horizontal scroll */
* {
  box-sizing: border-box;
}
img, video, iframe {
  max-width: 100%;
}

/* ── REMOVE ALL UNDERLINES FROM BUTTONS AND LINKS ─────────────── */
a, button,
.btn-solid, .btn-outline,
.nav-link, .nav-logo,
.blog-card, .proj-card, .exp-card,
a.btn-solid, a.btn-outline,
a[style], button[style] {
  text-decoration: none !important;
}