.foldersCloud-folders a {
    display: inline-flex;
    align-items: center;
    justify-content: center;      /* centers text + icon */
    gap: 6px;
    background: var(--card-background);
    color: var(--card-text-color-main);
    padding: 8px 0;               /* top/bottom padding only */
    width: 140px;                 /* fixed width for all buttons */
    height: 40px;                 /* fixed height */
    border-radius: var(--folders-border-radius);
    font-size: 1.4rem;
    box-shadow: var(--shadow-l1);
    text-decoration: none;
    transition: box-shadow 0.3s ease;
    overflow: hidden;             /* optional: hide overflow text */
    text-overflow: ellipsis;      /* optional: truncate long text */
    white-space: nowrap;          /* prevent wrapping */
}

.foldersCloud-folders a svg {
    width: 20px;
    height: 20px;
}

.foldersCloud-folders a:hover {
    box-shadow: var(--shadow-l2);
}



.article-folders {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.article-folders a {
    color: var(--accent-color-text);
    background-color: var(--accent-color);
    padding: 8px 16px;
    border-radius: var(--folders-border-radius);
    display: inline-block;
    font-size: 1.4rem;
    transition: background-color 0.5s ease;
}

.article-folders a:hover {
    color: var(--accent-color-text);
    background-color: var(--accent-color-darker);
}

.title-with-icon {
    display: inline-flex;       /* make icon and text a flex container */
    align-items: center;        /* vertically center icon and text */
    gap: 0.5rem;                /* space between icon and title (adjust as needed) */
}

.title-with-icon svg {
    width: 30px;                /* size of icon */
    height: 30px;
    flex-shrink: 0;             /* prevent icon from shrinking */
}

.article-time {
    display: flex;
    justify-content: flex-start; /* horizontal alignment of the container */
    align-items: flex-start;     /* vertical alignment of the container */
    width: 100%;                 /* full width or set a fixed width */
    padding: 4px 0;              /* vertical padding for the container */
    margin: 0;                    /* container margin */
    gap: 1rem;                   /* horizontal spacing between items */
}

.article-time-container {
    display: flex;               /* flex container for items */
    flex-wrap: wrap;             /* allow wrapping if needed */
    gap: 1rem 1rem;           /* horizontal gap 1rem, vertical gap 0.25rem */
    align-items: center;         /* vertical alignment for items inside container */
}

.article-time-item {
    display: inline-flex;        /* icon + text as inline flex */
    align-items: center;         /* align text with icon */
    gap: 0.25rem;                /* space between icon and text (X-axis) */
    line-height: 1;              /* remove extra line spacing */
    padding: 0;                  /* optional, remove internal padding */
}

.article-time-item svg {
    width: 16px !important;      /* icon size */
    height: 16px !important;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
    margin: 0;                   /* remove SVG default margin */
}

/* ---------------------------- */
/* Custom menu & hamburger fix  */
/* ---------------------------- */

#main-menu,
#main-menu a {
  font-size: 1.6rem !important;
  line-height: 1.4 !important;
}

#main-menu svg {
  width: 24px !important;
  height: 24px !important;
}

.hamburger-box {
  width: 40px !important;
  height: 30px !important;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
  height: 3px !important;
}

#follow-text:hover {
  opacity: 0.8;
  transition: 0.2s;
}

.onesignal-customlink-container {
  display: inline-block;
}

.onesignal-customlink-container button {
  all: unset; /* Reset OneSignal injected styles */
  display: inline-flex;
  align-items: center;
  gap: 0.4px; /* space between icon and text */
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 1em;
  cursor: pointer;
  color: inherit;
  padding: 0;
}

.onesignal-customlink-container button:hover {
  opacity: 0.8;
  transition: 0.2s;
}

.onesignal-customlink-container svg {
  display: inline-block;
  vertical-align: middle;
}