/*
 * Custom Color Theme: Teal (#0d7377) & Magenta-Pink (#c0395b)
 * Drop this file AFTER your existing color CSS (e.g. yellow.css)
 * <link rel="stylesheet" href="./assets/css/colors/custom-theme.css">
 */

/* =========================================================
   1. CSS Custom Properties (tokens)
   ========================================================= */
:root {
  --color-primary:        #0d7377;
  --color-primary-dark:   #095a5d;
  --color-primary-light:  #11999e;
  --color-primary-pale:   #d4f0f1;

  --color-accent:         #c0395b;
  --color-accent-dark:    #9a2c48;
  --color-accent-light:   #d4637f;
  --color-accent-pale:    #fce8ed;

  --color-text-on-primary: #ffffff;
  --color-text-on-accent:  #ffffff;
}

/* =========================================================
   2. Primary colour – buttons, links, icons, badges
   ========================================================= */

/* --- Solid primary button --- */
.btn-primary {
  background-color: var(--color-primary) !important;
  border-color:     var(--color-primary) !important;
  color:            var(--color-text-on-primary) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--color-primary-dark) !important;
  border-color:     var(--color-primary-dark) !important;
}

/* --- Outline primary button --- */
.btn-outline-primary {
  border-color: var(--color-primary) !important;
  color:        var(--color-primary) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--color-primary) !important;
  color:            var(--color-text-on-primary) !important;
}

/* --- Soft / pale primary button --- */
.btn-soft-primary {
  background-color: var(--color-primary-pale) !important;
  color:            var(--color-primary) !important;
  border-color:     transparent !important;
}
.btn-soft-primary:hover {
  background-color: var(--color-primary) !important;
  color:            var(--color-text-on-primary) !important;
}

/* --- Text & icon accents --- */
.text-primary            { color: var(--color-primary)      !important; }
.text-primary-darker     { color: var(--color-primary-dark) !important; }

/* --- Background --- */
.bg-primary              { background-color: var(--color-primary)      !important; }
.bg-soft-primary         { background-color: var(--color-primary-pale) !important; }
.bg-gradient-primary {
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-dark)) !important;
}

/* --- Border --- */
.border-primary          { border-color: var(--color-primary) !important; }

/* =========================================================
   3. Accent colour – CTAs, highlights, tags
   ========================================================= */

.btn-accent,
.btn-danger {
  background-color: var(--color-accent) !important;
  border-color:     var(--color-accent) !important;
  color:            var(--color-text-on-accent) !important;
}
.btn-accent:hover,
.btn-danger:hover {
  background-color: var(--color-accent-dark) !important;
  border-color:     var(--color-accent-dark) !important;
}

.text-accent             { color: var(--color-accent)      !important; }
.bg-accent               { background-color: var(--color-accent)      !important; }
.bg-soft-accent          { background-color: var(--color-accent-pale) !important; }
.border-accent           { border-color: var(--color-accent) !important; }

/* =========================================================
   4. Navigation
   ========================================================= */

/* Active nav link underline / indicator */
.navbar .nav-item .nav-link.active,
.navbar .nav-item .nav-link:hover {
  color: var(--color-primary) !important;
}

/* Hamburger icon */
.hamburger span,
.hamburger span::before,
.hamburger span::after {
  background-color: var(--color-primary) !important;
}

/* Offcanvas header background */
.offcanvas.offcanvas-nav .offcanvas-header,
.offcanvas.text-inverse {
  background-color: var(--color-primary-dark) !important;
}

/* Active filter pill */
.isotope-filter .filter-item.active,
.isotope-filter .filter-item:hover {
  background-color: var(--color-primary) !important;
  color: #fff !important;
  border-color: var(--color-primary) !important;
}

/* =========================================================
   5. Hero / section wrappers
   ========================================================= */

/* Full-bleed teal hero overlay */
.wrapper.bg-primary,
section.bg-primary > .wrapper {
  background-color: var(--color-primary) !important;
}

/* Gradient hero strip */
.hero-gradient {
  background: linear-gradient(
    135deg,
    var(--color-primary-dark) 0%,
    var(--color-primary) 50%,
    var(--color-accent)  100%
  ) !important;
}

/* bg-overlay tint – the translucent dark layer over image wrappers */
.bg-overlay::after {
  background: linear-gradient(
    135deg,
    rgba(13, 115, 119, 0.70) 0%,
    rgba(192, 57, 91, 0.60)  100%
  ) !important;
}

/* =========================================================
   6. Cards & highlights
   ========================================================= */

/* Circle icon buttons (step numbers) */
.btn-circle.btn-primary {
  background-color: var(--color-primary) !important;
  border-color:     var(--color-primary) !important;
}

/* Card hover border flash */
.card:hover {
  border-color: var(--color-primary-light) !important;
  transition: border-color .25s ease;
}

/* Figcaption overlay on portfolio cards */
.overlay::after {
  background: linear-gradient(
    160deg,
    rgba(13, 115, 119, 0.75),
    rgba(192, 57, 91,  0.65)
  ) !important;
}

/* =========================================================
   7. Footer
   ========================================================= */

footer .text-primary,
footer .icon.text-primary {
  color: var(--color-primary-light) !important;
}

footer a:hover {
  color: var(--color-accent-light) !important;
}

/* =========================================================
   8. Form elements
   ========================================================= */

.form-control:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 .2rem rgba(13, 115, 119, .25) !important;
}

/* =========================================================
   9. Progress / scroll-to-top ring
   ========================================================= */

.progress-wrap svg.progress-circle path {
  stroke: var(--color-primary) !important;
}

.progress-wrap::after {
  color: var(--color-primary) !important;
}

/* =========================================================
   10. Utility – gradient text (optional flair)
   ========================================================= */

.text-gradient-primary {
  background: linear-gradient(
    90deg, var(--color-primary), var(--color-accent)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* =========================================================
   11. Social icons hover
   ========================================================= */

.nav.social a:hover {
  color: var(--color-accent-light) !important;
}

/* =========================================================
   12. Star ratings
   ========================================================= */

.ratings::before {
  color: var(--color-accent) !important;
}