/* ===============================
   Root Variables
================================== */
:root {
  --nav-h: 64px; /* overwritten by JS on load */

  /* Portfolio Color Palette */
  --background: hsl(0, 100%, 95%); /* Warm beige */
  --foreground: 20 15% 15%; /* Dark text */

  --card: hsl(327, 66%, 51%)
      /* Deep red */
  --card-foreground: 0 0% 100%; /* White text */

  --primary: 327 100% 26%;
  --primary-foreground: 0 0% 100%;

  --secondary: 45 45% 80%;
  --secondary-foreground: 20 15% 15%;

  --muted: 35 20% 88%;
  --muted-foreground: 20 15% 35%;

  --accent: 24 62% 58%;
  --accent-foreground: 20 15% 15%;

  --border: 35 15% 85%;
  --input: 35 15% 90%;
  --ring: 327 100% 26%;

  /* Custom Portfolio Variables */
  --portfolio-beige: 35 25% 92%;
  --portfolio-deep-purple: #D62E91;
  --portfolio-blue: #5175D6;
  --portfolio-warm-white: 45 45% 96%;
  --portfolio-dark: 20 15% 15%;

  /* Typography Scale */
  --text-hero: 4.5rem;
  --text-xl: 2.5rem;
  --text-lg: 1.5rem;
  --text-base: 1rem;
  --text-sm: 0.875rem;
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --card: 222.2 84% 4.9%;
  --card-foreground: 210 40% 98%;
  --border: 217.2 32.6% 17.5%;
}


/* ===============================
   Base Styles
================================== */
* {
  border-color: hsl(var(--border));
  box-sizing: border-box;
}

body {
  background-color: #FFEFEF;
  color: hsl(var(--foreground));
  font-family: 'Inter', sans-serif;
  margin: 0;
  padding: 0;
}

footer {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
}


a {
  text-decoration: none;
  color: inherit;
}
/* ===============================
   Navbar
================================== */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 3000;
  padding: 1rem 1rem;
  background: rgba(255,255,255,0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,0,0,0.1);
  margin-bottom: 1rem;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo */
.nav-logo a {
  text-decoration: none;
  font-weight: bold;
  font-size: 1.3rem;
  color: #222;
}
.nav-logo span { color: var(--portfolio-blue); }

.nav-logo:hover span {
  color: #c85a78;;
}

/* Desktop Links */
.nav-links.desktop {
  display: flex;
  gap: 2rem;
  margin-right: 2rem;
}

.nav-links.mobile {
  display: none;
}

.nav-links.desktop a {
  text-decoration: none;
  font-weight: bold;
  color: #222;
  transition: color 0.2s ease;
}
.nav-links.desktop a:hover { color: var(--portfolio-blue); }

/* Mobile Toggle */
.nav-toggle {
  display: none;
  font-size: 1.8rem;
  background: transparent;
  border: 0;
  cursor: pointer;
}

/* Mobile Dropdown */
@media (max-width: 768px) {
  .nav-links.desktop { display: none; }
  .nav-toggle { display: block; }
  .nav-container {
    height: 30px;
  }
  #nav-links {
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    z-index: 2999;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 0;
    width: 100%;
    border-top: 1px solid rgba(0,0,0,0.08);
    margin-bottom: 2rem;

    background: rgba(255,255,255,0.35);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    opacity: 0;
    transform: translateY(-30px);
    pointer-events: none;
    transition: opacity .5s ease, transform .5s ease;
  }
  #nav-links.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  #nav-links a {
    display: block;
    width: 100%;
    padding: 4px;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    color: #222;
    transition: color 0.2s ease;
  }
  #nav-links a:hover { color: var(--portfolio-blue); }
}


/* ===============================
   Typography Helpers
================================== */
.text-hero {
  font-size: var(--text-hero);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.text-display {
  font-size: var(--text-xl);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: -20px;
  gap:20px;
  padding-top:30px;
  padding-bottom:10px;

}
.text-heading {
  font-size: var(--text-lg);
  line-height: 1.3;
  font-weight: 600;
}
.text-digital {
  background: url('images/heroSpecial.jpg') repeat-y center top;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  display: inline-block;
}


/* ===============================
   Hero Section
================================== */
.hero-wrapper {
background: url('images/heroBackground.png') repeat center top;
  background-size: cover; /* optional if you want it to stretch */
  width: 100%;
  min-height: 100vh; /* full screen height */
  display: flex;
  align-items: center;
  border-bottom: 1px solid hsl(var(--card)); /* 👈 border here */
  box-shadow: 0 5px 10px -5px rgba(0,0,0,0.5);


}

/* keep your layout exactly like before */
.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4rem 2rem;
  max-width: 1200px;
  margin: auto;
  gap: 2rem;
  width: 100%;
}

