/* ============================================================
   SANGEETHA SUNDARESAN — Portfolio
   Palette = the Callum base template's own scheme
   (base_template/harnishdesign.net): bold yellow accent + black.
   Loaded last, so it overrides Bootstrap + the base theme.
   Yellow is used only as background / accent / fill; text and
   buttons stay dark for readability. Structure is untouched.
   ============================================================ */

:root{
  --brand:#F5DF4E;         /* Callum yellow accent          */
  --brand-dark:#F3D92C;    /* deeper yellow (hover)         */
  --brand-soft:#FBEE9C;    /* pale yellow                   */
  --ink:#1F2328;           /* near-black headings / buttons */
  --ink-2:#12151A;         /* darkest                       */
  --slate:#5F6B74;         /* body text                     */
  --slate-light:#8A9199;   /* muted                         */
  --paper:#FFFFFF;         /* page background               */
  --panel:#FFFFFF;         /* cards                         */
  --tint:#FEFBEE;          /* barely-yellow section wash    */
  --tint-2:#FBF3CE;        /* soft yellow tint              */
  --line:#E7E5DC;          /* warm border                   */
  --ring:rgba(245,223,78,.55);
  --shadow-sm:0 2px 12px rgba(17,24,39,.06);
  --shadow-md:0 16px 36px rgba(17,24,39,.10);
  --shadow-lg:0 30px 64px rgba(17,24,39,.16);
  --radius:18px;
}

/* ---------- Base ---------- */
html{scroll-behavior:smooth;}
body{background:var(--paper)!important;color:var(--ink);font-family:"Poppins",sans-serif;-webkit-font-smoothing:antialiased;}
::selection{background:var(--brand);color:var(--ink);}
a{color:var(--ink);}
a:hover,a:focus{color:var(--ink-2);}
p{color:var(--slate);}
.text-primary{color:var(--ink)!important;}   /* yellow text is unreadable on white → use ink */
.text-muted{color:var(--slate-light)!important;}
strong,.fw-600,.fw-700{color:var(--ink);}

/* Hide leftover template sections (lorem-ipsum FAQ, fake testimonials, switcher) */
#faq,#testimonial,#styles-switcher{display:none!important;}

/* Cohesive canvas — white base, warm-washed sections */
html,body,#main-wrapper,#about,#resume{background:var(--panel)!important;}

/* ---------- Buttons ---------- */
.btn{border-radius:12px!important;font-weight:600;letter-spacing:.01em;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease,color .25s ease;}
/* Dark (primary CTA) button — black bg, white text, like Callum "View My Works" */
.btn-dark{background:var(--ink)!important;border-color:var(--ink)!important;color:#fff!important;
  box-shadow:0 12px 26px rgba(17,24,39,.22);}
.btn-dark:hover,.btn-dark:focus{background:var(--ink-2)!important;border-color:var(--ink-2)!important;color:#fff!important;
  transform:translateY(-3px);box-shadow:0 18px 36px rgba(17,24,39,.30);}
/* Yellow (accent) button — yellow bg, dark text */
.btn-primary{background:var(--brand)!important;border-color:var(--brand)!important;color:var(--ink)!important;
  box-shadow:0 12px 26px rgba(245,223,78,.5);}
.btn-primary:hover,.btn-primary:focus{background:var(--brand-dark)!important;border-color:var(--brand-dark)!important;color:var(--ink)!important;
  transform:translateY(-3px);box-shadow:0 18px 36px rgba(245,223,78,.6);}
