/*
Theme Name: Masschuh Neidhart
Theme URI: https://www.masschuh.net/
Author: Migration von masschuh.net
Description: One-Page-Theme für Schuhmachermeister Alfred Neidhart. Fixe Menüzeile mit Scroll-Navigation zu Kategorien (Schuhe, Reitstiefel, Accessoires) mit Artikeln (Beitragsbild links/rechts) und Inhaltsseiten (Schuhpflege, Werkstatt, Massanleitung, Biografie, Öffnungszeiten, Kontakt, Impressum).
Version: 1.1
Requires PHP: 7.4
Text Domain: masschuh
*/

/* ---------------------------------------------
   0. Grundlagen / Custom Properties
   Palette und Layout an Original-Screenshots angelehnt:
   neutrales Grau/Weiß, edge-to-edge zweispaltige Artikel,
   serifenlose fette Caps-Logo, Serifen-Titel mit Unterstrich.
--------------------------------------------- */
:root{
  --color-bg-gray:     #cccccc;
  --color-bg-white:    #ffffff;
  --color-header-bg:   #dddddd;
  --color-logo-bg:     #c4c4c4;
  --color-active-bg:   #ffffff;
  --color-text:        #2b2b2b;
  --color-text-soft:   #4d4d4d;
  --color-line:        rgba(0,0,0,.18);
  --color-line-soft:   rgba(0,0,0,.12);
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  --header-height: 64px;
  --header-height-mobile: 52px;
  --side-pad: 60px;
  --side-pad-mobile: 24px;
}

*, *::before, *::after{ box-sizing: border-box; }

html{
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

body{
  margin:0;
  background: var(--color-bg-white);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; height:auto; display:block; }

a{ color: var(--color-text); text-decoration: underline; }
a:hover{ color:#000; }

h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--color-text);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 .5em;
}

/* Für reine Textinhalte (Seiten) begrenzte Lesebreite,
   für Artikel-Sektionen volle Breite (edge-to-edge) */
.container{
/*  max-width: 780px;*/
  margin: 0 auto;
  padding: 0 var(--side-pad);
}
@media (max-width: 720px){
  .container{ padding: 0 var(--side-pad-mobile); }
}

/* Skip-Link für Barrierefreiheit */
.skip-link{
  position:absolute; left:-9999px; top:0;
  background:#fff; color:#000; padding:10px 16px; z-index:10000;
}
.skip-link:focus{ left:12px; top:12px; }

/* ---------------------------------------------
   1. Fixe Menüzeile
--------------------------------------------- */
.site-header{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 1000;
  height: var(--header-height);
  background: var(--color-header-bg);
  display:flex;
  align-items:stretch;
}

