/* =========================================================
   Theme polish for Shivakoti Anil portfolio
   Loaded after app.css. Delete this file's <link> to revert.
   ========================================================= */

:root {
    --brand-navy: #02266b;
    --brand-blue: #1f4fd1;
    --brand-sky: #8fb0ff;
    --polish-radius: 16px;
    --polish-shadow: 0 10px 30px rgba(2, 38, 107, .10);
    --polish-shadow-hover: 0 18px 44px rgba(2, 38, 107, .18);
}

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: rgba(31, 79, 209, .22); }

/* thin branded scrollbars inside the page panels */
.pt-page { scrollbar-width: thin; scrollbar-color: rgba(2, 38, 107, .35) transparent; }
.pt-page::-webkit-scrollbar { width: 8px; }
.pt-page::-webkit-scrollbar-thumb { background: rgba(2, 38, 107, .3); border-radius: 8px; }

/* ---------- Navigation ---------- */
#mainNav .nav-item button { position: relative; letter-spacing: .6px; }
#mainNav .nav-item button::after {
    content: ""; position: absolute; left: 50%; bottom: -8px; width: 0; height: 2px; border-radius: 2px;
    background: currentColor; transform: translateX(-50%); transition: width .25s ease;
}
#mainNav .nav-item button:hover::after { width: 70%; }
#mainNav .social-icons a { transition: transform .2s ease, opacity .2s; }
#mainNav .social-icons a:hover { transform: translateY(-2px); opacity: .8; }
#mainNav.dark-scheme .logo-header-dark { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25)); }
/* frosted header on light pages so the menu stays readable over photos */
#mainNav { transition: background-color .35s ease, box-shadow .35s ease, backdrop-filter .35s ease; }
#mainNav.light-scheme {
    background-color: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    backdrop-filter: saturate(160%) blur(12px);
    box-shadow: 0 1px 0 rgba(2, 38, 107, .08), 0 8px 24px rgba(2, 38, 107, .06);
}

/* ---------- Compact header ---------- */
#mainNav { padding-top: 14px !important; padding-bottom: 14px !important; }
#mainNav .pt-trigger-container {
    max-width: 1200px; margin-left: auto; margin-right: auto;
    padding-left: 24px !important; padding-right: 24px !important;
}
#mainNav .logo-header-dark, #mainNav .logo-header-light { max-height: 38px; width: auto; }
#mainNav .navbar-nav .nav-item { margin-left: 14px !important; margin-right: 14px !important; }
#mainNav .navbar-nav { margin-left: auto !important; margin-right: 28px !important; }
#mainNav .nav-item button { font-size: .78rem; }
#mainNav .social-icons a { margin: 0 7px !important; }
@media (max-width: 991.98px) {
    #mainNav { padding-top: 10px !important; padding-bottom: 10px !important; }
    #mainNav .pt-trigger-container { padding-left: 16px !important; padding-right: 16px !important; }
    #mainNav .logo-header-dark, #mainNav .logo-header-light { max-height: 32px; }
}

