/* ============================================================
   SHORTLY — style.css
   Mobile-first · Custom properties · Native CSS nesting
   ============================================================ */


/* ── 1. CUSTOM PROPERTIES ───────────────────────────────────── */

:root {
  /* Colors — Primary */
  --color-cyan:         hsl(180, 66%, 49%);
  --color-cyan-light:   hsl(180, 66%, 65%); /* hover state */
  --color-dark-violet:  hsl(257, 27%, 26%);

  /* Colors — Secondary */
  --color-red:          hsl(0, 87%, 67%);

  /* Colors — Neutral */
  --color-gray:         hsl(0, 0%, 75%);
  --color-gray-violet:  hsl(257, 7%, 63%);
  --color-very-dark-blue:   hsl(255, 11%, 22%);
  --color-very-dark-violet: hsl(260, 8%, 14%);
  --color-white:        hsl(0, 0%, 100%);
  --color-bg:           hsl(225, 26%, 95%);

  /* Typography */
  --font-family:  'Poppins', sans-serif;
  --font-size-base: 1.125rem;   /* 18px */
  --font-weight-medium: 500;
  --font-weight-bold:   700;

  /* Spacing scale */
  --space-xs:   0.5rem;
  --space-sm:   1rem;
  --space-md:   1.5rem;
  --space-lg:   2rem;
  --space-xl:   3rem;
  --space-2xl:  5rem;

  /* Layout */
  --container-max: 69.375rem; /* 1110px */
  --container-padding: var(--space-md);

  /* Radii */
  --radius-sm:  0.25rem;
  --radius-md:  0.5rem;
  --radius-pill: 2rem;
  --radius-circle: 50%;

  /* Transitions */
  --transition: 200ms ease;
}


/* ── 2. RESET & BASE ────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-violet);
  background-color: var(--color-white);
  line-height: 1.6;
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}


/* ── 3. UTILITIES ───────────────────────────────────────────── */

/* Screen-reader only — visually hidden but accessible */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.container {
  width: min(var(--container-max), 100% - var(--container-padding) * 2);
  margin-inline: auto;
}


/* ── 4. BUTTONS ─────────────────────────────────────────────── */

.btn {
  display: inline-block;
  padding: 0.75em 1.75em;
  font-family: inherit;
  font-size: 1rem;
  font-weight: var(--font-weight-bold);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition), opacity var(--transition);
  text-align: center;
  white-space: nowrap;
  background-color: var(--color-cyan);
  color: var(--color-white);

  &:hover,
  &:focus-visible {
    background-color: var(--color-cyan-light);
  }  
}
.btn--ghost {
  background-color: transparent;
  color: var(--color-gray-violet);

  &:hover,
  &:focus-visible {
    color: var(--color-very-dark-blue);
  }
}
.btn--pill {
  border-radius: var(--radius-pill);
}

/* Shared focus style */
:focus-visible {
  outline: 3px solid var(--color-cyan);
  outline-offset: 3px;
}


/* ── 5. HEADER ──────────────────────────────────────────────── */

.site-header {
  padding-block: var(--space-sm);

  & .site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
  }

  & .site-header__logo {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-very-dark-blue);
    margin-inline-end: auto;
  }
}

/* ── Hamburger ── */
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2rem;
  height: 2rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 100;

  & .nav-toggle__bar {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--color-gray-violet);
    border-radius: var(--radius-pill);
    transition: transform var(--transition), opacity var(--transition);
    transform-origin: center;
  }
}

/* X state — driven by aria-expanded, no extra JS class needed */
.nav-toggle[aria-expanded="true"] {
  & .nav-toggle__bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  & .nav-toggle__bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }

  & .nav-toggle__bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
}

/* ── Primary nav — mobile (hidden by default) ── */
.primary-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  position: absolute;
  top: calc(100% + var(--space-xs));
  left: var(--container-padding);
  right: var(--container-padding);
  background-color: var(--color-dark-violet);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  text-align: center;
  z-index: 99;
  /* Fade — hidden by default, visible when open */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition), visibility var(--transition);

  &.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  & .primary-nav__links {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding-block-end: var(--space-md);
    border-bottom: 1px solid var(--color-gray-violet);

    & a {
      color: var(--color-white);
      font-weight: var(--font-weight-bold);

      &:hover,
      &:focus-visible {
        color: var(--color-cyan);
      }
    }
  }

  & .primary-nav__auth {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);

    & .btn--ghost {
      color: var(--color-white);
    }

    & .btn--primary {
      width: 100%;
    }
  }
}

/* Make header position relative so nav dropdown positions against it */
.site-header {
  position: relative;
}


/* ── 6. HERO ────────────────────────────────────────────────── */

.hero {
  overflow: hidden;
  text-align: center;

  & .hero__inner {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--space-lg);
    padding-block: var(--space-xl);
    margin-bottom: calc(var(--space-xl) * 2 + var(--space-sm));
  }

  & .hero__illustration {
    /* Bleed the image slightly past the container on mobile */
    margin-inline-end: calc(var(--container-padding) * -1);

    & img {
      max-width: none;
    }
  }

  & .hero__heading {
    font-size: clamp(2.5rem, 8vw, 5rem);
    font-weight: var(--font-weight-bold);
    color: var(--color-very-dark-blue);
    line-height: 1.1;
    margin-block-end: var(--space-sm);
  }

  & .hero__body {
    margin-block-end: var(--space-md);
    max-width: 35ch;
    margin-inline: auto;
  }
}


