/* site.css — overrides & new components on top of davis.css */



:root {
  --pf-yellow: #f5d020;
  --pf-dark: #070d1b;
  --pf-text: #8692a6;
}

/* =========================================================
   HERO FONT FILE
   The font file must exist here:
   public_html/assets/fonts/calibri.ttf
   ========================================================= */

   @font-face {
    font-family: "Paritosh Hero Font";
    src: url("../assets/fonts/calibri.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  
  
  /* =========================================================
     HERO NAME — Paritosh Thanki
     Targets only: <h1 id="hero-name">
     ========================================================= */
  
     #hero-name {
      font-family: "Paritosh Hero Font" !important;
      font-size: 100px !important;
      font-weight: 400 !important;
      font-style: normal !important;
      line-height: 1.05 !important;
      letter-spacing: -2px !important;
      color: #fdfeff !important;
    }
  
  /* =========================================================
     HERO ROLE — Compositor, Lighter & Production Coordinator
     Targets only: <h2 id="hero-title">
     ========================================================= */
  
     #hero-title {
      font-family: "Paritosh Hero Font" !important;
      font-size: 25px !important;
      font-weight: 400 !important;
      font-style: normal !important;
      line-height: 1.35 !important;
      letter-spacing: 0 !important;
      color: #a9adb8 !important;
    }



/* ---------- preloader ---------- */
#preloader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--pf-dark);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .6s ease, visibility .6s;
}
#preloader.done { opacity: 0; visibility: hidden; }
.preloader-ring {
  position: relative; width: 56px; height: 56px;
  border-radius: 50%;
  background: conic-gradient(from 200deg, var(--pf-yellow) 0 70deg, #23293933 70deg 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  animation: preloader-spin 1s linear infinite;
}
.preloader-dot {
  position: absolute; left: 50%; top: 50%;
  width: 10px; height: 10px; margin: -5px 0 0 -5px;
  background: var(--pf-yellow); border-radius: 50%;
}
@keyframes preloader-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .preloader-ring { animation-duration: 3s; } }

/* ---------- hero socials ---------- */
.st-hero-img .st-social-group { z-index: 6; }
/* Expanding pill social buttons — matches the original template.
   Sizing/animation comes from davis.css (.st-social-btn + .st-icon-name).
   Do NOT set a fixed width/height here or the label can never expand. */
.st-social-link { display: flex; align-items: center; flex-wrap: nowrap; }
.st-social-link .st-social-btn { color: #fdfeff; text-decoration: none; }
.st-social-link .st-social-btn .st-icon-name { white-space: nowrap; font-size: 16px; }
.st-social-link .st-social-btn:hover .st-icon-name,
.st-social-link .st-social-btn.active .st-icon-name { padding-left: 4px; }
.st-social-link .st-social-btn iconify-icon { font-size: 18px; }
@media (prefers-reduced-motion: reduce) {
  .st-social-btn, .st-social-btn .st-icon-name { transition: none; }
}

/* header phone + sticky */
.st-site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; }
.sp-phone { display: flex; align-items: center; gap: 10px; }
.sp-phone svg { width: 16px; fill: var(--pf-yellow); }
.sp-phone-no { color: var(--pf-yellow); font-family: inherit; white-space: nowrap; }
@media screen and (max-width: 991px) {
  .sp-phone { display: none; }
}

