/*
Theme Name: Sophies Minde 2025
Theme URI: https://olliewp.com
Description: A theme for Sophies Minde Ortopedi - Based on Ollie
Author: Vegard Simensen // The Pitch
Author URI: https://thepitch.no
Template:     ollie
Version: 1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         blog, portfolio, entertainment, grid-layout, one-column, two-columns, three-columns, four-columns, block-patterns, block-styles, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, full-width-template, rtl-language-support, style-variations, template-editing, theme-options, translation-ready, wide-blocks
Text Domain: ollie-child
*/


  .underline a {
    text-decoration: underline;
  }

  .underline-hover a {
    text-decoration: none;
  }

    .underline-hover a:hover {
    text-decoration: underline;
  }

  .color-contrast a {
	color: #007A80!important;
  }

  .home .breadcrumb-wrapper {
	display: none;
  }



	/* Navigation
--------------------------------------------- */

  .wp-block-navigation-item .current-menu-item a {
	text-decoration: none;
  }

    .wp-block-navigation-item .current-menu-item a:hover {
	text-decoration: none;
  }

  .wp-block-navigation-item a:hover {
	text-decoration: none;
  }

  .wp-block-navigation__submenu-container a:hover  {
	background: #F2FBF9;
	transition: .5s;
	}


    /* Hover effects
--------------------------------------------- */

.container-hover-ani {
	text-decoration: none;
}

.container-hover-ani:hover {
	transition: .3s;
	color: #33B5B3
}

.container-hover-ani .wp-block-image svg {
	width: 16px;
}

.container-hover-ani .wp-block-image svg .st0 {
	stroke: #000;
}


.container-hover-ani:hover .wp-block-image svg .st0 {
	stroke: #33B5B3;
}

.underline-border a {
	text-decoration: none;
	padding-bottom: 3px;
	border-bottom: 2px solid #33B5B3;
}

.hover-color-1 a:hover {
	transition: .3s;
	color: #33B5B3
}

.wp-block-group p a:hover,
.wp-block-group h3 a:hover,
.wp-block-group h4 a:hover,
.wp-block-group h5 a:hover,
.wp-block-group h6 a:hover,
.wp-block-group span a:hover {
		transition: .3s;
	color: #33B5B3
}

.wp-block-read-more:hover {
	color: #33B5B3
}

.esab__heading_txt a {
	text-decoration: none;
}

  /* Buttons
--------------------------------------------- */

  .wp-block-button a {
	transition: .3s;
  }

  :root :where(.wp-element-button:hover, .wp-block-button__link:hover) {
    text-decoration: none;
  }

  .wp-block-button.is-style-fill .wp-block-button__link:hover,
  .wp-block-button.is-style-button-brand-alt .wp-block-button__link:hover {
    background-color: #33B5B3;
    color: white;
}

  .wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: #007A80;
	outline-color: #007A80;
    color: white!important;
}

  .wp-block-button.is-style-secondary-button .wp-block-button__link:hover {
    background-color: #ADE1E1;
	outline-color: #ADE1E1;
}



  /* Button-style "None" with a arrow
--------------------------------------------- */

/* Base button style */
.wp-block-button.is-style-button-none .wp-block-button__link {
    position: relative;
    display: inline-block;
    padding-right: 30px; /* space for arrow */
    background: none;
    border: none;
    color: black;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Underline */
.wp-block-button.is-style-button-none .wp-block-button__link::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -3px;
    height: 2px;
    width: 100%;
    background-color: #33B5B3;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

/* Arrow SVG (black by default) */
.wp-block-button.is-style-button-none .wp-block-button__link::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15.46 14.76'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.2' d='M0,7.38h13.9M7.3,0.78l6.6,6.6-6.6,6.6'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    translate: 0 -50%;
    transition: background-image 0.3s ease, opacity 0.3s ease;
    pointer-events: none;
}

/* Hover states */
.wp-block-button.is-style-button-none .wp-block-button__link:hover::before {
    transform: scaleX(1);
}

.wp-block-button.is-style-button-none .wp-block-button__link:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15.46 14.76'%3E%3Cpath fill='none' stroke='%2333B5B3' stroke-width='2.2' d='M0,7.38h13.9M7.3,0.78l6.6,6.6-6.6,6.6'/%3E%3C/svg%3E");
    opacity: 1;
}

  /* Button-style "None" with a arrow down
--------------------------------------------- */
.wp-block-button.is-style-button-none.arrow-down .wp-block-button__link::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15.46 14.76'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.2' d='M0,7.38h13.9M7.3,0.78l6.6,6.6-6.6,6.6'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
	rotate: 90deg;
    translate: 0 -50%;
    transition: background-image 0.3s ease, opacity 0.3s ease;
    pointer-events: none;
}


