/* Global */
:root{
    /* Sky blue theme */
    --brand:#38bdf8;      /* sky-400 */
    --brand-600:#0ea5e9;  /* sky-500 */
    --ink:#0b1324;
    --muted:#6c757d;
    --bg:#ffffff;             /* base page background */
    --surface:#ffffff;        /* cards/surfaces */

    /* Override Bootstrap primary to match brand */
    --bs-primary: var(--brand);
    --bs-primary-rgb: 56,189,248;
    /* Subtle and emphasis variants for primary */
    --bs-primary-text-emphasis: #075985; /* sky-800 */
    --bs-primary-bg-subtle: #e0f2fe;     /* sky-100 */
    --bs-primary-border-subtle: #bae6fd; /* sky-200 */
    /* Default link colors */
    --bs-link-color: var(--brand);
    --bs-link-hover-color: var(--brand-600);
}

/* Dark theme (manual) */
:root[data-theme="dark"]{
    --ink:#e6f1ff;
    --muted:#9fb3c8;
    --bg:#0b1220;             /* deep indigo/blue */
    --surface:#0f172a;         /* slate-900 */
    /* Primary variants tuned for dark */
    --bs-primary-text-emphasis: #e0f2fe;
    --bs-primary-bg-subtle: #0b2b3a;   /* darker subtle */
    --bs-primary-border-subtle: #134e6f;
    --bs-link-color: var(--brand);
    --bs-link-hover-color: var(--brand-600);
}
/* Dark theme (auto, unless user forced light) */
@media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
        --ink:#e6f1ff;
        --muted:#9fb3c8;
        --bg:#0b1220;
        --surface:#0f172a;
        --bs-primary-text-emphasis: #e0f2fe;
        --bs-primary-bg-subtle: #0b2b3a;
        --bs-primary-border-subtle: #134e6f;
        --bs-link-color: var(--brand);
        --bs-link-hover-color: var(--brand-600);
    }
}

html{ scroll-behavior:smooth; }
body{ font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--ink); background: var(--bg); }

/* Ensure bold/emphasis text remains readable in dark mode */
[data-theme="dark"] b,
[data-theme="dark"] strong,
[data-theme="dark"] .fw-semibold,
[data-theme="dark"] .fw-bold{ color: var(--ink) !important; }
/* Make secondary-emphasis text (e.g., hero subtitle) bright in dark mode */
[data-theme="dark"] .text-secondary-emphasis{ color: var(--ink) !important; }
[data-theme="dark"] .text-muted{ color: var(--muted) !important; }

/* Also apply when system is dark and user hasn't forced light */
@media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) body b,
    :root:not([data-theme="light"]) body strong,
    :root:not([data-theme="light"]) body .fw-semibold,
    :root:not([data-theme="light"]) body .fw-bold{ color: var(--ink) !important; }
    :root:not([data-theme="light"]) body .text-secondary-emphasis{ color: var(--ink) !important; }
    :root:not([data-theme="light"]) body .text-muted{ color: var(--muted) !important; }
}

/* Make skip link visible when focused */
.visually-hidden-focusable:not(:focus):not(:focus-within){
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}
.visually-hidden-focusable:focus{ z-index: 1050; background: var(--surface); border-radius: .25rem; box-shadow: 0 2px 8px rgba(0,0,0,.15); }

