/* ===================================
   🌿 Design Tokens
=================================== */
:root {
  /* === Base Colors === */
  --color-coal: #0c0908;
  --color-blue: #c1ddf6;
  --color-purple: #b5b9ed;
  --color-dark-purple: #2330ce;
  --color-pink: #ffbfe0;
  --color-yellow: #dffd95;
  --color-green: #80aea1;
  --color-dark-green: #276151;
  --color-turquoise: #edffff;
  --color-red: #fab4ad;
  --color-beige-neutral: #e3e2d9;
  --color-beige-light: #faf9f7;

  /* === Gradients === */
  --gradient-pink-linear: linear-gradient(183deg, var(--color-beige-light) 4%, var(--color-pink) 154%);
  --gradient-green-linear: linear-gradient(227deg, #52917F 5.23%, #7DAD9F 32.52%, #B7D3CB 50.37%, #9AC0B5 66.77%, #52917F 90.29%);
  --gradient-pink-conic: conic-gradient(from 192deg at 50% 56.55%, var(--color-pink) 20deg, var(--color-beige-light) 118deg, var(--color-pink) 200deg, var(--color-beige-light) 276deg, var(--color-pink) 360deg);
  --gradient-blue-conic: conic-gradient(from 192deg at 50% 56.55%, var(--color-blue) 20deg, var(--color-beige-light) 118deg, var(--color-blue) 200deg, var(--color-beige-light) 276deg, var(--color-blue) 360deg);
  --gradient-turqouise-conic: conic-gradient(from 192deg at 50% 56.55%, #AFE2E2 20.769230872392654deg, #FAFFFF 118.80000472068787deg, #AFE2E2 200.76922416687012deg, #F8FFFF 276.9230818748474deg, #AFE2E2 342.6563000679016deg);
  --gradient-red-conic: conic-gradient(from 192deg at 50% 56.55%, #FAB4AD 20.769230872392654deg, var(--Light-beige, #F4F4EF) 118.80000472068787deg, #FAB4AD 200.76922416687012deg, var(--Light-beige, #F4F4EF) 276.9230818748474deg, #FAB4AD 360deg);
  --gradient-purple-conic: conic-gradient(from 192deg at 50% 56.55%, #B5B9ED 20.769230872392654deg, var(--Light-beige, #F4F4EF) 118.80000472068787deg, #B5B9ED 200.76922416687012deg, var(--Light-beige, #F4F4EF) 276.9230818748474deg, #B5B9ED 360deg);

  /* === Global Theme Colors === */
  --background-color: var(--color-beige-light);

  --theme-primary: var(--color-beige-neutral);
  --theme-secondary: var(--color-blue);
  --theme-accent: var(--color-pink);
  --theme-accent-extra: var(--color-yellow);

  /* === Project Themes === */
  /* MyEachTrax */
  --myeachtrax-primary: var(--color-green);
  --myeachtrax-secondary: var(--color-purple);

  /* Academy */
  --academy-primary: var(--color-blue);
  --academy-secondary: var(--color-turquoise);

  /* ChangeWatcher */
  --changewatcher-primary: var(--color-purple);
  --changewatcher-secondary: var(--color-red);


  /* === Typography === */
  --font-family-base: "Source Sans Pro", sans-serif;
  --font-size-xs: 0.875rem;
  --font-size-sm: 1rem;
  --font-size-md: 1.25rem;
  --font-size-lg: 2rem;
  --font-size-xl: 3.5rem;
  --line-height-base: 1.6;

  /* === Layout === */
  --max-width: 1200px;
  --border-radius: 8px;
  --transition-speed: 0.3s;

  /* === Spacing === */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;

  /* === Breakpoints === */
  --bp-sm: 600px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1200px;
}

/* ===================================
     Base Styles
=================================== */
body {
  font-family: var(--font-family-base);
  color: var(--color-coal);
  line-height: var(--line-height-base);
  margin: 0;
  background-color: var(--background-color);
}

main {
  background-color: var(--background-color);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-coal);
  margin-top: var(--space-sm);
  margin-bottom: var(--space-md);
}

h1 {
  font-weight: normal;
  font-size: var(--font-size-xl);
}

h2 {
  font-size: var(--font-size-lg);
  line-height: 2rem;
}

p {
  margin-bottom: var(--space-md);
  line-height: 2rem;
}

a {
  color: var(--color-coal) !important;
  text-decoration: none  !important;
  transition: color var(--transition-speed);
}

a:hover {
  color: var(--theme-accent);
  text-decoration: underline !important;
}

hr {
  border: 1px solid var(--color-beige-neutral);
}

.text-highlight {
  color: var(--color-dark-purple);
  font-weight: 600;
}


.text-xs {
  font-size: var(--font-size-xs);
}

/* ===================================
   Images
=================================== */
img {
  width: 100%;
  height: 60vh;
  object-fit: contain;
  border-radius: var(--border-radius);
}

.image-hover {
  transition: transform var(--transition-speed);
}

.image-hover:hover {
  transform: scale(1.05);
  cursor: pointer;
}

/* ===================================
   Layout
=================================== */
.section-container {
  max-width: var(--max-width);
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
}



/* ===================================
   Components
=================================== */

/* --- Badges --- */
.custom-badge {
  display: flex;
  padding: var(--space-xs) var(--space-sm);
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  font-size: var(--font-size-xs);
  line-height: 16px;
}

.badge-light {
  background-color: var(--color-beige-light);
  color: var(--color-coal);
}

.badge-dark {
  background-color: var(--color-beige-neutral);
  color: var(--color-coal);
}


/* --- Buttons --- */
.btn {
  border: none;
  padding: var(--space-xs) var(--space-sm);
  border-radius: 4px;
  cursor: pointer;
  transition: background-color var(--transition-speed), color var(--transition-speed);
}

.btn--primary {
  background-color: var(--theme-accent-extra) !important;
  color: var(--color-coal) !important;
}

.btn--primary:hover {
  background-color: var(--color-coal) !important;
  color: var(--color-beige-light) !important;
}

.btn--secondary {
  background-color: var(--color-beige-light) !important;
  color: var(--color-coal) !important;
}

.btn--secondary:hover {
  background-color: var(--theme-accent) !important;
  color: var(--color-coal) !important;
}

/* ===================================
   Navbar
=================================== */
#nav-bar {
  position: sticky;
  top: 0;
  background-color: var(--background-color);
  height: 70px;
  width: 100%;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-md);
}

#nav-bar a {
  padding: var(--space-xs) var(--space-sm);
  border-radius: 4px;
}

