/*
Theme Name: Sali Sukaria Portfolio
Theme URI: https://sugariadesign.com
Author: Sali Sukaria
Author URI: https://sugariadesign.com
Description: A fast, minimal dark-purple portfolio theme spanning HR & hospitality, architecture, and photography/content creation.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
License: Unlicense
Text Domain: sali-portfolio
*/

/* ===========================================================
   DESIGN TOKENS
   =========================================================== */
:root{
  /* color */
  --bg:        #241F35;   /* lighter plum-grey — page background */
  --panel:     #2D2740;   /* raised panel / card background */
  --panel-2:   #3A3252;   /* secondary panel, hovers */
  --accent:    #7C5DA3;   /* primary purple */
  --accent-2:  #B9A2D6;   /* light lavender — links, highlights */
  --grey:      #A29DB0;   /* warm grey — secondary text */
  --grey-dim:  #7A7488;   /* dimmer grey — captions, meta */
  --ink:       #EDEAF2;   /* off-white — headings on dark */
  --ink-dim:   #C7C2D1;   /* body text on dark */
  --line:      rgba(237,234,242,0.10); /* hairline dividers */
  --line-strong: rgba(169,143,196,0.35);

  /* type */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-name: "Cormorant Garamond", "Fraunces", Georgia, serif;

  /* layout */
  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 2px;
}

/* ===========================================================
   RESET / BASE
   =========================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:
    radial-gradient(ellipse 80% 50% at 15% 0%, rgba(124,93,163,0.16), transparent 60%),
    radial-gradient(ellipse 70% 60% at 100% 30%, rgba(169,143,196,0.10), transparent 55%),
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(107,78,142,0.12), transparent 60%),
    var(--bg);
  background-attachment:fixed;
  color:var(--ink-dim);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,video{ max-width:100%; display:block; height:auto; }
a{ color:var(--accent-2); text-decoration:none; }
a:hover{ color:var(--ink); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--accent-2);
  outline-offset:3px;
}
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--ink);
  margin:0 0 0.5em;
  font-weight:600;
  letter-spacing:-0.01em;
}
h1{ font-size:clamp(2.4rem, 6vw, 4.2rem); line-height:1.05; font-weight:500; }
h2{ font-size:clamp(1.8rem, 4vw, 2.6rem); line-height:1.15; }
h3{ font-size:1.3rem; line-height:1.3; }
p{ margin:0 0 1em; }

.eyebrow{
  font-family:var(--font-body);
  font-size:0.72rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--accent-2);
  font-weight:600;
}

.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--gutter);
}

/* ===========================================================
   SIGNATURE MOTIF — triangle + circle, drawn from the logo
   Used sparingly as structural dividers, not decoration.
   =========================================================== */
.motif-divider{
  display:flex;
  align-items:center;
  gap:14px;
  margin:3.5rem 0;
  color:var(--grey-dim);
}
.motif-divider::before,
.motif-divider::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--line);
}
.motif-divider svg{ flex:none; width:22px; height:22px; opacity:0.6; }

.section-mark{
  width:34px; height:34px;
  flex:none;
}

/* ===========================================================
   HEADER / NAV
   =========================================================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(22,18,31,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display);
  color:var(--ink);
  font-size:1.05rem;
  letter-spacing:0.01em;
}
.brand img{ height:34px; width:auto; }

.main-nav ul{ display:flex; gap:clamp(18px,3vw,36px); }
.main-nav a{
  color:var(--ink-dim);
  font-size:0.88rem;
  letter-spacing:0.03em;
  text-transform:uppercase;
  position:relative;
  padding:6px 0;
}
.main-nav a::after{
  content:"";
  position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--accent-2);
  transition:width .25s ease;
}
.main-nav a:hover::after,
.main-nav a.is-active::after{ width:100%; }
.main-nav a.is-active{ color:var(--ink); }

.nav-toggle{
  display:none;
  background:none; border:none; color:var(--ink);
  font-size:1.6rem; line-height:1;
  cursor:pointer;
  padding:4px 8px;
}

@media (max-width: 900px){
  .nav-toggle{ display:block; }

  .main-nav{
    position:fixed;
    top:76px; left:0; right:0;
    background:rgba(22,18,31,0.98);
    backdrop-filter:blur(12px);
    max-height:0;
    overflow:hidden;
    transition:max-height 0.35s ease;
    z-index:999;
  }

  .main-nav.is-open{
    max-height:600px;
  }

  .main-nav ul{
    flex-direction:column;
    gap:0;
    padding:0.5rem 0 1rem;
  }

  .main-nav a{
    display:block;
    padding:14px var(--gutter);
    border-bottom:1px solid var(--line);
    font-size:1rem;
  }
}

/* ===========================================================
   HERO
   =========================================================== */
