/*
Theme Name: Storefront Child
Template: storefront
Version: 2.0.0
Description: Beautiful responsive Webphone child theme.
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800;900&display=swap');

:root{
  --wp-blue:#1266ff;
  --wp-green:#00d084;
  --wp-pink:#ff3ea5;
  --wp-red:#ff4b5c;
  --wp-dark:#061427;
  --wp-light:#f7fbff;
  --wp-glass:rgba(255,255,255,.78);
  --wp-shadow:0 24px 70px rgba(18,102,255,.22);
}

*{box-sizing:border-box}

body{
  font-family:"Inter",system-ui,sans-serif;
  background:
    radial-gradient(circle at top left, rgba(18,102,255,.22), transparent 35%),
    radial-gradient(circle at top right, rgba(255,62,165,.20), transparent 35%),
    linear-gradient(135deg,#f7fbff,#eef8ff 45%,#fff5fb);
  color:var(--wp-dark);
  overflow-x:hidden;
}

a{color:var(--wp-blue);transition:.25s ease}
a:hover{color:var(--wp-pink)}

.site-header{
  background:rgba(255,255,255,.82)!important;
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(18,102,255,.12);
  box-shadow:0 10px 35px rgba(0,0,0,.05);
}

.site-branding .site-title a{
  font-size:clamp(1.5rem,4vw,3rem);
  font-weight:900;
  letter-spacing:-.06em;
  background:linear-gradient(90deg,var(--wp-blue),var(--wp-green),var(--wp-pink),var(--wp-red));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent!important;
}

.main-navigation ul.menu > li > a{
  font-weight:800;
  border-radius:999px;
  padding:.8rem 1rem;
}

.main-navigation ul.menu > li > a:hover{
  background:linear-gradient(135deg,var(--wp-blue),var(--wp-pink));
  color:white!important;
  transform:translateY(-2px);
}

button,
.button,
input[type="submit"],
.wp-block-button__link{
  border:0!important;
  border-radius:999px!important;
  padding:1rem 1.5rem!important;
  font-weight:900!important;
  color:#fff!important;
  background:linear-gradient(135deg,var(--wp-blue),var(--wp-green),var(--wp-pink))!important;
  box-shadow:var(--wp-shadow)!important;
  transition:.25s ease!important;
}

button:hover,
.button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover{
  transform:translateY(-4px) scale(1.03);
  filter:saturate(1.25);
}

.webphone-hero{
  position:relative;
  padding:clamp(4rem,9vw,8rem) 1.25rem;
  border-radius:0 0 48px 48px;
  overflow:hidden;
  background:
    linear-gradient(135deg,rgba(18,102,255,.95),rgba(0,208,132,.88),rgba(255,62,165,.9));
  color:#fff;
  box-shadow:var(--wp-shadow);
}

.webphone-hero h1{
  font-size:clamp(2.8rem,9vw,7.5rem);
  line-height:.92;
  letter-spacing:-.08em;
  font-weight:900;
  max-width:1100px;
}

.webphone-hero p{
  font-size:clamp(1.1rem,2.3vw,1.7rem);
  max-width:760px;
  font-weight:600;
  opacity:.94;
}

.webphone-card{
  background:var(--wp-glass);
  backdrop-filter:blur(22px);
  border:1px solid rgba(255,255,255,.65);
  border-radius:32px;
  padding:clamp(1.25rem,3vw,2.5rem);
  box-shadow:var(--wp-shadow);
  transition:.3s ease;
}

.webphone-card:hover{
  transform:translateY(-8px);
}

.webphone-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.25rem;
}

.webphone-gradient-text{
  background:linear-gradient(90deg,var(--wp-blue),var(--wp-green),var(--wp-pink),var(--wp-red));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-weight:900;
}

input,
select,
textarea{
  width:100%;
  border:2px solid rgba(18,102,255,.16)!important;
  border-radius:22px!important;
  padding:1rem 1.1rem!important;
  background:rgba(255,255,255,.86)!important;
  box-shadow:0 12px 35px rgba(18,102,255,.08);
  transition:.25s ease;
}

input:focus,
select:focus,
textarea:focus{
  outline:none!important;
  border-color:var(--wp-pink)!important;
  box-shadow:0 0 0 5px rgba(255,62,165,.14);
}

.webphone-float{
  animation:webphoneFloat 5s ease-in-out infinite;
}

@keyframes webphoneFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-16px)}
}

@keyframes webphoneGlow{
  0%,100%{filter:hue-rotate(0deg)}
  50%{filter:hue-rotate(60deg)}
}

.webphone-orb{
  position:absolute;
  width:260px;
  height:260px;
  border-radius:50%;
  background:radial-gradient(circle,#fff,rgba(255,255,255,.05));
  opacity:.22;
  animation:webphoneFloat 7s ease-in-out infinite, webphoneGlow 6s linear infinite;
}

.webphone-orb.one{top:8%;right:8%}
.webphone-orb.two{bottom:10%;left:7%;width:180px;height:180px}

@media (max-width:768px){
  .webphone-grid{
    grid-template-columns:1fr;
  }

  .main-navigation ul.menu{
    display:none;
  }

  .menu-toggle{
    display:inline-flex!important;
    border-radius:18px!important;
  }

  .main-navigation.toggled ul.menu{
    display:block;
    background:#fff;
    border-radius:24px;
    padding:1rem;
    box-shadow:var(--wp-shadow);
  }
}

@media (min-width:769px){
  .menu-toggle{
    display:none!important;
  }
}


.webphone-top-share{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:.75rem;
    flex-wrap:wrap;
}

.webphone-top-share a{
    width:38px;
    height:38px;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#fff!important;
    background:rgba(255,255,255,.18);
    border:1px solid rgba(255,255,255,.35);
    backdrop-filter:blur(10px);
    text-decoration:none;
    font-size:1rem;
    transition:.25s ease;
}

.webphone-top-share a:hover{
    transform:translateY(-4px) scale(1.08);
    background:#fff;
    color:#1266ff!important;
}