/*
Theme Name: TeutoTech Base
Theme URI: https://teuto-tech.com
Author: TeutoTech & Jett
Description: Schlankes WordPress-Theme im Shopify-Stil. Header mit Menü & Icons, WooCommerce-ready, Customizer-Optionen (Logo/Container). Keine fertigen Content-Templates.
Version: 0.7
Text Domain: teutotech
License: GPLv2 or later
*/

:root{
  --color-primary:#0078d4;
  --color-primary-hover:#005bb5;
  --container-width:1100px;
  --font-base:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

html{font-family:var(--font-base);}
body{margin:0;color:#333;background:#fff;line-height:1.6;}
img{max-width:100%;height:auto;display:block;}
.container{max-width:var(--container-width);margin:0 auto;padding:0 20px;}
.section-heading{font-size:32px;margin-bottom:30px;text-align:center;}
.cta-button{background:var(--color-primary);color:#fff;padding:10px 18px;border-radius:6px;text-decoration:none;display:inline-block;transition:background .25s;}
.cta-button:hover{background:var(--color-primary-hover);}
.card{border:1px solid #ddd;border-radius:10px;background:#fff;padding:20px;transition:transform .3s,box-shadow .3s;}
.card:hover{transform:translateY(-5px);box-shadow:0 8px 16px rgba(0,0,0,.08);}

/* ==== Header ==== */
.header-bar{
  display:flex;
  align-items:center;
  gap:20px;
  justify-content:flex-start;
}
.main-nav{ margin-left:32px; }
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:18px;flex-wrap:wrap;}
.main-nav a{text-decoration:none;color:#333;}
.main-nav a:hover,.main-nav .current-menu-item > a{color:var(--color-primary);}
.header-icons{margin-left:auto;display:flex;gap:16px;align-items:center;}
.header-icons a{color:#333;text-decoration:none;position:relative;font-size:20px;line-height:1;}
.header-icons .cart-count{position:absolute;top:-6px;right:-10px;background:var(--color-primary);color:#fff;font-size:11px;line-height:1;padding:2px 5px;border-radius:10px;}

/* Search overlay */
.search-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:100;}
.search-overlay.active{display:flex;}
.search-overlay form{background:#fff;padding:20px;border-radius:8px;max-width:500px;width:90%;}

/* Hero (generic) */
.hero{position:relative;color:#fff;text-align:center;display:flex;align-items:center;justify-content:center;min-height:55vh;background-size:cover;background-position:center;}
.hero::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.35);z-index:1;}
.hero__content{position:relative;z-index:2;max-width:900px;padding:20px;opacity:0;transform:translateY(20px);transition:opacity 1s ease,transform 1s ease;text-shadow:0 1px 4px rgba(0,0,0,.6);}
.hero__content.visible{opacity:1;transform:translateY(0);}
.hero__content img{display:block;margin:0 auto 20px;}

/* Single Product */
.tt-prod-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
.tt-prod-title{margin:0 0 12px;font-size:28px;}
.tt-prod-summary .price{font-size:24px;color:var(--color-primary);margin:12px 0;}
.tt-prod-badges{margin-top:24px;}

@media(max-width:900px){
  .tt-prod-grid{grid-template-columns:1fr;}
}
@media(max-width:768px){
  .section-heading{font-size:28px;}
  .hero{min-height:400px;}
}

/* ==== v07: PC-Beispiele gleich hoch & Button unten ==== */
#pc-beispiele .pc-box{
  display:flex;
  flex-direction:column;
  height:100%;
}
#pc-beispiele .pc-box .cta-button{
  margin-top:auto;
}
#pc-beispiele > div{align-items:stretch;}

/* ==== v08 fixes ==== */
.site-header{padding:24px 0 16px;}
/* Hero logo force center */
.hero-content-fadein img,
#hero-fadein img,
.hero__content img{
  display:block;
  margin:0 auto 20px !important;
}
/* PC-Karten gleiche Höhe + smoother hover */
#pc-beispiele .pc-box{
  display:flex;
  flex-direction:column;
  height:100%;
  transition:transform .3s ease, box-shadow .3s ease;
}
#pc-beispiele .pc-box .cta-button{margin-top:auto;}
#pc-beispiele > div{align-items:stretch;}

/* ==== v09: Social icon imgs, PC boxes equal heights, section bg, smooth hover out ==== */

/* extra top padding already set; keep */

#pc-beispiele{
  background-color:#f5f7fa;
  padding-bottom:60px;
}

#pc-beispiele .pc-box{
  display:flex;
  flex-direction:column;
  height:100%;
  transition:transform .3s ease, box-shadow .3s ease;
}
#pc-beispiele .pc-box:hover{
  transform:translateY(-5px);
  box-shadow:0 8px 16px rgba(0,0,0,.08);
}
#pc-beispiele .pc-box .cta-button{margin-top:auto;}
#pc-beispiele > div{align-items:stretch;}

