/*
  atcp-v2-production.css
  SCRATCH CANDIDATE — not yet written to WordPress. Prepared entirely
  outside the ATCP git repository, per the Batch 2A read-only preparation
  authorization.

  Purpose: bring the four WordPress drafts (Residential Services #1638,
  FAQ #1639, Commercial Services #1640, Property Managers #659) visually
  in line with the approved static prototype
  (prototypes/homepage-v1/styles/{tokens,base,layout,hero,components}.css)
  WITHOUT touching any existing published/private legacy page.

  Every rule that can affect ordinary content is scoped beneath the single
  outer wrapper class `.atcp-v2`, which is confirmed (read-only REST check,
  Batch 2A) to exist on zero published/private pages on the live site.

  Colors, spacing, and type-scale values are carried over unchanged from
  the approved prototype tokens. Nothing here redesigns anything — see the
  "Translation decisions" block near the end for the handful of places
  where the WordPress block markup doesn't have a 1:1 static-HTML
  equivalent and a deliberate, disclosed choice was made instead.
*/

/* ---------- Tokens, scoped to .atcp-v2 only (not :root) ---------- */
.atcp-v2 {
  --atcp-bay-950: #060b10;
  --atcp-bay-900: #0b1b26;
  --atcp-bay-800: #143244;
  --atcp-bay-700: #1f4b5f;
  --atcp-bay-glow: #e3a75c;
  --atcp-bay-glow-soft: #f3d9ae;
  --atcp-bay-mist: #c9d8dc;

  --atcp-ink-900: #10151a;
  --atcp-ink-700: #3a4650;
  --atcp-paper-50: #f6f9fc;
  --atcp-paper-100: #e6ecf2;
  --atcp-line: rgba(16, 21, 26, 0.1);

  --atcp-accent: #1e6fa8;
  --atcp-accent-ink: #ffffff;

  /* Structural accessibility colors — same values as the approved
     prototype's dual-layer focus ring. Not brand colors. */
  --atcp-focus-ring-dark: #0b3556;
  --atcp-focus-ring-light: #f6f9fc;

  --atcp-font-display: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino,
    "URW Palladio L", serif;
  --atcp-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --atcp-space-2: 8px;
  --atcp-space-3: 12px;
  --atcp-space-4: 16px;
  --atcp-space-5: 24px;
  --atcp-space-6: 32px;
  --atcp-space-7: 48px;
  --atcp-space-9: 96px;

  --atcp-radius-sm: 6px;
  --atcp-radius-md: 12px;
  --atcp-radius-lg: 20px;
  --atcp-radius-pill: 999px;

  --atcp-shadow-soft: 0 1px 2px rgba(16, 21, 26, 0.06), 0 8px 24px rgba(16, 21, 26, 0.08);
  --atcp-ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --atcp-duration-fast: 180ms;

  /* Base type/section rhythm for the whole namespaced area */
  font-family: var(--atcp-font-body);
  color: var(--atcp-ink-900);
  line-height: 1.5;
}

/* ---------- Section rhythm ---------- */
/* Every direct top-level block inside .atcp-v2 (headings, paragraphs,
   columns, details, and the two named sub-groups) gets the same vertical
   rhythm the prototype's `.section { padding-block: var(--space-9) }`
   established, applied as top margin instead of section padding since
   Gutenberg blocks are siblings, not separate <section> wrappers here. */
.atcp-v2 > * + * {
  margin-top: var(--atcp-space-7);
}

.atcp-v2 > h2:not(:first-child) {
  margin-top: var(--atcp-space-9);
}

/* ---------- Typography hierarchy ---------- */
.atcp-v2 h1.wp-block-heading {
  font-family: var(--atcp-font-display);
  font-size: clamp(1.9rem, 2.6vw + 1.1rem, 2.75rem);
  line-height: 1.15;
  color: var(--atcp-paper-50);
  text-wrap: balance;
  margin-bottom: var(--atcp-space-4);
}

.atcp-v2 h2.wp-block-heading {
  font-family: var(--atcp-font-display);
  font-size: clamp(1.6rem, 2.4vw + 1rem, 2.4rem);
  color: var(--atcp-ink-900);
  margin-bottom: var(--atcp-space-3);
}

