/*
 * Alternative Prosperity block styles
 * ---------------------------------------------------------------------------
 * The Mandated Investments page's design vocabulary, turned into things you can
 * PICK in the block editor rather than code you have to paste. Every rule here
 * hangs off an `is-style-ap-*` class that WordPress only adds when you choose
 * that style from the Styles panel, so **nothing on this site changes until you
 * choose it**. There is no site-wide effect and no page can be altered by
 * installing this.
 *
 * Colours and fonts are read from the theme's own presets — `--wp--preset--…` —
 * not hard-coded. So if you change "AP Gold" in Appearance > Editor > Styles,
 * every button, rule and figure that uses it follows. That is the whole point of
 * putting the palette in theme.json rather than in this file.
 *
 * Two things carry over from the page build and are deliberate:
 *
 *  - Shadows are stated here rather than taken from the theme's shadow presets,
 *    because the AP page uses three specific navy-tinted shadows and the
 *    existing presets are tuned for the teal SolveSA palette.
 *  - `:where()` is used for descendant rules so they stay at the specificity of
 *    a single class. That keeps anything you set in the block's own sidebar —
 *    a colour, a size, a padding — winning over this file, which is the
 *    behaviour you want from a style variation.
 */

:root {
  --ap-shadow-sm: 0 4px 16px rgba(20, 44, 60, 0.08);
  --ap-shadow-md: 0 12px 32px rgba(20, 44, 60, 0.12);
  --ap-shadow-lg: 0 24px 60px rgba(20, 44, 60, 0.18);
  --ap-hairline: rgba(20, 44, 60, 0.08);
  --ap-muted: #5b6570;
}

/* ===========================================================================
   BUTTONS
   The AP page's buttons are square-ish (6px), Sansation, and come in three
   flavours. Note the `!important` on the radius: `globalnav.css` sets a
   site-wide `border-radius:100px !important` so one button shape reads across
   all 38 pages, and without matching it these would come out as pills.
   =========================================================================== */

.wp-block-button.is-style-ap-gold > .wp-block-button__link,
.wp-block-button.is-style-ap-outline-light > .wp-block-button__link,
.wp-block-button.is-style-ap-outline-navy > .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--wp--preset--font-family--sansation);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  padding: 15px 30px;
  border-radius: 6px !important;
  border: 2px solid transparent;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}

.wp-block-button.is-style-ap-gold > .wp-block-button__link {
  background: var(--wp--preset--color--ap-gold);
  color: var(--wp--preset--color--ap-navy);
}
.wp-block-button.is-style-ap-gold > .wp-block-button__link:hover,
.wp-block-button.is-style-ap-gold > .wp-block-button__link:focus {
  background: var(--wp--preset--color--ap-gold-deep);
  color: var(--wp--preset--color--ap-navy);
  transform: translateY(-2px);
  box-shadow: var(--ap-shadow-md);
}

/* For use on a navy panel — the border and text are white, so it disappears on
   a white background. That is the same limitation the prototype has. */
