/*
* Bootstrap layout must be declared first to ensure lower specificity, preventing from overriding our custom layouts.
*/
@layer bootstrap, reset, elements, layout, components, utilities, overrides, states, accessibility;

/*
  BOOTSTRAP LAYER
  Import Bootstrap right after declaring the layers. It must precede all other CSS rules, otherwise the browser will ignore the @import.
  DO NOT UPGRADE: Version is locked to 4.3.1 (EOL). Upgrading to newer versions will cause breaking changes and compatibility issues.
*/
@import url("https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css") layer(bootstrap);

/* 
  TOKENS / DESIGN VARIABLES

  This is the place where we create the values that we will be reusing in the system.
  Text colors, fonts and the rest.
  This way, if we want to change just the style, it will be possible with minor changes.
*/


:root{
        --primary-bg-color:  rgb(255, 255, 255);   
         --secondary-bg-color: rgba(247, 248, 250);
         /*icons*/
         --white-color-icon: invert(100%) sepia(100%) saturate(0%) hue-rotate(310deg) brightness(107%) contrast(101%);
         --primary-color-icon: invert(39%) sepia(61%) saturate(1708%) hue-rotate(148deg) brightness(97%) contrast(101%);
         --black-color-icon:invert(0%) sepia(100%) saturate(7430%) hue-rotate(13deg) brightness(111%) contrast(114%);
         --grey-color-icon:invert(51%) sepia(1%) saturate(0%) hue-rotate(11deg) brightness(92%) contrast(92%);
         --yellow-color-icon:invert(80%) sepia(82%) saturate(1149%) hue-rotate(2deg) brightness(91%) contrast(88%);
         /*overlay*/
         --overlay-bg-color: #0f0f0f61;
         --overlay-btn-color: #1111119a;
         /*text*/
         --text-color: rgb(0,0,0);
         --text-light: rgb(102, 102, 102);

         --white-color: rgb(255, 255, 255);
         --grey-color: rgb(58, 58, 58);
         --light-grey-color: rgb(240, 240, 240);
         --black-color: rgb(0,0,0);

         --primary-color:rgb(0, 167, 157);
         --secondary-color: rgb(0, 98, 137);

        }

@layer reset{
         *,*::before, *::after{
             box-sizing: border-box;
         }
         *{
             margin:0;
         }
         body{
             min-height: 100dvh;
             line-height: 1.2; /*1.5*/
         }
         input,button,textarea, select{
             font:inherit;
         }
          img, svg{
             display: block;
             max-width: 100%;
             height: auto;
         }
         p, h1,h2{
             overflow-wrap: break-word;
         }
        button {
            border: none;
            padding: 0;
            cursor: pointer;
        }
} 

@layer elements{
         body{
             font-family:"Roboto", sans-serif;
             background-color:var(--white-color);
             color:var(--black-color);
         }
         a{
             color:inherit;
             text-decoration: none;
         }
         svg{
             width: 20px;
             height: 20px;
         }

         p{
            font-weight: 300;
            font-size: 1.1rem;
         }
}

@layer layout{
    .main-header {
        position: fixed;
        z-index: 100;
        width: 100%;
        background-color: var(--white-color);
    }
    .main-header .menu-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1.5rem 0;
        flex-wrap: wrap;
    }
    .header-menu {
        display: flex;
        flex: 1 1 0;
        align-items: flex-start;
        justify-content: flex-end;
        gap: 1.5rem;
        min-width: 0;
    }
    .logo-container {
        width: 200px;
    }
    .content-area {
        width: 80%;
        max-width: 1280px;
        margin: 0 auto;
    }
}

