/* ============================================================
   SOLARVOLT — Block editor support
   Loaded after css/style.css.

   The landing sections now exist as blocks (see patterns.php and blocks.php).
   They carry the theme's own class names — hero, service-card, why-item,
   cta-inner — so css/style.css styles them unchanged. What is left over is the
   core block scaffolding: .wp-block-group, .wp-block-columns and the
   .wp-block-button__link that core insists on. This file reconciles the two,
   so a block section looks the same as the template it replaced.

   Nothing here changes the template path. A site whose Home page is still the
   original template never renders a .wp-block-* wrapper and never reads this.
   ============================================================ */

/* ─────────────────────────────────────────────
   Core resets that fight the design
   ───────────────────────────────────────────── */
/*
 * Core sets a 650px content width and adds its own spacing to blocks. The
 * design's .container is 1200px with the page's own rhythm, so the block
 * alignment widths are turned off in theme.json and these neutralise the rest.
 */
.wp-block-group.alignfull {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.entry-content > .wp-block-group:first-child,
.entry-content > *:first-child {
  margin-top: 0;
}

.entry-content p {
  margin-bottom: 1rem;
}

/* Core buttons are pill-shaped with a heavy background. The design's .btn is a
   sharp-cornered rectangle, so the button link is reset to inherit .btn. */
.wp-block-button__link {
  border-radius: var(--radius);
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.9rem 1.8rem;
}
.wp-block-buttons {
  gap: 1rem;
  flex-wrap: wrap;
}

/* ─────────────────────────────────────────────
   Hero
   ───────────────────────────────────────────── */
/*
 * .hero is a flex container centring its single child. That still works when the
 * hero is a block group, but core's flow layout would add a gap between the
 * wrapper and its child, so it is removed.
 */
.wp-block-group.hero > .container {
  flex: 1 1 auto;
}

.wp-block-group.hero-stats {
  gap: 0;
}
.wp-block-group.hero-stats > .hero-stat {
  min-width: 0;
}

/* The heading is one h1 with the highlighted half in <em>, exactly as the
   template renders it. Core adds its own heading colour, so the design's
   white-on-navy is restored here. */
.wp-block-group.hero .hero-heading {
  color: var(--white);
  margin-bottom: 1.5rem;
}
.wp-block-group.hero .hero-heading em {
  color: var(--gold);
  font-style: normal;
  display: block;
}

.wp-block-group.hero .hero-desc {
  color: rgba(255, 255, 255, 0.75);
  max-width: 55ch;
}

/* The hero image is a core image block now, so the wrapper is a <figure>. */
.wp-block-image.hero-img-wrap {
  margin: 0;
  position: relative;
}
.wp-block-image.hero-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ─────────────────────────────────────────────
   Services
   ───────────────────────────────────────────── */
/*
 * Core's columns are flex with an equal-width basis per column, which does not
 * give the design's fixed three-up grid. Restating it as a grid keeps the
 * layout identical to the template at every breakpoint.
 */
.wp-block-columns.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.wp-block-columns.services-grid > .wp-block-column {
  width: auto;
  flex: none;
}

.wp-block-group.service-card .service-title {
  color: var(--navy);
  margin-bottom: 0.75rem;
}
.wp-block-group.service-card .service-desc {
  font-size: 0.95rem;
}
/*
 * The template's "Learn more" is a bare <a>, but a bare link inside a block is
 * unclickable in the editor unless it is inside a real block, so the pattern
 * wraps it in a paragraph and the anchor is styled to match.
 */
.wp-block-group.service-card .learn-more {
  margin: 0;
}
.wp-block-group.service-card .learn-more a,
.learn-more {
  color: var(--gold-dark);
  font-weight: 600;
  font-size: 0.9rem;
}
.wp-block-group.service-card .learn-more a:hover {
  color: var(--gold);
}

/* ─────────────────────────────────────────────
   Why choose us
   ───────────────────────────────────────────── */
.wp-block-columns.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.wp-block-columns.why-grid > .wp-block-column {
  width: auto;
  flex: none;
}

/* The image column is a core column, so the accent badge needs to position
   against the column rather than against the old .why-img div. */
.wp-block-column.why-img {
  position: relative;
  min-width: 0;
}
.wp-block-column.why-img .wp-block-image {
  margin: 0;
}
.wp-block-group.why-img-accent {
  position: absolute;
  background: var(--gold);
  padding: 1.25rem 1.75rem;
  border-radius: var(--radius-lg);
}
.wp-block-group.why-img-accent p {
  margin: 0;
}

/* ─────────────────────────────────────────────
   Call to action
   ───────────────────────────────────────────── */
.wp-block-group.cta-banner .wp-block-group.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  position: relative;
}
.wp-block-group.cta-banner .cta-copy {
  flex: 1 1 320px;
}
.wp-block-group.cta-banner .cta-actions {
  flex: 0 0 auto;
}

/*
 * A second button on the gold banner. .btn-outline is drawn for a dark
 * background (white text, translucent border) and would be invisible here, so
 * the outline variant gets navy ink to sit on the gold.
 */
.wp-block-group.cta-banner .btn-outline-dark,
.btn-outline-dark {
  background: transparent;
  color: var(--navy);
  border-color: rgba(10, 22, 40, 0.4);
}
.btn-outline-dark:hover {
  background: var(--navy);
  color: var(--gold);
  border-color: var(--navy);
}

/* ─────────────────────────────────────────────
   Responsive — mirrors the breakpoints the template already uses
   ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .wp-block-columns.services-grid,
  .wp-block-columns.why-grid {
    grid-template-columns: 1fr;
  }
}