/******************* MAIN COLORS *******************/

a {
    color: #911C04;
}

h1 {
    margin-top: 0;
    font-size: 1.7rem !important;
}

h2 {
    font-size: 1.5rem !important;
}

ul {
    margin: 0;
    padding: 1.2rem;
}

span.red {
    color: #E7180B;
}

span.vat {
    font-size: 1rem;
}

/*Top menu (supertopmenu changes color when scrolling)*/
#supertop-menu {
    background-color: #911C04;
} 
#supertop-menu2 {
    background-color: #00000066;
}
.item, .item a, #supertop-menu2 .top-link, .item, .item a, #supertop-menu .top-link {
    color: white;
}
.item a:hover, #supertop-menu2 .top-link:hover, .item a:hover, #supertop-menu .top-link:hover {
    color: #dea72d;
}
.item, .item a, #supertop-menu2 .selected, .item, .item a, #supertop-menu .selected {
    color: #dea72d;
}
.item, .item a, #supertop-menu2 .selected:hover, .item, .item a, #supertop-menu .selected:hover {
    color: #fff;
}
#supertop-menu2.scrolled {
    background: #911C04;
}
#supertop-menu2.scrolled .top-link {
    color: white;
}
#supertop-menu2.scrolled .top-link:hover {
    color: #dea72d;
}
#supertop-menu2.scrolled .selected {
    color: #dea72d;
}
#supertop-menu2.scrolled .selected:hover {
    color: white;
}

/*To keep text menu white if topbar change*/
#supertop-menu2.scrolled .hamburger-menu li.item a {
    color: white !important;
}
#supertop-menu2.scrolled .hamburger-menu li.item a:hover {
    color: #43b7ff !important;
}

div#top-nav {
    max-width: 900px!important;
}

/*Hamburger menu*/
.menu-button {
    background: white;
}
.menu-button span { /*button 3 bars*/
    background-color: #911C04;
}

/* Sliding menu */
.menu-right-slide, .menu-top-slide {
    background-color: #153b61;
}
.menu-right-slide a, .menu-top-slide a {
    color: white;
}

.menu-top-slide.open { 
 max-height: 400px; 
}

.menu-fade-in {
    background: rgba(145, 28, 4, 0.95); /* deep red overlay */
}

/* Rounded boxes */
.color-box, .color-box-link {
    background-color: #911C04;
    color: #fff;  
}
.color-box-link:hover {
    background-color: #eee;      /* hover background */
    color: #333;              /* hover text color */
}
.color-box a {
    color: #dea72d;
}
.color-box a:hover {
    color: #fff;
}
.gray-box, .gray-box-link, .gray-box-form {
    background-color: #eee;   
    color: #333;
}
.gray-box-link:hover {
    background-color: #153b61;      /* hover background */
    color: white;              /* hover text color */
}


/******************* LANGUAGE ICONS *******************/

.language-icon {
    width: 30px;

    height: 30px;
    margin-top: 10px;
    background-image: url('../img/icons/language2.svg');
    background-size: contain;
    float: left;
}

#supertop-menu2.scrolled .language-icon {
    width: 30px;
    height: 30px;
    margin-top: 10px;
    background-image: url('../img/icons/language.svg');
    background-size: contain;
    float: left;
}

.bg-white.home {
    margin-top: 308px;
}

/******************* BUTTONS EFFECTS *******************/

/*Buttons*/
[role=button], [type=button], [type=file]::file-selector-button, [type=reset], [type=submit], button {
    background-color: #153b61;
    color: white;
}

.btn {
    border: none;
    cursor: pointer;
    text-decoration: none;   /* remove underline for links */
}

/* 1. Color swap */
.btn-color-swap {
    background-color: #43b7ff;   
    color: #153b61;   
}

