/* ================================================
   FAROS PLUS: the two Germany pages
   nemacka.html (Serbian, for fitters) and deutschland.html (German,
   for German construction companies).
   Styles for these two pages only. Header, nav, footer, buttons, .container,
   .page-hero and every colour token come from style.css.

   Table of Contents:
   01. Hero and wall drawing
   02. Sections, columns and items
   03. Projects and site photos
   04. Steps
   05. Questions
   06. Contact band
   07. Company details strip
   08. German page: its own menu and footer
   09. Keyboard focus and reduced motion
   10. Responsive
   ================================================ */

/* ================================================
   HERO AND WALL DRAWING
   .page-hero supplies the navy banner; this turns it into two
   columns, text left and the drywall section drawing right.
   ================================================ */
.nem-hero { text-align: left; padding-bottom: 72px; }
.nem-hero-grid { display: grid; gap: 40px; align-items: center; }
.nem-hero h1 { max-width: 22ch; line-height: 1.1; margin-bottom: 20px; text-wrap: balance; }
.nem-hero .nem-lead {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.92);
  max-width: 52ch;
  margin: 0;
}
.nem-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.nem-btns .btn { min-height: 48px; text-align: center; }
.nem-btn-ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.7);
}
.nem-btn-ghost:hover { background: rgba(255,255,255,0.1); border-color: var(--white); }

.nem-wall { width: 100%; max-width: 560px; height: auto; display: block; }
.nem-wall .w-track { fill: var(--gray-light); }
/* The studs keep the grey they were drawn in. --gray was darkened for text
   on light grounds, and on navy a darker stud would fade. */
.nem-wall .w-stud { fill: #6B7B8D; }
.nem-wall .w-flange { fill: var(--gray-light); opacity: 0.6; }
.nem-wall .w-board { fill: rgba(255,255,255,0.12); stroke: rgba(255,255,255,0.4); stroke-width: 2; }
.nem-wall .w-joint { stroke: rgba(255,255,255,0.4); stroke-width: 2; }
.nem-wall .w-screw { fill: var(--gray-light); }
.nem-wall .w-bay { fill: none; stroke: rgba(255,255,255,0.4); stroke-width: 2; stroke-dasharray: 6 6; }
.nem-wall .w-dim { stroke: var(--white); stroke-width: 1.5; fill: none; }
.nem-wall .w-dim-text {
  fill: var(--white);
  font-family: 'Barlow', sans-serif;
  font-size: 13px;
  font-weight: 600;
}
.nem-wall .w-chalk-end { fill: var(--white); }
/* The chalk line snaps across the wall once on load. */
.nem-chalk {
  stroke: var(--white);
  stroke-width: 3;
  stroke-dasharray: 640;
  stroke-dashoffset: 640;
  animation: nem-snap 1.4s 0.35s cubic-bezier(0.3, 0.7, 0.2, 1) forwards;
}
@keyframes nem-snap { to { stroke-dashoffset: 0; } }

/* ================================================
   SECTIONS, COLUMNS AND ITEMS
   ================================================ */
.nem-section { padding: 80px 0; }
.nem-band {
  background: var(--gray-bg);
  border-top: 1px solid #E5EAF0;
  border-bottom: 1px solid #E5EAF0;
}
/* In-page links land below the fixed header. */
.nem-section[id],
.nem-contact[id] { scroll-margin-top: 60px; }

.nem-section h2,
.nem-contact h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.15;
  color: var(--navy);
  max-width: 26ch;
  margin-bottom: 18px;
  text-wrap: balance;
}
.nem-section h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.25;
  color: var(--navy);
  margin-bottom: 10px;
}
.nem-section p { max-width: 62ch; }
.nem-section .nem-lead,
.nem-contact .nem-lead { font-size: 1.1rem; max-width: 54ch; }

.nem-cols { display: grid; gap: 32px; }
.nem-gap-top { margin-top: 36px; }
.nem-stack { display: grid; gap: 28px; }
.nem-item { border-top: 3px solid var(--navy); padding-top: 16px; }
.nem-item p { font-size: 0.95rem; }

/* ================================================
   PROJECTS AND SITE PHOTOS
   The grid, its thumbnails and the viewer are the Projects pages'
   (.project-photo-grid, .photo-thumb, .lightbox in style.css). Those
   rules assume landscape crops; these photos are upright, 3 wide to
   4 high, so the columns and the tile shape are set here.
   ================================================ */
/* Follows "what we do" on the same white ground, so one gap, not two.
   An in-page link still lands as if that gap were there: without it the
   heading would stop under the fixed header. */
