@layer components;

/* =================== ARTICLE FULL IMAGE =================== */
/* See SLIDESHOW */


/* =================== BREADCRUMBS =================== */

.breadcrumbs {
  background-color: var(--x-ex-light-grey);
  padding: var(--spacing-4);
  margin: var(--spacing-12) 0;
}

.breadcrumbs ol {
  display: flex;
  gap: .5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mod-breadcrumbs__item {
  display: flex;
  align-items: flex-start;
}

.mod-breadcrumbs__item + .mod-breadcrumbs__item::before {
  content: "\00276F";
  margin: 0 1rem;
  color: var(--primary-color);
}

.mod-breadcrumbs__here { display: none; }


/* =================== DEFAULT ARTICLE =================== */

.article-info,
.mod-breadcrumbs__item.active { font-size: 0; } 

.com-content-article { width: 100%; }

.article__title,
.com-content-category-blog h1 {
  padding: var(--spacing-12) 0;  
}

.com-content-article__body p { margin-bottom: var(--spacing-4); }
.com-content-article__body ul { margin: var(--spacing-4); }

.main-container {
  max-width: var(--max-width);
  margin: var(--spacing-4) auto;
}

.article__container {
  display: flex;
  width: 95%;
  margin: 0 auto;
  max-width: var(--max-width);
}

.main-container > .moduletable { padding-top: var(--spacing-8); }

@media (min-width: 900px) {
  .main-container > .moduletable { padding-top: var(--spacing-12); }
}


/* =================== SIDEBAR TOGGLE (hamburger) =================== */

.sidebar__toggle {
  padding-top: var(--spacing-8);
  width: 150px;
  margin: 0 auto;
  display: none;                
}

.sidebar__toggle-bars {
  margin: 0 auto;
  width: 30px;
}

.sidebar__toggle-bar {
  display: block;
  width: 30px;
  height: 3px;
  margin-bottom: 6px;
  background: var(--accent-color);
  border-radius: 3px;
  transition: transform var(--transition-fast);
  cursor: pointer;
  opacity: .8;
}

.sidebar__toggle.open .sidebar__toggle-bars { transform: translateX(10px); }

.sidebar__toggle-bar:first-child,
.sidebar__toggle-bar:nth-child(3) { transform-origin: 50% 50%; }

.sidebar__toggle.open .sidebar__toggle-bar:first-child {
  transform: rotate(45deg) translate(0, 13px);
}
.sidebar__toggle.open .sidebar__toggle-bar:nth-child(3) {
  transform: rotate(-45deg) translate(0, -13px);
}
.sidebar__toggle.open .sidebar__toggle-bar:nth-child(2) { opacity: 0; }

.sidebar__toggle-text {
  height: 30px;
  width: 150px;
  margin: 0 auto;
  font-size: .7rem;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--primary-color);
  text-align: center;
  opacity: .8;
}

/* show toggle on small screens only */
@media (max-width: 900px) {
  .sidebar__toggle { display: block; }
}


/* =================== SIDEBAR LAYOUT (price lists articles) =================== */

.article-main-content {
  position: relative;
  display: flex;
  flex-direction: row;                 
  max-width: var(--max-width);
  margin: 0 auto;
  margin-top: var(--spacing-12);             
}

.article-sidebar {
  flex: 1;
  padding: 2rem 0;                      
  position: static;                     
  background: var(--white);
  width: 30%;
  box-shadow: none;
  height: 100%;
  max-height: 1500px;
  overflow: auto;
  display: block;
  z-index: 2;
}

main { flex: 3; }

.content-above { margin-top: var(--spacing-8); }

/* responsive down: tablet/mobile behavior */
@media (max-width: 900px) {
  .article-main-content {
    flex-direction: column;
    margin-top: 0;
  }

  .article-sidebar {
    position: absolute;
    padding: 2rem 1rem;
    width: 100%;
    left: 0;
    box-shadow: var(--box-shadow);
    height: calc(100dvh - 210px);
    display: none;                     
  }
  .article-sidebar.open { display: block; }

  main { flex: 1; }
  .content-above { margin-top: var(--spacing-4); }
}

/* ===== Scrollbar theming for sidebar ===== */
.article-sidebar {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--primary-color-10) transparent; 
  scroll-margin-right: 10px;
}

.article-sidebar::-webkit-scrollbar { width: 5px; }
.article-sidebar::-webkit-scrollbar-track { background: transparent; }
.article-sidebar::-webkit-scrollbar-thumb {
  background-color: var(--primary-color-10);
  border-radius: 20px;
  border: transparent;
}


/* =================== CUSTOM MODULES IN SIDEBAR =================== */

.article-sidebar .mod-custom {
  margin: var(--spacing-12) 0;
  padding: 0 .7rem;
}

.article-sidebar .mod-custom > * { padding: .5rem 0; }

.article-sidebar .mod-custom h2 {
  font-size: var( --font-size-h4);          
  margin: 0;
}

/* fix selector to avoid global h4–h6 capture */
.article-sidebar .mod-custom h3,
.article-sidebar .mod-custom h4,
.article-sidebar .mod-custom h5,
.article-sidebar .mod-custom h6 {
  font-size: var( --font-size-h5);           
  margin: 0;
}

/* likewise, scope p/li/a to the module */
.article-sidebar .mod-custom p,
.article-sidebar .mod-custom li,
.article-sidebar .mod-custom a,
.article-sidebar .mod-custom span.mod-menu__heading,
.article-sidebar .mod-custom span.mod-menu__separator {
  font-size: .95rem;
  line-height: 1.4;
  margin: 0;
}


/* =================== COLUMNS =================== */

.columns__3 { column-count: 3; column-gap: 40px; padding: 1rem 0; }  

@media (max-width: 768px) {
  .columns__3 { column-count: 2; }  
}