﻿/* ================================================================
   Grain Coast Digital Platform — Public Site CSS
   Global Methodist Church — Grain Coast Annual Conference
   Design: Clean · Minimal · Elegant
   ================================================================ */

:root {
  --gmc-blue:       #1F3B73;
  --gmc-blue-dark:  #152B56;
  --gmc-blue-mid:   #2B5BA8;
  --gmc-blue-light: #EEF2FA;
  --gmc-blue-ghost: rgba(31, 59, 115, 0.06);
  --gmc-black:      #1A2332;
  --gmc-white:      #FFFFFF;
  --gmc-surface:    #F7F9FC;
  --gmc-border:     #E4E9F2;
  --gmc-text:       #1A2332;
  --gmc-text-muted: #64748B;
  --gmc-gray:       #F7F9FC;
  --gmc-gray-mid:   #64748B;
  --gmc-gray-border:#E4E9F2;
  --t-base: 200ms ease;
}

body { font-family: 'Inter', system-ui, sans-serif; color: var(--gmc-text); -webkit-font-smoothing: antialiased; }

/* ── Public Navbar ── */
.pub-navbar {
  background: rgba(21, 43, 86, 0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: .7rem 0;
}
.pub-logo { border-radius: 6px; }
.pub-brand-name { color: #fff; font-weight: 700; font-size: .95rem; line-height: 1.2; }
.pub-brand-sub  { color: rgba(255,255,255,.5); font-size: .7rem; }
.pub-link { color: rgba(255,255,255,.75) !important; font-weight: 500; font-size: .875rem; transition: color var(--t-base); padding: .4rem .65rem !important; border-radius: 5px; }
.pub-link:hover, .pub-link.active { color: #fff !important; background: rgba(255,255,255,.08); }
.btn-pub-cta { background: var(--gmc-blue-mid); color: #fff !important; border: none; font-weight: 600; border-radius: 6px; padding: .4rem 1rem; transition: background var(--t-base), transform var(--t-base), box-shadow var(--t-base); }
.btn-pub-cta:hover { background: var(--gmc-blue); color: #fff !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(31,59,115,.3); }

/* ── Hero ── */
.pub-hero {
  position: relative;
  background: linear-gradient(135deg, var(--gmc-blue-dark) 0%, var(--gmc-blue) 55%, #1e4a70 100%);
  min-height: 88vh; display: flex; align-items: center; overflow: hidden;
}
.pub-hero::before {
  content: ''; position: absolute; inset: 0;
  background: url('/images/logo.png') center/280px no-repeat; opacity: .03;
}
.pub-hero-content { position: relative; z-index: 2; }
.pub-hero-cross { display: block; margin-bottom: 1rem; }
.pub-hero-cross img { height: 3rem; width: auto; object-fit: contain; filter: brightness(0) invert(1) drop-shadow(0 2px 12px rgba(0,0,0,.4)); }
.pub-hero h1 { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 5vw, 3.6rem); color: #fff; line-height: 1.15; }
.pub-hero h2 { font-family: 'Playfair Display', serif; color: rgba(255,255,255,.65); font-size: clamp(.95rem, 2.5vw, 1.3rem); font-weight: 400; margin-bottom: 1rem; }
.pub-hero p  { color: rgba(255,255,255,.78); font-size: 1rem; max-width: 560px; }
.btn-hero-primary { background: var(--gmc-blue-mid); color: #fff; border: none; padding: .7rem 1.875rem; border-radius: 8px; font-weight: 600; font-size: .95rem; transition: all var(--t-base); }
.btn-hero-primary:hover { background: #244e9e; color: #fff; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(31,59,115,.35); }
.btn-hero-outline { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.45); padding: .7rem 1.875rem; border-radius: 8px; font-weight: 600; font-size: .95rem; transition: all var(--t-base); }
.btn-hero-outline:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.75); color: #fff; transform: translateY(-2px); }
.hero-img-frame { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.15); border-radius: 16px; padding: 2rem; text-align: center; }
.hero-img-frame img { max-height: 280px; width: auto; }

/* ── Stats Bar ── */
.stats-bar { background: var(--gmc-blue); padding: 1.5rem 0; }
.stat-item { text-align: center; color: #fff; }
.stat-item .stat-num { font-family: 'Playfair Display', serif; font-size: 2.2rem; font-weight: 700; line-height: 1; }
.stat-item .stat-label { font-size: .75rem; text-transform: uppercase; letter-spacing: 1px; opacity: .85; margin-top: .25rem; }

/* ── Section Titles ── */
.section-badge { display: inline-block; background: rgba(31,59,115,.08); color: var(--gmc-blue); border: 1px solid rgba(31,59,115,.18); border-radius: 20px; font-size: .75rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; padding: .2rem .875rem; margin-bottom: .6rem; }
.section-title { font-family: 'Playfair Display', serif; font-size: clamp(1.5rem, 3.5vw, 2.25rem); color: var(--gmc-blue); font-weight: 700; }
.section-divider { width: 48px; height: 3px; background: var(--gmc-blue); border-radius: 2px; margin: .625rem 0 1.25rem; }
.section-divider.mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* ── About Strip ── */
.pub-about { background: var(--gmc-surface); }
.value-card { background: #fff; border-radius: 10px; padding: 1.375rem; box-shadow: 0 1px 4px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04); border-left: 3px solid var(--gmc-blue); transition: transform var(--t-base), box-shadow var(--t-base); }
.value-card:hover { transform: translateY(-2px); box-shadow: 0 2px 8px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.07); }
.value-icon { width: 44px; height: 44px; background: rgba(31,59,115,.08); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--gmc-blue); font-size: 1.3rem; }

/* ── News Cards ── */
.news-card { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04); transition: transform var(--t-base), box-shadow var(--t-base); height: 100%; }
.news-card:hover { transform: translateY(-3px); box-shadow: 0 2px 8px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.08); }
.news-card-badge { display: inline-block; font-size: .7rem; font-weight: 600; text-transform: uppercase; padding: .2rem .65rem; border-radius: 20px; letter-spacing: .5px; }
.news-card-body { padding: 1.125rem; }
.news-card-title { font-family: 'Playfair Display', serif; font-size: 1rem; font-weight: 700; color: var(--gmc-blue); margin-bottom: .4rem; }
.news-card-meta  { font-size: .75rem; color: #888; }

/* ── Events ── */
.event-card { background: #fff; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04); overflow: hidden; display: flex; transition: transform var(--t-base), box-shadow var(--t-base); }
.event-card:hover { transform: translateY(-2px); box-shadow: 0 2px 8px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.07); }
.event-date-box { background: var(--gmc-blue); color: #fff; min-width: 68px; text-align: center; padding: 1rem .5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.event-date-day   { font-family: 'Playfair Display', serif; font-size: 1.9rem; line-height: 1; font-weight: 700; }
.event-date-month { font-size: .68rem; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,.65); }
.event-body { padding: 1rem 1.125rem; flex: 1; }
.event-title { font-weight: 600; color: var(--gmc-blue); margin-bottom: .2rem; font-size: .9rem; }
.event-meta  { font-size: .78rem; color: #888; }
.event-level { font-size: .68rem; font-weight: 600; padding: .15rem .55rem; border-radius: 10px; }
.event-level-conference { background: rgba(31,59,115,.1);  color: var(--gmc-blue); }
.event-level-district   { background: rgba(100,116,139,.1); color: var(--gmc-gray-mid); }
.event-level-circuit    { background: rgba(0,128,0,.1);    color: #0a6020; }
.event-level-local      { background: rgba(128,0,128,.1);  color: #5a0080; }

/* ── Donate CTA ── */
.pub-donate-cta { background: linear-gradient(135deg, var(--gmc-blue), var(--gmc-blue-mid)); color: #fff; }
.btn-gold, .btn-accent { background: #C9A227; color: #fff; border: none; border-radius: 6px; padding: .5rem 1.5rem; font-weight: 600; transition: background var(--t-base), transform var(--t-base), box-shadow var(--t-base); }
.btn-gold:hover, .btn-accent:hover { background: #A8881C; color: #fff; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(201,162,39,.3); }
.text-gold, .text-accent { color: #C9A227 !important; }

/* ── Page Hero ── */
.pub-page-hero { background: linear-gradient(135deg, var(--gmc-blue-dark) 0%, var(--gmc-blue-mid) 100%); padding: 5rem 0 3.5rem; color: #fff; }
.pub-page-hero h1 { font-family: 'Playfair Display', serif; font-size: clamp(1.75rem, 4vw, 2.75rem); }
.pub-page-hero p  { color: rgba(255,255,255,.78); }

/* ── Leadership Cards ── */
.leader-card { background: #fff; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04); padding: 1.5rem; text-align: center; transition: transform var(--t-base), box-shadow var(--t-base); }
.leader-card:hover { transform: translateY(-3px); box-shadow: 0 2px 8px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.07); }
.leader-avatar { width: 76px; height: 76px; background: var(--gmc-blue); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.875rem; margin: 0 auto 1rem; font-family: 'Playfair Display', serif; }

/* ── Contact ── */
.contact-info-card { background: var(--gmc-blue); color: #fff; border-radius: 12px; padding: 2rem; }

/* ── Footer ── */
.pub-footer { background: #0e1f35; color: rgba(255,255,255,.75); }
.pub-footer-brand   { color: #fff; font-weight: 700; font-size: .92rem; line-height: 1.2; }
.pub-footer-sub     { color: rgba(255,255,255,.5); font-size: .7rem; }
.pub-footer-heading { color: rgba(255,255,255,.75); font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: .875rem; }
.pub-footer-text    { color: rgba(255,255,255,.6); font-size: .85rem; line-height: 1.75; }
.pub-footer-links   { list-style: none; padding: 0; }
.pub-footer-links li { margin-bottom: .35rem; }
.pub-footer-links a { color: rgba(255,255,255,.6); text-decoration: none; font-size: .85rem; transition: color var(--t-base); }
.pub-footer-links a:hover { color: #fff; }
.pub-footer-hr   { border-color: rgba(255,255,255,.08); margin: 0; }
.pub-footer-copy { color: rgba(255,255,255,.4); font-size: .8rem; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .pub-hero { min-height: 100svh; text-align: center; }
  .pub-hero p { margin: 0 auto 1.5rem; }
  .hero-img-frame { display: none; }
  .stat-item .stat-num { font-size: 1.75rem; }
  .event-card { flex-direction: column; }
  .event-date-box { flex-direction: row; gap: .5rem; padding: .5rem 1rem; }
}

/* ── Utilities ── */
.text-gmc-blue { color: var(--gmc-blue) !important; }
.text-primary  { color: var(--gmc-blue) !important; }
.bg-primary    { background-color: var(--gmc-blue) !important; }
.btn-primary   { background-color: var(--gmc-blue) !important; border-color: var(--gmc-blue) !important; color: #fff !important; }
.btn-primary:hover { background-color: var(--gmc-blue-dark) !important; border-color: var(--gmc-blue-dark) !important; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(31,59,115,.28); }
.btn-outline-primary { color: var(--gmc-blue) !important; border-color: var(--gmc-blue) !important; }
.btn-outline-primary:hover { background-color: var(--gmc-blue) !important; color: #fff !important; }
.btn-outline-secondary:hover { transform: translateY(-1px); }
a { color: var(--gmc-blue); }
a:hover { color: var(--gmc-blue-mid); }

/* Form controls */
.form-control, .form-select { border-color: var(--gmc-border); border-radius: 6px; font-size: .875rem; padding: .45rem .875rem; }
.form-control:focus, .form-select:focus { border-color: var(--gmc-blue-mid); box-shadow: 0 0 0 3px rgba(43,91,168,.12); outline: none; }
.form-label { font-size: .8rem; font-weight: 600; margin-bottom: .35rem; }

/* Alert */
.alert { border-radius: 6px; font-size: .875rem; border: none; border-left: 3px solid transparent; }
.alert-danger  { background: #FEF2F2; color: #991B1B; border-left-color: #EF4444; }
.alert-success { background: #F0FDF4; color: #166534; border-left-color: #22C55E; }
