/*
Theme Name: Enwell-child
Template: astra
*/

/* HERO */

/* CSS-regler för hero-rubriker i desktop - endast första full-width sektionen */    
@media (min-width: 1025px) {
	/* Första e-con-full.full-width efter page-wrapper */
	[data-elementor-type="wp-page"] > .e-con-full.full-width:first-of-type .elementor-heading-title,
	[data-elementor-type="wp-page"] > .e-con-full.full-width:first-of-type h1,
	[data-elementor-type="wp-page"] > .e-con-full.full-width:first-of-type h2,
	[data-elementor-type="wp-page"] > .e-con-full.full-width:first-of-type h3 {
		font-size: 80px !important;
	}

	/* För animated headlines i första hero-sektionen */
	[data-elementor-type="wp-page"] > .e-con-full.full-width:first-of-type .elementor-headline,
	[data-elementor-type="wp-page"] > .e-con-full.full-width:first-of-type .elementor-headline-plain-text,
	[data-elementor-type="wp-page"] > .e-con-full.full-width:first-of-type .elementor-headline-dynamic-text,
	[data-elementor-type="wp-page"] > .e-con-full.full-width:first-of-type .elementor-headline-dynamic-wrapper {
		font-size: 80px !important;
	}

}

/* Enhanced swiper functionality */
.swiper, .swiper-container {
    touch-action: pan-y; /* Allow horizontal swiping */
}
.swiper:active, .swiper-container:active {
    cursor: grabbing;
}


