@import url('/assets/css/ui.css');
:root { --brand: #0EA5E9; --text: #111827; --bg: #ffffff; --muted: #6b7280; --head-bg:#ffffff; --head-border:#e5e7eb; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; scroll-behavior: smooth; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--text); background: var(--bg); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 120; background: var(--head-bg); border-bottom: 1px solid var(--head-border); transition: box-shadow .2s ease; }
.site-header, .site-header .logo, .site-header .nav a, .site-header .nav button { color: var(--text); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.logo { display:flex; align-items:center; gap:10px; font-weight: 700; letter-spacing:.2px; }
.brand-logo { height: 28px; width:auto; display:block; }

/* Nav + brand outline */
.nav { display:flex; align-items:center; gap:8px; position:relative; }
.nav a, .nav button.nav-link { display:inline-flex; align-items:center; justify-content:center; height: 36px; margin-left: 8px; padding: 0 12px; border-radius: 10px; font-weight: 600; font-size: 15px; background: transparent; border:1px solid transparent; cursor:pointer; }
.nav a.active, .nav a:hover, .nav button.nav-link:hover, .nav-dropdown.active > .nav-link { border-color: var(--brand); }

/* Desktop: "header expands down" submenu */
.header-submenu { overflow: hidden; max-height: 0; opacity: 0; pointer-events: none; background: var(--head-bg); border-top: 1px solid var(--head-border); transition: max-height .25s ease, opacity .2s ease; }
.site-header.submenu-open .header-submenu { max-height: 240px; opacity: 1; pointer-events: auto; }
.submenu-portfolio { display:flex; flex-wrap: wrap; gap: 8px 16px; padding: 12px 0; }
.submenu-portfolio a { padding: 8px 12px; border-radius: 10px; border:1px solid transparent; }
.submenu-portfolio a:hover { border-color: var(--brand); }

/* Hide legacy dropdown on desktop; mobile keeps it */
.dropdown-menu { display: none !important; }

/* Burger */
.burger { display:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--head-border); background:var(--head-bg); position:fixed; right:12px; z-index:200; align-items:center; justify-content:center; flex-direction:column; }
.burger span { display:block; width:20px; height:2px; margin:2px 0; background:currentColor; }

@media (max-width: 900px){
  /* Mobile off-canvas nav */
  #site-nav { position: fixed; top:0; right:-100vw; height:100vh; width:86vw; max-width:360px; background: var(--bg); color: var(--text); z-index: 999; overflow-y:auto; padding:80px 20px 24px; transition:right .25s ease; }
  #site-nav.open { right:0; }
  #site-nav ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
  #site-nav li { margin:0; }
  #site-nav a { display:block; text-decoration:none; color:var(--text); font-size:16px; padding:10px 6px; }
  .burger { display:inline-flex; position:relative; z-index:1000; }
  .header-submenu { display:none !important; }
  body.no-scroll { overflow:hidden; }

  .burger { display:flex; }
  .nav { position: fixed; right: -100%; top: 0; height: 100vh; width: 80vw; max-width: 360px; background:var(--head-bg); border-left:1px solid var(--head-border); padding: 80px 20px 20px; flex-direction: column; align-items: flex-start; gap:6px; transition: right .25s ease; }
  .nav.open { right: 0; }
  .nav .nav-dropdown .dropdown-menu { position: static; display:block !important; opacity:1; pointer-events:auto; border:none; box-shadow:none; padding:0 0 0 8px; }
  .header-submenu { display:none; } /* mobile uses inline dropdown */
}

/* Sections & about */
.section { padding: 48px 0; }
.section h2, .section h1 { margin-top: 0; }
.container.narrow { max-width: 800px; }
.about-photo { display:flex; justify-content:center; margin: 10px 0 24px; }
.about-photo img { width: 180px; height: 180px; object-fit: cover; border-radius: 50%; border: 2px solid var(--head-border); }
.sep { margin:24px 0; border:0; height:1px; background:#e5e7eb }

/* Masonry */
.masonry { column-count: 4; column-gap: 12px; }
@media (max-width:1200px){ .masonry{ column-count:3 } }
@media (max-width:900px){ .masonry{ column-count:2 } }
@media (max-width:560px){ .masonry{ column-count:1 } }
.masonry .m-item { break-inside: avoid; margin-bottom: 12px; border-radius: 12px; overflow: hidden; display:block; }
.masonry .m-item img { width: 100%; height: auto; opacity: 0; transition: opacity .35s ease; }
.masonry .m-item img.loaded { opacity: 1; }

/* Footer at bottom */
html, body { height: 100%; }
body > .site-footer { margin-top:auto; }
.site-footer { border-top: 1px solid var(--head-border); background: var(--head-bg); }

/* Reveal */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .45s ease, transform .45s ease; }
.reveal.in { opacity: 1; transform: none; }

/* Lightbox */
.no-scroll { overflow: hidden; }
.lightbox[hidden]{ display:none !important; }
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.9); display: grid; place-items: center; z-index: 130; }
.lightbox img { max-width: 92vw; max-height: 86vh; box-shadow: 0 10px 40px rgba(0,0,0,.6); border-radius: 8px; }
.lb-prev, .lb-next, .lb-close { position: fixed; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff; font-size: 40px; line-height: 1; width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; cursor: pointer; }
.lb-close { top: 24px; right: 24px; transform: none; font-size: 28px; }
.lb-prev { left: 24px; }
.lb-next { right: 24px; }
.lb-prev:hover, .lb-next:hover, .lb-close:hover { background: rgba(255,255,255,.2); }

