/*!/wp-content/themes/shankari-child/style.css*//*
Theme Name: Shankari Child
Template: Divi
Version: 1.0
*/

/* ===========================
   🔍 Debug & Dev Tools
   =========================== */
/*body * {
  outline: 1px solid red !important;
}*/

/* ===========================
   🔤 Custom Webfonts
   =========================== */

/* clicker-script-regular - latin */
@font-face{font-display:swap;font-family:'Clicker Script';font-style:normal;font-weight:400;src:url('/wp-content/themes/shankari-child/fonts/clicker-script-v13-latin-regular.woff2') format('woff2'),
url('/wp-content/themes/shankari-child/fonts/clicker-script-v13-latin-regular.ttf') format('truetype');}

/* amatic-sc-700 - latin */
@font-face{font-display:swap;font-family:'Amatic SC';font-style:normal;font-weight:700;src:url('/wp-content/themes/shankari-child/fonts/amatic-sc-v27-latin-700.woff2') format('woff2'),
url('/wp-content/themes/shankari-child/fonts/amatic-sc-v27-latin-700.ttf') format('truetype');}

/* raleway-regular - latin */
@font-face{font-display:swap;
font-family:'Raleway';font-style:normal;font-weight:400;src:url('/wp-content/themes/shankari-child/fonts/raleway-v36-latin-regular.woff2') format('woff2'), 
url('/wp-content/themes/shankari-child/fonts/raleway-v36-latin-regular.ttf') format('truetype');}
/* raleway-700 - latin */
@font-face{font-display:swap;
font-family:'Raleway';font-style:normal;font-weight:700;src:url('/wp-content/themes/shankari-child/fonts/raleway-v36-latin-700.woff2') format('woff2'), 
url('/wp-content/themes/shankari-child/fonts/raleway-v36-latin-700.ttf') format('truetype');}

/*Variables*/
:root {
  /* Fonts */
  --heading: 'Amatic SC', cursive;
  --content: 'Raleway', sans-serif;
  --accent: 'Clicker Script', cursive;

  /* 🔠 Schriftgrößen (responsive via clamp) */
  --h1: clamp(2.8rem, 6vw, 4rem);     /* ~45px–64px bei 1300px+ */
  --h2: clamp(2rem, 4vw, 2.8rem);     /* ~32px–40px */
  --h3: clamp(1.5rem, 3vw, 2.2rem);   /* ~24px–35px */
  --h4: clamp(1.25rem, 3vw, 2.125rem); /* ~20px – 34px */
  --text: clamp(1rem, 1.2vw, 1.125rem); /* ~16px–18px */
  --small: clamp(0.875rem, 1vw, 1rem); /* ~14px–16px */
  --medium: clamp(0.95rem, 1.1vw, 1.0625rem); /* ~15.2px–17px */

  /* 💪 Gewicht */
  --regular: 400;
  --bold: 700;

  /* 🎨 Farben – HSL */
  --primary-h: 39;
  --primary-s: 87%;
  --primary-l: 67%;

  --secondary-h: 17;
  --secondary-s: 55%;
  --secondary-l: 52%;

  --accent-h: var(--secondary-h);
  --accent-s: var(--secondary-s);
  --accent-l: var(--secondary-l);

  --text-h: 16;
  --text-s: 19%;
  --text-l: 24%;

  --bg-h: 42;
  --bg-s: 100%;
  --bg-l: 93%;

  --space-xxs: 4px;
  --space-xs: 8px;
  --space-s: 12px;
  --space-m: 16px;
  --space-l: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;

  --radius: 25px;
  --radius-pill: 9999px;
  --radius-section: 125px;

  --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-medium: 0 6px 20px rgba(0, 0, 0, 0.12);
  --shadow-deep: 0 12px 32px rgba(0, 0, 0, 0.15);

  --line-height-body: 1.6;
  --line-height-heading: 1.2;
  
  /*Dynamische Styles fuer Elemente*/
  --section-padding: clamp(3rem, 10vw, 6.875rem); /* ~48px bis 110px */
  
--button-padding-v: clamp(0.5rem, 1.5vw, 1rem);   /* 8–16px oben/unten */
--button-padding-h: clamp(1rem, 3vw, 2rem);      /* 16–32px links/rechts */

  /* 📦 Max-Width Container */
  --max-width: 1280px;
  --max-width-text: 600px;
  --max-width-narrow: 560px;
  
    /* 🧩 Gaps in Grids, Rows, Flex */
  --gap: 24px;
}

