/* ==========================================================================
   ALKEBULAN — WordPress bridge
   Load AFTER alkebulan.css. This maps Gutenberg's own block wrappers onto the
   design system so core blocks render like the static build. Nothing here
   changes the design; it only reconciles WordPress markup with it.
   ========================================================================== */

/* --- Full-bleed bands ---------------------------------------------------- */
/* Most themes handle .alignfull. This is a fallback for themes that do not.
   Delete it if the theme already supports wide and full alignment. */
.wp-block-group.alignfull.band {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.wp-block-cover.alignfull.hero {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* --- Hero (core/cover) --------------------------------------------------- */
.wp-block-cover.hero {
  padding: 0;
  align-items: flex-end;
  justify-content: flex-start;
  min-height: 80vh;
}
.wp-block-cover.hero .wp-block-cover__inner-container {
  width: 100%;
  padding-block: 190px 78px;
  color: var(--text-light);
}
.wp-block-cover.hero .t-hero { color: var(--text-light); }
@media (max-width: 900px) {
  .wp-block-cover.hero .wp-block-cover__inner-container { padding-block: 150px 56px; }
}

/* --- Columns used as the design system's grids --------------------------- */
.wp-block-columns { margin-bottom: 0; }

.wp-block-columns.split,
.wp-block-columns.hero__grid,
.wp-block-columns.lines {
  display: grid;
  gap: 72px;
  align-items: start;
}
.wp-block-columns.split > .wp-block-column,
.wp-block-columns.hero__grid > .wp-block-column,
.wp-block-columns.lines > .wp-block-column {
  flex-basis: auto !important;
  flex-grow: 0;
  min-width: 0;
}

.wp-block-columns.split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.wp-block-columns.split--wide-left { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.wp-block-columns.split--even { grid-template-columns: 1fr 1fr; }

.wp-block-columns.hero__grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 56px;
  align-items: end;
}

.wp-block-columns.lines {
  align-items: stretch;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule-light);
  border-block: 1px solid var(--rule-light);
}
.wp-block-columns.lines > .wp-block-column {
  background: var(--paper);
  display: flex;
  flex-direction: column;
  padding: 0 0 48px;
}
.wp-block-columns.lines > .wp-block-column > :not(.imgslot) { margin-inline: 40px; }
.wp-block-columns.lines > .wp-block-column > h3 { margin-top: 44px; }
.wp-block-columns.lines .btn-row { margin-top: auto; padding-top: 30px; }

@media (max-width: 900px) {
  .wp-block-columns.split,
  .wp-block-columns.split--wide-left,
  .wp-block-columns.split--even,
  .wp-block-columns.hero__grid,
  .wp-block-columns.lines { grid-template-columns: 1fr; gap: 40px; }
  .wp-block-columns.lines { gap: 1px; }
  .wp-block-columns.lines > .wp-block-column > :not(.imgslot) { margin-inline: 24px; }
}

/* --- Buttons ------------------------------------------------------------- */
.wp-block-buttons.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.wp-block-button.btn { display: inline-block; }

.wp-block-button.btn .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 24px;
  border: 1px solid transparent;
  border-radius: 0;
  background: none;
  color: inherit;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.wp-block-button.btn--gold .wp-block-button__link { background: var(--gold); color: var(--ink); }
.wp-block-button.btn--gold .wp-block-button__link:hover { background: var(--gold-soft); }
.wp-block-button.btn--dark .wp-block-button__link { background: var(--charcoal); color: var(--text-light); }
.wp-block-button.btn--dark .wp-block-button__link:hover { background: var(--ink); }
.wp-block-button.btn--ghost .wp-block-button__link { border-color: var(--rule-light); color: var(--text-dark); }
.wp-block-button.btn--ghost .wp-block-button__link:hover { border-color: var(--charcoal); background: var(--charcoal); color: var(--text-light); }
.wp-block-button.btn--ghost-light .wp-block-button__link { border-color: var(--rule-dark); color: var(--text-light); }
.wp-block-button.btn--ghost-light .wp-block-button__link:hover { border-color: var(--gold); color: var(--gold); }

/* --- Headings and separators -------------------------------------------- */
.wp-block-heading.t-hero,
.wp-block-heading.t-display,
.wp-block-heading.t-section,
.wp-block-heading.t-sub { margin-block: 0; }

.wp-block-separator.rule {
  border: 0;
  height: 1px;
  background: var(--rule-light);
  opacity: 1;
  max-width: none;
}
.band--dark .wp-block-separator.rule,
.band--ink .wp-block-separator.rule { background: var(--rule-dark); }

/* --- Inherited colour inside dark bands ---------------------------------- */
.band--dark, .band--dark p, .band--dark h2, .band--dark h3,
.band--ink, .band--ink p, .band--ink h2, .band--ink h3 { color: var(--text-light); }
.band--dark .lede, .band--ink .lede { color: var(--text-light-muted); }

/* --- Editor preview ------------------------------------------------------ */
/* Enqueue this file (and alkebulan.css) with add_editor_style() so the bands
   look correct inside Gutenberg as well as on the front end. */

/* The wrapper is not the button. The anchor is. */
.wp-block-button.btn { background: none !important; border: 0 !important; padding: 0 !important; }

.band .wp-block-button__link,
.wp-block-cover.hero .wp-block-button__link {
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 15px 24px !important;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.wp-block-button.btn--gold .wp-block-button__link { background-color: var(--gold) !important; color: var(--ink) !important; }
.wp-block-button.btn--gold .wp-block-button__link:hover { background-color: var(--gold-soft) !important; }
.wp-block-button.btn--dark .wp-block-button__link { background-color: var(--charcoal) !important; color: var(--text-light) !important; }
.wp-block-button.btn--ghost .wp-block-button__link { background-color: transparent !important; color: var(--text-dark) !important; border-color: var(--rule-light) !important; }
.wp-block-button.btn--ghost-light .wp-block-button__link { background-color: transparent !important; color: var(--text-light) !important; border-color: var(--rule-dark) !important; }

/* Twenty Twenty-Five applies a 1.2rem block gap between every child of a
   layout container. The bands supply their own rhythm, so zero it at the
   seams and where the shell meets the band. */
.entry-content > .band,
.entry-content > .wp-block-cover.hero,
.wp-block-post-content > .band,
.wp-block-post-content > .wp-block-cover.hero {
  margin-block-start: 0;
  margin-block-end: 0;
}

.band > .shell,
.wp-block-cover__inner-container > .shell {
  margin-block-start: 0;
}

/* Simple partner list. The only new rule this page needs. */
.band .plain-list { margin: 24px 0 0; padding-left: 0; list-style: none; }
.band .plain-list li {
  padding: 13px 0;
  border-bottom: 1px solid var(--rule-light);
  font-size: 1rem;
}
.band--dark .plain-list li,
.band--ink .plain-list li { border-bottom-color: var(--rule-dark); }

/* --- How It Works: the seven stages ------------------------------------- */
/* A narrow first column for the stage number. Without this the number sits
   in a 0.9fr column and leaves half the page empty. */
.wp-block-columns.split--stage {
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}

.band .stage-n {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--gold-deep);
  margin: 6px 0 0;
}
.band--dark .stage-n,
.band--ink .stage-n { color: var(--gold); }

/* Separate consecutive stages. Scoped to the modifier so it cannot affect
   any other page. */
.split--stage + .split--stage {
  border-top: 1px solid var(--rule-light);
  padding-top: 38px;
  margin-top: 38px;
}

@media (max-width: 900px) {
  .wp-block-columns.split--stage { grid-template-columns: 1fr; gap: 6px; }
  .split--stage + .split--stage { padding-top: 28px; margin-top: 28px; }
}

/* Contact addresses on the Engage page. */
.band .plain-contact { font-size: 0.9375rem; line-height: 2; }
.band .plain-contact a { color: var(--gold-deep); text-decoration: none; }
.band .plain-contact a:hover { text-decoration: underline; }

/* --- Contact Form 7 on the Engage page ---------------------------------- */
.band .wpcf7 { margin-top: 8px; }
.band .wpcf7 p { margin: 0 0 22px; max-width: none; }

.band .cf7-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
@media (max-width: 720px) { .band .cf7-row { grid-template-columns: 1fr; } }

.band .cf7-field label {
  display: block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 9px;
}
.band .cf7-field .opt { text-transform: none; letter-spacing: 0.04em; color: var(--charcoal-3); }

.band .wpcf7 input[type="text"],
.band .wpcf7 input[type="email"],
.band .wpcf7 input[type="tel"],
.band .wpcf7 textarea,
.band .wpcf7 input[type="file"] {
  font-family: var(--body);
  font-size: 1rem;
  color: var(--text-dark);
  background: var(--paper-2);
  border: 1px solid var(--rule-light);
  border-radius: 0;
  padding: 14px 16px;
  width: 100%;
}
.band .wpcf7 textarea { min-height: 132px; resize: vertical; }
.band .wpcf7 input:focus,
.band .wpcf7 textarea:focus {
  border-color: var(--gold);
  outline: none;
  box-shadow: inset 0 -2px 0 var(--gold);
}

/* Radio buttons as chips, matching the rest of the site. */
.band .wpcf7 .wpcf7-radio { display: flex; flex-wrap: wrap; gap: 10px; }
.band .wpcf7 .wpcf7-list-item { margin: 0; }
.band .wpcf7 .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dark);
  border: 1px solid var(--rule-light);
  background: var(--paper-2);
  padding: 12px 16px;
  margin: 0;
  cursor: pointer;
}
.band .wpcf7 .wpcf7-list-item input[type="radio"] { accent-color: var(--gold); margin: 0; }

.band .cf7-consent { font-size: 0.875rem; color: var(--text-muted); }
.band .cf7-consent input[type="checkbox"] { accent-color: var(--gold); margin-right: 8px; }

/* Submit button */
.band .wpcf7 input[type="submit"] {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--gold);
  color: var(--ink);
  border: 0;
  border-radius: 0;
  padding: 15px 28px;
  cursor: pointer;
}
.band .wpcf7 input[type="submit"]:hover { background: var(--gold-soft); }

/* CF7 response and validation messages */
.band .wpcf7-not-valid-tip { font-family: var(--mono); font-size: 0.6875rem; color: #8C2F1E; margin-top: 6px; }
.band .wpcf7 .wpcf7-not-valid { border-color: #8C2F1E; box-shadow: inset 0 -2px 0 #8C2F1E; }
.band .wpcf7-response-output {
  border: 0 !important;
  border-left: 2px solid var(--gold) !important;
  background: rgba(218, 165, 32, 0.08);
  margin: 24px 0 0 !important;
  padding: 16px 20px !important;
  font-size: 0.9375rem;
}