/*
Theme Name: Ullash Photography
Theme URI: https://ullashphotography.com
Author: Ullash Photography
Description: A minimal editorial photography portfolio theme with a fixed sidebar menu, dynamic logo, dynamic navigation, and a dense monochrome masonry gallery powered by a Portfolio custom post type.
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: ullash-photography
*/

:root{
  --paper:#faf9f4;
  --paper-dim:#eae7de;
  --ink:#141414;
  --ink-soft:#3c3c3c;
  --line:rgba(20,20,20,0.1);
  --accent:#8a6f4a;
  --sidebar-w:300px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Work Sans', sans-serif;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  margin:0;
}
h1,h2,h3,.serif{font-family:'Fraunces', serif; font-weight:400; letter-spacing:-0.01em; margin:0;}
a{color:inherit; text-decoration:none;}
ul{list-style:none; margin:0; padding:0;}
img{max-width:100%; display:block;}
.screen-reader-text{position:absolute !important; clip:rect(1px,1px,1px,1px); overflow:hidden; height:1px; width:1px;}

/* ---------- sidebar ---------- */
.site-sidebar{
  position:fixed; top:0; left:0; bottom:0; width:var(--sidebar-w);
  background:var(--paper); border-right:1px solid var(--line);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:48px 44px; z-index:50; overflow-y:auto;
}
.brand{font-family:'Fraunces',serif; font-size:24px; margin-bottom:56px; display:block;}
.brand img{max-height:46px; width:auto;}
.brand .tagline{display:block; font-size:11px; font-family:'Work Sans'; letter-spacing:.12em; color:var(--ink-soft); margin-top:6px; font-weight:400; text-transform:uppercase;}

/* WP menu structure: ul.menu > li.menu-item > a, nested ul.sub-menu */
nav.side-nav ul.menu > li.menu-item{border-bottom:1px solid var(--line);}
nav.side-nav ul.menu > li.menu-item > a{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0; font-size:15px; font-weight:600; cursor:pointer;
}
nav.side-nav .chev{font-size:11px; color:var(--ink-soft); transition:transform .25s ease; margin-left:8px;}
nav.side-nav li.menu-item-has-children.open .chev{transform:rotate(180deg);}
ul.sub-menu{max-height:0; overflow:hidden; transition:max-height .35s ease;}
li.menu-item-has-children.open > ul.sub-menu{max-height:400px;}
ul.sub-menu li a{
  display:block; padding:9px 0 9px 16px; font-size:13.5px; color:var(--ink-soft);
  border-left:1px solid var(--line); margin-bottom:2px; font-weight:400;
}
ul.sub-menu li a:hover, ul.sub-menu li.current-menu-item a{color:var(--ink); border-left-color:var(--accent);}

.side-foot{margin-top:40px;}
.side-foot .avail{font-size:12px; color:var(--ink-soft); line-height:1.6; margin-bottom:26px;}
.side-foot .avail b{color:var(--ink); font-weight:500;}
.social-menu{display:flex; gap:16px; flex-wrap:wrap;}
.social-menu li a{
  width:34px; height:34px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:11px;
  overflow:hidden; text-transform:uppercase; transition:all .2s ease;
}
.social-menu li a:hover{background:var(--ink); color:var(--paper); border-color:var(--ink);}

.menu-toggle{
  display:none; position:fixed; top:20px; right:20px; z-index:60;
  width:42px; height:42px; align-items:center; justify-content:center;
  background:var(--ink); color:var(--paper); border-radius:50%; font-size:11px; cursor:pointer;
  border:none;
}
@media(max-width:960px){
  .site-sidebar{transform:translateX(-100%); transition:transform .3s ease; width:280px;}
  .site-sidebar.active{transform:translateX(0);}
  .menu-toggle{display:flex;}
  .site-main{margin-left:0 !important;}
}

/* ---------- main ---------- */
.site-main{margin-left:var(--sidebar-w);}

.page-intro{
  padding:70px 40px 34px; border-bottom:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap;
}
.page-intro h1{font-size:clamp(28px,3vw,40px); max-width:20ch;}
.page-intro .desc{max-width:34ch; font-size:14px; color:var(--ink-soft); padding-bottom:4px;}
.page-intro .desc p{margin:0;}

.entry-content{padding:50px 40px; max-width:760px; font-size:16px; line-height:1.7;}
.entry-content p{margin-bottom:1.4em;}

/* dense mosaic gallery */
.portfolio-gallery{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  grid-auto-rows:110px;
  gap:6px;
  padding:6px;
}
.tile{position:relative; overflow:hidden; cursor:pointer; background:#1c1c1c; display:block;}
.tile img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.2,.7,.2,1);}
.tile:hover img{transform:scale(1.06);}
.tile .no-image{width:100%; height:100%; background:linear-gradient(150deg,#3a3a3a,#111 70%); filter:grayscale(1);}
.tile .tag{
  position:absolute; left:16px; bottom:16px; background:var(--paper); color:var(--ink);
  font-size:12px; padding:6px 14px; opacity:0; transform:translateY(8px);
  transition:all .25s ease; letter-spacing:.02em; max-width:calc(100% - 32px);
}
.tile:hover .tag{opacity:1; transform:translateY(0);}

.tile.t1{grid-column:span 2; grid-row:span 3;}
.tile.t2{grid-column:span 2; grid-row:span 2;}
.tile.t3{grid-column:span 2; grid-row:span 4;}
.tile.t4{grid-column:span 2; grid-row:span 2;}
.tile.t5{grid-column:span 2; grid-row:span 3;}
.tile.t6{grid-column:span 3; grid-row:span 3;}

@media(max-width:1100px){
  .portfolio-gallery{grid-template-columns:repeat(4,1fr);}
  .tile{grid-column:span 2 !important;}
}
@media(max-width:640px){
  .portfolio-gallery{grid-template-columns:repeat(2,1fr); grid-auto-rows:150px;}
  .page-intro{padding:80px 20px 24px;}
  .entry-content{padding:30px 20px;}
}

/* single portfolio item */
.single-portfolio-hero{padding:6px;}
.single-portfolio-hero img{width:100%; max-height:640px; object-fit:cover;}
.single-portfolio-body{padding:40px; max-width:760px;}
.single-portfolio-body .cat{font-size:12px; color:var(--accent); letter-spacing:.05em; margin-bottom:10px; display:block;}
.portfolio-nav{display:flex; justify-content:space-between; padding:0 40px 60px; font-size:13px; color:var(--ink-soft);}
.portfolio-nav a:hover{color:var(--ink);}

.site-footer{
  padding:50px 40px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; font-size:12px; color:var(--ink-soft);
  flex-wrap:wrap; gap:10px;
}

/* basic post/page defaults */
.page-content-wrap{padding:70px 40px;}
.alignleft{float:left; margin:0 20px 20px 0;}
.alignright{float:right; margin:0 0 20px 20px;}
.aligncenter{display:block; margin:0 auto 20px;}