/*
Theme Name: Cloudy Toy Theme
Text Domain: cloudy-toy-theme
Theme URI: https://wp.bcitwebdeveloper.ca/
Author: FWD
Author URI: https://wp.bcitwebdeveloper.ca/
Description: A theme for the BCIT FWDP 4500 Capstone Project.
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 8.0
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Update URI: false
*/

/* ++++++++++ Mobile Styling ++++++++++ */

/* +++ Font Clamp Sizing +++ */
/* Product Title sizing */
h2.wp-block-post-title a {
  font-size: clamp(1rem, 3vw, 1.25rem);
}

/* Block Heading Sizing */
h2.wp-block-heading {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
}

/* Blockquote > P Styling */
.wp-block-pullquote blockquote p {
  font-size: clamp(1rem, 2.5vw + 0.5rem, 1.5rem);
}

/* Shop Query Title Sizing */
h1.wp-block-query-title {
  font-size: clamp(2rem, 4vw, 3rem);
}

/* Hover Effect for Block Buttons (can't be done in theme.json */
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--base);
  border-color: var(--wp--preset--color--hover);
}

.wp-block-button .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--hover);
  color: var(--wp--preset--color--contrast);
}

/* ++++++++++ [Pattern]: Gift Cards - Padding ++++++++++ */
.gift-cards-custom-padding-column-container,
.discover-more-custom-padding {
  padding: 5rem 1rem;
}

/* ++++++++++ About page  spacing between image and title ++++++++++ */
.page-template-about-page .wp-block-post-title {
  margin-top: 2rem;
}

