/* Custom site styles. Keep Bootstrap untouched. */

:root {
  --ph-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --ph-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --ph-admin-bg: #f6f7fb;
  --ph-card-radius: 14px;
}

.font-monospace {
  font-family: var(--ph-mono) !important;
}

.table td, .table th {
  vertical-align: middle;
}

/* Base typography */
html, body {
  font-family: var(--ph-sans);
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Portal */
.portal-bg {
  padding: 18px;
  border-radius: 18px;
  background: #f8f9fa;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.portal-inner {
  max-width: 820px;
  margin: 0 auto;
}

.portal-logo {
  height: 52px;
  max-width: 200px;
  object-fit: contain;
}

.portal-terms {
  max-height: 260px;
  overflow: auto;
}

.portal-html img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

/* Post modal */
.ph-postmodal-cover {
  max-height: 260px;
  width: 100%;
  object-fit: cover;
}


/* Post-connect promo page */
.ph-promo-page .card-img-top {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.ph-promo-hero {
  position: relative;
  min-height: 260px;
  isolation: isolate;
  --ph-hero-bg: none;
  background-color: #fff;
  /*
    - If BackgroundPath is configured, it is shown as --ph-hero-bg.
    - Otherwise, use a light, airy backdrop (no dark banner).
  */
  background-image:
    var(--ph-hero-bg),
    radial-gradient(1200px circle at 20% 20%, rgba(13,110,253,.10), transparent 55%),
    radial-gradient(900px circle at 90% 10%, rgba(25,135,84,.08), transparent 52%),
    linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,0));
  background-size: cover, auto, auto, auto;
  background-position: center, center, center, center;
}

@media (min-width: 768px) {
  .ph-promo-hero { min-height: 300px; }
}

.ph-promo-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Keep content readable even if a background image is used */
  background: rgba(255,255,255,.72);
  z-index: 0;
}

.ph-promo-hero__content {
  position: relative;
  z-index: 1;
  padding: 22px;
}

.ph-hero-title {
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 1.45rem;
  line-height: 1.15;
}

@media (min-width: 768px) {
  .ph-hero-title { font-size: 1.8rem; }
}

.ph-hero-tagline {
  max-width: 70ch;
}

.ph-logo-badge {
  width: 92px;
  height: 92px;
  border-radius: 18px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image:
    radial-gradient(circle at 30% 30%, rgba(13,110,253,.22), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(25,135,84,.18), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,255,255,.70));
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 .5rem 1.2rem rgba(0,0,0,.08);
}

.ph-promo-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /*
    Works best when the logo has a white background.
    The badge background provides non-white pixels so the white area blends in.
  */
  mix-blend-mode: multiply;
  filter: contrast(1.05) saturate(1.08) brightness(1.10);
}

@media (max-width: 576px) {
  .ph-logo-badge { width: 78px; height: 78px; padding: 8px; border-radius: 16px; }
}

.ph-promo-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.ph-nav-pill {
  display: inline-flex;
  align-items: center;
  padding: .42rem .9rem;
  border-radius: 999px;
  border: 1px solid rgba(13,110,253,.25);
  color: #0d6efd;
  text-decoration: none;
  background: rgba(13,110,253,.03);
  font-weight: 600;
  font-size: .92rem;
}

.ph-nav-pill:hover {
  background: rgba(13,110,253,.08);
  color: #0b5ed7;
}

.ph-hero-highlights .ph-highlight {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .15rem;
  height: 100%;
  text-decoration: none;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: .78rem .85rem;
  box-shadow: 0 .35rem .9rem rgba(0,0,0,.06);
}

