/*
Theme Name: Afiniv Premium V6
Theme URI: https://www.afiniv.com/
Author: Afiniv
Description: Lightweight custom WordPress theme for Afiniv. Bespoke payments advisory homepage with WordPress plugin compatibility.
Version: 1.6.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: afiniv
*/

/* Homepage styles are intentionally embedded in front-page.php to preserve the approved design exactly. */


/* === Mobile polish v2: ecosystem centering + tighter capability strip === */
@media (max-width: 700px) {
  /* Keep the hero graphic fully inside the viewport and centered on iPhone widths */
  .hero {
    overflow-x: clip;
  }

  .hero-grid {
    display: block !important;
  }

  .universe {
    position: relative !important;
    left: 50% !important;
    width: 660px !important;
    max-width: none !important;
    transform: translateX(-50%) scale(.56) !important;
    transform-origin: top center !important;
    margin-top: 14px !important;
    margin-bottom: -250px !important;
  }

  /* Tighter four-category capability row */
  .strip {
    padding: 8px 0 !important;
  }

  .strip-inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    overflow: visible !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .strip-item {
    min-width: 0 !important;
    min-height: 64px !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    justify-content: center !important;
  }

  .strip-item b {
    font-size: 11.5px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    margin-bottom: 2px !important;
  }

  .strip-item span {
    font-size: 10px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    margin-top: 2px !important;
  }
}

@media (max-width: 430px) {
  .universe {
    transform: translateX(-50%) scale(.51) !important;
    margin-bottom: -285px !important;
  }

  .strip-inner {
    gap: 7px !important;
  }

  .strip-item {
    min-height: 60px !important;
    padding: 9px 10px !important;
  }

  .strip-item b {
    font-size: 11px !important;
  }

  .strip-item span {
    font-size: 9.5px !important;
  }
}

@media (max-width: 380px) {
  .universe {
    transform: translateX(-50%) scale(.47) !important;
    margin-bottom: -320px !important;
  }

  .strip-item {
    min-height: 58px !important;
  }
}


/* =========================================================
   FINAL IPHONE / MOBILE LAYOUT OVERRIDE
   Keeps the ecosystem centered in the viewport and compact.
   ========================================================= */
