/* Zack Anderson Consulting (TT5 Child) - site styles */
/* Last Edited: 1-27-2026 */

/* =========================================================
   GLOBAL BASE + ADA/UX GUARDRAILS
   ========================================================= */

/* Ensure a reliable dark base (fallback) */
html,
body {
  background: #0b1020;
}

/* Guardrail: kill unexpected white canvases/surfaces from TT5 blocks */
body,
.wp-site-blocks,
.wp-site-blocks > .wp-block-group,
.wp-site-blocks > main,
.wp-site-blocks > header,
.wp-site-blocks > footer {
  background: transparent !important;
}

/* Base readable text color (do NOT force color on every descendant) */
.wp-site-blocks {
  color: rgba(255, 255, 255, 0.92);
}

/* Inherit text color by default */
.wp-site-blocks * {
  color: inherit;
}

/* Make common block surfaces inherit (avoid white panels) */
.wp-block-group,
.wp-block-cover,
.wp-block-columns,
.wp-block-column {
  background-color: transparent;
}

/* Accessible link affordance (not color-only) */
.wp-site-blocks a:not(.z-btn):not(.wp-block-navigation-item__content) {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.wp-site-blocks a:not(.z-btn):hover {
  text-decoration-thickness: 3px;
}

/* Improve focus styles */
:where(a, button, input, textarea, select):focus-visible {
  outline: 3px solid rgba(96, 165, 250, 0.6);
  outline-offset: 3px;
}

/* =========================================================
   LAYOUT / COMPONENTS
   ========================================================= */

/* Container helpers */
.z-card {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.07),
    rgba(255, 255, 255, 0.03)
  );
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  padding: 18px;
}

.z-brand {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 16px;
  align-items: center;
}

/* Avatar wrapper (figure) */
.z-avatar {
  width: 84px;
  height: 84px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  object-fit: cover;
}

/* Avatar – force circular shape */
.z-avatar img,
.wp-block-image.z-avatar img {
  border-radius: 999px;
  width: 84px;
  height: 84px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

/* Prevent avatar from shrinking / squishing */
.wp-block-image.z-avatar {
  width: 84px;
  height: 84px;
  flex: 0 0 84px;
  align-self: start;
}

.wp-block-image.z-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
}

/* Muted text (kept readable for contrast) */
.z-tagline {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.78);
}

/* Navigation "cool buttons" */
.z-nav {
  margin-top: 14px;
}

.z-nav .wp-block-navigation__container {
  gap: 10px;
  flex-wrap: wrap;
}

.z-nav a.wp-block-navigation-item__content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  text-decoration: none; /* buttons don't need underline */
  font-weight: 650;
  letter-spacing: 0.2px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.22);
  transition: transform 160ms ease, background 160ms ease,
    border-color 160ms ease, box-shadow 160ms ease;
}

.z-nav a.wp-block-navigation-item__content:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.26);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.3);
}

.z-nav a.wp-block-navigation-item__content:active {
  transform: translateY(0);
}

/* CTA buttons (used in patterns) */
.z-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  text-decoration: none; /* buttons don't need underline */
  font-weight: 650;
  letter-spacing: 0.2px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.22);
  transition: transform 160ms ease, background 160ms ease,
    border-color 160ms ease, box-shadow 160ms ease;

  /* ---- FIX: never overflow / force collisions ---- */
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;            /* critical in grid/flex contexts */
  white-space: normal;     /* allow wrapping */
  overflow-wrap: anywhere; /* long strings won't blow layout */
  text-align: center;
  line-height: 1.15;
}

.z-btn:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.26);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.3);
}

.z-btn--primary {
  background: linear-gradient(
    135deg,
    rgba(34, 211, 238, 0.16),
    rgba(110, 231, 183, 0.16)
  );
  border-color: rgba(110, 231, 183, 0.3);
}

.z-btn--primary:hover {
  background: linear-gradient(
    135deg,
    rgba(34, 211, 238, 0.22),
    rgba(110, 231, 183, 0.22)
  );
  border-color: rgba(110, 231, 183, 0.42);
}

/* Make blocks breathe a bit */
.wp-site-blocks > * {
  margin-block-start: 18px;
}

/* Remove top spacing from the first/top block only */
.wp-site-blocks > :first-child {
  margin-block-start: 0;
}

