/* ==========================================================================
   projekt9 — SolidDienst-Graven :: on-brand enhancements
   Sticky header · bigger transparent logo · mobile menu · proper footer
   Uses ONLY the existing design tokens (--primary, --earth, --background,
   --foreground, --muted-foreground, --border, --font-display) so the look
   stays 100% consistent with the compiled Tailwind stylesheet.
   ========================================================================== */

:root {
  --p9-dark:   oklch(19% .020 50);      /* deep earthy brown-black (footer / scrolled header) */
  --p9-dark-2: oklch(26% .028 50);
  --p9-header-h: 5rem;
}

html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
body.p9-noscroll { overflow: hidden; }

/* ---- Sticky / fixed header -------------------------------------------- */
.p9-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  transition: background-color .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}
.p9-header.is-scrolled {
  background-color: oklch(19% .020 50 / .90);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 10px 34px -14px rgba(0,0,0,.55);
}
.p9-bar { transition: padding-top .3s ease, padding-bottom .3s ease; }
.p9-header.is-scrolled .p9-bar { padding-top: .85rem; padding-bottom: .85rem; }

/* ---- Bigger, background-free logo ------------------------------------- */
.p9-logo {
  height: 4rem; width: auto; max-width: 5rem;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.45));
  transition: height .3s ease;
}
.p9-header.is-scrolled .p9-logo { height: 3.25rem; }
@media (max-width: 640px) { .p9-logo { height: 3.4rem; } }

/* ---- Hamburger (mobile only) ----------------------------------------- */
.p9-burger {
  display: inline-flex; flex-direction: column; justify-content: center;
  gap: 5px; width: 46px; height: 46px; padding: 11px;
  background: transparent; border: 0; cursor: pointer;
}
.p9-burger span {
  display: block; height: 2px; width: 100%; border-radius: 2px;
  background: var(--background);
  transition: transform .3s ease, opacity .3s ease;
}
.p9-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.p9-burger.open span:nth-child(2) { opacity: 0; }
.p9-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 768px) { .p9-burger { display: none; } }

/* ---- Full-screen mobile menu (mega) ---------------------------------- */
.p9-mobile-menu {
  position: fixed; inset: 0; z-index: 60;
  background: var(--primary);
  color: var(--background);
  display: flex; flex-direction: column;
  padding: 1.5rem 1.5rem 2rem;
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
  overflow-y: auto;
}
.p9-mobile-menu.open { opacity: 1; visibility: visible; }
@media (min-width: 768px) { .p9-mobile-menu { display: none !important; } }

.p9-mm-top { display: flex; align-items: center; justify-content: space-between; }
.p9-mm-top .p9-logo { filter: none; }
.p9-mm-close {
  width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer; color: var(--background);
  font-size: 2rem; line-height: 1;
}
.p9-mm-nav { display: flex; flex-direction: column; margin-top: 2.25rem; }
.p9-mm-nav a {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.2rem, 11vw, 3.25rem); line-height: 1.15; letter-spacing: .02em;
  color: var(--background); text-decoration: none;
  padding: .55rem 0; border-bottom: 1px solid oklch(100% 0 0 / .18);
  transition: color .2s ease, padding-left .2s ease;
}
.p9-mm-nav a:hover, .p9-mm-nav a:active { color: var(--earth); padding-left: .35rem; }
.p9-mm-cta { margin-top: auto; padding-top: 2rem; display: flex; flex-direction: column; gap: 1rem; }
.p9-mm-offerte {
  display: block; text-align: center; text-decoration: none;
  background: var(--earth); color: var(--primary);
  font-family: var(--font-display); font-size: 1.5rem; letter-spacing: .06em;
  padding: 1rem;
}
.p9-mm-phone {
  display: block; text-align: center; text-decoration: none; color: var(--background);
  font-family: var(--font-display); font-size: 1.7rem; letter-spacing: .03em;
}
.p9-mm-phone small { display: block; font-family: inherit; font-size: .7rem; letter-spacing: .25em; text-transform: uppercase; opacity: .75; margin-bottom: .15rem; }

/* ---- Proper footer ---------------------------------------------------- */
.p9-footer { background: var(--p9-dark); color: oklch(82% .02 75); }
.p9-footer-inner { padding-top: 4.5rem; padding-bottom: 2rem; }
.p9-footer-cols { display: grid; grid-template-columns: 1fr; gap: 2.75rem; }
@media (min-width: 560px)  { .p9-footer-cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .p9-footer-cols { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 3rem; } }

.p9-footer h4 {
  font-family: var(--font-display); font-weight: 400;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--earth); font-size: 1.15rem; margin-bottom: 1.15rem;
}
.p9-footer a { color: oklch(82% .02 75); text-decoration: none; transition: color .2s ease; }
.p9-footer a:hover { color: var(--earth); }
.p9-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .65rem; font-size: .95rem; }

.p9-footer-brand .p9-brand-row { display: flex; align-items: center; gap: .85rem; }
.p9-footer-logo { height: 4.75rem; width: auto; max-width: 6rem; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.p9-footer-brand .p9-wordmark { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: .06em; color: var(--background); }
.p9-footer-brand p { font-size: .95rem; line-height: 1.65; margin: 1.15rem 0 0; max-width: 34ch; color: oklch(74% .02 75); }
.p9-footer-area { margin-top: 1.15rem; display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .15em; color: var(--earth); }

.p9-contact-line { display: block; margin-bottom: 1rem; }
.p9-contact-line small { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .18em; color: oklch(62% .02 75); margin-bottom: .2rem; }
.p9-contact-line a, .p9-contact-line span { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: .02em; color: var(--background); }
.p9-contact-line a:hover { color: var(--earth); }

.p9-footer-cta {
  display: inline-flex; align-items: center; gap: .6rem; margin-top: .5rem;
  background: var(--primary); color: var(--background); text-decoration: none;
  font-family: var(--font-display); font-size: 1.15rem; letter-spacing: .06em;
  padding: .8rem 1.4rem; transition: background-color .2s ease, transform .1s ease;
}
.p9-footer-cta:hover { background: var(--earth); color: var(--primary); }

.p9-footer-bottom {
  margin-top: 3.25rem; padding-top: 1.6rem; border-top: 1px solid oklch(100% 0 0 / .10);
  display: flex; flex-direction: column; gap: .8rem;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: oklch(60% .02 75);
}
@media (min-width: 768px) { .p9-footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; } }