.btn-outline-dark{border:1.5px solid var(--ink)!important;color:var(--ink)!important;background:transparent!important;border-radius:12px!important;}
.btn-outline-dark:hover{background:var(--ink)!important;color:#fff!important;transform:translateY(-3px);}
.btn-link{color:var(--ink)!important;text-decoration:none!important;font-weight:600;}
.btn-link:hover{color:var(--ink-2)!important;}

/* ---------- Eyebrow pill (span.bg-primary) — yellow bg, dark text ---------- */
span.bg-primary{background:var(--brand)!important;color:var(--ink)!important;
  border-radius:999px;padding:.5rem 1rem!important;font-size:.72rem!important;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;display:inline-block;}

/* ---------- Section rhythm & headings ---------- */
.section{padding:6.5rem 0;}
.section>.container{max-width:1240px;}
.section h2.text-10{font-size:clamp(2rem,3.6vw,3.05rem)!important;line-height:1.12;
  letter-spacing:-.035em;color:var(--ink);font-weight:700;max-width:780px;margin-left:auto;margin-right:auto;}
.section h2.text-7{color:var(--ink);font-weight:700;letter-spacing:-.02em;}

/* ---------- Header / Nav ---------- */
#header .primary-menu{min-height:74px;background:rgba(255,255,255,.88)!important;
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line)!important;}
#header .container{max-width:1240px;}
.portfolio-logo{color:var(--ink)!important;font-size:1.5rem;font-weight:700;letter-spacing:-.045em;text-decoration:none;}
.portfolio-logo span{color:var(--brand);-webkit-text-stroke:.5px var(--ink);}
#header .text-3{color:var(--slate)!important;font-weight:500;}
#header .text-3 .text-4{color:var(--ink);}
#header .navbar-toggler{width:46px;height:46px;border-radius:12px;background:var(--brand);border:1px solid var(--brand-dark);}
#header .navbar-toggler span{background:var(--ink);}
#header-nav{background:var(--ink)!important;}
#header-nav .nav-link{font-size:clamp(1.8rem,4vw,3rem);font-weight:600;letter-spacing:-.035em;color:#fff!important;}
#header-nav .nav-link:hover,#header-nav .nav-link.active{color:var(--brand)!important;}
#header-nav .social-icons a{color:#fff;}
#header-nav .social-icons a:hover{color:var(--brand);}

/* ---------- Hero — Callum signature yellow ---------- */
#home{min-height:auto!important;position:relative;overflow:hidden;padding:9rem 0 6rem!important;
  background:
    radial-gradient(60% 60% at 82% 16%,rgba(255,255,255,.32),transparent 60%),
    linear-gradient(135deg,#F9E873 0%,#F5DF4E 46%,#F1D93A 100%)!important;}
#home:before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(31,35,40,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(31,35,40,.05) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(circle at 72% 32%,#000,transparent 74%);
          mask-image:radial-gradient(circle at 72% 32%,#000,transparent 74%);}
#home .container{position:relative;z-index:1;max-width:1240px;}
#home h1{color:var(--ink)!important;font-size:.9rem!important;font-weight:700!important;
  letter-spacing:.2em;text-transform:uppercase;opacity:.85;}
#home h2{color:var(--ink)!important;font-size:clamp(2.8rem,6vw,5.3rem)!important;line-height:1.02;
  letter-spacing:-.05em;font-weight:700;margin-top:.35rem;text-transform:none!important;}
#home .text-5{color:#3a3f2e!important;max-width:520px;font-size:1.16rem!important;line-height:1.7;margin-top:1.4rem;}
#home .btn-link{color:var(--ink)!important;text-decoration:underline!important;text-underline-offset:4px;}
#home .btn-link:hover{color:var(--ink-2)!important;}
.scroll-down-arrow{color:var(--ink)!important;}

.hero-portrait{position:relative;width:min(400px,82vw)!important;aspect-ratio:4/5;padding:0!important;
  border:6px solid #fff!important;border-radius:26px!important;background:#fff;
  box-shadow:22px 24px 0 rgba(31,35,40,.14),0 30px 60px rgba(17,24,39,.24)!important;}
.hero-portrait img{width:100%!important;height:100%!important;object-fit:cover!important;
  object-position:center top!important;border-radius:20px!important;background:#fff;}
.hero-portrait:after{display:none!important;}

/* ---------- About ---------- */
#about .text-8{color:var(--ink);}
#about .border-primary{border-color:var(--brand)!important;}
#about a.link-dark{color:var(--ink)!important;text-decoration:underline;text-decoration-color:var(--brand);text-underline-offset:3px;}
#about a.link-dark:hover{color:var(--ink-2)!important;}
#about .featured-box.style-4{background:linear-gradient(150deg,var(--tint-2),#fff);
  border:1px solid var(--line);border-radius:22px;padding:2rem 1.5rem;text-align:center;box-shadow:var(--shadow-sm);}
/* 3+ badge — yellow circle, dark number, neatly centred */
#about .featured-box-icon.bg-primary{background:var(--brand)!important;color:var(--ink)!important;
  width:108px;height:108px;border-radius:50%!important;
  display:flex;align-items:center;justify-content:center;line-height:1;overflow:hidden;
  font-size:2.6rem!important;font-weight:700;margin:0 auto 1.1rem;box-shadow:0 14px 30px rgba(245,223,78,.55);}
#about .featured-box-icon.bg-primary>span{display:inline-flex;align-items:center;justify-content:center;
  line-height:1;transform:translateY(-1px);}
