/* ==========================================================================
   AEO God Mode post components
   --------------------------------------------------------------------------
   The shared visual system for blog posts. Built once so all 100 planned
   posts look like one publication rather than 100 different articles.

   Two design constraints drive everything here:

   1. Every element must survive being stripped to plain text. AI answer
      engines extract text, not CSS. A "pro tip" that only reads as a tip
      because it is in a blue box is invisible to an extractor, so each
      component carries a visible text label as well as its styling.
   2. Claims carry their source inline. The whole differentiator of this blog
      is that it is sourced, so citing has to be frictionless or it will not
      happen.
   ========================================================================== */

:root {
    --agm-ink: #1b6ff5;
    --agm-ink-soft: #eaf1ff;
    --agm-warn: #9a6700;
    --agm-warn-soft: #fff8e6;
    --agm-good: #0f7b4f;
    --agm-good-soft: #e8f6ef;
    --agm-bad: #c23934;
    --agm-bad-soft: #fdecec;
    --agm-line: #e3e7ee;
    --agm-muted: #5b6474;
    --agm-radius: 12px;
}

/* ---------- Key takeaway (BLUF) -----------------------------------------
   Sits directly under the H1. Doubles as the block most likely to be lifted
   verbatim into an AI answer, so it must state the answer in full sentences
   with no dependence on surrounding context.                              */
.agm-bluf {
    border: 1px solid var(--agm-line);
    border-left: 4px solid var(--agm-ink);
    background: #fff;
    border-radius: var(--agm-radius);
    padding: 1.15rem 1.35rem;
    margin: 1.5rem 0 2rem;
}
.agm-bluf__label {
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--agm-ink);
    margin: 0 0 .45rem;
}
.agm-bluf p { margin: 0 0 .6rem; font-size: 1.05rem; line-height: 1.6; }
.agm-bluf p:last-child { margin-bottom: 0; }

/* ---------- Callouts ---------------------------------------------------- */
.agm-callout {
    border-radius: var(--agm-radius);
    padding: 1rem 1.2rem;
    margin: 1.6rem 0;
    border: 1px solid var(--agm-line);
}
.agm-callout__label {
    display: inline-block;
    font-size: .7rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    font-weight: 700;
    margin: 0 0 .4rem;
}
.agm-callout p:last-child { margin-bottom: 0; }

