.main-container { max-width: 1200px; margin:0 auto; }
#site-footer { background-color:white; }
.org-banner { background-size:cover; position:relative; margin-bottom:10px; }
.org-banner-soc-links { padding:10px; }
.org-banner-soc-links a span { color:lightgray; text-shadow: 4px 4px 8px #111; }
.org-banner-left-side { position:relative; min-height:200px; padding-right:33%; }
.org-logo-holder { text-align:right; }
.org-logo-holder img { box-shadow: 0px 10px 10px #333; margin-bottom:-73px !important; margin-right: 15px; height:80px !important;
	margin-top:0 !important; z-index:999; position:relative; object-fit:contain; background-color:white; border-radius: 3px; top:-92px; }
.banner-big-name { margin-left:30px; margin-top:15px; margin-bottom:10px; color: white; text-shadow: 4px 4px 8px #111;font-size: 48px;
	 text-transform: uppercase;z-index:11; }
.banner-big-name-sm { font-size: 36px; }
.banner-small-region { margin-left:45px; margin-top:10px; color: lightgray; text-shadow: 4px 4px 8px #111; font-size:28px; }
.banner-small-region a { color: lightgray; }
.banner-small-name-sm { font-size:20px; }
.color-subbanner { height:57px; box-shadow: 0px 3px 3px #555;box-sizing: border-box; text-align: center; padding:17px; z-index: 2; }
.trapezoid { height:0; border-bottom: 256px solid hsla(0, 0%, 0%, 0.5); border-left: 40px solid transparent; position:absolute;
	right:0;top:0;z-index: 1; }
.trap-text-block { color: #eee;text-align:right; padding: 0 20px; }

table.tabtable { margin:0 150px 0 5%; max-width: 614px; }
.tabrow { margin:0 0 0 50px; height:0; }
.tab_off, .tab_on { filter:brightness(90%) contrast(1.2); color:white; padding: 6px 12px !important;box-shadow: 5px 5px 5px hsla(0, 0%, 0%, 0.5);
	border-radius: 3px !important; text-shadow: 2px 2px 8px #111; }
.tab_on, .tab_off:hover { filter:brightness(70%) contrast(1.5); }

.org-info-container { margin: 0 auto; }
.local-event-srch { box-shadow: 0 0 4px hsla(0, 0%, 0%, 0.5); padding: 17px; border-radius: 5px; margin:8px; }

.about-us-section img { max-width: 100%; }
.about-us-section ol, .about-us-section ul {margin-right: 0px; padding: 0 20px; }
.about-us-section h1,.about-us-section h2,.about-us-section h3,.about-us-section h4,.about-us-section h5,.about-us-section h6
{ font-weight: normal; line-height: 1.2; }
.about-us-section hr { border: 0px; border-top: 1px solid #ccc; }
.about-us-section br { display:none; }
.about-us-section img.right { border: 1px solid #ccc; float: right; margin-left: 15px; padding: 5px; }
.about-us-section img.left { border: 1px solid #ccc; float: left;	margin-right: 15px; padding: 5px; }

/* =================================================================
   DJV 2026-07-17 - Redesigned club profile (ViewClub-wp.php).
   Theme tokens are set inline on .club-profile by the page:
     --club-accent  = co_CustomColor      --hero-image = banner jpg
   Everything below inherits from the tokens, so one stylesheet
   serves every client. The rules above are kept for the other pages
   that share this file (Events2-wp.php, ClubInvoiceHub-wp.php).
   ================================================================= */
.club-profile{
	--club-accent:#1d4ed8; --club-accent-ink:#ffffff; --club-ink:#1f2937; --club-muted:#6b7280;
	--club-line:#e5e7eb; --club-bg:#f4f6f9; --club-radius:.9rem;
	color:var(--club-ink);
	font-family:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.club-profile a:not(.btn){ color:var(--club-accent); } /* :not(.btn) - button-styled links keep their own text color */

/* ---- Hero ---- */
.club-hero{
	position:relative; min-height:300px; display:flex; align-items:flex-end; color:#fff;
	border-radius:var(--club-radius); overflow:hidden; margin-bottom:1.5rem;
	background:
		linear-gradient(90deg, rgba(15,23,42,.82) 0%, rgba(15,23,42,.45) 55%, rgba(15,23,42,.25) 100%),
		var(--hero-image, none),
		linear-gradient(120deg, var(--club-accent), #0f172a);
	background-size:cover;
	background-position:center;
	/* solid dark fallback - declared after the shorthand so it wins the cascade: if a bad
	   token voids the shorthand, the white hero text stays readable instead of vanishing */
	background-color:#0f172a;
}
.club-hero__content{ padding:2.5rem 1.5rem 1.5rem; }
.club-hero__type{ text-transform:uppercase; letter-spacing:.12em; font-size:.8rem; font-weight:600; opacity:.85; margin-bottom:.35rem; }
.club-hero__name{ font-weight:700; line-height:1.05; margin-bottom:.6rem; color:#fff; }
.club-hero__addr{ font-size:1rem; opacity:.9; margin:0; }
.club-hero__parent{ font-size:.95rem; margin:.4rem 0 0; }
.club-hero__parent a{ color:#fff; opacity:.85; }
.club-hero__logo{
	position:absolute; top:1.25rem; right:1.25rem;
	background:#fff; border-radius:.5rem; padding:.35rem; box-shadow:0 4px 14px rgba(0,0,0,.25);
}
/* ShowOrgPhoto()/ClientLogo() imgs carry inline sizing/margins - override them */
.club-hero__logo img{ height:64px !important; max-height:64px !important; width:auto; object-fit:contain; display:block; margin:0 !important; }

/* ---- Flexible card grid (DJV 2026-07-18) ----
   Cards live in a flex-wrap row and grow to fill the width, so a club with only a
   section or two never leaves the trailing gap the old fixed col-lg-* widths did.
   Contact stays a sidebar (doesn't grow); About/Map + the social feeds absorb the rest. */
.club-profile .club-cards{
	display:flex; flex-wrap:wrap; gap:1.5rem;   /* 1.5rem gap == the old Bootstrap g-4 gutter */
	align-items:stretch;        /* cards sharing a row match the tallest one */
	justify-content:center;     /* a lone card (e.g. contact-only) centers instead of hugging left */
}
.club-profile .club-col{ flex:1 1 22rem; min-width:0; }  /* grow to fill; wrap when narrower than ~22rem */
.club-profile .club-col--contact{ flex-grow:0; }         /* Contact keeps its sidebar width; feeds take the rest */
/* Below lg the cards stack one-per-row, so Contact must fill too - otherwise its flex-grow:0
   leaves it alone on its row at 22rem and justify-content:center centers it narrower than the
   hero and the cards below it. Matches Bootstrap's lg boundary (DJV 2026-07-18). */
@media (max-width: 991.98px){
	.club-profile .club-col--contact{ flex-grow:1; }
}

/* ---- Cards ---- */
.club-profile .club-card{
	background:#fff; border:1px solid var(--club-line); border-radius:var(--club-radius);
	box-shadow:0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.05);
	height:100%;
}
.club-profile .club-card__head{
	display:flex; align-items:center; gap:.55rem; padding:1.1rem 1.25rem;
	border-bottom:1px solid var(--club-line); font-weight:600; font-size:1.05rem;
}
.club-profile .club-card__head svg{ color:var(--club-accent); flex:none; }
.club-profile .club-card__body{ padding:1.25rem; }

.club-profile .info-label{
	font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;
	color:var(--club-muted); font-weight:600; margin-bottom:.1rem;
}
.club-profile .info-value{ margin-bottom:1rem; }
.club-profile .info-value:last-child{ margin-bottom:0; }

/* ---- Right-column stack (About Us over the map) ----
   Inside the stack, cards size to content and the map card absorbs the
   leftover height so the column bottoms align with the Contact card. */
.club-profile .club-stack .club-card{ height:auto; }
.club-profile .club-stack .club-card--map{ flex:1 1 auto; }

/* ---- Map ----
   ShowMap() renders #map_canvas with Bootstrap's ratio helper; inside the
   card we let it stretch to fill the column instead of a fixed 16x9 box. */
.club-profile .club-card--map{ display:flex; flex-direction:column; }
.club-profile .club-card--map .club-map-body{ flex:1 1 auto; border-radius:0 0 var(--club-radius) var(--club-radius); overflow:hidden; }
.club-profile .club-map-body #map_canvas{ height:100%; min-height:340px; }
.club-profile .club-map-body #map_canvas::before{ display:none; }