/* =============================================================
   PHYB — custom stylesheet. No framework dependency (Bootstrap
   was dropped entirely). Everything below is hand-written: a
   small grid/utility layer plus components, so templates that
   used to lean on Bootstrap classes keep working unchanged.
   ============================================================= */

/* --- Theme tokens ------------------------------------------------ */
:root,
[data-theme="dark"] {
  --bg: #000000;
  --bg-elevated: #0a0a0a;
  --bg-header: #00bfff;
  --text: #f5f5f5;
  --muted: #cfcfcf;
  --border: #1f1f1f;
  --brand: #00bfff;
  --brand-contrast: #000000;
  --input-bg: #0a0a0a;
  --whatsapp-green: #25D366;
  --alert-success-bg: #123524; --alert-success-text: #7be2a8; --alert-success-border: #1d5c3d;
  --alert-info-bg: #0e2f3d;    --alert-info-text: #7fd6f2;    --alert-info-border: #1a5468;
  --alert-danger-bg: #3d1414;  --alert-danger-text: #ff9b9b;  --alert-danger-border: #6b2323;
  --alert-secondary-bg: #1a1a1a; --alert-secondary-text: #cfcfcf; --alert-secondary-border: #333;
}

[data-theme="light"] {
  --bg: #ffffff;
  --bg-elevated: #f4f6f7;
  --bg-header: #00bfff;
  --text: #111111;
  --muted: #4d4d4d;
  --border: #e2e5e7;
  --brand: #0090c2;
  --brand-contrast: #000000;
  --input-bg: #ffffff;
  --whatsapp-green: #1fae55;
  --alert-success-bg: #e7f7ee; --alert-success-text: #146c3c; --alert-success-border: #b9e6cd;
  --alert-info-bg: #e8f6fb;    --alert-info-text: #0c5a75;    --alert-info-border: #bfe6f2;
  --alert-danger-bg: #fdecec;  --alert-danger-text: #9c1f1f;  --alert-danger-border: #f3c3c3;
  --alert-secondary-bg: #eef0f1; --alert-secondary-text: #333; --alert-secondary-border: #dcdfe1;
}

* { box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  margin: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }

h1, h2, h3, h4, h5, h6 { line-height: 1.25; margin: 0 0 0.75rem; }

/* --- Layout: container + simple flex grid ------------------------ */
.container { max-width: 960px; margin: 0 auto; padding: 0 1rem; }

.row { display: flex; flex-wrap: wrap; margin: 0 -0.75rem; }
.row.g-4 { row-gap: 1.5rem; }
[class^="col-"] { padding: 0 0.75rem; flex: 0 0 100%; max-width: 100%; }

@media (min-width: 768px) {
  .col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  .col-md-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
}
@media (min-width: 992px) {
  .col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
}

/* --- Utilities ----------------------------------------------------
   Small, deliberately limited set — only what templates actually use.
   Add to this list rather than reaching for a framework. */
.d-flex { display: flex; }
.flex-column { flex-direction: column; }
.flex-grow-1 { flex-grow: 1; }
.min-vh-100 { min-height: 100vh; }
.w-100 { width: 100%; }
.text-center { text-align: center; }
.text-start { text-align: left; }
.text-decoration-none { text-decoration: none; }
.text-reset { color: inherit; }
.fw-bold { font-weight: 700; }
.align-items-center { align-items: center; }
.rounded { border-radius: 0.5rem; }
.img-fluid { max-width: 100%; height: auto; display: block; }
.ms-auto { margin-left: auto; }
.small { font-size: 0.875rem; }
.lead { font-size: 1.15rem; font-weight: 400; }
.text-muted { color: var(--muted); }

.display-5 { font-size: 2.4rem; font-weight: 800; }
.display-6 { font-size: 1.9rem; font-weight: 800; }
.h3 { font-size: 1.5rem; font-weight: 700; }
.h4 { font-size: 1.25rem; font-weight: 700; }
.h5 { font-size: 1.1rem; font-weight: 700; }
.h6 { font-size: 1rem; font-weight: 700; }
.fs-6 { font-size: 1rem; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 3rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }
.my-4 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.py-4 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-5 { padding-top: 3rem; padding-bottom: 3rem; }