/* ── 7. SHORTENER ───────────────────────────────────────────── */

.shortener-section {
  background-color: var(--color-bg);
  padding-block-end: var(--space-xl);
}

.shortener {
  background-color: var(--color-dark-violet);
  background-image: url('./images/bg-shorten-mobile.svg');
  background-repeat: no-repeat;
  background-position: top right;
  border-radius: var(--radius-md);
  padding: var(--space-md);
  transform: translateY(-50%);
  & .shortener__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  & .shortener__field-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  & .shortener__input {
    width: 100%;
    padding: 0.75em 1em;
    font-family: inherit;
    font-size: 1rem;
    border: 3px solid transparent;
    border-radius: var(--radius-md);
    outline: none;
    transition: border-color var(--transition);

    &::placeholder {
      color: var(--color-gray);
    }

    &:focus-visible {
      border-color: var(--color-cyan);
      outline: none;
    }

    /* Invalid state — applied via JS adding aria-invalid="true" */
    &[aria-invalid="true"] {
      border-color: var(--color-red);
      color: var(--color-red);

      &::placeholder {
        color: var(--color-red);
        opacity: 0.5;
      }
    }
  }

  & .shortener__error {
    color: var(--color-red);
    font-size: 0.875rem;
    font-style: italic;
  }

  & .shortener__btn {
    width: 100%;
    border-radius: var(--radius-md);
  }
}

/* ── Results ── */
.results-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-block-start: calc(var(--space-xl) * -1);

  & .results-list__item {
    background-color: var(--color-white);
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  & .results-list__original {
    display: block;
    padding: var(--space-sm);
    color: var(--color-very-dark-blue);
    font-weight: var(--font-weight-medium);
    border-bottom: 1px solid var(--color-bg);
    /* Truncate long URLs */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  & .results-list__short-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-sm);
  }

  & .results-list__short-link {
    color: var(--color-cyan);
    font-weight: var(--font-weight-medium);

    &:hover,
    &:focus-visible {
      text-decoration: underline;
    }
  }

  & .results-list__copy-btn {
    width: 100%;
    border-radius: var(--radius-md);

    /* "Copied!" state — toggled via JS adding .is-copied */
    &.is-copied {
      background-color: var(--color-dark-violet);
    }
  }
}


/* ── 8. STATISTICS ──────────────────────────────────────────── */

.stats-section {
  background-color: var(--color-bg);
  padding-block: var(--space-xl);
  text-align: center;

  & .stats-section__intro {
    margin-block-end: var(--space-xl);
  }

  & .stats-section__heading {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    color: var(--color-very-dark-blue);
    margin-block-end: var(--space-sm);
  }

  & .stats-section__body {
    max-width: 40ch;
    margin-inline: auto;
  }
}

/* Feature cards — grid layout, mobile: 1 col / 3 rows */
.features-list {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: var(--space-lg);
  position: relative;
  justify-items: center;

  /* Mobile: vertical cyan line centered horizontally */
  &::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: 50%;
    width: 8px;
    background-color: var(--color-cyan);
    transform: translateX(-50%);
    z-index: 0;
    top: 4rem;
  }

  /* Card alignment — start / center / end creates the stagger */
  & .feature-card:nth-child(1) { align-self: start; }
  & .feature-card:nth-child(2) { align-self: center; }
  & .feature-card:nth-child(3) { align-self: end; }
}

.feature-card {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  max-width: 22rem;
  width: 100%;
  text-align: center;
  z-index: 1;

  & .feature-card__icon-wrapper {
    display: grid;
    place-items: center;
    grid-row: 1/3;
    grid-column: 1/2;
    align-self: center;
    justify-self: center;
    width: 4.5rem;
    height: 4.5rem;
    background-color: var(--color-dark-violet);
    border-radius: var(--radius-circle);
    z-index: 2;
  }

  & .feature-card__content {
    grid-row: 2/5;
    grid-column: 1/2;
    padding: var(--space-lg) var(--space-md);
    background-color: var(--color-white);
    border-radius: var(--radius-md);
  }

  & .feature-card__heading {
    font-size: 1.25rem;
    color: var(--color-very-dark-blue);
    margin-block: var(--space-lg) var(--space-sm);
  }
}


/* ── 9. CTA BAND ────────────────────────────────────────────── */

.cta-band {
  background-color: var(--color-dark-violet);
  background-image: url('./images/bg-boost-mobile.svg');
  background-repeat: no-repeat;
  background-size: cover;
  padding-block: var(--space-2xl);
  text-align: center;

  & .cta-band__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
  }

  & .cta-band__heading {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    color: var(--color-white);
  }
}


/* ── 10. FOOTER ─────────────────────────────────────────────── */