.btn-color-swap:hover {
    background-color: #153b61;   
    color: #43b7ff;   
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-wobble {
    background-color: #43b7ff;   
    color: #153b61;   
}

/* 2. Wobble Animation */
.btn-wobble:hover {
    animation: wobble 0.8s;
    background-color: #43b7ff;   
    color: #153b61;    
}

@keyframes wobble {
    0%,
    100% {
        transform: translateX(0%);
    }
    15% {
        transform: translateX(-25%) rotate(-5deg);
    }
    30% {
        transform: translateX(20%) rotate(3deg);
    }
    45% {
        transform: translateX(-15%) rotate(-3deg);
    }
    60% {
        transform: translateX(10%) rotate(2deg);
    }
    75% {
        transform: translateX(-5%) rotate(-1deg);
    }
}

/* 3. Border Reveal Solid Fill Reveal left to right */
.btn-border-reveal {
    display: inline-block;       /* same as other buttons */
    vertical-align: middle;      /* keeps alignment consistent */
    background-color: white;   /* initial background */
    color: #153b61;
    border: 2px solid #153b61;
    position: relative;
    overflow: hidden;            /* clip ::after inside */
    z-index: 0;
}

.btn-border-reveal::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;                    /* start hidden */
    height: 100%;
    background-color: #153b61;      /* hover background */
    transition: width 0.3s ease;
    z-index: -1;                 /* behind text */
}

.btn-border-reveal:hover::after {
    width: 100%;                 /* expand left → right */
}

.btn-border-reveal:hover {
    color: #43b7ff;               /* text color changes */
}

/* 4. Rotate 3D */
.btn-rotate-3d {
    perspective: 300px;
    transform-style: preserve-3d;
}

.btn-rotate-3d:hover {
    animation: rotate3d 0.7s;
    background-color: #43b7ff;   
    color: #153b61;    
}

@keyframes rotate3d {
    0% {
        transform: rotateX(0deg);
    }
    50% {
        transform: rotateX(180deg);
    }
    100% {
        transform: rotateX(360deg);
    }
}

/* 5. Solid Fill Reveal left to right */
.btn-fill-reveal {
    display: inline-block;       /* same as other buttons */
    vertical-align: middle;      /* keeps alignment consistent */
    background-color: #911C04;   /* initial background */
    color: white;
    position: relative;
    overflow: hidden;            /* clip ::after inside */
    z-index: 0;
}

.btn-fill-reveal::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;                    /* start hidden */
    height: 100%;
    background-color: #4A0E02;      /* hover background */
    transition: width 0.3s ease;
    z-index: -1;                 /* behind text */
}

.btn-fill-reveal:hover::after {
    width: 100%;                 /* expand left → right */
}

.btn-fill-reveal:hover {
    color: #fff;               /* text color changes */
}

/* 6 Solid Fill Reveal bottom to top */
.btn-fill-reveal-vertical {
    display: inline-block;
    vertical-align: middle;
    background-color: #911C04;
    color: white;
    position: relative;
    overflow: hidden;
    z-index: 0;
}

.btn-fill-reveal-vertical::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;                  /* anchor at bottom */
    width: 100%;
    height: 0;                  /* start hidden */
    background-color: #4A0E02;
    transition: height 0.3s ease;
    z-index: -1;                /* behind text */
}

.btn-fill-reveal-vertical:hover::after {
    height: 100%;               /* expand bottom → top */
}

.btn-fill-reveal-vertical:hover {
    color: #fff;
}

/******************* IMAGES EFFECTS *******************/

.zoom, .color-overlay, .rotate, .blur {
    transition: all 0.3s ease; /
}

/* 1. Zoom */
.zoom:hover {
    transform: scale(1.1);
}

/* 2. Grayscale */
.grayscale:hover {
    filter: grayscale(100%);
}

/* 3. Color Overlay */
.color-overlay {
    position: relative;
}
.color-overlay:hover {
    filter: brightness(0.7); /* darken image slightly */
}

/* 4. Rotate */
.rotate:hover {
    transform: rotate(5deg) scale(1.05);
}

/* 5. Blur */
.blur:hover {
    filter: blur(3px);
}

.background {
    position: fixed; /* stays in place */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../img/others/dog.webp') no-repeat center center;
    background-size: cover;
    z-index: -1; /* behind everything */
}


/******************* CARROUSSELS *******************/

/* Fade Slideshow Auto */
.fade-slideshow {
  position: relative;
    width: 100%;
    max-width: 600px;
    aspect-ratio: 16/9;
    overflow: hidden;
}
.fade-slideshow img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0; /* hide by default */
    transition: opacity 1s ease-in-out;
}
.fade-slideshow img.active {
  opacity: 1; /* show only active */
}

/* Fade Slideshow Auto Arrows */
.carousel-slideshow {
    position: relative;
    width: 100%;
    max-width: 600px;
    aspect-ratio: 16/9;
    overflow: hidden;
}
.carousel-slideshow .slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    object-fit: cover;
}
.carousel-slideshow .slide.active { opacity: 1; }
.carousel-slideshow #prev,
.carousel-slideshow #next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    padding: 8px;
    cursor: pointer;
}
.carousel-slideshow #prev { left: 10px; }
.carousel-slideshow #next { right: 10px; }

