/* LAVES V36 - design global */
@import url("laves-global-v36.css");
@import url("laves-home-v36.css");
@import url("laves-menu-icons-v34.css");

/*CONFIG*/
@font-face {
    font-family: 'Primary';
    font-weight: 300;
    src: url('../fonts/Roboto-Light.ttf');
}

@font-face {
    font-family: 'Primary';
    font-weight: 400;
    src: url('../fonts/Roboto-Regular.ttf');
}

@font-face {
    font-family: 'Primary';
    font-weight: 500;
    src: url('../fonts/Roboto-Bold.ttf');
}

@font-face {
    font-family: 'Primary';
    font-weight: 600;
    src: url('../fonts/Roboto-Bold.ttf');
}

@font-face {
    font-family: 'Primary';
    font-weight: 700;
    src: url('../fonts/Roboto-Bold.ttf');
}

:root,
::before,
::after {
    --large-logo-height: 7.25rem;
    --small-logo-height: 3.25rem;
    --top-bar-padding-y: var(--unit-16);
    --color-black-rgb: 30, 30, 30;
    --color-primary: #FE5000;
    --color-pink: #f48fab;
    /* --color-secondary: #1e1e1e; */
    --color-gray: #F4F4F4;
    --aspect-ratio-landscape: 16/9;
    --aspect-ratio-portrait: 2.75/3;
}

body[data-scrolled] {
    --large-logo-height: 5.25rem;
}

body {
    font-weight: 300;
    color: var(--color-secondary);
    margin-top: var(--top-bar-height);
}

p,
ul li,
ol li
{
    font-size: var(--laves-font-size-s);
}

.text-transform-normal {
    text-transform: initial !important;
}

/*END CONFIG*/

/*COMPONENTS*/
.color-pink {
    color: var(--color-pink);
}
.button {
    display: inline-block;
    color: var(--color-white);
    border: var(--unit-3) solid var(--color-primary);
    border-radius: var(--unit-50);
    background-color: var(--color-primary);
    text-transform: uppercase;
    font-weight: bold;
    transition: var(--transition);
}

.button:hover {
    background-color: var(--color-white);
    color: var(--color-primary);
    cursor: pointer;
}

.button--cta {
    background-color: var(--color-primary);
    color: var(--color-white);
    width: auto;
}

.fixed-width-400 {
    width: 400px;
    text-align: center;
    padding: var(--unit-18) var(--unit-20) !important;
}

/*END COMPONENTS*/

/*TOP BAR*/
.top-bar {
    background-color: var(--color-white);
    padding: var(--top-bar-padding-y) 0;
    border-bottom: var(--unit-3) solid var(--color-primary);
}

.logo-container svg {
    transition: var(--transition);
    fill: var(--color-secondary);

    isolation: isolate;
    will-change: fill;
    transform: translateZ(0);
}

.top-bar:has(nav[data-active]) .logo-container svg {
    fill: var(--color-white);
}

.logo-container svg path {
    fill-rule: evenodd;
}

.menu__item {
    font-size: var(--laves-font-size-xl);
    font-weight: 700;
    color: var(--color-white);
}

.menu__item[data-active]>a,
.menu__submenu-item[data-active]>a
{
    text-decoration: underline;
}

.menu__submenu-item {
    font-weight: 300;
    font-size: var(--laves-font-size-m);
}

.menu__submenu-item + .menu__submenu-item {
    margin-top: var(--unit-12);
}


.hamburger div {
    transition: var(--transition);
}

.hamburger[data-active] div {
    background-color: var(--color-white);
}

/*END TOP BAR*/

/*HERO*/
.hero {
    position: relative;
    height: calc(100vh - var(--top-bar-height));
}

.hero::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-color: var(--color-primary);
    z-index: -1;
}

.hero__title {
    font-size: var(--laves-font-size-xxxl);
    font-weight: 700;
    text-align: center;
    color: var(--color-white);
    text-transform: uppercase;
}

.hero__background {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    animation: zoom_in 30s forwards;
    transform-origin: center;
}


