/*======================================
    LoopIn site styles
    Site-specific components and fixes layered on top of the template
    stylesheet (main.css). Loaded on every LoopIn page, right after main.css.

    01. Accessibility
    02. Header & Breadcrumb
    03. Hero
    04. About
    05. Apps & Values
    06. FAQ
    07. Contact
    08. Footer
    09. Mobile
========================================*/

/*======================================
    01. Accessibility
========================================*/
/* main.css removes the focus outline from links, buttons and inputs
   (`outline: none !important`). Restore a visible indicator for keyboard
   users only, without affecting mouse/touch focus. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
.navbar-toggler:focus-visible,
.accordion-button:focus-visible {
    outline: 2px solid #6d28d9 !important;
    outline-offset: 3px;
}

.footer a:focus-visible,
.hero-area a:focus-visible,
.breadcrumbs a:focus-visible {
    outline-color: #fff !important;
}

/* Hidden until the page is scrolled; main.js shows it (inline display: flex). */
.scroll-top {
    display: none;
}

/* Keep in-page targets (#about, #apps, #faq) clear of the sticky header. */
section[id] {
    scroll-margin-top: 100px;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/*======================================
    02. Header & Breadcrumb
========================================*/
/* The template capitalizes every word ("Terms Of Use"); keep titles as written. */
.breadcrumbs .breadcrumbs-content .page-title,
.breadcrumbs .breadcrumb-nav li {
    text-transform: none;
}

/* Section headings are written in the intended case ("Made by LoopIn"). */
.section-title h2 {
    text-transform: none;
}

/* Section eyebrow labels are paragraphs (not headings) so the page outline
   stays h1 > h2 > h3; styled like the template's `.section-title h3`. */
.section-title .section-subtitle {
    display: inline-block;
    margin-bottom: 20px;
    color: #6d28d9;
    font-family: 'Spartan', sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

@media (max-width: 991px) {
    .section-title .section-subtitle {
        font-size: 14px;
        margin-bottom: 12px;
    }
}

/*======================================
    03. Hero
========================================*/
.hero-area .hero-content h1 {
    text-transform: none;
}

/* Slogan above the hero heading (template styled this as an <h4>). */
.hero-area .hero-content .hero-slogan {
    margin-bottom: 20px;
    color: #fff;
    font-family: 'Spartan', sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

.hero-area .hero-content .button {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hero-area .hero-content .button .btn {
    margin-right: 0;
}

.hero-area .hero-content .button .btn-outline {
    background-color: transparent;
    color: #fff;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7);
}

.hero-area .hero-content .button .btn-outline:hover {
    background-color: #fff;
    color: #081828;
    box-shadow: inset 0 0 0 2px #fff;
}

/* main.css fixes the mockup's width (400px); let the height follow it so the
   image keeps its natural aspect ratio instead of using the height attribute. */
.hero-area .hero-image img {
    height: auto;
}

@media (max-width: 991px) {
    .hero-area .hero-content .button {
        justify-content: center;
    }
}

/*======================================
    04. About
========================================*/
.about-intro .eyebrow {
    display: block;
    color: #6d28d9;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 10px;
}

.about-intro h2 {
    font-size: 31px;
    font-weight: 700;
    line-height: 45px;
    margin-bottom: 24px;
}

/* Feature titles are <h3> (template styled them as <h4>). */
.freatures .content .single-feature h3 {
    display: block;
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 700;
}

.about-intro p + p {
    margin-top: 16px;
}

.about-intro .about-closing {
    color: #081828;
    font-weight: 700;
}

@media (max-width: 991px) {
    .about-intro h2 {
        font-size: 26px;
        line-height: 38px;
    }
}

/*======================================
    05. Apps
========================================*/
.services .app-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: calc(100% - 30px);
    min-height: 0;
}

.app-card:hover {
    transform: translateY(-6px);
}

.app-card .app-icon {
    width: 80px;
    height: 80px;
    border-radius: 18px;
    box-shadow: 0 10px 25px rgba(8, 24, 40, .15);
}

.app-card .text-title span {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 500;
    color: #6d28d9;
}

.app-card p {
    flex-grow: 1;
}

.app-card .button {
    margin-top: 25px;
}

.app-card .button .btn {
    margin-right: 0;
}

.app-card .button .btn i {
    margin: 0 0 0 6px;
}

@media (max-width: 767px) {
    .app-card {
        padding: 35px 25px;
    }
}

/* Values: equal-height cards without the template's fixed min-height. */
.services .value-card {
    height: calc(100% - 30px);
    min-height: 0;
}

/* Product philosophy */
.philosophy {
    background-color: #F4F7FA;
}

.philosophy .section-title {
    margin-bottom: 50px;
}

.philosophy .principle {
    height: 100%;
    padding: 35px 30px;
    border-radius: 20px;
    background-color: #fff;
    box-shadow: 0 0 30px rgba(81, 94, 125, .08);
}

.philosophy .principle-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 20px;
    border-radius: 50%;
    background-color: #6d28d9;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
}

.philosophy .principle h3 {
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    margin-bottom: 10px;
}

.philosophy .principle p {
    font-size: 15px;
    line-height: 26px;
}

.philosophy .philosophy-note {
    margin-top: 50px;
    text-align: center;
    color: #081828;
    font-size: 18px;
    font-weight: 700;
}

@media (max-width: 767px) {
    .philosophy .principle {
        height: auto;
        margin-bottom: 20px;
        padding: 28px 24px;
    }

    .philosophy .philosophy-note {
        margin-top: 20px;
        font-size: 16px;
    }
}

/*======================================
    06. FAQ
========================================*/
.faq .section-title p a,
.faq .accordion-body a {
    color: #6d28d9;
    text-decoration: underline;
}

.faq .accordion-body p {
    margin: 0;
}

/*======================================
    07. Contact
========================================*/
.contact-us .contact-widget-block a {
    color: #6d28d9;
}

.contact-us .contact-widget-block a:hover {
    color: #081828;
}

.contact-us .form-errors {
    margin: 0;
    padding-left: 18px;
    list-style: disc;
}

.contact-us .form-note {
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 20px;
}

.contact-us .form-note a {
    color: #6d28d9;
    text-decoration: underline;
}

/*======================================
    08. Footer
========================================*/
.footer .single-footer.f-about p.slogan {
    margin-top: 8px;
    color: #c4b5fd;
    font-weight: 700;
}

/* The template's purple hover (#6d28d9) is hard to read on the dark footer. */
.footer .single-footer.f-link li a:hover,
.footer .legal-links a:hover {
    color: #c4b5fd;
}

.footer .f-contact li a,
.footer .f-contact .f-contact-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    word-break: break-all;
}

.footer .f-contact .f-contact-item {
    color: #fff;
    font-size: 15px;
}

.footer .f-contact li a i,
.footer .f-contact .f-contact-item i {
    font-size: 18px;
}

.footer .legal-links {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px 24px;
}

.footer .legal-links a {
    color: #fff;
    font-size: 15px;
}

/* Leave room for the fixed "back to top" button so it never covers the
   copyright row. */
.footer .copyright-area .inner-content {
    padding-right: 60px;
}

@media (max-width: 767px) {
    .footer .copyright-area .inner-content {
        padding-right: 0;
        padding-bottom: 80px;
    }

    .footer .legal-links {
        justify-content: center;
        margin-top: 12px;
    }
}

/*======================================
    09. Mobile
========================================*/
@media (max-width: 767px) {
    /* The sticky header is shorter on phones. */
    section[id] {
        scroll-margin-top: 80px;
    }

    /* Header: give the menu toggle a 44px touch target without moving it. */
    .header .mobile-menu-btn {
        padding: 8px;
        margin-right: -8px;
    }

    /* Hero: larger headline and full-width stacked buttons. */
    .hero-area .hero-content h1 {
        font-size: 30px;
        line-height: 40px;
    }

    .hero-area .hero-content .button {
        flex-direction: column;
        align-items: stretch;
        max-width: 340px;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-area .hero-content .button .btn {
        width: 100%;
        text-align: center;
    }

    /* About: smaller feature icons so the text column isn't squeezed. */
    .freatures .content .single-feature {
        padding-left: 72px;
        margin-bottom: 32px;
    }

    .freatures .content .single-feature .f-icon {
        height: 52px;
        width: 52px;
        line-height: 52px;
        font-size: 22px;
    }

    /* Back-to-top: smaller and tucked into the corner so it covers less content. */
    .scroll-top {
        width: 40px;
        height: 40px;
        line-height: 40px;
        right: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }

    /* Breadcrumb links: easier to tap. */
    .breadcrumbs .breadcrumb-nav li a {
        display: inline-block;
        padding: 10px 0;
    }

    /* Footer: compact layout with 44px touch targets. */
    .footer .single-footer {
        margin-top: 32px;
    }

    .footer .single-footer.f-about .logo img {
        width: 96px;
    }

    .footer .single-footer.f-about p {
        margin: 16px 0 0;
    }

    .footer .single-footer h3 {
        margin-bottom: 12px;
    }

    .footer .single-footer.f-link li {
        margin-bottom: 0;
    }

    .footer .single-footer.f-link li a,
    .footer .f-contact .f-contact-item,
    .footer .legal-links a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .footer .copyright-area .inner-content {
        margin-top: 32px;
        padding-top: 20px;
        padding-bottom: 72px;
    }

    .footer .legal-links {
        margin-top: 4px;
    }
}