/*
Theme Name: Hard Coded Cologne
Theme URI: https://hard-coded.cologne
Author: Hard Coded Cologne
Author URI: https://hard-coded.cologne
Description: Schlankes Custom-Theme fuer hard-coded.cologne. Transparenter (nicht klebender) Header, dunkler Footer, alle Schriften selbst gehostet (kein Google), keine Fremd-Framework-Abhaengigkeit. Seiteninhalt wird voll ausgeliefert (Full-Width, ohne Titel).
Version: 1.0.0
Requires at least: 6.0
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: hcc
*/

/* ============================================================
   SCHRIFTEN – selbst gehostet (kein Google, DSGVO-konform)
   ============================================================ */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/montserrat-400.woff2) format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/montserrat-700.woff2) format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/nunito-700.woff2) format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url(assets/fonts/nunito-800.woff2) format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:900;font-display:swap;src:url(assets/fonts/nunito-900.woff2) format('woff2');}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/nunito-sans-400.woff2) format('woff2');}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/nunito-sans-600.woff2) format('woff2');}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/nunito-sans-700.woff2) format('woff2');}

/* ============================================================
   BASIS
   ============================================================ */
:root{
  --hcc-dark:      #0f1117;
  --hcc-blue:      #0067FF;   /* Astra global-color-0  (Links-Hover) */
  --hcc-blue-1:    #005EE9;   /* Astra global-color-1  (Button-Text) */
  --hcc-white:     #ffffff;
  --hcc-nav:       rgba(255,255,255,0.62);
  --hcc-max:       1200px;
  --hcc-header-h:  98px;
}
html{ box-sizing:border-box; }
*,*::before,*::after{ box-sizing:inherit; }
/* Basis absichtlich auf `body` (Spezifitaet 0,0,1), damit die globalen
   body-Styles aus dem eingefuegten Seiten-HTML (gleiche Spezifitaet, spaeter
   im Quelltext) ihre eigene Schrift/Groesse behalten. Header/Footer setzen
   ihre Schrift separat und explizit -> unberuehrt. */
body{
  margin:0;
  background:var(--hcc-dark);
  color:#e8eaf6;
  font-family:'Montserrat',sans-serif;
  font-weight:400;
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
.hcc-main{ position:relative; z-index:1; }
img{ max-width:100%; height:auto; }

/* ============================================================
   HEADER  (transparent, NICHT sticky -> absolute, scrollt weg)
   Font/Abstaende explizit gesetzt, damit globale Styles aus dem
   eingefuegten Seiten-HTML sie nicht ueberschreiben.
   ============================================================ */
.hcc-header{
  position:absolute;
  top:0; left:0; right:0;
  z-index:100;
  background:transparent;
}
.hcc-header, .hcc-header *{
  font-family:'Montserrat',sans-serif;
  box-sizing:border-box;
}
.hcc-header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  min-height:var(--hcc-header-h);
  padding:11px 35px;
  margin:0;
}
.hcc-logo,
.hcc-header .custom-logo-link{ display:inline-flex; align-items:center; line-height:0; flex-shrink:0; }
.hcc-logo svg{ width:109.2px; height:auto; display:block; }
/* optional per Customizer hochgeladenes Logo */
.hcc-header .custom-logo{ width:auto; height:auto; max-width:130px; max-height:74px; display:block; }

.hcc-nav{ display:flex; align-items:center; gap:1.9rem; }
.hcc-nav-list{
  display:flex; align-items:center; gap:1.9rem;
  list-style:none; margin:0; padding:0;
}
.hcc-nav-list a{
  color:var(--hcc-nav);
  text-decoration:none;
  font-size:15px;
  font-weight:400;
  line-height:1;
  transition:color .2s;
}
.hcc-nav-list a:hover,
.hcc-nav-list a:focus-visible,
.hcc-nav-list .current a,
.hcc-nav-list .current-menu-item > a,
.hcc-nav-list .current_page_item > a,
.hcc-nav-list .current-menu-ancestor > a{ color:var(--hcc-white); }

.hcc-btn{
  display:inline-block;
  background:var(--hcc-white);
  color:var(--hcc-blue-1);
  font-family:'Nunito',sans-serif;
  font-weight:700;
  font-size:15px;
  line-height:1;
  text-transform:capitalize;
  text-decoration:none;
  padding:12px 26px;
  border-radius:100px;
  transition:transform .2s, box-shadow .2s, background .2s;
  white-space:nowrap;
}
.hcc-btn:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.35); background:#f2f5ff; }