.atcp-v2 h3.wp-block-heading {
  font-family: var(--atcp-font-display);
  color: var(--atcp-ink-900);
  margin-bottom: var(--atcp-space-2);
}

.atcp-v2 p {
  color: var(--atcp-ink-700);
  max-width: 60ch;
}

.atcp-v2 .atcp-hero p,
.atcp-v2 .atcp-final-cta p {
  color: inherit;
  max-width: 48ch;
}

/* Eyebrow label — the hero's first paragraph, its text wrapped in <em> in
   the draft content (see "Translation decisions" — no dedicated eyebrow
   block/class exists in the current markup). */
.atcp-v2 .atcp-hero > p:first-child {
  margin-bottom: var(--atcp-space-3);
  max-width: none;
}
.atcp-v2 .atcp-hero > p:first-child em {
  font-style: normal;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--atcp-bay-mist);
}

/* ---------- Hero / Final-CTA groups ---------- */
.atcp-v2 .atcp-hero {
  background: linear-gradient(160deg, var(--atcp-bay-900), var(--atcp-bay-950));
  color: var(--atcp-paper-50);
  padding: var(--atcp-space-7);
  border-radius: var(--atcp-radius-lg);
}

.atcp-v2 .atcp-final-cta {
  background: linear-gradient(160deg, var(--atcp-bay-900), var(--atcp-bay-950));
  color: var(--atcp-paper-50);
  text-align: center;
  padding: var(--atcp-space-7);
  border-radius: var(--atcp-radius-lg);
}

.atcp-v2 .atcp-final-cta h2.wp-block-heading {
  color: var(--atcp-paper-50);
}

.atcp-v2 .atcp-final-cta .wp-block-buttons {
  justify-content: center;
}

/* ---------- Buttons ---------- */
.atcp-v2 .wp-block-buttons {
  gap: var(--atcp-space-3);
}

.atcp-v2 .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.85em 1.4em;
  border-radius: var(--atcp-radius-pill);
  font-family: var(--atcp-font-body);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform var(--atcp-duration-fast) var(--atcp-ease-standard),
    box-shadow var(--atcp-duration-fast) var(--atcp-ease-standard);
}

/* Primary (first button, no is-style-outline) */
.atcp-v2 .wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background: var(--atcp-accent);
  color: var(--atcp-accent-ink);
  box-shadow: var(--atcp-shadow-soft);
}
.atcp-v2 .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(30, 111, 168, 0.35);
}

/* Secondary (Call ATCP — 2nd button, is-style-outline) */
.atcp-v2 .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}

/* Ghost (Contact ATCP — 3rd button). No dedicated class exists on this
   button in the current draft markup (both buttons 2 and 3 were built
   with the same is-style-outline variant — see "Translation decisions").
   Targeted structurally as the 3rd button in the group, scoped to .atcp-v2
   only, so it cannot affect any other button anywhere on the site. */
.atcp-v2 .wp-block-buttons > .wp-block-button:nth-child(3) .wp-block-button__link {
  background: transparent;
  border-color: transparent;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  padding-inline: 0.6em;
  box-shadow: none;
}
.atcp-v2 .atcp-hero .wp-block-buttons > .wp-block-button:nth-child(3) .wp-block-button__link,
.atcp-v2 .atcp-final-cta .wp-block-buttons > .wp-block-button:nth-child(3) .wp-block-button__link {
  color: var(--atcp-paper-50);
}

/* ---------- Cards (Columns used for service/step pairs) ---------- */
.atcp-v2 .wp-block-column {
  background: var(--atcp-paper-50);
  border: 1px solid var(--atcp-line);
  border-radius: var(--atcp-radius-lg);
  padding: var(--atcp-space-6);
}

.atcp-v2 .wp-block-column .wp-block-button__link {
  min-height: auto;
}

/* Link-arrow style for the "More about ___" in-card links */
.atcp-v2 .wp-block-column p a {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--atcp-bay-800);
  text-decoration: none;
  font-weight: 600;
}