.hero-content {
  flex: 1;
}



.hero-content h1 {
  font-size: 3.5rem;
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: 1rem;
}
.hero-content .highlight { color: #e63946; }
.hero-content p {
  font-size: 1.2rem;
  max-width: 500px;
  color: #333;
}
.hero-image {
  flex: 1;
  display: flex;
  justify-content: center;
}
.hero-image img {
  width: 500px;
  height: 650px;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}


/* ===============================
   Portfolio Cards
================================== */

.portfolio-grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

.project-link {
  text-decoration: none;
}
.project-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 250px;
  width: 100%;
  padding: 1.5rem;
  background-color: #c85a78;
  color: #fff9f9;
  border-radius: 10px;
  box-shadow: 0 5px 10px -5px rgba(0,0,0,0.5);
  overflow: hidden;
  transition: transform 0.2s ease;
}
.project-card:hover { transform: translateY(-4px); background-color: #9C465D; }
.project-card:hover h2 { color: #E5AEC4; }

.project-text { flex: 1; padding-right: 1rem; }
.project-card h2 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.project-card p { font-size: 1rem; }

.project-image {
  flex: 0 0 35%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}
.project-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
}


/* ===============================
   Case Study Pages
================================== */
.case-study {
  max-width: 1200px;
  margin: 4rem auto 0;
  padding: 2rem 1rem;
}
.header {
  text-align: center;
  margin-bottom: 2rem;
}
.header h1 {
  font-size: 2rem;
  font-weight: bold;
}
.intro-text img {
  width: 120px;
  margin-bottom: 1rem;
  margin-top: 2rem;
}

.intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2rem;
}

.intro-text {
  flex: 1;
}

.intro-image {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.intro-image img {
  max-width: 100%;
  max-height: 50vh;
  object-fit: contain;
}
.intro h2 { font-size: 1.5rem; margin-bottom: .5rem; }
.intro p { font-size: 1rem; color: #555; }

.section { margin: 2rem 0; }
.section h3 { font-size: 1.2rem; margin-bottom: .5rem; }


/* ===============================
   Design Process
================================== */
.timeline-role-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  text-align: center;
  
}
.box {
  flex: 1 1 250px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  padding: 1.5rem;
  background-color: #FFF5F5;
  border-left: 6px solid var(--portfolio-blue);
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: transform 0.2s ease;
}
.design-process { text-align: center; }
.process-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
  
}
.step {
  flex: 1 1 150px;
  padding: 1.5rem;
  border-radius: 10px;
  background-color: #FFF5F5;
  border-left: 6px solid var(--portfolio-blue);
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: transform 0.2s ease;
}
.step h4 { margin: 0 0 .5rem; }

.content-section {
  display: flex;
  align-items: flex-start;
  gap: 20px; /* spacing between text and images */
  margin-bottom: 5px;
}

.text-content {
  flex: 1;
}

/* ===============================
   Images & Videos in Steps
================================== */
.step-image {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items: start; /* 👈 Viktigt: inte stretch */
  justify-items: center; /* centrerar om bilden är smalare */
}
.step-image-mobile {
  display: flex;
  justify-content: center; /* centers the images horizontally */
  align-items: flex-start; /* keeps top aligned */
  gap: 5px; /* space between images */
}
.step-image-mobile-special {
  display: flex;
  justify-content: center; /* centers the images horizontally */
  align-items: flex-start; /* keeps top aligned */
  gap: 5px; /* space between images */
}

.step-image-mobile img,
.step-image-mobile video {
  height: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
    max-height: 350px; /* valfri begränsning */
    max-width: 500px;
}

.step-image-mobile-special img,
.step-image-mobile-special video {
  height: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
    max-height: 350px; /* valfri begränsning */
    max-width: 500px;
}

.step-image img,
.step-image video {
  width: 100%;
  height: auto;     /* behåller proportioner */
  max-height: 300px; /* valfri begränsning */
  object-fit: contain; /* visar hela bilden */
  display: block;
}