/* Header-specific z-card tweaks */
header.wp-block-template-part .z-card {
  padding-top: 18px;

  /* Remove left, top, right borders */
  border-top: none;
  border-left: none;
  border-right: none;

  /* Keep bottom border for separation */
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);

  /* Flatter header edge */
  border-radius: 0;
}

/* =========================================================
   MOBILE / RESPONSIVE TWEAKS
   ========================================================= */

@media (max-width: 600px) {
  .z-brand {
    grid-template-columns: 72px 1fr;
  }

  .z-avatar {
    width: 72px;
    height: 72px;
  }

  .z-avatar img,
  .wp-block-image.z-avatar img {
    width: 72px;
    height: 72px;
  }

  .wp-block-image.z-avatar {
    width: 72px;
    height: 72px;
    flex-basis: 72px;
  }
}

/* Very narrow phones: stack avatar above text so nothing compresses */
@media (max-width: 520px) {
  .z-brand {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .z-tagline {
    max-width: 34ch;
    margin-left: auto;
    margin-right: auto;
  }
}

/* =========================================================
   SERVICES TEMPLATE
   ========================================================= */

.z-services-grid {
  gap: 14px;
}

.z-service-card {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.07),
    rgba(255, 255, 255, 0.03)
  );
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.2);
  padding: 16px;
}

.z-service-card h3 {
  margin-top: 0;
  margin-bottom: 8px;
}

.z-service-card p {
  color: rgba(255, 255, 255, 0.78);
  margin-top: 0;
}

.z-service-card ul {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .z-services-grid {
    gap: 12px;
  }
}

/* =========================================================
   ABOUT TEMPLATE
   ========================================================= */

.z-about-photo img {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
  object-fit: cover;
}

.z-bullets li {
  margin-bottom: 10px;
}

.z-logo-strip {
  gap: 12px;
  margin-top: 12px;
}

.z-logo {
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  padding: 14px;
  text-align: center;
  color: rgba(255, 255, 255, 0.78);
}

/* =========================================================
   PROJECTS / CASE STUDIES TEMPLATE
   ========================================================= */

.z-projects-grid {
  gap: 14px;
}

.z-project-card {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.07),
    rgba(255, 255, 255, 0.03)
  );
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.2);
  padding: 16px;
}

.z-project-card h3 {
  margin-top: 0;
  margin-bottom: 8px;
}

.z-project-card p {
  color: rgba(255, 255, 255, 0.78);
  margin-top: 0;
}

.z-before-after {
  gap: 14px;
  margin-top: 12px;
}

.z-ba-card {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 18px;
  padding: 16px;
}

/* =========================================================
   LET'S CONNECT GRID (3 → 2 → 1 columns)
   Fixes overlap on desktop and overflow on mobile.
   ========================================================= */

/* Base: better gap + stretch */
.wp-block-group.z-card .wp-block-group.is-layout-grid.wp-block-group-is-layout-grid {
  gap: 14px !important;
  align-items: stretch;
}

/* Desktop default: use 3 columns but with safer minimum widths */
@media (min-width: 901px) {
  .wp-block-group.z-card
    .wp-block-group.is-layout-grid.wp-block-group-is-layout-grid:has(.z-btn) {
    grid-template-columns: repeat(3, minmax(170px, 1fr)) !important;
  }
}

.wp-block-group.z-card
  .wp-block-group.is-layout-grid.wp-block-group-is-layout-grid:has(.z-btn)
  .z-btn {
  width: 100%;
  justify-content: center;
}

/* Tablet: 2 columns */
@media (max-width: 900px) {
  .wp-block-group.z-card
    .wp-block-group.is-layout-grid.wp-block-group-is-layout-grid:has(.z-btn) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Mobile: 1 column + comfortable padding */
@media (max-width: 600px) {
  .wp-block-group.z-card
    .wp-block-group.is-layout-grid.wp-block-group-is-layout-grid:has(.z-btn) {
    grid-template-columns: 1fr !important;
  }

  .wp-block-group.z-card
    .wp-block-group.is-layout-grid.wp-block-group-is-layout-grid:has(.z-btn)
    .z-btn {
    padding: 14px 16px;
  }
}

/* Optional: slightly smaller label text on very small screens */
@media (max-width: 420px) {
  .z-btn {
    font-size: 0.98rem;
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .z-btn,
  .z-nav a.wp-block-navigation-item__content {
    transition: none;
  }
  .z-btn:hover,
  .z-nav a.wp-block-navigation-item__content:hover {
    transform: none;
  }
}