/*
Theme Name: Aashiana Furniture & Interior
Theme URI: https://kalamkaar.com/
Author: Aashiana Furniture & Interior
Author URI: https://wa.me/923009298962
Description: A one-page WordPress theme for Aashiana Furniture & Interior, a Karachi-based furniture and interior design studio. Editable via the Customizer (contact info, hero, about text) and the Projects / Videos post types (gallery pieces, "Browse by Space" circles, YouTube shorts).
Version: 1.0.0
Requires at least: 6.0
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: aashiana
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,340..600&family=Manrope:wght@400;500;600;700&family=Noto+Nastaliq+Urdu:wght@500;700&display=swap');

:root{
  --ink:#1e1a15;
  --ink-2:#2a241d;
  --walnut:#6b3f26;
  --walnut-light:#8a5636;
  --brass:#bd8b45;
  --brass-light:#d7ae74;
  --sage:#5f7a56;
  --cream:#f4ece0;
  --paper:#fbf8f2;
  --line: rgba(30,26,21,0.12);
  --line-dark: rgba(244,236,224,0.16);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Manrope', sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{
  font-family:'Fraunces', serif;
  font-weight:500;
  margin:0;
  color:var(--ink);
  letter-spacing:-0.01em;
}
.urdu{
  font-family:'Noto Nastaliq Urdu', serif;
  direction:rtl;
  text-align:right;
  line-height:2.1;
}
.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 32px;
}
@media (max-width:640px){ .wrap{padding:0 20px;} }

/* ---------- ANNOUNCEMENT BAR ---------- */
.announce{
  background:var(--walnut); color:var(--cream);
  text-align:center; font-size:0.84rem; font-weight:600;
  padding:10px 16px;
}
.announce a{ text-decoration:underline; text-underline-offset:3px; color:var(--paper); }
.announce a:hover{ color:var(--brass-light); }

/* ---------- NAV ---------- */
header.site-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(30,26,21,0.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line-dark);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:14px 32px;
  max-width:1180px; margin:0 auto;
}
.brand{display:flex; align-items:center; gap:12px;}
.brand img{width:40px; height:40px; border-radius:8px; object-fit:cover;}
.brand span{
  font-family:'Fraunces', serif; font-size:1.15rem; color:var(--cream); letter-spacing:0.01em;
}
.nav-links{ display:flex; gap:28px; flex:1; justify-content:center; list-style:none; margin:0; padding:0; }
.nav-links li{ display:flex; }
.nav-links a{ color:rgba(244,236,224,0.75); font-size:0.92rem; font-weight:500; white-space:nowrap; }
.nav-links a:hover{ color:var(--brass-light); }
.nav-cta{
  display:flex; align-items:center; gap:18px;
}
.nav-phone{
  color:var(--brass-light); font-weight:600; font-size:0.92rem; white-space:nowrap;
}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 22px;
  border-radius:3px;
  font-weight:600; font-size:0.92rem;
  border:1px solid transparent;
  cursor:pointer;
  white-space:nowrap;
}
.btn-brass{ background:var(--brass); color:var(--ink); }
.btn-brass:hover{ background:var(--brass-light); color:var(--ink); }
.btn-line{ border-color:var(--line-dark); color:var(--cream); }
.btn-line:hover{ border-color:var(--brass-light); color:var(--brass-light); }
.btn-walnut-line{ border-color:rgba(255,255,255,0.55); color:var(--paper); }
.btn-walnut-line:hover{ border-color:var(--paper); background:rgba(255,255,255,0.08); }
@media (max-width:980px){
  .nav-links{display:none;}
}
@media (max-width:720px){
  .nav-phone{display:none;}
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:86vh;
  display:flex; align-items:flex-end;
  background:#000;
  overflow:hidden;
}
.hero img.bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%;
  opacity:0.62;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,17,13,0.55) 0%, rgba(20,17,13,0.35) 40%, rgba(15,13,10,0.92) 100%);
}
.hero-content{
  position:relative; z-index:2;
  padding:64px 32px 56px;
  max-width:1180px; margin:0 auto; width:100%;
}
.hero-eyebrow-mark{
  width:46px; height:2px; background:var(--brass); margin-bottom:22px;
}
.hero h1{
  color:var(--paper);
  font-size:clamp(2.4rem, 5.6vw, 4.4rem);
  line-height:1.04;
  max-width:14ch;
}
.hero h1 em{
  font-style:italic; color:var(--brass-light);
}
.hero-sub{
  color:rgba(244,236,224,0.82);
  font-size:1.05rem;
  max-width:44ch;
  margin-top:22px;
}
.hero-actions{
  display:flex; flex-wrap:wrap; gap:14px; margin-top:34px;
}