.site-branding{
  flex: 0 0 auto;
  background: var(--color-logo-bg);
  display:flex;
  align-items:center;
  padding: 0 32px;
}
.site-branding a{
  font-family: var(--font-body);
  font-weight:700;
  font-size: .95rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration:none;
  white-space:nowrap;
}
.site-branding a:hover{ color:#000; }

/* Hauptmenü */
.main-navigation{ flex: 1 1 auto; min-width:0; height:100%; }
.main-navigation ul{
  list-style:none;
  display:flex;
  height:100%;
  flex-wrap: nowrap;
  overflow-x:auto;
  gap: 0;
  margin:0; padding:0 20px 0 0;
  justify-content:space-between;
  scrollbar-width: thin;
}
.main-navigation ul::-webkit-scrollbar{ height:3px; }

.main-navigation li{ flex: 0 0 auto; height:100%; }

.main-navigation a{
  display:flex;
  align-items:center;
  height:100%;
  padding: 0 8px;
  color: var(--color-text-soft);
  font-size:.68rem;
  letter-spacing:.06em;
  font-weight:600;
  text-transform: uppercase;
  white-space:nowrap;
  text-decoration:none;
  transition: background-color .15s ease, color .15s ease;
}
.main-navigation a:hover{ color: var(--color-text); }
.main-navigation a.is-active{
  background: var(--color-active-bg);
  color: var(--color-text);
}

.menu-toggle{
  display:none;
  background:none;
  border: 0;
  color: var(--color-text);
  padding: 0 18px;
  font-size: 1.2rem;
  line-height:1;
}

/* Platz für die fixe Kopfzeile */
.site-main{ padding-top: var(--header-height); }

/* ---------------------------------------------
   2. Hero / Intro
--------------------------------------------- */
.hero{
  background: var(--color-bg-white);
  padding: 56px var(--side-pad);
  text-align:center;
}
.hero h1{
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing:.04em;
  text-transform: uppercase;
  margin-bottom:.4em;
}
.hero p{
  color: var(--color-text-soft);
  font-size:1.05rem;
  max-width: 640px;
  margin: 0 auto;
}

/* ---------------------------------------------
   3. Sektionen allgemein
--------------------------------------------- */
.section-title{
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing:.08em;
  padding: 22px var(--side-pad) 18px;
  margin:0;
  background: var(--color-bg-white);
}
@media (max-width: 720px){
  .section-title{ padding: 18px var(--side-pad-mobile) 14px; }
}
.section-title--centered{
  text-align:center;
  padding-left:0;
  padding-right:0;
}

.section-intro{
  padding: 0 var(--side-pad) 24px;
  color: var(--color-text-soft);
  background: var(--color-bg-white);
}

/* Seiten-Sektionen bekommen etwas Luft und Trennung */
.section-page{ padding: 56px 0; border-top: 1px solid var(--color-line-soft); }
.section-page:nth-of-type(even){ background: var(--color-bg-gray); }

/* ---------------------------------------------
   4. Artikel (Kategorien Schuhe / Reitstiefel / Accessoires)
   Edge-to-edge, zwei Spalten, dünne Trennlinie mittig,
   Hintergrund wechselt pro Artikel zwischen Grau und Weiß.
--------------------------------------------- */
.article-list{ display:block; }

.article{
  position:relative;
  display:grid;
  grid-template-columns: 1fr 1fr;
  align-items:stretch;
  min-height: 420px;
}
.article:nth-child(odd){ background: var(--color-bg-gray); }
.article:nth-child(even){ background: var(--color-bg-white); }

/* Mittige Trennlinie */
.article::before{
  content:"";
  position:absolute;
  top:0; bottom:0; left:50%;
  width:1px;
  background: var(--color-line);
}

/* Standard-Reihenfolge: Text | Bild ("pic-right" = Bild rechts) */
.article .article-body{ order:1; }
.article .article-media{ order:2; }
/* "pic-left" = Bild links */
.article.pic-left .article-media{ order:1; }
.article.pic-left .article-body{ order:2; }

.article .article-body{
  padding: 48px var(--side-pad);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.article .article-body h3{
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing:.03em;
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--color-line);
}
.article .article-body .article-excerpt{
  color: var(--color-text);
  margin: 0 0 .6em;
}
.article .article-body p{ margin: 0 0 .5em; color: var(--color-text); }

.article .article-media{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding: 24px var(--side-pad) 0;
  overflow:hidden;
}
.article .article-media img{
  max-height: 520px;
  width:auto;
  object-fit: contain;
}

/* ---------------------------------------------
   5. Seiten-Sektionen (Schuhpflege, Werkstatt, ...)
--------------------------------------------- */
.page-section-content{
/*  max-width: 720px;*/
  margin: 0 auto;
  padding: 0 var(--side-pad);
}
@media (max-width: 720px){
  .page-section-content{ padding: 0 var(--side-pad-mobile); }
}
.page-section-content img{
  margin: 24px auto;
}
.page-section-content ul{ padding-left: 1.2em; }
.page-section-content blockquote{
  border-left: 3px solid var(--color-line);
  margin: 1.5em 0;
  padding: .2em 1.2em;
  font-style: italic;
  color: var(--color-text-soft);
}

/* Öffnungszeiten / Kontakt Layout mit optionalem Bild */
.split-content{
  display:flex;
  gap: 40px;
  align-items:flex-start;
  flex-wrap:wrap;
}
.split-content .split-text{ flex: 1 1 320px; }
.split-content .split-media{ flex: 1 1 300px; max-width: 380px; }

/* ---------------------------------------------
   6. Footer
--------------------------------------------- */
.site-footer{
  background: var(--color-header-bg);
  color: var(--color-text-soft);
  text-align:center;
  padding: 24px 0;
  font-size:.85rem;
}
.site-footer a{ color: var(--color-text); }

/* ---------------------------------------------
   7. Responsive
--------------------------------------------- */
@media (max-width: 900px){
  .article{ grid-template-columns: 1fr; min-height:0; }
  .article::before{ display:none; }
  .article .article-media,
  .article .article-body{ order: initial !important; }
  .article .article-body{ padding: 32px var(--side-pad-mobile) 20px; }
  .article .article-media{ padding: 0 0 24px; }
  .article .article-media img{ max-height: 420px; width:100%; }
}

@media (max-width: 720px){
  .site-branding{ display:none; }
  .site-header{ height: var(--header-height-mobile); }
  html{ scroll-padding-top: var(--header-height-mobile); }
  .site-main{ padding-top: var(--header-height-mobile); }

  .menu-toggle{ display:inline-block; }

  .main-navigation{
    position: fixed;
    top: var(--header-height-mobile);
    left:0; right:0;
    background: var(--color-header-bg);
    max-height: 0;
    overflow:hidden;
    transition: max-height .25s ease;
  }
  .main-navigation.is-open{ max-height: 80vh; overflow-y:auto; }
  .main-navigation ul{
    flex-direction:column;
    align-items:stretch;
    padding:0;
  }
  .main-navigation li{ height:auto; }
  .main-navigation a{
    height:auto;
    padding: 14px 20px;
    border-bottom: 1px solid var(--color-line-soft);
  }
  .hero{ padding: 36px var(--side-pad-mobile); }
  .section-title{ font-size:1rem; }
}