/* Based on read.cv styles */

/* Apply variables only within the cvfront context */
.cvfront {
  --type-size: 14px;
  --secondary-type-size: 12px;
  --line-height: 1.6;
  --emoji-font: "color-emoji"; /* Placeholder */
  --default-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --serif-font: "Signifier", serif; /* TODO: Replace Signifier */
  --mono-font: "ABC Diatype Mono", monospace; /* TODO: Replace ABC Diatype Mono */

  /* Light Theme (Default) */
  --backgroundColor: #fff;
  --inputBackgroundColor: #f2f2f2;
  --primaryBorderColor: #e5e5e5;
  --secondaryBorderColor: #f2f2f2;
  --backdrop: rgba(0, 0, 0, .3);
  --transparentBorder: rgba(0, 0, 0, .05);
  --grey1: #111; /* Primary text */
  --grey2: #555; /* Secondary text */
  --grey3: #999; /* Tertiary text / placeholders */
  --green: #32bd64;
  --orange: orange;
  --red: #f04b4b;
  --blue: #0788f5;
  --selectionColor: rgba(109, 175, 255, .5);
  --wash1: #e5e5e5;
  --wash2: #f2f2f2;

  /* Define content padding variable */
  --content-padding: 72px;
}

/* Dark Theme Variables */
@media (prefers-color-scheme: dark) {
  .cvfront {
    --backgroundColor: #222;
    --inputBackgroundColor: #333;
    --inputBackgroundActiveColor: #444;
    --primaryBorderColor: #333;
    --secondaryBorderColor: #333;
    --backdrop: rgba(0, 0, 0, .5);
    --transparentBorder: hsla(0, 0%, 100%, .1);
    --grey1: #eee;
    --grey2: #bbb;
    --grey3: #888;
    --selectionColor: rgba(109, 175, 255, .5);
    --marketingBackground: #1a1a1a;
    --wash1: #4e4e4e;
    --wash2: #383838;
    color-scheme: dark;
  }

  /* Dark mode specific overrides if needed */
  .cvfront .profile-badge-link {
      background-color: var(--wash2);
      box-shadow: none;
  }
  .cvfront .profile-badge-link:active {
      background-color: var(--wash1);
      box-shadow: none;
  }

  .cvfront .btn-readcv {
    background-color: var(--inputBackgroundColor);
    border: none;
  }
  .cvfront .btn-readcv:active {
     background-color: var(--inputBackgroundActiveColor);
  }
  .cvfront .btn-readcv-light {
    background-color: transparent;
  }

}

/* TODO: Add other theme variables (Klein, Brutalist, etc.) if needed */

@media only screen and (max-width: 684px) {
  .cvfront {
    --content-padding: calc((100vw - 540px) / 2);
  }
}

@media only screen and (max-width: 636px) {
  .cvfront {
    --content-padding: 48px;
  }
}

@media only screen and (max-width: 480px) {
  .cvfront {
    --content-padding: 24px; /* Adjusted from 16px for better spacing */
  }
}

.cvfront * {
  /* Reset applies only within cvfront */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style-type: none;
}

/* Base styles scoped to .cvfront */

/* No need to scope html, body directly if body has .cvfront class */
/* html {}
body, html {} */

body.cvfront {
  font-family: var(--default-font);
  font-size: var(--type-size);
  line-height: var(--line-height);
  background-color: var(--backgroundColor);
  color: var(--grey1);
  overflow-x: hidden !important; /* Match read.cv */
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translateZ(0);
}

/* Apply button font family globally within cvfront */
.cvfront button {
  font-family: var(--default-font);
}

.cvfront h2 {
  /* Matches read.cv .Profile_profileInfo__to5I_ h2 */
  font-size: 20px; 
  font-weight: 400;
  line-height: 1.3;
}

.cvfront h3 {
  /* Section headers */
  font-size: var(--type-size); /* 14px by default */
  font-weight: 400; /* read.cv uses 400 for section h3 */
  color: var(--grey1);
  margin-bottom: 24px; /* Increased margin based on h3+div margin */
}

.cvfront h5 {
  /* Item titles like job position/project name */
  font-size: var(--type-size);
  font-weight: 400; /* read.cv uses 400 */
  color: var(--grey1);
  margin-bottom: 0; /* Remove default margin */
}

