/* =========================================================
   AConfession Home Feature UI
   Path: public_html/assets/css/home.css
   Scope: home page only. Values are controlled by acf_settings_home.
   ========================================================= */
.acf-main-page.is-home-expanded {
  display: grid;
  gap: var(--home-page-gap, 12px);
  margin-top: var(--home-page-margin-top, 0);
  direction: rtl;
  text-align: right;
}

.acf-main-page.is-home-expanded .acf-main-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--home-hero-border-color, rgba(255,255,255,.105));
  border-radius: var(--home-hero-radius, 26px);
  padding: var(--home-hero-padding, 16px 14px);
  margin: var(--home-hero-margin, 8px 0 2px);
  background: var(--home-hero-background);
  box-shadow: var(--home-hero-shadow, 0 14px 42px rgba(0,0,0,.28));
}

.acf-main-page.is-home-expanded .acf-main-hero .eyebrow {
  margin: 0 0 5px;
  color: var(--home-eyebrow-color, #99f6e4);
  font-size: var(--home-eyebrow-size, 11px);
  font-weight: var(--home-eyebrow-weight, 950);
}

.acf-main-page.is-home-expanded .acf-main-hero h1 {
  margin: 0 0 8px;
  font-size: var(--home-title-size, 23px);
  line-height: var(--home-title-line-height, 1.28);
  font-weight: var(--home-title-weight, 950);
  letter-spacing: -.35px;
  color: var(--home-title-color, #fff);
}

.acf-main-page.is-home-expanded .acf-main-hero p {
  margin: 0;
  color: var(--home-description-color, #aab5c8);
  line-height: var(--home-description-line-height, 1.8);
  font-size: var(--home-description-size, 14px);
}

.acf-main-page.is-home-expanded .acf-main-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 11px;
}

.acf-main-page.is-home-expanded .acf-home-login-btn {
  min-height: var(--home-login-height, 38px);
  border-radius: var(--home-login-radius, 16px);
  background: var(--home-login-bg, linear-gradient(135deg,var(--brand),var(--brand2)));
  color: var(--home-login-color, #fff);
  font-size: var(--home-login-font-size, 13px);
  font-weight: 950;
  gap: 7px;
}

.acf-main-page.is-home-expanded .acf-home-login-btn img {
  width: var(--home-login-icon-size, 18px);
  height: var(--home-login-icon-size, 18px);
  min-width: var(--home-login-icon-size, 18px);
  object-fit: contain;
}

.acf-main-page.is-home-expanded .acf-main-tabs {
  display: flex;
  gap: var(--home-tabs-gap, 7px);
  overflow-x: auto;
  padding: var(--home-tabs-padding, 2px 1px 5px);
  margin: 2px 0 0;
  scrollbar-width: none;
  direction: rtl;
}

.acf-main-page.is-home-expanded .acf-main-tabs::-webkit-scrollbar { display: none; }

.acf-main-page.is-home-expanded .acf-main-tabs a {
  flex: 0 0 auto;
  min-height: var(--home-tab-height, 34px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: var(--home-tab-padding, 7px 11px);
  border-radius: var(--home-tab-radius, 999px);
  border: 1px solid var(--home-tab-border-color, rgba(255,255,255,.10));
  background: var(--home-tab-bg, rgba(255,255,255,.04));
  color: var(--home-tab-color, #aab5c8);
  font-size: var(--home-tab-font-size, 12px);
  font-weight: var(--home-tab-font-weight, 850);
  white-space: nowrap;
}

.acf-main-page.is-home-expanded .acf-main-tabs a.active {
  color: var(--home-tab-active-color, #fff);
  border-color: var(--home-tab-active-border-color, rgba(124,58,237,.55));
  background: var(--home-tab-active-bg, linear-gradient(135deg, rgba(124,58,237,.42), rgba(6,182,212,.20)));
}

.acf-main-page.is-home-expanded .acf-main-tabs a img {
  width: var(--home-tab-icon-size, 16px);
  height: var(--home-tab-icon-size, 16px);
  min-width: var(--home-tab-icon-size, 16px);
  object-fit: contain;
  opacity: .78;
}

.acf-main-page.is-home-expanded .acf-main-tabs a.active img {
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(103,232,249,.22));
}

.acf-main-page.is-home-expanded .acf-main-tabs.is-mode-icon a span,
.acf-main-page.is-home-expanded .acf-main-tabs.is-mode-text a img { display: none; }

.acf-main-page.is-home-expanded .acf-main-feed {
  display: grid;
  gap: var(--home-feed-gap, 10px);
}

.acf-main-page.is-home-expanded .acf-home-empty {
  display: grid;
  gap: 4px;
  padding: 18px 14px;
  border: 1px solid var(--home-empty-border, rgba(255,255,255,.10));
  border-radius: var(--home-card-radius, 24px);
  background: var(--home-empty-bg, rgba(255,255,255,.045));
  color: var(--home-empty-color, #aab5c8);
  text-align: center;
  line-height: 1.8;
}

.acf-main-page.is-home-expanded .acf-home-empty b { color: inherit; font-size: 14px; }
.acf-main-page.is-home-expanded .acf-home-empty small { color: inherit; opacity: .82; }

.acf-main-page.is-home-expanded .acf-main-loader {
  padding: 14px;
  text-align: center;
  color: var(--home-loader-color, #aab5c8);
  font-weight: 850;
}

.acf-main-page.is-home-expanded .acf-main-sentinel { height: 48px; }

/* Home feed card overrides controlled by acf_settings_home */
.acf-main-page.is-home-expanded .acf-feed-card.is-x-feed.is-home-card {
  border-color: var(--home-card-border-color, rgba(148,163,184,.14));
  border-radius: var(--home-card-radius, 24px);
  padding: var(--home-card-padding, 13px 13px 11px);
  background: var(--home-card-bg);
  box-shadow: var(--home-card-shadow, 0 12px 32px rgba(0,0,0,.18));
}

.acf-main-page.is-home-expanded .acf-feed-card.is-x-feed.is-home-card .acf-feed-head {
  grid-template-columns: var(--home-card-avatar-size, 46px) minmax(0, 1fr);
  gap: var(--home-card-head-gap, 10px);
}

.acf-main-page.is-home-expanded .acf-feed-card.is-x-feed.is-home-card .acf-feed-avatar-wrap {
  width: var(--home-card-avatar-size, 46px);
  height: var(--home-card-avatar-size, 46px);
  background: var(--home-card-avatar-bg, linear-gradient(135deg, rgba(124,58,237,.55), rgba(6,182,212,.38)));
}

.acf-main-page.is-home-expanded .acf-feed-card.is-x-feed.is-home-card .acf-feed-avatar {
  width: var(--home-card-avatar-inner-size, 42px);
  height: var(--home-card-avatar-inner-size, 42px);
}

.acf-main-page.is-home-expanded .acf-feed-card.is-x-feed.is-home-card .acf-feed-author-name {
  color: var(--home-card-author-color, #f8fafc);
  font-size: var(--home-card-author-size, 13px);
  font-weight: var(--home-card-author-weight, 950);
  font-style: var(--home-card-author-style, normal);
}

.acf-main-page.is-home-expanded .acf-feed-card.is-x-feed.is-home-card .acf-feed-author-handle {
  color: var(--home-card-handle-color, #94a3b8);
  font-size: var(--home-card-handle-size, 11.5px);
}

.acf-main-page.is-home-expanded .acf-feed-card.is-x-feed.is-home-card .acf-feed-date {
  color: var(--home-card-date-color, #7f8da5);
  font-size: var(--home-card-date-size, 11px);
}

.acf-main-page.is-home-expanded .acf-feed-card.is-x-feed.is-home-card .acf-feed-hash {
  color: var(--home-card-hash-color, #67e8f9);
  background: var(--home-card-hash-bg, rgba(6,182,212,.06));
  border-color: var(--home-card-hash-border-color, rgba(103,232,249,.14));
  font-size: var(--home-card-hash-size, 11.5px);
}

.acf-main-page.is-home-expanded .acf-feed-card.is-x-feed.is-home-card .acf-feed-text {
  margin-top: var(--home-card-text-margin-top, 10px);
  color: var(--home-card-text-color, #f8fafc);
  font-size: var(--home-card-text-size, 15.6px);
  font-weight: var(--home-card-text-weight, 730);
  line-height: var(--home-card-text-line-height, 1.72);
}

.acf-main-page.is-home-expanded .acf-feed-card.is-x-feed.is-home-card .acf-feed-bottom {
  gap: var(--home-card-bottom-gap, 8px);
  margin-top: var(--home-card-bottom-margin-top, 9px);
}

.acf-main-page.is-home-expanded .acf-feed-card.is-x-feed.is-home-card .acf-feed-stats {
  gap: var(--home-card-stats-gap, 6px);
}

.acf-main-page.is-home-expanded .acf-feed-card.is-x-feed.is-home-card .acf-feed-stat,
.acf-main-page.is-home-expanded .acf-feed-card.is-x-feed.is-home-card .acf-feed-stats span {
  height: var(--home-card-counter-height, 30px);
  gap: 5px;
  padding: var(--home-card-counter-padding, 0 9px);
  border-color: var(--home-card-counter-border-color, rgba(148,163,184,.10));
  border-radius: var(--home-card-counter-radius, 999px);
  background: var(--home-card-counter-bg, rgba(15,23,42,.45));
  color: var(--home-card-counter-label-color, #9fb0c8);
}

.acf-main-page.is-home-expanded .acf-feed-card.is-x-feed.is-home-card .acf-feed-stat b,
.acf-main-page.is-home-expanded .acf-feed-card.is-x-feed.is-home-card .acf-feed-stats b {
  color: var(--home-card-counter-color, #e5e7eb);
  font-size: var(--home-card-counter-size, 12px);
}

.acf-main-page.is-home-expanded .acf-feed-card.is-x-feed.is-home-card .acf-feed-stat small {
  color: var(--home-card-counter-label-color, #9fb0c8);
  font-size: var(--home-card-counter-label-size, 10px);
}

.acf-main-page.is-home-expanded .acf-feed-card.is-x-feed.is-home-card .acf-feed-stat-icon {
  width: var(--home-card-counter-icon-size, 15px);
  height: var(--home-card-counter-icon-size, 15px);
  min-width: var(--home-card-counter-icon-size, 15px);
}

.acf-main-page.is-home-expanded .acf-feed-card.is-x-feed.is-home-card .acf-feed-save {
  width: var(--home-card-save-size, 38px);
  height: var(--home-card-save-size, 38px);
  min-width: var(--home-card-save-size, 38px);
  border-radius: var(--home-card-save-radius, 16px);
  background: var(--home-card-save-bg, rgba(255,255,255,.055));
  border-color: var(--home-card-save-border-color, rgba(255,255,255,.10));
}

.acf-main-page.is-home-expanded .acf-feed-card.is-x-feed.is-home-card .acf-feed-save img {
  width: var(--home-card-save-icon-size, 20px);
  height: var(--home-card-save-icon-size, 20px);
}

.acf-main-page.is-home-expanded .acf-feed-card.is-x-feed.is-home-card .acf-feed-save.is-saved,
.acf-main-page.is-home-expanded .acf-feed-card.is-x-feed.is-home-card .acf-feed-save.saved {
  background: var(--home-card-save-saved-bg, radial-gradient(circle at 50% 35%, rgba(34,197,94,.22), rgba(34,197,94,.09)));
  border-color: var(--home-card-save-saved-border-color, rgba(34,197,94,.45));
}

@media (max-width: 420px) {
  .acf-main-page.is-home-expanded .acf-main-hero {
    border-radius: calc(var(--home-hero-radius, 26px) - 3px);
    padding: 14px 12px;
  }

  .acf-main-page.is-home-expanded .acf-main-hero h1 { font-size: calc(var(--home-title-size, 23px) - 2px); }
  .acf-main-page.is-home-expanded .acf-main-hero p { font-size: calc(var(--home-description-size, 14px) - .5px); }
}