#about .featured-box h3{color:var(--ink);}
#about .row.gy-3{background:var(--tint);border:1px solid var(--line);border-radius:18px;padding:.35rem;}
#about .row.gy-3>div{padding:1.1rem 1.25rem;}

/* ---------- Services / Expertise ---------- */
#services{background:var(--tint)!important;border-top:1px solid var(--line);}
#services .featured-box{height:100%;background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:2.1rem 1.7rem!important;text-align:left!important;box-shadow:var(--shadow-sm);
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;}
#services .featured-box:hover{transform:translateY(-8px);box-shadow:var(--shadow-md);border-color:var(--brand-dark);}
#services .featured-box-icon{display:grid;place-items:center;width:58px;height:58px;font-size:1.5rem!important;
  color:var(--ink)!important;background:var(--brand-soft);
  border:1px solid var(--brand-dark);border-radius:16px;margin-bottom:1.35rem;transition:transform .28s ease,background .28s ease;}
#services .featured-box:hover .featured-box-icon{background:var(--brand);
  color:var(--ink)!important;transform:scale(1.06) rotate(-4deg);}
#services .featured-box h3{color:var(--ink);}

/* ---------- Resume (experience / education / skills) ---------- */
#resume .border-start.border-primary{border-color:var(--brand)!important;border-width:3px!important;
  background:var(--tint);border-radius:0 16px 16px 0;padding:1.5rem 1.7rem!important;}
#resume h3.text-5{color:var(--ink);font-weight:600;}
#resume hr{border-color:var(--line);opacity:1;}
#resume .fw-500{color:var(--ink);}
#resume .progress{height:.62rem;background:var(--tint-2);border-radius:99px;overflow:hidden;}
#resume .progress-bar{background:var(--brand)!important;border-radius:99px;}

