/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

/* WPVibe design study: photographic dark variant */
:root {
  --pk-hero-overlay: linear-gradient(90deg, rgba(12,16,14,.90) 0%, rgba(12,16,14,.72) 48%, rgba(12,16,14,.34) 100%);
}

/* Typography: reduce page headings by about 15% */
.pk-hero h1,
.entry-content h1 {
  font-size: clamp(2rem, 3.7vw, 3.6rem) !important;
  line-height: 1.02 !important;
}

.entry-content h2 {
  font-size: clamp(1.5rem, 2.4vw, 2.25rem) !important;
  line-height: 1.08 !important;
}

.entry-content h3 {
  font-size: clamp(1.15rem, 1.55vw, 1.45rem) !important;
}

/* Align both outer header edges with the 1180px content/hero width. */
#header [data-device="desktop"] [data-row="middle"] > .ct-container,
#header [data-device="desktop"] [data-row="middle"] > .ct-container-fluid {
  width: calc(100% - 48px) !important;
  max-width: 1180px !important;
  margin-inline: auto !important;
}
#header [data-device="desktop"] #header-menu-1 > ul > li > a {
  padding-inline: 10px;
}
#header [data-device="desktop"] #header-menu-1 > ul > li:last-child > a {
  padding-right: 0;
}

/* Main navigation: slightly larger and easier to scan */
.ct-header-menu > li > a,
#header [data-id="menu"] > ul > li > a {
  font-size: 1.14rem !important;
  letter-spacing: .01em;
}

.ct-header-menu .sub-menu a,
#header [data-id="menu"] .sub-menu a {
  font-size: .98rem !important;
}

/* Photographic hero treatment while preserving the dark Peppikäse look */
.pk-hero {
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  padding: clamp(32px, 5.2vw, 70px) clamp(28px, 6vw, 78px) !important;
  background-size: cover !important;
  background-position: center !important;
  isolation: isolate;
}

.pk-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(0,0,0,.10));
  pointer-events: none;
  z-index: -1;
}

.pk-hero > * {
  position: relative;
  z-index: 1;
  max-width: 900px;
}

/* Each important page gets its own own-photo background */
.home .pk-hero {
  background-image: var(--pk-hero-overlay), url("https://wp.peppikaese.de/wp-content/uploads/2026/10/Aarewasser-scaled.jpg") !important;
  background-position: center 48% !important;
}

.page-id-57 .pk-hero {
  background-image: var(--pk-hero-overlay), url("https://wp.peppikaese.de/wp-content/uploads/2026/10/Suedstern-%E2%80%93-Peppikaese-Verkaufswagen.jpg") !important;
}

.page-id-831 .pk-hero {
  background-image: var(--pk-hero-overlay), url("https://wp.peppikaese.de/wp-content/uploads/2026/10/Rixdorf-%E2%80%93-Peppikaese-Marktstand-scaled.jpg") !important;
}

.page-id-2084 .pk-hero {
  background-image: var(--pk-hero-overlay), url("https://wp.peppikaese.de/wp-content/uploads/2026/10/Leonhard-Sutterluetty-scaled.jpg") !important;
  background-position: center 34% !important;
}

.page-id-2004 .ct-featured-image {
  display: none !important;
}

.page-id-2004 .pk-hero {
  background-image: var(--pk-hero-overlay), url("https://wp.peppikaese.de/wp-content/uploads/2026/10/Gruyere-AOP-%E2%80%93-zusaetzliche-Ansicht-scaled.jpg") !important;
}

/* Angebote der Woche: photographic hero like the other editorial pages */
.page-id-2005 .pk-hero {
  background-image: var(--pk-hero-overlay), url("https://wp.peppikaese.de/wp-content/uploads/2026/10/Delice-de-Rougemont-scaled.jpg") !important;
  background-position: center 50% !important;
}