/* ===========================
   ✨ Globale Typografie
   =========================== */
   
body {
  font-family: var(--content);
}

h1, h2, body:not(.et-fb) h3, h4, h5, h6 {
  font-family: var(--heading) !important;
}

p,
ul,
ol,
li,
blockquote,
figure,
figcaption,
table,
th,
td,
label,
input,
textarea,
select,
button,
a {
  font-family: var(--content);
}

/* ===========================
   Styles
   =========================== */
   
.shadow {
  transition: box-shadow 300ms ease-in-out;
}

.shadow:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.handwriting {
    font-family:var(--accent) !important;
}

/*Woocommerce*/
/* Header layout on Shop page: contact button beside cart */
body.woocommerce .et_pb_column_0_tb_header.et-last-child {
  display: flex !important;
  flex-flow: row !important;
  align-items: center;
}

/* Remove padding in header section on Shop page */
body.woocommerce .et_pb_section_0_tb_header {
  padding: 0px !important;
}

/* Shop page: remove ghost border from hidden sidebar */
body.woocommerce .content-area {
  border: none !important;
}

/* Shop page: hide the gray ::before line on container */
body.woocommerce .container::before {
  display: none !important;
}

/* Hide sidebar on main Shop page only */
body.post-type-archive-product #sidebar,
body.post-type-archive-product .et_right_sidebar {
  display: none !important;
  width: 0 !important;
}

/* Shop page: expand left-area to full width with max 1200px */
#left-area {
  width: 100% !important;
  max-width: 1200px !important;
}

/*spacing between products*/
@media (min-width: 981px) {
  .et_pb_gutters1.et_left_sidebar.woocommerce-page #main-content ul.products li.product,
  .et_pb_gutters1.et_right_sidebar.woocommerce-page #main-content ul.products li.product {
    width: 30% !important;
  }

  .woocommerce-page ul.products li.product:nth-child(n) {
    margin: 10px !important;
  }
}

/*Termine Seite Contact Button wieder neben cart*/
/* Nur auf der Termine-Seite (Events-Archiv) */
body.post-type-archive-tribe_events .et_pb_column_0_tb_header.et-last-child {
  display: flex !important;
  flex-flow: row !important;
  align-items: center;
}

/* Nur auf Termine-Seite: Header-Innenbereich volle Breite */
body.post-type-archive-tribe_events 
#et-boc > header > div > div.et_pb_section_0_tb_header.et_pb_section.et_section_regular.pa-header.preset--module--divi-section--default > div {
  width: 100% !important;
}


/* Hover background for each past event on Termine-Seite */
#et-main-area > div > section > div.tribe-events-calendar-latest-past > *:hover {
  background-color: #fdf7ee !important; /* Adjusted creme + 30% lightness */
  transition: background-color 0.3s ease;
}

/* Add top and bottom padding to each past event card */
.tribe-events .tribe-events-calendar-latest-past__event-row > .tribe-common-g-col {
  padding-top: 20px;
  padding-bottom: 20px;
}

/*Padding Top Container Termine 0px*/
.tribe-events .tribe-events-l-container {
    padding-top:0px !important;
    padding-bottom:0px !important;
}

/*Menu width 1200px max auf Termine Seite*/
#et-boc > header > div > div.et_pb_section_0_tb_header.et_pb_section.et_section_regular.pa-header.preset--module--divi-section--default > div {
    max-width:1200px;
}

/* Nur auf Termine-Seite UND nur für mobile */
@media (max-width: 980px) {
  body.post-type-archive-tribe_events .et-db #et-boc .et-l .et_pb_section {
    padding: 10px !important;
  }
}

#main-content > div::before {
    display:none !important;
}

#sidebar {
    display:none;
}



