/*--CUSTOM PROPERTIES--*/
:root {
    --clr-light-400: rgb(251, 233, 244);

    --clr-primary-400: rgb(214, 20, 81);
    --clr-primary-500: rgb(175, 20, 69);
  
    --clr-secondary-400: rgb(255, 242, 61);

    --clr-neutral-100: rgb(255, 255, 255);
    --clr-neutral-200: rgb(221, 221, 221);
    --clr-neutral-900: rgb(19, 19, 19);
  
    --ff-primary: 'Inter', sans-serif;
    --ff-secondary: 'Mali', cursive;

    --ff-body: var(--ff-primary);
    --ff-heading: var(--ff-primary);

    --ff-title: var(--ff-secondary);
  
    --fw-thin: 300;
    --fw-regular: 400;
    --fw-semi-bold: 500;
    --fw-bold: 700;
  
    --fs-300: .8125rem;
    --fs-400: .875rem;
    --fs-500: 1rem;
    --fs-600: 1.3rem;
    --fs-700: 1.875rem;
    --fs-800: 2.4rem;
    --fs-900: 3.2rem;
  
    --fs-body: var(--fs-400);

    --bar-width: 60px;
    --bar-height: 8px;
    --hamburger-gap: 6px;
    --foreground: var(--clr-primary-400);
    --background: var(--clr-neutral-100);
    --hamburger-margin: 20px;
    --animation-timing: 200ms ease-in-out;
    --hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) * 2);
}
  
@media (min-width: 50em) {
    /*Desktop font size*/
    :root {
      --fs-500: 1.3rem;
      --fs-600: 1.8rem;
      --fs-700: 3.2rem;
      --fs-800: 3.8rem;
      --fs-900: 4.2rem;
  
      --fs-body: var(--fs-500);
    }
}
  
/*--STYLE RESET--*/
/* Box sizing rules */
*,
*::before,
*::after {
    box-sizing: border-box;
}
  
/* Remove default margin */
* {
    margin: 0;
    padding: 0;
    font: inherit;
}
  
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
    list-style: none;
}
  
/*Remove list style and padding*/
ul {
    list-style: none;
    padding-left: 0;
}
  
/* Set core root defaults */
html:focus-within {
    scroll-behavior: smooth;
}
  
html,
body {
    height: 100%;
}
  
/* Set core body defaults */
body {
    text-rendering: optimizeSpeed;
    line-height: 1.5;
}
  
/* A elements that don't have a class get default styles */
a:not([class]) {
    text-decoration-skip-ink: auto;
}
  
/* Make images easier to work with */
img,
picture,
svg {
    max-width: 100%;
    display: block;
}
  
/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
    html:focus-within {
     scroll-behavior: auto;
    }
    
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
}
  
/*--GENERAL STYLE--*/
html {
    scroll-behavior: smooth;
    scroll-padding-top: 60px;
}
  
body {
    font-size: var(--fs-body);
    font-family: var(--ff-body);
    color: var(--clr-neutral-900);
}

main {
    background-color: var(--clr-light-400);
}
  
h1,
h2,
h3,
p {
    margin-bottom: 16px;
}
  
p {
    font-size: var(--fs-400);
}
  
a {
    color: var(--clr-neutral-900);
    transition: 0.3s;
}
  
a:hover {
    color: var(--clr-primary-400);
}
  
/*UTILITY CLASSES*/
.container {
    max-width: 90rem;
    width: 90%;
    margin: 0 auto;
}
  
.container--full {
    max-width: 100%;
    width: 100%;
}

.container--col-2 {
    margin-top: 60px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}
 
.section-title {
    font-family: var(--ff-title);
    text-align: center;
    color: var(--clr-primary-400);
    font-size: var(--fs-700);
    font-weight: var(--fw-bold);
    margin-bottom: 60px;
    position: relative;
}
  
.section-title::after {
    content: '';
    width: 80px;
    height: 4px;
    position: absolute;
    left: 50%;
    bottom: -10px;
    border-radius: 4px;
    transform: translate(-50%, -50%);
    background-color: var(--clr-primary-400);
}