/* Hamburger */
.hcc-nav-toggle{
  display:none;
  width:44px; height:44px;
  border:none; background:transparent; cursor:pointer;
  padding:10px; margin:0;
  align-items:center; justify-content:center;
}
.hcc-nav-toggle span{
  display:block; position:relative;
  width:24px; height:2px; background:var(--hcc-white);
  transition:transform .25s, opacity .25s;
}
.hcc-nav-toggle span + span{ margin-top:6px; }
.hcc-nav-toggle.is-open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.hcc-nav-toggle.is-open span:nth-child(2){ opacity:0; }
.hcc-nav-toggle.is-open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* ============================================================
   FOOTER  (dunkel)
   ============================================================ */
.hcc-footer{
  background:var(--hcc-dark);
  padding:60px 35px 34px;
}
.hcc-footer, .hcc-footer *{
  font-family:'Montserrat',sans-serif;
  box-sizing:border-box;
}
.hcc-footer-inner{
  max-width:var(--hcc-max);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:60px;
  align-items:start;
}
.hcc-foot-tagline{
  color:var(--hcc-white);
  font-size:15px;
  line-height:1.75;
  margin:0;
}
.hcc-foot-title{
  color:var(--hcc-white);
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  font-size:21px;
  line-height:1.4;
  margin:0 0 1.1rem;
}
.hcc-foot-menu{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem; }
.hcc-foot-menu a{
  color:var(--hcc-white);
  text-decoration:none;
  font-size:15px;
  transition:color .2s;
}
.hcc-foot-menu a:hover,
.hcc-foot-menu a:focus-visible{ color:var(--hcc-blue); }

.hcc-social{ list-style:none; margin:0; padding:0; display:flex; gap:12px; flex-wrap:wrap; }
.hcc-social a{
  width:40px; height:40px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s;
}
.hcc-social a:hover{ transform:scale(1.1); }
.hcc-social svg{ width:22px; height:22px; display:block; }
.hcc-social .hcc-li{   background:#0d66c2; }
.hcc-social .hcc-li svg{ fill:#fff; }
.hcc-social .hcc-ig{   background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%); }
.hcc-social .hcc-ig svg{ fill:#fff; }
.hcc-social .hcc-mail{ background:#ffffff; }
.hcc-social .hcc-mail svg{ fill:#1a1f2b; }

.hcc-copyright{
  max-width:var(--hcc-max);
  margin:40px auto 0;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.08);
  text-align:center;
}
.hcc-copyright p{
  color:var(--hcc-white);
  font-size:14px;
  margin:0;
}

/* ============================================================
   RESPONSIVE  (Astra-Breakpoint 921px)
   ============================================================ */
@media (max-width:921px){
  .hcc-nav-toggle{ display:flex; }
  .hcc-nav{
    position:absolute;
    top:100%; left:0; right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--hcc-dark);
    border-top:1px solid rgba(255,255,255,.08);
    padding:8px 0;
    display:none;
    box-shadow:0 20px 40px rgba(0,0,0,.5);
  }
  .hcc-nav.is-open{ display:flex; }
  .hcc-nav-list{ flex-direction:column; align-items:stretch; gap:0; width:100%; }
  .hcc-nav-list a{ display:block; padding:14px 35px; color:rgba(255,255,255,.85); }
  .hcc-nav-list a:hover,
  .hcc-nav-list .current a,
  .hcc-nav-list .current-menu-item > a,
  .hcc-nav-list .current_page_item > a{ color:#fff; background:rgba(255,255,255,.04); }
  .hcc-btn{ margin:12px 35px; text-align:center; }
}
@media (max-width:980px){
  .hcc-footer-inner{ grid-template-columns:repeat(2,1fr); gap:40px; }
}
@media (max-width:600px){
  .hcc-header-inner{ padding:11px 20px; }
  .hcc-footer{ padding:44px 20px 28px; }
  .hcc-footer-inner{ grid-template-columns:1fr; gap:34px; text-align:center; }
  .hcc-foot-menu{ align-items:center; }
  .hcc-social{ justify-content:center; }
  .hcc-nav-list a, .hcc-btn{ padding-left:20px; padding-right:20px; }
  .hcc-btn{ margin-left:20px; margin-right:20px; }
}

@media (prefers-reduced-motion: reduce){
  .hcc-header *, .hcc-footer *{ transition:none !important; }
}