/* Reset & base */
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:#111827;
  background-image:url('../assets/bg.png'); background-size:cover; background-position:center; background-attachment:fixed;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; display:block}

/* Layout helpers */
.container{max-width:72rem; margin:0 auto; padding:0 1rem}
.section{padding:4rem 0}
.box{ max-width:72rem; margin:0 auto; background:rgba(255,255,255,.85); border:1px solid rgba(0,0,0,.06); box-shadow:0 10px 30px rgba(0,0,0,.08); border-radius:1.5rem; padding:3rem 1.5rem }
@media (min-width:768px){ .box{ padding:3.5rem 2rem } }
.grid{ display:grid; gap:1rem }
@media (min-width:768px){ .grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
.grid-4{ grid-template-columns:repeat(2,minmax(0,1fr)) }
@media (min-width:768px){ .grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
.card{ border-radius:1rem; border:1px solid rgba(0,0,0,.06); background:#fff; box-shadow:0 6px 18px rgba(0,0,0,.08); padding:1rem }
.lead{ font-size:1.125rem; line-height:1.6; color:#374151 }
h1{ font-size:2rem; line-height:1.2; margin:0 }
@media (min-width:768px){ h1{ font-size:2.5rem } }
h2{ font-size:1.5rem; line-height:1.2; margin:0 0 .75rem 0 }
p{ margin:.5rem 0 }

/* Header (sticky) */
.header{ position:sticky; top:0; z-index:100; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); background:rgba(255,255,255,.78); border-bottom:1px solid rgba(0,0,0,.06) }
.header-row{ display:flex; align-items:center; gap:1rem; padding:.9rem 1rem }
.header-brand{ display:flex; align-items:center; gap:.6rem; font-weight:800 }
.nav{ margin-left:auto; display:none; gap:1rem }
@media (min-width:768px){ .nav{ display:flex } }
.nav a{ text-decoration:none; color:#111827; padding:.35rem .6rem; border-radius:.5rem }
.nav a:hover{ background:rgba(0,0,0,.06) }
.lang{ margin-left:1rem; display:flex; gap:.5rem }
.lang button{ padding:.25rem .5rem; border:1px solid #d1d5db; background:#fff; border-radius:.5rem; cursor:pointer }
.lang button:focus{ outline:2px solid rgba(61,198,193,.5) }

/* Forms */
.input,.select,.textarea{
  width:100%; border:1px solid #e5e7eb; border-radius:.5rem; padding:.55rem .75rem; background:#fff
}
.input:focus,.select:focus,.textarea:focus{ outline:3px solid rgba(61,198,193,.3); border-color:#3DC6C1 }
.btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.75rem 1.2rem; border-radius:.75rem; background:#3DC6C1; color:#fff; font-weight:600; text-decoration:none; border:0; cursor:pointer }
.btn:hover{ background:#1E6F73 }

/* Portfolio aspect */
.aspect-3-4{ position:relative; width:100% }
.aspect-3-4::before{ content:""; display:block; padding-top:133.333% } /* 4/3 */
.aspect-3-4 > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }

/* Footer */
.footer{ padding:2.5rem 0 }
.footer p{ margin:.25rem 0; color:#4b5563 }


/* v16c footer styling with socials */
.footer .box{ text-align:center }
.footer .socials{ display:flex; align-items:center; justify-content:center; gap:.75rem; margin-top:.5rem }
.footer .socials a{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:9999px; background:#fff; border:1px solid rgba(0,0,0,.08); box-shadow:0 6px 18px rgba(0,0,0,.06); text-decoration:none }
.footer .socials a:hover{ transform:translateY(-1px) }

/* Center nav by giving side flex items 1 each */
.header-row{ justify-content:center }


/* v16d fixes */
/* Fixed header */
.header{ position: fixed; top:0; left:0; right:0; z-index:200; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: rgba(255,255,255,.8); border-bottom: 1px solid rgba(0,0,0,.06); }
body{ padding-top: 64px; }
/* Center nav */
.header .nav{ position:absolute; left:50%; transform:translateX(-50%); margin:0; }
/* Logo only */
.header .header-logo img{ display:block }
/* Footer dark */
footer.footer{ background: rgba(0,0,0,.55); color:#f3f4f6; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top:1px solid rgba(255,255,255,.15); }
footer.footer a{ color:#e5e7eb; text-decoration:none }
footer.footer a:hover{ text-decoration:underline }
footer .container{ padding-top: 1rem; padding-bottom: 1rem; }
footer .socials a{ background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); color:#fff }


/* v16e footer clarify */
footer.footer{ background: rgba(0,0,0,.58); color:#e5e7eb; }
footer.footer .socials a{
  background: transparent; border: 0; box-shadow:none; color:#e5e7eb; padding:0 .25rem; border-radius:.25rem;
}
footer.footer .socials a:hover{ text-decoration: underline; transform:none }

/* Ensure header remains fixed and centered */
.header{ position: fixed; top:0; left:0; right:0; z-index:200; }
body{ padding-top: 64px; }
.header .nav{ position:absolute; left:50%; transform:translateX(-50%); margin:0; }


/* v16f minor polish */
footer.footer .socials a{ color:#e5e7eb }
footer.footer .socials a svg{ display:block }
#contact-form .text-sm{ color:#374151 }
#contact-form .input::placeholder, #contact-form .textarea::placeholder{ color:#9ca3af }


/* v16g fixes */
#contact-form .textarea{ resize: none; }
#contact-form{ background: transparent; border: 0; box-shadow:none; } /* no separate overlay */
#contacts .card{ background: transparent } /* safety */


/* v16h footer tweaks */
footer.footer .socials { gap: 1rem; margin-bottom: .25rem; }
footer.footer .container > div { line-height: 1.6; }


/* v16h select polish */
.select{
  -webkit-appearance: none; -moz-appearance:none; appearance:none;
  background-image: linear-gradient(45deg, transparent 50%, #6b7280 50%), 
                    linear-gradient(135deg, #6b7280 50%, transparent 50%),
                    linear-gradient(to right, transparent, transparent);
  background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px), 100% 0;
  background-size: 6px 6px, 6px 6px, 2.5em 100%;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}
.select:focus{ background-image: linear-gradient(45deg, transparent 50%, #111827 50%), 
                                  linear-gradient(135deg, #111827 50%, transparent 50%),
                                  linear-gradient(to right, transparent, transparent); }

/* Keep textarea from resizing */
.textarea{ resize: none; }


/* v16i contact info spacing */
#contacts .card{ gap:.5rem }

/* v17 structured contacts */
#contacts em{ font-style: italic; font-weight: 600; color:#1f2937 }
#contacts #contacts-rich p{ margin:.4rem 0 1rem }

/* v18b alignment & bold-only headings */
#contacts .grid.grid-2{ align-items: stretch; }
#contact-form{ display:flex; flex-direction:column; height:100%; }
#contact-form .form-submit-wrap{ margin-top:auto; }
#contacts em{ font-style: normal; font-weight: 700; }
#contacts strong{ font-weight: 700; color:#1f2937 }
#contacts #contacts-rich p{ margin:.4rem 0 1rem }


/* v18c: center submit button, unify textarea styles, slimmer footer */
#contact-form .form-submit-wrap.center{ text-align:center; }
#contact-form .form-submit-wrap.center .btn{ display:inline-block; }

/* Match textarea font to site inputs */
.textarea{
  font-size: 0.95rem;
  line-height: 1.5;
  color: #111827;
}
.textarea::placeholder{ color:#9ca3af; }

/* Slimmer footer */
footer.footer .container{ padding-top:.5rem; padding-bottom:.5rem; }
footer.footer .socials{ margin-bottom:.2rem; }
footer.footer .container > div{ line-height:1.4; }

/* v18e: shared underlay + bottom aligned */
.shared-underlay{ padding:1rem 1rem }
.shared-row{ align-items: stretch; gap:1rem }
.shared-row .info-col, .shared-row .form-col{ display:flex; flex-direction:column; }
.shared-row .info-col #contacts-rich{ font-size:.95rem; line-height:1.75 }
.form-col{ gap:.75rem }
.form-col .submit-wrap{ margin-top:auto; text-align:center; }
#contacts #contacts-rich p{ margin:.4rem 0 1rem }
#contacts strong{ font-weight:700; color:#1f2937 }

.map-wrap{ margin-top:1rem; overflow:hidden; border-radius:1rem; box-shadow:0 8px 24px rgba(0,0,0,.12) }


/* v18f: unify textarea font with inputs and clean bullets */
.input, .select, .textarea{ font-family: inherit; font-size: .95rem; line-height: 1.5; color:#111827; }
.textarea::placeholder{ color:#9ca3af; font-family: inherit; font-size:.95rem; }
.shared-underlay .info-col, .shared-underlay .info-col *{ list-style: none; }

.header-logo img.logo-img{height:40px;width:auto;display:block;transition:transform .25s ease}
.header-logo:hover img.logo-img{transform:scale(1.06)}

#about .grid{align-items:stretch}
#about .card{height:100%}
#about .card img{height:100%;width:auto;object-fit:contain;display:block}


/* === Mobile Header & Menu — FIX === */
body{ padding-top:64px; }
.header{ position:fixed; top:0; left:0; right:0; z-index:200; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); background:rgba(255,255,255,.8); border-bottom:1px solid rgba(0,0,0,.06); }
.header-row{ display:flex; align-items:center; min-height:64px; gap:1rem; }
.header .nav{ margin-left:auto; display:none; gap:1rem }
@media (min-width:768px){ .header .nav{ display:flex } }
.header .lang{ margin-left:1rem; display:none; gap:.5rem }
@media (min-width:768px){ .header .lang{ display:flex } }

/* Hamburger */
.hamburger{ margin-left:auto; appearance:none; background:transparent; border:0; padding:.5rem; cursor:pointer; display:inline-flex; align-items:center; justify-content:center }
@media (min-width:768px){ .hamburger{ display:none } }
.hamburger-box{ width:24px; height:18px; position:relative; display:inline-block }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after{
  content:""; position:absolute; left:0; right:0; height:2px; background:#111827; transition:transform .25s ease, opacity .2s ease, top .25s ease;
}
.hamburger-inner{ top:8px } .hamburger-inner::before{ top:-7px } .hamburger-inner::after{ top:7px }
.hamburger[aria-expanded="true"] .hamburger-inner{ transform:rotate(45deg) }
.hamburger[aria-expanded="true"] .hamburger-inner::before{ top:0; transform:rotate(90deg) }
.hamburger[aria-expanded="true"] .hamburger-inner::after{ top:0; opacity:0 }

/* Mobile menu overlay */
.mobile-menu{ position:fixed; inset:0; z-index:180; }
.mobile-backdrop{ position:absolute; inset:0; background:transparent; border:0; padding:0; margin:0; z-index:0; }
.mobile-menu-panel{
  position:absolute; top:64px; left:0; right:0;
  background:#ffffff; border-bottom:1px solid rgba(0,0,0,.08);
  box-shadow:0 16px 40px rgba(0,0,0,.10);
  border-bottom-left-radius:1rem; border-bottom-right-radius:1rem;
  transform:translateY(-8%); opacity:0; pointer-events:none; z-index:1;
  transition:transform .22s ease, opacity .22s ease;
}
.mobile-menu.open .mobile-menu-panel{ transform:translateY(0); opacity:1; pointer-events:auto }
.mobile-menu.open .mobile-backdrop{ opacity:1 }

/* Centered items */
.mobile-nav{ display:flex; flex-direction:column; align-items:center; gap:.25rem; padding:1rem 1rem .5rem; text-align:center }
.mobile-nav a{ text-decoration:none; color:#111827; padding:.75rem 1rem; border-radius:.75rem; display:block; width:100% }
.mobile-nav a:hover{ background:rgba(0,0,0,.06) }
.mobile-lang{ display:flex; justify-content:center; gap:.5rem; padding:.25rem 1rem 1rem }
.mobile-lang button, .lang button{ padding:.4rem .65rem; border:1px solid #d1d5db; background:#fff; border-radius:.5rem; cursor:pointer; font-weight:600 }
.mobile-lang button:focus, .lang button:focus{ outline:3px solid rgba(61,198,193,.35); border-color:#3DC6C1 }

/* Smooth scroll for browsers that support it */
html{ scroll-behavior:smooth }


/* ===== FINAL MOBILE HEADER FIX (forces correct visibility) ===== */
.header-row{ display:flex; align-items:center; min-height:64px; gap:1rem; }

/* Mobile default: hide desktop nav/lang, show hamburger */
.header .nav{ display:none !important; }
.header .lang{ display:none !important; }
.hamburger{ display:inline-flex !important; margin-left:auto; }

/* Desktop/tablet >=768px: show nav/lang, hide hamburger */
@media (min-width:768px){
  .header .nav{ display:flex !important; margin-left:auto; gap:1rem; }
  .header .lang{ display:flex !important; margin-left:1rem; gap:.5rem; }
  .hamburger{ display:none !important; }
}

/* Keep logo sizing sane */
.header .header-logo img.logo-img{ height:40px; width:auto; display:block; }


/* ===== Desktop header layout fix (logo left, nav centered, lang right) ===== */
@media (min-width: 768px){
  .header-row{
    display:grid !important;
    grid-template-columns: auto 1fr auto;
    align-items:center;
  }
  .header .header-logo{ justify-self:start; }
  .header .nav{
    display:flex !important;
    justify-content:center;
    gap:1.25rem;
    margin-left:0 !important; /* grid handles spacing */
    white-space:nowrap;
  }
  .header .lang{
    display:flex !important;
    justify-self:end;
    gap:.5rem;
    margin-left:0 !important;
  }
}

/* A11y: skip link */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;padding:.5rem .75rem;background:#111827;color:#fff;border-radius:.5rem;z-index:300}

/* A11y: focus outlines on buttons/links */
a:focus-visible,button:focus-visible{outline:3px solid rgba(61,198,193,.5);outline-offset:2px}

/* Bold labels */
#contact-form label.text-sm{ font-weight:700 }

/* Success message */
.form-success{margin-top:1rem;padding:.75rem 1rem;border-radius:.5rem;background:#ecfdf5;color:#065f46;font-weight:600}