/* ==========================================================================
   radio-button.css — Radio Button component
   Import order: global.css → pacifico.css → aliases.css → radio-button.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  /* Page background — neutral-low */
  background-color: var(--neutral-color-low);
  font-family: var(--font-family-base);
  font-size: var(--font-size-m);
  color: var(--neutral-color-xhigh);
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Showcase layout
   -------------------------------------------------------------------------- */
.showcase {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.showcase__header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.showcase__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-small);
  letter-spacing: var(--letter-spacing-xlarge);
  color: var(--neutral-color-xhigh);
}

.showcase__subtitle {
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-regular);
  color: var(--neutral-color-medium);
  letter-spacing: var(--letter-spacing-small);
}

.showcase__section-title {
  font-size: var(--font-size-l);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-small);
  letter-spacing: var(--letter-spacing-large);
  color: var(--neutral-color-xhigh);
  padding-bottom: var(--spacing-xs);
  border-bottom: var(--border-width-small) solid var(--neutral-color-low);
}

/* State grid: label col + 2 value cols */
.rb-grid {
  display: grid;
  grid-template-columns: 160px repeat(2, 1fr);
  gap: var(--spacing-m) var(--spacing-l);
  align-items: center;
}

.rb-grid--3col {
  /* Explicit 3-col alias — same layout, kept for clarity */
  grid-template-columns: 160px repeat(2, 1fr);
}

.rb-grid__col-header {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--neutral-color-medium);
  letter-spacing: var(--letter-spacing-small);
}

.rb-grid__row-label {
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-medium);
  color: var(--neutral-color-medium);
  letter-spacing: var(--letter-spacing-small);
  align-self: center;
}

/* Interactive group demo */
.rb-group-demo {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-m);
}

.rb-group-demo__question {
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-medium);
  color: var(--neutral-color-high);
  letter-spacing: var(--letter-spacing-small);
}

.rb-group-demo__options {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s);
}

/* --------------------------------------------------------------------------
   Radio Button — base structure
   <label class="radio [modifiers]">
     <input type="radio" class="radio__input">  ← sr-only
     <span class="radio__circle">
       <span class="radio__dot"></span>
     </span>
     <span class="radio__label">Label</span>     ← optional
   </label>
   -------------------------------------------------------------------------- */
.radio {
  display: inline-flex;
  align-items: center;
  /* Gap between circle and label — spacing-xs (8px) */
  gap: var(--spacing-xs);
  cursor: pointer;
  width: fit-content;
}

/* Visually hidden native input — accessible but invisible */
.radio__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Visual circle
   -------------------------------------------------------------------------- */
.radio__circle {
  /* Sizing: xlarge = spacing-xl = 2rem = 32px */
  width: var(--spacing-xl);
  height: var(--spacing-xl);
  flex-shrink: 0;

  /* Layout — center the inner dot */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Shape — fully circular */
  border-radius: var(--border-radius-circular);

  /* Default unchecked: transparent bg, neutral-medium border */
  background-color: transparent;
  border: var(--border-width-small) solid var(--neutral-color-medium);

  /* Transition */
  transition: background-color 300ms ease-in-out,
              border-color 300ms ease-in-out;
}

/* Inner dot — hidden by default */
.radio__dot {
  width: 0.75rem;  /* 12px — matches Tailwind h-3/w-3 */
  height: 0.75rem;
  border-radius: var(--border-radius-circular);
  background-color: var(--neutral-color-xlow);
  display: none;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Label text
   -------------------------------------------------------------------------- */
.radio__label {
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-xlarge);
  letter-spacing: var(--letter-spacing-medium);
  color: var(--neutral-color-xhigh);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Label position: start (label before circle)
   DOM order stays input → circle → label; flex-direction reverses visual
   -------------------------------------------------------------------------- */
.radio--label-start {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   State: Hover
   Applied via :hover on label or .is-hover class for showcase simulation
   -------------------------------------------------------------------------- */
.radio:hover .radio__circle,
.radio.is-hover .radio__circle {
  /* Hover unchecked: neutral-high border */
  border-color: var(--neutral-color-high);
}

/* --------------------------------------------------------------------------
   State: Checked
   Uses native :checked selector via adjacent sibling combinator
   -------------------------------------------------------------------------- */
.radio__input:checked + .radio__circle {
  /* Checked: brand primary-high bg + border */
  background-color: var(--color-brand-primary-high);
  border-color: var(--color-brand-primary-high);
}

.radio__input:checked + .radio__circle .radio__dot {
  display: block;
}

/* Checked + hover */
.radio:hover .radio__input:checked + .radio__circle,
.radio.is-hover .radio__input:checked + .radio__circle {
  background-color: var(--color-brand-primary-xhigh);
  border-color: var(--color-brand-primary-xhigh);
}

/* Focus ring — accessibility */
.radio__input:focus-visible + .radio__circle {
  outline: var(--border-width-medium) solid var(--color-brand-primary-medium);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Variant: Error
   -------------------------------------------------------------------------- */
.radio--error .radio__circle {
  /* Error unchecked: danger-medium border */
  border-color: var(--feedback-color-danger-medium);
}

.radio--error:hover .radio__circle,
.radio--error.is-hover .radio__circle {
  border-color: var(--feedback-color-danger-high);
}

/* Error + checked: danger bg */
.radio--error .radio__input:checked + .radio__circle {
  background-color: var(--feedback-color-danger-medium);
  border-color: var(--feedback-color-danger-medium);
}

.radio--error:hover .radio__input:checked + .radio__circle,
.radio--error.is-hover .radio__input:checked + .radio__circle {
  background-color: var(--feedback-color-danger-high);
  border-color: var(--feedback-color-danger-high);
}

/* Error label color */
.radio--error .radio__label {
  color: var(--feedback-color-danger-medium);
}

/* --------------------------------------------------------------------------
   State: Disabled
   Mute the entire component with opacity so the circle shape stays visible
   against any background, consistent with button/checkbox disabled treatment
   -------------------------------------------------------------------------- */
.radio:has(.radio__input:disabled) {
  cursor: not-allowed;
  pointer-events: none;
  /* opacity-medium (0.32) fades all child elements uniformly */
  opacity: var(--opacity-medium);
}