
/* ATLCOC shared responsive layer */
:root{
  --navy:#062c52;
  --navy-dark:#021d36;
  --gold:#c9963d;
  --paper:#f7f7f4;
  --ink:#122033;
  --muted:#647080;
  --line:#dde2e7;
  --white:#fff;
}

html{scroll-behavior:smooth}
body{overflow-x:hidden}
img{max-width:100%;height:auto}
button,input,select,textarea{font:inherit}
table{max-width:100%}

/* Shared mobile navigation */
.site-header,
.admin-mobile-header{
  position:sticky;
  top:0;
  z-index:1000;
}

.mobile-menu-button{
  display:none;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border:1px solid var(--line);
  border-radius:7px;
  background:#fff;
  color:var(--navy);
  cursor:pointer;
  font-size:1.4rem;
}

.mobile-menu-button span{
  pointer-events:none;
}

.mobile-nav-panel{
  display:none;
}

/* Touch targets */
.button,
.outline-button,
.outline,
.danger,
.admin-button{
  min-height:44px;
}

/* Responsive cards */
.responsive-card-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
}

/* Admin responsive cards generated from table rows */
.mobile-admin-cards{
  display:none;
}

.mobile-admin-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:9px;
  padding:16px;
  margin-bottom:12px;
  box-shadow:0 3px 10px rgba(3,31,58,.04);
}

.mobile-admin-card h3{
  margin:0 0 10px;
  color:var(--navy);
}

.mobile-admin-card dl{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:6px 10px;
  margin:0 0 14px;
}

.mobile-admin-card dt{
  font-weight:700;
  color:var(--navy);
}

.mobile-admin-card dd{
  margin:0;
  min-width:0;
  overflow-wrap:anywhere;
}

.mobile-admin-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.mobile-admin-actions a,
.mobile-admin-actions button{
  width:100%;
  text-align:center;
}

/* Tablet */
@media (max-width:900px){
  .container{
    width:min(94vw,1180px);
  }

  .responsive-card-grid,
  .event-grid,
  .directory-grid,
  .bottom-grid,
  .detail-grid,
  .split-section,
  .church-directory-grid{
    grid-template-columns:1fr 1fr !important;
  }

  .two-col{
    grid-template-columns:1fr !important;
  }

  .site-header{
    min-height:68px;
    padding:10px 3vw;
    gap:12px;
  }

  .site-header nav{
    display:none !important;
  }

  .mobile-menu-button{
    display:inline-flex;
  }

  .mobile-nav-panel{
    display:none;
    position:fixed;
    left:0;
    right:0;
    top:68px;
    background:#fff;
    border-bottom:1px solid var(--line);
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    padding:12px 4vw 18px;
    z-index:999;
  }

  .mobile-nav-panel.open{
    display:block;
  }

  .mobile-nav-panel a{
    display:block;
    padding:12px 8px;
    color:var(--navy);
    font-weight:700;
    text-decoration:none;
    border-bottom:1px solid #edf0f2;
  }

  .mobile-nav-panel a:last-child{
    border-bottom:0;
  }

  /* Common forms */
  .radius-form,
  .form-grid,
  .grid,
  .grid3,
  .add-form{
    grid-template-columns:1fr 1fr !important;
  }

  .finder-actions,
  .actions{
    flex-wrap:wrap;
  }
}

