/*
Theme Name: CINEMOPERA Black Onepage (v4)
Author: You
Version: 1.3.0
Description: One-page black theme with dedicated Projects page, capped sections, and fixed logo size 120px.
Text Domain: cinemopera-black-onepage
*/

:root { --bg: #000; --fg: #fff; --muted: #9ca3af; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.6;
}
a { color: var(--fg); text-decoration: none; }
a:focus-visible { outline: 2px dashed var(--fg); outline-offset: 4px; }

/* Header / Nav */
header { position: sticky; top: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(6px); border-bottom: 1px solid rgba(255,255,255,0.1); z-index: 10; }
nav { display: flex; justify-content: center; gap: 2rem; padding: 1rem 2rem; }
nav a { opacity: 0.8; }
nav a:hover, nav a[aria-current="page"] { opacity: 1; }

/* Hero (logo) */
.hero { min-height: calc(100vh - 64px); display: flex; align-items: center; justify-content: center; padding: 4rem 1rem; }
/* Fixed logo size for both custom logo and fallback logo.png */
.hero .custom-logo,
.hero .logo {
  width: 120px !important;
  height: auto !important;
  max-width: 100%;
}
.hero img.custom-logo,
.hero img.logo {
  width: 300px !important;
  height: auto !important;
  max-width: 100%;
}

/* Sections */
section { padding: 6rem 1rem; max-width: 880px; margin: 0 auto; }
h2 { margin: 0 0 1rem; font-size: clamp(28px, 4vw, 42px); }
p { color: #d1d5db; }

/* CAP homepage sections to 300px */
#about, #projects {
  max-height: 300px;
  padding-top: 20px;
  padding-bottom: 20px;
  overflow: hidden;
}

#contact { padding-top: 60px; padding-bottom: 60px; }

/* Generic content area for pages (like Projects page) */
.site-content { padding: 6rem 1rem; max-width: 880px; margin: 0 auto; }
.site-content h1, .site-content h2, .site-content h3 { color: #fff; }
.site-content p, .site-content li { color: #d1d5db; }

/* Footer */
footer { border-top: 1px solid rgba(255,255,255,0.1); padding: 2rem; text-align: center; color: var(--muted); }