/*SECTION*/
.section {
    position: relative;
}

.section__top {
    text-align: center;
}

.section__title {
    position: relative;
    display: inline-block;
    font-size: var(--laves-font-size-xxxl);
    font-weight: 700;
}

.section__title span {
    display: inline;
    background-repeat: no-repeat;
    padding-bottom: var(--unit-3);
}

.section__subtitle {
    font-size: var(--laves-font-size-l);
}

/* .section__title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    border-bottom: var(--unit-3) solid var(--color-primary);
    border-radius: var(--border-radius-medium);
} */

.section--article ul {
    margin-left: var(--unit-8);
}

.section--article ul li {
    font-size: var(--laves-font-size-s);
}

/*PRODUCTS*/
.products .product {
    text-align: center;
    background-color: var(--color-gray);
    border-radius: var(--border-radius-medium);
}

.products .product__image {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.products .product__name {
    font-size: var(--laves-font-size-xxl);
    font-weight: 700;
}

.products .product__description {
    font-size: var(--laves-font-size-s);
}

.product__image-container {
    /* background-color: var(--color-gray); */
    border-radius: var(--border-radius-medium);
}

.product__logo {
    display: flex;
    margin: 0 auto var(--unit-8) auto;
    max-width: 12rem;
    height: auto;
    transform: translateX(17%);
}

/*HISTORY*/
.history-item__image .image-container {
    --aspect-ratio: 16/10;
    border-radius: var(--border-radius-default);
}

.history-item__name {
    font-size: var(--laves-font-size-m);
    font-weight: 700;
}

.history-item__description {
    font-size: var(--laves-font-size-s);
}

/*CONTACT*/
.form--laves input,
.form--laves textarea {
    padding: var(--unit-8) 0;
    font-size: var(--laves-font-size-xs);
    border: 0px;
    border-bottom: var(--unit-1) solid var(--color-black);
}

.form--laves label {
    font-size: var(--laves-font-size-xs);
}

.contact-item {
    font-size: var(--laves-font-size-s);
}

.contact-item__icon {
    width: var(--unit-35);
    min-width: var(--unit-35);
    height: auto;
    fill: var(--fill);
    stroke: var(--stroke);
}

.contact-item__icon--email {
    --fill: var(--color-black);
    --stroke: none;
}

.contact-item__icon--address {
    --fill: none;
    --stroke: var(--color-black);
}

/*ACCORDEON*/
.accordeon {
    border-bottom: var(--unit-2) solid var(--color-primary);
    padding-bottom: var(--unit-16);
    width: 100%;
}
.accordeon__top {
    padding-bottom: var(--unit-16);;
    cursor: pointer;
}

.accordeon__title {
    font-size: var(--laves-font-size-s);
    font-weight: 700;
}

.accordeon_toggle svg,
.accordeon_toggle svg rect {
    width: var(--unit-24);
    height: var(--unit-24);
}

.accordeon_toggle svg path {
    stroke: var(--color-primary);
}

.accordeon__top .accordeon_toggle svg {
    transition: var(--transition);
    transform: scaleY(-1);
}

.accordeon[data-active] .accordeon_toggle svg {
    transform: scaleY(1);
}

.accordeon__text {
    opacity: 0;
    transform-origin: top;
    transform: scaleY(0);
    transition: var(--transition);
    will-change: opacity, transform, height;
    max-height: 0px;
}

.accordeon[data-active] .accordeon__text {
    opacity: 1;
    transform: scaleY(1);
    max-height: 500px;
}

/*FOOTER*/
.footer-top {
    background-color: var(--color-primary);
    padding: var(--unit-50) 0;
    color: var(--color-white);
}

.footer-bottom {
    padding: var(--unit-35) 0;
    font-size: var(--laves-font-size-xs);
}

.callout {
    text-align: center;
}

.callout__icon svg {
    fill: #FFF;
    height: var(--unit-70);
    width: auto;
}

.callout__name {
    margin-top: var(--unit-24);
    font-size: var(--laves-font-size-s);
    font-weight:400;
}

.history-item__year {
    color: var(--color-primary);
    font-size: var(--laves-font-size-xxxxl);
    font-weight: 700;
}

.video-container {
    position: relative;
    cursor: pointer;
}

.video-container svg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: var(--unit-100);
    height: var(--unit-100);
    fill: var(--color-primary);
    z-index: 1;
    pointer-events: none;
    opacity: 1;
    transition: var(--transition);
}

