/*
Theme Name: PixelRoot Real About Page
Theme URI: https://pixelroot.org/
Author: PixelRoot
Author URI: https://pixelroot.org/
Description: Flat matte PixelRoot showcase with a real generated WordPress About Developer page and focused app cards.
Version: 2.6.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
Text Domain: pixelroot-about
*/

:root{
  --page:#1f2930;
  --page-2:#182127;
  --surface:#222d35;
  --surface-2:#26323b;
  --card:#27333c;
  --card-soft:#2a3740;
  --line:rgba(233,242,241,.10);
  --line-strong:rgba(233,242,241,.16);
  --text:#f3f6f5;
  --muted:#aebcbb;
  --muted-2:#829294;
  --teal:#37d7c8;
  --teal-soft:#9bf3ea;
  --order:#f2ad62;
  --order-2:#ffd18e;
  --ink:#1f160d;
  --radius:28px;
}

*{box-sizing:border-box}
html{
  min-height:100%;
  overflow-y:auto !important;
  scroll-behavior:smooth;
}
body{
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  overflow-y:auto !important;
  direction:rtl;
  background:linear-gradient(180deg, #253139 0%, var(--page) 46%, var(--page-2) 100%);
  color:var(--text);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}

a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

.pr-page{
  width:min(1120px, calc(100% - 34px));
  margin:0 auto;
  padding:30px 0 58px;
}

.pr-shell{
  border:1px solid var(--line);
  border-radius:42px;
  overflow:hidden;
  background:var(--surface);
}

.pr-inner{padding:26px;}

.pr-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.pr-mini-brand{
  min-width:44px;
  height:44px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:#edf1ec;
  border:1px solid rgba(255,255,255,.18);
  overflow:hidden;
}
.pr-mini-brand img{
  width:28px;
  height:28px;
  object-fit:contain;
}
.pr-order{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 19px;
  border-radius:999px;
  background:linear-gradient(135deg, var(--order), var(--order-2));
  color:var(--ink);
  font-size:14px;
  font-weight:850;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 0 0 1px rgba(242,173,98,.18), 0 0 28px rgba(242,173,98,.28);
}
.pr-order:hover{
  filter:saturate(1.06);
  box-shadow:0 0 0 1px rgba(255,209,142,.28), 0 0 34px rgba(255,209,142,.36);
}
.pr-about-link{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 17px;
  border-radius:999px;
  border:1px solid var(--line-strong);
  color:rgba(246,250,249,.88);
  background:rgba(255,255,255,.025);
  font-size:14px;
  font-weight:760;
}
.pr-about-link:hover{background:rgba(255,255,255,.045);border-color:rgba(155,243,234,.28)}

.pr-hero{
  width:min(790px, 100%);
  margin:70px auto 56px;
  text-align:center;
}
.pr-word{
  direction:ltr;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(6px, 1.18vw, 15px);
  margin:0;
  color:#f6faf9;
  line-height:1;
  font-weight:560;
  letter-spacing:0;
  font-size:clamp(39px, 7.4vw, 84px);
}
.pr-word span{
  display:inline-block;
  opacity:.97;
}
.pr-lead{
  margin:24px auto 0;
  max-width:710px;
  color:var(--muted);
  font-size:clamp(15px, 1.7vw, 18px);
  line-height:1.95;
}
.pr-hero-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:28px;
}
.pr-hero .pr-order{
  min-height:50px;
  padding:0 25px;
  font-size:15px;
}

.pr-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}
.pr-card{
  min-height:402px;
  padding:24px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:var(--card);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:center;
  overflow:hidden;
}
.pr-card:hover{
  border-color:var(--line-strong);
  background:var(--card-soft);
}

/* أيقونات التطبيقات: زوايا منحنية مثل أيقونات التطبيقات، بدون خلفية منفصلة أو ظلال */
.pr-logo-stage{
  width:136px;
  height:136px;
  min-height:136px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border-radius:32px;
  background:transparent;
  border:0;
  overflow:hidden;
}
.pr-logo-stage img,
.pr-logo-stage .wide,
.pr-logo-stage .mark,
.pr-logo-stage .fill{
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:cover;
  border-radius:32px;
  display:block;
}

.pr-card-copy{
  width:100%;
  margin:18px auto 0;
  text-align:center;
}
.pr-card-copy h2{
  margin:0;
  color:rgba(250,253,252,.96);
  font-size:18px;
  line-height:1.35;
  font-weight:820;
}

.pr-badges{
  margin:10px auto 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}
.pr-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:0 11px;
  border-radius:999px;
  background:rgba(55,215,200,.10);
  border:1px solid rgba(55,215,200,.28);
  color:var(--teal-soft);
  font-size:12px;
  font-weight:850;
  line-height:1;
}
.pr-badges strong{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:0 11px;
  border-radius:999px;
  background:rgba(242,173,98,.12);
  border:1px solid rgba(242,173,98,.26);
  color:var(--order-2);
  font-size:12px;
  font-weight:850;
  line-height:1;
}
.pr-card-copy p{
  margin:9px auto 0;
  max-width:270px;
  color:var(--muted);
  font-size:13.5px;
  line-height:1.78;
}

