/*
Theme Name: Klavierunterricht Werder – Child
Template: astra
Author: webntricks
Version: 1.0.0
Description: Pixel-faithful child theme cloning the original klavierunterricht-werder.de design on Astra + Gutenberg.
*/

/* ===== Fonts (match production: Source Sans Pro + Fredoka display) ===== */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,300;0,400;0,600;0,700;1,300&family=Fredoka:wght@500;600;700&family=Great+Vibes&display=swap');

:root{
  --kw-lavender:#E6E6FA;
  --kw-snow:#FFFAFA;
  --kw-yellow:#FED701;
  --kw-purple:#2E073B;
  --kw-ink:#353538;
  --kw-body:#1a1a1a;
}

/* ===== Page as a centered card on lavender (exact prod specs) ===== */
/* Force lavender site background (#E6E6FA) — Astra's dynamic CSS sets body white otherwise */
html, body{ background-color:var(--kw-lavender) !important; }
body{ font-family:"Source Sans 3","Source Sans Pro",sans-serif; font-weight:300; color:var(--kw-body); }
/* The whole central card is snow #FFFAFA */
.site, .site-content, .ast-container, .site-content .entry-content,
.site-primary-header-wrap, .site-footer{ background-color:var(--kw-snow); }
.site{ max-width:1000px; margin:50px auto; background-color:var(--kw-snow);
  border-radius:0; box-shadow:rgba(0,0,0,0.16) 0px 1px 4px 0px; overflow:visible; }
.ast-container{ max-width:1000px; }
.site-content .ast-container{ padding-left:20px; padding-right:20px; }
.site-content{ padding-top:10px; padding-bottom:30px; margin:2rem 0; }
.entry-content .wp-block-columns.are-vertically-aligned-top.is-layout-flex{ padding:0; }
.ast-plain-container.ast-no-sidebar #primary{ margin-top:0; }

