/*
Theme Name: Community Management
Theme URI: https://github.com/AgileCrafts/community-management
Description: A modern, highly-animated, light block theme for running a member community, association or alumni network on any WordPress site. Standalone (no parent theme). Pairs with the Community Management plugin but works without it. Modular and portable.
Author: AgileCrafts
Author URI: https://github.com/AgileCrafts
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: community-management
Tags: community, membership, block-theme, full-site-editing, animated, light
*/

/* =====================================================================
   Community Management — custom design layer.
   Layout/responsive utilities come from Tailwind (enqueued in
   functions.php); this file holds what Tailwind can't express: the
   WebGL hero canvas, scroll-reveal, gradient text, and the typography
   restyle for normal pages/posts + plugin shortcode output.
   Tokens mirror the approved preview.
   ===================================================================== */

:root{
	--cm-bg:#FAFBFD; --cm-surface:#FFFFFF; --cm-ink:#0E1116; --cm-slate:#5B6472;
	--cm-line:#E9ECF3; --cm-blue:#2563EB; --cm-braid:#1D4ED8; --cm-sky:#3B82F6;
	--cm-green:#10B981; --cm-red:#F43F5E;
	--cm-radius:20px; --cm-radius-sm:12px;
	--cm-shadow-soft:0 1px 2px rgba(14,17,22,.04),0 6px 20px rgba(14,17,22,.06);
	--cm-shadow-lift:0 16px 44px rgba(37,99,235,.16),0 4px 12px rgba(14,17,22,.06);
	--cm-ease:cubic-bezier(.22,.61,.28,1);
}

/* WordPress resolves theme.json's `medium` preset to an oversized 20px, which
   every un-sized element inherits (huge CTA, card text). Pin a sane base. */
body{background:var(--cm-bg);color:var(--cm-ink);-webkit-font-smoothing:antialiased;letter-spacing:-.01em;font-size:1.0625rem}

/* WordPress's flow layout injects a top-margin on every sibling after the
   first. Inside a Tailwind grid that shifts cards 2..n DOWN (equal height but
   misaligned tops), and on <main> — the 2nd flow child after the fixed header —
   it showed as a white strip above the page. Tailwind grids space with `gap`,
   so strip these injected margins. */
.wp-block-group.grid > *,.wp-block-group.flex > *{margin-block-start:0}
.wp-site-blocks > main{margin-block-start:0}
h1,h2,h3,h4{letter-spacing:-.03em}

/* ---- gradient text + WebGL hero ---- */
.cm-grad{background:linear-gradient(100deg,#2563EB,#3B82F6 60%,#0EA5E9);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cm-aurora{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.cm-hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 78% at 50% 6%,transparent 42%,rgba(250,251,253,.4) 76%,var(--cm-bg) 100%)}

/* ---- scroll reveal ---- */
.cm-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--cm-ease),transform .7s var(--cm-ease)}
.cm-reveal.in{opacity:1;transform:none}
.cm-d1{transition-delay:.08s}.cm-d2{transition-delay:.16s}.cm-d3{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){.cm-reveal{opacity:1;transform:none;transition:none}}