@media (max-width: 720px) {
  .hero {
    overflow: hidden !important;
  }

  .hero-wrap {
    display: block !important;
    width: 100% !important;
    padding-bottom: 18px !important;
  }

  /* Break the ecosystem stage out of the padded .container.
     It is now centered against the PHONE VIEWPORT, not the desktop grid. */
  .universe-stage {
    position: relative !important;
    display: block !important;
    width: 100vw !important;
    height: 382px !important;
    margin: 22px 0 0 calc(50% - 50vw) !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .universe-stage .universe {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    width: 660px !important;
    height: 660px !important;
    margin: 0 !important;
    transform: translateX(-50%) scale(.56) !important;
    transform-origin: top center !important;
  }

  /* Compact mobile capability selector */
  .strip {
    padding: 7px 0 !important;
  }

  .strip .strip-inner {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    overflow: visible !important;
  }

  .strip .strip-item {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 56px !important;
    padding: 8px 10px !important;
    border: 1px solid var(--line) !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
  }

  .strip .strip-item b {
    margin: 0 !important;
    font-size: 10.8px !important;
    line-height: 1.16 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .strip .strip-item span {
    margin-top: 2px !important;
    font-size: 9.4px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
}

@media (max-width: 430px) {
  .universe-stage {
    height: 360px !important;
  }

  .universe-stage .universe {
    transform: translateX(-50%) scale(.525) !important;
  }
}

@media (max-width: 390px) {
  .universe-stage {
    height: 338px !important;
  }

  .universe-stage .universe {
    transform: translateX(-50%) scale(.49) !important;
  }

  .strip .strip-inner {
    gap: 5px !important;
    padding-inline: 10px !important;
  }

  .strip .strip-item {
    min-height: 54px !important;
    padding: 7px 8px !important;
  }

  .strip .strip-item b {
    font-size: 10.2px !important;
  }

  .strip .strip-item span {
    font-size: 9px !important;
  }
}



/* Mobile expertise proof points: compact 2x2 */
@media (max-width: 720px) {
  .hero-proof {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 14px !important;
    row-gap: 8px !important;
    width: 100% !important;
    margin-top: 18px !important;
  }

  .hero-proof span {
    display: flex !important;
    align-items: flex-start !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
  }
}


/* ==========================================================
   DEFINITIVE MOBILE FIX v4
   - Expertise is always 2 x 2
   - 12/6 o'clock centered nodes are locked
   - Touch hover cannot move ecosystem players
   ========================================================== */
@media (max-width: 720px) {
  /* ACTUAL expertise element */
  .hero-meta {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px 14px !important;
    width: 100% !important;
    margin-top: 24px !important;
  }

  .hero-meta span {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
  }

  /* Undo old mobile position overrides and lock the circle geometry */
  .pl1 { top:12% !important; left:8% !important; right:auto !important; bottom:auto !important; }
  .pl2 { top:1% !important; left:50% !important; right:auto !important; bottom:auto !important;
         transform:translateX(-50%) !important; }
  .pl3 { top:12% !important; right:8% !important; left:auto !important; bottom:auto !important; }
  .pl4 { top:38% !important; right:-4% !important; left:auto !important; bottom:auto !important; }
  .pl5 { bottom:18% !important; right:5% !important; left:auto !important; top:auto !important; }
  .pl6 { bottom:1% !important; left:50% !important; right:auto !important; top:auto !important;
         transform:translateX(-50%) !important; }
  .pl7 { bottom:18% !important; left:5% !important; right:auto !important; top:auto !important; }
  .pl8 { top:38% !important; left:-4% !important; right:auto !important; bottom:auto !important; }

  /* Prevent Safari/iOS sticky hover from shifting nodes after tapping */
  .player:hover {
    transform:none !important;
  }
  .pl2:hover,
  .pl6:hover {
    transform:translateX(-50%) !important;
  }
}

@media (max-width: 520px) {
  /* Explicitly defeat the old 1-column mobile rule */
  .hero-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  .player {
    transition: border-color .25s ease, box-shadow .25s ease !important;
  }
  .player:hover {
    transform:none !important;
  }
  .pl2:hover,
  .pl6:hover {
    transform:translateX(-50%) !important;
  }
}



/* =========================================================
   AFINIV V6 — AUTHORITATIVE MOBILE LAYOUT
   No legacy node positioning below this point.
   ========================================================= */
@media (max-width: 720px) {
  .hero { overflow: hidden !important; }
  .hero-wrap { display:block !important; min-height:auto !important; padding-bottom:18px !important; }

  .hero-meta{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:9px 12px !important;
    width:100% !important;
    margin-top:22px !important;
  }
  .hero-meta span{
    display:flex !important;
    align-items:center !important;
    min-width:0 !important;
    margin:0 !important;
    font-size:11px !important;
    line-height:1.28 !important;
  }

  /* Full-viewport stage */
  .universe-stage{
    position:relative !important;
    width:100vw !important;
    height:390px !important;
    margin:18px 0 0 calc(50% - 50vw) !important;
    padding:0 !important;
    overflow:hidden !important;
  }
  .universe-stage .universe{
    position:absolute !important;
    width:660px !important;
    height:660px !important;
    max-width:none !important;
    top:0 !important;
    left:50% !important;
    margin:0 !important;
    transform:translateX(-50%) scale(.56) !important;
    transform-origin:top center !important;
  }

  /* Fixed 8-point outer geometry */
  .universe .pl1{top:12% !important;left:8% !important;right:auto !important;bottom:auto !important;transform:none !important}
  .universe .pl2{top:1% !important;left:50% !important;right:auto !important;bottom:auto !important;transform:translateX(-50%) !important}
  .universe .pl3{top:12% !important;right:8% !important;left:auto !important;bottom:auto !important;transform:none !important}
  .universe .pl4{top:38% !important;right:-4% !important;left:auto !important;bottom:auto !important;transform:none !important}
  .universe .pl5{bottom:18% !important;right:5% !important;left:auto !important;top:auto !important;transform:none !important}
  .universe .pl6{bottom:1% !important;left:50% !important;right:auto !important;top:auto !important;transform:translateX(-50%) !important}
  .universe .pl7{bottom:18% !important;left:5% !important;right:auto !important;top:auto !important;transform:none !important}
  .universe .pl8{top:38% !important;left:-4% !important;right:auto !important;bottom:auto !important;transform:none !important}

  /* iOS touch must never move outer nodes */
  .universe .player,
  .universe .player:hover,
  .universe .player:active,
  .universe .player:focus{transition:none !important}
  .universe .pl1:hover,.universe .pl1:active,.universe .pl1:focus,
  .universe .pl3:hover,.universe .pl3:active,.universe .pl3:focus,
  .universe .pl4:hover,.universe .pl4:active,.universe .pl4:focus,
  .universe .pl5:hover,.universe .pl5:active,.universe .pl5:focus,
  .universe .pl7:hover,.universe .pl7:active,.universe .pl7:focus,
  .universe .pl8:hover,.universe .pl8:active,.universe .pl8:focus{transform:none !important}
  .universe .pl2:hover,.universe .pl2:active,.universe .pl2:focus,
  .universe .pl6:hover,.universe .pl6:active,.universe .pl6:focus{transform:translateX(-50%) !important}

  /* Keep all labels crisp on scaled diagram */
  .capability{backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
}

@media (max-width: 430px){
  .universe-stage{height:365px !important}
  .universe-stage .universe{transform:translateX(-50%) scale(.525) !important}
}
@media (max-width: 390px){
  .universe-stage{height:342px !important}
  .universe-stage .universe{transform:translateX(-50%) scale(.49) !important}
}
@media (max-width: 360px){
  .universe-stage{height:320px !important}
  .universe-stage .universe{transform:translateX(-50%) scale(.455) !important}
}