/*Kassen Seite*/
/* Kasse: Buttons in unserer Accent-Farbe */
/* WooCommerce Buttons – Hintergrund und Textfarbe in Accent */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
.woocommerce-page #respond input#submit {
  background-color: #f5e8d8 !important; /* deine Accent-Farbe */
  color: #000 !important; /* Textfarbe je nach Kontrast */
  border-color: #f5e8d8 !important;
  transition: background-color 0.3s ease;
}

#order_review > div.wc-gzd-order-submit > div {
    margin-bottom: 2rem;
}

/*Events Kalener*/
.tribe-common-c-btn {
  background: hsl(var(--primary-h), var(--primary-s), var(--primary-l)) !important;
}

.tribe-common-c-btn-border {
  border: 1px solid hsl(var(--primary-h), var(--primary-s), var(--primary-l)) !important;
  color: hsl(var(--primary-h), var(--primary-s), var(--primary-l)) !important;
}

.tribe-common-c-btn-border:hover {
  color: hsl(var(--bg-h), var(--bg-s), var(--bg-l)) !important;
  background: hsl(var(--primary-h), var(--primary-s), var(--primary-l)) !important;
}

.tribe-events-calendar-month__multiday-event-bar {
  background: hsl(var(--primary-h), var(--primary-s), var(--primary-l)) !important;
  color: hsl(var(--bg-h), var(--bg-s), var(--bg-l)) !important;
}

.tribe-common .tribe-common-h8 {
  color: hsl(var(--bg-h), var(--bg-s), var(--bg-l)) !important;
}
.tribe-common-l-container {
  margin-top: 60px !important;
}

.month.focused.active {
  background: hsl(var(--primary-h), var(--primary-s), var(--primary-l)) !important;
}

.tribe-events-c-messages__message-list-item-link.tribe-common-anchor-thin-alt:hover {
  color: hsl(var(--primary-h), var(--primary-s), var(--primary-l)) !important;
}

/*Kurse Seiten*/
/*Kursliste auf seite kurse*/
.ld-course-list-items .ld_course_grid .thumbnail.course a.btn-primary {
  background-color: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
  color: #4E3B31;
  padding: var(--button-padding-v) var(--button-padding-h);
  border: none;
  border-radius: var(--radius-pill);
  font-weight: var(--bold);
  text-align: center;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.ld-course-list-items .ld_course_grid .thumbnail.course a.btn-primary:hover {
  background-color: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l));
  color: hsl(var(--bg-h), var(--bg-s), var(--bg-l));
}

/*Eingeschrieben Banner*/
.ld-course-list-items .ld_course_grid .thumbnail.course .ribbon.enrolled {
  background-color: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l));
  color: hsl(var(--bg-h), var(--bg-s), var(--bg-l));
  font-weight: var(--bold);
  font-family: var(--content);
 /* padding: var(--space-xs) var(--space-s);*/
  border-radius: var(--radius);
  font-size: var(--small);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ld-course-list-items .ld_course_grid .thumbnail.course .ribbon.enrolled:before {
    display:none;
}

.ld-course-list-items .ld_course_grid .entry-title {
    text-align:center;
    color:#4E3B31;
}

/*DEBUGG*/

/* ==========================================================================
   🔧 FIXES FOR SHOP & TERMINE PAGES: CONTACT POPUP + FOOTER BUGS (Divi + Theme Builder)
   ========================================================================== */

/* 
📌 1. Force the contact popup section to be fixed and full screen.
Reason: Divi Theme Builder sometimes loses position values on archive pages.
*/
body.post-type-archive-tribe_events 
#et-boc > header > div > div.et_pb_section_1_tb_header,
body.post-type-archive-product 
#et-boc > header > div > div.et_pb_section_1_tb_header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  z-index: 9999;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

/* 
📌 2. Style the close icon (size + spacing).
Reason: On these archive pages, Theme Builder resets icon styles to Divi defaults.
*/
body.post-type-archive-product 
#et-boc > header .et_pb_icon_0_tb_header > span > a > span,
body.post-type-archive-tribe_events 
#et-boc > header .et_pb_icon_0_tb_header > span > a > span {
  font-size: 25px !important;
  width: 25px !important;
  height: 25px !important;
  line-height: 25px !important;
}