/* ---- avatar cluster ---- */
.cm-av{width:30px;height:30px;border-radius:50%;border:2px solid #fff;margin-left:-8px;display:inline-grid;place-items:center;font-size:.7rem;font-weight:600}

/* ---- floaty stat cards ---- */
@keyframes cm-floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.cm-floaty{animation:cm-floaty 5s ease-in-out infinite}

/* =====================================================================
   Normal pages / posts — restyle existing content, never change it.
   A clean, readable article layout so About / News / plugin pages look
   like they belong to this theme.
   ===================================================================== */
/* Gradient background band behind every page/post title, with white title
   text on top — one consistent, symmetric title treatment across the site. */
.cm-page-head{background:radial-gradient(85% 150% at 8% -15%,rgba(96,165,250,.45),transparent 55%),linear-gradient(112deg,#1E40AF 0%,#2563EB 30%,#0EA5E9 78%,#22D3EE 100%);border-bottom:none;padding:104px 0 44px}
.cm-page-head .wp-block-post-title{font-size:clamp(2.1rem,5vw,3.2rem);font-weight:700;line-height:1.08;color:#fff;-webkit-text-fill-color:#fff;background:none}
.cm-page-head .wp-block-post-date{color:rgba(255,255,255,.85)!important}
.cm-content{padding:28px 0 80px}
.cm-content .wp-block-post-content>*{margin-top:0;margin-bottom:1.15rem}
.cm-content h2{font-size:1.7rem;font-weight:700;margin:2.2rem 0 .8rem}
.cm-content h3{font-size:1.3rem;font-weight:600;margin:1.8rem 0 .6rem}
.cm-content a{color:var(--cm-blue);text-decoration:underline;text-underline-offset:3px}
.cm-content img{border-radius:var(--cm-radius-sm)}

/* ---- blog / archive listing ---- */
.cm-home-title{font-size:clamp(2.1rem,5vw,3.2rem);font-weight:700;line-height:1.08}
.cm-post-grid{gap:24px!important}
.cm-post-grid .cm-card{background:var(--cm-surface);border:1px solid var(--cm-line);border-radius:var(--cm-radius);padding:1.75rem;box-shadow:var(--cm-shadow-soft);transition:transform .3s var(--cm-ease),box-shadow .3s var(--cm-ease),border-color .3s;height:100%}
.cm-post-grid .cm-card:hover{transform:translateY(-6px);box-shadow:var(--cm-shadow-lift);border-color:#DCDEEA}
.cm-post-grid .wp-block-post-title a{color:var(--cm-ink);text-decoration:none}
.cm-post-grid .wp-block-post-title a:hover{color:var(--cm-blue)}
.cm-post-grid .wp-block-post-excerpt{color:var(--cm-slate)}
.cm-pagination{margin-top:2.5rem;gap:.4rem}
.cm-pagination a,.cm-pagination .current{padding:.4rem .8rem;border-radius:8px;border:1px solid var(--cm-line);text-decoration:none;color:var(--cm-ink)}
.cm-pagination .current{background:var(--cm-blue);color:#fff;border-color:var(--cm-blue)}

/* ---- buttons (blocks) inherit theme.json; add motion ---- */
.wp-block-button__link{transition:transform .18s var(--cm-ease),box-shadow .25s var(--cm-ease)}
.wp-block-button__link:hover{transform:translateY(-2px);box-shadow:var(--cm-shadow-lift)}

/* ---- sticky header — solid (blurred) always, so the nav and CTA buttons
   stay legible over ANY page background: the light hero, the gradient title
   band, a post's featured image, etc. Transparent headers made the CTA blend. */
.cm-header{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--cm-line);transition:background .3s var(--cm-ease),box-shadow .3s var(--cm-ease),border-color .3s var(--cm-ease)}
.cm-header > .wp-block-group{transition:height .3s var(--cm-ease)}
.cm-header .cm-logo img{transition:max-height .3s var(--cm-ease)}
/* on scroll: tighter + more translucent, like a typical shrinking sticky header */
.cm-header.cm-scrolled{background:rgba(255,255,255,.72);border-bottom-color:rgba(233,236,243,.7);box-shadow:0 6px 24px rgba(14,17,22,.08)}
.cm-header.cm-scrolled > .wp-block-group{height:58px!important}
.cm-header.cm-scrolled .cm-logo img{max-height:36px}
.cm-header .wp-block-site-title{margin:0}
.cm-header .wp-block-site-title a{color:var(--cm-ink);text-decoration:none}
.cm-nav .wp-block-navigation-item__content{color:#1F2937;font-weight:600;font-size:.92rem}
.cm-nav .wp-block-navigation-item__content:hover{color:var(--cm-blue)}
.cm-nav .wp-block-navigation__container{gap:1.1rem;flex-wrap:nowrap}
.cm-cta .wp-block-navigation__container,.cm-cta ul{gap:.55rem!important;flex-wrap:nowrap}
.cm-cta .wp-block-navigation-item__content{font-size:.9rem}

/* The 8-item menu sits on one line at desktop widths; from 600–1023px it
   collapses to the Navigation block's built-in hamburger overlay (below 600px
   WordPress already does this). WP owns the nav markup + its breakpoint, so
   this single component media query lives here — content-level responsiveness
   everywhere else is Tailwind utilities, not media queries. */
@media (min-width:600px) and (max-width:1023px){
	.cm-nav .wp-block-navigation__responsive-container-open{display:flex}
	.cm-nav .wp-block-navigation__responsive-container:not(.is-menu-open){display:none}
}

/* ---- header CTA markers (theme dynamic links: cm-link-*, and plugin: alumni-link-*) ---- */
.wp-block-navigation-item.cm-link-signup>a.wp-block-navigation-item__content,
.wp-block-navigation-item.alumni-link-signup>a.wp-block-navigation-item__content{background:linear-gradient(120deg,#2563EB,#3B82F6);color:#fff;border-radius:9px;padding:.6rem 1.15rem;box-shadow:var(--cm-shadow-lift)}
.wp-block-navigation-item.cm-link-signup>a.wp-block-navigation-item__content:hover,
.wp-block-navigation-item.alumni-link-signup>a.wp-block-navigation-item__content:hover{color:#fff;filter:brightness(1.06)}
.wp-block-navigation-item.cm-link-account>a.wp-block-navigation-item__content,
.wp-block-navigation-item.alumni-link-account>a.wp-block-navigation-item__content{color:var(--cm-ink);border:1px solid #D9DCE6;border-radius:9px;padding:.55rem 1.05rem}
.wp-block-navigation-item.cm-link-account>a.wp-block-navigation-item__content:hover,
.wp-block-navigation-item.alumni-link-account>a.wp-block-navigation-item__content:hover{background:#F4F6FD;border-color:var(--cm-blue)}

/* ---- plugin shortcode surfaces get a light, on-brand card treatment ---- */
.alumni-signup,.alumni-dashboard,.alumni-directory,.alumni-events-list,.alumni-articles-list{--wp--preset--color--accent-1:#2563EB;--wp--preset--color--accent-2:#10B981}

/* Membership signup form: the plugin ships a dark navy CTA panel with a purple
   button. Re-skin it to the light site palette so it's symmetric with the rest
   of the site, make input text visible, and space the submit button off the
   last field (it was overlapping). */
.alumni-signup--cta{background:var(--cm-surface)!important;color:var(--cm-ink)!important;border:1px solid var(--cm-line);box-shadow:0 12px 44px -14px rgba(14,17,22,.14)!important;border-radius:20px;padding:clamp(1.75rem,4vw,2.75rem)!important}
.alumni-signup--cta :where(p,span,small,legend){color:var(--cm-slate)}
/* plugin heading uses gradient-clipped transparent text — force a solid fill */
.alumni-signup--cta :where(h1,h2,h3,h4){color:var(--cm-ink)!important;-webkit-text-fill-color:var(--cm-ink)!important;background:none!important}
.alumni-signup--cta label{color:var(--cm-ink)!important;font-weight:500;font-size:.9rem}
/* visible field outlines + a clear focus ring (borders were near-invisible) */
.alumni-signup--cta input,.alumni-signup--cta select,.alumni-signup--cta textarea{background:#fff!important;color:var(--cm-ink)!important;border:1.5px solid #D5DAE5!important;border-radius:10px!important;padding:.72rem .9rem!important;font-size:.95rem!important;transition:border-color .18s var(--cm-ease),box-shadow .18s var(--cm-ease)}
.alumni-signup--cta input:focus,.alumni-signup--cta select:focus,.alumni-signup--cta textarea:focus{border-color:var(--cm-blue)!important;box-shadow:0 0 0 3px rgba(37,99,235,.14)!important;outline:none!important}
.alumni-signup--cta input::placeholder{color:#9AA3B2}
.alumni-signup--cta .alumni-signup__join-btn{background:linear-gradient(120deg,#2563EB 0%,#3B82F6 55%,#0EA5E9 100%)!important;color:#fff!important;width:100%;margin-top:1.5rem;padding:.85rem 1.5rem!important;border-radius:10px!important;font-size:1rem!important;font-weight:600!important;box-shadow:0 10px 24px -8px rgba(37,99,235,.5)}

/* in-site login form (wp_login_form rendered inside the account card) */
.alumni-login{max-width:460px}
.alumni-login .login-username,.alumni-login .login-password{display:flex;flex-direction:column}
.alumni-login .login-username label,.alumni-login .login-password label{font-weight:500;font-size:.9rem;margin-bottom:.35rem}
.alumni-login input[type=text],.alumni-login input[type=password]{width:100%}
.alumni-login .login-remember{display:flex;align-items:center;gap:.45rem;font-size:.88rem;color:var(--cm-slate)}
.alumni-login input[type=checkbox]{width:auto!important;padding:0!important;border-width:1.5px!important;border-radius:4px!important;margin:0}
.alumni-login #wp-submit{width:100%;margin-top:.4rem;border:0!important;cursor:pointer;background:linear-gradient(120deg,#2563EB 0%,#3B82F6 55%,#0EA5E9 100%)!important;color:#fff!important;padding:.85rem 1.5rem!important;border-radius:10px!important;font-size:1rem!important;font-weight:600!important;box-shadow:0 10px 24px -8px rgba(37,99,235,.5)}
.alumni-login__alt{font-size:.85rem;margin-top:.6rem;color:var(--cm-slate)}

/* ---- custom gallery lightbox (reliable; replaces the flaky native one) ---- */
.cm-lightbox{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:4vw;background:rgba(11,17,32,.92);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .3s var(--cm-ease)}
.cm-lightbox.open{opacity:1;pointer-events:auto}
.cm-lightbox img{max-width:92vw;max-height:88vh;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.5);transform:scale(.96);transition:transform .3s var(--cm-ease)}
.cm-lightbox.open img{transform:scale(1)}
.cm-lightbox__close{position:absolute;top:20px;right:26px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font-size:1.7rem;line-height:1;cursor:pointer;transition:background .2s}
.cm-lightbox__close:hover{background:rgba(255,255,255,.3)}
.cm-lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:2rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .2s}
.cm-lightbox__nav:hover{background:rgba(255,255,255,.3)}
.cm-lightbox__prev{left:22px}
.cm-lightbox__next{right:22px}

/* ---- "Get to know us" 3D gradient icon badges ---- */
.cm-cardicon{width:60px;height:60px;border-radius:17px;display:grid;place-items:center;font-size:1.75rem;line-height:1;margin:0 0 1.1rem;position:relative;overflow:hidden;background:linear-gradient(145deg,var(--ic-a),var(--ic-b));box-shadow:0 12px 22px -8px var(--ic-sh),inset 0 1px 0 rgba(255,255,255,.45);transition:transform .4s var(--cm-ease)}
.cm-cardicon::before{content:"";position:absolute;left:0;right:0;top:0;height:52%;background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,0));pointer-events:none}
.cm-reveal:hover .cm-cardicon{transform:translateY(-4px) rotate(-5deg) scale(1.06)}
.cm-icon-about{--ic-a:#3B82F6;--ic-b:#2563EB;--ic-sh:rgba(37,99,235,.5)}
.cm-icon-events{--ic-a:#FB7185;--ic-b:#F43F5E;--ic-sh:rgba(244,63,94,.45)}
.cm-icon-publications{--ic-a:#34D399;--ic-b:#059669;--ic-sh:rgba(16,185,129,.45)}
.cm-icon-scholarship{--ic-a:#38BDF8;--ic-b:#2563EB;--ic-sh:rgba(14,165,233,.45)}
.cm-icon-gallery{--ic-a:#A78BFA;--ic-b:#6366F1;--ic-sh:rgba(139,92,246,.45)}
.cm-icon-contact{--ic-a:#FBBF24;--ic-b:#F97316;--ic-sh:rgba(245,158,11,.45)}

/* ---- Meet the Team cards ---- */
.cm-team-card{display:flex;flex-direction:column;align-items:center;text-align:center;height:100%;background:var(--cm-surface);border:1px solid var(--cm-line);border-radius:18px;padding:1.1rem;box-shadow:var(--cm-shadow-soft);transition:transform .35s var(--cm-ease),box-shadow .35s var(--cm-ease)}
.cm-team-card:hover{transform:translateY(-5px);box-shadow:var(--cm-shadow-lift)}
.cm-team-photo{width:auto;margin:.3rem auto 1rem}
.cm-team-photo img{width:132px;height:132px;object-fit:cover;border-radius:50%;display:block;box-shadow:0 6px 18px -6px rgba(14,17,22,.25)}
.cm-avatar{width:132px;height:132px;border-radius:50%;margin:.3rem auto 1rem;display:grid;place-items:center;background:linear-gradient(135deg,#2563EB,#0EA5E9);color:#fff;font-weight:700;font-size:2.2rem;box-shadow:0 6px 18px -6px rgba(37,99,235,.4)}
.cm-team-name{font-size:1.02rem;font-weight:700;margin:0 0 .2rem;line-height:1.25}
.cm-team-role{color:var(--cm-blue);font-weight:600;font-size:.85rem;margin:0 0 .4rem}
.cm-team-org{color:var(--cm-slate);font-size:.76rem;line-height:1.4;margin:0 0 .6rem;flex:1}
.cm-team-li{margin:auto 0 0}
.cm-team-li a{display:inline-flex;align-items:center;gap:.25rem;color:var(--cm-blue);font-size:.8rem;font-weight:600;text-decoration:none}
.cm-team-li a:hover{text-decoration:underline}

a:focus-visible,button:focus-visible,.wp-block-button__link:focus-visible{outline:2px solid var(--cm-blue);outline-offset:3px;border-radius:4px}

/* =====================================================================
   Homepage component styles. Layout + responsiveness live in Tailwind
   utility classes on the blocks (see patterns/home.php); this file holds
   only what Tailwind can't express on WordPress's nested button markup,
   plus the CTA-panel gradient. No media queries, no inline styles. The
   `.cm-hero` / `.cm-stat-num` classes are JS hooks (hero.js) and need no
   CSS — Tailwind handles their layout.
   ===================================================================== */

/* flat text-link buttons (card "Learn more", "See all news", read-more):
   dynamic href via cm-link-*, rendered as an inline link, not a filled button */
.cm-textlink .wp-block-button__link,
a.cm-textlink.wp-block-read-more{background:transparent;color:var(--cm-blue);padding:0;box-shadow:none;font-size:.85rem;font-weight:600;text-decoration:none}
.cm-textlink .wp-block-button__link:hover,
a.cm-textlink.wp-block-read-more:hover{transform:none;box-shadow:none;text-decoration:underline;text-underline-offset:3px}

/* CTA panel gradient + its button variants (nested <a>, not Tailwind-able) */
.cm-cta-panel{background:linear-gradient(130deg,#1D4ED8,#2563EB 55%,#0EA5E9)}
.cm-cta-panel .cm-btn-invert .wp-block-button__link{background:#fff;color:var(--cm-braid)}
.cm-cta-panel .cm-btn-ghost .wp-block-button__link{background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff}
.cm-cta-panel .cm-btn-ghost .wp-block-button__link:hover{background:rgba(255,255,255,.1)}

/* ---- site logo (header) ---- */
.cm-logo a{display:inline-flex;align-items:center}
.cm-logo img{display:block;width:auto;height:auto;max-height:46px}

/* ---- homepage video embed: gradient-framed, glowing, 16:9 responsive ---- */
.cm-video{max-width:840px;margin:0 auto;padding:6px;border-radius:20px;background:linear-gradient(130deg,#2563EB,#3B82F6 55%,#06B6D4);box-shadow:0 30px 55px -22px rgba(37,99,235,.55)}
.cm-video__frame{position:relative;padding-top:56.25%;border-radius:15px;overflow:hidden;background:#0B1120}
.cm-video__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* ---- gallery tiles: uniform square, cover-cropped, hover-zoom, lightbox ---- */
.cm-gallery-img{position:relative;margin:0;border:1px solid var(--cm-line);border-radius:16px;overflow:hidden;box-shadow:var(--cm-shadow-soft);aspect-ratio:1;transition:transform .4s var(--cm-ease),box-shadow .4s var(--cm-ease)}
.cm-gallery-img:hover{transform:translateY(-4px);box-shadow:var(--cm-shadow-lift)}
.cm-gallery-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--cm-ease);cursor:zoom-in}
.cm-gallery-img:hover img{transform:scale(1.08)}
/* hover veil + zoom cue — pure CSS, pointer-events:none so the lightbox still fires */
.cm-gallery-img::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(11,17,32,.5),rgba(11,17,32,0) 55%);opacity:0;transition:opacity .4s var(--cm-ease)}
.cm-gallery-img:hover::after{opacity:1}
.cm-gallery-img::before{content:"\2922";position:absolute;z-index:2;right:10px;bottom:10px;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.94);color:var(--cm-blue);font-size:1.05rem;font-weight:700;box-shadow:var(--cm-shadow-soft);opacity:0;transform:scale(.6) translateY(6px);transition:.4s var(--cm-ease)}
.cm-gallery-img:hover::before{opacity:1;transform:scale(1) translateY(0)}
/* WordPress's lightbox overlay shows the full, uncropped image */
.wp-lightbox-overlay img{object-fit:contain}