/* disable published dates showing up */
.entry-date published {
	display: none;
}

/* make cart popup pretty and match color scheme */
.site-header-cart .widget_shopping_cart {
    background: #4f6e86;
}
a.button, button.button, input.button, #respond input#submit {
    background-color: #3da1ef;
	color: #fff;
   border-radius: 8px;
}
a.button:hover, button.button:hover, input.button:hover, #respond input#submit:hover {
    background-color: #99c8ed;
	  opacity: 1;  
}

/* make page wider, which allows for columns in cart and check out */
@media (min-width: 1000px)
{
	.no-sidebar .site {
			max-width: 75%;
	}
	.sidebar .site {
			max-width: 75%;
	}
}

/* Don't display entire menu on mobile - mouse over to expand */
.main-navigation .sub-menu {
  display: none;
}


/* Menu as item to left, but also makes menu appear in desktop mode... 
.menu-toggle, .main-navigation.toggled .nav-menu {
    display: inline-block;
}*/
@media (max-width: 768px) {
  /* Use grid to lay out header row and menu row */
  #site-navigation {
    display: grid;
    grid-template-columns: 1fr auto; /* button left, cart right */
    grid-template-rows: auto auto;   /* row 1: header, row 2: menu */
    align-items: center;
  }

  /* Header row: menu toggle on the left */
  #site-navigation > .menu-toggle {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
		margin-left: 0;
  }

  /* Header row: cart on the right */
  #site-header-cart {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    display: flex !important; /* ensure visible and aligned */
    align-items: center;
    margin: 0;
  }

  /* Expanded menu sits below, full width */
  #site-navigation .menu-menu-container {
    grid-column: 1 / -1; /* span both columns */
    grid-row: 2;
    width: 100%;
  }
}

/* Force submenu arrows to show on mobile */
@media (max-width: 768px) {
  .main-navigation .menu-item-has-children > a::after {
    content: "▼";              /* or use "\25BC" for a down arrow */
    display: inline-block;     /* make sure it renders */
    margin-left: 0.5em;        /* spacing from link text */
    font-size: 0.8em;          /* adjust size for mobile */
  }
}

/* Desktop layout */
@media (min-width: 769px) {
  #site-navigation {
    display: flex;
    justify-content: flex-start; /* menu items align left */
    align-items: center;
  }

  /* Menu container stays left */
  #site-navigation .menu-menu-container {
    flex: 0 1 auto;
  }

  /* Cart sits on the right with a gap */
  #site-header-cart {
    margin-left: 40px;   /* adjust gap size */
    margin-right: 0;     /* flush to the right edge */
    margin-left: auto;   /* push cart all the way to the right */
  }
}

/* change default theme button style to match e-commerce */

/* Normal state */
.wp-block-button__link.wp-element-button {
  background-color: #3da1ef; /* your base background */
   border-radius: 8px;
  color: #fff;              /* your base text color */
  transition: background-color 0.3s ease, color 0.3s ease;
}
/* Hover state */
.wp-block-button__link.wp-element-button:hover {
  background-color: #99c8ed !important; /* hover background */
  color: #4f6e86 !important;               /* hover text color */
}

/* reduce margins at full screen */
@media screen and (min-width: 1000px) {
    .woocommerce .content-wrapper.full-width {
        padding-right: 60px;
    }
}
@media screen and (min-width: 1000px) {
    .woocommerce .content-wrapper {
        padding-left: 60px;
    }
}
@media screen and (min-width: 1000px) {
    .content-wrapper .content-area {
        width: 100%;
        max-width: 100%;
    }
}

/* fix carrousel button alignment and color */
.carrousel-button {
	background-color: #f2f5f8;
	color: #4f6e86;
	height: 40px;
  padding: .0em .5em .1em;
}

/* remove link underlines */
.entry-content a {
    text-decoration: none;
}

.enforce-square{
    aspect-ratio: 1 !important;
	 width: 100em;
}

.product-grid-view{
	height: 100px;
}

.home-group{
	background-color: #4f6e86;
	color: #fff;
	max-width: 600px;
  margin-left: auto;
  margin-right: auto;
	padding: 10px;
	border-radius: 8px;
	display: flex;
  align-items: center;
}

