/*
Theme Name: Ingenieurbüro Pommer
Theme URI: https://ib-pommer.de
Author: SoftTec GmbH
Author URI: https://softtec.de
Description: Schlankes Header-/Footer-Theme für das Ingenieurbüro Pommer (Elektroplanung & Brandschutz). Liefert nur Kopf- und Fußbereich inkl. responsivem Burger-Menü – der Seiteninhalt wird frei im WordPress-Editor (Gutenberg) gepflegt.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ingenieurbuero-pommer
*/

/* =========================================================
   1. Design-Tokens
   ========================================================= */
:root{
  --ibp-navy:#011540;
  --ibp-blue:#0B66DF;
  --ibp-blue-light:#5aa0ff;
  --ibp-bg:#f3f6fb;
  --ibp-ink:#0e1726;
  --ibp-ink-soft:#3a4a63;
  --ibp-line:#e6ebf4;
  --ibp-footer-text:#aebfdc;
  --ibp-footer-muted:#7088b3;
  --ibp-header-h:86px;
  --ibp-maxw:1240px;
  --ibp-pad:40px;
}

/* =========================================================
   2. Basis
   ========================================================= */
*{box-sizing:border-box}
body.ibp-body{
  margin:0;
  font-family:'Public Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--ibp-bg);
  color:var(--ibp-ink);
  -webkit-font-smoothing:antialiased;
}
.ibp-body a{color:inherit;text-decoration:none}

.ibp-site{display:flex;flex-direction:column;min-height:100vh;background:var(--ibp-bg)}
.ibp-main{flex:1 0 auto;width:100%}

/* Bildschirmleser-Hilfe */
.ibp-skip-link{
  position:absolute;left:-9999px;top:0;z-index:1000;
  background:#fff;color:var(--ibp-navy);padding:12px 18px;border-radius:0 0 8px 0;
  font-weight:600;
}
.ibp-skip-link:focus{left:0}

/* =========================================================
   3. Header
   ========================================================= */
.ibp-header{position:sticky;top:0;z-index:90;box-shadow:0 1px 0 rgba(1,21,64,.06)}
.ibp-header__bar{background:#fff;border-bottom:1px solid var(--ibp-line)}
.ibp-header__inner{
  max-width:var(--ibp-maxw);margin:0 auto;padding:0 var(--ibp-pad);
  height:var(--ibp-header-h);display:flex;align-items:center;justify-content:space-between;gap:24px;
}

/* Logo / Brand */
.ibp-brand{display:flex;align-items:center;gap:16px;flex:none}
.ibp-brand img,
.ibp-brand .ibp-brand__logo{
  display:block;width:52px;height:52px;max-width:52px;
  object-fit:contain;flex:none;
}
.ibp-brand__text{display:flex;flex-direction:column;line-height:1}
.ibp-brand__name{
  font-family:'Archivo',sans-serif;font-weight:800;font-size:21px;
  letter-spacing:-.01em;color:var(--ibp-navy);white-space:nowrap;
}
.ibp-brand__sub{
  font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ibp-blue);margin-top:6px;
}

/* Desktop-Navigation */
.ibp-nav{display:flex;align-items:center;gap:6px}
.ibp-menu{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:6px}
.ibp-menu li{margin:0}
.ibp-menu a{
  display:block;padding:10px 16px;font-size:15.5px;font-weight:600;
  color:var(--ibp-ink-soft);border-radius:8px;transition:background .15s,color .15s;
}
.ibp-menu li:first-child a{color:var(--ibp-navy)}
.ibp-menu a:hover,
.ibp-menu .current-menu-item>a,
.ibp-menu .current_page_item>a{background:#f0f4fb;color:var(--ibp-blue)}

/* Kontakt-Button */
.ibp-cta{
  margin-left:14px;display:inline-flex;align-items:center;gap:9px;
  padding:12px 22px;background:var(--ibp-navy);color:#fff !important;
  font-size:15px;font-weight:600;border-radius:9px;
  box-shadow:0 6px 18px rgba(1,21,64,.18);transition:background .15s,box-shadow .15s;
}
.ibp-cta:hover{background:var(--ibp-blue);box-shadow:0 8px 22px rgba(11,102,223,.35)}
.ibp-cta svg{flex:none}

/* Burger-Button (nur mobil sichtbar) */
.ibp-burger{
  display:none;align-items:center;justify-content:center;
  width:48px;height:48px;padding:0;border:1px solid var(--ibp-line);
  background:#fff;border-radius:10px;cursor:pointer;flex:none;
  position:relative;z-index:120;
}
.ibp-burger__box{position:relative;width:24px;height:18px}
.ibp-burger__box span{
  position:absolute;left:0;width:100%;height:2.4px;border-radius:2px;
  background:var(--ibp-navy);transition:transform .28s ease,opacity .2s ease,top .28s ease;
}
.ibp-burger__box span:nth-child(1){top:0}
.ibp-burger__box span:nth-child(2){top:50%;transform:translateY(-50%)}
.ibp-burger__box span:nth-child(3){top:100%;transform:translateY(-100%)}
/* Burger -> X */
.ibp-burger.is-open .ibp-burger__box span:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg)}
.ibp-burger.is-open .ibp-burger__box span:nth-child(2){opacity:0}
.ibp-burger.is-open .ibp-burger__box span:nth-child(3){top:50%;transform:translateY(-50%) rotate(-45deg)}

