/*
 * caah-preferred-source.css — the Google preferred-sources invitation.
 *
 * Loaded only on the blog index and the articles, by inc/caah-preferred-source.php.
 *
 * One set of rules serves both designs. The component is written against the
 * theme's shared variables (--ink, --muted, --primary, --radius-*), which
 * caah-hig-tokens.css rebinds to the HIG palette inside body.caah-hig, so the card
 * follows whichever design is switched on without a second copy of the layout. The
 * few places where the HIG tokens offer something the classic theme has no
 * equivalent for -- layered card shadows, the specular top highlight, the lifted
 * dark-mode accent -- are read through var(--hig-*, <classic fallback>) rather than
 * through a duplicated block.
 *
 * Appearance follows html.dark-mode and only that class, matching every other
 * stylesheet here. There is deliberately no prefers-color-scheme block: the site
 * has a manual toggle, and a media query would fight it.
 */

/* ----------------------------------------------------------------- 1. surface */

.caah-prefsrc {
  --prefsrc-surface: var(--hig-card-bg, #ffffff);
  --prefsrc-border: var(--hig-card-border, rgba(31, 28, 26, 0.12));
  --prefsrc-border-hover: var(--hig-card-border-hover, rgba(31, 28, 26, 0.22));
  --prefsrc-highlight: var(--hig-card-highlight, inset 0 1px 0 rgba(255, 255, 255, 0.75));
  --prefsrc-shadow: var(--hig-shadow-md, 0 10px 30px rgba(31, 32, 39, 0.10));
  --prefsrc-shadow-hover: var(--hig-shadow-hover, 0 16px 40px rgba(31, 32, 39, 0.14));
  --prefsrc-fill: var(--hig-fill, rgba(31, 28, 26, 0.05));
  --prefsrc-accent-text: var(--hig-accent-text, var(--primary));
  --prefsrc-tertiary: var(--hig-text-tertiary, var(--muted));
  --prefsrc-ease: var(--hig-ease-apple, cubic-bezier(0.16, 1, 0.3, 1));

  position: relative;
  max-width: var(--max-width, 1200px);
  /*
   * No block margin. Both parents that hold this card space their children with a
   * gap -- .site-main is a flex column, .blog-index is a grid -- so a margin here
   * would be added to that gap rather than replacing it.
   */
  margin: 0 auto;
  padding: clamp(20px, 3.4vw, 32px);
  border: 1px solid var(--prefsrc-border);
  border-radius: var(--radius-md, 20px);
  background: var(--prefsrc-surface);
  box-shadow: var(--prefsrc-highlight), var(--prefsrc-shadow);
  overflow: hidden;
  transition: border-color 0.22s var(--prefsrc-ease),
              box-shadow 0.22s var(--prefsrc-ease),
              opacity 0.32s var(--prefsrc-ease);
}

/*
 * A single warm wash off the top-left corner, behind everything. It is what stops
 * the card reading as one more white content block in a column of white content
 * blocks, and it is cheap: no extra element, no image, no repaint on scroll.
 */
.caah-prefsrc::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(66, 133, 244, 0.07) 0%, rgba(66, 133, 244, 0) 58%),
    radial-gradient(90% 120% at 100% 0%, rgba(197, 32, 41, 0.05) 0%, rgba(197, 32, 41, 0) 60%);
}

.caah-prefsrc:hover {
  border-color: var(--prefsrc-border-hover);
  box-shadow: var(--prefsrc-highlight), var(--prefsrc-shadow-hover);
}

