/*
 * Quark 2 — user customizations
 *
 * This file is safe to edit. It is loaded last so anything here overrides
 * theme.css without having to mark rules !important.
 */
.float_right {
  float: right;
  margin: 0 0 1rem 1rem;
}

@font-face {
    font-family: 'KnewaveRegular';
    src: url('../fonts/knewave/knewave-webfont.eot');
    src: url('../fonts/knewave/knewave-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/knewave/knewave-webfont.woff') format('woff'),
         url('../fonts/knewave/knewave-webfont.ttf') format('truetype'),
         url('../fonts/knewave/knewave-webfont.svg#KnewaveRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'KnewaveOutlineRegular';
    src: url('../fonts/knewave/knewave-outline-webfont.eot');
    src: url('../fonts/knewave/knewave-outline-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/knewave/knewave-outline-webfont.woff') format('woff'),
         url('../fonts/knewave/knewave-outline-webfont.ttf') format('truetype'),
         url('../fonts/knewave/knewave-outline-webfont.svg#KnewaveOutlineRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

.mm_font {
	font-family: 'KnewaveRegular' ;
}

.mm_header {
	font-family: 'KnewaveRegular' ;
	font-weight: normal;
	font-style: normal;
	font-size: clamp(24pt,10vw,108pt) ;
	margin-bottom: 0;
}

.mm_pullup {
	margin-top: -6rem;
}

stripe-buy-button {
	margin-left: auto ;
	margin-right: auto ;
}

.img_border {
	border: 1px lightgray solid ;
}
.blog_hero {
  height: 400px;
  background-size: cover;
}
#blog-hero {
  color:  lightyellow ;
  font-weight:  bold;
  padding-left:15%;
  padding-right:15%;
  padding-top: 15px;

}

#blog-hero p {
  line-height: 2rem;
  font-size: 1.5rem;
  text-shadow: 1px 1px darkgray;
}

#blog-hero h1 {
  font-family: 'KnewaveRegular' ;
  font-size: 3rem;
  color: #8D200B;

}

/* ---------- Blog ---------- */

.blog-listing .content-item {
  max-width: 760px;
  margin-inline: auto;
  padding-top: 2rem;
}

/* Blog page header (rendered when there's no hero image) */
.blog-page-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
}
.blog-page-header h1 {
  margin: 0 0 0.5rem;
}
.blog-page-header .lead {
  margin: 0;
}
.blog-page-header .blog-page-intro {
  margin-top: 1rem;
  color: var(--q2-text-muted);
  font-size: 1rem;
  line-height: 1.6;
}

/* Blog card grid — capped at 3 cols max so cards have room to breathe */
.blog-grid {
  display: grid;
  gap: clamp(1.25rem, 2vw, 1.75rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}
@media (min-width: 560px) {
  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .blog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* When a sidebar is present, the cards live in the narrower main column,
   * so 2 cols is the most the space comfortably allows. */
  .columns.has-sidebar .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.blog-grid > .card {
  height: 100%;
  align-self: stretch;
}

/* If sidebar plugins render nothing, collapse the empty aside so it doesn't
 * take a column slot. Requires .has-sidebar to also be conditionally swapped
 * if sidebar widgets are all disabled — handled in layout.html.twig. */
.blog-listing .columns > aside:empty {
  display: none;
}
@media (min-width: 960px) {
  .blog-listing .columns.has-sidebar:has(> aside:empty) {
    grid-template-columns: minmax(0, 1fr);
  }
}
.content-title {
  margin-bottom: 2rem;
}
.content-title h1,
.content-title h2 {
  margin-bottom: 0.5rem;
}

.blog-date {
  font-size: 0.875rem;
  color: var(--q2-text-muted);
}
.blog-date i {
  margin-right: 0.375rem;
  opacity: 0.7;
}

.prev-next {
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  margin-top: 3rem;
}
.prev-next .btn {
  flex: 1;
  max-width: 48%;
}

/* Simple column grid used by blog layout. Sidebar layout only kicks in when
 * the layout has actually rendered an <aside> (signalled via .has-sidebar
 * by partials/layout.html.twig) — otherwise the item column gets the full
 * container width. */
.columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 960px) {
  .columns.has-sidebar {
    grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr);
  }
  .columns.has-sidebar.reverse {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.5fr);
  }
}
.column {
  min-width: 0;
}

.extra-spacing > *:first-child {
  margin-top: 0;
}

#body-wrapper.blog-listing {
  padding-top: 2rem;
}

h3.p-name {
	font-size: 18px;
	color: #4d6b92;
	margin-left: 0.5em;
}
.card-image {
	padding: 7px;
}
.mm-nav {
	display: flex;
  align-items: center;
  gap: 28px;
  height: 48px;
  padding: 0 12px 0 20px;
  background: color-mix(in srgb, var(--kahunacart-card) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 999px;
  box-shadow: var(--kahunacart-shadow);
  margin-bottom: 1rem;
  margin-top: -2rem;
  width: fit-content;
 }