@media (max-width: 768px) {
  .content-section {
    flex-direction: column; /* Stack text and image vertically */
    align-items: stretch;   /* Allow full width */
  }

  .step-image-mobile {
    flex-direction: column; /* Stack images vertically */
    gap: 10px;
    margin-top: 10px;
  }

  .step-image-mobile img,
  .step-image-mobile video {
    max-width: 75%;         /* Reduce image size */
    max-height: 250px;      /* Optional: smaller height */
    margin: 0 auto;         /* Center images */
  }
  .step-image-mobile-special img,
  .step-image-mobile-special video {
    max-width: 75%;         /* Reduce image size */
    max-height: 250px;      /* Optional: smaller height */
  }
}

/* ===============================
   Expertise Section
================================== */

.about-text{
  font-size: 1.2rem;
  color: #333;
}

.expertise-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
}
.expertise-list > li {
  width: 400px;
  height: 200px;
  flex: 0 0 auto;
  padding: 1.5rem;
  background-color: #FFF5F5;
  border-left: 6px solid var(--portfolio-blue);
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: transform 0.2s ease;
}

.expertise-list strong {
  display: block;
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: hsl(var(--foreground));
}
.expertise-list ul {
  list-style-type: disc;
  padding-left: 1rem;
color: #555}
.expertise-list ul li {
  font-size: var(--text-sm);
  margin-bottom: 0.3rem;
}
 .about-image img{
   height: 200px;
  width: 200px;
  border-radius: 50%;
  object-fit: cover; /* optional, keeps image nicely cropped */
 }

 .link{
  a {
    color: #9C465D;
  }
 }

/* ===============================
   Connect
================================== */

/* Container för kontaktkort */
.contact-grid {
  margin-top: -20px;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 20px; /* mellanrum mellan korten */
  flex-wrap: wrap;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

/* Själva korten */
.contact-card {
  flex: 1 1 calc(33.333% - 20px); /* 3 på rad, minus gap */
  background-color: #C85A78;
  color: hsl(var(--card-foreground));  color: white;
  border-radius: 6px;
  padding: 30px 20px;
  display: flex;
  flex-direction: column; /* innehållet på kolumn */
  justify-content: center;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
}

/* Ikon storlek */
.contact-card i {
  font-size: 2rem;
  margin-bottom: 10px;
}

/* Titel (EMAIL, LINKEDIN, TWITTER) */
.contact-card h3 {
  font-size: 0.9rem;
  font-weight: bold;
  margin: 10px 0 5px;
  color: #ddd;
  text-transform: uppercase;
}

/* Länk eller text under */
.contact-card p {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
}

.contact-card:hover { transform: scale(1.05,1.05); }
.project-card:hover i { color: #E5AEC4; }

.contact-link {
  display: block;          /* låter kortet bestämma storlek */
  text-decoration: none;   /* tar bort understryk */
  color: inherit;          /* behåller textfärg */
}

/* Responsivitet: när skärmen är mindre än 768px */
@media (max-width: 768px) {
  .contact-card {
    flex: 1 1 100%; /* tar hela bredden */
  }
}

/* ===============================
   Utility Colors
================================== */
.text-portfolio-blue { color: hsl(224 62% 58%); }
.bg-portfolio-red { background-color: hsl(var(--card)); }
.bg-portfolio-beige { background-color: hsl(var(--background)); }


/* ===============================
   Responsive Adjustments
================================== */
@media (max-width: 1024px) {
  .project-card { height: 220px; }
  .hero-image img { width: 300px; height: 300px; margin-top: 1.5rem; }
}
@media (max-width: 768px) {
  .hero-content h1 {
  font-size: 2rem;
}
.text-display {
  font-size: 1.5rem;
}

  .hero, .intro { flex-direction: column; text-align: center; }
  .hero-content p, .intro-text { margin: auto; }
  .intro-text { margin-bottom: 1rem; }

  .project-card { height: 200px; }
  .project-card h2 { font-size: 1.2rem; }
  .project-card h3 { font-size: 1rem; }
  .project-card p { font-size: 0.9rem; }
  .about-text{
  font-size: 1rem;
}
}
@media (max-width: 480px) {
  .project-card { height: 180px; }
  .project-card h2 { font-size: 1rem; }
  .project-card p { font-size: 0.85rem; }
}
@media (max-width: 786px) {
  .expertise-list { flex-direction: column; align-items: center; }
  .expertise-list > li { width: 100%; max-width: 500px; }
}