html.dark-mode .caah-prefsrc {
  --prefsrc-surface: var(--hig-card-bg, #1e1e1e);
  --prefsrc-border: var(--hig-card-border, rgba(255, 255, 255, 0.12));
  --prefsrc-border-hover: var(--hig-card-border-hover, rgba(255, 255, 255, 0.24));
  --prefsrc-highlight: var(--hig-card-highlight, inset 0 1px 0 rgba(255, 255, 255, 0.08));
  --prefsrc-shadow: var(--hig-shadow-md, 0 10px 30px rgba(0, 0, 0, 0.5));
  --prefsrc-shadow-hover: var(--hig-shadow-hover, 0 16px 40px rgba(0, 0, 0, 0.62));
  --prefsrc-fill: var(--hig-fill, rgba(255, 255, 255, 0.07));
  --prefsrc-accent-text: var(--hig-accent-text, #ff6f73);
  --prefsrc-tertiary: var(--hig-text-tertiary, #a5a09a);
}

html.dark-mode .caah-prefsrc::before {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(102, 160, 255, 0.10) 0%, rgba(102, 160, 255, 0) 58%),
    radial-gradient(90% 120% at 100% 0%, rgba(214, 43, 51, 0.09) 0%, rgba(214, 43, 51, 0) 60%);
}

/* ------------------------------------------------------------------ 2. layout */

/*
 * Three columns at full width: mark, copy, illustration. The illustration is the
 * first thing to go, at the width where keeping it would squeeze the sentence
 * below a comfortable measure rather than at some device breakpoint.
 */
.caah-prefsrc-body {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: clamp(16px, 2.6vw, 28px);
}

.caah-prefsrc-copy {
  min-width: 0;
  max-width: 46rem;
}

/* --------------------------------------------------------------- 3. the mark */

.caah-prefsrc-mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: var(--radius-sm, 12px);
  background: var(--hig-bg-elevated, #ffffff);
  border: 1px solid var(--prefsrc-border);
  box-shadow: var(--prefsrc-highlight), var(--hig-shadow-sm, 0 2px 6px rgba(31, 32, 39, 0.08));
}

html.dark-mode .caah-prefsrc-mark {
  background: var(--hig-fill, rgba(255, 255, 255, 0.08));
}

.caah-prefsrc-g {
  display: block;
}

/* -------------------------------------------------------------------- 4. copy */

.caah-prefsrc-eyebrow {
  margin: 0 0 6px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--prefsrc-tertiary);
}

.caah-prefsrc-heading {
  margin: 0 0 8px;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}

.caah-prefsrc-intro {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--muted);
}

/* ----------------------------------------------------------------- 5. actions */

.caah-prefsrc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 18px;
}

.caah-prefsrc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /*
   * The label is swapped for "Opening Google…" while the flow starts. Reserving the
   * width here means the button does not shrink under the pointer that is still on
   * it, which on a press-and-hold reads as the target moving away.
   */
  min-width: 13.5rem;
  justify-content: center;
}

.caah-prefsrc-btn[aria-disabled="true"] {
  cursor: progress;
}

.caah-prefsrc-note {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--prefsrc-tertiary);
}

.caah-prefsrc-status {
  margin: 10px 0 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--prefsrc-accent-text);
  min-height: 0;
}

.caah-prefsrc-status:empty {
  display: none;
}

/* ------------------------------------------------------------ 6. illustration */

.caah-prefsrc-preview {
  width: 232px;
  flex: none;
  /* Centred against the copy rather than pinned to its first line: the copy block is
     taller than the illustration, and top-aligning them leaves the card bottom-heavy
     on one side and empty on the other. */
  align-self: center;
}

.caah-prefsrc-preview-card {
  position: relative;
  display: grid;
  gap: 9px;
  padding: 14px 14px 16px;
  border-radius: var(--radius-sm, 12px);
  border: 1px solid var(--prefsrc-border);
  background: var(--hig-bg, #fbfaf8);
  box-shadow: var(--hig-shadow-sm, 0 2px 8px rgba(31, 32, 39, 0.07));
}

html.dark-mode .caah-prefsrc-preview-card {
  background: var(--hig-bg, #161618);
}

.caah-prefsrc-preview-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 1px;
}

.caah-prefsrc-preview-favicon {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--primary);
  flex: none;
}

