/*-- -------------------------- -->
<---     Webbdesign (local)     -->
<--- -------------------------- -*/

/*-- -------------------------- -->
<---          Intro            -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0em) {
  #wd-intro {
    padding: clamp(3.75rem, 7vw, 6rem) 1rem;
  }
  #wd-intro .wd-intro-container {
    width: 92%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    align-items: center;
  }
  #wd-intro .wd-visual {
    width: 100%;
    max-width: 30rem;
    flex-shrink: 0;
  }
  /* Code-window mockup */
  #wd-intro .code-window {
    background: #32302f;
    border: 1px solid #504945;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
  }
  #wd-intro .cw-bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 0.9rem;
    background: #282828;
    border-bottom: 1px solid #504945;
  }
  #wd-intro .cw-bar .dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: #665c54;
  }
  #wd-intro .cw-bar .dot:nth-child(1) { background: #cc241d; }
  #wd-intro .cw-bar .dot:nth-child(2) { background: #d79921; }
  #wd-intro .cw-bar .dot:nth-child(3) { background: #98971a; }
  #wd-intro .cw-file {
    margin-left: 0.6rem;
    font-size: 0.78rem;
    color: #a89984;
  }
  #wd-intro .cw-body {
    padding: 1.1rem 1.1rem 1.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    font-size: 0.7rem;
  }
  #wd-intro .cw-line {
    display: flex;
    align-items: center;
    gap: 0.45rem;
  }
  #wd-intro .cw-line.indent { padding-left: 1.4rem; }
  #wd-intro .cw-line.indent2 { padding-left: 2.8rem; }
  /* Each token is a coloured bar standing in for code */
  #wd-intro .cw-line i {
    height: 0.55rem;
    border-radius: 999px;
    display: block;
  }
  #wd-intro .ln { width: 0.9rem; background: #504945; flex-shrink: 0; }
  #wd-intro .tag { width: 3.5rem; background: #fb4934; }
  #wd-intro .tag.sm { width: 2.2rem; }
  #wd-intro .att { width: 2.8rem; background: #fabd2f; }
  #wd-intro .att.sm { width: 1.8rem; }
  #wd-intro .str { width: 4.5rem; background: #8ec07c; }
  #wd-intro .str.lg { width: 6.5rem; }
  #wd-intro .val { width: 3.2rem; background: #83a598; }
  #wd-intro .cursor {
    width: 0.5rem;
    height: 0.95rem;
    border-radius: 1px;
    background: #fe8019;
    animation: wd-blink 1s steps(1) infinite;
  }
  @keyframes wd-blink { 50% { opacity: 0; } }

  #wd-intro .wd-intro-text {
    width: 100%;
    max-width: 40rem;
  }
  #wd-intro .lead {
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 2rem;
  }
  #wd-intro .wd-why-title {
    color: var(--text);
    font-size: clamp(1.25rem, 3vw, 1.6rem);
    font-weight: 700;
    margin-bottom: 1.25rem;
  }
  #wd-intro .wd-why {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
  #wd-intro .wd-why li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--text);
    font-weight: 700;
    font-size: 1.02rem;
  }
  #wd-intro .wd-why .check {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    background: rgba(104, 157, 106, 0.18);
    color: #689d6a;
  }
}
/* Desktop: visual left, text right */
@media only screen and (min-width: 64em) {
  #wd-intro .wd-intro-container {
    flex-direction: row;
    align-items: flex-start;
    gap: 4.5rem;
  }
  #wd-intro .wd-visual {
    position: sticky;
    top: 8rem;
  }
  #wd-intro .cw-body {
    font-size: 0.82rem;
    gap: 0.85rem;
  }
  #wd-intro .wd-why {
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.5rem;
  }
}

/*-- -------------------------- -->
<---   Innehåll (undersektioner) -->
<--- -------------------------- -*/
@media only screen and (min-width: 0em) {
  #wd-content {
    background: var(--bg-soft);
    padding: clamp(3.75rem, 7vw, 6rem) 1rem;
  }
  #wd-content .wd-content-container {
    width: 92%;
    max-width: 50rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 2.75rem;
  }
  #wd-content .wd-block h2 {
    color: var(--text);
    font-size: clamp(1.4rem, 3.5vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
    position: relative;
    padding-left: 1rem;
  }
  /* Accent bar to the left of each heading */
  #wd-content .wd-block h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.15em;
    bottom: 0.15em;
    width: 0.28rem;
    border-radius: 999px;
    background: var(--primary);
  }
  #wd-content .wd-block p {
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.75;
    margin-bottom: 1rem;
  }
  #wd-content .wd-block p:last-child {
    margin-bottom: 0;
  }
  #wd-content .wd-block strong {
    color: var(--text);
  }
  #wd-content .wd-block a {
    color: var(--primary);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color .3s, border-color .3s;
  }
  #wd-content .wd-block a:hover {
    color: var(--primary-hover);
    border-color: var(--primary-hover);
  }
}

/*-- -------------------------- -->
<--- 7.2 Code-window typing      -->
<--- -------------------------- -*/
/* effects.js adds .cw-animate only in dark mode without reduced motion;
   light mode / reduced motion keep every line visible (default). */
@media only screen and (min-width: 0em) {
  body.dark-mode #wd-intro .code-window.cw-animate .cw-line {
    opacity: 0;
    transform: translateX(-5px);
    transition: opacity .25s ease, transform .25s ease;
  }
  body.dark-mode #wd-intro .code-window.cw-animate .cw-line.shown {
    opacity: 1;
    transform: none;
  }
}