/*
 * site-polish.css — layout corrections layered on top of the PlayerX theme.
 *
 * Additive only. Nothing in the original theme CSS is edited, so removing this
 * one <link> restores the site exactly as captured.
 *
 * Measured before/after with the page open at 1280px wide.
 */

/* ---------------------------------------------------------------------------
 * Hero carousel — deliberately left alone.
 *
 * An earlier revision shrank it from 720px to a fluid clamp. Reverted: the
 * source art is a near-square 2560x2102 logo mockup whose logo bounding box is
 * ~1.25 aspect, so it cannot fit whole inside a wide hero via background-size:
 * cover at any short height — something is always clipped, and every focal
 * point tried either sliced the wordmark mid-letter or cut the triangle mark.
 * The full-height hero is the only framing that shows the logo intact, so it
 * stays exactly as the live site has it.
 *
 * If a purpose-made wide hero image is ever produced (roughly 2560x900, logo
 * composited smaller), the height can come down without the compromise. The
 * override would go on .owl-stage-outer, which carries an inline height written
 * by owl-carousel's JS — an author !important beats a non-important inline
 * style, and every descendant is height:100% so it follows. Note this is owl
 * v2 (.owl-stage-outer); v1's .owl-wrapper-outer does not exist here.
 * ------------------------------------------------------------------------ */

/* ---------------------------------------------------------------------------
 * Vertical rhythm — three 100px spacers stacked up 300px of dead air.
 * ------------------------------------------------------------------------ */
.wp-block-spacer {
  height: 48px !important;
}

/* ---------------------------------------------------------------------------
 * Type scale.
 *
 * The games heading was 80px and overflowed the viewport (right edge 1498px in
 * a 1280px window), so it was clipping, not merely large. Everything below is
 * fluid between a readable minimum and a maximum that fits at 1280px.
 * ------------------------------------------------------------------------ */
.edgtf-content h1:not(.edgtf-post-title) {
  font-size: clamp(34px, 4.2vw, 54px) !important;
  line-height: 1.08 !important;
  margin-bottom: 12px !important;
}

.edgtf-content h2 {
  font-size: clamp(22px, 2.6vw, 34px) !important;
  line-height: 1.2 !important;
  margin-bottom: 16px !important;
}

/* "Games" / "Team" section labels — smaller, with tracking to read as eyebrows
 * rather than competing with the headings under them. */
.edgtf-content h4.wp-block-heading {
  font-size: 24px !important;
  letter-spacing: 0.14em !important;
  margin-bottom: 28px !important;
}

/* Long unbroken words (ShooterPals.io) must wrap instead of overflowing. */
.edgtf-content h1,
.edgtf-content h2,
.edgtf-content h3,
.edgtf-content h4 {
  overflow-wrap: break-word;
  max-width: 100%;
}

/* Blog post titles keep their own scale — the rules above must not shrink them. */
.edgtf-post-title {
  font-size: clamp(30px, 3.4vw, 44px) !important;
  line-height: 1.15 !important;
}

/* Body copy in the games column was set tight against the headings. */
.edgtf-content .wp-block-paragraph {
  line-height: 1.65;
  margin-bottom: 10px;
}

/* ---------------------------------------------------------------------------
 * X / Twitter follow card.
 *
 * Replaces the dead embedded timeline. X no longer renders anonymous embedded
 * timelines: widgets.js, timeline.js and the widget iframe shell all load, then
 * no timeline iframe is ever created and the block collapses to 26px.
 * ------------------------------------------------------------------------ */
.dd-social-follow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  margin: 8px 0 4px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.dd-social-follow:hover,
.dd-social-follow:focus-visible {
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.07);
  transform: translateY(-1px);
  color: #fff;
}

.dd-social-follow:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.dd-social-follow svg {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  fill: currentColor;
}

.dd-social-follow .dd-social-handle {
  display: block;
  font-size: 13px;
  font-weight: 400;
  opacity: 0.62;
  letter-spacing: 0;
}

@media (prefers-reduced-motion: reduce) {
  .dd-social-follow {
    transition: none;
  }
  .dd-social-follow:hover {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
 * Footer social chip.
 *
 * Was Twitter's bird on a #1da1f2 circle. Swapping in the X mark meant dropping
 * the wp-social-link-twitter class that supplied that blue, so the chip needs
 * its own treatment. Pure black would disappear against the near-black footer,
 * so it uses the same raised-surface + hairline border as .dd-social-follow to
 * keep the two X marks on the page visually consistent.
 * ------------------------------------------------------------------------ */
/* The <li> itself carries WordPress's default #f0f0f0 chip background. The
 * anchor's fill is only 8% opaque, so without clearing the li that light grey
 * showed straight through and the chip rendered as a washed-out pale circle. */
.dd-social-x {
  background-color: transparent !important;
}

.dd-social-x .wp-block-social-link-anchor {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.16);
  transition: background-color 0.18s ease, border-color 0.18s ease,
    transform 0.18s ease;
}

.dd-social-x .wp-block-social-link-anchor:hover,
.dd-social-x .wp-block-social-link-anchor:focus-visible {
  background-color: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.42);
  transform: translateY(-1px);
}

.dd-social-x .wp-block-social-link-anchor:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* The SVG carries width/height="24" attributes and the block CSS sizes it too,
 * so both need overriding to sit comfortably inside the 38px chip. */
.dd-social-x svg {
  fill: currentColor !important;
  width: 17px !important;
  height: 17px !important;
}

@media (prefers-reduced-motion: reduce) {
  .dd-social-x .wp-block-social-link-anchor {
    transition: none;
  }
  .dd-social-x .wp-block-social-link-anchor:hover {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
 * Team — the LinkedIn badge script renders nothing (2 badge divs, 0 iframes),
 * so both cards degrade to bare text. Give them consistent spacing.
 * ------------------------------------------------------------------------ */
.LI-profile-badge {
  margin-bottom: 4px;
}

.wp-block-group.is-content-justification-center {
  gap: 56px;
}