/* =========================
   API01 — Site CSS (Light + Rose Quartz)
   ========================= */

/* --- Palette (Rose Quartz) --- */
:root{
  --nav-h: 56px;
  --sidebar-w: 300px;

  /* Brand */
  --api01-rose:   #D47A98; /* primary accent */
  --api01-rose-2: #F3A0B8; /* hover / lighter */
  --api01-rose-3: #F9B8C7; /* soft tint */
  --api01-rose-1: #FFD7E0; /* very light tint */
  --api01-rose-rgb: 212,122,152;

  /* Bootstrap CSS variables override (BS 5.3 uses runtime vars) */
  --bs-primary: var(--api01-rose);
  --bs-primary-rgb: var(--api01-rose-rgb);
  --bs-link-color: var(--api01-rose);
  --bs-link-hover-color: var(--api01-rose-2);
  --bs-border-color: rgba(var(--api01-rose-rgb), .35);
  --bs-focus-ring-color: rgba(var(--api01-rose-rgb), .25);
}

/* ---------------------------
   Layout tokens (unchanged)
--------------------------- */
#main{ padding-top: var(--nav-h); }
@media (min-width:768px){
  #app{ display:flex; align-items:stretch; }
  #main{ flex:1 1 auto; min-width:0; }
}

.offcanvas-backdrop{
  top: var(--nav-h);
  height: calc(100dvh - var(--nav-h));
}

.brand-icon{ width:28px; height:28px; line-height:1; display:inline-flex; align-items:center; justify-content:center; }
.brand-icon svg{ width:24px; height:24px; display:block; }
.spin{ animation: api01-spin 6s linear infinite; transform-origin:50% 50%; }
@keyframes api01-spin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .spin{ animation:none; } }

/* ---------------------------
   Glass surfaces (light)
--------------------------- */
.glass{
  background: rgba(255, 47, 120, 0.051);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
  border: 1px solid rgba(142, 0, 73, 0.822);
}

.modal-backdrop.show {
  background-color: rgba(255, 255, 255, 0.15) !important; /* soft rose tone */
  backdrop-filter: blur(3px) saturate(120%);
  -webkit-backdrop-filter: blur(3px) saturate(120%);
  opacity: 1 !important;
}


/* ===============================
   🌸 Toolbar / Navbar (Rose)
   =============================== */
#siteNavbar.glass {
  background: rgba(255, 0, 85, 0.092);
  backdrop-filter: blur(4px) saturate(120%);
  -webkit-backdrop-filter: blur(4px) saturate(120%);
  border-bottom: 1px solid rgba(var(--api01-rose-rgb), .20);
}

/* Text + icons color */
#siteNavbar,
#siteNavbar .navbar-brand,
#siteNavbar .nav-link,
#siteNavbar .brand-icon svg,
#siteNavbar .bi {
  color: var(--api01-rose) !important;
  fill: var(--api01-rose) !important;
}

/* Hover / active */
#siteNavbar .nav-link:hover,
#siteNavbar .nav-link.active,
#siteNavbar .nav-item.show > .nav-link {
  color: var(--api01-rose-2) !important;
}

/* Optional gradient site title */
#siteNavbar .navbar-brand span,
#siteNavbar .site-title {
  background: linear-gradient(90deg, var(--api01-rose-1), var(--api01-rose-3), var(--api01-rose-2));
  -webkit-background-clip: text;
}

/* Search in navbar */
#siteNavbar .form-control {
  border-color: rgba(var(--api01-rose-rgb), .40);
  color: var(--api01-rose);
  background: rgba(255,255,255,.9);
}
#siteNavbar .form-control::placeholder {
  color: rgba(var(--api01-rose-rgb), .65);
}

/* Navbar buttons */
#siteNavbar .btn-outline-light,
#siteNavbar .btn-outline-dark {
  color: var(--api01-rose);
  border-color: var(--api01-rose);
}
#siteNavbar .btn-outline-light:hover,
#siteNavbar .btn-outline-dark:hover {
  background-color: var(--api01-rose-2);
  border-color: var(--api01-rose-2);
  color: #fff;
}

/* Slight icon glow */
.brand-icon svg { filter: drop-shadow(0 0 6px rgba(var(--api01-rose-rgb), .35)); }

/* ===============================
   Global text & links
   =============================== */
a, .link-primary { color: var(--api01-rose); }
a:hover, .link-primary:hover { color: var(--api01-rose-2); }
.text-primary { color: var(--api01-rose) !important; }