/* nav links */
.st-nav-list { display: flex !important; align-items: center; margin: 0; padding: 0; list-style: none; gap: 2px; }
.st-nav-list a { position: relative; display: block; padding: 27px 16px; color: #fff; text-transform: uppercase; font-size: 14px; letter-spacing: .5px; cursor: pointer; transition: color .3s; }
.st-nav-list a:hover, .st-nav-list a.active { color: var(--pf-yellow); }
.st-nav-list a.active::before {
  content: ''; position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: var(--pf-yellow);
}
@media screen and (max-width: 991px) {
  .st-nav-list { display: none !important; }
}

/* hamburger */
.st-munu-toggle { display: none; width: 26px; height: 20px; position: relative; cursor: pointer; z-index: 1200; }
.st-munu-toggle span, .st-munu-toggle span::before, .st-munu-toggle span::after {
  content: ''; position: absolute; left: 0; width: 100%; height: 2px; background: #fff; transition: all .3s;
}
.st-munu-toggle span { top: 9px; }
.st-munu-toggle span::before { top: -9px; }
.st-munu-toggle span::after { top: 9px; }
body.menu-open .st-munu-toggle span { background: transparent; }
body.menu-open .st-munu-toggle span::before { top: 0; transform: rotate(45deg); }
body.menu-open .st-munu-toggle span::after { top: 0; transform: rotate(-45deg); }
@media screen and (max-width: 991px) { .st-munu-toggle { display: block; } }

/* mobile menu overlay */
.mobile-menu {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(7, 13, 27, .98);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: all .35s ease;
}
body.menu-open .mobile-menu { opacity: 1; visibility: visible; }
.mobile-menu-inner { text-align: center; }
.mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.mobile-menu li a {
  display: block; padding: 14px 40px; color: #fff;
  font-size: 22px; text-transform: uppercase; letter-spacing: 1px;
}
.mobile-menu li a:hover { color: var(--pf-yellow); }
.mm-admin a { color: var(--pf-yellow) !important; font-size: 15px !important; }
.mm-phone { margin-top: 24px; color: var(--pf-yellow); }

/* ---------- portfolio tabs ---------- */
.pf-tabs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.pf-tab {
  border: 1px solid #2a3147; background: transparent; color: #fff;
  padding: 10px 22px; border-radius: 50px; font-size: 13px;
  text-transform: uppercase; letter-spacing: .8px; cursor: pointer;
  transition: all .3s ease; font-family: inherit;
}
.pf-tab:hover { border-color: var(--pf-yellow); color: var(--pf-yellow); }
.pf-tab.active { background: var(--pf-yellow); border-color: var(--pf-yellow); color: #070d1b; font-weight: 600; }

/* video badge on cards */
.pf-card .st-portfolio-item-hover .pf-play-badge {
  position: absolute; top: 14px; left: 14px;
  display: flex; align-items: center; gap: 6px;
  background: rgba(7,13,27,.75); color: var(--pf-yellow);
  font-size: 11px; text-transform: uppercase; letter-spacing: .8px;
  padding: 4px 10px; border-radius: 4px;
}
.st-portfolio-item-hover { position: relative; }

/* ---------- lightbox ---------- */
.pf-lightbox {
  position: fixed; inset: 0; z-index: 5000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s;
}
.pf-lightbox.open { opacity: 1; visibility: visible; }
.pf-lightbox-backdrop { position: absolute; inset: 0; background: rgba(3, 6, 14, .93); }
.pf-lightbox-stage {
  position: relative; z-index: 2; max-width: min(1100px, 88vw);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.pf-lightbox-media { display: flex; align-items: center; justify-content: center; }
.pf-lightbox-media img, .pf-lightbox-media video {
  max-width: min(1100px, 88vw); max-height: 72vh;
  border-radius: 6px; box-shadow: 0 30px 80px rgba(0,0,0,.6);
  animation: lb-in .35s ease;
}
@keyframes lb-in { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.pf-lightbox-caption { text-align: center; color: #fff; margin-top: 20px; text-shadow: 0 2px 14px rgba(0,0,0,.7); }
.pf-lightbox-title { font-size: 20px; font-weight: 600; }
.pf-lightbox-subtitle { color: var(--pf-yellow); font-size: 13px; text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; }
.pf-lightbox-count { color: var(--pf-text); font-size: 12px; margin-top: 6px; }
.pf-lightbox-close, .pf-lightbox-arrow {
  position: fixed; z-index: 3; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: #171f33; color: #fff; font-size: 20px;
  transition: all .25s ease;
}
.pf-lightbox-close:hover, .pf-lightbox-arrow:hover { background: var(--pf-yellow); color: #000; }
.pf-lightbox-close { top: 28px; right: 28px; }
.pf-lightbox-arrow.pf-prev { left: 28px; top: 50%; transform: translateY(-50%); }
.pf-lightbox-arrow.pf-next { right: 28px; top: 50%; transform: translateY(-50%); }
.pf-lightbox-arrow.pf-prev:hover { transform: translateY(-50%) scale(1.05); }
.pf-lightbox-arrow.pf-next:hover { transform: translateY(-50%) scale(1.05); }
@media screen and (max-width: 767px) {
  .pf-lightbox-arrow.pf-prev { left: 10px; }
  .pf-lightbox-arrow.pf-next { right: 10px; }
  .pf-lightbox-close { top: 14px; right: 14px; }
  .pf-lightbox-media img, .pf-lightbox-media video { max-width: 92vw; max-height: 60vh; }
}
.pf-lightbox-arrow:disabled { opacity: .25; cursor: default; }
.pf-lightbox-arrow:disabled:hover { background: #171f33; color: #fff; transform: translateY(-50%); }

/* ---------- contact info ----------
   Layout, icon circles and type sizes come from davis.css so this matches the
   original template. Only the icon-font sizing is set here, because the
   original used inline SVG where we use an icon font. */
.st-single-contact-info .st-icon-wrap { flex: 0 0 auto; color: #fdfeff; }
.st-single-contact-info .st-icon-wrap iconify-icon { font-size: 18px; }
.st-single-info-details a { color: var(--pf-text); text-decoration: none; }
.st-social-heading { color: #fdfeff; font-size: 18px; margin-bottom: 20px; }

/* footer admin link */
.admin-link { color: var(--pf-yellow); font-size: 12px; margin-left: 12px; text-decoration: underline; }
.admin-link:hover { color: #fff; }

/* skills bars runtime animation */
.st-progressbar-in { width: 0; transition: width 1.4s cubic-bezier(.25,.8,.35,1); }

/* hero fallback sizing */
.st-hero-img img { max-width: none; }

/* ------------------------------------------------------------------
   Skills 02 — grouped competency lists (Core Competencies / Creative Tools)
   Centered group heading flanked by rules, items flowing in columns.
   ------------------------------------------------------------------ */
.st-comp-group { margin-bottom: 42px; }
.st-comp-group:last-child { margin-bottom: 0; }

.st-comp-group-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
}
.st-comp-group-head::before,
.st-comp-group-head::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.18);
}
.st-comp-group-title {
  flex: 0 0 auto;
  margin: 0;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #fec544;
  text-align: center;
}

.st-comp-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 34px;
}
.st-comp-list li {
  position: relative;
  padding-left: 16px;
  font-size: 16px;
  line-height: 1.7;
  color: #b4b8c3;
}
.st-comp-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #fec544;
}

/* Light-background variant, in case the section is moved off the dark band */
section:not(.st-dark-bg) .st-comp-group-head::before,
section:not(.st-dark-bg) .st-comp-group-head::after { background-color: rgba(7, 13, 27, 0.14); }
section:not(.st-dark-bg) .st-comp-list li { color: #4d5460; }

@media (max-width: 767px) {
  .st-comp-group { margin-bottom: 34px; }
  .st-comp-group-head { gap: 12px; margin-bottom: 18px; }
  .st-comp-group-title { font-size: 15px; letter-spacing: 0.8px; }
  .st-comp-list { gap: 8px 22px; }
  .st-comp-list li { font-size: 15px; }
}

/* ------------------------------------------------------------------
   Requested removals
   ------------------------------------------------------------------ */

/* The oversized faded watermark word sitting behind every section heading
   ("PORTFOLIO" behind Portfolio, "ABOUT" behind About Me, and so on).
   It is absolutely positioned, so hiding it changes no layout. */
.st-section-heading.st-style1 .st-section-heading-subtitle {
  display: none !important;
}

/* No hover overlay on portfolio pieces at all: the inset white square outline,
   the grey dimming box and the plus badge with its caption are all removed.
   Clicking a piece still opens the lightbox, and the slow image zoom stays. */
.st-portfolio:after,
.st-portfolio:before,
.st-portfolio .st-portfolio-item-hover {
  display: none !important;
}

/* ------------------------------------------------------------------
   Portfolio category tabs — gap to the thumbnails is set in JS
   (setTabsGap) so it grows with the number of tab rows.
   ------------------------------------------------------------------ */
.pf-tabs { margin-bottom: 34px; }


/* Checkpoint font restoration: scope limited to the main hero name only. */
#hero-name {
  font-family: Inter, sans-serif !important;
  font-style: normal;
  font-weight: 900;
}

.st-nav .sp-phone,
.sp-phone {
  display: none !important;
}


/* Hide the hero “Hire Me” button.
   Remove this entire rule later to show the button again. */
   #hero-btn {
    display: none !important;
  }



/* ===== HIDE: Download Resume & Cover Letter button =====
   To show the button again, comment out this rule. */
   .st-text-block-btn {
    display: none !important;
  }

  

/* Hero name: Paritosh Thanki 
#hero-name {
  font-family: Calibri !important;
  font-size: 100px !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
  letter-spacing: -2px;
}*/

/* Hero role: Compositor, Lighter & Production Coordinator 
#hero-title {
  font-family: Calibri !important;
  font-size: 25px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  letter-spacing: 0;
}*/