/*
Theme Name: Eclipsion
Theme URI: https://eclipsion.games
Author: Eclipsion Games
Description: Custom block theme for Eclipsion Games - indie game studio and visual media production. The darkness holds stories - bring them to light.
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
Update URI: https://eclipsion.games
Text Domain: eclipsion
*/

/* Body size lives in theme.json (18px web adaptation of the 14px print CD value
   - Cormorant's small x-height needs it; 2026-06-13 accessibility audit). */

/* Visible keyboard focus on every surface (WCAG 2.4.7). Ember meets the 3:1
   non-text contrast minimum on both ink and cream backgrounds. */
:focus-visible {
  outline: 3px solid var(--wp--preset--color--ember);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Sticky header: navigation stays reachable on long pages. */
.wp-site-blocks > header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--wp--preset--color--ink);
}

/* Content links are underlined via theme.json; navigation, buttons, and the
   language switcher carry their own affordance. */
.wp-block-navigation a,
.eclipsion-lang-switcher a {
  text-decoration: none;
}
.wp-block-navigation a:hover,
.eclipsion-lang-switcher a:hover {
  text-decoration: underline;
}

/* Mobile menu toggles render as bare 24px icons; pad to a usable touch target. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  padding: 8px;
}

/* Anchors land below the sticky header. */
html {
  scroll-padding-top: 80px;
}

/* Team grid: fluid auto-fit on small screens; featured leadership row from 900px
   (2 wide cards for the Geschäftsführung, 3-up below, last card centered). */
.eclipsion-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 24px;
}
/* Cancel WP's flow-layout margin so the grid gap is the only row spacing. */
.eclipsion-team-grid > * {
  margin-block-start: 0;
}
@media (min-width: 900px) {
  .eclipsion-team-grid {
    grid-template-columns: repeat(6, 1fr);
  }
  .eclipsion-team-card {
    grid-column: span 2;
  }
  .eclipsion-team-card:nth-child(-n+2) {
    grid-column: span 3;
  }
  .eclipsion-team-card:last-child {
    grid-column: 3 / span 2;
  }
}

/* Team cards: centered portraits; warm ember edge instead of a hard color cut.
   Hover is occultation, not elevation: the personal eclipse flares. */
