/* Zenith Global Fusion — block editor markup
   The Home page is built from core blocks. These rules map block markup
   (paragraphs, figures, button wrappers) onto the styles in main.css.
   Loaded on the front end and inside the editor.
*/

/* ---------- Anchor links land below the sticky header ---------- */
html {
  scroll-padding-top: calc(var(--header-h) + 8px);
}
html:has(body.admin-bar) {
  scroll-padding-top: calc(var(--header-h) + 40px);
}

/* ---------- Buttons (Button block styles) ---------- */
.wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}
.wp-block-button[class*="is-style-zgf-"] {
  margin: 0;
}
/* :where() keeps this base rule weaker than the colour variants below. */
:where(.wp-block-button[class*="is-style-zgf-"]) > .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  border-radius: var(--radius);
  padding: 13px 29px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: 0.25s ease;
  white-space: nowrap;
}
.is-style-zgf-primary > .wp-block-button__link {
  background: var(--primary);
  color: var(--white);
}
.is-style-zgf-primary > .wp-block-button__link:hover {
  background: var(--secondary);
  color: var(--primary);
}
.is-style-zgf-secondary > .wp-block-button__link {
  background: var(--secondary);
  color: var(--primary);
}
.is-style-zgf-secondary > .wp-block-button__link:hover {
  background: var(--white);
  color: var(--primary);
}
.is-style-zgf-outline > .wp-block-button__link {
  background: transparent;
  color: var(--primary);
  border: 1.5px solid var(--primary);
}
.is-style-zgf-outline > .wp-block-button__link:hover {
  background: var(--primary);
  color: var(--white);
}
.price-card .wp-block-buttons,
.price-card .wp-block-button,
.price-card .wp-block-button__link {
  width: 100%;
}

/* ---------- Images (figure.wp-block-image) ---------- */
.wp-block-image.hero-card,
.wp-block-image.focus-image,
.wp-block-image.founder-frame {
  margin: 0;
}
.wp-block-image.hero-card-main {
  margin: 0 0 0 auto;
}
.wp-block-image.hero-card img,
.wp-block-image.focus-image img,
.wp-block-image.founder-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wp-block-image.hero-card-main img {
  object-position: 32% 40%;
}
.wp-block-image.focus-image img {
  min-height: 420px;
}
.wp-block-image.founder-frame img {
  object-position: center 18%;
}

/* ---------- Icon block ---------- */
.wp-block-zgf-icon i {
  line-height: 1;
}
.contact-card > .wp-block-zgf-icon {
  flex-shrink: 0;
}

/* ---------- Text that used <span> in the hand-coded version ---------- */
.badge,
.eyebrow,
.partner-label,
.price-badge {
  margin-top: 0;
}
.hero-partners .partner-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 0.65rem;
}
.partner-pills p {
  margin: 0;
  background: var(--soft);
  border: 1px solid rgba(9, 40, 76, 0.08);
  color: var(--primary);
  font-size: 12px;
  font-weight: 500;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
}
.hero-stat-float p {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
}
.stat p {
  margin: 0;
}
.stat .stat-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}
.founder-label p {
  margin: 0;
}
.founder-label p + p {
  font-size: 13px;
  opacity: 0.85;
}

/* Price: <p class="price"><strong>$200</strong> / year</p> */
.price {
  color: var(--muted);
  font-size: 13px;
}
.price strong {
  font-family: var(--font-head);
  font-size: 2.4rem;
  font-weight: 400;
  color: var(--primary);
  line-height: 1;
}
.price-card.featured .price {
  color: var(--primary);
}

/* Contact cards */
.contact-card p {
  margin: 0;
}
.contact-card .contact-label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 0.15rem;
}
.contact-card strong a {
  color: inherit;
}
.contact-card:has(a):hover {
  background: var(--secondary);
}

/* Collaborator cards: the "Visit website" link covers the whole card */
.collab-card .collab-site {
  position: static;
  display: flex;
  justify-content: center;
  margin-top: 0.75rem;
}
.collab-card .collab-site a {
  color: inherit;
}
.collab-card .collab-site a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}
.collab-card .collab-site:not(.collab-site-soon)::after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f35d";
  font-size: 10px;
  color: var(--secondary);
  transition: transform 0.25s ease;
}
.collab-card:hover .collab-site:not(.collab-site-soon)::after {
  transform: translate(2px, -2px);
}
.collab-card .collab-site + .collab-site {
  margin-top: 0.15rem;
}
.collab-card:has(a:focus-visible) {
  outline: 2px solid var(--secondary);
  outline-offset: 3px;
}

/* Founder link */
.founder-bio-link::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f0c1";
  color: var(--secondary);
  font-size: 13px;
}
.founder-bio-link a {
  color: inherit;
}

/* Quote and FAQ */
.wom .wp-block-quote p {
  margin: 0;
}
.faq-item > p {
  margin: 0 0 1.15rem;
}

/* Section/intro groups keep the original spacing */
.section-head > p:last-child,
.community-inner p:last-child {
  margin-bottom: 0;
}
.feature-card p:last-child,
.focus-item p:last-child,
.collab-card p,
.wom-panel p:last-child {
  margin-bottom: 0;
}

/* ---------- Editor only ---------- */
/* The editor puts an inline height:auto on images: let them fill the frame. */
.editor-styles-wrapper .wp-block-image.hero-card img,
.editor-styles-wrapper .wp-block-image.focus-image img,
.editor-styles-wrapper .wp-block-image.founder-frame img {
  height: 100% !important;
}
.editor-styles-wrapper .is-root-container > .wp-block-group {
  margin-block: 0;
}
.editor-styles-wrapper .hero-card-float,
.editor-styles-wrapper .hero-stat-float {
  /* keep floating pieces clickable while editing */
  z-index: 5;
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  .wp-block-image.hero-card-main {
    margin: 0;
  }
}
@media (max-width: 480px) {
  .partner-pills p {
    width: 100%;
    text-align: center;
  }
}