.video-container video {
    width: 100%;
    height: auto;
}

.video-container::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-black);
    z-index: 0;
    pointer-events: none;
    opacity: .3;
    transition: var(--transition);
}

.video-container[data-active] svg,
.video-container[data-active]::after {
    opacity: 0;
}

/*LARGE ONLY*/
@media (min-width: 64rem) {

    :root,
    ::before,
    ::after {
        --top-bar-height: calc(var(--large-logo-height) + 2 * var(--top-bar-padding-y) + 3px);
        --laves-font-size-xs: var(--font-18);
        --laves-font-size-s: var(--font-24);
        --laves-font-size-m: var(--font-26);
        --laves-font-size-l: var(--font-28);
        --laves-font-size-xl: var(--font-30);
        --laves-font-size-xxl: var(--font-34);
        --laves-font-size-xxxl: var(--font-45);
        --laves-font-size-xxxxl: var(--font-80);
    }

    a {
        transition: var(--transition);
    }

    a:hover {
        color: var(--color-primary);
    }

    .menu__item a:hover {
        color: var(--color-white);
    }

    .hero {
        height: calc(100vh - var(--top-bar-height));
    }

    .hero::after {
        opacity: 30%;
    }

    .logo-container svg {
        height: var(--large-logo-height);
    }

    .section {
        padding: var(--unit-100) 0;
    }

    .button {
        padding: var(--unit-18) var(--unit-40);
    }

    .button--cta {
        padding: var(--unit-18) var(--unit-50);
    }

    .button--cta:hover {
        padding: var(--unit-18) var(--unit-60);
    }

    .button--contact {
        padding-top: var(--unit-12);
        padding-bottom: var(--unit-12);
    }

    .section--article p+p,
    .product p+p {
        margin-top: var(--unit-35);
    }

    .section__title {
        margin-bottom: var(--unit-40);
    }

    .section__title+.section__subtitle {
        margin-top: calc(-1 * var(--unit-30));
        margin-bottom: var(--unit-70);
    }

    .products .product {
        height: 47rem;
        padding: var(--unit-64);
    }

    .products .product__image img {
        width: auto;
        height: auto;
        max-height: 100%;
    }

    .product__image-container img {
        padding: var(--unit-80);
    }

    .history-items {
        position: relative;
    }

    .history-items::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 0;
        height: 100%;
        width: var(--unit-5);
        background-color: var(--color-primary);
        z-index: -1;
    }

    .history-item {
        position: relative;
    }

    .history-item::after {
        content: '';
        position: absolute;
        left: calc(50% + (var(--unit-5) / 2));
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        border-radius: 50%;
        width: var(--unit-24);
        height: var(--unit-24);
        background-color: var(--color-primary);
        z-index: -1;
    }

    .history-info {
        margin-top: var(--unit-70);
    }

    .product__documents svg {
        width: var(--unit-50);
        height: var(--unit-50);
        max-width: var(--unit-50);
        max-height: var(--unit-50);
        min-width: var(--unit-50);
        min-height: var(--unit-50);
    }
}