.hero{
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  padding-top:120px; padding-bottom:80px;
  position:relative;
  overflow:hidden;
}
.hero-bg-image{
  position:absolute; inset:0;
  background-image:url('assets/img/architecture/hero_bg_render.jpg');
  background-size:cover;
  background-position:center;
  opacity:0.16;
  pointer-events:none;
  z-index:0;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 80% 10%, rgba(107,78,142,0.25), transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 90%, rgba(169,143,196,0.10), transparent 60%);
  pointer-events:none;
}
.hero-inner{
  position:relative; z-index:2;
  max-width:760px;
}
/* (hero logo stage removed — logo now appears alongside Architecture section) */
.hero-eyebrow{ margin-bottom:1.1rem; }
.hero-kicker{
  font-family:var(--font-name);
  font-weight:600;
  font-size:clamp(2.6rem, 6.5vw, 4.4rem);
  color:var(--ink);
  line-height:1;
  display:block;
  letter-spacing:0.01em;
}
.hero-name{
  font-family:var(--font-name);
  font-style:italic;
  font-weight:500;
  font-size:clamp(1.1rem, 2vw, 1.4rem);
  color:var(--accent-2);
  margin-bottom:1.4rem;
  display:block;
}
.hero h1{ margin-bottom:1.1rem; }
.hero h1 em{
  font-style:italic;
  color:var(--accent-2);
}
.hero-sub{
  font-size:1.1rem;
  color:var(--grey);
  max-width:46ch;
  margin-bottom:2rem;
}
.hero-meta{
  display:flex; flex-wrap:wrap; gap:1.6rem 2.4rem;
  margin-top:2.2rem;
  padding-top:1.6rem;
  border-top:1px solid var(--line);
}
.hero-meta div{ font-size:0.82rem; }
.hero-meta span{
  display:block; color:var(--grey-dim);
  text-transform:uppercase; letter-spacing:0.1em; font-size:0.68rem; margin-bottom:4px;
}
.hero-meta strong{ color:var(--ink); font-weight:500; font-family:var(--font-display); }

/* Architecture + logo pairing strip */
.arch-logo-feature{
  display:grid;
  grid-template-columns:0.55fr 1fr;
  gap:48px;
  align-items:center;
}
.arch-logo-media{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#F4EFE6;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14%;
  aspect-ratio:1;
  box-shadow:0 24px 60px rgba(0,0,0,0.25);
}
.arch-logo-media img{ width:100%; }
@media (max-width:880px){
  .arch-logo-feature{ grid-template-columns:1fr; }
  .arch-logo-media{ max-width:280px; margin:0 auto; }
}

@media (max-width:880px){
  /* hero is now single-column by default; no override needed */
}

/* ===========================================================
   FEATURED ARCHITECTURE STRIP (homepage)
   =========================================================== */
.arch-feature{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:48px;
  align-items:center;
}
.arch-feature-media{
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  aspect-ratio:4/3;
}
.arch-feature-media img{ width:100%; height:100%; object-fit:cover; }
.arch-feature-copy p{ color:var(--grey); margin-bottom:1.6rem; }
@media (max-width:880px){
  .arch-feature{ grid-template-columns:1fr; }
}

/* ===========================================================
   SECTION SCAFFOLDING
   =========================================================== */
.section{ padding:clamp(64px,10vw,120px) 0; }
.section--tight{ padding:clamp(40px,6vw,72px) 0; }
.section--panel{
  background:linear-gradient(160deg, var(--panel) 0%, var(--panel-2) 100%);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.section-head{ max-width:640px; margin-bottom:3rem; }
.section-head p{ color:var(--grey); }

/* ===========================================================
   CARDS / GRIDS
   =========================================================== */
.grid{ display:grid; gap:28px; }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:880px){ .grid--2,.grid--3{ grid-template-columns:1fr; } }

