/* CodeForge — Apple system typography for hero */
.page-content.home {
  margin-top: 8rem;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.codeforge-hero-title {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
  font-weight: 600;
  font-size: 3.5rem;
  letter-spacing: -0.02em;
  margin: 1.5rem 0 0.5rem 0;
  color: var(--color-text);
}

.codeforge-hero-subtitle {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--color-text-light);
  margin-top: 0;
  margin-bottom: 2rem;
}

.page-content.home .hero {
  text-align: center;
}

/* Section headers - Apple weight and spacing */
.page-content.home h1.hero.ui.icon.header {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
  font-weight: 500;
  font-size: 1.75rem;
  letter-spacing: -0.01em;
}

.page-content.home p.large {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--color-text-light);
}

/* Landing page — fit within viewport, no scroll */
.page-content.home .logo {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.codeforge-hero-title {
  font-size: 2.75rem;
  margin: 0.5rem 0 0.25rem 0;
}
.codeforge-hero-subtitle {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}
.page-content.home .stackable.page.grid {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}
.page-content.home h1.hero.ui.icon.header {
  font-size: 1.4rem;
  margin: 0.5rem 0 0.25rem 0;
}
.page-content.home p.large {
  font-size: 1rem;
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

/* Logo prominence on landing */
.page-content.home .logo {
  margin-top: 1rem;
  margin-bottom: 1rem;
  height: 96px;
  width: 96px;
}
.codeforge-hero-title {
  font-size: 1.5rem;
  margin: 0.25rem 0 0.25rem 0;
}
.codeforge-hero-subtitle {
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
}

/* Reclaim vertical space to keep landing above fold with larger logo */
.page-content.home {
  margin-top: 8rem;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.page-content.home .stackable.page.grid {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}
.page-content.home .stackable.page.grid .column {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}
.page-content.home h1.hero.ui.icon.header {
  font-size: 1.25rem;
  margin: 0.25rem 0 0.15rem 0;
}
.page-content.home p.large {
  font-size: 0.95rem;
  line-height: 1.35;
  margin-bottom: 0.25rem;
}
.codeforge-hero-title {
  margin: 0.25rem 0 0.1rem 0;
}
.codeforge-hero-subtitle {
  margin-bottom: 0.5rem;
}

/* Dracula theme (per ElementVI config.json Dracula spec) */
:root[data-theme="codeforge-dark"] img[src="/assets/img/logo.svg"] {
  content: url("/assets/img/logo-dark.svg") !important;
}
:root[data-theme="codeforge-dark"] {
  --color-primary: #bd93f9;
  --color-primary-hover: #a679e5;
  --color-primary-active: #9060d0;
  --color-body: #282A36;
  --color-box-body: #1e1f29;
  --color-box-body-highlight: #22232d;
  --color-nav-bg: #1e1f29;
  --color-text: #eeeeee;
  --color-text-light: #dddddd;
  --color-input-background: #1e1f29;
  --color-input-text: #eeeeee;
}
:root[data-theme="codeforge-dark"] a:not(.button):not(.item):not(.tab) {
  color: #bd93f9;
}
:root[data-theme="codeforge-dark"] a:not(.button):not(.item):not(.tab):hover {
  color: #eeeeee;
}
:root[data-theme="codeforge-dark"] .ui.primary.button,
:root[data-theme="codeforge-dark"] .ui.primary.buttons .button {
  background-color: #bd93f9 !important;
  color: #1e1f29 !important;
}
:root[data-theme="codeforge-dark"] .ui.primary.button:hover {
  background-color: #a679e5 !important;
}

:root[data-theme="codeforge-dark"] body,
:root[data-theme="codeforge-dark"] .page-content {
  background-color: #282A36 !important;
}

:root[data-theme="codeforge-dark"] input,
:root[data-theme="codeforge-dark"] .ui.input input,
:root[data-theme="codeforge-dark"] .ui.form input:not([type=submit]) {
  background-color: #1e1f29 !important;
  color: #eeeeee !important;
  border-color: #44475a !important;
}

/* Dracula: cover ALL background surfaces on dark mode */
:root[data-theme="codeforge-dark"],
:root[data-theme="codeforge-dark"] html,
:root[data-theme="codeforge-dark"] body,
:root[data-theme="codeforge-dark"] .full,
:root[data-theme="codeforge-dark"] .full.height,
:root[data-theme="codeforge-dark"] .full.screen,
:root[data-theme="codeforge-dark"] .ui.container,
:root[data-theme="codeforge-dark"] .page-content,
:root[data-theme="codeforge-dark"] #app,
:root[data-theme="codeforge-dark"] main,
:root[data-theme="codeforge-dark"] .signup-container,
:root[data-theme="codeforge-dark"] .signin-container,
:root[data-theme="codeforge-dark"] .user.signin,
:root[data-theme="codeforge-dark"] .user.signup,
:root[data-theme="codeforge-dark"] .user.link-account,
:root[data-theme="codeforge-dark"] .user.activate {
  background-color: #282A36 !important;
  color: #eeeeee !important;
}

:root[data-theme="codeforge-dark"] .ui.card,
:root[data-theme="codeforge-dark"] .ui.segment,
:root[data-theme="codeforge-dark"] .ui.form,
:root[data-theme="codeforge-dark"] .ui.raised.segment {
  background-color: #1e1f29 !important;
  color: #eeeeee !important;
  border-color: #44475a !important;
}

/* Dracula: kill webkit autofill pink background */
:root[data-theme="codeforge-dark"] input:-webkit-autofill,
:root[data-theme="codeforge-dark"] input:-webkit-autofill:hover,
:root[data-theme="codeforge-dark"] input:-webkit-autofill:focus,
:root[data-theme="codeforge-dark"] input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #1e1f29 inset !important;
  -webkit-text-fill-color: #eeeeee !important;
  caret-color: #eeeeee !important;
  border-color: #44475a !important;
}

/* Dracula: force ALL form inputs + parents to dark */
:root[data-theme="codeforge-dark"] input,
:root[data-theme="codeforge-dark"] input[type],
:root[data-theme="codeforge-dark"] .field input,
:root[data-theme="codeforge-dark"] .field .ui.input,
:root[data-theme="codeforge-dark"] .field .ui.input input,
:root[data-theme="codeforge-dark"] .ui.form .field,
:root[data-theme="codeforge-dark"] .ui.form .field input,
:root[data-theme="codeforge-dark"] .ui.form .fields .field input,
:root[data-theme="codeforge-dark"] .ui.form .inline.field input,
:root[data-theme="codeforge-dark"] .ui.input input {
  background-color: #1e1f29 !important;
  background: #1e1f29 !important;
  color: #eeeeee !important;
  border-color: #44475a !important;
}

/* Dracula: nuclear option for input fields */
:root[data-theme="codeforge-dark"] input#user_name,
:root[data-theme="codeforge-dark"] input#password,
:root[data-theme="codeforge-dark"] input[type="text"],
:root[data-theme="codeforge-dark"] input[type="password"],
:root[data-theme="codeforge-dark"] input[type="email"] {
  background-color: #1e1f29 !important;
  background-image: none !important;
  color: #eeeeee !important;
  -webkit-text-fill-color: #eeeeee !important;
  border: 1px solid #44475a !important;
  box-shadow: 0 0 0 30px #1e1f29 inset !important;
  -webkit-box-shadow: 0 0 0 30px #1e1f29 inset !important;
}