/* ---------- Hero ---------- */
.pt-page.homepage {
    /* cinematic navy overlay: darker at top & bottom, photo stays natural in the middle */
    background-image:
        radial-gradient(ellipse at center, rgba(2, 21, 63, 0) 35%, rgba(2, 21, 63, .35) 100%),
        linear-gradient(180deg, rgba(2, 21, 63, .45) 0%, rgba(2, 21, 63, 0) 22%, rgba(2, 21, 63, 0) 55%, rgba(2, 21, 63, .55) 100%) !important;
}
.pt-page.homepage h1, .pt-page.homepage h2 {
    text-shadow: 0 4px 24px rgba(0, 10, 40, .45);
    letter-spacing: .3px;
}
/* hero underline: original white highlight */
.pt-page.homepage .underlined::after { background: #ffffff !important; opacity: .3 !important; border-radius: 10px; }

/* ---------- Section headings ---------- */
.accent-color.fnt-bold { letter-spacing: 2.5px; font-size: .82rem; }
.pt-page h2 { letter-spacing: .2px; }

/* ---------- About ---------- */
/* navy backdrop behind the profile photo (shows if the photo is missing or loading) */
.aboutme .aboutme-image {
    background-color: #0b1838;
    background-size: cover; background-position: center;
}
.aboutme .underlined, .light-scheme .underlined { position: relative; z-index: 0; }
.aboutme .underlined::after, .light-scheme .underlined::after {
    background: linear-gradient(90deg, #1f4fd1 0%, #5b8cff 60%, #8fb0ff 100%) !important;
    opacity: .85 !important;
    height: 12% !important; bottom: 10% !important;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(31, 79, 209, .35);
    z-index: -1;
}

/* phones: photo starts right under the compact sticky header (theme pushed it 100px down) */
@media (max-width: 767.98px) {
    .aboutme .aboutme-title .aboutme-image { background-position: center 50px !important; }
}

/* counters: brand colour numbers */
.aboutme .counter h3, .aboutme .counters h3, .aboutme [class*=counter] .h1, .aboutme [class*=counter] h2 { color: var(--brand-navy); }

/* skill cards */
.skills .bar-graph .main-layer, .skills .bar-graph .percent-layer { border-radius: 999px; }
.skills .bar-graph .percent-layer { background-image: linear-gradient(90deg, #02266b, #1f4fd1) !important; }

/* testimonials & services cards */
.testimonials .item, .services .item, .service-content, .testimonial-content {
    border-radius: var(--polish-radius);
}

/* services carousel cards */
.owl-item .item.p-4 { border-radius: var(--polish-radius); transition: transform .3s ease, box-shadow .3s ease; }
.owl-item .item.p-4:hover { transform: translateY(-4px); box-shadow: var(--polish-shadow-hover); }
.owl-item .item.p-4 > i { color: var(--brand-blue); transition: transform .3s ease; }
.owl-item .item.p-4:hover > i { transform: scale(1.08); }

/* education / employment timeline cards */
.timeline .card { border-radius: 14px !important; border-color: #e6ebf5 !important; transition: transform .25s ease, box-shadow .25s ease; }
.timeline .card:hover { transform: translateX(4px); box-shadow: var(--polish-shadow-hover) !important; }

/* ---------- Work / Portfolio ---------- */
.pt-page.work .btn, .pt-page.work .btn.rounded-0 {
    border-radius: 999px !important;
    padding-left: 1.4rem !important; padding-right: 1.4rem !important;
    font-weight: 700; letter-spacing: .6px; font-size: .8rem;
    border-color: #d6dcea;
    transition: all .2s ease;
}
.pt-page.work .btn:hover { border-color: var(--brand-blue); color: var(--brand-blue); background: transparent; }
.pt-page.work .btn.checked, .pt-page.work .btn.checked:hover {
    background: var(--brand-navy) !important; border-color: var(--brand-navy) !important; color: #fff !important;
    box-shadow: 0 6px 16px rgba(2, 38, 107, .28);
}
.projects-content .item > a, .projects-content .item > div > a {
    display: block; border-radius: var(--polish-radius); overflow: hidden;
    box-shadow: var(--polish-shadow); background: #eef2fa;
    transform: translateZ(0); transition: transform .3s ease, box-shadow .3s ease;
}
.projects-content .item > a:hover, .projects-content .item > div > a:hover {
    transform: translateY(-6px); box-shadow: var(--polish-shadow-hover);
}
.projects-content .item img { transition: transform .5s ease; }
.projects-content .item a:hover img { transform: scale(1.04); }
.projects-content .item { padding: 8px; }
.projects-content .item a::after { background-image: linear-gradient(0deg, rgba(2, 21, 63, .92) 0%, rgba(2, 21, 63, 0) 100%) !important; }

/* ---------- Blog ---------- */
.post-content-container {
    border-radius: var(--polish-radius); overflow: hidden;
    box-shadow: var(--polish-shadow) !important;
    transition: transform .3s ease, box-shadow .3s ease;
    background: #fff;
}
.post-content-container:hover { transform: translateY(-5px); box-shadow: var(--polish-shadow-hover) !important; }
.post-content-container .post-image { overflow: hidden; }
.post-content-container .post-image img { transition: transform .6s ease; }
.post-content-container:hover .post-image img { transform: scale(1.05); }
.main-post {
    background: linear-gradient(0deg, rgba(2, 21, 63, .95) 0%, rgba(2, 21, 63, .84) 50%, rgba(2, 21, 63, .72) 100%) !important;
}
.main-post h4 { text-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
.post-content .info-post, .main-post .info-post { letter-spacing: .3px; }
.btn.btn-outline, .btn.btn-outline.rounded-0 {
    border-radius: 999px !important; font-weight: 700; letter-spacing: .6px;
    border-width: 1.5px; transition: all .2s ease;
}
.light-scheme .btn.btn-outline:hover { background: var(--brand-navy); border-color: var(--brand-navy); color: #fff !important; }

/* ---------- Contact ---------- */
.pt-page.contact.dark-scheme {
    /* charcoal tones taken from the dark map tiles, so the form flows straight into the map */
    background-color: #303030 !important;
    background-image:
        radial-gradient(900px 420px at 15% 0%, rgba(255, 255, 255, .045), transparent 60%),
        linear-gradient(180deg, #262626 0%, #2c2c2c 55%, #303030 100%) !important;
}
/* header bar matches the charcoal while the Contact page is open */
body:has(.pt-page.contact.pt-page-current) #mainNav.dark-scheme { background-color: rgba(38, 38, 38, .92) !important; border-bottom-color: rgba(255, 255, 255, .06) !important; }
/* contact footer under the map: same charcoal */
.pt-page.contact footer.dark-scheme { background: #262626 !important; border-top-color: rgba(255, 255, 255, .06) !important; }
.pt-page.contact footer .border-top { border-top-color: rgba(255, 255, 255, .08) !important; }
.pt-page.contact footer .copyright { color: #a8a8a8; letter-spacing: .3px; }
.pt-page.contact footer .toTop { background: #303030 !important; border-color: rgba(255, 255, 255, .25) !important; color: #fff !important; }
.pt-page.contact footer .toTop:hover { background: #ffffff !important; color: #262626 !important; }
.pt-page.contact .leaflet-container { background: #303030; border-top: 1px solid rgba(255, 255, 255, .06); }
.pt-page.contact .form-control, .pt-page.contact input, .pt-page.contact textarea { border-color: rgba(255, 255, 255, .16) !important; }
.pt-page.contact .btn.py-3 { background: #ffffff !important; color: #262626 !important; border-color: #ffffff !important; }
.pt-page.contact .btn.py-3:hover { background: #e9e9e9 !important; }
.pt-page.contact .accent-color { color: #bdbdbd !important; }
.contact .form-control, .contact input, .contact textarea {
    transition: border-color .2s ease;
}
.contact .form-control:focus, .contact input:focus, .contact textarea:focus {
    border-color: rgba(255, 255, 255, .7) !important; box-shadow: none !important;
}
.contact .btn.py-3 {
    border-radius: 999px !important; letter-spacing: .8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25); transition: transform .2s ease, box-shadow .2s ease;
}
.contact .btn.py-3:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, .32); }

/* ---------- Mobile menu ---------- */
#mainNav.dark-scheme .burger span { background: #ffffff !important; }
#mainNav.dark-scheme .burger:hover span { background: #8fb0ff !important; }
.mobile-nav .close-mobile-nav span { background: #ffffff !important; }
.mobile-nav.light-scheme .close-mobile-nav span { background: #111111 !important; }
.mobile-nav { background: linear-gradient(160deg, #0b1838 0%, #02266b 100%) !important; }

/* ---------- Cookie bar ---------- */
.cookies-close { border-radius: 999px !important; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .projects-content .item a, .post-content-container, .projects-content .item img, .post-content-container .post-image img { transition: none !important; }
}