/* =========================================================
   4. Mobiles Menü (Overlay)
   ========================================================= */
.ibp-mobile-nav{
  position:fixed;top:var(--ibp-header-h);left:0;right:0;bottom:0;z-index:80;
  background:#fff;padding:18px var(--ibp-pad) 40px;
  display:flex;flex-direction:column;gap:6px;
  transform:translateX(100%);opacity:0;visibility:hidden;
  transition:transform .3s ease,opacity .25s ease,visibility 0s linear .3s;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.ibp-mobile-nav.is-open{transform:translateX(0);opacity:1;visibility:visible;transition:transform .3s ease,opacity .25s ease}
.ibp-mobile-nav .ibp-menu{flex-direction:column;align-items:stretch;gap:2px;width:100%}
.ibp-mobile-nav .ibp-menu a{
  padding:16px 14px;font-size:19px;border-radius:10px;
  border-bottom:1px solid var(--ibp-line);
}
.ibp-mobile-nav .ibp-menu li:last-child a{border-bottom:0}
.ibp-mobile-nav .ibp-cta{
  margin:18px 0 0;justify-content:center;width:100%;padding:16px 22px;font-size:16px;
}
body.ibp-menu-open{overflow:hidden}

/* =========================================================
   5. Inhaltsbereich (Gutenberg-Block-Ausrichtung)
   ========================================================= */
.ibp-content{
  max-width:var(--ibp-maxw);margin:0 auto;padding:48px var(--ibp-pad);
}
.ibp-content > .alignfull{
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  max-width:100vw;width:100vw;
}
.ibp-content > .alignwide{
  margin-left:calc(50% - 50vw + var(--ibp-pad));
  margin-right:calc(50% - 50vw + var(--ibp-pad));
}

/* =========================================================
   6. Footer
   ========================================================= */
.ibp-footer{background:var(--ibp-navy);color:var(--ibp-footer-text);margin-top:auto}
.ibp-footer__accent{height:4px;background:linear-gradient(90deg,var(--ibp-blue) 0%,var(--ibp-navy) 60%)}
.ibp-footer__inner{max-width:var(--ibp-maxw);margin:0 auto;padding:64px var(--ibp-pad) 0}
.ibp-footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:48px}

.ibp-footer__brand{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.ibp-footer__brand img{display:block;width:46px;height:46px}
.ibp-footer__brand-name{font-family:'Archivo',sans-serif;font-weight:800;font-size:18px;color:#fff}
.ibp-footer__brand-sub{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#5f7bb0;margin-top:6px}
.ibp-footer__about{font-size:14.5px;line-height:1.65;color:#92a6cc;max-width:320px}

.ibp-footer h4{
  font-family:'Archivo',sans-serif;font-size:13px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:#fff;margin:0 0 18px;
}
.ibp-footer__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:14.5px}
.ibp-footer__list a{color:var(--ibp-footer-text);transition:color .15s}
.ibp-footer__list a:hover{color:#fff}

.ibp-footer__contact{display:flex;flex-direction:column;gap:14px;font-size:14.5px}
.ibp-footer__contact a{display:flex;align-items:center;gap:11px;color:var(--ibp-footer-text);transition:color .15s}
.ibp-footer__contact a:hover{color:#fff}
.ibp-footer__contact svg{flex:none}
.ibp-footer__address{align-items:center}
.ibp-footer__address span{line-height:1.6}

.ibp-footer__bottom{
  margin-top:56px;padding:26px 0;border-top:1px solid rgba(174,191,220,.16);
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  font-size:13.5px;color:var(--ibp-footer-muted);flex-wrap:wrap;
}
.ibp-footer__legal{list-style:none;margin:0;padding:0;display:flex;gap:26px}
.ibp-footer__legal a{color:var(--ibp-footer-muted);transition:color .15s}
.ibp-footer__legal a:hover{color:#fff}

/* =========================================================
   7. Responsive
   ========================================================= */
@media (max-width:980px){
  :root{--ibp-header-h:70px;--ibp-pad:22px}
  .ibp-nav{display:none}
  .ibp-burger{display:inline-flex}
  .ibp-brand img,.ibp-brand .ibp-brand__logo{width:44px;height:44px;max-width:44px}
  .ibp-brand__name{font-size:18px}
  .ibp-brand__sub{font-size:10.5px;letter-spacing:.14em}
  .ibp-footer__grid{grid-template-columns:1fr 1fr;gap:40px}
  .ibp-footer__brand-col{grid-column:1 / -1}
}
@media (max-width:560px){
  .ibp-brand__sub{display:none}
  .ibp-footer__inner{padding:44px var(--ibp-pad) 0}
  .ibp-footer__grid{grid-template-columns:1fr;gap:34px}
  .ibp-footer__about{max-width:none}
  .ibp-footer__bottom{margin-top:36px;padding:24px 0;flex-direction:column;align-items:flex-start;gap:16px}
  .ibp-footer__legal{gap:22px}
  .ibp-content{padding:32px var(--ibp-pad)}
}