.agm-tip { background: var(--agm-ink-soft); border-color: #cddffd; }
.agm-tip .agm-callout__label { color: var(--agm-ink); }

/* The myth-buster. This is the house signature: name the common claim, then
   correct it with a source. Used heavily, because most AEO advice in
   circulation is wrong and correcting it is the reason to read us. */
.agm-myth { background: var(--agm-warn-soft); border-color: #f0e0b6; }
.agm-myth .agm-callout__label { color: var(--agm-warn); }
.agm-myth__claim {
    font-weight: 600;
    text-decoration: line-through;
    text-decoration-color: rgba(154, 103, 0, .45);
}

.agm-good { background: var(--agm-good-soft); border-color: #bfe3d2; }
.agm-good .agm-callout__label { color: var(--agm-good); }

.agm-bad { background: var(--agm-bad-soft); border-color: #f5c9c7; }
.agm-bad .agm-callout__label { color: var(--agm-bad); }

/* ---------- Sourced claim ------------------------------------------------
   Inline provenance. If a sentence states a fact about what an engine does,
   it gets one of these. No exceptions.                                    */
.agm-src {
    font-size: .85rem;
    color: var(--agm-muted);
    border-left: 2px solid var(--agm-line);
    padding-left: .7rem;
    margin: .5rem 0 1.2rem;
}
.agm-src a { color: var(--agm-ink); }

/* ---------- Tables ------------------------------------------------------- */
.agm-table-wrap { overflow-x: auto; margin: 1.6rem 0; }
.agm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .95rem;
    min-width: 520px;
}
.agm-table th {
    text-align: left;
    background: #f6f8fb;
    border-bottom: 2px solid var(--agm-line);
    padding: .7rem .85rem;
    font-size: .8rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--agm-muted);
}
.agm-table td { padding: .75rem .85rem; border-bottom: 1px solid var(--agm-line); vertical-align: top; }
.agm-table tr:last-child td { border-bottom: 0; }
.agm-yes { color: var(--agm-good); font-weight: 700; }
.agm-no { color: var(--agm-bad); font-weight: 700; }
.agm-partial { color: var(--agm-warn); font-weight: 700; }

/* ---------- Card grid ---------------------------------------------------- */
.agm-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
    margin: 1.6rem 0;
}
.agm-card {
    border: 1px solid var(--agm-line);
    border-radius: var(--agm-radius);
    padding: 1.1rem;
    background: #fff;
}
.agm-card h4 { margin: 0 0 .45rem; font-size: 1rem; }
.agm-card p { margin: 0; font-size: .92rem; color: var(--agm-muted); line-height: 1.55; }
.agm-card__stat { font-size: 1.9rem; font-weight: 800; line-height: 1; color: var(--agm-ink); }

/* ---------- Steps -------------------------------------------------------- */
.agm-steps { list-style: none; counter-reset: agm; padding: 0; margin: 1.6rem 0; }
.agm-steps > li {
    counter-increment: agm;
    position: relative;
    padding: 0 0 1.15rem 2.8rem;
    border-left: 2px solid var(--agm-line);
    margin-left: .85rem;
}
.agm-steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.agm-steps > li::before {
    content: counter(agm);
    position: absolute;
    left: -.9rem;
    top: -.15rem;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--agm-ink);
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    display: grid;
    place-items: center;
}
.agm-steps h4 { margin: 0 0 .3rem; font-size: 1rem; }