/* ---------- FAQ / Services dropdown — native core/details, CSS only ---------- */
.atcp-v2 details.wp-block-details {
  border: 1px solid var(--atcp-line);
  border-radius: var(--atcp-radius-md);
  padding: var(--atcp-space-4) var(--atcp-space-5);
  background: var(--atcp-paper-50);
}

.atcp-v2 details.wp-block-details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--atcp-ink-900);
  min-height: 44px;
  display: flex;
  align-items: center;
}

.atcp-v2 details.wp-block-details > p {
  margin-top: var(--atcp-space-3);
  color: var(--atcp-ink-700);
  max-width: none;
}

/* ---------- Dual-layer focus-visible — ported unchanged, scoped ---------- */
.atcp-v2 :is(
  a,
  button,
  summary,
  input,
  select,
  textarea,
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow:
    0 0 0 2px var(--atcp-focus-ring-dark),
    0 0 0 5px var(--atcp-focus-ring-light);
}

@media (forced-colors: active) {
  .atcp-v2 :is(
    a,
    button,
    summary,
    input,
    select,
    textarea,
    [tabindex]:not([tabindex="-1"])
  ):focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
    box-shadow: none;
  }
}

/* ---------- Reduced motion ---------- */
/* No new animation is introduced by this stylesheet (no @keyframes, no
   `animation` or non-essential `transition` beyond the existing button
   hover/focus micro-transitions already present sitewide), so no
   additional reduced-motion override is required here. The site's global
   `prefers-reduced-motion` handling is untouched and still applies. */

/* ---------- Small-viewport adjustments ---------- */
/* Gutenberg core already stacks .wp-block-columns to one column below
   ~782px on its own (core block-library CSS, not duplicated here — see
   "Responsive translation notes"). Only genuinely new adjustments: */
@media (max-width: 480px) {
  .atcp-v2 .atcp-hero,
  .atcp-v2 .atcp-final-cta {
    padding: var(--atcp-space-5);
  }
}

/*
  ---------- Translation decisions (disclosed, not silent) ----------

  1. Eyebrow label: the prototype's `.hero__eyebrow` is a distinct element;
     the draft content instead wraps the eyebrow text in <em> as the
     hero's first paragraph. Styled via `.atcp-hero > p:first-child em`
     rather than a dedicated class, since adding a class would require
     editing the already-approved draft content (out of scope this batch).

  2. Third button (ghost/"Contact ATCP"): the draft markup gave buttons 2
     and 3 the same `is-style-outline` block style (no distinct 3rd
     variant was registered). Styled via `:nth-child(3)` instead, scoped
     under `.atcp-v2` only. A future content batch could add a proper
     custom block style variation to remove this structural dependency.

  3. Cards vs. "How It Works" steps: both use plain `wp:columns` in the
     current draft markup with no distinguishing class, so both receive
     the same card-panel treatment here. The prototype's circular
     numbered-badge treatment for steps is not reproduced — the step
     number remains as plain leading text ("1. Request Your Estimate")
     inside the heading, which is legible and correctly ordered but not
     visually identical to the original badge. Flagged, not silently
     dropped.

  4. Column/card responsive breakpoints: the prototype uses a custom
     CSS Grid with breakpoints at 720px/1024px. Gutenberg's `wp:columns`
     uses Flexbox with its own core stacking behavior (~782px), which is
     not overridden here — translating the *behavior* (comfortable
     multi-column on desktop, stacked on mobile) rather than porting the
     exact breakpoint values, since the underlying layout mechanism
     differs.

  5. Page-hero uses a `border-radius` on `.atcp-hero`/`.atcp-final-cta`
     since these are inline content groups, not full-bleed sections like
     the prototype's `<section class="page-hero">` — a full-bleed edge to
     edge treatment is a template-level (Site Editor) concern, not
     achievable from page-content CSS alone without a wider layout change,
     which is explicitly out of scope for this CSS-only batch.

  No street address, no future-service language, no AI/Claude/Anthropic/
  generated-by/watermark text appears anywhere in this file — verified
  by direct read-through, not assumed.
*/