.eclipsion-team-card,
.eclipsion-card {
  min-width: 0;
  border: 1px solid rgba(243, 75, 6, 0.12);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.eclipsion-team-card p,
.eclipsion-card p {
  overflow-wrap: anywhere;
}
.eclipsion-team-card:hover,
.eclipsion-card:hover {
  border-color: rgba(243, 75, 6, 0.4);
  box-shadow: 0 0 24px rgba(243, 75, 6, 0.15);
}

.eclipsion-team-card {
  text-align: center;
}

/* The personal eclipse: dark disc with initials, ember ring glow. Photos drop
   into the same circular frame later (replace the div with an <img>). */
.eclipsion-avatar {
  width: 96px;
  height: 96px;
  margin: 0 auto 16px;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 35% 30%, var(--wp--preset--color--ink-soft), var(--wp--preset--color--ink) 72%);
  color: var(--wp--preset--color--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 1px;
  box-shadow:
    0 0 0 2px var(--wp--preset--color--ember),
    0 0 18px 2px rgba(243, 75, 6, 0.35),
    inset 0 0 12px rgba(252, 247, 197, 0.15);
  transition: box-shadow 0.25s ease;
}
/* Each person's eclipse is caught at a different moment: vary the light origin. */
.eclipsion-team-card:nth-child(3n+1) .eclipsion-avatar {
  background: radial-gradient(circle at 28% 24%, var(--wp--preset--color--ink-soft), var(--wp--preset--color--ink) 72%);
}
.eclipsion-team-card:nth-child(3n+2) .eclipsion-avatar {
  background: radial-gradient(circle at 72% 30%, var(--wp--preset--color--ink-soft), var(--wp--preset--color--ink) 72%);
}
.eclipsion-team-card:nth-child(3n) .eclipsion-avatar {
  background: radial-gradient(circle at 50% 76%, var(--wp--preset--color--ink-soft), var(--wp--preset--color--ink) 72%);
}
.eclipsion-team-card:hover .eclipsion-avatar {
  box-shadow:
    0 0 0 2px var(--wp--preset--color--ember),
    0 0 28px 6px rgba(243, 75, 6, 0.55),
    inset 0 0 12px rgba(252, 247, 197, 0.25);
}

/* Faint mirrored glow at the top of the card section: continues the eclipse
   motif from the intro band without breaking the style-variation matrix. */
.eclipse-surface {
  position: relative;
  overflow: hidden;
}
.eclipse-surface::before {
  content: "";
  position: absolute;
  left: -80px;
  top: -100px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  box-shadow:
    0 0 60px 18px rgba(243, 75, 6, 0.12),
    0 0 24px 6px rgba(252, 247, 197, 0.08);
  pointer-events: none;
}

@media (max-width: 360px) {
  .eclipsion-avatar {
    width: 80px;
    height: 80px;
    font-size: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .eclipsion-team-card,
  .eclipsion-card,
  .eclipsion-avatar {
    transition: none;
  }
  /* No sudden glow flash either: hover keeps the resting corona. */
  .eclipsion-team-card:hover .eclipsion-avatar {
    box-shadow:
      0 0 0 2px var(--wp--preset--color--ember),
      0 0 18px 2px rgba(243, 75, 6, 0.35),
      inset 0 0 12px rgba(252, 247, 197, 0.15);
  }
}

/* Eclipse glow - the logo motif as pure CSS. */
.eclipse-glow { position: relative; overflow: hidden; }
.eclipse-glow::after {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -90px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: #210905;
  box-shadow: 0 0 40px 10px rgba(252, 247, 197, 0.45), 0 0 110px 35px rgba(243, 75, 6, 0.4);
  pointer-events: none;
}

/* Hero/band paddings breathe down on phones (inline px values need !important). */
@media (max-width: 640px) {
  .eclipse-glow {
    padding-top: 48px !important;
    padding-bottom: 72px !important;
  }
}

/* Generic responsive card grid: fluid 3 -> 2 -> 1 (services, teasers, archives). */
.eclipsion-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 24px;
}
.eclipsion-grid > * {
  margin-block-start: 0;
}

/* Game art (cast lineup until real key art exists): framed to sit in the dark
   section, ember edge + glow tying the warm illustration to the brand. */
.eclipsion-game-art {
  margin: 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--ember) 35%, transparent);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45), 0 0 40px rgba(243, 75, 6, 0.12);
}
.eclipsion-game-art img {
  display: block;
  width: 100%;
  height: auto;
}

/* The media slot: where key art and trailers will live, the eclipse waits. */
.eclipsion-media-slot {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  min-height: clamp(180px, 32vw, 300px);
  background:
    radial-gradient(circle at 50% 130%, rgba(243, 75, 6, 0.25), transparent 60%),
    linear-gradient(150deg, var(--wp--preset--color--indigo), var(--wp--preset--color--ink) 85%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.eclipsion-media-slot::after {
  content: "";
  position: absolute;
  top: 38%;
  left: 50%;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: var(--wp--preset--color--ink);
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 26px 6px rgba(252, 247, 197, 0.35),
    0 0 70px 24px rgba(243, 75, 6, 0.35);
  pointer-events: none;
}
.eclipsion-media-slot p {
  position: relative;
  z-index: 1;
  margin: 0 16px 20px;
  font-style: italic;
  color: var(--wp--preset--color--cream-muted);
}

/* Forms: one field language for CF7 (light surfaces), the footer newsletter and
   the search block (dark surfaces). */
.wpcf7 input:not([type="submit"]):not([type="checkbox"]),
.wpcf7 textarea {
  width: 100%;
  background: var(--wp--preset--color--card);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--card-text) 60%, transparent);
  border-radius: 4px;
  padding: 10px 14px;
  font: inherit;
  color: var(--wp--preset--color--card-text);
}
.wpcf7 textarea {
  min-height: 160px;
}
.wpcf7 .wpcf7-form-control-wrap {
  display: block;
  margin-top: 4px;
}
.wpcf7 label {
  display: block;
  margin-bottom: 16px;
}
footer .tnp-subscription input[type="email"],
.wp-block-search__input {
  width: 100%;
  background: color-mix(in srgb, currentColor 10%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 65%, transparent);
  border-radius: 4px;
  padding: 10px 14px;
  font: inherit;
  color: inherit;
}
.wp-block-search__button {
  border: 0;
}
.wpcf7 input[type="submit"],
.tnp-submit {
  background: var(--wp--preset--color--ember);
  color: var(--wp--preset--color--ink);
  border: 0;
  border-radius: 2px;
  padding: 10px 22px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  width: auto !important;
}
.wpcf7 input[type="submit"]:hover,
.tnp-submit:hover {
  background: #ff5a12;
}
input[type="checkbox"] {
  accent-color: var(--wp--preset--color--ember);
  width: 18px;
  height: 18px;
}
footer .tnp-subscription form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
  width: 100%;
  max-width: 480px;
}
footer .tnp-subscription .tnp-field-email {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  flex: 1 1 240px;
}

