/* Heartstead shared theme styles */
:root{ --teal:#86C2A6; --pink:#F6C2CB; --coral:#FF7A6E; --lav:#EDE2F6; --ink:#2B2B2F; }

/* Bootstrap theme color overrides to replace default blue with our teal */
:root{
  --bs-primary: var(--teal);
  --bs-primary-rgb: 134,194,166;
  --bs-link-color: var(--teal);
  --bs-link-hover-color: #6ab699;
  --bs-nav-pills-link-active-bg: var(--teal);
  --bs-nav-pills-link-active-color: #fff;
  --bs-progress-bar-bg: var(--teal);
  --bs-focus-ring-color: rgba(134,194,166,.35);
}

/* Ensure common components pick up the brand color */
.btn-primary{ background-color: var(--teal); border-color: var(--teal); }
.btn-primary:hover{ background-color:#76b89a; border-color:#76b89a; }
.nav-pills .nav-link.active, .nav-pills .show>.nav-link{ background-color: var(--teal); color:#fff; }
.progress .progress-bar{ background-color: var(--teal); }

/* Softer focus ring matching theme */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus, .form-select:focus{ box-shadow: 0 0 0 0.1rem rgba(255,255,255,.9), 0 0 0 0.25rem rgba(134,194,166,.35); }

html, body { color: var(--ink); }
body { font-family: Poppins, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial; background: linear-gradient(180deg, #fff 0%, #fff7f9 40%, #f6fafe 100%); }
.font-serif { font-family: Lora, Georgia, serif; }

/* Components */
.chip{display:inline-flex;align-items:center;gap:.4rem;border:1px solid rgba(26,179,148,.18);background:rgba(26,179,148,.10);color:#0f766e;border-radius:999px;padding:.25rem .65rem;font-size:.875rem}
.btn-romantic{background:var(--pink);color:#fff;border:none;border-radius:999px;padding:.68rem 1.05rem;font-weight:700;box-shadow:0 8px 24px rgba(26,179,148,.10)}
.btn-romantic:hover{background:var(--teal);color:#fff;box-shadow:0 12px 30px rgba(26,179,148,.25)}
.btn-outline-teal{border:1.5px solid var(--teal);color:var(--teal);border-radius:999px;padding:.68rem 1.05rem;background:transparent;font-weight:700}
.btn-outline-teal:hover{background:rgba(26,179,148,.08);color:var(--teal)}
.badge-soft{ background: rgba(134,194,166,.12); color: var(--teal); border:1px solid rgba(134,194,166,.30); }
.card-romance{border:1px solid rgba(0,0,0,.06);background:#fff;border-radius:1.25rem;box-shadow:0 8px 32px rgba(17,24,39,.06)}
.photo-box{position:relative;border-radius:1rem;overflow:hidden;background:radial-gradient(120px 120px at 50% 40%, rgba(246,194,203,.55), rgba(134,194,166,.35)), var(--lav);box-shadow: inset 0 0 0 1px rgba(0,0,0,.04)}
.feature-img{ overflow:hidden; border-radius:1rem; box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); background:var(--lav); }
.shape-pink{position:absolute;width:18rem;height:18rem;border-radius:50%;background:var(--pink);filter: blur(60px);opacity:.22;z-index:0}
.shape-teal{position:absolute;width:20rem;height:20rem;border-radius:50%;background:var(--teal);filter: blur(70px);opacity:.18;z-index:0}
.lead-soft{ color:#495057; }
.romance-link{ color:var(--teal); text-decoration:none; }
.romance-link:hover{ text-decoration:underline; }

/* Theme link colors (override Bootstrap blue) */
a{ color: var(--ink); text-decoration: none; }
a:hover{ color: var(--teal); text-decoration: underline; }


/* Navbar */
header.navbar-sticky{ position: sticky; top:0; z-index:1030; backdrop-filter: saturate(180%) blur(8px); background: rgba(255,255,255,.85); border-bottom:1px solid #ffe3ea; }
.navbar .nav-link{ color: var(--ink); }
.navbar .nav-link.active{ color: var(--teal); font-weight:600; }
.navbar-toggler{ border-color: rgba(0,0,0,.15); }

/* Utility for checklists and quotes used in articles */
.check-list li{ margin-bottom:.5rem; }
.quote{ font-family:Lora, Georgia, serif; font-size:1.25rem; color:#5c636a; }

/* Shared callout used across pages */
.tip{ background:linear-gradient(135deg, rgba(246,194,203,.22), rgba(134,194,166,.18)); border:1px solid rgba(134,194,166,.35); }

/* Guidelines page helpers (can be reused elsewhere) */
.guideline-icon { width:44px; height:44px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; color:var(--teal); background:rgba(134,194,166,.15); border:1px solid rgba(134,194,166,.30); }
.soft-hr{ border:0; height:1px; background:linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.08), rgba(0,0,0,0)); }