@layer components{
    /*header*/
    .main-header .header-info {
        background-color: var(--primary-color);
        color: var(--white-color);
    }
    .main-header button {
        background: none;
    }
    .main-header .header-info .wrapper {
        display: flex;
        justify-content: space-between;
        padding: 0.5rem 0;
        align-items: center;
    }
    .main-header .header-info svg {
        width: 16px;
        height: 16px;
    }
    .main-header .header-info .contacts svg,
    .main-header .header-info .search-btn svg {
        filter:  var(--white-color-icon);
    }
    .main-header .header-info .socials a svg {
        filter: var(--primary-color-icon);
    }
    .header-info .contacts,
    .header-info .contacts .contact-item, 
    .header-info .socials {
        display: flex;
    }
    .header-info .contacts .contact-item {
        gap: 0.2rem;
    }
    .header-info .socials span {
        display: none;
    }
    .header-info .contacts,
    .header-info .socials {
        gap: 1rem;
    }
    .header-info input,
    .header-info .search-btn{
        background: none;
        border: none;
    }
    .header-info input {
        width: 120px;
    }
    .header-info input::placeholder,
    .search input[type="search"] {
        color: var(--white-color);
    }
    .header-info .socials a {
        width: 30px;
        height: 30px;
        padding: 0;
        border-radius: 50%;
        background-color: var(--white-color);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .header-info .search {
        display: flex;
        align-items: center;
    }
    .header-info .socials a svg {
        width: 16px;
        height: 16px;
    }
    /*menus*/
    button.menu-link,
    .menu-dropdown li > ul button.menu-link {
        display: flex !important;
        align-items: center;
        width: 100%;
    }
    .menu-dropdown li > ul a,
    .menu-dropdown li > ul button {
       padding: 1rem;
    }
    .main-header .component.menu.menu-dropdown.menu-submenu-right > ul > li {
        position: relative;
    }
    .main-header .component.menu.menu-dropdown.menu-submenu-right
    > ul > li > ul[data-menu-submenu] {
        position: absolute;
        top: calc(100% + 2rem);
        border-radius: 0 0 0.75rem 0.75rem;
        left: 0;
        z-index: 999;
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
        width: max-content;
        background: var(--white-color);
    }
    .main-header .component.menu.menu-dropdown
    ul[data-menu-submenu] > li > a,
    .main-header .component.menu.menu-dropdown
    ul[data-menu-submenu] > li > button,
    .main-header .language-switcher .language-switcher-link {
        padding: 0.75rem 1rem;
        white-space: nowrap;
    }
    .main-header .component.menu.menu-dropdown
    > ul > li > ul[data-menu-submenu] > li {
        position: relative;
    }
    /* 2nd submenu*/
    .main-header .component.menu.menu-dropdown
    > ul > li > ul[data-menu-submenu] > li
    > ul[data-menu-submenu] {
        background: var(--light-grey-color);
        border-radius: 0 0.75rem 0.75rem;
    }
    .main-header .language-switcher .language-switcher-list {
        top: calc(100% + 2rem);
        border-radius: 0 0 0.75rem 0.75rem;
        gap: 0.2rem;
        width: max-content;
        background: var(--white-color);
    }
    /*slideshow*/
    .home-hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 700px;
  height: 80vh;
  overflow: hidden;
  color: var(--white-color);
  background: var(--secondary-color);

  /* Καμπύλη στο κάτω μέρος */
  border-radius: 0 0 50% 50% / 0 0 9% 9%;
}

.home-hero > .slideshow-container {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 0;
}

.home-hero .slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}

/* Μπλε απόχρωση πάνω από την εικόνα του slide */
.home-hero .slide::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background: var(--secondary-color);
  opacity: 0.7;
}

/* Το δικό σου περιεχόμενο πάνω από το slideshow */
.home-hero .hero-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  pointer-events: none;
}

.home-hero .hero-content a,
.home-hero .hero-content button,
.home-hero .hero-content input {
  pointer-events: auto;
}

.home-hero .hero-main {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 4rem;
}

.home-hero .hero-main figure {
max-height: 420px;
aspect-ratio: 4 / 3;
  margin: 0;
  padding: 12px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--white-color);
  box-shadow: 8px 8px 0 rgb(0 0 0 / 20%);
}

.home-hero #hero-photo {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  object-fit: cover;
}

.home-hero .slide-title {
  margin: 0 0 1rem;
}

.home-hero .slide-description {
  margin: 0;
}