.nem-section.nem-projects { padding-top: 0; scroll-margin-top: 140px; }
.nem-project-list { list-style: none; display: grid; gap: 20px; margin-top: 36px; }
.nem-project-list li {
  border-top: 3px solid var(--navy);
  padding-top: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--navy);
}
.nem-section .nem-photo-note { margin: 40px 0 14px; font-size: 0.95rem; color: var(--text-muted); }
.project-photo-grid.nem-photos { grid-template-columns: repeat(2, 1fr); }
.nem-photos .photo-thumb { aspect-ratio: 3 / 4; }

/* ================================================
   STEPS
   A real sequence, so it is numbered. The number comes from data-n.
   ================================================ */
.nem-steps {
  list-style: none;
  margin-top: 36px;
  display: grid;
  border-left: 2px dashed var(--navy);
}
.nem-steps li { padding: 0 0 28px 28px; position: relative; }
.nem-steps li:last-child { padding-bottom: 0; }
.nem-steps li::before {
  content: attr(data-n);
  position: absolute;
  left: -15px;
  top: -2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--navy);
  color: var(--navy);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
}
.nem-steps strong {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.25;
  color: var(--navy);
}
.nem-steps p { margin-top: 4px; font-size: 0.95rem; }

/* ================================================
   QUESTIONS
   Native <details>, so they open without script.
   ================================================ */
.nem-faq { margin-top: 28px; max-width: 760px; }
.nem-faq details { border-top: 1px solid #DDE3EB; padding: 16px 0; }
.nem-faq details:last-of-type { border-bottom: 1px solid #DDE3EB; }
.nem-faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy);
}
.nem-faq summary::-webkit-details-marker { display: none; }
.nem-faq summary::after {
  content: "+";
  font-size: 1.4rem;
  line-height: 1;
  color: var(--navy);
}
.nem-faq details[open] summary::after { content: "\2013"; }
.nem-faq details p { margin-top: 12px; }

/* ================================================
   CONTACT BAND
   ================================================ */
.nem-contact { background: var(--navy); color: var(--white); padding: 72px 0; }
.nem-contact h2 { color: var(--white); }
.nem-contact .nem-lead { color: rgba(255,255,255,0.92); }

/* ================================================
   COMPANY DETAILS STRIP
   Same ground as the footer below it, so the two read as one block.
   ================================================ */
.nem-legal {
  background: var(--navy-dark);
  color: rgba(255,255,255,0.65);
  font-size: 0.9rem;
  padding: 40px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.nem-legal-grid { display: grid; gap: 20px; }
.nem-legal strong { color: var(--white); font-weight: 600; }
.nem-legal a { color: rgba(255,255,255,0.85); transition: color var(--transition); }
.nem-legal a:hover { color: var(--white); }

/* ================================================
   GERMAN PAGE: ITS OWN MENU AND FOOTER
   deutschland.html speaks German from top to bottom. Its menu lists its
   own sections; the framed last item (.nav-door in style.css) is the way
   to the main site, named by its domain, so it keeps its lower case. The
   footer is one line under the company strip. Both Germany pages switch
   between SR and DE only, the two-link switch of style.css.
   ================================================ */
.main-nav .nav-door a.nav-domain { text-transform: none; letter-spacing: 0.04em; }
.nem-footer { padding-top: 0; }
.nem-legal a[hreflang]::after {
  content: attr(hreflang);
  margin-left: 8px;
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.75;
}

/* ================================================
   KEYBOARD FOCUS AND REDUCED MOTION
   The outline itself, and its white on the header, the footer and the
   photo viewer, come from style.css. Here only the navy grounds that
   exist on the two Germany pages alone.
   ================================================ */
.nem-hero :focus-visible,
.nem-contact :focus-visible,
.nem-legal :focus-visible { outline-color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  .nem-chalk { animation: none; stroke-dashoffset: 0; }
  html { scroll-behavior: auto; }
}

/* ================================================
   RESPONSIVE
   ================================================ */
@media (min-width: 760px) {
  .nem-cols-2 { grid-template-columns: 1fr 1fr; }
  .nem-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .nem-legal-grid { grid-template-columns: 1fr 1fr; }
  .nem-project-list { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .project-photo-grid.nem-photos { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .nem-hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 56px; }
  .nem-wall { justify-self: end; }
}
@media (min-width: 1025px) {
  .project-photo-grid.nem-photos { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 480px) {
  .nem-section { padding: 56px 0; }
  .nem-section.nem-projects { scroll-margin-top: 116px; }
  .nem-contact { padding: 56px 0; }
}