/**
 * Theme Name: Storefront Child
 * Template:   storefront
 */

/***** GENERAL STYLES *****/
:root {
  --primary: #ffcc00; /* yellow */
  --secondary: #f11225; /* red */
  --lightGrey: #f5f5f5;
  --mediumGrey: #6d6d6d;
  --darkGrey: #232323;
  --textColor: #666666;
  --linkColor: #232323;
  --titleFont: "Bebas Neue", sans-serif;
  --textFont: Arial, sans-serif;
}

body {
  font-family: var(--titleFont);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button {
  font-family: var(--titleFont);
}

input[type=text],
input[type=number],
input[type=email],
input[type=tel],
input[type=url],
input[type=password],
input[type=search],
textarea,
.input-text {
  background-color: transparent;
  border: 1px solid var(--darkGrey);
}

select {
  font-family: var(--titleFont);
  color: var(--mediumGrey);
  border: 1px solid var(--mediumGrey);
}

a {
  color: #000000;
}

a:focus,
button:focus {
  outline: none;
}

.col-full {
  max-width: 1200px;
}

.single-product .woocommerce-message {
  display: none;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
  background: var(--primary);
  color: var(--darkGrey);
  padding: 1em 2em;
}

.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a,
.woocommerce-noreviews a,
p.no-comments a {
  color: var(--darkGrey) !important;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-noreviews::before,
p.no-comments::before {
  display: none;
}

.storefront-breadcrumb {
  background: var(--lightGrey);
  text-align: center;
}

.storefront-breadcrumb a::before {
  display: none !important;
}

.storefront-breadcrumb span::after {
  opacity: 1 !important;
}

.front-page-usps {
  max-width: 1024px !important;
  margin: 0 auto !important;
}

.front-page-usps .icon-column {
  text-align: right;
}

.front-page-usps .wp-block-columns {
  gap: 0;
}

.front-page-usps p {
  margin: 0;
  font-size: 14px;
}

.front-page-usps i {
  color: var(--secondary);
  font-size: 50px;
}


/**
 * ============================================================
 * STANDARD WORDPRESS PAGES
 * ============================================================
 *
 * page.php renderar inte längre Storefront-sidebaren.
 * Därför ska vanliga sidor använda hela content-bredden.
 */
body.page-template-default #primary.content-area {
  float: none;
  width: 100%;
  margin-right: 0;
  margin-left: 0;
}


/**
 * ============================================================
 * RESPONSIVE GENERAL STYLES
 * ============================================================
 */
@media only screen and (max-width: 768px) {

  .hidden-mobile {
    display: none;
  }

  .front-page-usps {
    gap: 0;
  }

  .front-page-usps .icon-column,
  .front-page-usps .text-column {
    text-align: center;
  }

  .front-page-usps i {
    font-size: 20px;
  }
}


/**
 * ============================================================
 * DESKTOP MAIN MENU
 * ============================================================
 */
.fn-main-menu li {
  position: relative;
}


/* Alla undermenyer är dolda innan hover */
.fn-main-menu > li > .fn-main-menu-sub1,
.fn-main-menu .fn-main-menu-sub2,
.fn-main-menu .fn-main-menu-sub3,
.fn-main-menu .fn-main-menu-sub4 {
  position: absolute;

  min-width: 220px;

  background: #fff;

  list-style: none;

  margin: 0;
  padding: 0;

  z-index: 9999;

  display: none;
  visibility: hidden;
  opacity: 0;

  transform: translateY(10px);

  pointer-events: none;

  transition:
    opacity .2s ease,
    transform .2s ease;

  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}


/* Första dropdownnivån */
.fn-main-menu > li > .fn-main-menu-sub1 {
  top: 100%;
  left: 0;
}


/* Djupare dropdownnivåer */
.fn-main-menu .fn-main-menu-sub2,
.fn-main-menu .fn-main-menu-sub3,
.fn-main-menu .fn-main-menu-sub4 {
  top: 0;
  left: 100%;
}


/* Visa rätt dropdown vid hover */
.fn-main-menu li:hover > .fn-main-menu-sub1,
.fn-main-menu .fn-main-menu-level2:hover > .fn-main-menu-sub2,
.fn-main-menu .fn-main-menu-level3:hover > .fn-main-menu-sub3,
.fn-main-menu .fn-main-menu-level4:hover > .fn-main-menu-sub4 {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}


/* Förhindra att dropdowns klipps bort */
.site-header,
.storefront-primary-navigation,
.fn-main-menu,
.fn-main-menu * {
  overflow: visible !important;
}

.site-header,
.fn-main-menu {
  z-index: 1001;
}


/**
 * ============================================================
 * MOBILE MENU
 * ============================================================
 */
@media only screen and (max-width: 768px) {

  .mobile-menu,
  .mobile-menu-sub1,
  .mobile-menu-sub2,
  .mobile-menu-sub3,
  .mobile-menu-sub4 {
    list-style: none;
    margin: 0;
    padding: 0;
  }


  /*
   * Undermenyer är stängda som standard.
   */
  .mobile-menu-sub1,
  .mobile-menu-sub2,
  .mobile-menu-sub3,
  .mobile-menu-sub4 {
    display: none;
  }


  /*
   * När respektive LI får .is-open visas
   * endast dess direkta undermeny.
   */
  .mobile-menu li.is-open > .mobile-menu-sub1,
  .mobile-menu li.is-open > .mobile-menu-sub2,
  .mobile-menu li.is-open > .mobile-menu-sub3,
  .mobile-menu li.is-open > .mobile-menu-sub4 {
    display: block;
  }


  /*
   * Pilar för undermenyer.
   */
  .mobile-menu i.has-children {
    cursor: pointer;
    margin-left: .5rem;
    user-select: none;
  }
}


/**
 * ============================================================
 * MOBILE HEADER / MENU MUST NEVER DISPLAY ON DESKTOP
 * ============================================================
 *
 * Detta löser problemet där delar av mobilheadern och mobilmenyn
 * kunde visas på vanliga WordPress-sidor på desktop.
 */
@media only screen and (min-width: 769px) {

  .header-columns.mobile,
  .mobile-menu-icon,
  .mobile-menu-content,
  .mobile-menu,
  #block-25 {
    display: none !important;
  }
}


/**
 * ============================================================
 * MOBILE MENU LEVEL 5
 * ============================================================
 */
.mobile-menu-sub4 {
  display: none !important;
}

.mobile-menu li.is-open > .mobile-menu-sub4 {
  display: block !important;
}