/* Slider */
.slider {width: 100vw; height: calc(100vh - 64px - 64px); overflow: hidden; }
.slider .slides { position: absolute; inset: 0; }
.slider .slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.slider .slide.active { opacity: 1; }
.slider .slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slider .caption { position: absolute; left: 50%; bottom: 10vh; transform: translateX(-50%); color: #fff; text-align: center; padding: 12px 18px; border-radius: 12px; background: rgba(0,0,0,.35); backdrop-filter: blur(6px); }
.slider .dots { position: absolute; left: 50%; transform: translateX(-50%); bottom: 24px; display: flex; gap: 8px; }
.slider .dot { width: 10px; height: 10px; border-radius: 999px; background: rgba(255,255,255,.5); cursor: pointer; }
.slider .dot.active { background: #fff; }

/* Dark theme */
:root[data-theme="dark"] { --text:#e5e7eb; --bg:#0b0d10; --muted:#9ca3af; --head-bg:#0b0d10; --head-border:#1f2937; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --text:#e5e7eb; --bg:#0b0d10; --muted:#9ca3af; --head-bg:#0b0d10; --head-border:#1f2937; } }

/* Overlay submenu over slider without blocking clicks */
.nav{position:relative;z-index:2}
.header-submenu{position:absolute;left:0;right:0;top:64px;z-index:1;transform:scaleY(0);transform-origin:top;transition:transform .2s,opacity .2s;opacity:0;pointer-events:none;background:rgba(255,255,255,.75);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--head-border);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.site-header.submenu-open .header-submenu{transform:scaleY(1);opacity:1;pointer-events:auto}
@media (prefers-color-scheme: dark){.header-submenu{background:rgba(20,20,20,.55)}}
/* align items to right within container */
.submenu-portfolio{justify-content:flex-end}

/* === Customizations (2025-08-17) === */

/* Sticky footer layout */
html, body { min-height: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }

/* Contacts page: center content on screen and narrow width */
.page-about main.section { display: grid; place-items: center; padding: 40px 0; }
.page-about .container.narrow { max-width: 680px; width: 100%; }
.page-about .about-photo { margin: 0 auto 16px; max-width: 260px; }

/* Header submenu: white on light theme */
@media (prefers-color-scheme: light) {
  .header-submenu { background: #ffffff; }
}
:root[data-theme="light"] .header-submenu { background: #ffffff; }
/* Reinforce dark theme submenu */
:root[data-theme="dark"] .header-submenu { background: rgba(20,20,20,.55); }

/* Ensure header text & burger follow theme text color */
.site-header, .site-header .logo, .site-header .nav a, .site-header .nav button, .burger { color: var(--text); }
.burger span { background: currentColor; }


/* Contacts list with icons */
.contacts li{display:flex;align-items:center;gap:8px;margin:8px 0}.contacts .icon{width:18px;height:18px;display:inline-flex}.contacts .icon svg{width:18px;height:18px}


/* Mobile nav hardening */
@media (max-width: 900px){
  /* Mobile off-canvas nav */
  #site-nav { position: fixed; top:0; right:-100vw; height:100vh; width:86vw; max-width:360px; background: var(--bg); color: var(--text); z-index: 999; overflow-y:auto; padding:80px 20px 24px; transition:right .25s ease; }
  #site-nav.open { right:0; }
  #site-nav ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
  #site-nav li { margin:0; }
  #site-nav a { display:block; text-decoration:none; color:var(--text); font-size:16px; padding:10px 6px; }
  .burger { display:inline-flex; position:relative; z-index:1000; }
  .header-submenu { display:none !important; }
  body.no-scroll { overflow:hidden; }

  
  
  
  
  
  .burger { display: inline-flex; position: relative; z-index: 1000; }
  .header-submenu { display: none !important; }
  body.no-scroll { overflow: hidden; }
}

/* NAV underline unified */
.site-header .nav a,
.site-header .nav button.nav-link,
.site-header .nav .dropdown-menu a{
  position:relative; font-family: var(--font-site, inherit), inherit; font-weight:300;
  border:none !important; background:transparent !important; box-shadow:none !important;
}
.site-header .nav a::after,
.site-header .nav button.nav-link::after,
.site-header .nav .dropdown-menu a::after{
  content:""; position:absolute; left:50%; bottom:4px; width:0; height:1px; background:currentColor;
  transform:translateX(-50%) scaleX(0); transform-origin:center;
  transition:transform .4s cubic-bezier(.22,.61,.36,1), width .4s cubic-bezier(.22,.61,.36,1);
}
.site-header .nav a:hover::after,
.site-header .nav .dropdown-menu a:hover::after,
.site-header .nav a.active::after,
.site-header .nav .active>.nav-link::after{
  width:100%; transform:translateX(-50%) scaleX(1);
}