.about-me-button{
	background-color: transparent !important;
}
.wp-block-button__link.wp-element-button {
    background-color: #3da1ef;
    border-radius: 8px;
    color: #fff;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* fix button style for cart */
.wc-block-cart .wc-block-cart__submit-container {
	background-color: #3da1ef;
    border-radius: 4px;
}
.wc-block-cart__submit-button {
    color: #fff;
}

/* fix home icon */
.menu-item-2120 a,
.menu-item-2120 a span {
	  color: rgba(255, 255, 255, 1) !important;
}

.home-welcome {
	padding: 10px;
}

/* Display homepage better on mobile */
@media (max-width: 768px) {
    .home-welcome {
        font-size: 1.7rem !important; 
        line-height: 1;
				padding-bottom: 1px;
    }
    .home-one-liner {
        font-size: 1.5rem !important;
        line-height: 1.3;
    }
	.home-spacer {
		height: 20px !important;
	}
	.home-spacer-top {
		height: 0px !important;		
	}
	.home-carousel {
     height: auto !important;
     max-height: none !important;
	}
	.wp-block-newspack-blocks-carousel .swiper-pagination-bullets {
    height: 20px !important;
}
	    .wp-block-columns {
        row-gap: 20px !important; /* adjust to taste */
    }

}

/* remove home title */
.post-89 .entry-title,
.post- h1.entry-title {
    display: none !important;
}


/* enfore featured categories in shop are square */
.wp-block-woocommerce-featured-category {
    min-height: 0 !important;
    height: auto !important;
}

@media (min-width: 769px) {
.wc-block-featured-category__description, .wc-block-featured-category__inner-blocks {
    padding: 0px 2px 2px !important;
}
/* Scale featured category titles instead of using the global 29px h2 size */
.wp-block-woocommerce-featured-category h2,
.wp-block-woocommerce-featured-category .wc-block-featured-category__title {
    font-size: clamp(1rem, 3vw, 3rem) !important;
    line-height: 1.2;
    margin-bottom: 0.4em; /* keep your existing spacing, or tweak if needed */
}
/* Scale the category description */
.wp-block-woocommerce-category-description {
    font-size: clamp(0.8rem, 3vw, 2rem) !important;
    line-height: 1.25;
	padding-bottom: 0.6rem
}
/* Scale the button text and tighten padding */
.wp-block-woocommerce-featured-category .wp-block-button__link {
    font-size: clamp(0.8rem, 1.5vw, 2rem) !important;
    padding: 0.2em 0.8em !important; /* adjust if you want it even tighter */
}
}

/* fix alignmetn issue for best sellers on shop page */
ul, ol {
    margin: 0 0 0em 0em;
}

@media (max-width: 768px) {
    .wp-block-spacer {
        height: 20px !important; /* adjust to taste */
    }
}

.wp-block-latest-posts__post-title{
	font-size: 29px;
}

/* Force MailPoet forms to use Raleway */
.mailpoet_form,
.mailpoet_form * {
    font-family: 'Raleway', sans-serif !important;
	font-weight: 400 !important;
	margin-bottom: 0px !important;
}

/* make mailpoet card on home screen */
#mailpoet_form_2 {
    max-width: 600px !important;
    margin-left: auto;
    margin-right: auto;
	display: flex;
	align-items: center;
}

/* Flex only the row of fields, not the whole form */
.mailpoet_form .mailpoet_paragraph {
    display: flex;
    align-items: center;
}
/* 1. Make the whole form a flex container with wrapping */
.mailpoet_form_form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* 2. Headings and disclaimer span full width */
.mailpoet_form_form h2,
.mailpoet_form_form p.mailpoet_form_paragraph,
.mailpoet_form_form .mailpoet_message {
  flex: 0 0 100%;
}

/* 3. Put the three field rows (first name, email, button) on one line */
.mailpoet_form_form .mailpoet_paragraph {
  margin: 0; /* clean up spacing */
}

/* First name row: smaller */
.mailpoet_form_form .mailpoet_paragraph:nth-of-type(1) {
  flex: 1;
}

/* Email row: larger */
.mailpoet_form_form .mailpoet_paragraph:nth-of-type(2) {
  flex: 2;
}

/* Button row: auto width */
.mailpoet_form_form .mailpoet_paragraph:nth-of-type(3) {
  flex: 0 0 auto;
}

/* 4. Let the button shrink to its text, not full width */
.mailpoet_form_form .mailpoet_paragraph:nth-of-type(3) .mailpoet_submit {
  width: auto !important;
  padding: 11px 18px; /* tweak to taste */
  white-space: nowrap;
}

/* 5. Optional: nicer on mobile – stack fields again */
@media (max-width: 768px) {
  .mailpoet_form_form {
    flex-direction: column;
    align-items: stretch;
  }

  .mailpoet_form_form .mailpoet_paragraph:nth-of-type(1),
  .mailpoet_form_form .mailpoet_paragraph:nth-of-type(2),
  .mailpoet_form_form .mailpoet_paragraph:nth-of-type(3) {
    flex: 0 0 100%;
  }

  .mailpoet_form_form .mailpoet_paragraph:nth-of-type(3) .mailpoet_submit {
    width: 100% !important;
    text-align: center;
  }
}

/* fix style issues for crittering philosophy */
.critter-philosophy-details {
    padding: 20px;
}
.critter-philosophy {
    margin-bottom: 4rem;
}

/* promo bar */
.utility-bar {
    background: #fff;
    padding: 4px 0;
    font-size: 13px;
}
.utility-bar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.utility-promo {
    font-weight: 500;
    flex: 0 0 100%;
    width: 100% !important;
    text-align: center;
}
/* Reduce vertical space in the banner */
.site-branding {
    padding-bottom: 0px;
}