/* Auto Sliding Slideshow */
.auto-slideshow {
  position: relative;
    width: 100%;
    max-width: 600px;
    aspect-ratio: 16/9;
    overflow: hidden;
}

.auto-slideshow .track {
    display: flex;
    /* width is dynamic; JS will append a clone for seamless loop */
    will-change: transform;
    transition: transform 0.8s ease-in-out;
}

.auto-slideshow img {
    flex: 0 0 100%;     /* each slide exactly one viewport of the slideshow */
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Manual Carousel Slideshow */

.manual-carousel {
  position: relative;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.manual-carousel .track {
  display: flex;
  will-change: transform;
  transition: transform 0.8s ease-in-out;
}

.manual-carousel img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.manual-carousel .nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
}
.manual-carousel .prev { left: 10px; }
.manual-carousel .next { right: 10px; }


/******************* BANNERS *******************/
.bg-white.banner-bg {
    height: auto;
    min-height: 388px;
    background: url("https://legaulois-yamaguchi.jp/img/others/banner-home.webp") no-repeat 50% 50%;
    background-size: cover;    
    margin: 0;
    padding: 0;
    top: 0;
    position: absolute;
    text-align: center;
}

@media (max-width: 768px) {
    .bg-white.banner-bg {
        background: url("https://legaulois-yamaguchi.jp/img/others/banner-home-small.webp") no-repeat 50% 50%;
    }
}

.dark {
    background: #00000033;
    padding: 1rem 0;
}

.banner-home-text {
    min-height: 325px;
}

h1.home {
    color: #fff;
    font-size: 2rem;
    padding-top: 2rem;
    margin-top: 2rem;
}

p.banner-text {
    color: #fff;
    font-size: 1.5rem;
    margin: 1rem 0 0;
}


/******************* BOXES WITH MOVING BG IMAGE *******************/

.my-box {
  width: 400px;
  height: 250px;
  background-color: #ccc;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

/* Hidden image layer */
.my-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../img/others/dodog1.jpeg');
  background-size: cover;
  background-position: center bottom; /* start lower */
  opacity: 0; /* fully hidden */
  transition: 
    opacity 0.6s ease,
    background-position 0.6s ease;
}

/* Hover: fade in + slide upward */
.my-box:hover::before {
  opacity: 1;
  background-position: center top; /* slide upward */
  cursor: pointer;
}

.my-box2 {
  width: 400px;
  height: 250px;
  background-color: #ccc;
  background-image: url('../img/others/dodog1.jpeg');
  background-size: cover;
  background-position: center top; /* start at the top */
  transition: background-position 0.6s ease;
}

.my-box2:hover {
  background-position: center bottom; /* slide downward */
  cursor: pointer;
}


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

.map-responsive {
    margin-top: 2rem;
}

div#footer {
    width: 100%;
    background-color: #911C04;
    padding: 0;
    color: white;
    margin: -0.5rem 0;
}

.footer-menu {
    padding: 2rem 0;
}

.copyright {
    width: 100%;
    border-top: 1px solid #dea72d;
    padding-top: 20px;
    text-align: center;
}

#footer .bg-color {
    background-color: #222;
    padding: 0.5rem 0;
}

#footer .grid .sns {
    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
    text-align: center;
    margin: 0;
}

#footer .grid .sns img {
    width: 50px ;
}

span.title-footer {
    color: #dea72d;
}

#footer a {
    color: #dea72d;
}

#footer a:hover {
    color: #fff;
}


#error404 {
    text-align: center;
}

.aboutus-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px;
}

.aboutus-text {
    flex: 1;
    min-width: 250px;
}

@media (max-width: 768px) {
    .aboutus-wrapper {
        flex-direction: column;
        align-items: center;
        text-align: left;
    }
    .aboutus-text {
        width: 100%;
    }
}

.aboutus-text h2 {
    margin-top: 0;
}

.dinner-text {
    background-image: url('http://legaulois-yamaguchi.jp/img/others/omakase1.webp');
    width: 350px;
    height: 347px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
    font-size: 0.9rem;
}

.dinner-pic {
    background-image: url('http://legaulois-yamaguchi.jp/img/others/omakase2.webp');
    width: 350px;
    height: 347px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}