.urdu-band{
  position:relative; z-index:2;
  border-top:1px solid var(--line-dark);
  padding:26px 32px 30px;
  max-width:1180px; margin:0 auto;
}
.urdu-band p.urdu{
  color:var(--brass-light);
  font-size:1.35rem;
  max-width:640px;
  margin-left:auto;
}
.urdu-band p.translit{
  color:rgba(244,236,224,0.6);
  font-size:0.88rem;
  max-width:520px;
  margin-left:auto;
  margin-top:10px;
  text-align:right;
  font-style:italic;
}
@media (max-width:720px){
  .urdu-band p.urdu, .urdu-band p.translit{ margin-left:0; text-align:right; max-width:100%;}
}

/* ---------- SECTION HEADS ---------- */
.section{ padding:88px 0; }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; margin-bottom:40px; flex-wrap:wrap;
}
.section-head h2{
  font-size:clamp(1.9rem, 3.4vw, 2.6rem);
  max-width:16ch;
}
.section-head p{
  max-width:36ch; color:#5a4f42; font-size:0.98rem; margin:0;
}

/* ---------- SHOP BY SPACE ---------- */
.spaces{ padding:70px 0 20px; background:var(--paper); }
.spaces-row{
  display:flex; gap:28px; overflow-x:auto; padding:4px 4px 14px;
  scrollbar-width:none;
}
.spaces-row::-webkit-scrollbar{ display:none; }
.space-item{ flex:0 0 auto; width:126px; text-align:center; }
.space-item .circle{
  width:110px; height:110px; border-radius:50%; overflow:hidden; margin:0 auto 12px;
  border:1px solid var(--line); background:#e4dbcb;
}
.space-item img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.space-item:hover img{ transform:scale(1.08); }
.space-item span{ font-size:0.85rem; font-weight:600; color:var(--ink); }