/* 
📌 3. Default spacing for close icon (desktop & tablet).
Reason: Adds breathing room around the icon in upper corner.
*/
body.post-type-archive-product 
#et-boc > header .et_pb_icon_0_tb_header,
body.post-type-archive-tribe_events 
#et-boc > header .et_pb_icon_0_tb_header {
  margin-top: -12.5px !important;
  margin-right: -12.5px !important;
}

/* 
📌 4. Style the contact form button.
Reason: Fixes button design inconsistency on archive pages.
*/
body.post-type-archive-product 
#et_pb_contact_form_0 .et_pb_button,
body.post-type-archive-tribe_events 
#et_pb_contact_form_0 .et_pb_button {
  background-color: #c75b39 !important;
  border-radius: var(--radius-pill) !important;
  color: #fff !important;
  border: none !important;
  font-weight: var(--bold);
  transition: background-color 0.3s ease;
}

/* 
📱 5. MOBILE FIXES for the popup overlay section
Reason: Ensure correct sizing & spacing of popup and close icon on mobile only.
*/
@media (max-width: 980px) {
  /* Make popup container full width */
  body.post-type-archive-product 
  #et-boc > header .et_pb_section_1_tb_header > div,
  body.post-type-archive-tribe_events 
  #et-boc > header .et_pb_section_1_tb_header > div {
    width: 100% !important;
  }

  /* Adjust close icon spacing on mobile */
  body.post-type-archive-product 
  #et-boc > header .et_pb_icon_0_tb_header,
  body.post-type-archive-tribe_events 
  #et-boc > header .et_pb_icon_0_tb_header {
    margin-top: 10px !important;
    margin-right: 10px !important;
  }

  /* Make inner content area of popup fullscreen height */
  body.post-type-archive-product 
  #et-boc > header .et_pb_section_1_tb_header > div > div,
  body.post-type-archive-tribe_events 
  #et-boc > header .et_pb_section_1_tb_header > div > div {
    height: 100vh !important;
  }
}

/* 
🦶 6. FOOTER PADDING FIX (Desktop & Tablet)
Reason: On archive pages, Theme Builder sometimes omits padding on footer sections.
*/
@media (min-width: 981px) {
  body.post-type-archive-product 
  #et-main-area > footer .et_pb_section_0_tb_footer,
  body.post-type-archive-tribe_events 
  #et-main-area > footer .et_pb_section_0_tb_footer,
  body.post-type-archive-product 
  #et-main-area > footer .et_pb_section_1_tb_footer,
  body.post-type-archive-tribe_events 
  #et-main-area > footer .et_pb_section_1_tb_footer {
    padding: 10rem 0 !important;
  }
}


/* ===========================
   Login Button Fix (Mobile)
   =========================== */
@media (max-width: 980px) {
  .et_pb_section_2 .et_pb_text_5 a {
    height: 24px;
    min-height: 40px;
    max-width: 90vw;
    display: flex;
    justify-content: center;
    margin: 0 20px;
    font-size: 14px;
    font-size:16px !important;
  }
}

/* ===========================
   Profile Page Anpassungen
   =========================== */
#ld-profile .ld-profile-stat.ld-profile-stat-certificates,
#ld-profile .ld-profile-stat.ld-profile-stat-points {
  display: none !important;
}

.ld-profile-summary .ld-profile-stat {
  border-right: none !important;
}

/* ===========================
   LearnDash Font Anpassung
   =========================== */
/* Basis: Raleway auf häufigen LD-Elementen */
.learndash-wrapper,
.learndash-wrapper nav > div,
.ld-focus,
.ld-focus-header,
.ld-lesson-section-heading,
.ld-text,
.learndash_mark_complete_button,
.ld-button[data-ld-action="mark_complete"],
.ld-button.ld-button-mark-complete,
.ld-progress-percentage.ld-secondary-color {
  font-family: 'Raleway', sans-serif !important;
}

/* Spezifischere Anpassungen */
.learndash_mark_complete_button,
.ld-button[data-ld-action="mark_complete"],
.ld-button.ld-button-mark-complete {
  font-weight: 600;
}