.pr-card-btn{
  width:min(100%, 214px);
  height:49px;
  margin-top:auto;
  border-radius:999px;
  border:1px solid rgba(55,215,200,.42);
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(245,251,250,.92);
  background:rgba(55,215,200,.065);
  font-size:15px;
  font-weight:750;
}
.pr-card-btn:hover{
  border-color:rgba(155,243,234,.70);
  background:rgba(55,215,200,.095);
}

.pr-footer{
  margin-top:34px;
  padding:18px 2px 0;
  display:flex;
  justify-content:center;
}
.pr-footer img{
  width:31px;
  height:31px;
  object-fit:contain;
  opacity:.64;
}

.screen-reader-text{
  border:0;
  clip:rect(1px,1px,1px,1px);
  clip-path:inset(50%);
  height:1px;
  margin:-1px;
  overflow:hidden;
  padding:0;
  position:absolute;
  width:1px;
  word-wrap:normal!important;
}

@media (max-width: 940px){
  .pr-page{width:min(740px, calc(100% - 26px)); padding-top:22px;}
  .pr-shell{border-radius:34px;}
  .pr-inner{padding:22px;}
  .pr-hero{margin:58px auto 46px;}
  .pr-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .pr-card{min-height:390px; padding:20px; border-radius:26px;}
  .pr-logo-stage{width:128px;height:128px;min-height:128px;border-radius:30px;}
}

@media (max-width: 620px){
  .pr-page{width:min(430px, calc(100% - 20px)); padding:14px 0 32px;}
  .pr-shell{border-radius:26px;}
  .pr-inner{padding:16px;}
  .pr-mini-brand{width:40px;height:40px;border-radius:15px;}
  .pr-mini-brand img{width:25px;height:25px;}
  .pr-order,.pr-about-link{min-height:41px;padding:0 15px;font-size:13px;}
  .pr-hero{margin:48px auto 38px;}
  .pr-word{gap:clamp(4px, 1vw, 9px);}
  .pr-lead{font-size:14px;line-height:1.85;margin-top:20px;}
  .pr-hero .pr-order{min-height:47px;font-size:14px;}
  .pr-grid{grid-template-columns:1fr; gap:12px;}
  .pr-card{min-height:368px; padding:18px; border-radius:24px;}
  .pr-logo-stage{width:120px;height:120px;min-height:120px;border-radius:28px;}
    .pr-logo-stage img,.pr-logo-stage .wide,.pr-logo-stage .mark,.pr-logo-stage .fill{border-radius:28px;}
  .pr-card-copy h2{font-size:17px;}
  .pr-card-copy p{font-size:13px;line-height:1.75;}
  .pr-card-btn{height:48px;margin-top:auto;}
}


/* Developer page */
.pr-about-page .pr-inner{
  min-height:calc(100vh - 96px);
  display:flex;
  flex-direction:column;
}
.pr-about-wrap{
  width:min(700px, 100%);
  margin:74px auto 34px;
}
.pr-business-card{
  border:1px solid var(--line);
  background:var(--card);
  border-radius:34px;
  padding:42px 34px 34px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.pr-avatar{
  width:106px;
  height:106px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#edf1ec;
  border:1px solid rgba(255,255,255,.20);
  overflow:hidden;
  margin-top:-2px;
}
.pr-avatar img{
  width:62px;
  height:62px;
  object-fit:contain;
}
.pr-about-kicker{
  margin:22px 0 12px;
  color:var(--teal-soft);
  font-size:12px;
  font-weight:850;
  letter-spacing:.16em;
  text-transform:uppercase;
  direction:ltr;
}
.pr-about-title{
  margin:0;
  color:var(--text);
  font-size:clamp(30px, 4.5vw, 48px);
  line-height:1.16;
  font-weight:860;
}
.pr-about-role{
  margin:14px auto 0;
  max-width:560px;
  color:var(--muted);
  font-size:16px;
  line-height:1.9;
}
.pr-about-bio{
  margin-top:24px;
  max-width:590px;
}
.pr-about-bio p{
  margin:0;
  color:var(--muted);
  font-size:15.5px;
  line-height:2.05;
}
.pr-about-actions{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:28px;
}
.pr-back-link{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 18px;
  border-radius:999px;
  border:1px solid var(--line-strong);
  color:rgba(246,250,249,.88);
  background:rgba(255,255,255,.025);
  font-size:14px;
  font-weight:760;
}
.pr-back-link:hover{background:rgba(255,255,255,.045)}

@media (max-width:620px){
  .pr-about-wrap{margin:50px auto 22px;}
  .pr-business-card{padding:34px 22px 26px;border-radius:28px;}
  .pr-avatar{width:92px;height:92px;}
  .pr-avatar img{width:54px;height:54px;}
  .pr-about-role{font-size:14.5px;line-height:1.9;}
  .pr-about-bio p{font-size:14px;line-height:1.95;}
}