.caah-prefsrc-preview-domain {
  font-size: 0.6875rem;
  line-height: 1.2;
  color: var(--prefsrc-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
 * Placeholder bars, not text. See the note in the render function: an invented
 * headline and snippet here would be a fabricated search result.
 */
.caah-prefsrc-preview-title,
.caah-prefsrc-preview-line {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: var(--prefsrc-fill);
}

.caah-prefsrc-preview-title {
  height: 11px;
  width: 82%;
  background: var(--hig-fill-strong, rgba(31, 28, 26, 0.14));
}

.caah-prefsrc-preview-line.short {
  width: 58%;
}

.caah-prefsrc-preview-badge {
  position: absolute;
  right: -10px;
  bottom: -12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  color: var(--prefsrc-accent-text);
  background: var(--hig-bg-elevated, #ffffff);
  border: 1px solid var(--prefsrc-border-hover);
  box-shadow: var(--hig-shadow-md, 0 6px 18px rgba(31, 32, 39, 0.14));
  transform: scale(0.82);
  opacity: 0;
  transition: transform 0.5s var(--hig-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) 0.28s,
              opacity 0.4s ease 0.28s;
}

html.dark-mode .caah-prefsrc-preview-badge {
  background: var(--hig-bg-elevated, #232326);
}

/*
 * The badge settles in when the card arrives, which is the whole point being
 * made: this is what preferring the source adds to the result. .visible is the
 * theme's own reveal class, set by the observer in footer.php, so the animation
 * is tied to the card entering the viewport and never runs off-screen.
 */
.caah-prefsrc.visible .caah-prefsrc-preview-badge,
html:not(.js-reveal) .caah-prefsrc .caah-prefsrc-preview-badge {
  transform: scale(1);
  opacity: 1;
}

/* ------------------------------------------------------------------ 7. dismiss */

.caah-prefsrc-dismiss {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  /*
   * 34px, not the 30 this started at. WCAG 2.2 AA wants 24; a dismiss control tucked
   * in a corner and pressed with a thumb wants more than the minimum, and the glyph
   * inside stays 14px either way.
   */
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--prefsrc-tertiary);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.18s var(--prefsrc-ease),
              background-color 0.18s var(--prefsrc-ease),
              color 0.18s var(--prefsrc-ease);
}

.caah-prefsrc-dismiss:hover,
.caah-prefsrc-dismiss:focus-visible {
  opacity: 1;
  color: var(--ink);
  background: var(--prefsrc-fill);
}

.caah-prefsrc-dismiss:focus-visible {
  outline: 2px solid var(--hig-focus, var(--ink));
  outline-offset: 2px;
}

/*
 * Dismissal collapses the space as well as the card. Fading it out alone would
 * leave a hole in the article the reader has to scroll past, which reads as a
 * broken page rather than a granted request.
 */
.caah-prefsrc.is-dismissing {
  opacity: 0;
  transform: translateY(-6px);
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  transition: opacity 0.24s ease,
              transform 0.24s ease,
              max-height 0.34s var(--prefsrc-ease) 0.04s,
              padding 0.34s var(--prefsrc-ease) 0.04s;
}

/* -------------------------------------------------------------- 8. narrow, motion */

@media (max-width: 900px) {
  .caah-prefsrc-preview {
    display: none;
  }
}

@media (max-width: 560px) {
  .caah-prefsrc-body {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .caah-prefsrc-mark {
    width: 40px;
    height: 40px;
  }

  .caah-prefsrc-btn {
    width: 100%;
    min-width: 0;
  }

  .caah-prefsrc-dismiss {
    width: 40px;
    height: 40px;
  }

  /* The dismiss control keeps its corner; the heading yields the width instead. */
  .caah-prefsrc-heading {
    padding-right: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .caah-prefsrc,
  .caah-prefsrc-preview-badge,
  .caah-prefsrc-dismiss {
    transition: none;
  }

  .caah-prefsrc-preview-badge {
    transform: none;
    opacity: 1;
  }

  .caah-prefsrc.is-dismissing {
    transition: none;
  }
}