/* WP grid post-templates (news teasers) collapse on phones. */
@media (max-width: 640px) {
  .wp-block-query .wp-block-post-template {
    grid-template-columns: 1fr !important;
  }
}

/* Footer bottom bar separator, variation-aware. */
.eclipsion-footer-bar {
  border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--footer-text) 25%, transparent);
}

/* ---- Polish round 3 (2026-06-13): newsletter alignment, header, contact form,
   floating social rail ---- */

/* Newsletter: neutralize TNP's own field margins so the submit sits level with
   the email input; equal heights via matching border. */
footer .tnp-subscription .tnp-field {
  margin: 0 !important;
}
footer .tnp-subscription .tnp-field-button {
  flex: 0 0 auto;
}
.tnp-submit {
  border: 1px solid transparent !important;
}

/* Sticky header: slimmer, visually separated from same-color hero, tidy wrap. */
.wp-site-blocks > header {
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--wp--preset--color--cream-muted) 25%, transparent),
    0 6px 20px rgba(0, 0, 0, 0.35);
}
.wp-site-blocks > header .wp-block-group {
  row-gap: 8px;
}

/* Contact form: editorial labels, comfortable fields, ember focus ring,
   two-column name/email from 720px. */
.wpcf7-form > p > label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--wp--preset--color--card-text) 80%, transparent);
}
.wpcf7 input:not([type="submit"]):not([type="checkbox"]),
.wpcf7 textarea {
  font-size: var(--wp--preset--font-size--body);
  letter-spacing: normal;
  text-transform: none;
  font-weight: 400;
  padding: 12px 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.wpcf7 input:not([type="submit"]):focus,
.wpcf7 textarea:focus {
  border-color: var(--wp--preset--color--ember);
  box-shadow: 0 0 0 3px rgba(243, 75, 6, 0.2);
  outline: none;
}
.wpcf7-acceptance .wpcf7-list-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0;
}
.wpcf7-acceptance .wpcf7-list-item-label {
  font-size: var(--wp--preset--font-size--text);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}
.wpcf7 input[type="submit"] {
  transition: background-color 0.2s ease;
}
@media (min-width: 720px) {
  .wpcf7-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
  }
  .wpcf7-form > p {
    grid-column: span 2;
    margin: 0 0 4px;
  }
  .wpcf7-form > p:nth-of-type(-n+2) {
    grid-column: span 1;
  }
}

/* Floating social rail: always reachable bottom-right; hides when the footer
   (which shows the same links) scrolls into view. */
.eclipsion-social-rail {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  padding: 12px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--wp--preset--color--ink) 85%, transparent);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--cream-muted) 30%, transparent);
  backdrop-filter: blur(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.eclipsion-social-rail .wp-block-social-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.eclipsion-social-rail.is-hidden {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}
@media (max-width: 781px) {
  .eclipsion-social-rail {
    right: 10px;
    bottom: 10px;
    padding: 10px 6px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .eclipsion-social-rail {
    transition: none;
  }
}