/* ===== Header / logo ===== */
.site-header, .ast-primary-header-bar{ background:var(--kw-snow) !important; }
/* Fine hairline dashed separator (~0.5px, black) — matches prod */
.ast-primary-header-bar{ border-bottom:0.5px dashed #000; }
.site-title, .site-title a{ font-family:"Fredoka",sans-serif !important; font-weight:700 !important;
  font-size:30px !important; color:var(--kw-ink) !important; line-height:1.1; }
.site-title a{ background:linear-gradient(var(--kw-yellow),var(--kw-yellow)); background-size:100% 78%;
  background-position:0 62%; background-repeat:no-repeat; padding:0 6px; }

/* ===== Primary navigation ===== */
.main-header-menu .menu-link{ font-family:"Source Sans 3",sans-serif; font-weight:600; color:var(--kw-ink) !important;
  text-transform:none; font-size:17px; }
.main-header-menu .current-menu-item > .menu-link{ text-decoration:underline; text-decoration-color:var(--kw-yellow);
  text-decoration-thickness:3px; text-underline-offset:5px; }
.main-header-menu .menu-link:hover{ color:#000 !important; }

/* ===== Headings with yellow underline accent ===== */
.entry-content h1,.entry-content h2,.entry-content h3{ font-family:"Source Sans 3",sans-serif; color:var(--kw-ink);
  font-weight:600; }
.entry-content h2,.entry-content h3{ display:inline-block; padding-bottom:3px;
  background:linear-gradient(var(--kw-yellow),var(--kw-yellow)); background-size:100% 3px;
  background-position:0 100%; background-repeat:no-repeat; }
.entry-title{ font-size:26px; }

/* ===== Body links: dashed #ffd800 underline → wavy on hover (exact prod) ===== */
.entry-content a{
  color:var(--kw-body);
  text-decoration: underline !important;
  text-decoration-thickness: 0.125rem !important;
  text-decoration-color: #ffd800 !important;
  text-decoration-style: dashed !important;
  text-underline-offset: 0.25rem !important;
  transition: all 0.3s ease-in-out !important;
}
.entry-content a:hover{ text-decoration-style: wavy !important; }

/* ===== E-Mail: same dashed #ffd800 → wavy hover effect as links ===== */
.kw-email{
  color:var(--kw-body);
  text-decoration: underline;
  text-decoration-thickness: 0.125rem;
  text-decoration-color: #ffd800;
  text-decoration-style: dashed;
  text-underline-offset: 0.25rem;
  transition: all 0.3s ease-in-out;
}
.kw-email:hover{ text-decoration-style: wavy; }

/* ===== Sidebar info cards (exact prod specs) ===== */
.kw-card{ border-radius:9px; padding:15px 18px; margin-bottom:35px; background:var(--kw-snow);
  box-shadow:rgba(0,0,0,0.16) 0px 1px 4px 0px; }
.kw-card h3{ margin-top:0; }

/* ===== Yellow CTA buttons ===== */
.wp-block-button__link, .kw-btn{ background:var(--kw-yellow) !important; color:#111 !important; font-weight:700 !important;
  border-radius:6px !important; text-transform:none; box-shadow:0 3px 10px rgba(46,7,59,.12); }

/* Sticky "Probestunde vereinbaren" is provided by the tawk.to widget (removed the duplicate CSS button). */
/* Remove Astra back-to-top button */
#ast-scroll-top{ display:none !important; }

/* ===== BLOG design (SquareType-inspired) ===== */
/* Category badge with decorative "B" */
.kw-postcat{ display:flex; align-items:center; gap:14px; margin:0 0 20px; }
.kw-bicon{ display:inline-flex; align-items:center; justify-content:center; width:54px; height:54px; flex:0 0 54px;
  background:var(--kw-yellow); color:#111; font-family:'Great Vibes',cursive; font-weight:600; text-transform:uppercase;
  font-size:38px; line-height:1; padding:10px; box-sizing:border-box; }
.kw-catlabel{ text-transform:uppercase; letter-spacing:2px; font-size:12px; font-weight:600; color:#9a9a9a; }
.kw-catlabel::before{ content:"—  "; }

/* Breadcrumb */
.kw-breadcrumb{ font-size:14px; color:#b0b0b0; margin:0 0 22px; }
.kw-breadcrumb a{ color:#b0b0b0; text-decoration:none !important; }
.kw-breadcrumb a:hover{ color:var(--kw-ink); }
.kw-breadcrumb .sep{ margin:0 8px; color:#cfcfcf; }
.kw-breadcrumb .cur{ color:#cfcfcf; }

/* Custom next/prev nav (production style) */
.single .post-navigation, .single nav.post-navigation, .single .ast-single-post-navigation{ display:none !important; }
.kw-postnav{ text-align:center; margin:44px 0 10px; }
.kw-nav-next, .kw-nav-prev{ display:block; text-decoration:none !important; margin:14px 0; }
.kw-nav-label{ display:inline-flex; align-items:center; gap:12px; text-transform:uppercase; letter-spacing:1.5px;
  font-size:12px; font-weight:600; color:#9a9a9a; }
.kw-nav-arrow{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px;
  background:#7b52ab; color:#fff; border-radius:3px; font-size:18px; line-height:1; }
.kw-nav-h{ display:inline-block; color:#111; font-weight:700; font-size:19px; margin-top:10px; margin-left:5px;
  background:linear-gradient(var(--kw-yellow),var(--kw-yellow)); background-size:100% 3px; background-position:0 100%;
  background-repeat:no-repeat; padding-bottom:3px; }

/* No white background on single; hide comments */
.single #primary, .single .ast-article-single, .single .entry-content, .single .ast-container{ background:transparent !important; }
.single #comments, .single .comments-area, .single .comment-respond{ display:none !important; }

/* Single-post: full content width, less top space, no author/date meta */
.single .site-content > .ast-container{ max-width:100% !important; padding-left:0px !important; padding-right:44px !important; }
.single #primary, .single #main.site-main{ max-width:100% !important; width:100% !important; }
.single #primary, .single #main.site-main, .single .ast-article-single{ padding-top:0 !important; margin-top:0 !important; }
.single .kw-breadcrumb{ margin-top:0; }
.single .entry-header .entry-meta, .single .ast-single-post .entry-meta, .single .post-meta, .single .ast-single-post-order-meta{ display:none !important; }

/* Manual single-post 2-column layout (~3/4 content, 1/4 sidebar) */
.single #main.site-main{ display:grid; grid-template-columns:3fr 1fr; gap:56px; align-items:start; }
.single #main.site-main > *{ grid-column:1; min-width:0; }
.single #main.site-main > #kw-neueste{ grid-column:2; }
#kw-neueste{ position:sticky; top:30px; align-self:start; }
#kw-neueste .kw-neueste-title{ text-transform:uppercase; letter-spacing:1px; font-size:14px; color:#333;
  display:inline-block; background:linear-gradient(var(--kw-yellow),var(--kw-yellow)); background-size:100% 3px;
  background-position:0 100%; background-repeat:no-repeat; padding-bottom:3px; margin:0 0 20px; }
#kw-neueste ul{ list-style:none; margin:0; padding:0; }
#kw-neueste li{ margin:0 0 18px; line-height:1.45; }
#kw-neueste a{ color:#6a6a6a; text-decoration:none; font-size:15px; }
#kw-neueste a:hover{ color:var(--kw-ink); }
@media (max-width:800px){ .single #primary{ display:block; } #kw-neueste{ position:static; margin-top:34px; } }

/* Featured image below the title */
.kw-featured{ margin:6px 0 30px; }
.kw-featured img{ width:100%; height:auto; display:block; }

/* Single-post title with yellow underline */
.single .entry-title{ display:inline-block; padding-bottom:4px; background:linear-gradient(var(--kw-yellow),var(--kw-yellow));
  background-size:100% 3px; background-position:0 100%; background-repeat:no-repeat; }
.single .ast-single-post .entry-header{ display:block; }

/* Blog archive cards: show featured image, tidy meta */
.blog .ast-article-post .post-thumb img, .archive .ast-article-post .post-thumb img{ width:100%; height:auto; display:block; }
.blog .entry-title, .archive .entry-title{ font-size:22px; }

/* Related posts "You may also like" */
.kw-related{ margin:48px 0 8px; }
.kw-related-title{ display:inline-block; text-transform:uppercase; letter-spacing:1px; font-size:15px; color:#333;
  background:linear-gradient(var(--kw-yellow),var(--kw-yellow)); background-size:100% 3px; background-position:0 100%;
  background-repeat:no-repeat; padding-bottom:4px; margin:0 0 24px; }
.kw-related-grid{ display:grid; grid-template-columns:1fr; gap:26px; }
.kw-related-card{ display:grid; grid-template-columns:230px 1fr; gap:24px; text-decoration:none !important; color:inherit; align-items:start; }
.kw-related-img img{ width:100%; height:auto; display:block; }
.kw-related-img.kw-noimg{ background:var(--kw-lavender); min-height:150px; display:block; }
.kw-related-h{ display:block; font-weight:700; color:#111; font-size:19px; line-height:1.3; margin:8px 0;
  background:linear-gradient(var(--kw-yellow),var(--kw-yellow)); background-size:100% 3px; background-position:0 100%; background-repeat:no-repeat; padding-bottom:2px; }
.kw-related-card:hover .kw-related-h{ background-size:100% 100%; background-image:linear-gradient(rgba(254,215,1,.25),rgba(254,215,1,.25)); }
.kw-related-meta{ color:#a0a0a0; font-size:13px; }
.kw-related-meta b{ color:var(--kw-ink); }
.kw-related .kw-postcat{ margin-bottom:8px; }
.kw-related .kw-bicon{ width:34px; height:34px; flex-basis:34px; font-size:20px; }

/* Post navigation (prev/next) */
.single .ast-single-post .post-navigation .nav-links{ font-size:14px; }

@media (max-width:600px){ .kw-related-card{ grid-template-columns:1fr; } }

/* ===== Footer minimal (original shows only a small Impressum link) ===== */
.site-footer{ background:var(--kw-snow); }
.ast-small-footer, .site-below-footer-wrap, .site-footer .ast-footer-copyright{ display:none !important; }
.kw-pagefooter{ width:100%; text-align:left; max-width:1240px; margin:-6px auto 30px; padding:0 44px; }
.kw-pagefooter a{ color:#8a8a8a; text-decoration:none; font-size:14px; }
.kw-pagefooter a:hover{ color:#333; }

/* ===== Hide Astra page title header on all pages (content leads with its own H2) ===== */
.page .entry-header{ display:none; }

/* Content width tuning to match original */
.entry-content .wp-block-columns{ gap:3rem; }
.entry-content ul{ margin-left:0; }