/* Phone */
@media (max-width:600px){
  body{
    font-size:16px;
  }

  .container{
    width:92vw !important;
  }

  h1{
    font-size:clamp(1.9rem,9vw,2.4rem) !important;
    line-height:1.08;
  }

  h2{
    font-size:1.4rem !important;
  }

  h3{
    font-size:1.08rem;
  }

  .page-hero{
    padding:28px 0 18px !important;
  }

  .hero img{
    min-height:190px;
    object-fit:cover;
    object-position:center;
  }

  .brand .cross{
    font-size:1.65rem;
  }

  .brand strong{
    font-size:.92rem;
  }

  .brand small{
    font-size:.58rem !important;
    letter-spacing:.12em !important;
  }

  .responsive-card-grid,
  .event-grid,
  .directory-grid,
  .bottom-grid,
  .detail-grid,
  .split-section,
  .church-directory-grid,
  .mission-grid,
  .admin-stats,
  .admin-actions-grid,
  .radius-form,
  .form-grid,
  .grid,
  .grid3,
  .add-form{
    grid-template-columns:1fr !important;
  }

  .two-col{
    grid-template-columns:1fr !important;
    padding:20px 0 !important;
  }

  .card{
    padding:16px !important;
  }

  .search-form{
    flex-direction:column;
  }

  input,
  select,
  textarea{
    width:100%;
    min-height:46px;
    font-size:16px !important; /* prevents iOS form zoom */
  }

  textarea{
    min-height:130px;
  }

  .button,
  .outline-button,
  .outline,
  .danger,
  .admin-button{
    width:100%;
    text-align:center;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .finder-actions,
  .actions,
  .profile-actions,
  .card-actions,
  .inline-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  .church-directory-card{
    display:grid !important;
    grid-template-columns:1fr !important;
    text-align:center;
  }

  .church-logo-wrap{
    margin:0 auto;
    width:110px !important;
    height:110px !important;
    flex-basis:auto !important;
  }

  .church-logo-wrap img{
    max-width:95px !important;
    max-height:95px !important;
  }

  .church-profile-head{
    grid-template-columns:1fr !important;
    text-align:center;
  }

  .church-profile-logo{
    margin:0 auto;
  }

  .profile-actions,
  .social-links{
    justify-content:center;
  }

  .service-row{
    display:grid !important;
    grid-template-columns:1fr;
    gap:3px;
  }

  .footer{
    grid-template-columns:1fr !important;
    padding:30px 5vw !important;
  }

  /* Admin tables become hidden; JS-generated cards are shown */
  .admin-table-wrap,
  .table-wrap.mobile-collapse{
    display:none !important;
  }

  .mobile-admin-cards{
    display:block;
  }

  .mobile-admin-actions{
    grid-template-columns:1fr;
  }

  .mobile-admin-card dl{
    grid-template-columns:1fr;
  }

  .mobile-admin-card dt{
    margin-top:7px;
  }

  /* Generic admin tables that cannot be converted automatically remain horizontally scrollable */
  .table-wrap:not(.mobile-collapse){
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  table{
    min-width:760px;
  }

  .admin-title-row,
  .top{
    flex-direction:column;
    align-items:stretch !important;
  }

  .filters{
    display:grid !important;
    grid-template-columns:1fr 1fr;
  }

  .filters a{
    text-align:center;
  }

  .logo-box{
    grid-template-columns:1fr !important;
    text-align:center;
  }

  .logo-preview{
    margin:0 auto;
  }
}


/* Next-pass support for standalone ATLCOC admin pages */
@media (max-width:900px){
  body > header nav{
    overflow-x:auto;
    flex-wrap:nowrap !important;
    -webkit-overflow-scrolling:touch;
    padding-bottom:6px;
    scrollbar-width:thin;
  }

  body > header nav a{
    flex:0 0 auto;
    white-space:nowrap;
  }

  main{
    width:min(94vw,1180px) !important;
  }
}

@media (max-width:600px){
  body > header{
    padding:14px 4vw !important;
  }

  body > header nav{
    margin-left:-1vw;
    margin-right:-1vw;
    gap:8px !important;
  }

  body > header nav a{
    background:rgba(255,255,255,.1);
    border-radius:5px;
    padding:8px 10px;
  }
      /* Individual church detail page */
    .church-profile,
    .church-detail,
    .church-content {
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box;
    }

    /* Sections inside the church page */
    .church-profile section,
    .church-detail section {
        padding-left: 0;
        padding-right: 0;
  }

  .request,
  .update-request,
  .finder-panel,
  .update-card{
    padding:15px !important;
  }

  .request-top{
    display:grid !important;
    grid-template-columns:1fr !important;
  }

  .data{
    grid-template-columns:1fr !important;
  }

  dl{
    grid-template-columns:1fr !important;
  }

  .table-wrap.service-times-mobile{
    display:block !important;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  .service-times-mobile table{
    min-width:900px !important;
  }

  .resource-edit-form,
  .event-edit-form,
  .church-edit-form{
    padding:15px !important;
  }

  .resource-edit-form .grid,
  .event-edit-form .grid,
  .event-edit-form .grid3,
  .church-edit-form .grid,
  .church-edit-form .grid3{
    grid-template-columns:1fr !important;
  }
}
}