.wp-block-button.is-style-ap-outline-light > .wp-block-button__link {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}
.wp-block-button.is-style-ap-outline-light > .wp-block-button__link:hover,
.wp-block-button.is-style-ap-outline-light > .wp-block-button__link:focus {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.wp-block-button.is-style-ap-outline-navy > .wp-block-button__link {
  background: transparent;
  border-color: var(--wp--preset--color--ap-navy);
  color: var(--wp--preset--color--ap-navy);
}
.wp-block-button.is-style-ap-outline-navy > .wp-block-button__link:hover,
.wp-block-button.is-style-ap-outline-navy > .wp-block-button__link:focus {
  background: var(--wp--preset--color--ap-navy);
  color: #fff;
}

/* ===========================================================================
   SECTIONS
   =========================================================================== */

.wp-block-group.is-style-ap-section {
  padding-top: 100px;
  padding-bottom: 100px;
}

.wp-block-group.is-style-ap-section-cream {
  padding-top: 100px;
  padding-bottom: 100px;
  background: var(--wp--preset--color--ap-cream);
}

/* The navy panel: the page's hero, CTA and big-stat backgrounds are all this
   gradient plus one soft gold radial. The radial is a pseudo-element so it
   cannot interfere with a background image you set on the block yourself. */
.wp-block-group.is-style-ap-panel-navy {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg,
    var(--wp--preset--color--ap-navy) 0%,
    var(--wp--preset--color--ap-navy-deep) 100%);
  color: #fff;
  padding: 100px 0;
}
.wp-block-group.is-style-ap-panel-navy::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 0%, rgba(209, 191, 141, 0.16), transparent 55%);
}
.wp-block-group.is-style-ap-panel-navy > * {
  position: relative;
  z-index: 2;
}
.wp-block-group.is-style-ap-panel-navy :where(h1, h2, h3, h4, h5) { color: #fff; }
.wp-block-group.is-style-ap-panel-navy :where(p) { color: rgba(255, 255, 255, 0.75); }

/* The journey rail — the thin navy strip of step labels under the hero. */
.wp-block-group.is-style-ap-rail {
  background: var(--wp--preset--color--ap-navy-deep);
  padding: 18px 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.wp-block-group.is-style-ap-rail :where(p) {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.78rem;
  margin: 0;
}

/* ===========================================================================
   CARDS
   Five card treatments, which between them cover every card on the page.
   =========================================================================== */

.wp-block-group.is-style-ap-card,
.wp-block-group.is-style-ap-card-gold-top,
.wp-block-group.is-style-ap-stat-cell {
  background: #fff;
  border: 1px solid var(--ap-hairline);
  border-radius: 12px;
  padding: 34px 28px;
  box-shadow: var(--ap-shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.wp-block-group.is-style-ap-card:hover,
.wp-block-group.is-style-ap-card-gold-top:hover {
  transform: translateY(-6px);
  box-shadow: var(--ap-shadow-md);
}

/* The gold top rule is what marks the "who invests" cards. */
.wp-block-group.is-style-ap-card-gold-top {
  border-top: 4px solid var(--wp--preset--color--ap-gold);
}

/* The gold LEFT rule, square on that side — the principles and the pull quote. */
.wp-block-group.is-style-ap-card-gold-left,
.wp-block-group.is-style-ap-quote {
  background: #fff;
  border-left: 4px solid var(--wp--preset--color--ap-gold);
  border-radius: 0 10px 10px 0;
  padding: 22px 24px;
  box-shadow: var(--ap-shadow-sm);
}
.wp-block-group.is-style-ap-quote {
  border-radius: 0 12px 12px 0;
  padding: 38px 42px;
}
.wp-block-group.is-style-ap-quote :where(p) {
  font-size: 1.16rem;
  color: var(--wp--preset--color--ap-navy);
  line-height: 1.6;
}

.wp-block-group.is-style-ap-card-navy {
  position: relative;
  background: var(--wp--preset--color--ap-navy);
  border-radius: 12px;
  padding: 32px 24px;
  color: #fff;
}
.wp-block-group.is-style-ap-card-navy :where(h1, h2, h3, h4, h5) { color: #fff; }
.wp-block-group.is-style-ap-card-navy :where(p) { color: rgba(255, 255, 255, 0.75); }

.wp-block-group.is-style-ap-card-cream {
  text-align: center;
  background: var(--wp--preset--color--ap-cream);
  border: 1px solid var(--ap-hairline);
  border-radius: 12px;
  padding: 38px 26px;
}

/* Glass — the hero's flow cards. Only legible on a dark background. */
.wp-block-group.is-style-ap-glass {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(209, 191, 141, 0.35);
  border-radius: 14px;
  padding: 22px;
  backdrop-filter: blur(4px);
  box-shadow: var(--ap-shadow-lg);
  color: #fff;
}
.wp-block-group.is-style-ap-glass :where(h1, h2, h3, h4, h5) { color: #fff; }
.wp-block-group.is-style-ap-glass :where(p) { color: rgba(255, 255, 255, 0.7); }

/* The scope panel: a navy header bar over a list of rows. Put an "AP Panel
   head bar" heading first, then the rows. */
.wp-block-group.is-style-ap-scope {
  background: #fff;
  border: 1px solid rgba(20, 44, 60, 0.06);
  border-radius: 14px;
  box-shadow: var(--ap-shadow-md);
  overflow: hidden;
  padding: 0;
}
.wp-block-group.is-style-ap-scope > :where(p, div, ul) {
  padding: 22px 26px;
  border-bottom: 1px solid #eceeef;
  margin: 0;
}
.wp-block-group.is-style-ap-scope > :where(p, div, ul):last-child { border-bottom: none; }

/* The timeline: a gold spine with a dot per child block. */
.wp-block-group.is-style-ap-timeline {
  position: relative;
  padding-left: 34px;
  border-left: 3px solid var(--wp--preset--color--ap-gold);
}
.wp-block-group.is-style-ap-timeline > * {
  position: relative;
  padding-bottom: 38px;
}
.wp-block-group.is-style-ap-timeline > *:last-child { padding-bottom: 0; }
.wp-block-group.is-style-ap-timeline > *::before {
  content: '';
  position: absolute;
  left: -42px;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--wp--preset--color--ap-navy);
  border: 3px solid var(--wp--preset--color--ap-gold);
}

/* ===========================================================================
   TEXT TREATMENTS
   These are the ones that make a page look designed rather than typed: the
   small gold label above a heading, the grey intro line, the big figure.
   =========================================================================== */

.is-style-ap-eyebrow {
  font-family: var(--wp--preset--font-family--sansation);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ap-gold-deep);
  line-height: 1.65;
}

.is-style-ap-lead {
  font-size: 1.15rem;
  color: var(--ap-muted);
  max-width: 680px;
}

.is-style-ap-stat-figure {
  font-family: var(--wp--preset--font-family--sansation);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.1;
  color: var(--wp--preset--color--ap-navy);
}

.is-style-ap-big-figure {
  font-family: var(--wp--preset--font-family--sansation);
  font-weight: 700;
  font-size: 3.4rem;
  line-height: 1.05;
  color: var(--wp--preset--color--ap-gold);
}

.is-style-ap-step-number {
  font-family: var(--wp--preset--font-family--sansation);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1;
  color: rgba(209, 191, 141, 0.35);
}

.is-style-ap-year {
  font-family: var(--wp--preset--font-family--sansation);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--ap-gold-deep);
}

.is-style-ap-note {
  font-size: 0.72rem;
  font-style: italic;
  color: #8a939c;
}

/* The navy bar that heads the scope panel. */
.is-style-ap-panel-head {
  background: var(--wp--preset--color--ap-navy);
  color: #fff;
  font-family: var(--wp--preset--font-family--sansation);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 16px 26px;
  margin: 0;
}

/* ===========================================================================
   LISTS AND TABLES
   =========================================================================== */

.wp-block-list.is-style-ap-ticks {
  list-style: none;
  padding-left: 0;
}
.wp-block-list.is-style-ap-ticks > li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
}
.wp-block-list.is-style-ap-ticks > li::before {
  content: '✓';
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--wp--preset--color--ap-gold);
}

.wp-block-table.is-style-ap-def-table table {
  border-collapse: collapse;
  box-shadow: var(--ap-shadow-sm);
  border-radius: 10px;
  overflow: hidden;
}
.wp-block-table.is-style-ap-def-table th {
  background: var(--wp--preset--color--ap-navy);
  color: #fff;
  font-family: var(--wp--preset--font-family--sansation);
  text-align: left;
  padding: 16px 20px;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  border: none;
}
.wp-block-table.is-style-ap-def-table td {
  padding: 15px 20px;
  font-size: 0.9rem;
  border: none;
  border-bottom: 1px solid #eceeef;
  background: #fff;
}
.wp-block-table.is-style-ap-def-table tr:nth-child(even) td { background: #f7f7f8; }
.wp-block-table.is-style-ap-def-table tr:last-child td { border-bottom: none; }

/* ===========================================================================
   SECTION TYPOGRAPHY
   The AP page is Sansation headings on NeoSansIntel body copy. Setting that as
   the site default would restyle all 38 SolveSA pages, which are Montserrat, so
   instead the three section styles carry it: wrap a section in "AP Section" and
   everything inside it is in the AP fonts without picking a font per block.

   Colour is deliberately NOT set here. The navy panel's white headings are
   declared above, and adding a navy heading colour to a shared rule would
   override them — the same "check what already wins" mistake that cost a day on
   the page build.
   =========================================================================== */

.wp-block-group.is-style-ap-section,
.wp-block-group.is-style-ap-section-cream,
.wp-block-group.is-style-ap-panel-navy {
  font-family: var(--wp--preset--font-family--neo-sans-intel);
  line-height: 1.65;
}
.wp-block-group.is-style-ap-section :where(h1, h2, h3, h4, h5),
.wp-block-group.is-style-ap-section-cream :where(h1, h2, h3, h4, h5),
.wp-block-group.is-style-ap-panel-navy :where(h1, h2, h3, h4, h5) {
  font-family: var(--wp--preset--font-family--sansation);
  font-weight: 700;
  line-height: 1.15;
}
/* Headings go navy on the two light sections only. */
.wp-block-group.is-style-ap-section :where(h1, h2, h3, h4, h5),
.wp-block-group.is-style-ap-section-cream :where(h1, h2, h3, h4, h5) {
  color: var(--wp--preset--color--ap-navy);
}

/* ===========================================================================
   NARROW SCREENS
   The page's own breakpoint is 980px. Only the two heaviest paddings need to
   come down; everything else is already fluid.
   =========================================================================== */

@media (max-width: 980px) {
  .wp-block-group.is-style-ap-section,
  .wp-block-group.is-style-ap-section-cream,
  .wp-block-group.is-style-ap-panel-navy { padding-top: 68px; padding-bottom: 68px; }
  .is-style-ap-big-figure { font-size: 2.6rem; }
  .wp-block-group.is-style-ap-quote { padding: 28px 26px; }
}