/* BEGIN GPT: nav polish + CTA (non-destructive) */
:root {
  --brand-blue: #2a5d84;
  --cta-gold: #ffd700;
}
nav#topNav a i { font-size: 0.9em; opacity: 0.85; }
nav#topNav a.cta,
nav#topNav a[href*="subscribe.php"] {
  background: var(--cta-gold);
  color: #1f3347 !important;
  font-weight: 700;
  border-radius: 5px;
  padding: 8px 12px;
}
nav#topNav a.cta:hover,
nav#topNav a[href*="subscribe.php"]:hover { filter: brightness(0.95); }
/* END GPT */

/* BEGIN GPT: Mobile header & hamburger fixes */
header { position: relative; z-index: 6000; }
#hamburger {
  display: none;
  position: relative;
  z-index: 7000;
  font-size: 26px;
  line-height: 1;
  padding: 10px;
  margin-left: 8px;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 900px) {
  #hamburger { display: inline-block !important; }
  nav#topNav {
    position: static !important;
    top: auto !important;
    height: auto;
    display: none;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
    gap: 0;
  }
  nav#topNav.show { display: flex !important; }
  nav#topNav a {
    width: 100%;
    justify-content: center;
    padding: 12px 0;
    border-top: 1px solid rgba(255,255,255,0.2);
    font-size: 1.05rem;
  }
}
/* END GPT */

/* BEGIN GPT: Mobile-friendly footer stack */
@media (max-width: 768px) {
  footer table { display: block; width: 100%; }
  footer table tr { display: block; }
  footer table td {
    display: block;
    width: 100% !important;
    text-align: center !important;
    padding: 8px 4px !important;
  }
  footer table td > div[style*="font-weight:700"] { margin-bottom: 8px !important; }
  footer a { display: inline-block; padding: 8px 10px; margin: 6px 6px !important; }
  footer a[href*="subscribe.php"] {
    display: inline-block; padding: 8px 12px; border-radius: 6px; font-weight: 700;
  }
}
/* END GPT */

/* BEGIN GPT: Bottom user nav fit on small screens */
.bottom-nav { padding-bottom: max(0px, env(safe-area-inset-bottom)); }
.bottom-nav a {
  min-width: 20%;
  flex: 1 1 20%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 400px) {
  .bottom-nav a { font-size: 11px; }
  .bottom-nav a i { font-size: 16px; }
}
@media (max-width: 340px) {
  .bottom-nav a span { display: none; }
  .bottom-nav a i { margin: 0; }
}
/* END GPT */

/* BEGIN GPT: Prevent horizontal overflow on mobile */
html, body { max-width: 100%; overflow-x: hidden; }
img, table, header, nav, main, footer, .bottom-nav {
  max-width: 100%;
  box-sizing: border-box;
}
@media (max-width: 900px) {
  nav#topNav {
    width: 100% !important;
    margin: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden;
  }
  nav#topNav a {
    max-width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }
}
/* END GPT */

/* BEGIN GPT: Footer links wrap instead of forcing width */
@media (max-width: 768px) {
  footer { overflow-x: hidden; }
  footer a { white-space: normal !important; word-break: break-word !important; }
}
/* END GPT */

/* BEGIN GPT: Bottom user nav — no overflow, tighter spacing on tiny screens */
.bottom-nav { gap: 0 !important; padding-left: 0; padding-right: 0; }
.bottom-nav a { min-width: 20%; flex: 1 1 20%; padding: 6px 0; }
@media (max-width: 400px) {
  .bottom-nav { justify-content: space-between !important; }
  .bottom-nav a { font-size: 11px; }
  .bottom-nav a i { font-size: 16px; }
}
@media (max-width: 340px) {
  .bottom-nav a span { display: none; }
  .bottom-nav a i { margin: 0; }
}
/* END GPT */