/* Shop: full-page photographic atmosphere rather than only a hero */
body.woocommerce-shop #main,
body.post-type-archive-product #main,
body.page-id-7 #main,
body.page-id-58 #main {
  position: relative;
  background:
    linear-gradient(rgba(11,14,12,.72), rgba(11,14,12,.77)),
    url("https://wp.peppikaese.de/wp-content/uploads/2026/10/Aarewasser-scaled.jpg") center top / cover fixed !important;
}

body.woocommerce-shop #main::before,
body.post-type-archive-product #main::before,
body.page-id-7 #main::before,
body.page-id-58 #main::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.22));
}

body.woocommerce-shop #main > *,
body.post-type-archive-product #main > *,
body.page-id-7 #main > *,
body.page-id-58 #main > * {
  position: relative;
  z-index: 1;
}

/* Product tiles stay quiet and readable over the photographic background */
body.woocommerce-shop .products .product,
body.post-type-archive-product .products .product,
body.page-id-7 .products .product,
body.page-id-58 .products .product {
  background: rgba(16,19,17,.82);
  backdrop-filter: blur(3px);
  border-radius: 5px;
  padding: 14px;
}

@media (max-width: 767px) {
  body.woocommerce-shop #main,
  body.post-type-archive-product #main,
  body.page-id-7 #main,
  body.page-id-58 #main {
    background-attachment: scroll !important;
  }
}

/* Editorial page introductions: typography 20% smaller across all pages. */
.entry-content .pk-hero h1 {
  font-size: clamp(1.6rem, 2.96vw, 2.88rem) !important;
}
.entry-content .pk-hero .pk-lead {
  font-size: 15.2px !important;
}
.entry-content .pk-hero .pk-eyebrow {
  font-size: 8.8px !important;
}
@media (max-width: 767px) {
  .entry-content .pk-hero h1 {
    font-size: clamp(1.6rem, 8.8vw, 2.52rem) !important;
  }
  .entry-content .pk-hero .pk-lead {
    font-size: 13.6px !important;
  }
}

/* Additional photographs from Neuer Shop pool, 2026-10-28. */
.home .pk-hero {
  background-image: var(--pk-hero-overlay), url("https://wp.peppikaese.de/wp-content/uploads/2026/10/Berglandschaft-–-Neuer-Shop-Pool-–-DSCF1987.jpg") !important;
  background-position: center 48% !important;
}
body.woocommerce-shop #main,
body.post-type-archive-product #main,
body.page-id-7 #main,
body.page-id-58 #main {
  background-image: linear-gradient(rgba(11,14,12,.82), rgba(11,14,12,.87)), url("https://wp.peppikaese.de/wp-content/uploads/2026/10/Kaesereifung-–-Neuer-Shop-Pool-–-DSCF1532.jpg") !important;
}
.pk-pool-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 24px);
  margin: 26px 0 22px;
}
.pk-pool-gallery figure,
.pk-pool-lasser {
  min-width: 0;
  margin: 0;
}
.pk-pool-gallery img,
.pk-pool-lasser img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 4px;
}
.pk-pool-gallery figcaption,
.pk-pool-lasser figcaption {
  margin: 10px 0 0;
  color: #c6c7ba;
  font-size: 13px;
  line-height: 1.5;
}
.pk-pool-lasser { margin: 20px 0; }
.pk-pool-lasser-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 600px) {
  .pk-pool-gallery,
  .pk-pool-lasser-images { grid-template-columns: minmax(0, 1fr); }
  .pk-pool-gallery { gap: 24px; }
}

/* Keep small screens calm and readable */
@media (max-width: 767px) {
  .pk-hero {
    padding: 38px 24px !important;
    min-height: 0;
  }

  .pk-hero h1,
  .entry-content h1 {
    font-size: clamp(2rem, 11vw, 3.15rem) !important;
  }

  .ct-header-menu > li > a,
  #header [data-id="menu"] > ul > li > a {
    font-size: 1rem !important;
  }
}

