/* ==========================================================================
   responsive.css - shared responsive layer (public site, auth pages, standalone pages)

   Loaded LAST (after Bootstrap, the Digimedia template CSS and mainStyle.css) so it can refine them without
   !important. Dashboard (Sunny Admin) pages load responsive-dashboard.css on top of this file.

   Strategy
   - Bootstrap 5 breakpoints are used everywhere:
       xxl >= 1400  |  xl >= 1200  |  lg >= 992  |  md >= 768  |  sm >= 576  |  phones < 576
   - The template's own switch to the hamburger menu at 1400px is kept (it is the existing design decision).
   - Mobile-first where a rule is new; max-width queries only where they refine an existing desktop rule.
   - Overflow is fixed at its source (no global overflow-x: hidden).
   - Touch targets >= 44px for the primary controls on coarse pointers.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Foundations
   -------------------------------------------------------------------------- */
img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

/* long unbroken strings (e-mail addresses, URLs, project names) must wrap instead of widening their box */
.about,
.skills,
.experiance,
.project,
#contact,
footer,
.privacy,
.formTable,
.project-info,
.project-description,
.content-wrapper {
    overflow-wrap: break-word;
}

:focus-visible {
    outline: 3px solid var(--custom-blue-minded-color, #004e7c);
    outline-offset: 2px;
}

a,
button,
[role="button"],
input,
select,
textarea,
summary,
label {
    touch-action: manipulation;
}

@media (prefers-reduced-motion: reduce) {

    .wow {
        animation: none !important;
        visibility: visible !important;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* --------------------------------------------------------------------------
   2. Entrance animations (animated.css / WOW)
   The horizontal "fade in" keyframes start 100% of the element's own width outside its box. On narrow screens that
   pushes the page wider than the viewport while the animation runs - this is what the old
   `html, body { overflow-x: hidden }` was hiding. Bounded travel removes the cause.
   -------------------------------------------------------------------------- */
@media (max-width: 1399.98px) {
    @keyframes fadeInLeft {
        from {
            opacity: 0;
            transform: translate3d(-40px, 0, 0);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }

    @keyframes fadeInRight {
        from {
            opacity: 0;
            transform: translate3d(40px, 0, 0);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }
}

/* --------------------------------------------------------------------------
   3. Header and navigation (hamburger mode: below 1400px)
   -------------------------------------------------------------------------- */
@media (max-width: 1399.98px) {

    /* the trigger is now a real <button>: reset the user-agent styling, keep the template's drawn icon */
    .header-area .main-nav .menu-trigger {
        background: transparent;
        border: 0;
        padding: 0;
        margin: 0;
        font: inherit;
        color: inherit;
        -webkit-appearance: none;
        appearance: none;
    }

    /* enlarge the touch area (32x40 -> 48x52) without moving the three bars */
    .header-area .main-nav .menu-trigger::after {
        content: "";
        position: absolute;
        inset: -6px -8px;
    }

    /* an open menu taller than the screen (landscape phones, many items) scrolls instead of being cut off */
    .header-area .main-nav .nav {
        max-height: calc(100vh - 100px);
        max-height: calc(100dvh - 100px);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .background-header .main-nav .nav {
        max-height: calc(100vh - 80px);
        max-height: calc(100dvh - 80px);
    }

    .header-area .main-nav .nav li a,
    .header-area .main-nav .nav li button {
        min-height: 50px;
    }
}

@media (max-width: 575.98px) {
    .header-area {
        padding-left: 12px;
        padding-right: 12px;
    }

    .header-area .main-nav .menu-trigger {
        right: 20px;
    }
}

/* --------------------------------------------------------------------------
   4. Section rhythm (replaces the old `section { padding: 150px 0 50px !important }`)
   -------------------------------------------------------------------------- */
@media (max-width: 1399.98px) {
    section {
        padding-top: 150px;
        padding-bottom: 50px;
    }
}

@media (max-width: 767.98px) {
    section {
        padding-top: 120px;
        padding-bottom: 48px;
    }
}

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .main-banner {
        padding-top: 130px;
    }

    .main-banner .left-content h1 {
        font-size: clamp(2.6rem, 17vw, 70px);
        line-height: 1.1;
    }

    .main-banner .left-content h2 {
        font-size: clamp(1.75rem, 10vw, 40px);
    }

    .main-banner .left-content h6 {
        font-size: 16px;
    }

    .main-banner .left-content p {
        font-size: 15px;
    }
}

/* --------------------------------------------------------------------------
   6. About / Skills / Experience
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .about .accordion .accordion-button {
        font-size: 18px;
        min-height: 48px;
    }

    .about .accordion .accordion-body {
        line-height: 1.8;
    }

    /* language rings: two per row instead of one very tall column */
    .skills .row>.col-xl-3.col-lg-6.col-md-3 {
        width: 50%;
    }

    .skills .progress-skill span {
        font-size: 12px;
    }

    /* experience cards: the logo floated beside the text squeezes it - stack it above instead */
    .experiance .experiance-item .thumb {
        float: none;
        display: block;
        margin: 0 0 8px;
        padding: 0;
        text-align: center;
    }

    .experiance .experiance-item .thumb img {
        width: 100%;
        max-width: 100%;
        max-height: 200px;
    }

    .experiance .experiance-item .right-content {
        padding: 8px;
    }

    .experiance .education-post .down-content {
        padding: 20px;
    }
}

@media (max-width: 359.98px) {

    /* a 150px ring does not fit two-per-row in a 296px content width: one per row on very small phones */
    .skills .row>.col-xl-3.col-lg-6.col-md-3 {
        width: 100%;
    }
}

/* text links that are the only target in their row get a comfortable touch area on touch screens */
@media (pointer: coarse) {

    .experiance .border-first-button a,
    #contact .info a,
    #SingInUp a:not(.btn08) {
        display: inline-block;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    /* About accordion list: inline-block makes the link as tall as its line (no visual change) */
    .accordion-body li a {
        display: inline-block;
    }
}

/* --------------------------------------------------------------------------
   7. Projects (filter tabs, cards, tools carousel)
   -------------------------------------------------------------------------- */

/* Card header: title and type badge share the first row; the description drops
   to its own full-width row underneath instead of being squeezed into the narrow
   column left of the badge (about half the card on a phone). Bootstrap's .d-flex
   utility is !important, so the row stays a flex container and the wrapper div is
   dissolved with display: contents rather than switching to grid. */
@media (max-width: 991.98px) {
    .project .tab-content .custom-block>a>.d-flex {
        flex-wrap: wrap;
        column-gap: 12px;
        align-items: flex-start;
    }

    .project .tab-content .custom-block>a>.d-flex>div {
        display: contents;
    }

    .project .tab-content .custom-block>a>.d-flex>div>h5 {
        flex: 1 1 0;
        min-width: 0;
    }

    .project .tab-content .custom-block>a>.d-flex>.badge {
        order: 1;
        flex: 0 0 auto;
    }

    .project .tab-content .custom-block>a>.d-flex>div>p {
        order: 2;
        flex: 0 0 100%;
    }
}

@media (max-width: 767.98px) {
    .project .nav-tabs .nav-link {
        padding: 12px 16px;
        font-size: 16px;
        min-height: 44px;
    }

    .project .tab-content .custom-block {
        padding: 20px;
    }

    .project .tab-content .custom-block-image {
        height: 170px;
        margin-top: 20px;
    }

    .project .tools .icon-box .icon {
        width: 150px;
        height: 150px;
    }
}

/* --------------------------------------------------------------------------
   8. Contact
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    #contact {
        padding-top: 90px;
    }

    #contact form#contact {
        padding: 32px 20px;
    }

    #contact #map iframe {
        width: 100%;
        height: 260px;
    }

    #contact .section-heading-contact h4 {
        font-size: 28px;
    }

    #contact .info {
        display: flex;
        flex-direction: column;
    }

    #contact .info span {
        margin-right: 0;
        margin-bottom: 12px;
    }

    #contact .info span a {
        overflow-wrap: anywhere;
    }
}

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */
@media (max-width: 1399.98px) {
    footer ul {
        padding-left: 0;
    }

    footer .copyright ul {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 0;
    }
}

@media (pointer: coarse) {
    footer a {
        display: inline-block;
        padding: 10px 6px;
    }

    footer .footer-social-icons a {
        padding: 0;
    }
}

/* --------------------------------------------------------------------------
   10. Cookie banner and settings pop-up
   -------------------------------------------------------------------------- */
.cookie-banner {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    max-height: 50vh;
    overflow-y: auto;
}

#btn-back-to-top {
    right: max(20px, env(safe-area-inset-right, 0px));
    bottom: max(20px, env(safe-area-inset-bottom, 0px));
}

@media (max-width: 767.98px) {
    .cookie-banner {
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
        text-align: left;
    }

    .cookie-banner p {
        font-size: 13px;
        line-height: 1.45;
    }

    /* link and button side by side across the full width instead of stacked in a half-width column */
    .cookie-banner .cookie-left>.col-6 {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 8px;
    }

    .cookie-banner .cookie-link {
        padding: 12px 4px;
    }

    .cookie-banner .cookie-button {
        margin: 0;
        min-height: 44px;
        padding: 10px 24px;
    }

    .cookie-popup-content {
        width: 92%;
        margin: 4% auto;
    }
}

/* tablets (768px and up) keep the desktop banner layout, so the text link needs its own touch-sized hit area */
@media (pointer: coarse) {
    .cookie-banner .cookie-link {
        display: inline-block;
        padding: 12px 4px;
    }
}

/* --------------------------------------------------------------------------
   11. Authentication pages (login, register, forgot / reset password)
   Side by side from 768px; stacked (image banner above the card) on phones.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1400px) {

    #SingInUp [class^="container08"] {
        min-height: 70vh;
        border-start-start-radius: 10px;
        border-end-start-radius: 10px;
    }
}

/* Register on tablet portrait (768-991px): Bootstrap already stacks the field columns here (col-12 col-lg-6), but the
   300px-wide fields still make the card's intrinsic width two columns wide (704px), which squeezes the image panel to a
   ~30px sliver. A column-direction row is one field wide, so the card sizes like the login card. */
@media (min-width: 768px) and (max-width: 991.98px) {
    #SingInUp .container08SingUp .row {
        flex-direction: column;
        flex-wrap: nowrap;
    }
}

@media (max-width: 767.98px) {
    #SingInUp .body {
        flex-direction: column;
        align-items: center;
        padding: 120px 16px 40px;
    }

    #SingInUp [class^="panelImage"] {
        flex: none;
        width: 100%;
        max-width: 480px;
        min-height: 0;
        height: 150px;
        align-self: auto;
        border-radius: 10px 10px 0 0;
    }

    #SingInUp [class^="container08"] {
        width: 100%;
        max-width: 480px;
        min-height: 0;
        padding: 24px 20px 28px;
        border-radius: 0 0 10px 10px;
    }

    #SingInUp .form-control08 {
        width: 100%;
    }

    #SingInUp .btn08 {
        min-height: 48px;
    }
}

/* --------------------------------------------------------------------------
   12. Policy / text pages
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .privacy {
        padding-top: 120px;
    }

    .privacy p {
        text-align: left;
    }

    .privacy ul li {
        margin-left: 24px;
    }
}

/* --------------------------------------------------------------------------
   13. Standalone project-details page (opened in the lightbox iframe)
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .project-details-slider img {
        width: 100%;
        height: auto;
        max-height: 450px;
    }
}