/* Headings accent (optional – comment out if you prefer neutral black) */
h1, h2, h3, h4, h5, h6 { color: #1b1b1b; }
.section-title, .card-title, .tool-card h5 { color: var(--api01-rose); }

/* ===============================
   Buttons (override Bootstrap)
   =============================== */
.btn-primary{
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--api01-rose);
  --bs-btn-border-color: var(--api01-rose);
  --bs-btn-hover-bg: var(--api01-rose-2);
  --bs-btn-hover-border-color: var(--api01-rose-2);
  --bs-btn-active-bg: var(--api01-rose-2);
  --bs-btn-active-border-color: var(--api01-rose-2);
  --bs-btn-disabled-bg: rgba(var(--api01-rose-rgb), .55);
  --bs-btn-disabled-border-color: rgba(var(--api01-rose-rgb), .55);
}
.btn-outline-primary{
  --bs-btn-color: var(--api01-rose);
  --bs-btn-border-color: var(--api01-rose);
  --bs-btn-hover-bg: var(--api01-rose);
  --bs-btn-hover-border-color: var(--api01-rose);
  --bs-btn-active-bg: var(--api01-rose);
  --bs-btn-active-border-color: var(--api01-rose);
}
.btn-outline-dark{
  color: var(--api01-rose);
  border-color: var(--api01-rose);
}
.btn-outline-dark:hover,
.btn-outline-dark:focus{
  background-color: var(--api01-rose-2);
  border-color: var(--api01-rose-2);
  color:#fff;
}

/* Subtle focus ring in rose */
.form-control:focus,
.form-select:focus,
.btn:focus{
  box-shadow: 0 0 0 .2rem rgba(var(--api01-rose-rgb), .25);
  border-color: rgba(var(--api01-rose-rgb), .55);
}

/* ===============================
   Search (desktop & mobile)
   =============================== */
#toolSearchRoot input.form-control {
  background:#fff;
  color:#212529;
  border:1px solid rgba(var(--api01-rose-rgb), .35);
  border-radius:.6rem;
  padding-inline:.75rem;
}
#toolSearchRoot input.form-control::placeholder { color: rgba(0,0,0,.55); }

/* Dropdown results */
#searchResults{
  background: rgba(255, 255, 255, 0.95);
  border:1px solid rgba(var(--api01-rose-rgb), .30);
  border-radius:.75rem;
  overflow:auto;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#searchResults .dropdown-item{
  color:#212529;
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  white-space:normal;
  padding:.65rem .8rem;
}
#searchResults .dropdown-item:hover,
#searchResults .dropdown-item.active{
  background: rgba(var(--api01-rose-rgb), .08);
}
#searchResults .result-title{ font-weight:600; line-height:1.2; }
#searchResults .result-desc { opacity:.85; font-size:.9rem; }

/* Mobile search sheet */
#mobileSearch.offcanvas-top{
  background: rgba(255,255,255,0.95);
  border-bottom: 1px solid rgba(var(--api01-rose-rgb), .20);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
#mobileSearchInput.form-control{
  background: rgba(0,0,0,0.04);
  color:#212529;
  border:1px solid rgba(var(--api01-rose-rgb), .35);
  border-radius:.8rem;
}
#mobileResults .list-group-item{
  color:#212529;
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  white-space:normal;
  border-color: rgba(var(--api01-rose-rgb), .25) !important;
}
#mobileResults .result-title{ font-weight:600; }
#mobileResults .result-desc { opacity:.85; font-size:.95rem; }

/* Search width */
#toolSearchRoot{ min-width:200px; max-width:400px; flex:0 0 33%; }
@media (max-width: 767.98px){
  #toolSearchRoot{ flex:1 1 auto; max-width:100%; }
  #toolSearchRoot input.form-control{ width:100%; }
}



/* ===============================
   Tool cards (Rose)
   =============================== */
.tool-card,
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.85));
  border: 1px solid rgba(var(--api01-rose-rgb), .30);
  border-radius: 1rem;
  transition: all .25s ease;
  color: inherit;
}
.tool-card .card-body{ color:#2b2b2b; }
.tool-card h5, .card .card-title{ color: var(--api01-rose); }
.tool-card p, .card .card-text{ color:#4a4a4a; }

.tool-card i,
.card i{
  color: var(--api01-rose-2);
  transition: color .25s ease, transform .2s ease;
}

.tool-card:hover,
.card:hover{
  transform: translateY(-4px);
  border-color: var(--api01-rose-2);
  box-shadow: 0 10px 24px rgba(var(--api01-rose-rgb), .18);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.90));
}
.tool-card:hover i,
.card:hover i{
  color: var(--api01-rose);
  transform: translateY(-1px);
}