#nav-bar a:hover {
  background-color: var(--color-beige-neutral);
  text-decoration: underline;
}

#logo a:hover {
  background-color: transparent;
  text-decoration: none !important;
  cursor: pointer;
}

/* ===================================
   Main Page
=================================== */
#hero-main {
  height: 80vh;
  max-width: var(--max-width);
  margin: 0 auto;
  box-sizing: border-box;
}

#icon-links i:hover {
  color: var(--theme-accent);
}

/* --- Teaser Card --- */
#teaser-card {
  --expand-progress: 0;
  position: relative;
  top: -30px;
  margin: 0 auto;
  padding-top: 300px;
  width: calc(80% + (20% * var(--expand-progress)));
  background-color: var(--color-beige-neutral);
  border-radius: calc(12px * (1 - var(--expand-progress)));
  box-shadow: 4px 8px 30px rgba(0, 0, 0, calc(0.25 * (1 - var(--expand-progress))));
  overflow: hidden;
  transition: width 0.3s linear, height 0.1s linear, background-color 0.5s ease;
}

#teaser-card.expanded {
  position: sticky;
  top: 0;
  width: 100%;
  border-radius: 0;
  box-shadow: none;
}

/* --- Sections --- */
#aboutme-description,
.project-description {
  padding: 0;
}

/* --- Expertise --- */
#expertise-section h6,
.row {
  margin-bottom: 0;
}

.expertise-type {
  font-weight: normal;
  margin-bottom: 0.1rem;
}

/* ===================================
   Projects Pages
=================================== */
.hero-image {
  width: 100%;
  min-height: 75vh;
  padding: var(--space-lg);
  display: flex;
  border-radius: var(--border-radius);
  justify-content: center;
  align-items: center;
}

.hero-image img {
  max-width: 100%;
  max-height: 60vh;
}

/* Details */
.details-wrapper {
  position: sticky;
  top: 70px;
  z-index: 2;
}

.details-summary {
  background-color: var(--color-beige-neutral);
  border-radius: var(--border-radius);
  padding: var(--space-md);
  transition: max-height var(--transition-speed) ease;
}

.details-summary.collapsible {
  max-height: 20vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

.details-summary.collapsible.expanded {
  max-height: 100vh;
}

.badge-overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60%;
  background: linear-gradient(to bottom, rgba(227, 226, 217, 0) 0%, var(--color-beige-neutral) 100%);
  pointer-events: none;
}

.details-summary.collapsible.expanded .badge-overlay {
  display: none;
}

.details-summary.collapsible .toggle-collapse {
  position: sticky;
  bottom: 0;
  align-self: start;
  margin-top: 1rem;
  background-color: var(--theme-accent);
  color: var(--color-coal);
  z-index: 2;
  cursor: pointer;
  border: none;
} 



/* scroll container */

.scroll-container {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
}

.scroll-text {
  flex: 1;
}

.scroll-text section {
  min-height: 80vh; /* hver seksjon fyller nesten en skjermhøyde */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.scroll-mockup {
  flex: 1;
  position: sticky;
  top: 20vh; /* gjør at iPhone-skjermen "låser seg" */
}

/* ===================================
   Responsive
=================================== */
@media (max-width: var(--bp-sm)) {
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.25rem; }
  p { font-size: 0.95rem; }
}

@media (min-width: var(--bp-md)) {
  #aboutme-description,
  .project-description { padding: var(--space-lg); }

  #aboutme-section .d-flex {
    flex-direction: row;
    text-align: left;
  }
}

@media (max-width: var(--bp-lg)) {
  #hero-main {
    height: auto;
    padding: var(--space-lg) var(--space-md);
  }

  #teaser-card {
    width: 95%;
    top: -20px;
  }

  .section-container {
    padding: var(--space-lg) var(--space-md);
  }
}