.site-footer {
  background-color: var(--color-very-dark-violet);
  color: var(--color-gray-violet);
  padding-block: var(--space-xl);
  text-align: center;

  & .site-footer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xl);
  }

  & .site-footer__logo {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
  }
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);

  & .footer-nav__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  & .footer-nav__heading {
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
  }

  & a {
    color: var(--color-gray-violet);
    transition: color var(--transition);

    &:hover,
    &:focus-visible {
      color: var(--color-cyan);
    }
  }

  & li + li {
    margin-block-start: var(--space-xs);
  }
}

.social-links {
  display: flex;
  align-items: center;
  gap: var(--space-md);

  & .social-links__link {
    color: var(--color-white);
    transition: color var(--transition);

    &:hover,
    &:focus-visible {
      color: var(--color-cyan);
    }

    & img {
      width: 1.25rem;
      height: 1.25rem;
    }
  }
}

.attribution {
  margin-block-start: var(--space-lg);
  font-size: 0.75rem;
  text-align: center;
  color: var(--color-gray-violet);

  & a {
    color: var(--color-cyan);

    &:hover,
    &:focus-visible {
      text-decoration: underline;
    }
  }
}


/* ── 11. DESKTOP BREAKPOINT (≥ 768px) ───────────────────────── */

@media (width >= 768px) {

  /* ── Header ── */
  .nav-toggle {
    display: none;
  }

  .primary-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: static;
    background-color: transparent;
    padding: 0;
    gap: var(--space-md);
    text-align: left;

    & .primary-nav__links {
      flex-direction: row;
      gap: var(--space-sm);
      padding-block-end: 0;
      border-bottom: none;

      & a {
        font-size: 0.9rem;
        color: var(--color-gray-violet);

        &:hover,
        &:focus-visible {
          color: var(--color-very-dark-blue);
        }
      }
    }

    & .primary-nav__auth {
      flex-direction: row;
      align-items: center;
      margin-inline-start: auto;
      gap: var(--space-sm);

      & .btn--ghost {
        font-size: 0.9rem;
        color: var(--color-gray-violet);
        padding-inline: var(--space-sm);
      }

      & .btn--primary {
        width: auto;
        font-size: 0.9rem;
        padding: 0.6em 1.5em;
      }
    }
  }

  /* ── Hero ── */
  .hero {
    text-align: left;

    & .hero__inner {
      flex-direction: row;
      align-items: center;
      gap: var(--space-xl);
      padding-block: var(--space-2xl);
    }

    & .hero__content {
      flex: 0 0 55%;
    }

    & .hero__body {
      margin-inline: 0;
    }

    & .hero__illustration {
      /* Bleed illustration past the right edge of the viewport */
      flex: 0 0 45%;
      transform: translateX(8%);
      overflow: visible;
      & img {
        max-width: none;
      }
    }
  }

  /* ── Shortener ── */
  .shortener {
    background-image: url('./images/bg-shorten-desktop.svg');
    background-size: cover;
    padding: var(--space-lg) var(--space-xl);

    & .shortener__form {
      flex-direction: row;
      align-items: flex-start;
      gap: var(--space-md);
    }

    & .shortener__field-wrapper {
      flex: 1;
    }

    & .shortener__input {
      padding: 0.85em 1.25em;
    }

    & .shortener__btn {
      width: auto;
      border-radius: var(--radius-md);
      flex-shrink: 0;
      align-self: center;
    }
  }

  /* ── Results ──
     Desktop: one row per result
  ── */
  .results-list {
    & .results-list__item {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      padding-inline: var(--space-md);
    }

    & .results-list__original {
      border-bottom: none;
      padding-block: var(--space-sm);
      padding-inline: 0;
    }

    & .results-list__short-group {
      flex-direction: row;
      align-items: center;
      gap: var(--space-md);
      padding: var(--space-sm) 0;
    }

    & .results-list__copy-btn {
      width: auto;
      min-width: 6rem;
    }
  }

  /* ── Stats — 3-column grid, staggered, horizontal connector ── */
  .stats-section {
    text-align: center;
  }

  .features-list {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    min-height: 28rem;

    /* Desktop: horizontal cyan line centered vertically */
    &::before {
      inset-block-start: 50%;
      inset-block-end: auto;
      inset-inline: 0;
      width: 100%;
      height: 8px;
      transform: translateY(-50%);
    }
  }

  .feature-card {
    max-width: none;
    text-align: left;

    & .feature-card__icon-wrapper {
      justify-self: flex-start;
      margin-left: 2rem;
    }
  }

  .cta-band {
    background-image: url('./images/bg-boost-desktop.svg');
    background-size: cover;

    & .cta-band__heading {
      max-width: 20ch;
    }
  }

  /* ── Footer ──
     Logo | nav groups (centered) | social icons — one row, top-aligned
  ── */
  .site-footer {
    text-align: left;

    & .site-footer__inner {
      flex-direction: row;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--space-xl);
    }
  }

  .footer-nav {
    flex-direction: row;
    gap: var(--space-2xl);
    flex: 1;
    justify-content: center;
  }

  .social-links {
    align-self: flex-start;
    gap: var(--space-sm);
  }
}