/* Peppikäse mobile polish — immersive dark menu, matching brand logo. */
@media (max-width: 999px) {
  #offcanvas {
    --theme-panel-background: #080b0a;
    background-color: #080b0a !important;
  }

  #offcanvas .ct-panel-content[data-device="mobile"] {
    background-color: #080b0a !important;
    background-image:
      linear-gradient(180deg, rgba(5, 8, 7, .89) 0%, rgba(5, 8, 7, .86) 48%, rgba(5, 8, 7, .94) 100%),
      url("https://wp.peppikaese.de/wp-content/uploads/2026/10/Berglandschaft-–-Neuer-Shop-Pool-–-DSCF1987-1024x683.jpg") !important;
    background-position: 52% center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
  }

  #offcanvas .ct-panel-content[data-device="mobile"] .ct-panel-content-inner {
    background: transparent !important;
    padding-top: clamp(26px, 6vh, 58px);
  }

  /* Replace the oversized old cow graphic visually with the current header logo.
     Keep the linked image in the DOM, so the logo link retains its accessible name. */
  #offcanvas .ct-panel-content[data-device="mobile"] [data-id="offcanvas-logo"] {
    display: block !important;
    width: min(52vw, 190px) !important;
    max-width: 190px !important;
    aspect-ratio: 2 / 1;
    height: auto !important;
    margin: 0 auto clamp(24px, 5vh, 45px) !important;
    background: url("https://wp.peppikaese.de/wp-content/uploads/2025/02/logo-rockt-white.png") center / contain no-repeat !important;
  }

  #offcanvas .ct-panel-content[data-device="mobile"] [data-id="offcanvas-logo"] img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    aspect-ratio: 2 / 1;
    opacity: 0 !important;
  }

  #offcanvas .ct-panel-content[data-device="mobile"] .mobile-menu .ct-menu-link {
    color: #f8f7f2 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .38);
    font-size: clamp(1.06rem, 4.25vw, 1.35rem) !important;
    line-height: 1.35;
  }

  #offcanvas .ct-panel-content[data-device="mobile"] .mobile-menu .current-menu-item > .ct-menu-link,
  #offcanvas .ct-panel-content[data-device="mobile"] .mobile-menu .current_page_item > .ct-menu-link {
    color: #d6b475 !important;
  }

  #offcanvas .ct-panel-content[data-device="mobile"] .mobile-menu li {
    border-color: rgba(255, 255, 255, .18) !important;
  }
}

/* Home page on phones: the same atmospheric photograph beyond the hero. */
@media (max-width: 767px) {
  body.home #main {
    background-color: #080b0a !important;
    background-image:
      linear-gradient(180deg, rgba(5, 8, 7, .88), rgba(5, 8, 7, .95)),
      url("https://wp.peppikaese.de/wp-content/uploads/2026/10/Berglandschaft-–-Neuer-Shop-Pool-–-DSCF1987-1024x683.jpg") !important;
    background-size: cover !important;
    background-position: center top !important;
    background-attachment: scroll !important;
    background-repeat: no-repeat !important;
  }

  body.home .pk-hero {
    --pk-hero-overlay: linear-gradient(180deg, rgba(5, 8, 7, .81), rgba(5, 8, 7, .66));
    background-position: 52% center !important;
  }
}

/* Footer contact buttons: readable icons even without hover or focus. */
#footer .ct-contact-info a.ct-icon-container {
  color: #e0cfad !important;
}
#footer .ct-contact-info a.ct-icon-container svg,
#footer .ct-contact-info a.ct-icon-container svg path {
  fill: #e0cfad !important;
  opacity: 1 !important;
}
#footer .ct-contact-info a.ct-icon-container:is(:hover, :focus-visible) svg,
#footer .ct-contact-info a.ct-icon-container:is(:hover, :focus-visible) svg path {
  fill: #fff3d9 !important;
}