/*
 * smartremote-custom.css
 *
 * Smart Remote theme overrides on top of Front v4.
 * Cherry-picked components from Around 3 are marked ── AROUND CHERRY-PICK ──
 *
 * Primary colour: #377dff  (inherited from Front v4)
 * Override here to match Smart Remote brand once colours are confirmed.
 */

/* ── Brand colour override (change as needed) ─────────────────────────────── */
/*
:root {
  --bs-primary:     #2563eb;
  --bs-primary-rgb: 37, 99, 235;
}
*/

/* ── Global ───────────────────────────────────────────────────────────────── */

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

.entry-content {
  line-height: 1.8;
  font-size: 1.0625rem;
}

.entry-content p,
.entry-content ul,
.entry-content ol {
  margin-bottom: 1.5rem;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
}

.entry-content blockquote {
  border-left: 4px solid var(--bs-primary);
  padding-left: 1.5rem;
  color: #5c5c7b;
  font-style: italic;
  margin: 2rem 0;
}

/* ── Pagination ────────────────────────────────────────────────────────────── */

.nav-links {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
}

.nav-links .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #677788;
  text-decoration: none;
  transition: background-color 0.2s;
}

.nav-links .page-numbers:hover,
.nav-links .page-numbers.current {
  background-color: var(--bs-primary);
  color: #fff;
}

/* ── Card hover lift ───────────────────────────────────────────────────────── */

.card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-hover:hover {
  transform: translateY(-3px);
  box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.1) !important;
}

/* ── Avatar initials ───────────────────────────────────────────────────────── */

.avatar-initials {
  font-size: 1rem;
  font-weight: 600;
  color: var(--bs-primary);
}

/* ── Phone wrapper centering ───────────────────────────────────────────────── */

.sr-phone-wrap {
  display: flex;
  justify-content: center;
  padding: 2rem 0 3rem;
}

/* ── Gradient hero overlay ─────────────────────────────────────────────────── */

.gradient-x-overlay-sm-primary {
  background: linear-gradient(135deg, rgba(55, 125, 255, 0.05) 0%, rgba(255, 255, 255, 0) 60%);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ── AROUND CHERRY-PICK #1 — Phone / device frame mockup ──────────────────
   Source: Around 3 dist/css/theme.css  ~line 20053
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.frame-phone {
  position: relative;
  width: 290px;
  margin: 0 15px 20px 15px;
  border: 6px solid #1e2230;
  border-radius: 36px;
}

.frame-phone::after,
.frame-phone::before {
  display: block;
  position: absolute;
  left: -35px;
  bottom: -10px;
  width: 360px;
  height: 12px;
  border-radius: 50%;
  background-color: #000;
  filter: blur(13px);
  opacity: 0.45;
  z-index: -1;
  content: "";
}

.frame-phone::before {
  left: 5px;
  width: 280px;
  filter: blur(10px);
  opacity: 0.15;
}

.frame-phone-body {
  position: relative;
  background-color: #fff;
  min-height: 580px;
  border-radius: 30px;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* Notch (top pill) */
.frame-phone-body::before {
  position: absolute;
  background-color: #1e2230;
  content: "";
  z-index: 5;
  top: -24px;
  left: 50%;
  width: 140px;
  height: 48px;
  margin-left: -70px;
  border-bottom-right-radius: 18px;
  border-bottom-left-radius: 18px;
}

/* Home indicator bar */
.frame-phone-body::after {
  position: absolute;
  background-color: #1e2230;
  content: "";
  z-index: 5;
  bottom: 10px;
  left: 50%;
  width: 90px;
  height: 4px;
  margin-left: -45px;
  border-radius: 2px;
}

.frame-phone-body img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.frame-phone-status-bar {
  display: flex;
  position: absolute;
  justify-content: space-between;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0.5rem 1.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  z-index: 10;
  color: #fff;
}

/* Swiper inside phone frame */
.sr-phone-swiper {
  width: 100%;
  height: 580px;
}

.sr-phone-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ── AROUND CHERRY-PICK #2 — App Store / Google Play buttons ──────────────
   Source: Around 3 dist/css/theme.css  ~line 16418
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.btn-market {
  display: inline-block;
  padding: 0.45rem 1.125rem 0.45rem 3.25rem;
  border-radius: 0.875rem;
  background-position: center left 0.875rem;
  background-color: #1e2230;
  background-size: 1.5rem 1.5rem;
  background-repeat: no-repeat;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.btn-market:hover {
  text-decoration: none;
  opacity: 0.88;
}

.btn-market .btn-market-title {
  display: block;
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
}

.btn-market .btn-market-subtitle {
  display: block;
  margin-bottom: -0.125rem;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Light variant — used on coloured backgrounds */
.btn-market.btn-market-light {
  background-color: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.btn-market.btn-market-light:hover {
  background-color: rgba(255, 255, 255, 0.25);
  opacity: 1;
}

/* Apple icon (embedded SVG — Apple logo white) */
.btn-apple {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 814 1000'%3E%3Cpath fill='%23fff' d='M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76 0-103.7 40.8-165.9 40.8s-105-42.4-147.8-110.2c-49.4-76.8-86.7-197.7-86.7-312.2 0-192.6 125.4-294.3 248.8-294.3 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z'/%3E%3C/svg%3E");
}

/* Google Play icon (embedded SVG — Play triangle, multicolour simplified to white) */
.btn-google {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M325.3 234.3L104.6 13l280.8 161.2-60.1 60.1zM47 0C34 6.8 25.3 19.2 25.3 35.3v441.3c0 16.1 8.7 28.5 21.7 35.3l2.7 1.5 246.9-246.9v-1L47 0zm425.6 225.6l-58.9-34.1-65.7 64.5 65.7 64.5 60.1-34.1c17.1-9.9 17.1-26.8-.2-36.8zm-230.1 109l-178 246.9 246-140.9-68-106z'/%3E%3C/svg%3E");
}

/* Windows icon (optional) */
.btn-windows {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23fff' d='M0 93.7l183.6-25.3v177H0V93.7zm0 324.6l183.6 25.3V271.3H0v146.9zm203.8 28L448 480V271.3H203.8v174.9zm0-352.6v175H448V32L203.8 93.7z'/%3E%3C/svg%3E");
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ── Back to top button (Front v4 go-to style) ────────────────────────────
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.go-to {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.625rem;
  height: 2.625rem;
  background-color: var(--bs-primary);
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 0.375rem 0.9375rem rgba(55, 125, 255, 0.35);
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
  z-index: 99;
}

.go-to:hover {
  color: #fff;
  transform: translateY(-2px);
}

/* ── Hero banner (full-width top photo) ───────────────────────────────────── */

.smartremote-hero-banner {
  width: 100%;
  overflow: hidden;
  max-height: 65vh;
  min-height: 320px;
}

.smartremote-hero-banner__img {
  width: 100%;
  height: 65vh;
  min-height: 320px;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ── Badge contrast fixes ─────────────────────────────────────────────────── */

/* text-warning (#f5ca99) is too light against bg-soft-warning — use a darker amber */
.badge.bg-soft-warning,
.card.bg-soft-warning .text-warning,
.bg-soft-warning .text-warning {
  color: #a06000 !important;
}

/* text-danger (#ed4c78) is too light against bg-soft-danger — use a darker red */
.badge.bg-soft-danger,
.card.bg-soft-danger .text-danger {
  color: #9b1235 !important;
}

/* ── Responsive tweaks ────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .frame-phone {
    width: 240px;
  }
  .frame-phone-body,
  .sr-phone-swiper {
    min-height: 480px;
    height: 480px;
  }
}