/* BEGIN GPT: profile action card */
.profile-card {
  background:#f4eee8; border:1px solid #e7dccf; border-radius:12px;
  padding:16px; box-shadow:0 1px 3px rgba(0,0,0,.06); margin:12px 0;
}
.profile-card-title { margin:0 0 4px; color:#5a4a33; font-size:1.25rem; }
.profile-card-sub   { margin:0 0 12px; color:#6b4e2e; font-size:.95rem; }
.actions-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; }
@media (min-width: 640px){ .actions-grid{ grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (min-width: 900px){ .actions-grid{ grid-template-columns: repeat(5,minmax(0,1fr)); } }
.action-btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:12px; border-radius:10px; background:#fff; color:#2a5d84;
  text-decoration:none; font-weight:700; border:1px solid #d9cbbd;
}
.action-btn i { font-size:18px; }
.action-btn:hover { background:#fffdf2; }
.action-accent { background:#ffd700; color:#1f3347; }
.action-accent:hover { filter:brightness(.95); }
.muted { margin-top:8px; font-size:.9rem; }
/* END GPT */

/* BEGIN GPT: App-style layout for logged-in users on mobile */
@media (max-width: 768px) {
  .bottom-nav ~ footer { display: none !important; }
  .bottom-nav ~ main {
    padding-bottom: 80px !important;
    padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
  }
}
/* END GPT */

/* BEGIN GPT: bottom user nav supports any item count */
.bottom-nav { justify-content: space-between !important; gap: 0 !important; }
.bottom-nav a { flex: 1 1 0 !important; min-width: 0 !important; }
/* END GPT */

/* BEGIN GPT: Profile mobile density */
@media (max-width: 768px) {
  .profile-container {
    width: 95% !important;
    max-width: 95% !important;
    margin: 0.75em auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .profile-container .card {
    padding: 14px !important;
    margin-bottom: 14px !important;
    border-radius: 12px !important;
  }
  .profile-container h1, .profile-container h2 { font-size: 1.15rem !important; }
  .profile-container h3 { font-size: 1.05rem !important; }
  .profile-container p, .profile-container li { font-size: 0.95rem !important; }
  .profile-container .btn { font-size: 0.95rem !important; padding: 9px 12px !important; }
  .profile-container .status-badge { font-size: 0.9em !important; padding: 5px 10px !important; }
  .profile-container .hub-grid { gap: 10px !important; }
  .profile-container .hub-tile { padding: 10px !important; }
  .profile-container .hub-tile span { font-size: 0.95rem !important; }
}
/* END GPT */

/* --- HOTFIX: fixed header/nav --- */
header{ position: fixed !important; top: 0; left: 0; right: 0; z-index: 10000 !important; }
@media (min-width: 769px){
  nav#topNav{ position: fixed !important; top: 55px; left: 0; right: 0; z-index: 9000 !important; }
}
@media (max-width: 768px){
  #hamburger{ position: fixed !important; top: 8px; right: 10px; z-index: 11000 !important; }
  nav#topNav{
    position: fixed !important; top: 55px; left: 0; right: 0;
    z-index: 9000 !important; max-height: calc(100vh - 55px); overflow-y: auto;
  }
}
main{ padding-top: 110px !important; }

/* === MOBILE TOP-SPACING TUNE-UP === */
@media (max-width: 768px) {
  header { height: 55px !important; }
  nav#topNav { top: 55px !important; }
  main { padding-top: 60px !important; margin-top: 0 !important; }
  .profile-container h1:first-child,
  .profile-container h2:first-child,
  .blog-container h1:first-child,
  .blog-container h2:first-child,
  .album-container h1:first-child,
  .album-container h2:first-child,
  .family-group-container h1:first-child,
  .family-group-container h2:first-child,
  h1.page-title:first-child,
  .page-title:first-child { margin-top: 6px !important; }

  .profile-container,
  .blog-container,
  .album-container,
  .family-group-container,
  .container { margin-top: 6px !important; padding-top: 0 !important; }

  .card, section {
    margin-top: 10px !important;
    margin-bottom: 14px !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  .page-title { margin: 6px 0 12px !important; line-height: 1.2 !important; }
}

/* === GENERAL mobile wideners already present === */
@media (max-width: 768px) {
  body { font-size: 15px; line-height: 1.55; }
  h1, .page-title { font-size: 1.35rem; margin: .4rem 0 .7rem; }
  h2 { font-size: 1.18rem; }
  h3 { font-size: 1.05rem; }

  .card, .blog-post, .fgs-card, .fgs-list-card, .services-card, .resources-card {
    width: 98% !important; max-width: 98% !important; margin-left: auto !important; margin-right: auto !important; border-radius: 12px; padding: 14px;
  }
}

/* BLOG images, pagination, etc. */
.blog-container { padding-left: 12px; padding-right: 12px; }
.blog-post img, .blog-content img, .blog-view img, .blog-body img, .article-content img {
  max-width: 100% !important; height: auto !important; display: block; margin: 8px auto;
}
@media (max-width: 768px) {
  .pagination { gap: 6px; }
  .pagination a, .pagination span { padding: 6px 10px; font-size: .95rem; }
}

/* INDEX */
@media (max-width: 768px) {
  .hero-card, .intro-card { margin-top: 8px !important; }
  .intro-card p { font-size: .98rem; }
}

/* FGS */
@media (max-width: 768px) {
  .fgs-container .page-title { font-size: 1.25rem !important; margin-top: .4rem !important; }
}

/* RESOURCES */
.resources-container h2, .resources-container .category-title { color: #6B8E23; }
.resources-container .category-title.alt { color: #8B4513; }

/* GLOBAL tables/images */
html, body { max-width: 100%; overflow-x: hidden; }
table { width: 100%; table-layout: auto; }

/* ===== NEW: ULTRA-COMPACT MOBILE ENFORCERS (100% width + 2px padding) =====
   These come LAST so they override everything above safely. */
@media (max-width: 768px) {
  /* Root sizing smaller for all pages */
  body { font-size: 13px !important; line-height: 1.5 !important; }

  /* Containers & cards */
  .container, .profile-container, .fgs-container, .blog-container, .album-container, .resources-container, main {
    width: 100% !important; max-width: 100% !important; padding-left: 2px !important; padding-right: 2px !important;
  }
  .card, section, .fgs-card, .fgs-list-card, .services-card, .resources-card, .blog-post {
    width: 100% !important; max-width: 100% !important; padding: 2px !important; margin-left: 0 !important; margin-right: 0 !important;
  }

  /* Tables + cells */
  table, .children-table, .data-table, .table { width: 100% !important; table-layout: auto !important; }
  table th, table td,
  .children-table th, .children-table td,
  .table th, .table td { padding: 2px !important; font-size: 0.92rem !important; }

  /* Headings and text */
  h1, .page-title { font-size: 1.2rem !important; }
  h2 { font-size: 1.05rem !important; }
  h3 { font-size: 0.98rem !important; }
  p, li, small, .muted { font-size: 0.92rem !important; }

  /* Buttons */
  .btn, button, .pager-btn { padding: 6px 10px !important; font-size: 0.92rem !important; }

  /* Images never overflow */
  img { max-width: 100% !important; height: auto !important; }
}
/* === HOTFIX: Header logo + mobile hamburger ============================ */
/* Keep the header logo small and never let global img rules resize it */
header .logo { display:flex; align-items:center; }
header .logo img {
  height: 40px !important;
  max-height: 40px !important;
  width: auto !important;
  max-width: none !important;   /* defeat img{max-width:100%} */
}

/* Ensure the hamburger is visible and above everything on mobile */
@media (max-width: 900px) {
  #hamburger {
    display: block !important;
    position: fixed !important;
    top: 8px !important;
    right: 10px !important;
    z-index: 11000 !important;
    color: #fff !important;
    pointer-events: auto !important;
  }
}

/* Even tighter on small phones */
@media (max-width: 768px) {
  header .logo img {
    height: 32px !important;
    max-height: 32px !important;
  }
}
/* === INDEX (Home) — mobile quote size + kill top spacer ================= */

/* Make the hero/intro quote smaller on phones */
@media (max-width: 768px) {
  /* Try common selectors first */
  .hero-quote,
  .intro-quote,
  .quote.hero,
  .quote.big,
  /* Fallback: the first section’s blockquote on the page */
  main > section:first-of-type blockquote {
    font-size: 0.95rem !important;
    line-height: 1.35 !important;
  }

  /* Tighten blockquote spacing so it doesn't look oversized */
  main > section:first-of-type blockquote {
    margin: 6px 0 !important;
    padding: 0 6px !important;
  }
}

/* Remove top blank space on mobile (from stacked margins/padding) */
@media (max-width: 768px) {
  /* Ensure content starts right under the fixed header */
  main {
    padding-top: 56px !important;   /* matches fixed header height */
    margin-top: 0 !important;       /* overrides any theme margin */
  }

  /* First element in main shouldn't add extra top margin */
  main > *:first-child {
    margin-top: 6px !important;
  }

  /* If any spacer elements exist, hide them on mobile */
  .spacer,
  .top-spacer,
  .page-spacer {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}