/* Desktop Navigation 
--------------------------------------------- */

/* Drop nav */
header .wp-block-navigation .wp-block-navigation__submenu-container {
    border: none !important;
    font-size: var(--wp--preset--font-size--small);
    line-height: var(--wp--custom--line-height--snug);
    border-radius: 5px;
    min-width: 300px !important;
    margin-left: calc(var(--wp--preset--spacing--medium) * -1);
    padding: 0;
    z-index: 20 !important;
    border-radius: 5px;
    box-shadow: var(--wp--preset--shadow--small-light);
	
}

.wp-block-navigation__container .current-menu-item > a {

	text-decoration: none;
}


/* Mobile Navigation
--------------------------------------------- */

@media only screen and (max-width: 993px) {
	.is-menu-open.has-modal-open {
		padding: var(--wp--preset--spacing--medium);
	}

	.wp-block-navigation__responsive-container-content {
		gap: var(--wp--preset--spacing--medium);
	}

	.is-menu-open.has-modal-open .wp-block-navigation__container {
		width: 100%;
		gap: 5px !important;
	}

	.is-menu-open.has-modal-open .wp-block-page-list {
		width: 100%;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
		border-radius: 0;
		margin: 0;
		padding: 5px 0 0 20px;
		align-items: flex-start;
		flex-direction: column;
		gap: 5px;
		width: 100%;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon {
		display: block;
		position: absolute;
		right: 0;
		top: 5px;
		height: auto;
		width: 60px;
		padding: 15px 0;
		margin: 0;
	}

	body.rtl .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon {
		left: 0;
		right: auto;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon svg {
		height: 16px;
		margin: 0;
	}

	.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
		display: none;
	}

	.wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation-submenu {
		display: flex;
	}

	.is-menu-open.has-modal-open .wp-block-navigation__container li:not(.wp-social-link) {
		width: 100%;
		padding: 0 0;
		position: relative;
	}

	/* Mobile menu links */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
		width: 100%;
		font-size: var(--wp--preset--font-size--base);
		padding: 5px 60px 5px 15px;
		border-radius: 5px;
	}

	body.rtl .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
		padding: 5px 15px 5px 60px;
	}

	.wp-block-navigation__container .current-menu-item > .wp-block-navigation-item__content,
	.wp-block-navigation__container .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
		transition: .3s ease;
		text-decoration: none;
		background: color-mix(in srgb, currentColor, transparent 97%);
		-webkit-tap-highlight-color: transparent;
	}

	.wp-block-navigation__container .wp-block-navigation-item:has(.wp-block-navigation__submenu-container:hover) > .wp-block-navigation-item__content {
		background: transparent;
	}

	/* Mobile menu open button */
	.wp-block-navigation__responsive-container-close,
	.wp-block-navigation__responsive-container-open {
		padding: 4px;
		border-radius: 3px;
		background: var(--wp--preset--color--tertiary);
		color: var(--wp--preset--color--main);
	}

	/* Mobile menu close button */
	.wp-block-navigation__responsive-container-close {
		background: var(--wp--preset--color--tertiary);
		color: var(--wp--preset--color--main);
	}

	.is-menu-open.has-modal-open .wp-block-buttons {
		width: 100%;
	}

	.is-menu-open.has-modal-open .wp-block-buttons .wp-block-button {
		flex-basis: 100%;
		width: 100%;
	}

	.is-menu-open.has-modal-open .wp-block-buttons .wp-block-button__link {
		font-size: var(--wp--preset--font-size--base);
		flex-basis: 100%;
		width: 100%;
		padding: 15px;
	}
}

/* Styling the horizontal scrollbar on history page
--------------------------------------------- */
.cb-carousel-block .swiper::-webkit-scrollbar {
  height: 6px;               /* thin bar */
}
.cb-carousel-block .swiper::-webkit-scrollbar-track {
  background: transparent;   /* or a very light tint */
  margin: 0 20px;            /* inset the track so it doesn’t butt right against your slides */
}
.cb-carousel-block .swiper::-webkit-scrollbar-thumb {
  background-color: #99DAD9; /* match your turquoise dot */
  border-radius: 3px;        /* pill-shaped */
}

/* Firefox scrollbar */
.cb-carousel-block .swiper {
  scrollbar-width: thick;
  scrollbar-color: #99DAD9 transparent;
}

/* Optional: only show on hover for a cleaner look */
.cb-carousel-block .swiper::-webkit-scrollbar {
  opacity: 0;
  transition: opacity 0.3s;
}
.cb-carousel-block .swiper:hover::-webkit-scrollbar {
  opacity: 1;
}
.cb-carousel-block .swiper:hover {
  scrollbar-color: #99DAD9 transparent;
}