/* Logo image */
img#siteLogo{ background: transparent; height: 56px; width: auto; }
@media (min-width: 576px){ img#siteLogo{ height: 64px; } }
@media (min-width: 768px){ img#siteLogo{ height: 72px; } }

/* Navbar */
.navbar{ --bs-navbar-padding-y: .25rem; }
.navbar .nav-link{ color:#e9f2ff !important; opacity:.9; transition:color .2s ease, opacity .2s; }
.navbar .nav-link:hover{ color:#fff !important; opacity:1; }
/* Tighten nav item paddings to keep navbar compact */
.navbar .nav-link{ padding-top:.35rem; padding-bottom:.35rem; }
.navbar .navbar-brand{ padding-top:0; padding-bottom:0; }
/* Keep navbar buttons compact */
.navbar .btn{ padding-top:.25rem; padding-bottom:.25rem; line-height:1.1; }
/* Ensure navbar toggle buttons are always visible */
.navbar .btn-outline-light{
    --bs-btn-color: #ffffff;
    --bs-btn-border-color: rgba(255,255,255,.85);
    --bs-btn-hover-color: #0b1324;
    --bs-btn-hover-bg: #ffffff;
    --bs-btn-hover-border-color: #ffffff;
    --bs-btn-focus-shadow-rgb: 255,255,255;
    opacity: 1 !important;
    background-color: rgba(255,255,255,.08);
}
.navbar .btn-outline-light,
.navbar #themeToggle,
.navbar #motionToggle{ color: #ffffff !important; }
.navbar .btn-outline-light i,
.navbar #themeToggle i,
.navbar #motionToggle i{ color: #ffffff !important; opacity: 1 !important; }

/* Hero */
.hero-section{
    background: radial-gradient(1200px 600px at 10% 0%, rgba(56,189,248,.10), transparent),
                            radial-gradient(1200px 600px at 90% 20%, rgba(32,201,151,.10), transparent),
                            linear-gradient(180deg, #f8fbff 0%, #ffffff 60%);
}
[data-theme="dark"] .hero-section{
    background: radial-gradient(1200px 600px at 10% 0%, rgba(56,189,248,.10), transparent),
                            radial-gradient(1200px 600px at 90% 20%, rgba(32,201,151,.08), transparent),
                            linear-gradient(180deg, #0b1220 0%, #0f172a 60%);
}
.hero-photo{ display:none; }
.hero-photo-frame{
    width: 80%;
    max-width: 420px;
    aspect-ratio: 3 / 4;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(56,189,248,.2);
}
.hero-photo-img{
    width:100%; height:100%;
    object-fit: cover;
    object-position: center top; /* crop below chest by focusing on upper area */
    display:block;
}

/* Pull hero text up more on larger screens without affecting the image */
@media (min-width: 768px){ .hero-text{ margin-top: -36px; } }
@media (min-width: 992px){ .hero-text{ margin-top: -88px; } }
@media (min-width: 1200px){ .hero-text{ margin-top: -110px; } }

.social-links a{ color:var(--brand); }
.social-links a:hover{ color:var(--brand-600); transform: translateY(-1px); }
.social-links a i{ transition: transform .2s ease, color .2s ease; }

.btn-primary{
    background: var(--brand);
    border-color: var(--brand);
}
.btn-primary:hover{ background: var(--brand-600); border-color: var(--brand-600); }
.btn-outline-light{ border-color:var(--brand); color:var(--brand); }
.btn-outline-light:hover{ background:var(--brand); color:#fff; }

/* Ensure outline-primary uses brand sky variables */
.btn-outline-primary{
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-border-color: var(--brand);
    --bs-btn-focus-shadow-rgb: 56,189,248;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand);
    --bs-btn-active-border-color: var(--brand);
    --bs-btn-disabled-color: var(--brand);
    --bs-btn-disabled-border-color: var(--brand);
}

/* Sections */
section{ scroll-margin-top: 80px; }

/* Cards */
.card{
    border: none;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.06), 0 12px 28px rgba(56,189,248,.10);
    transition: transform .35s ease, box-shadow .35s ease;
    will-change: transform;
    animation: cardFloat 7.5s ease-in-out infinite;
    background: var(--surface);
}
.card:hover, .card:focus-within{
    transform: translateY(-12px);
    box-shadow: 0 22px 56px rgba(0,0,0,.08), 0 24px 48px rgba(56,189,248,.16);
}
/* slight phase offsets so they don't bob in sync */
.card:nth-of-type(2n){ animation-delay: .8s; }
.card:nth-of-type(3n){ animation-delay: 1.6s; }
.card .card-title{ color: var(--ink); }
.card .card-text{ color: var(--muted); }

/* Intro badge font size (override Bootstrap) */
.intro-badge{ font-size: 1.25rem !important; line-height:1.1; padding:.35rem .8rem !important; letter-spacing:.2px; }
@media (min-width: 576px){ .intro-badge{ font-size: 1.35rem !important; } }
@media (min-width: 768px){ .intro-badge{ font-size: 1.45rem !important; } }
@media (min-width: 992px){ .intro-badge{ font-size: 1.55rem !important; } }
@media (min-width: 1200px){ .intro-badge{ font-size: 1.65rem !important; } }

/* Skill chips */
.chip{
    display:inline-block;
    padding:.4rem .75rem;
    font-size:.9rem;
    border-radius:999px;
    background:#ecfeff;             /* sky-subtle */
    border:1px solid #bae6fd;       /* sky border */
    color:#075985;                  /* sky-800 for text */
}

[data-theme="dark"] .chip{
    background: rgba(56,189,248,.12);
    border-color: #134e6f;
    color:#e0f2fe;
}

/* Stars */
.stars i{ margin-right:2px; }

/* Fallback for bg-success-subtle if not present */
.bg-success-subtle{ background: #d1f7e6 !important; }
.border-success-subtle{ border-color: #b9ebd7 !important; }

/* Footer */
footer .text-center a{ color:#bae6fd; }
footer .text-center a:hover{ color:#e0f2fe; }
/* Footer links */
.footer-link{ color:#bae6fd; text-decoration:none; }
.footer-link:hover{ color:#e0f2fe; text-decoration:underline; }

/* Interests: balance logo columns */
#interests .col-md-4.bg-light{
    min-height:150px;
    display:flex;
    align-items:center;
    justify-content:center;
}
#interests .col-md-4.bg-light i{
    font-size:3.5rem !important;
    color:var(--brand);
    line-height:1;
    filter: drop-shadow(0 2px 6px rgba(56,189,248,.25));
}
@media (max-width: 575.98px){
    #interests .col-md-4.bg-light{ min-height:120px; }
    #interests .col-md-4.bg-light i{ font-size:3rem !important; }
}
[data-theme="dark"] #interests .col-md-4.bg-light{ background-color:#0b2b3a !important; }

/* ===== Animations ===== */
/* Reveal base */
.reveal{ opacity:0; transform: translateY(20px); will-change: opacity, transform; }
.reveal{ transition: opacity .7s ease, transform .7s cubic-bezier(.2,.65,.2,1); }
.reveal.show{ opacity:1; transform:none; transition: opacity .7s ease, transform .7s cubic-bezier(.2,.65,.2,1); }

/* Variants */
.reveal[data-reveal="fade-up"]{ transform: translateY(24px); }
.reveal[data-reveal="fade-down"]{ transform: translateY(-24px); }
.reveal[data-reveal="slide-left"]{ transform: translateX(-28px); }
.reveal[data-reveal="slide-right"]{ transform: translateX(28px); }
.reveal[data-reveal="zoom-in"]{ transform: scale(.96); }

/* Floating image */
@keyframes floatY{ 0%{ transform: translateY(0); } 50%{ transform: translateY(-10px); } 100%{ transform: translateY(0); } }
.float{ animation: floatY 6s ease-in-out infinite; }

/* Floating animation for cards */
@keyframes cardFloat{ 0%{ transform: translateY(0) } 50%{ transform: translateY(-6px) } 100%{ transform: translateY(0) } }

/* Shimmer badge */
.badge-shimmer{
    position: relative;
    overflow: hidden;
}
.badge-shimmer::after{
    content:""; position:absolute; inset:0; transform: translateX(-100%);
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.4) 50%, transparent 100%);
    animation: shimmer 2.2s ease-in-out infinite;
}
@keyframes shimmer{ 0%{ transform: translateX(-120%);} 100%{ transform: translateX(120%);} }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1 !important; transform:none !important; }
    .reveal.show{ transition:none !important; }
    .float{ animation: none !important; }
    .card{ animation: none !important; }
    .badge-shimmer::after{ display:none !important; }
}

/* Manual motion toggle via data attribute */
[data-motion="reduced"] .reveal{ opacity:1 !important; transform:none !important; }
[data-motion="reduced"] .reveal.show{ transition:none !important; }
[data-motion="reduced"] .float{ animation: none !important; }
[data-motion="reduced"] .card{ animation: none !important; }
[data-motion="reduced"] .badge-shimmer::after{ display:none !important; }

/* Focus styles */
:focus-visible{
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* --- Responsive improvements --- */
@media (max-width: 575.98px) {
  .hero-section {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  .hero-text {
    margin-top: 0 !important;
    text-align: center;
  }
  .hero-photo-frame {
    margin-left: auto;
    margin-right: auto;
    width: 100% !important;
    max-width: 320px !important;
  }
  .btn-lg, .btn {
    width: 100%;
    font-size: 1rem;
  }
  .download-resume, .btn-outline-light {
    margin-bottom: 0.5rem !important;
  }
  .social-links {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
  .footer-link {
    display: block;
    margin-bottom: 0.5rem;
  }
  .card {
    margin-bottom: 1.5rem !important;
  }
}

@media (max-width: 767.98px) {
  .navbar .navbar-brand span {
    font-size: 1rem !important;
  }
  .navbar .nav-link {
    font-size: 1rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  .container, .container-fluid {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

img, .img-fluid {
  max-width: 100%;
  height: auto;
}

.card-body, .card-title, .card-text {
  word-break: break-word;
}

/* --- End responsive improvements --- */