.image {
    width: 100%;
    border-radius: 35px;
    object-fit: cover;
    aspect-ratio: 1/1; 
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    transition: 1s;
}

.image:hover {
    transform: scale(1.04);
    box-shadow: rgba(0, 0, 0, 0.44) 0px 3px 8px;
}

.image--size-3 {
    max-width: 500px;
}

.content-position {
    display: flex;
}

.content-position--center {
    align-items: center;
    justify-content: center;
}

.content-position--right {
    align-items: center;
    justify-content: flex-end;
}

.content-position--left {
    align-items: center;
    justify-content: flex-start;
}

.fs-3 {
    line-height: 1.8;
    font-size: var(--fs-500);
}

.ff-1 {
    font-family: var(--ff-title);
}

.pad-block {
    padding-block: 60px;
}

.block-max-width {
    max-width: 580px;
}

.shadow {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.active-link {
    background-color: var(--clr-primary-500);
}

.color-bold-text {
    color: var(--clr-primary-400);
    font-weight: var(--fw-bold);
}

.bold-text {
    white-space: nowrap;
    font-weight: var(--fw-bold);
}

@media only screen and (max-width: 1024px) {
    .container--col-2 {
        grid-template-columns: 1fr;
    }

    .content-position--right,
    .content-position--left {
        justify-content: center;
    }

    .container--col-2-row-1 {
        grid-row: 1
    }
}
  
/*MENU NAVIGATION*/
.hamburger-menu {
    --x-width: calc(var(--hamburger-height) * 1.41421356237);
  
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: var(--hamburger-gap);
    width: max-content;
    position: fixed;
    top: var(--hamburger-margin);
    right: var(--hamburger-margin);
    cursor: pointer;
}
  
.hamburger-menu:has(input:checked) {
    --foreground: var(--clr-neutral-100);
    --background: var(--clr-primary-400);
}
  
.hamburger-menu:has(input:focus-visible)::before,
.hamburger-menu:has(input:focus-visible)::after,
.hamburger-menu input:focus-visible {
    border: 1px solid var(--background);
    box-shadow: 0 0 0 1px var(--foreground);
}
  
.hamburger-menu::before,
.hamburger-menu::after,
.hamburger-menu input {
    content: "";
    width: var(--bar-width);
    height: var(--bar-height);
    background-color: var(--foreground);
    border-radius: 9999px;
    transform-origin: left center;
    transition: opacity var(--animation-timing), width var(--animation-timing),
      rotate var(--animation-timing), translate var(--animation-timing),
      background-color var(--animation-timing);
}
  
.hamburger-menu input {
    appearance: none;
    padding: 0;
    margin: 0;
    outline: none;
    pointer-events: none;
}
  
.hamburger-menu:has(input:checked)::before {
    rotate: 45deg;
    width: var(--x-width);
    translate: 0 calc(var(--bar-height) / -2);
}
  
.hamburger-menu:has(input:checked)::after {
    rotate: -45deg;
    width: var(--x-width);
    translate: 0 calc(var(--bar-height) / 2);
}
  
.hamburger-menu input:checked {
    opacity: 0;
    width: 0;
}
  
.sidebar {
    z-index: 10;
    position: fixed;
    transition: translate var(--animation-timing);
    translate: -100%;
    padding: 0.5rem 1rem;
    padding-top: calc(var(--hamburger-height) + var(--hamburger-margin) + 1rem);
    background-color: var(--foreground);
    color: var(--background);
    width: 100%;
    height: 100%;
}
  
.hamburger-menu:has(input:checked) + .sidebar {
    translate: 0;
}

.sidebar__items-wrapper {
    display: flex;
    justify-content: center;
}

.sidebar__item {
    margin-bottom: 20px;
}

.sidebar__link {
    padding: 20px;
    border-radius: 8px;
    font-size: var(--fs-700);
    color: var(--clr-neutral-100);
    text-decoration: none;
    display: block;
    transition: 0.8s;
}

.sidebar__link:hover {
    color: var(--clr-neutral-200);
    transform: scale(1.08);
}

/*HERO SECTION*/

/*hero section animations*/
@keyframes iceCreamRotate {
    0% {
        transform:  translateX(100%) scale(0.2) rotate(0);
        opacity: 0;
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1) rotate(30deg);
    }
}