@media (min-width: 768px) {
  .mt-md-0 { margin-top: 0; }
}

/* --- Buttons -------------------------------------------------------*/
.btn {
  display: inline-block;
  padding: 0.55rem 1.1rem;
  border-radius: 0.5rem;
  font-weight: 600;
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
  text-decoration: none !important;
  font-size: 1rem;
  background: var(--bg-elevated);
  color: var(--text);
}
.btn-lg { padding: 0.85rem 1.6rem; font-size: 1.1rem; }
.btn-outline-light { background: transparent; color: var(--text); border-color: var(--border); }
.btn-outline-light:hover { border-color: var(--brand); }

.btn-brand {
  background: #000;
  color: #fff !important;
  border: 2px solid #000;
  font-weight: 800;
  border-radius: 999px;
}
[data-theme="light"] .btn-brand { background: #000; border-color: #000; }
.btn-brand:hover { background: #1a1a1a; color: #fff; }

/* --- Alerts ----------------------------------------------------- */
.alert { padding: 0.85rem 1rem; border-radius: 0.5rem; margin-bottom: 1rem; border: 1px solid transparent; }
.alert-success { background: var(--alert-success-bg); color: var(--alert-success-text); border-color: var(--alert-success-border); }
.alert-info    { background: var(--alert-info-bg);    color: var(--alert-info-text);    border-color: var(--alert-info-border); }
.alert-danger  { background: var(--alert-danger-bg);  color: var(--alert-danger-text);  border-color: var(--alert-danger-border); }
.alert-secondary { background: var(--alert-secondary-bg); color: var(--alert-secondary-text); border-color: var(--alert-secondary-border); }

/* --- Badges ------------------------------------------------------ */
.badge { display: inline-block; padding: 0.3em 0.65em; font-size: 0.75rem; font-weight: 700; border-radius: 0.375rem; }
.text-bg-dark { background: #111; color: #fff; }
[data-theme="light"] .text-bg-dark { background: #222; color: #fff; }

/* --- Forms (crispy-forms output uses these class names) ---------- */
.form-control, .form-select {
  background: var(--input-bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 0.4rem;
  padding: 0.55rem 0.75rem;
  width: 100%;
  font-size: 1rem;
}
.form-control:focus, .form-select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(0, 191, 255, 0.25);
}
label { color: var(--text); font-weight: 600; display: inline-block; margin-bottom: 0.3rem; }

/* --- Header / nav -------------------------------------------------
   Written in plain CSS with no dependency on any JS framework — the
   open/close behaviour is handled by static/js/main.js toggling a
   single "is-open" class. */
.site-header {
  background: var(--bg-header);
  position: sticky;
  top: 0;
  z-index: 1030;
}
.site-header .container {
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.navbar { width: 100%; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.navbar-brand { font-weight: 900; letter-spacing: 2px; font-size: 1.6rem; color: #000; padding: 0.5rem 0; }

.navbar-toggler {
  border: 2px solid #000;
  border-radius: 0.375rem;
  padding: 0.4rem 0.55rem;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
}
.navbar-toggler .bar { display: block; width: 20px; height: 2px; background: #000; }

.theme-toggle {
  border: 2px solid #000;
  border-radius: 999px;
  width: 38px;
  height: 38px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #000;
}
.theme-toggle svg { width: 18px; height: 18px; }
/* Dark mode → show a sun (tap to go light). Light mode → show a moon. */
[data-theme="dark"] .theme-toggle .icon-moon,
[data-theme="light"] .theme-toggle .icon-sun {
  display: none;
}

.nav-controls { display: flex; align-items: center; gap: 0.4rem; }

.navbar-collapse { background: var(--bg-header); width: 100%; display: none; }
.navbar-collapse.is-open { display: block; }

.navbar-nav { list-style: none; margin: 0; padding: 0.5rem 0 1rem; display: flex; flex-direction: column; }
.nav-item { margin: 0.4rem 0; }
.nav-link { color: #000; font-weight: 700; padding: 0.4rem 0; display: inline-block; }
.nav-cta { margin-top: 0.9rem; padding-top: 0.6rem; border-top: 1px solid rgba(0, 0, 0, 0.2); }

@media (min-width: 768px) {
  .navbar-collapse { display: flex !important; width: auto; margin-left: auto; background: transparent; }
  .navbar-nav { flex-direction: row; align-items: center; padding: 0; }
  .nav-item { margin: 0 0 0 1.25rem; }
  .nav-cta { margin-top: 0; padding-top: 0; border-top: none; margin-left: 1.25rem; }
  .navbar-toggler { display: none; }
}

/* --- Footer --------------------------------------------------------*/
.site-footer { background: var(--bg-elevated); border-top: 1px solid var(--border); color: var(--muted); }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; margin: 0.5rem 0; }
.footer-link { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--text); font-weight: 600; font-size: 0.9rem; }
.footer-link:hover { color: var(--brand); text-decoration: none; }
.footer-address, .footer-copy { color: var(--muted); }

/* --- Floating WhatsApp button --------------------------------------*/
.whatsapp-fab {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  width: 56px;
  height: 56px;
  background: var(--whatsapp-green);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  z-index: 1040;
}
.whatsapp-fab:hover { background: #1ebe5b; text-decoration: none; }

/* --- Cards used across portfolio/blog/pricing ----------------------*/
.phyb-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 1rem; padding: 1.5rem; height: 100%; }
.phyb-card:hover { border-color: var(--brand); }
.phyb-price { font-size: 2.5rem; font-weight: 900; color: var(--brand); }

.h-100 { height: 100%; }

.phyb-feature-list {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
  font-size: 0.9rem;
  color: var(--text);
}
.phyb-feature-list li {
  padding: 0.3rem 0 0.3rem 1.5rem;
  position: relative;
  border-bottom: 1px solid var(--border);
}
.phyb-feature-list li:last-child { border-bottom: none; }
.phyb-feature-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--brand);
  font-weight: 700;
}

.badge-popular {
  position: absolute;
  top: -0.6rem;
  right: 1rem;
  background: var(--brand);
  color: #000;
  font-weight: 800;
  font-size: 0.7rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.note-box {
  background: var(--bg-elevated);
  border-left: 3px solid var(--brand);
  border-radius: 0.5rem;
  padding: 1.1rem 1.3rem;
}

.why-box {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.75rem;
}

/* --- Highlighted "most popular" package card --- */
.phyb-card-highlight {
  border: 2px solid var(--brand);
  position: relative;
}

/* --- Signpost banner on the pricing page: visually distinct from the
   three tiered package cards since it's a different kind of product --- */
.signpost-banner {
  border: 1px dashed var(--brand);
  background: var(--bg-elevated);
}

/* --- Feature list: unavailable items (e.g. "Blog / CMS" on Basic) --- */
.phyb-feature-list li.feature-no {
  color: var(--muted);
  text-decoration: line-through;
}
.phyb-feature-list li.feature-no::before {
  content: "✕";
  color: var(--muted);
}

/* --- Comparison table (no framework — hand-rolled) --- */
.phyb-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
}
.phyb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.phyb-table th, .phyb-table td {
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}
.phyb-table thead th {
  background: var(--bg-elevated);
  font-weight: 700;
}
.phyb-table tbody tr:last-child td {
  border-bottom: none;
}
.phyb-table tbody tr:hover {
  background: var(--bg-elevated);
}

/* --- Mobile-first tweaks -------------------------------------------*/
@media (max-width: 767px) {
  .phyb-price { font-size: 2rem; }
  .whatsapp-fab { bottom: 1.4rem; }
}