/*SMALL ONLY*/
@media (max-width: 63.9375rem) {

    :root,
    ::before,
    ::after {
        --top-bar-height: calc(var(--small-logo-height) + 2 * var(--top-bar-padding-y) + 3px);
        --laves-font-size-xs: var(--font-16);
        --laves-font-size-s: var(--font-17);
        --laves-font-size-m: var(--font-18);
        --laves-font-size-l: var(--font-20);
        --laves-font-size-xl: var(--font-22);
        --laves-font-size-xxl: var(--font-24);
        --laves-font-size-xxxl: var(--font-28);
        --laves-font-size-xxxxl: var(--font-30);
    }

    .button {
        padding: var(--unit-10) var(--unit-20);
    }

    .button--cta {
        padding: var(--unit-10) var(--unit-50);
    }

    .button--contact {
        padding: var(--unit-6);
    }

    .logo-container svg {
        height: var(--small-logo-height);
    }
    .fixed-width-400 {
        width:340px;
    }
    .menu__items {
        padding-top: var(--unit-32);
    }

    .hero {
        height: calc(50vh);
    }

    .hero::after {
        opacity: 40%;
    }

    .hero--alternate {
        height: auto;
        aspect-ratio: var(--aspect-ratio-landscape);
    }

    .hero--alternate .hero__title {
        font-size: var(--font-12);
        width: 42.5vw;
        margin-left: auto;
    }

    .section {
        padding: var(--unit-70) 0;
    }

    .section--article p+p,
    .product p+p {
        margin-top: var(--unit-24);
    }

    .section__title {
        margin-bottom: var(--unit-40);
    }

    .section__title+.section__subtitle {
        margin-top: calc(-1 * var(--unit-24));
        margin-bottom: var(--unit-40);
    }

    .products .product {
        padding: var(--unit-32);
    }

    .products .product__actions {
        margin-top: var(--unit-32);
    }

    .products .product__image img {
        max-height: 20rem;
    }

    .product__image-container img {
        padding: var(--unit-20);
    }

    .history-info {
        margin-top: var(--unit-40);
    }

    .video-container svg {
        display: none;
    }

    .product__documents svg {
        width: var(--unit-40);
        height: var(--unit-40);
        max-width: var(--unit-40);
        max-height: var(--unit-40);
        min-width: var(--unit-40);
        min-height: var(--unit-40);
    }
}


/*TARGETED*/
/* @media (max-width: 63.9375rem) and (orientation: landscape) {
    .product__image-container {
        margin: auto;
        padding-bottom: 70vw !important;
    }
}

@media (min-width: 768px) and (orientation: portrait) {
    .product__image-container {
        margin: auto;
        padding-bottom: 70vw !important;
    }
} */

#tinymce [data-aos] {
    opacity: 1 !important;
}

#tinymce .accordeon__text {
    opacity: 1;
    transform: unset;
    max-height: unset;
}


@keyframes zoom_in {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.2);
    }
}

/*RESPOSIVE STUFF*/
@media all and (min-width: 64rem) and (max-width: 90rem) {
    html {
        font-size: 1.7075773746vmin;
    }
}

@media all and (min-width: 1536px) and (-webkit-min-device-pixel-ratio: 1.25) {
    html {
        font-size: 1.7075773746vmin;
    }
}

@media all and (min-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) {
    html {
        font-size: 1.7075773746vmin;
    }
}

@media all and (min-width: 1097px) and (-webkit-min-device-pixel-ratio: 1.75) {
    html {
        font-size: 1.7075773746vmin;
    }
}

/* Se adaugă după regulile existente din CSS-ul global LAVES. */
@media (max-width: 767px) {
  .top-bar,
  .top-bar > .grid-container,
  .top-bar > .grid-container > .grid-x {
    box-sizing: border-box;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .top-bar {
    width: 100% !important;
  }

  .top-bar nav.menu--toggleable {
    max-width: 100% !important;
  }

  /* Butoanele cu lățime fixă pot ocupa cel mult spațiul celulei. */
  .button.fixed-width-400 {
    box-sizing: border-box;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* Redimensionează imaginile mărite de temă în interiorul cardurilor. */
  body.acasa .product--5 > a > img,
  body.unde-gasesti-produsele-laves img[alt="Farmacia 3"],
  body.unde-gasesti-produsele-laves img[alt="Medikon"] {
    max-width: 100% !important;
    object-fit: contain;
    transform: none !important;
  }
}