@keyframes iceCreamDrop {
    0% {
        transform: translateY(-10%);
    }
    100% {
        transform: translateY(-2px);
    }
}

.hero-section {
    background-image:  url(../images/cornet-pattern.jpg);
    background-repeat: repeat;
    padding-bottom: 60px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.hero-section__wrapper {    
    padding-block: 60px 30px;
    background-color: var(--clr-secondary-400);
}

.hero-section__content-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-section__title {
    font-family: var(--ff-title);
    font-weight: var(--fw-bold);
    font-size: var(--fs-900);
    color: var(--clr-primary-400);
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: var(--clr-neutral-900);
}

.hero-section__image {
    max-width: 180px;
    filter: drop-shadow(6px 4px 2px rgb(0 0 0 / 0.1));
    animation: 2s ease-out 0s 1 iceCreamRotate;
    transform: rotate(30deg);
}

.hero-section__ice-cream-drop {
    filter: drop-shadow(12px 4px 2px rgb(0 0 0 / 0.4));
    position: relative;
    transform: translateY(-2px);
    animation: 5s ease-out 0s 1 iceCreamDrop;
}

@media only screen and (max-width: 1024px) {
    .hero-section__content-box {
        text-align: center;
        grid-row: 2;
    }

    .hero-section__image-box {
        display: flex;
        justify-content: center;
    }
}

@media only screen and (max-width: 480px) {
    .hero-section__image {
        max-width: 120px;
    }
}

/*OUR FLAVORS SECTION*/
.our-flavors {
    font-weight: var(--fw-semi-bold);
}

/*PRICES SECTION*/
/*cards*/
.prices__grid-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    place-content: center;
    gap: 50px;
}

.prices__card {
    display: flex;
    gap: 10px;
}

.prices__image {
    position: sticky;
    top: 20px;
    width: auto;
    height: 40px;
    transition: 0.8s;
}

.prices__card:hover .prices__image {
    transform: scale(1.5);
}

.prices__card-list {
    width: 100%;
    border-left: 1px solid var(--clr-primary-400);
    padding-left: 10px;
}

.prices__card-item {
    display: flex;
    justify-content: space-between;
}

.prices__card-text {
    font-size: var(--fs-500);
}

/*additional offers*/
.prices__content {
    margin-top: 60px;
}

.prices__content-text {
    max-width: 800px;
}

@media only screen and (max-width: 980px) {
    .prices__grid-wrapper {
        grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    }
}

/*CONTACT US*/
.contact-us__content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    place-content: center;
    gap: 20px;
}

.contact-us__list-title,
.contact-us__list-item {
    text-align: center;
}

.contact-us__list-title {
    margin-bottom: 25px;
}

.contact-us__list-title i {
    color: var(--clr-primary-400);
}

.contact-us__list-item > * {
    text-decoration: none;
}

@media only screen and (max-width: 980px) {
    .contact-us__content {
        flex-direction: column;
        text-align: center;
    }
}

/*FOOTER*/
.footer {
    padding-block: 15px;
    background-color: var(--clr-primary-400);
    text-align: center;
    -webkit-box-shadow: 0px -5px 13px -5px rgba(0,0,0,0.59);
    -moz-box-shadow: 0px -5px 13px -5px rgba(0,0,0,0.59);
    box-shadow: 0px -5px 13px -5px rgba(0,0,0,0.59);
}

.footer__text {
    color: var(--clr-neutral-100);
    font-size: var(--fs-400);
    margin: 0;
}

.prices__card-item--flavored {
    align-items: flex-start;
}

.prices__flavor-list {
    font-size: var(--fs-300);
    font-weight: normal;
    color: var(--clr-neutral-900);
    display: block;
    margin-top: 4px;
    line-height: 1.4;
}