/* =========================================================
   Pinkkard Design – Base Theme CSS
   Works on top of Bootstrap. No class renames required.
   ========================================================= */

/* -------------------------------
   0) THEME TOKENS
-------------------------------- */
:root{
  --pd-ink:        #161616;  /* text / primary btn */
  --pd-ink-80:     #2b2b2b;
  --pd-cream:      #fff7ea;  /* light background tint */
  --pd-cream-2:    #fff3df;
  --pd-gold:       #f2c14e;  /* accent */
  --pd-muted:      #6f6f6f;
  --pd-radius:     9999px;   /* pill radius */
  --pd-radius-md:  16px;
  --pd-shadow:     0 6px 20px rgba(0,0,0,.06);
  --pd-shadow-sm:  0 4px 12px rgba(0,0,0,.05);
  --pd-maxw:       1200px;
}

/* -------------------------------
   1) GLOBAL BASE
-------------------------------- */
html { scroll-behavior: smooth; }
body{
  color: var(--pd-ink);
  background: #fff;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{
  max-width: var(--pd-maxw);
}

/* Typography */
h1,h2,h3,h4{ font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
h1{ font-size: clamp(2rem, 3vw + 1.2rem, 3.2rem); }
h2{ font-size: clamp(1.6rem, 2.2vw + 1rem, 2.2rem); }
.pd-muted{ color: var(--pd-muted); }
.pd-display{ letter-spacing:-.01em; }

/* Links */
a{ color: var(--pd-ink); text-decoration: none; }
a:hover{ color: var(--pd-gold); }

/* Sections */
.pd-section{ padding: 72px 0; }
.pd-section-soft{ background: var(--pd-cream); }
.pd-divider{ height:1px; background: rgba(0,0,0,.08); margin: 24px 0; }

/* Subtle pattern option for hero or bands */
.pd-band{
  background: radial-gradient(1200px 1200px at 0% -20%, var(--pd-cream) 0, transparent 60%) no-repeat,
              radial-gradient(800px 800px at 110% 0%, var(--pd-cream-2) 0, transparent 60%) no-repeat;
}

/* -------------------------------
   2) NAV / HEADER
-------------------------------- */
.navbar{
  backdrop-filter: saturate(140%) blur(6px);
  background: rgba(255,255,255,.7);
}
.navbar .nav-link{ font-weight: 600; }
.navbar .btn{ margin-left: .5rem; }

/* -------------------------------
   3) BUTTON SYSTEM
   Primary: solid black
   Secondary: gold outline -> gold fill on hover
-------------------------------- */
.btn-pd{
  border-radius: var(--pd-radius);
  padding: .7rem 1.2rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: var(--pd-shadow-sm);
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-pd:active{ transform: translateY(1px); }

.btn-pd-primary{
  background: var(--pd-ink);
  color: #fff;
  border: 2px solid var(--pd-ink);
}
.btn-pd-primary:hover,
.btn-pd-primary:focus{
  background: var(--pd-ink-80);
  border-color: var(--pd-ink-80);
  color:#fff;
  box-shadow: var(--pd-shadow);
}

.btn-pd-secondary{
  background: transparent;
  color: var(--pd-gold);
  border: 2px solid var(--pd-gold);
}
.btn-pd-secondary:hover,
.btn-pd-secondary:focus{
  background: var(--pd-gold);
  color: var(--pd-ink);
  box-shadow: var(--pd-shadow);
}

/* Make paired CTAs align nicely inside cards/sections */
.card .btn, .pd-cta-row .btn { width: 100%; }

/* -------------------------------
   4) HERO TWEAKS
-------------------------------- */
.pd-hero p{ max-width: 60ch; }
.pd-hero .btn{ margin-top: 1rem; } /* fixes odd <br> spacing if present */

/* -------------------------------
   5) CARDS / PACKAGE GRID
-------------------------------- */
.card{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 20px;
  box-shadow: var(--pd-shadow-sm);
}
.card .card-header{
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.06);
  font-weight: 700;
}
.pd-price{
  font-weight: 800;
  font-size: 1.25rem;
}
.pd-badges .badge{
  background: var(--pd-cream);
  color: var(--pd-ink);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 24px;
  padding: .45rem .7rem;
  font-weight: 600;
}

/* -------------------------------
   6) CAROUSEL – visible arrows + a11y
-------------------------------- */
.carousel-control-prev, .carousel-control-next{
  width: 3rem; height: 3rem;
  top: 50%; transform: translateY(-50%);
  opacity: 1;
  background: #fff;
  border: 2px solid var(--pd-ink);
  border-radius: 9999px;
}
.carousel-control-prev:hover, .carousel-control-next:hover{
  filter: brightness(.96);
}

/* Swap icons for solid black SVGs (Bootstrap removes white filter) */
.carousel-control-prev-icon,
.carousel-control-next-icon{
  background-size: 1rem 1rem;
  filter: none;
}
.carousel-control-prev-icon{
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5 2.5L5 8l5.5 5.5' stroke='%23161616' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.carousel-control-next-icon{
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.5 2.5L11 8 5.5 13.5' stroke='%23161616' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Keyboard focus ring (shows your gold) */
.carousel-control-prev:focus,
.carousel-control-next:focus{
  outline: 3px solid var(--pd-gold);
  outline-offset: 2px;
}

/* Make entire project cards clickable (with .stretched-link) */
.card .stretched-link::after{ border-radius: 20px; }

/* -------------------------------
   7) SECTION TITLES + ACCENTS
-------------------------------- */
.section-title{
  text-align: center;
  margin-bottom: 1.25rem;
}
.section-title span{ color: var(--pd-gold); }
.section-title::after{
  content:"";
  display:block;
  width: 3rem; height: 3px;
  background: var(--pd-gold);
  margin: .6rem auto 0;
  border-radius: 2px;
}

/* -------------------------------
   8) FORMS / INPUTS
-------------------------------- */
.form-control, .form-select{
  border-radius: 14px;
  border-color: rgba(0,0,0,.15);
}
.form-control:focus, .form-select:focus{
  border-color: var(--pd-gold);
  box-shadow: 0 0 0 .25rem rgba(242,193,78,.25);
}

/* -------------------------------
   9) FOOTER
-------------------------------- */
.pd-footer{
  background: var(--pd-cream);
  border-top: 1px solid rgba(0,0,0,.08);
  padding: 48px 0;
}
.pd-footer a{ color: var(--pd-ink); }
.pd-footer a:hover{ color: var(--pd-gold); }

/* -------------------------------
   10) UTILITIES
-------------------------------- */
.pd-chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .7rem; border-radius:24px;
  background: var(--pd-cream); border:1px solid rgba(0,0,0,.08);
  font-weight:600;
}
.pd-eyebrow{
  font-size:.85rem; letter-spacing:.08em; text-transform:uppercase;
  color: var(--pd-muted);
}
.pd-shadow{ box-shadow: var(--pd-shadow); }
.rounded-2xl{ border-radius: 20px; }
.bg-cream{ background: var(--pd-cream); }

/* Make service cards stack content and keep CTA at bottom */
.pd-card{ display:flex; flex-direction:column; }
.pd-card .pd-price{ font-weight:800; font-size:1.25rem; }
.pd-card .pd-cta{ margin-top:.5rem; }
.pd-card .btn{ width:100%; }   /* full-width buttons in cards */

.pd-step-badge{
  width:34px; height:34px;
  border-radius:9999px;
  background: var(--pd-gold);
  color: var(--pd-ink);
  font-weight:800;
  display:inline-flex; align-items:center; justify-content:center;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  margin-bottom:.75rem;
}


/* -------------------------------
   11) RESPONSIVE
-------------------------------- */
@media (max-width: 991.98px){
  .navbar .btn{ margin-top:.5rem; }
  .card .btn{ width: 100%; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }

  
}
/* --- Fix carousel arrow overlap --- */
#projectCarousel .carousel-control-prev,
#projectCarousel .carousel-control-next {
  width: 3rem;
  height: 3rem;
  background: #fff;
  border: 2px solid var(--pd-ink);
  border-radius: 9999px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* Move them outside the content area */
#projectCarousel .carousel-control-prev {
  left: -2.5rem;   /* move left arrow out */
}
#projectCarousel .carousel-control-next {
  right: -2.5rem;  /* move right arrow out */
}

/* Add a gold hover accent */
#projectCarousel .carousel-control-prev:hover,
#projectCarousel .carousel-control-next:hover {
  border-color: var(--pd-gold);
  background: var(--pd-gold);
  color: var(--pd-ink);
}

/* For smaller screens, pull them back in so they don't clip */
@media (max-width: 991.98px){
  #projectCarousel .carousel-control-prev { left: 0.25rem; }
  #projectCarousel .carousel-control-next { right: 0.25rem; }
}
#projectCarousel .carousel-item .row {
  align-items: center;
}