.ph-highlight__k {
  font-size: .76rem;
  color: rgba(0,0,0,.55);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.ph-highlight__v {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0b5ed7;
  line-height: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .ph-hero-highlights .ph-highlight,
  .ph-nav-pill {
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
  }

  .ph-hero-highlights .ph-highlight:hover {
    transform: translateY(-1px);
    box-shadow: 0 .55rem 1.2rem rgba(0,0,0,.08);
  }
}

.ph-promo-page .card-body {
  background: #f6f8fb;
}

.ph-promo-page hr {
  display: none;
}

.ph-promo-page section {
  scroll-margin-top: 90px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 .35rem .9rem rgba(0,0,0,.05);
}

.ph-promo-page section + section {
  margin-top: 14px;
}

.ph-promo-page h3.h5 {
  font-weight: 800;
}

@media (max-width: 576px) {
  .ph-promo-page section { padding: 14px; border-radius: 14px; }
}
/* Admin HTML editor (Quill) */
.ph-quill {
  background: #fff;
}

.ph-quill .ql-editor {
  min-height: 140px;
}


/* Admin sidebar */
.ph-admin-shell {
  min-height: calc(100vh - 72px);
}

body.ph-admin {
  background: var(--ph-admin-bg);
}

body.ph-admin main {
  /* Give content a bit of breathing room on light bg */
}

body.ph-admin .card.ph-card,
body.ph-admin .ph-admin-sidebar {
  border-radius: var(--ph-card-radius);
}

body.ph-admin .card.ph-card {
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 .25rem .85rem rgba(0,0,0,.05);
}

.ph-admin-sidebar {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 .25rem .85rem rgba(0,0,0,.05);
  position: sticky;
  top: 1rem;
  overflow: hidden;
}

.ph-admin-sidebar__header {
  padding: 14px 14px 12px 14px;
  border-bottom: 1px solid rgba(0,0,0,.05);
  background: #f3f4f6;
}

.ph-admin-sidebar .nav-link {
  border-radius: 10px;
  padding: .55rem .75rem;
  color: #212529;
}

.ph-admin-sidebar .nav-link:hover {
  background: rgba(13,110,253,.07);
}

.ph-admin-sidebar .nav-link.active {
  background: rgba(13,110,253,.12);
  color: #0b5ed7;
  font-weight: 600;
}

.ph-admin-sidebar__section {
  margin: 10px 10px 4px 10px;
  padding: 6px 8px;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(33,37,41,.55);
}

/* Admin tables */
body.ph-admin .table thead th {
  font-weight: 600;
}

body.ph-admin .badge {
  font-weight: 600;
}

/* Brand logo in navbar */
.ph-brand-logo {
  height: 30px;
  width: auto;
  object-fit: contain;
}

/* Global rounded UI */
.btn {
  border-radius: 12px;
}
.btn.btn-sm {
  border-radius: 10px;
}
.form-control,
.form-select,
.input-group-text,
.dropdown-menu,
.alert,
.modal-content {
  border-radius: 12px;
}

/* Slightly more polished button feel */
.btn-primary {
  box-shadow: 0 .25rem .75rem rgba(13, 110, 253, .12);
}
.btn-outline-secondary {
  border-color: rgba(33,37,41,.25);
}

/* Table containers */
body.ph-admin .table {
  background: #fff;
}


/* ===== Unified blue outline UI (requested) ===== */
:root {
  --ph-primary: #0d6efd;
  --ph-primary-rgb: 13,110,253;
}

/* Buttons: default = black text + blue border */
.btn:not(.btn-link) {
  color: #111 !important;
  background-color: transparent !important;
  border-color: var(--ph-primary) !important;
}

/* Hover/focus */
.btn:not(.btn-link):hover,
.btn:not(.btn-link):focus {
  color: #111 !important;
  border-color: var(--ph-primary) !important;
  background-color: rgba(var(--ph-primary-rgb), .07) !important;
}

/* Selected/primary state = blue bg + white text */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn.active,
.btn:active,
.btn-check:checked + .btn,
.btn-check:active + .btn,
.show > .btn.dropdown-toggle {
  background-color: var(--ph-primary) !important;
  border-color: var(--ph-primary) !important;
  color: #fff !important;
}

/* Keep link buttons as links */
.btn-link {
  border-color: transparent !important;
  background-color: transparent !important;
  padding-left: 0;
  padding-right: 0;
}

/* Pagination */
.page-link {
  color: #111 !important;
  border-color: var(--ph-primary) !important;
}
.page-link:hover,
.page-link:focus {
  background-color: rgba(var(--ph-primary-rgb), .07) !important;
  border-color: var(--ph-primary) !important;
  color: #111 !important;
}
.page-item.active .page-link {
  background-color: var(--ph-primary) !important;
  border-color: var(--ph-primary) !important;
  color: #fff !important;
}

/* Form controls */
.form-control,
.form-select,
.input-group-text {
  border-color: rgba(var(--ph-primary-rgb), .65) !important;
  color: #111 !important;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--ph-primary) !important;
  box-shadow: 0 0 0 .2rem rgba(var(--ph-primary-rgb), .15) !important;
}

/* Sidebar nav: black text + blue border, selected = blue */
body.ph-admin .ph-sidebar .nav-link {
  border: 1px solid rgba(var(--ph-primary-rgb), .55);
  border-radius: 12px;
  margin: 0 0 .35rem 0;
  color: #111 !important;
  background: transparent;
}
body.ph-admin .ph-sidebar .nav-link:hover {
  background: rgba(var(--ph-primary-rgb), .07);
  border-color: var(--ph-primary);
}
body.ph-admin .ph-sidebar .nav-link.active {
  background: var(--ph-primary);
  border-color: var(--ph-primary);
  color: #fff !important;
}
body.ph-admin .ph-sidebar .nav-link.disabled {
  opacity: .55;
  border-color: rgba(var(--ph-primary-rgb), .25);
  background: transparent;
}

/* Nav pills / tabs */
.nav-pills .nav-link {
  color: #111 !important;
  border: 1px solid rgba(var(--ph-primary-rgb), .55);
}
.nav-pills .nav-link.active,
.nav-tabs .nav-link.active {
  background: var(--ph-primary) !important;
  border-color: var(--ph-primary) !important;
  color: #fff !important;
}



/* Hero content: if view uses Bootstrap text-white/buttons, force readable on white banner */
.ph-promo-hero .text-white { color: #0b2239 !important; }
.ph-promo-hero .text-white-50 { color: rgba(11,34,57,.65) !important; }
.ph-promo-hero .btn-outline-light {
  color: #0b2239;
  border-color: rgba(11,34,57,.35);
}
.ph-promo-hero .btn-outline-light:hover {
  background: rgba(11,34,57,.08);
  border-color: rgba(11,34,57,.45);
}


/* Promo slider */
.ph-slider {
  overflow: hidden;
}
.ph-slider__track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.ph-slider__track::-webkit-scrollbar { height: 8px; }
.ph-slider__track::-webkit-scrollbar-thumb { border-radius: 8px; }
.ph-slide {
  flex: 0 0 78%;
  scroll-snap-align: start;
}
@media (min-width: 576px) {
  .ph-slide { flex-basis: 45%; }
}
@media (min-width: 992px) {
  .ph-slide { flex-basis: 30%; }
}
.ph-news-card .card-img-top {
  height: 160px;
  object-fit: cover;
}

/* Promo slider: mobile full-width (no shrink due to track padding) */
@media (max-width: 575.98px) {
    .ph-slider__track {
        gap: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        scroll-padding-left: 0 !important;
        scroll-padding-right: 0 !important;
    }

    .ph-slide {
        flex: 0 0 100% !important; /* override current 78% */
        width: 100% !important;
        max-width: 100% !important;
    }
}