/* ======================================================
   BLUEXIS™ — FULL REFINEMENT (LUXURY EDITORIAL)
   ====================================================== */

:root {
  --bx-black: #0b0b0b;
  --bx-gold: #c6a052;
  --bx-gold-soft: #a88c4a;
  --bx-text-main: #e6e6e6;
  --bx-text-muted: #8c8c8c;
  --bx-border: rgba(255, 255, 255, 0.06);
  --bx-width: 920px;
  --bx-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ======================================================
   GLOBAL RESET & CONTAINER
   ====================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bx-black);
  color: var(--bx-text-main);
  font-family: "Inter", sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* The "Centering Anchor" for all main sections */
.bx-container, 
.bx-header-inner, 
.bx-footer-inner {
  max-width: var(--bx-width);
  margin: 0 auto !important;
  padding: 0 20px;
  width: 100%;
}

/* ======================================================
   TYPOGRAPHY
   ====================================================== */
h1, h2, h3 { font-family: "Playfair Display", serif; margin: 0; }
h1 { font-size: 48px; color: var(--bx-gold); line-height: 1.1; letter-spacing: -0.02em; }
h2 { font-size: 28px; color: var(--bx-gold); margin-bottom: 24px; }
h3 { font-size: 17px; color: var(--bx-gold-soft); }
p { font-size: 15px; color: var(--bx-text-muted); line-height: 1.7; max-width: 650px; }

/* ======================================================
   HEADER (FIXED CENTERING)
   ====================================================== */
.bx-header {
  border-bottom: 1px solid rgba(198, 160, 82, 0.15);
  display: flex;
  justify-content: center; /* Forces content to center of screen */
  width: 100%;
}

.bx-header-inner {
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wp-block-navigation a {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  position: relative;
  transition: color 0.3s var(--bx-ease);
}

.wp-block-navigation a:hover { color: var(--bx-gold); }

.wp-block-navigation a::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 0%;
  height: 1px;
  background: var(--bx-gold);
  transition: all 0.4s var(--bx-ease);
  transform: translateX(-50%);
}

.wp-block-navigation a:hover::after { width: 100%; }

/* ======================================================
   SECTION & HERO
   ====================================================== */
.bx-hero { padding: 90px 0 40px; }
.bx-section { padding: 70px 0; }

/* ======================================================
   CARD SYSTEM (TGA)
   ====================================================== */
.bx-review-home .wp-block-post-template {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 40px;
}

.post-card {
  position: relative;
  padding: 22px;
  min-height: 240px;
  border: 1px solid var(--bx-border);
  transition: all 0.5s var(--bx-ease);
}

.post-card::before {
  content: "";
  position: absolute;
  left: 0; top: 20px;
  width: 2px; height: 36px;
  background: rgba(198, 160, 82, 0.25);
  transition: all 0.3s ease;
}

.post-card:hover {
  transform: translateY(-4px);
  border-color: rgba(198, 160, 82, 0.35);
  background: rgba(255, 255, 255, 0.02);
}

.post-card:hover::before { height: 48px; background: var(--bx-gold); }

/* ======================================================
   FOOTER (FIXED CENTERING)
   ====================================================== */
.bx-footer {
  margin-top: 140px;
  padding: 100px 0 60px;
  border-top: 1px solid var(--bx-border);
  display: flex;
  justify-content: center; /* Forces content to center of screen */
  width: 100%;
}

.bx-footer-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 60px;
}

.bx-footer-col a {
  display: block;
  font-size: 12px;
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.3s ease;
}

.bx-footer-col a:hover { color: var(--bx-gold); }

/* ======================================================
   RESPONSIVE
   ====================================================== */
@media (max-width: 1024px) {
  .bx-review-home .wp-block-post-template { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .bx-review-home .wp-block-post-template { grid-template-columns: 1fr; }
  .bx-footer-inner { grid-template-columns: 1fr; }
}