/*
Theme Name: Hamza Mansoor Portfolio
Theme URI: https://hamzamansoor.dev
Author: Hamza Mansoor
Author URI: https://hamzamansoor.dev
Description: A one-page dark portfolio theme for a WordPress & Shopify developer. Editable menu, logo and contact details via the Customizer.
Version: 1.0
Requires at least: 5.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hamza-portfolio
*/

/* ===== Tokens ===== */
:root{
  --bg:#12100E;
  --surface:#1B1815;
  --surface-alt:#221E19;
  --line:#332D26;
  --text:#F3EFE7;
  --muted:#A99C8C;
  --accent:#00FFC2;
  --accent-2:#00FFC2;
  --serif:'Fraunces', serif;
  --sans:'Inter', sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}

.wrap{max-width:1140px; margin:0 auto; padding:0 24px;}
.center{text-align:center;}

h1,h2,h3{font-family:var(--serif); font-weight:600; line-height:1.15; letter-spacing:-0.01em;}
h1{font-size:clamp(2.4rem, 5vw, 4rem);}
h2{font-size:clamp(1.8rem, 3.2vw, 2.6rem); margin-bottom:16px;}
h3{font-size:1.25rem; margin-bottom:10px;}

.tag{
  font-family:var(--serif);
  font-style:italic;
  color:var(--accent);
  font-size:0.95rem;
  margin-bottom:14px;
  letter-spacing:0.01em;
}

.lead{color:var(--muted); font-size:1.05rem; max-width:60ch;}
/*p{max-width:65ch;}*/
.center p{margin-left:auto; margin-right:auto;}