/* ---------- Portfolio ---------- */
#portfolio{background:var(--tint)!important;border-top:1px solid var(--line);color:var(--ink);}
#portfolio h2{color:var(--ink)!important;}
#portfolio .portfolio-menu a{color:var(--slate)!important;opacity:1;font-size:.92rem;border-bottom:2px solid transparent;}
#portfolio .portfolio-menu a.active,#portfolio .portfolio-menu a:hover{color:var(--ink)!important;border-bottom-color:var(--brand)!important;}
#portfolio .portfolio-menu a::after{background:var(--brand)!important;}
.portfolio-box{transition:transform .3s ease;}
.portfolio-box:hover{transform:translateY(-6px);}
.portfolio-img{overflow:hidden;background:#fff;border-radius:18px;border:1px solid var(--line);box-shadow:var(--shadow-sm);}
.portfolio-img>img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s ease;}
.portfolio-box:hover .portfolio-img>img{transform:scale(1.06);}
/* dark overlay with yellow title — high contrast, on-brand */
.portfolio-overlay{background:linear-gradient(160deg,rgba(31,35,40,.92),rgba(18,21,26,.9))!important;border-radius:18px;}
.portfolio-overlay .text-primary{color:var(--brand)!important;}
.portfolio-overlay .text-white,.portfolio-overlay h5{color:#fff!important;}
.portfolio-overlay .text-light{color:rgba(255,255,255,.8)!important;}

/* ---------- Call to action — dark band, yellow button ---------- */
.cta-sangeetha{position:relative;overflow:hidden;border:0!important;
  background:linear-gradient(130deg,#1F2328 0%,#12151A 100%)!important;}
.cta-sangeetha .hero-mask{display:none!important;}
.cta-sangeetha:before{content:"";position:absolute;width:520px;height:520px;right:-200px;top:-260px;
  border:80px solid rgba(245,223,78,.10);border-radius:50%;}
.cta-sangeetha .hero-content h2{color:#fff!important;}
.cta-sangeetha .hero-content p{color:rgba(255,255,255,.7)!important;}
.cta-sangeetha .btn-primary{background:var(--brand)!important;color:var(--ink)!important;border:0!important;box-shadow:0 14px 30px rgba(245,223,78,.35);}
.cta-sangeetha .btn-primary:hover{background:var(--brand-dark)!important;color:var(--ink)!important;}

/* ---------- Contact ---------- */
#contact{background:var(--tint)!important;border-top:1px solid var(--line);position:relative;overflow:hidden;}
#contact .container{position:relative;z-index:1;}
#contact h2{color:var(--ink)!important;letter-spacing:-.035em;}
#contact .text-5,#contact address{color:var(--slate)!important;}
#contact h3.text-5{color:var(--ink)!important;}
#contact .text-4 a.text-dark{color:var(--ink)!important;text-decoration:underline;text-decoration-color:var(--brand);text-underline-offset:3px;}
#contact .text-4 a.text-dark:hover{color:var(--ink-2)!important;}
#contact .contact-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:2.4rem;box-shadow:var(--shadow-md);}
#contact .contact-card h2{color:var(--ink)!important;}
#contact .form-label{color:var(--ink);font-weight:600;margin-bottom:.5rem;}
#contact .form-border{background:transparent!important;border:0!important;padding:0!important;box-shadow:none!important;}
#contact .form-control,#contact .form-select{background:#fff!important;border:1px solid var(--line)!important;
  border-radius:10px!important;color:var(--ink)!important;min-height:3.1rem;padding:.7rem 1rem!important;}
#contact textarea.form-control{min-height:8.5rem;resize:vertical;}
#contact .form-control:focus,#contact .form-select:focus{border-color:var(--brand-dark)!important;box-shadow:0 0 0 .22rem var(--ring)!important;}
#contact #submit-btn{background:var(--ink)!important;border:0!important;color:#fff!important;padding:.9rem 1.6rem;min-width:185px;}
#contact #submit-btn:hover{background:var(--ink-2)!important;}
#contact #submit-btn:disabled{opacity:.7;cursor:wait;}
#contact .social-icons a{color:var(--ink);}
.contact-status{min-height:1.5rem;font-weight:600;}
.contact-status.is-success{color:#1a7f4b;}
.contact-status.is-error{color:#B42318;}

/* ---------- Social icons (global) ---------- */
.social-icons a{transition:color .25s ease,transform .25s ease;}
.social-icons a:hover{color:var(--ink-2)!important;transform:translateY(-3px);}

/* ---------- Footer ---------- */
#footer.bg-dark{background:linear-gradient(160deg,#1F2328 0%,#12151A 100%)!important;padding:2rem 0!important;}
#footer p,#footer a{color:rgba(255,255,255,.8)!important;}
#footer a.fw-600{color:var(--brand)!important;}
#footer a:hover{color:var(--brand)!important;}

/* ---------- Back to top ---------- */
#back-to-top{background:var(--ink)!important;color:var(--brand)!important;box-shadow:0 10px 24px rgba(17,24,39,.35);}
#back-to-top:hover{background:var(--ink-2)!important;color:var(--brand)!important;}

/* ---------- Responsive ---------- */
@media(max-width:991.98px){
  .section{padding:4.5rem 0;}
  #home{padding:7rem 0 4rem!important;}
  #home .text-5{margin-left:auto;margin-right:auto;}
  .hero-portrait{width:min(320px,74vw)!important;margin-top:1rem;}
  #home .btn-link{display:inline-block;}
}
@media(max-width:575.98px){
  #home h2{font-size:2.6rem!important;}
  .section h2.text-10{font-size:2rem!important;}
  #contact .contact-card{padding:1.4rem;border-radius:16px;}
  #about .featured-box-icon.bg-primary{width:96px;height:96px;font-size:2.3rem!important;}
}

/* ============================================================
   BASE-THEME ACCENT MAP
   The Callum base already uses this yellow (#f5df4e/#f3d92c),
   which is exactly what we want now. Keep yellow as fill/accent
   but force link text to ink so nothing is unreadable on white.
   ============================================================ */
::selection{background:var(--brand)!important;color:var(--ink)!important;}
a,a:focus{color:var(--ink)!important;}
a:hover,a:active{color:var(--ink-2)!important;}
.bg-primary,.badge-primary{background-color:var(--brand)!important;}
.border-primary{border-color:var(--brand)!important;}
.nav-tabs .nav-item .nav-link.active:after{background-color:var(--brand)!important;}
.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{border-color:var(--brand)!important;}
.owl-theme .owl-dots .owl-dot.active span:after,.owl-theme .owl-dots .owl-dot:hover span:after,
.owl-theme.owl-light .owl-dots .owl-dot.active span:after,.owl-theme.owl-light .owl-dots .owl-dot:hover span:after{background-color:var(--brand)!important;}
.accordion:not(.accordion-flush) .accordion-header .accordion-button{background-color:var(--brand)!important;color:var(--ink)!important;}
.navbar-expand-none ul.navbar-nav li:hover>a:not(.btn),
.navbar-expand-none ul.navbar-nav li>a.active:not(.btn),
.navbar-overlay ul.navbar-nav li:hover>a:not(.btn),
.navbar-overlay ul.navbar-nav li>a.active:not(.btn){color:var(--brand)!important;}