/* Containers and sizes */
html, body {
    overflow-x: hidden !important; /* Prevent scrolling beyond viewport width */
    margin: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Color classes */
.color-white,
.color-white h1,
.color-white h2,
.color-white h3,
.color-white h5,
.color-white a,
.color-white p {
	color: #fff !important;
}


/***** HEADER *****/
.phone-icon i {
	font-size:24px;
	margin-top:2px
}


/***** Button classes *****/


/* Red button */
.red-btn .elementor-button {
	background-color: #902b19;
}
.red-btn .elementor-button:hover {
	background-color: #184969 !important;
}


.green-btn .elementor-button {
	background-color: #516B5C;
}
.green-btn .elementor-button:hover {
	background-color: #184969 !important;
}


/* Post archive read more buttons */
.elementor-post__read-more {
    display: inline-block;
    padding: 8px 16px;
    background-color: #184969;
    color: #ffffff !important;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    text-align: center;
    line-height: 1;
    padding-top: 12px;
    padding-right: 24px;
    padding-bottom: 12px;
    padding-left: 24px;
}

/* Hover state */
.elementor-post__read-more:hover {
    background-color: #902b19;
}



/***** GENERAL CLASSES *****/

/* Add buttons to bottom of slider/carousel sections */
.btn-bottom .e-con-inner {
  	display: flex;
  	flex-direction: column;
  	height: 100%;
}
.btn-bottom .elementor-widget-button {
  	margin-top: auto;
	padding-bottom:20px;
}

/* Toggle button and text */
.toggle-text {
	display:none;
}

/* FAQ accordions */

.faq-accordion .e-n-accordion-item-title {
    display: flex;
    align-items: center;
    position: relative;
}

.faq-accordion .e-n-accordion-item-title-icon {
    display: flex;
    align-items: center;
    margin-left: auto; 
    position: absolute;
    right: 0;
}

/* Tables */

.opening-hours-table table, tr, th, td {
    border: 0 !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    outline: 0 !important;
	border-width:0px !important;
}

/* Container for bullet lists to center them correct */
.bullet-container {
    width: fit-content;
    margin: 0 auto;
	padding-top:20px;
}

.bullet-container ul {
    text-align: left;
    padding-left: 20px;
}

/* Sliders */
.swiper-slide .e-con-inner::before {
    border-radius: 30px;
}



/***** FRONT PAGE *****/

/* Animated headline */
.custom-animated-headline .elementor-headline {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.custom-animated-headline .elementor-headline-plain-text {
    display: block;
    margin-bottom: 10px;
}


/***** FORMS *****/

/* Front page form */
.custom-contact-form select{
	padding: 6px;
    background: none;
}



/***** WOO PRODUCT PAGE *****/
.ast-stock-detail {
	display:none;
}

.custom-product-data .product_title {
	margin: 0 0 0 0 !important;
}

.custom-product-data ul {
	margin-left: 1em !important;
}

.custom-product-img-module .flex-viewport {
	
}

/* Product attributes table */
table.shop_attributes {
    border-top: none !important;
}

.woocommerce-product-attributes-item__label, .woocommerce-product-attributes-item__value {
	
    border-bottom: 1px solid #efeeee !important;
}

/***** FAQ PAGE *****/
/* Active FAQ Button Styles */
.faq-btn.active .elementor-button {
    background-color: var(--e-global-color-astglobalcolor3) !important;
    color: var(--e-global-color-astglobalcolor4)!important;
    border-color: var(--e-global-color-astglobalcolor3)!important;
}

/* CSS for FAQ buttons on mobile */
@media (max-width: 767px) {

  .e-con.btn-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; 
    grid-gap: 10px !important;
  }
  
  /* Target each button widget directly */
  .e-con.btn-container > .elementor-element.faq-btn {
    width: 100% !important;
    margin: 0 !important;
  }
  
  /* Make the actual buttons smaller to fit */
  .e-con.btn-container .elementor-button {
    padding: 8px 16px !important;
    font-size: 10px !important;
    height: auto !important;
    min-height: 0 !important;
    white-space: normal !important;
    line-height: 1.2 !important;
	width:100%;
  }
  
  /* For wider mobile screens, use 3 columns */
  @media (min-width: 480px) {
    .e-con.btn-container {
      grid-template-columns: repeat(3, 1fr) !important;
    }
  }
}



/***** DICTIONARY PAGE *****/

/* Dictionary toggle button styles */
.dict-btn.active-dict-btn .elementor-button {
  	background-color: var(--e-global-color-astglobalcolor3) !important;
    color: var(--e-global-color-astglobalcolor4)!important;
    border-color: var(--e-global-color-astglobalcolor3)!important;
}

/* Hide all dictionary content by default */
.dict-content {
  display: none;
}

/* Show the active dictionary content */
.dict-content.active {
  display: block;
}

.dictionary-table {
  width: 100%;
  border-collapse: separate; /* Changed from collapse to allow spacing */
  border-spacing: 0 0; /* No default spacing */
  font-family: sans-serif;
  border: none;
}

/*.dictionary-table tr {
  height:60px;
}*/

.definition-cell {
	padding-bottom:1em !important;
}
.dictionary-table td {
  text-align: left;
  vertical-align: top;
  padding: 0px 0px;
}
/* Style for the first column (the letter) */
.dictionary-table td:first-child {
  font-weight: bold;
  width: 60px;
  font-size: 1.1em; /* Increased letter size */
}

/* Letter header for desktop view */
.letter-header {
  display: none; /* Hide on desktop */
}
/* Term styling */
.dictionary-term {
  font-weight: 600;
}
/* Style term and definition */
  .dictionary-table .term-cell {
    font-weight: 600;
  }
/* Letter groups spacing - both desktop and mobile */
.letter-group-container {
  margin-bottom: 40px; /* Space between letter groups */
  padding-top: 10px; /* Some space at the top */
}
/* First letter group needs less top margin */
.letter-group-container:first-child {
  padding-top: 0;
}



/* Desktop specific styles */
@media screen and (min-width:1024px) {
	
	/* No nav buttons on sliders on larger screens */
	.no-nav-desktop .elementor-swiper-button {
		display:none !important;
	}
	
	.no-nav-desktop .swiper-pagination {
		display:none !important;
	}
}

/* Desktop specific styles */
@media screen and (min-width: 768px) {
  /* Make the letter align only with the first term in each group */
  .dictionary-table .empty-letter {
    visibility: hidden; /* Hide but keep the space */
  }
  
  /* Add a visible separator between letter groups on desktop */
  .letter-group-container:not(:last-child)::after {
    content: "";
    display: block;
    margin-top: 25px;
    height: 1px;
    background-color: #eee; /* Light gray line */
    width: 100%;
  }
	
	.dictionary-table .term-cell {
		width: 350px; /* Fixed width for the term column */
	}
	
}
/* Mobile responsive styles */
@media screen and (max-width: 767px) {
	
	/* Style for the first column (the letter) */
	.dictionary-table td:first-child {
	  font-size: 1.4em; /* Increased letter size */
	}
	
  .dictionary-table, 
  .dictionary-table tbody, 
  .dictionary-table tr {
    display: block;
    width: 100%;
  }
  
  /* Create letter headers */
  .letter-header {
    display: block;
    padding: 8px;
    margin-top: 15px;
    font-weight: bold;
    font-size: 1.4em; /* Larger letter size on mobile */
  }
  
  /* Hide all letter cells on mobile - both empty and filled */
  .dictionary-table td:first-child:not(.letter-header) {
    display: none;
  }
  
  /* Style term rows */
  .dictionary-table .term-row {
    display: block;
    padding: 4px 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 6px; /* Reduced margin between term rows */
  }
  
  /* Style term and definition */
  .dictionary-table .term-cell {
    display: block;
    font-weight: bold;
    margin-bottom: 2px; /* Reduced space between term and definition */
  }
  
  /* Adjust definition display */
  .dictionary-table .definition-cell {
    display: block;
    padding-left: 10px;
    margin-bottom: 2px; /* Reduced bottom margin */
  }
  
  /* Mobile-specific letter group spacing */
  .letter-group-container {
    margin-bottom: 16px;
    margin-top: 20px;
  }
  
  /* First letter group needs less top margin */
  .letter-group-container:first-child {
    margin-top: 20px;
  }
}
/***** END DICTIONARY PAGE *****/


/***** FOOTER *****/


@media screen and (min-width: 769px) { 

	/*** FRONT PAGE ***/
	
	/* Product carousel */
	.front-product-slider .elementor-swiper-button {
		/*display:none !important;*/
	}
}


@media screen and (max-width: 768px) {
	
	/* HEADINGS */
	
	h2 {
		font-size:26px !important;
	}
	h3 {
		font-size:20px !important;
	}
	
	/*** FRONT PAGE ***/
	
	/* Product carousel */
	.front-product-slider .elementor-swiper-button {
		display:inline-flex !important;
	}
	
	/* Breadcrumbs */
	.eael-breadcrumb-separator {
		margin: 0 3px !important;
	}
	
}