/* EddyReady.id — components
   "Signal Green Executive" / Dark Editorial.

   Element-level defaults live in base.css. This file holds the components
   specified in docs/DESIGN-SYSTEM.md section 7.

   Hard rules carried from the design system:
     - navbar is a centered capsule, never edge-to-edge
     - --color-surface-alt never carries text
     - text on --color-primary or --color-accent fills is --color-text-ink
     - hairlines inside a card use --color-border-strong, never --color-border
     - --color-accent is rationed: CTAs and pinned badges only */


/* Page offset ------------------------------------------------------------ */
/* The capsule is fixed, so content must clear it: a 16px inset plus a 56px
   capsule is 72px, and --space-6 is the first token above that. */

main {
  padding-top: var(--space-6);
}


/* Buttons ---------------------------------------------------------------- */
/* One primary treatment, used by the hero CTA and the lead-form submit.
   --radius-control (50px) rather than --radius-pill, so a button reads as a
   control and a tag reads as a label. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-radius: var(--radius-control);
  font-family: var(--font-display);
  font-size: var(--size-body);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--motion-duration) var(--motion-easing),
              background-color var(--motion-duration) var(--motion-easing);
}

.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-text-ink);
}

/* No glow on hover. It was evaluated and removed as an AI-design tell;
   see DESIGN-SYSTEM.md section 5 and the corrections log. */
.btn--primary:hover {
  background-color: var(--color-border-strong);
  transform: translateY(-1px);
}

.btn--primary:active {
  transform: translateY(0);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}


/* Headline emphasis ------------------------------------------------------ */
/* Section 7 allows one or two words of a hero headline to be set in the
   primary green. A class rather than an inline style, so the rule stays in
   the stylesheet where design-guard can see it. */

.text-primary {
  color: var(--color-primary);
}


/* Tag chip --------------------------------------------------------------- */
/* Non-interactive label. Transparent fill so it never competes with a
   button, outlined in border-strong which clears 8.06:1 on surface. */

.chip {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background-color: transparent;
  color: var(--color-text);
  font-size: var(--size-caption);
  line-height: 1.5;
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  list-style: none;
  padding: 0;
}


/* Card ------------------------------------------------------------------- */
/* Shared by Produk and Artikel. One pattern, per the guardrail against
   inventing a second card style for either. */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  position: relative;
  background-color: var(--color-surface);
  border-radius: var(--radius-card);
  padding: var(--space-4);
}

/* The media panel is the only place the heavy shadow belongs: it reads as
   physical depth for a photograph, not as decoration on a text block. */
.card__media {
  aspect-ratio: 16 / 10;
  background-color: var(--color-surface-alt);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-media);
  overflow: hidden;
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--size-caption);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
}

.card__title {
  font-size: var(--size-label);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--tracking-sm);
}

.card__desc {
  color: var(--color-text-muted);
}

/* Divider inside a card uses border-strong: --color-border is 2.43:1 on
   surface and effectively invisible. */
.card__divider {
  border: 0;
  border-top: 1px solid var(--color-border-strong);
  margin-block: var(--space-1);
}

/* Artikel only, maximum three. The one sanctioned use of amber outside CTAs. */
.card__pinned {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background-color: var(--color-accent);
  color: var(--color-text-ink);
  border-radius: var(--radius-tight);
  font-family: var(--font-mono);
  font-size: var(--size-caption);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}


/* Navbar ----------------------------------------------------------------- */
/* Centered floating capsule, never an edge-to-edge bar. The translucent fill
   is derived from --color-canvas with color-mix rather than written as a raw
   rgba, so the token stays the single source of truth. */

.navbar {
  position: fixed;
  top: var(--space-2);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: calc(100% - var(--space-4));
  max-width: 640px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
  background-color: color-mix(in srgb, var(--color-canvas) 55%, transparent);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
}

.navbar__brand {
  flex: 0 1 auto;
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--size-body);
  font-weight: 700;
  letter-spacing: var(--tracking-sm);
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
}

.navbar__links {
  display: none;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
  list-style: none;
  padding: 0;
}