.card{
  background:linear-gradient(160deg, var(--panel) 0%, #251f38 100%);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:border-color .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.card:hover{
  border-color:var(--line-strong);
  transform:translateY(-6px);
  box-shadow:0 16px 36px rgba(0,0,0,0.35), 0 0 0 1px rgba(169,143,196,0.15);
}
.card-media{ aspect-ratio:4/3; overflow:hidden; background:#0e0c14; }
.card-media img,.card-media video{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.card:hover .card-media img{ transform:scale(1.04); }
.card-body{ padding:22px 24px 26px; }
.card-body h3{ margin-bottom:6px; }
.card-tag{
  display:inline-block;
  font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--accent-2);
  border:1px solid var(--line-strong);
  padding:3px 9px;
  border-radius:20px;
  margin-bottom:10px;
  transition:all .3s cubic-bezier(.34,1.56,.64,1);
}
.card:hover .card-tag{
  background:linear-gradient(135deg, var(--accent), #8B6BAE);
  color:#fff;
  border-color:transparent;
  transform:translateY(-1px) scale(1.04);
  box-shadow:0 4px 12px rgba(107,78,142,0.4);
}
.card-body p{ color:var(--grey); font-size:0.93rem; margin-bottom:0; }

/* ===========================================================
   TIMELINE (Experience)
   =========================================================== */
.timeline{ position:relative; }
.timeline::before{
  content:"";
  position:absolute; left:0; top:6px; bottom:6px; width:1px;
  background:var(--line);
}
.timeline-item{
  position:relative;
  padding-left:32px;
  padding-bottom:2.6rem;
}
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{
  content:"";
  position:absolute; left:-4px; top:6px;
  width:9px; height:9px; border-radius:50%;
  background:var(--accent-2);
  box-shadow:0 0 0 4px var(--bg);
}
.timeline-role{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:10px;
  margin-bottom:4px;
}
.timeline-role h3{ margin:0; }
.timeline-dates{
  font-size:0.78rem; letter-spacing:0.04em; color:var(--grey-dim);
  text-transform:uppercase;
}
.timeline-org{ color:var(--accent-2); font-size:0.92rem; margin-bottom:10px; }
.timeline-item ul{ margin-top:10px; }
.timeline-item li{
  position:relative; padding-left:18px; margin-bottom:7px;
  color:var(--grey); font-size:0.93rem;
}
.timeline-item li::before{
  content:""; position:absolute; left:0; top:0.55em;
  width:5px; height:5px; background:var(--accent); border-radius:1px;
  transform:rotate(45deg);
}

.skills-cloud{ display:flex; flex-wrap:wrap; gap:10px; margin-top:1.5rem; }
.skills-cloud span{
  font-size:0.82rem; color:var(--ink-dim);
  border:1px solid var(--line); padding:6px 14px; border-radius:20px;
  transition:all .3s cubic-bezier(.34,1.56,.64,1);
  cursor:default;
}
.skills-cloud span:hover{
  border-color:var(--accent-2);
  background:linear-gradient(135deg, rgba(107,78,142,0.25), rgba(169,143,196,0.15));
  color:var(--ink);
  transform:translateY(-2px) scale(1.05);
  box-shadow:0 6px 16px rgba(107,78,142,0.3);
}

.grid--ig{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.grid--ig .instagram-media{
  margin:0 !important;
  width:100% !important;
  min-width:0 !important;
  min-height:340px;
  background:var(--panel);
  border:1px solid var(--line) !important;
  border-radius:var(--radius);
}
@media (max-width:980px){ .grid--ig{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .grid--ig{ grid-template-columns:1fr; } }

/* ===========================================================
   GALLERY (Photography / Architecture)
   =========================================================== */
.filter-bar{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:2.6rem; }
.filter-bar button{
  background:transparent; border:1px solid var(--line); color:var(--grey);
  padding:8px 18px; border-radius:30px; font-size:0.82rem; letter-spacing:0.03em;
  transition:all .3s cubic-bezier(.34,1.56,.64,1);
}
.filter-bar button:hover{
  border-color:var(--line-strong); color:var(--ink);
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 6px 16px rgba(169,143,196,0.25);
}
.filter-bar button.is-active{
  background:linear-gradient(135deg, var(--accent), #8B6BAE);
  border-color:var(--accent); color:var(--ink);
  box-shadow:0 4px 14px rgba(107,78,142,0.35);
}
.filter-bar button.is-active:hover{
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 8px 20px rgba(107,78,142,0.45);
}

.masonry{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
@media (max-width:880px){ .masonry{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .masonry{ grid-template-columns:1fr; } }

.masonry-item{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--panel);
  border:1px solid var(--line);
  cursor:pointer;
}
.masonry-item img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.masonry-item:hover img{ transform:scale(1.05); }
.masonry-item .tag{
  position:absolute; bottom:10px; left:10px;
  font-size:0.66rem; letter-spacing:0.08em; text-transform:uppercase;
  background:rgba(22,18,31,0.82); color:var(--ink);
  padding:4px 10px; border-radius:20px;
  border:1px solid var(--line-strong);
  transition:all .3s cubic-bezier(.34,1.56,.64,1);
}
.masonry-item:hover .tag{
  background:linear-gradient(135deg, var(--accent), #8B6BAE);
  border-color:transparent;
  transform:scale(1.06);
  box-shadow:0 4px 14px rgba(107,78,142,0.45);
}
.masonry-item.tall{ grid-row:span 2; }
.masonry-item .ph-frame{ aspect-ratio:4/5; height:100%; }
.masonry-item.wide{ grid-column:span 2; }
.masonry-item.wide .ph-frame{ aspect-ratio:32/15; }
@media (max-width:880px){
  .masonry-item.wide{ grid-column:span 1; }
  .masonry-item.wide .ph-frame{ aspect-ratio:4/5; }
  .masonry-item.tall{ grid-row:span 1; }
}

.video-block{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  background:#000;
  border:1px solid var(--line);
}
.video-block video{ width:100%; display:block; }
.video-caption{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:16px 4px 0;
}
.video-caption h3{ margin-bottom:2px; font-size:1.05rem; }
.video-caption .device-tag{
  font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--grey-dim);
}

/* lightbox */
.lightbox{
  position:fixed; inset:0; z-index:1000;
  background:rgba(10,8,14,0.92);
  display:none; align-items:center; justify-content:center;
  padding:40px;
}
.lightbox.is-open{ display:flex; }
.lightbox img{ max-height:88vh; max-width:88vw; width:auto; border:1px solid var(--line-strong); }
.lightbox-close{
  position:absolute; top:24px; right:32px;
  background:none; border:none; color:var(--ink); font-size:2rem; line-height:1;
}

/* ===========================================================
   ARCHITECTURE PROJECT BLOCK
   =========================================================== */
.arch-project{
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  gap:48px;
  padding:3rem 0;
  border-top:1px solid var(--line);
}
.arch-project:first-of-type{ border-top:none; }
@media (max-width:820px){ .arch-project{ grid-template-columns:1fr; } }
.arch-meta .eyebrow{ display:block; margin-bottom:8px; }
.arch-meta h3{ margin-bottom:14px; }
.arch-meta p{ color:var(--grey); font-size:0.92rem; }
.arch-meta .specs{ margin-top:18px; }
.arch-meta .specs div{ font-size:0.8rem; color:var(--grey-dim); margin-bottom:6px; }
.arch-meta .specs strong{ color:var(--ink-dim); font-weight:500; }
.arch-images{ display:grid; gap:14px; }
.arch-images img{ border:1px solid var(--line); border-radius:var(--radius); }
.arch-images .row-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px){ .arch-images .row-2{ grid-template-columns:1fr; } }

/* ===========================================================
   CTA / FOOTER
   =========================================================== */
.cta-band{
  text-align:center;
  padding:clamp(60px,10vw,100px) 0;
}
.cta-band h2{ margin-bottom:1rem; }
.cta-band p{ color:var(--grey); max-width:50ch; margin:0 auto 2rem; }
.btn{
  display:inline-flex; align-items:center; gap:10px;
  background:linear-gradient(135deg, var(--accent), #8B6BAE);
  color:#fff;
  padding:14px 30px; border-radius:30px;
  font-size:0.9rem; letter-spacing:0.03em;
  border:1px solid var(--accent);
  transition:background .35s ease, transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease;
  box-shadow:0 4px 14px rgba(107,78,142,0.25);
}
.btn:hover{
  background:linear-gradient(135deg, var(--accent-2), #C7AEDE);
  color:#16121F;
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 10px 28px rgba(169,143,196,0.45);
}
.btn--ghost{ background:transparent; color:var(--ink); box-shadow:none; }
.btn--ghost:hover{ background:var(--panel-2); color:var(--ink); box-shadow:0 8px 20px rgba(0,0,0,0.3); }

.site-footer{
  border-top:1px solid var(--line);
  padding:48px 0 36px;
}
.footer-grid{
  display:flex; justify-content:space-between; align-items:flex-start;
  flex-wrap:wrap; gap:24px;
  margin-bottom:32px;
}
.footer-brand{ display:flex; align-items:center; gap:10px; }
.footer-brand img{ height:30px; }
.footer-nav ul{ display:flex; gap:22px; flex-wrap:wrap; }
.footer-nav a{ color:var(--grey); font-size:0.85rem; }
.footer-nav a:hover{ color:var(--ink); }
.footer-meta{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  padding-top:24px; border-top:1px solid var(--line);
  font-size:0.78rem; color:var(--grey-dim);
}

/* ===========================================================
   CONTACT PAGE
   =========================================================== */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:start;
}
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-list{ margin-top:1.5rem; }
.contact-list li{
  display:flex; justify-content:space-between; gap:18px;
  padding:16px 0; border-bottom:1px solid var(--line);
  font-size:0.95rem;
}
.contact-list span{ color:var(--grey-dim); }
.contact-list a{ color:var(--ink-dim); }
.contact-list a:hover{ color:var(--accent-2); }

.form-field{ margin-bottom:18px; }
.form-field label{
  display:block; font-size:0.78rem; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--grey-dim); margin-bottom:8px;
}
.form-field input,.form-field textarea{
  width:100%;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:13px 16px;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:0.95rem;
}
.form-field textarea{ min-height:130px; resize:vertical; }
.form-field input:focus,.form-field textarea:focus{ border-color:var(--line-strong); }

/* ===========================================================
   UTILITIES
   =========================================================== */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--accent); color:#fff; padding:10px 16px; z-index:1000;
}
.skip-link:focus{ left:10px; top:10px; }