.cvfront h2,
.cvfront h3,
.cvfront h4,
.cvfront h5,
.cvfront h6 {
  /* Common heading styles */
  color: var(--grey1);
  /* font-weight: 400; /* Base weight already set */ 
}

.cvfront section {
  margin: 60px 0;
}

.cvfront section:last-child {
  margin-bottom: 0;
}

.cvfront section:first-of-type {
  margin: 36px 0;
}

/* Paragraphs within sections */
.cvfront section p {
  color: var(--grey2);
}

.cvfront a {
  color: var(--grey1);
  text-decoration: none;
}

/* Read.cv subtle hover underline for specific links */
.cvfront a[data-hover="true"]:hover {
  border-bottom: 1px solid var(--grey3);
}

/* Default paragraph style */
.cvfront p {
  margin: 16px 0;
  word-break: break-word; /* Added from read.cv */
  color: var(--grey1); /* Default p color is grey1 */
}

/* Override specific paragraphs like descriptions to grey2 */
.cvfront .profile-item-description p,
.cvfront .profile-info p.text-muted {
  color: var(--grey2) !important; 
}

.cvfront p:first-child {
  margin-top: 0;
}

/* General List Styles */
.cvfront ol,
.cvfront ul {
  padding-inline-start: 2em; /* Match read.cv indent */
  color: var(--grey1);
  margin: 16px 0;
  word-break: break-word;
}

.cvfront ul li {
  list-style-type: disc;
  padding: 4px 0; /* Added from .ProfileItem_description */
}

.cvfront ol li {
  list-style-type: decimal;
  padding: 4px 0; /* Added from .ProfileItem_description */
}

.cvfront ol li p,
.cvfront ul li p {
  margin: 4px 0; /* Reduce margin for list item paragraphs */
}

.cvfront ::selection {
  background-color: var(--selectionColor);
}

.cvfront ::placeholder {
  color: var(--grey3);
}

.cvfront .text-muted {
  color: var(--grey2) !important; /* Override Bootstrap if needed, map to grey2 */
}

/* Utility to reset list styling */
.cvfront .list-reset {
  list-style: none;
  padding-left: 0; /* Override browser/Bootstrap default */
  margin-bottom: 0; /* Override browser/Bootstrap default */
}

/* Main Content Area Styling */
.cvfront .cvfront-main-content {
  /* Corresponds to .AppWrapper_content__s_sbE */
  max-width: 587px;
  margin: 0 auto;
  padding: var(--content-padding) 0;
}

@media only screen and (max-width: 480px) {
  .cvfront .cvfront-main-content {
    /* Remove horizontal padding on small screens, let body handle it */
    /* padding: 24px 0 96px; */ 
    padding-top: 24px;
    padding-bottom: 96px; 
  }
  body.cvfront {
    /* Add body padding on small screens */
    padding: 0 24px;
  }
}

/* Basic Button Style (map relevant .Button_button__AQ1KL styles) */
.cvfront .btn-readcv {
  background-color: var(--backgroundColor);
  border: 1px solid var(--primaryBorderColor, #e5e5e5);
  outline: none;
  height: 32px;
  line-height: 30px; /* Adjust for border */
  padding: 0 12px;
  font-weight: 500;
  font-family: var(--default-font);
  color: var(--grey1);
  border-radius: 8px;
  font-size: var(--type-size);
  position: relative;
  display: inline-flex; /* Use inline-flex for alignment */
  align-items: center;
  white-space: nowrap;
  cursor: pointer;
  vertical-align: middle; /* Align with text */
}

.cvfront .btn-readcv:disabled {
  color: var(--grey3);
  cursor: default;
  opacity: 0.65; /* Bootstrap disabled style */
}

.cvfront .btn-readcv:active {
  background-color: var(--wash2, #f2f2f2);
}

/* Light style button (padding/border/bg removed) */
.cvfront .btn-readcv-light {
  padding: 0;
  border: none;
  background-color: transparent;
}

.cvfront .btn-readcv-light:active {
  background-color: inherit;
  opacity: .7;
}

/* Add basic print styles */
@media print {
  .cvfront {
    --grey1: #000;
    --grey2: #000;
    --grey3: #000;
    --backgroundColor: #fff;
    --type-size: 10px;
  }

  body.cvfront {
    scrollbar-width: none;
  }

  body.cvfront::-webkit-scrollbar {
    display: none;
  }

  .cvfront section[data-print="false"] {
      display: none;
  }
  /* Add more print specific overrides as needed */
}