/*
Theme Name: Astra Child - LinkHub
Theme URI: https://example.com/
Description: Child theme for Astra - LinkHub landing page
Author: Khalil
Template: astra
Version: 1.0.1
Text Domain: astra-child-linkhub
*/

:root{
  --lh-bg: #4f6070;
  --lh-card: #1f242b;
  --lh-text: #ffffff;
  --lh-muted: rgba(255,255,255,.75);
  --lh-button-bg: #ffffff;
  --lh-button-text: #3b4b5c;
  --lh-ring: rgba(255,255,255,.22);
  --lh-shadow: 0 20px 60px rgba(0,0,0,.35);

  /* NEW: typography */
  --lh-font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --lh-name-size: 22px;
  --lh-bio-size: 14px;
  --lh-btn-size: 13px;

  /* NEW: avatar */
  --lh-avatar-fit: cover; /* cover | contain | fill */
  --lh-avatar-bg: rgba(255,255,255,.06);
}

.lh-wrap{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 14px;
  background: var(--lh-bg);
  font-family: var(--lh-font);
}

.lh-card{
  width: min(380px, 100%);
  background: var(--lh-card);
  border-radius: 42px;
  box-shadow: var(--lh-shadow);
  padding: 26px 18px 18px;
  position: relative;
  overflow: hidden;
}

.lh-card:before,
.lh-card:after{
  content:"";
  position:absolute;
  inset: -80px -80px auto auto;
  width: 220px;
  height: 220px;
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  transform: rotate(18deg);
  pointer-events:none;
}
.lh-card:after{
  inset: auto auto -110px -110px;
  width: 260px;
  height: 260px;
  background: rgba(255,255,255,.05);
  transform: rotate(-10deg);
}

.lh-header{
  text-align:center;
  position: relative;
  z-index: 1;
}

.lh-avatar{
  width: 92px;
  height: 92px;
  margin: 0 auto 12px;
  border-radius: 26px;
  overflow: hidden;
  border: 2px solid var(--lh-ring);
  box-shadow: 0 10px 25px rgba(0,0,0,.35);
  background: var(--lh-avatar-bg);
}

.lh-avatar img{
  width:100%;
  height:100%;
  display:block;

  /* NEW: stretch options */
  object-fit: var(--lh-avatar-fit);
  object-position: center;
}

.lh-name{
  color: var(--lh-text);
  font-weight: 800;
  font-size: var(--lh-name-size);
  letter-spacing: .2px;
  margin: 4px 0 6px;
}

.lh-bio{
  color: var(--lh-muted);
  font-size: var(--lh-bio-size);
  margin: 0 0 14px;
}

.lh-social{
  display:flex;
  gap: 14px;
  justify-content:center;
  margin-bottom: 14px;
}

.lh-ico{
  width: 42px;
  height: 42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  text-decoration:none !important;
}
.lh-ico:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
}
.lh-ico svg{
  width: 18px;
  height: 18px;
  fill: var(--lh-text);
  opacity: .92;
}

.lh-buttons{
  display:flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 2px 2px;
  position: relative;
  z-index: 1;
}

.lh-btn{
  width: 100%;
  border: 0;
  border-radius: 999px;
  padding: 14px 16px;
  background: var(--lh-button-bg);
  color: var(--lh-button-text);
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  text-align: center;
  text-decoration:none !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  display:block;
  font-size: var(--lh-btn-size);
}
.lh-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(0,0,0,.30);
}
.lh-btn:active{
  transform: translateY(0px);
  opacity: .95;
}

.lh-foot{
  margin-top: 12px;
  text-align:center;
  color: rgba(255,255,255,.55);
  font-size: 12px;
  position: relative;
  z-index: 1;
}

@media (max-width: 360px){
  .lh-card{ border-radius: 34px; }
  .lh-btn{ padding: 13px 14px; }
}