/*
  Author: Amr Mohsen Personal Website
  Description: Global stylesheet for the multi‑page personal website.  This file
  includes responsive styles and simple animations to enhance user
  experience.  The design adheres to a premium, business‑oriented aesthetic
  using a dark palette with gold accents.
*/

:root {
  /* Base colors */
  --color-bg: #0d0d0d;
  --color-bg-alt: #111111;
  --color-bg-section: #131313;
  --color-text: #f5f5f5;
  --color-muted: #c9c9c9;
  --color-border: #2e2e2e;
  --color-gold: #d4a84d;
  /* Cards are slightly lighter than the base to improve text contrast */
  --color-card: #1a1a1a;

  /* Fonts */
  --font-heading: "Poppins", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;

  /* Layout */
  --container-width: 1240px;
  --section-padding-y: 100px;
}

/* Reset & Base */
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  scroll-behavior: smooth;
}

body {
  line-height: 1.6;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* Navbar */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(13, 13, 13, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}

.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
}

.logo {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.12em;
  font-size: 0.9rem;
  text-transform: uppercase;
}

.logo span {
  color: var(--color-gold);
}

.nav-links {
  display: flex;
  gap: 24px;
  align-items: center;
  font-size: 0.9rem;
}

.nav-links a {
  color: var(--color-muted);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.nav-links a:hover {
  color: #ffffff;
  border-color: var(--color-gold);
}

.nav-cta {
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--color-gold);
  color: var(--color-gold);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.nav-cta:hover {
  background: var(--color-gold);
  color: #0d0d0d;
}

/* Hero sections */
.hero {
  padding: 80px 0 70px;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}

.hero.banner {
  /* For pages like About where a hero image is used */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: overlay;
  background-color: rgba(0, 0, 0, 0.6);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 60px;
  align-items: center;
}

/* Hero content */
.hero-kicker {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  color: var(--color-muted);
  margin-bottom: 12px;
}

.hero-title {
  font-family: var(--font-heading);
  font-size: 2.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 16px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.hero-title span {
  color: var(--color-gold);
}

.hero-subtitle {
  font-size: 1.1rem;
  color: var(--color-muted);
  max-width: 520px;
  margin-bottom: 26px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out 0.1s, transform 0.8s ease-out 0.1s;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  /* Moderate spacing between meta items to keep the line compact */
  gap: 18px;
  margin-bottom: 32px;
  font-size: 0.9rem;
  color: var(--color-muted);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out 0.2s, transform 0.8s ease-out 0.2s;
}

.hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero-meta span::before {
  content: "";
  /* Smaller separator dot for a refined look */
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--color-gold);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out 0.3s, transform 0.8s ease-out 0.3s;
}

/* Hero call-to-action links (inline style rather than button) */
.hero-actions .hero-link {
  font-size: 0.9rem;
  color: var(--color-gold);
  font-weight: 500;
  margin-right: 16px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.hero-actions .hero-link:hover {
  color: var(--color-text);
  border-color: var(--color-gold);
}

/* Cards and content blocks */
.card {
  background: var(--color-card);
  border-radius: 14px;
  padding: 18px 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.03);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.6);
}

.card-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  margin: 0 0 10px;
}

.card-text {
  font-size: 0.9rem;
  color: var(--color-muted);
}

.tag {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-muted);
  margin-bottom: 6px;
}

.link-gold {
  font-size: 0.85rem;
  color: var(--color-gold);
}

/* Section wrapper */
section {
  padding: var(--section-padding-y) 0;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}

.section-alt {
  background: var(--color-bg-section);
}

.section-kicker {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  color: var(--color-muted);
  margin-bottom: 10px;
}

.section-title {
  font-family: var(--font-heading);
  font-size: 1.7rem;
  font-weight: 500;
  margin: 0 0 14px;
}

.section-subtitle {
  font-size: 0.98rem;
  color: var(--color-muted);
  max-width: 620px;
  margin-bottom: 30px;
}

/* Layout grids */
.leadership-grid,
.ventures-grid,
.saas-grid {
  display: grid;
  gap: 22px;
}