/* ++++++++++ [Single Product Page Style] ++++++++++ */
/* reposition 'Add To Wishlist' to be inline with 'Add to Cart'  */
.wp-block-woocommerce-add-to-cart-form form.cart {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.wp-block-woocommerce-add-to-cart-form form.cart .quantity .wp-block-woocommerce-add-to-cart-form form.cart .quantity input {
  height: 100%;
}

.wp-block-woocommerce-add-to-cart-form form.cart>.quantity:not(.wc-block-components-quantity-selector) .qty {
  padding: 0.8125rem 0;
}

/* Heart Icon Container Size */
.tinv-wishlist .tinvwl_add_to_wishlist_button.tinvwl-icon-heart-plus.no-txt,
.tinv-wishlist .tinvwl_add_to_wishlist_button.tinvwl-icon-heart.no-txt {
  width: 3rem;
  height: 3rem;
}

/* Hear Icon Position */
.tinv-wishlist .tinvwl_add_to_wishlist_button.tinvwl-icon-heart.no-txt:before {
  margin-top: -2rem;
  margin-left: -0.9375rem;
}

/* Add to Wishlist Heart Icon */
.tinv-wishlist .tinvwl_add_to_wishlist_button.tinvwl-icon-heart:before {
  font-size: 3rem;
}

/* Remove persistent active/focus colour on the heart button after click */
.tinv-wishlist .tinvwl_add_to_wishlist_button:focus,
.tinv-wishlist .tinvwl_add_to_wishlist_button:active {
  outline: none;
  box-shadow: none;
  opacity: 1;
  color: inherit;
  background: transparent;
  border-color: transparent;
}

/* YITH product compare button */
.yith-wccp-compare {
  text-align: left;
  background: var(--wp--preset--color--hover);
  /* width: fit-content; */
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}

.span.label {
  color: var(--wp--preset--color--primary);
}

a.compare.checkbox {
  text-decoration: none;
}

/* [Gift Card Section]  */
.gift-cards-group-custom-padding {
  padding: 0 1rem;
}

/* Product Title Size (Mobile) */
.wp-block-post-title {
  font-size: var(--wp--preset--font-size--x-large);
}

/* Header position */
.is-position-sticky {
  position: sticky;
  z-index: 999;
}

/* +++++ NAV ICON STYLES +++++ */
.nav-icons {
  gap: 1.5rem;
}

.nav-icons>* {
  display: flex;
  align-items: center;
  justify-content: center;
}

/*  Archive Product Category Filter Styles  */
.is-category-filter .wc-block-product-filter-checkbox-list__item:not(.has-depth-1) .wc-block-product-filter-checkbox-list__text {
  font-weight: bold;
}

.is-category-filter .wc-block-product-filter-checkbox-list__item.has-depth-1 {
  padding-left: 1.25rem;
}

/*  Search Results Product Category Filter Styles.  */
.wp-block-woocommerce-product-filter-taxonomy:not(:last-child) .wc-block-product-filter-checkbox-list__item:not(.has-depth-1) .wc-block-product-filter-checkbox-list__text {
  font-weight: bold;
}

.wp-block-woocommerce-product-filter-taxonomy:not(:last-child) .wc-block-product-filter-checkbox-list__item.has-depth-1 {
  padding-left: 1.25rem;
}

/* Catalog Sorting Select Style */
select.orderby,
.wc-block-sort-select__select {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background-color: var(--wp--preset--color--primary, #2C70DD);
  color: var(--wp--preset--color--base, #ffffff);
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

/* Padding for product filters overlay content */
.wc-block-product-filters__overlay-content {
  padding: 2rem;
}

/* ++++++++++ WISHLIST MOBILE ++++++++++ */
thead {
  display: none;
}

tbody {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

.tinv-wishlist .product-thumbnail img {
  max-width: 100%;
}


/* wishlished item container */
.wishlist_item {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 0 0 18rem;
  max-width: 18rem;
  margin: 0 auto;
}

/* img thumbnail width */
.wishlist_item>.product-thumbnail {
  min-width: 18rem;
}

/* rmv padding around all table items/columns */
.tinv-wishlist .tinvwl-table-manage-list * {
  padding: 0;
}

/* hide product date... ridiculous */
body.woocommerce-account table.tinvwl-table-manage-list .product-date,
body.woocommerce-account table.tinvwl-table-manage-list th.product-date,
body.woocommerce-account table.tinvwl-table-manage-list td.product-date {
  display: none;
}

.tinv-wishlist .product-stock span {
  text-align: left;
}

.woocommerce-account main .woocommerce h2 {
  margin-top: 0;
}

p.stock.in-stock,
td.product-date {
  margin: 0;
}

/* product details align left */
.tinv-wishlist table.tinvwl-table-manage-list tbody td:not(:last-child) {
  text-align: left;
}

/* remove button */
.tinv-wishlist .tinvwl-table-manage-list .product-remove {
  padding: 0;
  display: flex;
  /* keeps rmv btn on left */
  justify-content: flex-start;
  width: auto;
}

.tinv-wishlist .product-remove button {
  width: fit-content;
  align-self: flex-start;
  border-radius: 0;
}

i.ftinvwl.ftinvwl-times::after {
  content: "Remove";
  font-family: 'Roboto', sans-serif;
  font-size: 0.85rem;
  padding-right: 0.3rem;
}

i.ftinvwl.ftinvwl-times {
  display: flex;
  align-items: center;
  padding: 0.125rem 0.25rem;
}

.tinv-wishlist .product-remove button {
  width: fit-content;
  border-radius: 0;
}

.product-remove button:hover {
  background: #ff0000;
  color: #ffffff;
  cursor: pointer;
}

/* add to cart button */
button.button.alt {
  background: var(--wp--preset--color--hover);
  color: #000;
  border: none;
  padding: 0.375rem 0.7rem;
}

button.button.alt:hover {
  background: var(--wp--preset--color--primary);
  color: #fff;
  cursor: pointer;
}

/* +++++++++++++++++++++ remove item popup modal (under construction) */
.tinv-modal-inner .ftinvwl .ftinvwl-times {
  display: none;
  border: 5px solid red;
}


/* ++++++++++ DASHBOARD  MOBILE ++++++++++ */

/* dashboard nav */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow-x: auto;
  gap: 1rem;
  width: 100%;
}

/* forces nav link-text to display inline */
.woocommerce-account .woocommerce-MyAccount-navigation ul li {
  flex-shrink: 0;
  white-space: nowrap;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 0.75rem;
}

/* link styling hover, active, is-active */
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation li a:active,
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  text-decoration: none;
  background: var(--wp--preset--color--hover);
  color: var(--wp--preset--color--contrast);
}


/* removes extra padding on the dashbord link (idk why it has it in the first place) */
.woocommerce-account .woocommerce-MyAccount-navigation li:first-child {
  padding: 0;
}

/* ++++++++++ Footer - Mobile Styling ++++++++++ */

.wp-block-social-links,
.wp-block-social-links.has-normal-icon-size {
  justify-content: start;
  margin-bottom: 3.5rem;
}

.footer-map {
  border: 0.0625rem solid transparent;
  border-radius: 1rem;
  width: 100%;
  aspect-ratio: 16 / 9;
}

/* ++++++++++ ThemeHunk PRODUCT COMPARE style ++++++++++ */
.thunk-compare {
  margin: 0;
}

.th-product-compare-btn-wrap a.th-product-compare-btn {
  display: flex;
  justify-content: start;
}

.th-product-compare-btn {
  font-size: 16px;
}

.th-product-compare-btn:hover {
  color: var(--wp--preset--color--primary);
}

/* contact page on mobile screen */
.contact-format {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contact-info {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.map {
  width: 100%;
}

/* +++++++++ MEDIA QUERIES ++++++++++ */

/* Desktop Styling */
@media (min-width: 40.0625em) {

  /* [Pattern]: Gift Cards - Padding */
  .gift-cards-group-custom-padding-column-container,
  .discover-more-custom-padding {
    padding: 5rem;
  }

  .gift-cards-group-custom-padding {
    padding: 0 5rem;
  }

  /* reposition 'Add To Wishlist' to be inline with 'Add to Cart'  */
  .wp-block-woocommerce-add-to-cart-form form.cart {
    gap: 0.8rem;
  }

  /* Product Title Size (Mobile) */
  .wp-block-post-title {
    font-size: 3rem;
  }

  /* ++++++++++ Wishlist Page Adjustments +++++++++++ */

  .woocommerce-account main .woocommerce {
    max-width: 100%;
  }

  tbody {
    justify-content: space-between;
    gap: 1rem;
  }

  .available-on-backorder {
    margin-top: 0;
  }

  /* ++++++++++ DASHBOARD DESKTOP ++++++++++ */

  /* navigation width for dashboard */
  .woocommerce-account .woocommerce-MyAccount-navigation {
    width: 100%;
    align-items: center;
  }

  /* wishlist section */
  .woocommerce-account .woocommerce-MyAccount-content {
    width: 100%;
  }

  /* ++++++++++ Footer Styling ++++++++++ */
  .wp-block-social-links,
  .wp-block-social-links.has-normal-icon-size {
    justify-content: end;
    margin-bottom: 0;
  }
}

@media (max-width: 40.0625em) {

  /* ++++++++++ This should put the Filter button on top of the products when on mobile or tablet ++++++++++ */
  .shop-main-layout {
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
  }

  /* Make the filters panel full-width when stacked */
  .shop-main-layout>.wp-block-woocommerce-product-filters {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 1rem;
  }

  /* Make the products column fill remaining space */
  .shop-main-layout>.wp-block-group {
    width: 100% !important;
    padding: 0 1rem;
  }

  /* Sort bar wraps beter on small screens */
  .shop-sort-layout {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  /* target ul */
  .kt-tabs-title-list {
    display: flex !important;
    flex-wrap: nowrap !important;

    /* Horizontal scrolling */
    overflow-x: auto !important;
    gap: 0.3rem;
    padding-bottom: 0.5rem;
  }

  /* target li */
  .kt-tabs-title-list .kt-title-item {
    flex: 0 0 auto !important;
  }

  /* target span inside a tag */
  .kt-tabs-title-list .kt-title-text {
    font-size: 0.9rem;
  }
}

@media (max-width: 53.125em) {
  .nav-icons {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-evenly;
    padding: 0.8rem 0;
    background: var(--wp--preset--color--primary);
    z-index: 999;
  }
}

@media (min-width: 66em) {
  .contact-format {
    flex-direction: row;
    gap: 3rem;
  }

  .contact-format>* {
    flex: 1;
  }
}








/* Staff Section  950px Breakpoint */
@media (max-width: 59.375em) {
  .wp-block-post-template.columns-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Staff Section 768px Breakpoint */
@media (max-width: 48em) {

  .wp-block-post-template.columns-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .wp-block-post-template.columns-3 .wp-block-post-title {
    font-size: 1rem;
  }

  .wp-block-post-template.columns-3 .entry-content p {
    font-size: 0.75rem;
  }
}