.home-hero .socials {
  position: absolute;
  right: 16%;
  bottom: 10%;
  left: 16%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
}
.home-hero .socials > a {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  color: var(--secondary-color);
  background: var(--white-color);
}
.home-hero .socials > a svg {
  fill: currentColor;
}
.home-hero .socials > .search,
.home-hero .slide-content,
.home-hero .socials > a span {
  display: none !important;
}
.hero-content .contacts a {
    display: flex;
    gap: 0.5rem;
}
.hero-content .contacts {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    padding: 1rem 0;
}
.hero-content .contacts svg {
    filter: var(--white-color-icon);
}
    /* Accessibility Toolbar (AmeA)*/
    #accessibility-bar {
        position: fixed;
        top: 20%;
        left: 0.3rem;
        z-index: 99999;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 190px;
        background-color: #ffffff;
        color: #2d2d2d;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.31);
    }
    #accessibility-bar .access-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        background-color: #ffffff;
    }
    #accessibility-bar .access-icon svg,
    #accessibility-bar .access-arrow svg {
        display: block;
        width: 24px;
        height: 24px;
        filter: var(--black-color-icon);
    }
    #accessibility-bar > hr,
    #accessibility-bar .buttons > hr {
        border-top: 1px solid #cccccc;
    }
    #accessibility-bar .buttons {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        position: relative;
        padding: 10px;
        background-color: #ffffff;
    }
    #accessibility-bar .buttons button {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 0.7rem;
        min-height: 50px;
        text-align: left;
    }
    /* Font-size icons */
    #accessibility-bar .font-small {
        transform: scale(0.75);
    }
    #accessibility-bar .font-medium {
        transform: scale(1);
    }
    #accessibility-bar .font-large {
        transform: scale(1.3);
    }
    #accessibility-bar #text-black-bg,
    #accessibility-bar #text-blue-bg {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #accessibility-bar #text-blue-bg {
        color: #0f2dd6;
    }
    #accessibility-bar .access-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        min-height: 36px;
        background-color: #ffffff;
    }
    #accessibility-bar .access-arrow svg {
        transition: transform 0.3s ease;
    }
    #accessibility-bar .access-arrow.open svg {
        transform: rotate(180deg);
    }
    button#text-large-btn {
        padding: 0.5rem;
    }
}

@layer states{

    body.is-home:not(.is-scrolled) .main-header .header-info {
        display: none;
    }
    .main-header .component.menu a[aria-current="page"],
    .main-header .component.menu button[data-menu-disclosure][aria-expanded="true"]  {
        position: relative;
        color: var(--primary-color);
    }

    /* 1rst submenu */
    .main-header .component.menu.menu-dropdown
    > ul > li > ul[data-menu-submenu] > li
    > a:is(:hover, :focus-visible),
    .main-header .component.menu.menu-dropdown
    > ul > li > ul[data-menu-submenu] > li
    > button:is(:hover, :focus-visible),
    .main-header .language-switcher
    .language-switcher-link:is(:hover, :focus-visible) {
        color: var(--primary-color);
        background: var(--light-grey-color);
        border-radius: 0.75rem;
    }
    /* open button leading to submenu*/
    .main-header .component.menu.menu-dropdown
    > ul > li > ul[data-menu-submenu] > li
    > button[data-menu-disclosure][aria-expanded="true"] {
        background: var(--light-grey-color);
        border-radius: 0.75rem ;
    }
    .main-header .component.menu.menu-dropdown
    > ul > li > ul[data-menu-submenu] > li
    > button[data-menu-disclosure][aria-expanded="true"] svg,
    .main-header .component.menu button[data-menu-disclosure][aria-expanded="true"] svg,
    .main-header .component.menu.menu-dropdown
    > ul > li > ul[data-menu-submenu] > li
    > button:is(:hover, :focus-visible) svg {
        filter: var(--primary-color-icon);
    }
    .main-header .component.menu.menu-dropdown
    > ul > li > ul[data-menu-submenu] > li
    > ul[data-menu-submenu] > li
    > a:is(:hover, :focus-visible),
    .main-header .component.menu.menu-dropdown
    > ul > li > ul[data-menu-submenu] > li
    > ul[data-menu-submenu] > li
    > button:is(:hover, :focus-visible),
    .main-header .component.menu.menu-dropdown
    > ul > li > ul[data-menu-submenu] > li
    > button[aria-expanded="true"]:is(:hover, :focus-visible) {
        color: var(--primary-color);
        background-color: var(--white-color);
        border-radius: 0.75rem;
    }
    .main-header .component.menu a[aria-current="page"]::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -3rem;
        transform: translateX(-50%);
        width: 10px;
        height: 10px;
        box-sizing: content-box;
        border: 2px solid var(--white-color);
        border-radius: 50%;
        background-color: var(--primary-color);
        z-index: 5;
    }


    /*ACCESSIBILITY*/
    #accessibility-bar #text-blue-bg:hover {
        background-color: #0f2dd6;
        color: #d6c90f;
    }
    #accessibility-bar #text-black-bg:hover {
        background-color: #2d2d2d;
        color: #ffffff;
    }
    #accessibility-bar .buttons button[aria-pressed="true"] {
        border-color: #2d2d2d;
        box-shadow: inset 3px 0 0 #2d2d2d;
    }
    #accessibility-bar .buttons button:focus-visible {
        position: relative;
        z-index: 2;
    }
    /* Closed toolbar: square top and bottom buttons */
    #accessibility-bar:has(.buttons[hidden]) {
        width: 44px;
    }
    /* Critical: hidden must always hide the container */
    #accessibility-bar .buttons[hidden] {
        display: none !important;
    }
}

@layer accessibility {

}

@layer utilities {


}