/* Section-aware info flow: the header info icon lights the matching footer
   icon and opens the matching section description on the /information page. */

/* Keep the footer icon of the described section visibly lit, mirroring the
   neon highlight used for the active footer destination. These rules must
   carry !important to win over the final footer states in styles.css. */
.fixed-footer .mobile-footer-nav a.info-highlight img {
    filter: grayscale(0) drop-shadow(0 0 5px #34d399) drop-shadow(0 0 12px rgba(52, 211, 153, .8)) !important;
}

.fixed-footer .mobile-footer-nav a.info-highlight {
    background: transparent !important;
    opacity: 1 !important;
    filter: none !important;
}

/* On the information page, the section requested from the info icon is
   highlighted while it is in view. */
.information-section {
    scroll-margin-top: 24px;
    text-align: center;
}

.information-section p {
    margin-inline: auto;
}

/* Footer-shaped icon centered at the top of each section, slightly larger
   than its footer counterpart, with the section title centered beneath it. */
.information-section-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
}

/* Intro box: wraps icon + title so the date bar (rendered just above it)
   visually attaches to a real frame with a shared border. */
.information-intro-box {
    max-width: 640px;
    margin: 0 auto 18px;
}

:root.light-theme .information-intro-box {
    background: none;
    box-shadow: none;
}

.information-section-icon img {
    width: 84px;
    height: 84px;
    opacity: .9;
}

.information-section.information-ads .information-section-icon img {
    width: 84px;
    height: 84px;
}

.information-learning .information-section-icon img {
    width: 96px;
    height: 96px;
}

.information-learning .information-section-icon img {
    filter: drop-shadow(0 0 8px rgba(52, 211, 153, .6));
}

.information-software .information-section-icon img {
    filter: drop-shadow(0 0 8px rgba(111, 227, 255, .6));
}

.information-ads .information-section-icon img {
    filter: drop-shadow(0 0 10px rgba(255, 209, 102, .65));
}

/* Rubika / Bale messenger links shown under the section text. */
.information-social {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
}

.info-social-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 50px;
    padding: 10px 18px;
    border: 1px solid rgba(160, 225, 255, 0.2);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: #dfeeff;
    font-size: 16px;
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.info-social-link svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.info-social-link img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.info-social-link.rubika img {
    border-radius: 5px;
}

.info-social-link.rubika {
    color: var(--orange, #ff9d25);
    border-color: rgba(255, 157, 37, 0.45);
    background: rgba(255, 157, 37, 0.1);
}

.info-social-link.bale {
    color: #62d891;
}

.info-social-link.bale img {
    width: 50px;
    height: 50px;
}

/* Generic hover: other social links keep the lift effect. */
.info-social-link:hover {
    transform: translateY(-3px);
    border-color: currentColor;
    background: rgba(39, 231, 255, 0.12);
}

/* Rubika and Bale links keep their brand colors on hover too and have
   no hover animation. This rule must come last to win the cascade. */
.info-social-link.rubika:hover,
.info-social-link.bale:hover {
    transform: none;
}

.info-social-link.rubika:hover {
    border-color: rgba(255, 157, 37, 0.45);
    background: rgba(255, 157, 37, 0.1);
}

.info-social-link.bale:hover {
    border-color: rgba(98, 216, 145, 0.45);
    background: rgba(98, 216, 145, 0.1);
}

/* Social icons shown right under the big section icon at the top. */
.information-section-social {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 4px;
}

.information-section-social .info-social-link {
    min-height: 46px;
    padding: 9px 16px;
    font-size: 14px;
}

/* Red back button under the icons: returns the visitor to the exact page
   they came from (falls back to home when there is no history). */
.information-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 42px;
    margin: 12px auto 0;
    padding: 8px 22px;
    border: 1px solid rgba(255, 82, 82, .55);
    border-radius: 10px;
    background: linear-gradient(180deg, #e5484d, #b91c1c);
    box-shadow: 0 0 16px rgba(229, 72, 77, .35);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease;
}

.information-back-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 22px rgba(229, 72, 77, .55);
}

.information-section.is-section-focused {
    border-color: rgba(0, 229, 255, .55);
    box-shadow: 0 0 22px rgba(0, 229, 255, .28);
}

/* Desktop: larger section titles and text. Title and logo stay centered;
   only the paragraph text is right-aligned (RTL). Mobile keeps the centered,
   compact layout above. */
@media (min-width: 1025px) {
    .information-section {
        text-align: right;
    }

    .information-section h2 {
        font-size: clamp(28px, 3vw, 36px);
    }

    .information-section p {
        margin-inline: 0;
        font-size: 17px;
        line-height: 2.1;
    }

    .information-intro-box {
        margin-inline: auto;
        text-align: center;
    }

    .information-section-icon {
        align-items: center;
    }
}