/* ---------- Code --------------------------------------------------------- */
.agm-code {
    background: #0f1626;
    color: #e6edf7;
    border-radius: var(--agm-radius);
    padding: 1rem 1.15rem;
    overflow-x: auto;
    font-size: .86rem;
    line-height: 1.55;
    margin: 1.2rem 0;
}
.agm-code .c { color: #7d8aa3; }  /* comment */
.agm-code .k { color: #7fd1ff; }  /* key */
.agm-code .s { color: #a7e0a0; }  /* string */

/* ---------- Figures and SVG ---------------------------------------------- */
.agm-figure { margin: 2rem 0; }
.agm-figure svg { width: 100%; height: auto; display: block; }
.agm-figure figcaption {
    font-size: .85rem;
    color: var(--agm-muted);
    margin-top: .6rem;
    text-align: center;
}

/* ---------- CTA ----------------------------------------------------------
   One per post. Always the free plugin, never a cold push to a paid tier.  */
.agm-cta {
    border: 1px solid #cddffd;
    background: linear-gradient(180deg, #f7faff 0%, #eef4ff 100%);
    border-radius: 16px;
    padding: 1.6rem;
    margin: 2.4rem 0;
    text-align: center;
}
.agm-cta h3 { margin: 0 0 .5rem; font-size: 1.25rem; }
.agm-cta p { margin: 0 auto 1.1rem; max-width: 46ch; color: var(--agm-muted); }
.agm-cta__btn {
    display: inline-block;
    background: var(--agm-ink);
    color: #fff !important;
    padding: .8rem 1.6rem;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
}
.agm-cta__note { display: block; margin-top: .7rem; font-size: .82rem; color: var(--agm-muted); }

/* ---------- FAQ ----------------------------------------------------------
   Required on every post, and paired with FAQPage JSON-LD. Kept as plain
   details/summary so the answer text is in the DOM for extraction even when
   the item is collapsed.                                                   */
.agm-faq { margin: 2.4rem 0; }
.agm-faq h2 { margin-bottom: .9rem; }
.agm-faq details {
    border: 1px solid var(--agm-line);
    border-radius: var(--agm-radius);
    padding: .9rem 1.1rem;
    margin-bottom: .7rem;
    background: #fff;
}
.agm-faq summary { font-weight: 600; cursor: pointer; }
.agm-faq details p { margin: .7rem 0 0; color: var(--agm-muted); }

@media (max-width: 640px) {
    .agm-steps > li { padding-left: 2.4rem; }
    .agm-cta { padding: 1.2rem; }
}

/* ---------- Screenshot CTA -------------------------------------------------
   The end-of-post CTA, showing the actual screen the reader would land on.
   A real screenshot converts better than a coloured box because it answers
   "what am I actually getting" before the click.

   Multiple CTAs per post are fine and intended, but they must all point at the
   SAME offer (the free plugin). Competing offers on one page is what splits
   intent; repeating one offer does not.                                     */
.agm-shot-cta {
    display: grid;
    /* Text needs the larger share. A 50/50 split left the copy in a narrow
       column that wrapped every few words. */
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 0;
    border: 1px solid #cddffd;
    border-radius: 16px;
    overflow: hidden;
    margin: 2.6rem 0;
    background: linear-gradient(180deg, #f7faff 0%, #eef4ff 100%);
}
.agm-shot-cta__body { padding: 1.9rem; align-self: center; min-width: 0; }
.agm-shot-cta__body h3 { margin: 0 0 .55rem; font-size: 1.2rem; line-height: 1.3; }
.agm-shot-cta__body p { margin: 0 0 1rem; color: var(--agm-muted); font-size: .94rem; }
.agm-shot-cta__list { list-style: none; padding: 0; margin: 0 0 1.1rem; }
.agm-shot-cta__list li {
    font-size: .89rem;
    color: var(--agm-muted);
    padding-left: 1.3rem;
    position: relative;
    margin-bottom: .35rem;
}
.agm-shot-cta__list li::before {
    content: "";
    position: absolute;
    left: 0; top: .42em;
    width: .5rem; height: .5rem;
    border-radius: 50%;
    background: var(--agm-ink);
}
.agm-shot-cta__media {
    background: #dbe6fb;
    padding: 1.4rem 0 0 1.4rem;
    display: flex;
    /* Centred, not bottom-aligned. Bottom alignment left a large dead band of
       flat colour above the screenshot whenever the copy column was taller. */
    align-items: center;
    overflow: hidden;
    min-height: 100%;
}
.agm-shot-cta__media img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px 0 0 0;
    border: 1px solid rgba(27,111,245,.25);
    border-right: 0; border-bottom: 0;
    box-shadow: -6px -6px 22px rgba(20,50,110,.13);
}

/* Inline mid-article CTA. Quieter, single line, same offer. */
.agm-inline-cta {
    border-left: 3px solid var(--agm-ink);
    background: var(--agm-ink-soft);
    border-radius: 0 10px 10px 0;
    padding: .85rem 1.1rem;
    margin: 1.8rem 0;
    font-size: .93rem;
}
.agm-inline-cta a { font-weight: 600; }

@media (max-width: 720px) {
    .agm-shot-cta { grid-template-columns: 1fr; }
    .agm-shot-cta__media { padding: 0 1.1rem 1.1rem; }
    .agm-shot-cta__media img { border-radius: 10px; border-right: 1px solid rgba(27,111,245,.25); border-bottom: 1px solid rgba(27,111,245,.25); }
}

/* ==========================================================================
   NO DARK MODE HERE. DELIBERATE.
   --------------------------------------------------------------------------
   aeogodmode.io's public theme is light only. It contains no
   prefers-color-scheme rules anywhere in style.css.

   A @media (prefers-color-scheme: dark) block in THIS file therefore fires on
   the visitor's operating system preference while the page around it stays
   white, which renders near-black boxes full of unreadable text on a white
   page. That shipped on 28 July 2026 across seven posts before it was caught.

   If the public theme ever gains real dark-mode support, add it there first
   and key these components off the same signal the theme uses. Never off
   prefers-color-scheme alone.
   ========================================================================== */