/* ===== Buttons ===== */
.btn{
  display:inline-block;
  padding:13px 26px;
  border-radius:2px;
  font-weight:600;
  font-size:0.95rem;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-solid{background:var(--accent); color:#171310;}
.btn-solid:hover{background:#e0ac4f;}
.btn-ghost{border:1px solid var(--line); color:var(--text);}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent);}
.btn-outline{border:1px solid var(--accent); color:var(--accent);}
.btn-outline:hover{background:var(--accent); color:#171310;}

/* ===== Header ===== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(18,16,14,0.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px; gap:24px;
}
.logo img{height:35px; filter:invert(1) brightness(1.6);}
.nav{display:flex; gap:30px; font-size:0.95rem;}
.nav a:hover{color:var(--accent);}
.nav-toggle{display:none; background:none; border:0; color:var(--text); font-size:1.4rem;}

/* ===== Hero ===== */
.hero{padding:90px 0 70px;}
.hero-inner{display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; align-items:center;}
.hero-lede{color:var(--muted); margin:22px 0 34px; font-size:1.08rem;}
.hero-cta{display:flex; gap:16px; flex-wrap:wrap;}
.hero-media{position:relative;}
.hero-frame{
  border:1px solid var(--accent);
  padding:14px;
  background:var(--surface);
}
.hero-frame img{filter:grayscale(15%);}
.hero-chip{
  position:absolute; left:-30px; bottom:-30px;
  background:var(--accent); color:#171310;
  padding:20px 24px; display:flex; flex-direction:column; gap:4px;
  max-width:180px;
}
.chip-num{font-family:var(--serif); font-size:2rem; font-weight:700; line-height:1;}
.chip-label{font-size:0.82rem; font-weight:600; line-height:1.3;}

/* ===== About ===== */
.about{padding:100px 0; border-top:1px solid var(--line);}
.about-inner{display:grid; grid-template-columns:0.8fr 1.2fr; gap:60px;}
.approach{
  display:flex; gap:20px; margin-top:30px;
  border-left:2px solid var(--accent);
  padding-left:24px;
}
.approach-mark{font-family:var(--serif); font-size:2.6rem; color:var(--accent); line-height:0.6;}
.approach p{color:var(--muted);}

/* ===== CV strip ===== */
.cv-strip{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:60px 0;}
.cv-inner{display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;}
.cv-copy{color:var(--muted); max-width:32ch;}

/* ===== Services ===== */
.services{padding:110px 0;}
.service-grid{
  margin-top:50px;
  display:grid; grid-template-columns:repeat(3, 1fr);
  border-top:1px solid var(--line); border-left:1px solid var(--line);
}
.service{
  padding:36px 32px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.s-num{font-family:var(--serif); color:var(--accent); font-size:0.95rem; display:block; margin-bottom:14px;}
.service p{color:var(--muted); font-size:0.95rem;}

/* ===== Highlights ===== */
.highlights{padding:100px 0; background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.stat-row{
  margin-top:50px; display:grid; grid-template-columns:repeat(4,1fr);
}
.stat{text-align:center; border-left:1px solid var(--line); padding:0 10px;}
.stat:first-child{border-left:none;}
.stat-num{display:block; font-family:var(--serif); font-size:clamp(2.2rem,4vw,3rem); color:var(--accent); font-weight:700;}
.stat-label{color:var(--muted); font-size:0.9rem;}

/* ===== Projects ===== */
.work{padding:110px 0;}
.project-grid{
  margin-top:50px;
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:18px;
}
.project{
  position:relative; overflow:hidden;
  min-height:260px; display:flex; align-items:flex-end;
  border:1px solid var(--line);
}
.project-feature{grid-column:span 3; min-height:340px;}
.tile-b{grid-column:span 3;}
.tile-c{grid-column:span 3;}
.tile-d{grid-column:span 3;}
.tile-a{background:linear-gradient(135deg, #2a2216, var(--bg));}
.tile-b{background:linear-gradient(135deg, #1c2724, var(--bg));}
.tile-c{background:linear-gradient(135deg, #241d16, var(--bg));}
.tile-d{background:linear-gradient(135deg, #1a1c27, var(--bg));}
.project-body{padding:28px; position:relative; z-index:2;}
.project-tag{font-size:0.78rem; color:var(--accent); font-weight:600;}
.project h3{margin:10px 0 8px;}
.project p{color:var(--muted); font-size:0.92rem; max-width:38ch;}
.project-link{display:inline-block; margin-top:14px; font-size:0.88rem; font-weight:600; color:var(--text);}
.project:hover .project-link{color:var(--accent);}

/* ===== Testimonials ===== */
.testimonials{padding:110px 0; background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.quote-grid{margin-top:50px; display:grid; grid-template-columns:repeat(3,1fr); gap:40px;}
blockquote{border-top:2px solid var(--accent); padding-top:20px;}
.quote-mark{font-family:var(--serif); color:var(--accent); font-size:2.4rem; line-height:0.4; display:block; margin-bottom:8px;}
blockquote p{color:var(--muted); font-size:0.96rem;}
blockquote footer{margin-top:18px; display:flex; flex-direction:column;}
blockquote footer strong{font-family:var(--serif);}
blockquote footer span{color:var(--muted); font-size:0.85rem;}

/* ===== Pricing ===== */
.pricing{padding:110px 0;}
.price-grid{margin-top:50px; display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--line);}
.price-card{padding:40px 32px; border-right:1px solid var(--line); position:relative;}
.price-card:last-child{border-right:none;}
.price-featured{background:var(--surface); border-left:3px solid var(--accent); border-right:3px solid var(--accent);}
.price-badge{position:absolute; top:20px; right:20px; font-size:0.72rem; color:var(--accent); font-weight:700; letter-spacing:0.04em;}
.price{font-family:var(--serif); font-size:2.4rem; color:var(--accent); margin:10px 0 26px;}
.price-card ul{margin-bottom:30px;}
.price-card li{
  padding:9px 0; border-bottom:1px solid var(--line);
  color:var(--muted); font-size:0.92rem; position:relative; padding-left:20px;
}
.price-card li::before{content:"+"; position:absolute; left:0; color:var(--accent-2); font-weight:700;}
.price-card li.no{color:#6b6154;}
.price-card li.no::before{content:"–"; color:#6b6154;}

/* ===== FAQ ===== */
.faq{padding:110px 0; background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.faq-list{max-width:760px; margin:50px auto 0;}
details{border-bottom:1px solid var(--line); padding:18px 0;}
summary{cursor:pointer; font-weight:600; list-style:none; display:flex; justify-content:space-between;}
summary::after{content:"+"; color:var(--accent); font-size:1.2rem;}
details[open] summary::after{content:"–";}
details p{color:var(--muted); margin-top:12px; font-size:0.94rem;}

/* ===== Contact ===== */
.contact{padding:110px 0;}
.contact-inner{display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px;}
.contact-row{
  display:flex; flex-direction:column; gap:2px;
  padding:18px 0; border-bottom:1px solid var(--line);
}
.c-label{color:var(--accent); font-size:0.8rem; font-weight:600;}
.socials{display:flex; gap:12px; margin-top:24px;}
.socials a{
  width:38px; height:38px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:0.85rem;
}
.socials a:hover{border-color:var(--accent); color:var(--accent);}
.contact-form{display:grid; gap:16px;}
.contact-form input, .contact-form select, .contact-form textarea{
  background:var(--surface); border:1px solid var(--line); color:var(--text);
  padding:14px 16px; font-family:var(--sans); font-size:0.95rem;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{
  outline:none; border-color:var(--accent);
}
.contact-form button{justify-self:start;}

/* ===== Footer ===== */
.site-footer{border-top:1px solid var(--line); padding:50px 0 30px;}
.site-footer .wrap{display:flex; flex-direction:column; align-items:center; gap:20px; text-align:center;}
.footer-logo{height:50px; filter:invert(1) brightness(1.6);}
.footer-nav{display:flex; gap:24px; flex-wrap:wrap; justify-content:center; font-size:0.9rem;}
.footer-meta{display:flex; gap:24px; color:var(--muted); font-size:0.88rem;}
.copyright{color:#6b6154; font-size:0.82rem; margin-top:10px;}

/* ===== Responsive ===== */
@media (max-width:900px){
  .nav{display:none;}
  .hero-inner, .about-inner, .contact-inner{grid-template-columns:1fr;}
  .service-grid{grid-template-columns:repeat(2,1fr);}
  .stat-row{grid-template-columns:repeat(2,1fr); gap:24px;}
  .stat{border-left:none; padding:0;}
  .project-grid{grid-template-columns:1fr;}
  .project-feature, .tile-b, .tile-c, .tile-d{grid-column:span 1;}
  .quote-grid{grid-template-columns:1fr; gap:36px;}
  .price-grid{grid-template-columns:1fr;}
  .price-card{border-right:none; border-bottom:1px solid var(--line);}
  .price-featured{border-left:1px solid var(--accent); border-right:1px solid var(--accent);}
  .cv-inner{flex-direction:column; align-items:flex-start;}
  .hero-chip{position:static; margin-top:20px; max-width:none;}
}
@media (max-width:560px){
  .service-grid{grid-template-columns:1fr;}
}

/* ===== Form notices ===== */
.form-notice{
  grid-column:1/-1;
  padding:14px 18px;
  margin-bottom:16px;
  border:1px solid var(--line);
  font-size:0.92rem;
}
.form-success{border-color:var(--accent-2); color:var(--accent-2);}
.form-error{border-color:#b5654f; color:#d98b76;}

/* ===== Explore grid (homepage page links) ===== */
.explore-grid{
  margin-top:50px;
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line); border-left:1px solid var(--line);
}
.explore-card{
  padding:36px 30px;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  display:block; transition:background .2s ease;
}
.explore-card:hover{background:var(--surface);}
.explore-card .s-num{display:block; margin-bottom:14px;}
.explore-card p{color:var(--muted); font-size:0.92rem; margin-bottom:16px;}
.explore-card span.go{color:var(--accent); font-size:0.88rem; font-weight:600;}

/* ===== Page hero (inner pages) ===== */
.page-hero{padding:80px 0 50px; border-bottom:1px solid var(--line);}
.page-hero h1{font-size:clamp(2rem,4vw,2.8rem);}
.page-hero p{color:var(--muted); max-width:60ch; margin-top:14px;}

@media (max-width:900px){
  .explore-grid{grid-template-columns:repeat(2,1fr);}
  .footer-meta{
      display: grid;
  }
}

/* ===== About page image column ===== */
.about-head img{width:100%; border:1px solid var(--line); object-fit:cover;}