/* Shared styles for SoccerOrFootball app pages (signup, login, listings, admin, etc.)
   Palette matches index.html so these feel like the same site. */
:root{
  --turf-deep:#14532D;
  --turf-bright:#3B9421;
  --turf-line:#8FD19E;
  --chalk:#F6F5F0;
  --chalk-dim:#E7E4DA;
  --goal-navy:#0B1E38;
  --goal-navy-2:#132A47;
  --brand-orange:#F5670A;
  --brand-orange-dark:#D95500;
  --brand-blue:#0047B0;
  --neutral-gray:#6A6C70;
  --ink:#12201C;
  --danger:#C0392B;
  --max:1240px;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Public Sans', system-ui, sans-serif;
  background:var(--chalk);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Anton', sans-serif;
  font-weight:400;
  letter-spacing:0.01em;
  text-transform:uppercase;
  line-height:0.95;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px;}
button{font-family:inherit;cursor:pointer;}
:focus-visible{outline:3px solid var(--brand-orange);outline-offset:3px;}

/* ---------- NAV ---------- */
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 28px;
  background:var(--chalk);
  box-shadow:0 2px 18px rgba(11,30,56,0.10);
  position:sticky;top:0;z-index:50;
}
.logo-img{height:66px;width:auto;display:block;}
.nav-links{display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.nav-links a{
  color:var(--goal-navy);
  font-size:14px;font-weight:700;
  text-decoration:none;
}
.nav-cta{
  display:inline-flex;align-items:center;gap:3px;
  background:var(--brand-orange);color:#fff !important;
  padding:5px 10px;border-radius:6px;
  font-size:11px;font-weight:800;
  text-decoration:none;border:none;
}
.nav-cta:hover{background:var(--brand-orange-dark);}

/* Hero CTA buttons over the slideshow - sized down independently of the
   shared .btn class used elsewhere on the site. */
.hero-ctas .btn{
  padding:5px 10px;font-size:11px;gap:3px;
}

/* ---------- PAGE HEADER ---------- */
.page-hero{
  background:var(--goal-navy);
  color:var(--chalk);
  padding:56px 0 40px;
}
.page-hero h1{font-size:clamp(28px,4vw,44px);color:#fff;margin:0 0 8px;}
.page-hero p{color:var(--chalk-dim);font-size:16px;max-width:640px;margin:0;}
.hero-note{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:18px;padding:10px 18px;border-radius:999px;
  background:rgba(59,148,33,0.22);border:1px solid rgba(143,209,158,0.45);
  color:#fff;font-size:14px;font-weight:700;max-width:640px;
}
.page-body{padding:40px 0 80px;}

/* ---------- CARDS / FORMS ---------- */
.card{
  background:#fff;border-radius:14px;padding:28px;
  box-shadow:0 4px 24px rgba(11,30,56,0.08);
  max-width:520px;margin:0 auto;
}
.card.wide{max-width:900px;}
.field{margin-bottom:18px;}
.field label{display:block;font-weight:700;font-size:13px;margin-bottom:6px;color:var(--goal-navy);}
.field .hint{font-size:12px;color:var(--neutral-gray);margin-top:4px;}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],
select,textarea{
  width:100%;padding:11px 13px;border:1.5px solid var(--chalk-dim);border-radius:8px;
  font-size:15px;font-family:inherit;background:#fff;color:var(--ink);
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--turf-bright);}
textarea{resize:vertical;min-height:90px;}
input[type=file]{
  width:auto;font-size:14px;font-family:inherit;background:transparent;color:var(--ink);
  border:none;padding:0;flex:0 0 auto;
}
input[type=file]::file-selector-button,
input[type=file]::-webkit-file-upload-button{
  padding:12px 22px;margin-right:16px;border:none;border-radius:8px;
  background:var(--goal-navy);color:#fff;font-weight:800;font-size:14px;cursor:pointer;
}
input[type=file]::file-selector-button:hover,
input[type=file]::-webkit-file-upload-button:hover{background:var(--goal-navy-2);}
.field-row{display:flex;gap:14px;flex-wrap:wrap;}
.field-row .field{flex:1;min-width:160px;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:8px;font-weight:800;font-size:15px;
  text-decoration:none;border:none;cursor:pointer;
}
.btn-primary{background:var(--brand-orange);color:var(--goal-navy);}
.btn-primary:hover{background:var(--brand-orange-dark);}
.btn-dark{background:var(--goal-navy);color:#fff;}
.btn-dark:hover{background:var(--goal-navy-2);}
.btn-outline{background:transparent;border:2px solid var(--goal-navy);color:var(--goal-navy);}
.btn-danger{background:var(--danger);color:#fff;}
.btn-small{padding:8px 14px;font-size:13px;}
.btn-block{width:100%;}
.btn[disabled]{opacity:0.6;cursor:not-allowed;}

.msg{padding:12px 16px;border-radius:8px;font-size:14px;margin-bottom:18px;}
.msg-error{background:#FBEAE8;color:var(--danger);border:1px solid #F1C4BE;}
.msg-success{background:#E9F7EC;color:#1E7A34;border:1px solid #B9E6C4;}
.msg-info{background:#EAF1FB;color:var(--brand-blue);border:1px solid #C7DBF5;}

.muted{color:var(--neutral-gray);font-size:14px;}
.center{text-align:center;}
.small-link{font-size:13px;font-weight:700;color:var(--brand-blue);text-decoration:underline;}

/* ---------- LISTING GRID ---------- */
.grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:20px;margin-top:24px;
}
.listing-card{
  background:#fff;border-radius:12px;overflow:hidden;
  box-shadow:0 4px 18px rgba(11,30,56,0.08);
  text-decoration:none;color:var(--ink);display:block;
}
.listing-card .thumb{
  aspect-ratio:4/3;background:var(--chalk-dim);
  display:flex;align-items:center;justify-content:center;
  color:var(--neutral-gray);font-size:13px;overflow:hidden;
}
.listing-card .thumb img{width:100%;height:100%;object-fit:cover;}
.listing-card .body{padding:14px;}
.badge{
  display:inline-block;font-size:11px;font-weight:800;text-transform:uppercase;
  padding:3px 8px;border-radius:5px;background:var(--turf-line);color:var(--turf-deep);
  margin-bottom:8px;
}
.listing-card h3{font-size:15px;margin:0 0 4px;text-transform:none;font-family:inherit;font-weight:800;}
.listing-card .meta{font-size:13px;color:var(--neutral-gray);}

/* ---------- ADMIN: PENDING LISTING DETAIL ---------- */
.pending-header{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px;margin-bottom:6px;}
.pending-photos{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0;}
.pending-photos img{
  width:110px;height:110px;object-fit:cover;border-radius:8px;
  box-shadow:0 2px 10px rgba(11,30,56,0.15);display:block;
}
.pending-details{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
  gap:10px 20px;margin:14px 0;padding:14px;background:var(--chalk);border-radius:8px;
}
.pending-details div{display:flex;flex-direction:column;}
.pending-details dt{font-size:11px;text-transform:uppercase;font-weight:800;color:var(--neutral-gray);margin:0;}
.pending-details dd{font-size:14px;margin:2px 0 0;color:var(--ink);}

/* ---------- TABS ---------- */
.tabs{display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap;}
.tab-btn{
  padding:10px 18px;border-radius:999px;border:1.5px solid var(--chalk-dim);
  background:#fff;font-weight:700;font-size:14px;color:var(--neutral-gray);
}
.tab-btn.active{background:var(--goal-navy);color:#fff;border-color:var(--goal-navy);}

/* ---------- TABLE ---------- */
table{width:100%;border-collapse:collapse;background:#fff;border-radius:10px;overflow:hidden;}
table th, table td{padding:10px 12px;text-align:left;font-size:13px;border-bottom:1px solid var(--chalk-dim);}
table th{background:var(--goal-navy);color:#fff;font-size:12px;text-transform:uppercase;}

.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px;margin-bottom:32px;}
.stat-box{background:#fff;border-radius:12px;padding:18px;box-shadow:0 4px 18px rgba(11,30,56,0.08);}
.stat-box .num{font-family:'Anton',sans-serif;font-size:30px;color:var(--goal-navy);}
.stat-box .label{font-size:12px;color:var(--neutral-gray);text-transform:uppercase;font-weight:700;}
.stat-box.stat-clickable{cursor:pointer;transition:transform .15s ease, box-shadow .15s ease;}
.stat-box.stat-clickable:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(11,30,56,0.14);}
.stat-box.stat-clickable .label{color:var(--brand-blue);}

.give-back-nudge{
  background:linear-gradient(135deg, var(--turf-deep), var(--goal-navy));
  color:var(--chalk);border-radius:14px;padding:20px 24px;margin-bottom:24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.give-back-nudge p{margin:0;font-size:14.5px;line-height:1.5;max-width:60ch;}
.give-back-nudge strong{color:var(--turf-line);}
.give-back-nudge .btn{white-space:nowrap;}

footer.site-footer{
  background:var(--goal-navy);color:var(--chalk-dim);padding:32px 0;margin-top:60px;
  font-size:13px;text-align:center;
}
footer.site-footer .credit{display:block;margin-top:6px;font-size:12px;color:var(--chalk-dim);opacity:0.75;}
footer.site-footer .credit a{color:var(--brand-orange);text-decoration:none;font-weight:700;}

/* ---------- ADMIN: category + sub-tab navigation ---------- */
.cat-tabs{display:flex;gap:12px;margin-bottom:22px;flex-wrap:wrap;border-bottom:2px solid var(--chalk-dim);padding-bottom:20px;}
.cat-btn{
  padding:16px 30px;border-radius:12px;border:2px solid var(--chalk-dim);
  background:#fff;font-weight:800;font-size:18px;color:var(--goal-navy);position:relative;
  min-height:52px;line-height:1.2;transition:background 0.15s,border-color 0.15s;
}
.cat-btn:hover{border-color:var(--brand-orange);}
.cat-btn.active{background:var(--brand-orange);color:#fff;border-color:var(--brand-orange);}
.cat-btn .nav-badge{
  display:inline-block;margin-left:10px;background:var(--danger);color:#fff;border-radius:999px;
  padding:2px 10px;font-size:13px;font-weight:800;
}
.subtabs{display:flex;gap:10px;margin-bottom:28px;flex-wrap:wrap;}
.subtab-btn{
  padding:12px 22px;border-radius:999px;border:2px solid var(--chalk-dim);
  background:#fff;font-weight:700;font-size:15.5px;color:var(--neutral-gray);
  min-height:42px;transition:background 0.15s,border-color 0.15s;
}
.subtab-btn:hover{border-color:var(--goal-navy);}
.subtab-btn.active{background:var(--goal-navy);color:#fff;border-color:var(--goal-navy);}

/* ---------- ADMIN: settings / profile forms ---------- */
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.settings-grid .field{grid-column:span 1;}
.settings-grid .field.full{grid-column:1 / -1;}
@media (max-width:640px){.settings-grid{grid-template-columns:1fr;}}

/* ---------- ADMIN: compose email ---------- */
.compose-recipients{max-height:260px;overflow-y:auto;border:1.5px solid var(--chalk-dim);border-radius:10px;padding:10px;background:#fff;}
.recipient-item{display:flex;align-items:center;gap:8px;padding:6px 4px;font-size:13.5px;border-bottom:1px solid var(--chalk);}
.recipient-item:last-child{border-bottom:none;}
.recipient-count{font-size:13px;color:var(--neutral-gray);margin:6px 0;}
.template-preview{background:var(--chalk);border-radius:10px;padding:14px;font-size:13.5px;color:var(--ink);margin-top:8px;}

.rte-toolbar{
  display:flex;gap:6px;flex-wrap:wrap;align-items:center;
  border:1.5px solid var(--chalk-dim);border-bottom:none;border-radius:8px 8px 0 0;
  background:var(--chalk);padding:6px;
}
.rte-btn{
  border:1px solid var(--chalk-dim);background:#fff;border-radius:6px;
  padding:6px 10px;font-size:13px;font-weight:700;color:var(--goal-navy);min-width:32px;
}
.rte-btn:hover{border-color:var(--brand-orange);}
.rte-btn.active{background:var(--brand-orange);color:#fff;border-color:var(--brand-orange);}
.rte-sep{width:1px;align-self:stretch;background:var(--chalk-dim);margin:2px 2px;}
.rte-editor{
  width:100%;min-height:180px;padding:12px 14px;border-radius:0 0 8px 8px;
  border:1.5px solid var(--chalk-dim);font-family:inherit;font-size:14px;line-height:1.6;
  background:#fff;overflow-y:auto;
}
.rte-editor:empty::before{content:attr(data-placeholder);color:var(--neutral-gray);}
.rte-editor ul, .rte-editor ol{margin:8px 0;padding-left:24px;}
.rte-editor p{margin:0 0 10px;}
.rte-editor a{color:var(--brand-orange);}

/* ---------- ADMIN: mini helpers ---------- */
.mini-muted{font-size:12px;color:var(--neutral-gray);}
.admin-role-pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:11px;font-weight:800;text-transform:uppercase;}
.admin-role-pill.super_admin{background:var(--goal-navy);color:#fff;}
.admin-role-pill.admin{background:var(--chalk-dim);color:var(--goal-navy);}
footer.site-footer .credit a:hover{text-decoration:underline;}

/* ---------- CONTENT / LEGAL PAGES (prose) ---------- */
.prose{max-width:740px;margin:0 auto;background:#fff;border-radius:16px;padding:40px 44px;box-shadow:0 4px 24px rgba(11,30,56,0.08);}
.prose .updated{font-size:13px;color:var(--neutral-gray);margin:0 0 28px;padding-bottom:20px;border-bottom:1px solid var(--chalk-dim);}
.prose h2{
  font-family:'Public Sans',sans-serif;font-weight:800;text-transform:none;letter-spacing:0;
  font-size:19px;color:var(--goal-navy);line-height:1.3;margin:32px 0 12px;
}
.prose h2:first-of-type{margin-top:0;}
.prose h3{
  font-family:'Public Sans',sans-serif;font-weight:800;text-transform:none;letter-spacing:0;
  font-size:15.5px;color:var(--goal-navy);margin:20px 0 8px;
}
.prose p{font-size:15px;line-height:1.75;color:#374A41;margin:0 0 15px;}
.prose ul,.prose ol{font-size:15px;line-height:1.75;color:#374A41;margin:0 0 15px;padding-left:22px;}
.prose li{margin-bottom:7px;}
.prose a{color:var(--brand-blue);text-decoration:underline;}
.prose strong{color:var(--goal-navy);}
.prose table{margin:12px 0 20px;}
.prose .callout{
  background:var(--chalk);border-left:4px solid var(--brand-orange);
  border-radius:0 10px 10px 0;padding:14px 18px;margin:0 0 20px;font-size:14px;line-height:1.6;color:#374A41;
}
@media (max-width:640px){ .prose{padding:28px 22px;} }

/* ---------- FAQ ACCORDION ---------- */
.faq-list{max-width:740px;margin:0 auto;display:flex;flex-direction:column;gap:12px;}
.faq-item{background:#fff;border-radius:12px;box-shadow:0 4px 18px rgba(11,30,56,0.08);overflow:hidden;}
.faq-item summary{
  list-style:none;cursor:pointer;padding:18px 22px;font-weight:800;font-size:15px;color:var(--goal-navy);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+';font-size:20px;color:var(--brand-orange);font-weight:800;flex-shrink:0;}
.faq-item[open] summary::after{content:'\2212';}
.faq-item .faq-answer{padding:0 22px 20px;font-size:14.5px;line-height:1.7;color:#374A41;}
.faq-item .faq-answer a{color:var(--brand-blue);}

/* ---------- INLINE ACCORDION (flows inside an existing card, no nested box) ---------- */
.tips-accordion{border-bottom:1.5px solid var(--chalk-dim);margin-bottom:24px;padding-bottom:24px;}
.tips-accordion summary{
  list-style:none;cursor:pointer;
  font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:0.01em;
  font-size:24px;line-height:1.1;color:var(--goal-navy);
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 0;
}
.tips-accordion summary::-webkit-details-marker{display:none;}
.tips-accordion summary::after{
  content:'+';font-size:22px;color:var(--brand-orange);font-weight:800;flex-shrink:0;
  font-family:'Public Sans',sans-serif;
}
.tips-accordion[open] summary::after{content:'\2212';}
.tips-accordion[open] summary{margin-bottom:18px;}
.tips-accordion .tips-body{color:var(--ink);}
.tips-accordion .tips-body p,.tips-accordion .tips-body li{font-size:15px;line-height:1.1;}
.tips-accordion .tips-body p{margin:0 0 15px;}
.tips-accordion .tips-body ul{margin:0 0 16px;padding-left:20px;}
.tips-accordion .tips-body li{margin-bottom:6px;}
.tips-accordion .tips-body a{color:var(--brand-blue);}
.tips-accordion .tips-body .tips-photo{width:200px;height:auto;border-radius:14px;object-fit:cover;float:right;margin:0 0 14px 22px;}
@media (max-width:520px){.tips-accordion .tips-body .tips-photo{float:none;display:block;margin:0 0 14px;}}

/* ---------- CONTACT PAGE ---------- */
.contact-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:28px;align-items:start;max-width:900px;margin:0 auto;}
@media (max-width:760px){ .contact-grid{grid-template-columns:1fr;} }
.contact-info{background:var(--goal-navy);color:var(--chalk);border-radius:16px;padding:32px;}
.contact-info h3{font-size:14px;text-transform:uppercase;letter-spacing:0.06em;color:var(--turf-line);margin:0 0 6px;font-family:'Public Sans',sans-serif;font-weight:800;}
.contact-info p{font-size:14px;line-height:1.6;color:#C9D3CD;margin:0 0 22px;}
.contact-info a{color:var(--brand-orange);font-weight:700;}

/* ---------- SIMPLE STAT / VALUE CARDS ---------- */
.value-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin:32px 0;}
.value-card{background:#fff;border-radius:14px;padding:24px;box-shadow:0 4px 18px rgba(11,30,56,0.08);}
.value-card h3{font-size:15.5px;color:var(--goal-navy);margin:0 0 8px;font-family:'Public Sans',sans-serif;font-weight:800;}
.value-card p{font-size:14px;line-height:1.65;color:var(--neutral-gray);margin:0;}

.disclaimer-box{
  background:#FBEAE8;border:1px solid #F1C4BE;border-radius:10px;
  padding:14px 18px;font-size:13.5px;line-height:1.6;color:#7A2E24;margin:0 0 24px;
}

/* ---------- PHOTO UPLOAD (file picker + inline thumbnail slots) ---------- */
.photo-upload-row{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  border:1.5px dashed var(--chalk-dim);border-radius:8px;padding:12px 14px;background:#fff;
}
.photo-preview-grid{display:flex;flex-wrap:wrap;gap:10px;margin:0;}
.photo-preview-item{
  position:relative;width:110px;height:74px;border-radius:8px;overflow:visible;
  border:1.5px solid var(--chalk-dim);background:var(--chalk);
}
.photo-preview-item img{width:100%;height:100%;object-fit:cover;display:block;border-radius:7px;}
.photo-preview-remove{
  position:absolute;top:-10px;right:-10px;width:26px;height:26px;border-radius:50%;
  background:#fff;color:var(--danger);border:2px solid var(--danger);font-size:15px;font-weight:800;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;
  box-shadow:0 2px 6px rgba(11,30,56,0.25);
}
.photo-preview-remove:hover{background:var(--danger);color:#fff;}
.disclaimer-box.neutral{background:#EAF1FB;border-color:#C7DBF5;color:#0B3E7A;}