/* Category badge inside cards */
.tool-card .badge,
.card .badge{
  background: var(--api01-rose-1);
  color: #7a3d53;
  border: 1px solid rgba(var(--api01-rose-rgb), .35);
}

/* ===============================
   Footer
   =============================== */
.site-footer{ border-top: 1px solid rgba(var(--api01-rose-rgb), .25); }
.footer-inner{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  padding:.5rem 1rem;
}
.footer-inner .links a{ font-size:.9rem; color: var(--api01-rose); }
.footer-inner .links a:hover{ color: var(--api01-rose-2); }
.footer-inner .copy{ font-size:.9rem; color: rgba(0,0,0,.55); }

@media (max-width:576px){
  .footer-inner{ flex-direction:column; text-align:center; gap:.5rem; }
  .footer-inner .links{ justify-content:center; }
  .footer-inner .copy{ margin-left:0 !important; }
}

/* ===============================
   Extra: unified dropdown style
   =============================== */
.search-wrapper{
  position:relative; display:flex; align-items:center; max-width:400px; transition: all .2s ease; width: min-content;
}
.search-wrapper .form-control{
  background:#fff; border:1px solid rgba(var(--api01-rose-rgb), .35);
  border-radius:12px; color:#212529; padding-right:2rem; transition: all .15s ease;
}
.search-wrapper .form-control::placeholder{ color: rgba(0,0,0,.55); }

.search-menu{
  position:absolute; top: calc(100% + .375rem); left:0; min-width:100%;
  max-height:60vh; overflow:auto; z-index:1080; display:none;
  border-radius:12px; background: rgba(255,255,255,.95);
  border:1px solid rgba(var(--api01-rose-rgb), .30);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: searchFadeIn .15s ease;
}
.search-menu.show{ display:block; }
@keyframes searchFadeIn{ from{opacity:0; transform:translateY(-3px);} to{opacity:1; transform:translateY(0);} }
.search-menu .result-item,
.search-menu .dropdown-item{
  color:#212529; display:flex; align-items:flex-start; gap:.75rem; white-space:normal;
  padding:.65rem .8rem; transition: all .15s ease;
}
.search-menu .result-item:hover,
.search-menu .dropdown-item:hover{
  background: rgba(var(--api01-rose-rgb), .08);
  color:#000; transform: translateX(2px);
}
.search-menu .result-title{ font-weight:600; line-height:1.2; }
.search-menu .result-desc{ opacity:.85; font-size:.9rem; }

@media (max-width:420px){ .brand-title{ display:none; } }

/* ============================================
   API01 — Full Rose Text Theme (No Black)
   Applies to all pages
   ============================================ */
:root {
  --rose-050: #ffe4ec;
  --rose-200: #eea0b7;
  --rose-400: #d46a88;
  --rose-600: #b94d6c;
  --rose-800: #792944;
  --rose-gradient: linear-gradient(135deg, var(--rose-200), var(--rose-400) 45%, var(--rose-600));
}

/* --- Headings (gradient) --- */
h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3,
.display-4, .display-5, .display-6 {
  background: var(--rose-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--rose-600);
  font-weight: 700;
}

/* --- Paragraphs and body text --- */
body, p, li, dt, dd {
  color: var(--rose-800);
}

/* --- Lists --- */
li::marker {
  color: var(--rose-400);
}

/* --- Muted / secondary text --- */
.text-muted,
.text-secondary,
small, .small {
  color: color-mix(in srgb, var(--rose-600) 80%, var(--rose-050));
  opacity: 1;
}

/* --- Lead paragraphs --- */
.lead {
  color: var(--rose-400);
}

/* --- Strong emphasis --- */
strong, b {
  color: var(--rose-600);
}

/* --- Links --- */
a {
  color: var(--rose-400);
  text-decoration: underline;
  transition: color .2s ease;
}
a:hover, a:focus {
  color: var(--rose-600);
}

/* --- Code / mark --- */
code, pre, mark {
  color: var(--rose-600);
  background: color-mix(in srgb, var(--rose-200) 25%, transparent);
  border-radius: .25rem;
  padding: .15em .35em;
}

/* --- Horizontal rules / dividers --- */
hr {
  border-color: color-mix(in srgb, var(--rose-400) 30%, transparent);
}