.navbar__link {
  color: var(--color-text);
  font-size: var(--size-caption);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--motion-duration) var(--motion-easing);
}

.navbar__link:hover {
  color: var(--color-primary);
}

/* The nav CTA is a pill, distinct from the hero button's --radius-control,
   so the two do not read as the same control at different sizes. */
.navbar__cta {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-3);
  margin-left: auto;
  background-color: var(--color-primary);
  color: var(--color-text-ink);
  border-radius: var(--radius-pill);
  font-size: var(--size-caption);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--motion-duration) var(--motion-easing);
}

.navbar__cta:hover {
  background-color: var(--color-border-strong);
}


/* Hamburger -------------------------------------------------------------- */
/* A real button, not a styled div: it must be reachable by Tab and operable
   by Enter and Space, which only a button gives for free. */

.navbar__toggle {
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-1);
  width: 44px;
  height: 44px;
  padding: 0 var(--space-1);
  margin-left: auto;
  background: transparent;
  border: 0;
  border-radius: var(--radius-tight);
  cursor: pointer;
}

.navbar__toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-text);
  border-radius: var(--radius-tight);
  transition: transform var(--motion-duration) var(--motion-easing),
              opacity var(--motion-duration) var(--motion-easing);
}

/* Three bars fold into a cross. The middle bar fades rather than moving, so
   the two outer bars read as rotating into place. */
.navbar__toggle[aria-expanded="true"] .navbar__toggle-bar:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}

.navbar__toggle[aria-expanded="true"] .navbar__toggle-bar:nth-child(2) {
  opacity: 0;
}

.navbar__toggle[aria-expanded="true"] .navbar__toggle-bar:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}

/* Mobile panel. Hidden with the hidden attribute rather than a class, so it
   is removed from the accessibility tree and the tab order together. */
.navbar__panel[hidden] {
  display: none;
}

.navbar__panel__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--space-3);
  background-color: var(--color-primary);
  color: var(--color-text-ink);
  border-radius: var(--radius-pill);
  font-size: var(--size-caption);
  font-weight: 700;
  text-decoration: none;
}

.navbar__panel {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-card);
  list-style: none;
  margin: 0;
}


/* Footer ----------------------------------------------------------------- */

.footer {
  background-color: var(--color-canvas);
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-5);
}

.footer__channels {
  display: grid;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
}

.footer__channel {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Icon square. Holds a DM Mono abbreviation rather than a brand logo: the
   real marks are trademarked and drawing them from memory risks getting them
   wrong, which R-23 treats as inventing an asset. */
.footer__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-tight);
  font-family: var(--font-mono);
  font-size: var(--size-caption);
  color: var(--color-primary);
}

.footer__label {
  font-family: var(--font-mono);
  font-size: var(--size-caption);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.footer__value {
  color: var(--color-text);
}

/* Visible placeholder marker. R-38: an unsupplied value is labelled as such,
   never filled with something plausible. */
.footer__value--placeholder {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--size-caption);
}

.footer__disclaimer {
  color: var(--color-text-muted);
  font-size: var(--size-caption);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
}

.footer__top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--space-3);
  background-color: var(--color-accent);
  color: var(--color-text-ink);
  border-radius: var(--radius-tight);
  font-family: var(--font-mono);
  font-size: var(--size-caption);
  font-weight: 500;
  text-decoration: none;
  transition: opacity var(--motion-duration) var(--motion-easing);
}

.footer__top:hover {
  opacity: 0.85;
}


/* Responsive ------------------------------------------------------------- */
/* Mobile-first. The hamburger is the small-screen state; from 768px the
   links sit inline and the toggle and panel are removed entirely. */

@media (min-width: 768px) {
  .navbar {
    gap: var(--space-4);
    padding-left: var(--space-4);
  }

  .navbar__links {
    display: flex;
  }

  .navbar__cta {
    display: inline-flex;
  }

  .navbar__links + .navbar__cta {
    margin-left: 0;
  }

  .navbar__toggle,
  .navbar__panel {
    display: none;
  }

  .footer__channels {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
}