/* Make meta text / headings consistent */
#pc-beispiele .pc-box p:first-of-type{min-height:24px;}
#pc-beispiele .pc-box h3{min-height:48px;}
#pc-beispiele .pc-box p:nth-of-type(2){flex-grow:1;}

/* Social image icons */
.footer-social img{
  width:24px;
  height:24px;
  display:inline-block;
}
.footer-social a{
  display:inline-flex;
  align-items:center;
}
.footer-social a + a{margin-left:14px;}

/* ==== v10 responsive + align fixes ==== */

/* Full-bleed hero/background sections */
.hero-bg-compact,
.hero{
  width:100vw;
  margin-left:calc(-50vw + 50%);
}

/* Extra top padding header already set */

/* PC-Beispiele grid responsive & no overlap */
#pc-beispiele > div{
  display:grid !important;
  gap:24px;
  grid-template-columns:repeat(3,1fr);
}
@media(max-width:1024px){
  #pc-beispiele > div{
    grid-template-columns:repeat(2,1fr);
  }
}
@media(max-width:680px){
  #pc-beispiele > div{
    grid-template-columns:1fr;
  }
}

#pc-beispiele{
  background-color:#f5f7fa;
  padding:40px 20px 70px;
  margin:0;
}

/* Cards equal height / typography alignment */
#pc-beispiele .pc-box{
  display:flex;
  flex-direction:column;
  height:100%;
  transition:transform .3s ease, box-shadow .3s ease;
}
#pc-beispiele .pc-box:hover{
  transform:translateY(-5px);
  box-shadow:0 8px 16px rgba(0,0,0,.08);
}
#pc-beispiele .pc-box p:first-of-type{min-height:34px;} /* meta line */
#pc-beispiele .pc-box h3{min-height:50px;margin-top:6px;}
#pc-beispiele .pc-box p:nth-of-type(2){flex-grow:1;}
#pc-beispiele .pc-box .cta-button{margin-top:auto;}

/* Smooth back from hover is already by transition on base state */

/* V13 socials list */
.tt-socials{list-style:none;margin:0;padding:0;display:flex;gap:14px;}
.tt-socials img{width:28px;height:28px;display:block;filter:brightness(0) invert(1);transition:opacity .2s;}
.tt-socials a:hover img{opacity:.75;}


/* v15: make social icons black and open in new tab handled in footer.php */
.footer-col:last-child img{filter:brightness(0) saturate(100%) contrast(100%);}
.footer-col:last-child a:hover img{opacity:.75;}

/* v16 footer socials */
.tt-socials img{filter:brightness(0);opacity:.9;transition:opacity .2s;}
.tt-socials a:hover img{opacity:1;}


/* === Mobile header/menu enhancements (v16-fix) === */
.menu-toggle{display:none;}
@media (max-width: 991px){
  .header-bar{display:flex; align-items:center; gap:12px;}
  .custom-logo, .site-branding img{max-width:120px; height:auto;}
  .menu-toggle{display:block; margin-left:auto; font-size:28px; background:none; border:0; cursor:pointer; line-height:1;}
  .main-nav{position:absolute; top:100%; left:0; right:0; background:#fff; border-top:1px solid #eee; display:none; padding:12px 20px; z-index:50;}
  body.menu-open .main-nav{display:block;}
  .main-nav ul{display:flex; flex-direction:column; gap:12px; margin:0; padding:0; list-style:none;}
  /* Remove search icon if any remnants */
  #tt-search-toggle{display:none !important;}
  /* Hero text sizing on mobile */
  .wp-block-cover .wp-block-cover__inner-container{text-align:center;}
  .wp-block-cover h1{font-size:1.6rem; line-height:1.2;}
  .wp-block-cover p{font-size:1rem;}
}