/* ---------- PHILOSOPHY ---------- */
.philosophy{ padding:66px 0 10px; text-align:center; }
.philosophy h2{ font-size:clamp(1.8rem,3.4vw,2.5rem); max-width:22ch; margin:0 auto 18px; }
.philosophy h2 em{ font-style:italic; color:var(--walnut); }
.philosophy p{ max-width:58ch; margin:0 auto; color:#5a4f42; font-size:1.02rem; }

/* ---------- FEATURED PIECES ---------- */
.pieces{ padding:56px 0 92px; }
.pieces-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.piece-card{
  border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--paper);
  transition:box-shadow .3s ease, transform .3s ease;
}
.piece-card:hover{ box-shadow:0 16px 34px rgba(30,26,21,0.12); transform:translateY(-4px); }
.piece-media{ aspect-ratio:4/3; overflow:hidden; background:#e4dbcb; }
.piece-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.piece-card:hover .piece-media img{ transform:scale(1.05); }
.piece-body{ padding:20px 22px 24px; }
.piece-body h3{ font-size:1.15rem; margin-bottom:6px; }
.piece-body p{ font-size:0.89rem; color:#5a4f42; margin:0 0 16px; }
.piece-body a.enquire{
  font-size:0.85rem; font-weight:700; color:var(--walnut);
  display:inline-flex; align-items:center; gap:6px;
}
.piece-body a.enquire:hover{ color:var(--brass); }
@media (max-width:900px){ .pieces-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .pieces-grid{ grid-template-columns:1fr;} }

/* ---------- SERVICES STRIP ---------- */
.services{
  background:var(--ink);
  color:var(--cream);
  padding:64px 0 68px;
  border-bottom:1px solid var(--line-dark);
}
.services .wrap{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
}
.service{
  padding:0 34px;
  border-left:1px solid var(--line-dark);
}
.service:first-child{border-left:none; padding-left:0;}
.service .mark{
  font-family:'Fraunces', serif; font-size:0.85rem; color:var(--brass-light);
  letter-spacing:0.04em; margin-bottom:14px; display:block;
}
.service h3{ color:var(--cream); font-size:1.35rem; margin-bottom:10px; }
.service p{ color:rgba(244,236,224,0.66); font-size:0.94rem; margin:0;}
@media (max-width:820px){
  .services .wrap{ grid-template-columns:1fr; gap:34px; }
  .service{ border-left:none; padding:0; border-top:1px solid var(--line-dark); padding-top:28px; }
  .service:first-child{ border-top:none; padding-top:0; }
}

/* ---------- ABOUT / WHY ---------- */
.about{
  background:var(--cream);
}
.about .grid{
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:center;
}
.about-visual{
  position:relative;
}
.about-visual img{
  border-radius:4px;
  width:100%;
}
.about-visual .frame{
  position:absolute; inset:18px -18px -18px 18px;
  border:1px solid var(--brass); border-radius:4px; z-index:-1;
}
.about-copy h2{ font-size:clamp(1.9rem,3.2vw,2.5rem); margin-bottom:22px; max-width:14ch;}
.about-copy p{ color:#4a4033; margin-bottom:26px; max-width:52ch; }
.why-list{ list-style:none; margin:0; padding:0; display:grid; gap:18px; }
.why-list li{
  display:flex; gap:14px; align-items:flex-start;
  padding-bottom:18px; border-bottom:1px solid var(--line);
}
.why-list li:last-child{ border-bottom:none; padding-bottom:0; }
.why-list .num{
  font-family:'Fraunces', serif; color:var(--brass); font-size:1rem; min-width:26px;
}
.why-list strong{ display:block; font-size:1.02rem; margin-bottom:4px; }
.why-list span{ color:#5a4f42; font-size:0.92rem; }

@media (max-width:900px){
  .about .grid{ grid-template-columns:1fr; }
  .about-visual{ order:2; }
  .about-visual .frame{ display:none; }
}

/* ---------- CONSULTATION BANNER ---------- */
.consult-banner{
  background:var(--walnut); color:var(--paper);
  padding:74px 0; text-align:center;
}
.consult-banner h2{ color:var(--paper); font-size:clamp(1.9rem,3.6vw,2.6rem); margin-bottom:14px; max-width:20ch; margin-left:auto; margin-right:auto; }
.consult-banner p{ max-width:52ch; margin:0 auto 30px; color:rgba(244,236,224,0.86); }
.consult-banner .hero-actions{ justify-content:center; margin-top:0; }

/* ---------- TRUST STRIP ---------- */
.trust{ padding:58px 0; border-bottom:1px solid var(--line); }
.trust .wrap{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; text-align:center; }
.trust-item svg{ width:28px; height:28px; stroke:var(--walnut); margin-bottom:14px; }
.trust-item h4{ font-family:'Fraunces', serif; font-weight:500; font-size:1.05rem; margin-bottom:6px; }
.trust-item p{ font-size:0.87rem; color:#5a4f42; margin:0; }
@media (max-width:720px){ .trust .wrap{ grid-template-columns:1fr; gap:34px; } }

/* ---------- VIDEO ---------- */
.video-section{
  background:var(--ink); color:var(--cream);
}
.video-section .section-head p{ color:rgba(244,236,224,0.66); }
.video-section .section-head h2{ color:var(--cream); }
.videos{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}
.video-card{
  position:relative; display:block; border-radius:4px; overflow:hidden;
  aspect-ratio:9/16; background:#000;
  border:1px solid var(--line-dark);
}
.video-card img{
  width:100%; height:100%; object-fit:cover; opacity:0.82;
  transition:opacity .3s ease, transform .5s ease;
}
.video-card:hover img{ opacity:1; transform:scale(1.04); }
.video-card .play-badge{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
.video-card .play-badge span{
  width:56px; height:56px; border-radius:50%;
  background:rgba(20,17,13,0.55);
  border:1.5px solid rgba(244,236,224,0.85);
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(2px);
  transition:transform .25s ease, background .25s ease;
}
.video-card:hover .play-badge span{ transform:scale(1.08); background:var(--brass); border-color:var(--brass); }
.video-card .play-badge svg{ width:18px; height:18px; fill:var(--paper); margin-left:3px; }
.video-card .yt-tag{
  position:absolute; left:10px; bottom:10px;
  font-size:0.72rem; font-weight:700; letter-spacing:0.03em;
  color:var(--paper); background:rgba(20,17,13,0.55);
  padding:4px 8px; border-radius:3px;
}
@media (max-width:820px){
  .videos{ grid-template-columns:repeat(2,1fr); }
}

/* ---------- CONTACT ---------- */
.contact{
  background:var(--paper);
}
.contact .grid{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:0;
  border:1px solid var(--line); border-radius:6px; overflow:hidden;
}
.contact-copy{
  background:var(--walnut);
  color:var(--cream);
  padding:56px 48px;
}
.contact-copy h2{ color:var(--paper); font-size:clamp(1.8rem,3vw,2.3rem); margin-bottom:16px; max-width:14ch;}
.contact-copy p{ color:rgba(244,236,224,0.82); max-width:40ch; margin-bottom:0;}
.contact-details{
  background:var(--paper);
  padding:56px 48px;
  display:flex; flex-direction:column; gap:26px;
}
.detail-row{ display:flex; gap:16px; align-items:flex-start; }
.detail-row .icon{
  width:38px; height:38px; border-radius:50%;
  background:var(--cream); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.detail-row .icon svg{ width:17px; height:17px; stroke:var(--walnut); }
.detail-row .label{ font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em; color:#8a7c68; margin-bottom:4px; }
.detail-row .value{ font-weight:600; font-size:1.01rem; }
.detail-row .value a:hover{ color:var(--walnut); }
.detail-row .value.small{ font-weight:500; font-size:0.94rem; color:#4a4033; }

@media (max-width:820px){
  .contact .grid{ grid-template-columns:1fr; }
  .contact-copy, .contact-details{ padding:40px 28px; }
}

/* ---------- WHATSAPP FLOAT ---------- */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:80;
  width:56px; height:56px; border-radius:50%;
  background:#3d5a3a;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(0,0,0,0.28);
  border:1px solid rgba(255,255,255,0.15);
}
.wa-float svg{ width:26px; height:26px; fill:#f4ece0; }

/* ---------- FOOTER ---------- */
footer{
  background:var(--ink); color:rgba(244,236,224,0.55);
  padding:64px 0 26px; border-top:1px solid var(--line-dark);
}
.footer-grid{
  display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:44px;
  padding-bottom:40px; border-bottom:1px solid var(--line-dark); margin-bottom:24px;
}
.footer-brand p{ color:rgba(244,236,224,0.6); font-size:0.9rem; max-width:34ch; margin:14px 0 22px; }
.footer-col h5{
  color:var(--cream); font-family:'Fraunces', serif; font-weight:500; font-size:1rem; margin-bottom:16px;
}
.footer-col ul{ list-style:none; margin:0; padding:0; }
.footer-col a, .footer-col p{
  display:block; color:rgba(244,236,224,0.6); font-size:0.9rem; margin-bottom:11px;
}
.footer-col a:hover{ color:var(--brass-light); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
}
.footer-bottom small{ font-size:0.82rem; }
@media (max-width:820px){
  .footer-grid{ grid-template-columns:1fr; gap:30px; }
}

/* ---------- WP CORE HELPERS ---------- */
.screen-reader-text{
  position:absolute !important;
  width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px);
  white-space:nowrap;
}
.alignwide{max-width:1180px;margin-left:auto;margin-right:auto;}
.alignfull{max-width:none;}

::selection{ background:var(--brass-light); color:var(--ink); }