.leadership-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ventures-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.saas-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Summary meta styling for profile pages */
.summary-meta {
  /* create a subtle vertical divider for large screens */
  border-left: 1px solid var(--color-border);
  padding-left: 24px;
  margin-top: 6px;
}

.summary-meta-block {
  /* Standard spacing between meta items */
  margin-bottom: 18px;
}

.summary-meta-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-gold);
  margin-bottom: 4px;
}

.summary-meta-value {
  font-size: 0.98rem;
  color: var(--color-text);
  line-height: 1.4;
}

/* Reset any pseudo-bullet inserted before card titles */
.card-title::before {
  content: none;
}

/* Adjust list inside cards */
.card ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
  margin-top: 6px;
}
.card ul li {
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  color: var(--color-muted);
}
/* Adjust bullet dot size for lists inside cards */
.card ul li::before {
  content: "\2022";
  color: var(--color-gold);
  font-weight: bold;
  display: inline-block;
  width: 0.75em;
  margin-left: -0.75em;
}

/* Timeline */
.timeline {
  border-left: 1px solid var(--color-border);
  margin-top: 20px;
  padding-left: 24px;
}

.timeline-item {
  margin-bottom: 20px;
}

.timeline-year {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-gold);
  margin-bottom: 4px;
}

.timeline-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  margin: 0 0 4px;
}

.timeline-text {
  font-size: 0.9rem;
  color: var(--color-muted);
}

/* Footer */
.footer {
  border-top: 1px solid var(--color-border);
  padding: 18px 0 22px;
  font-size: 0.8rem;
  color: var(--color-muted);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.footer-links {
  display: flex;
  gap: 12px;
  align-items: center;
}

.footer-links a {
  font-size: 0.85rem;
  color: var(--color-muted);
}

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

/* ------------------------------------------------------------------ */
/* Button styles */
/*
  Define reusable button classes to create high‑contrast call‑to‑action
  elements. Buttons use inline‑flex layout, generous padding and fully
  rounded corners for a polished look. Two variants are provided:
  primary (solid) and outline (transparent with a gold border). Hover
  states add subtle elevation and color transitions.  These classes
  intentionally mirror the design of top executive and corporate
  websites, helping important links stand out without cluttering the
  interface.
*/

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  border-radius: 999px;
  border: none;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease,
    transform 0.15s ease, box-shadow 0.15s ease;
  text-decoration: none;
}

/* Solid button for primary actions */
.btn-primary {
  background: #000000;
  color: #ffffff;
  border: 1px solid #202020;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 18px 35px rgba(0, 0, 0, 0.8);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.9);
}

/* Outline button for secondary actions */
.btn-outline {
  background: transparent;
  color: var(--color-gold);
  border: 1px solid var(--color-gold);
}
.btn-outline:hover {
  background: var(--color-gold);
  color: #0d0d0d;
}

/* Responsive breakpoints */
@media (max-width: 960px) {
  .hero-grid,
  .summary-grid,
  .leadership-grid,
  .ventures-grid,
  .saas-grid {
    grid-template-columns: 1fr;
  }
  .leadership-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .saas-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* In narrow layouts move the meta section below content and remove the vertical divider */
  .summary-meta {
    border-left: none;
    border-top: 1px solid var(--color-border);
    padding-left: 0;
    padding-top: 20px;
  }
  .hero {
    padding-top: 60px;
  }
}

@media (max-width: 720px) {
  /* Show the navigation links on small screens in a stacked layout */
  .nav-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 12px;
  }
  .hero-title {
    font-size: 2.1rem;
  }
  .leadership-grid,
  .ventures-grid,
  .saas-grid {
    grid-template-columns: 1fr;
  }
  section {
    padding: 70px 0;
  }
}

/* Animations */
.animate-fade {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-fade.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Hero reveal when page loads */
.hero.show .hero-title,
.hero.show .hero-subtitle,
.hero.show .hero-meta,
.hero.show .hero-actions {
  opacity: 1;
  transform: translateY(0);
}