/* APS Card System — promoted from the ?aps_cards=1 preview to production 2026-07-09.
   Scoped under body.aps-cards-on (added globally by mu-plugin aps-cards.php).
   Remove that body class to disable everything site-wide. */
body.aps-cards-on{
	--apsc-blue:#1c75bc; --apsc-navy:#0f3d5e; --apsc-teal:#568d9c; --apsc-gold:#ec8a20;
	--apsc-border:#dde4ea; --apsc-tint:#f4f7fb; --apsc-muted:#57687a;
	--apsc-shadow:0 1px 2px rgb(15 61 94 / .06);
}

/* Author bio — currently flat → teal top-accent card */
body.aps-cards-on .author-bio{
	background:#fff;
	border:1px solid var(--apsc-border);
	border-top:4px solid var(--apsc-teal);
	border-radius:6px;
	padding:16px 18px;
	box-shadow:var(--apsc-shadow);
}
/* Some templates (single.php authors repeater) render the "About the Author"
   heading as a sibling BEFORE .author-bio, which would orphan it above the card.
   When that happens, merge the heading and the box into one card. */
body.aps-cards-on .aside h2.subhead:has(+ .author-bio){
	background:#fff;
	border:1px solid var(--apsc-border);
	border-top:4px solid var(--apsc-teal);
	border-bottom:0;
	border-radius:6px 6px 0 0;
	margin:0;
	padding:16px 18px 4px;
	box-shadow:var(--apsc-shadow);
}
body.aps-cards-on .aside h2.subhead:has(+ .author-bio) + .author-bio{
	border-top:0;
	border-top-left-radius:0;
	border-top-right-radius:0;
	box-shadow:none;
}

/* Save / PDF / "Log in to save" controls — intentionally left UNstyled (no box). */

/* Press / study-author contact — currently flat → gold top-accent card */
body.aps-cards-on .press-contact{
	background:#fff;
	border:1px solid var(--apsc-border);
	border-top:4px solid var(--apsc-gold);
	border-radius:6px;
	padding:16px 18px;
	box-shadow:var(--apsc-shadow);
}

/* Public Policy — already has a gold left border → navy left-accent card */
body.aps-cards-on .policy{
	background:var(--apsc-tint);
	border:1px solid var(--apsc-border);
	border-left:4px solid var(--apsc-navy);
	border-radius:6px;
	padding:14px 16px 16px;
	margin:10px 0;
	box-shadow:var(--apsc-shadow);
}

/* Presidential column — already a solid blue box → just round + clip + lift */
body.aps-cards-on .pcolumns{
	border-radius:6px;
	overflow:hidden; /* clips the blue <h2> header to the rounded corners */
	box-shadow:var(--apsc-shadow);
}

/* small polish: give the "About the Author" heading a touch of the accent */
body.aps-cards-on .author-bio h2.subhead,
body.aps-cards-on .press-contact h2.subhead{
	color:var(--apsc-navy);
}

/* ---------- Wave 2: result & related cards ---------- */
/* Search results, news "observed" cards, and sidebar "Related" items all render
   as article.topic. Card each; overflow:hidden contains the float-left thumbnail. */
body.aps-cards-on article.topic{
	background:#fff;
	border:1px solid var(--apsc-border);
	border-top:4px solid var(--apsc-blue);
	border-radius:6px;
	padding:16px 18px;
	margin:0 0 18px;
	box-shadow:var(--apsc-shadow);
	overflow:hidden;
}
body.aps-cards-on .observed article.topic{ background:#fff; } /* white card on the beige section */

/* "Related" items in the sidebar: LEFT accent (instead of top) that cycles
   colors down the list. Their wrapper divs carry inline negative margins that
   would overlap the cards — neutralise those and set the per-item color there
   (it inherits into the article.topic). */
body.aps-cards-on .aside div:has(> article.topic){
	margin-top:0 !important; margin-bottom:16px !important;
	--_ritem:var(--apsc-blue);
}
body.aps-cards-on .aside div:nth-of-type(4n+2):has(> article.topic){ --_ritem:var(--apsc-gold); }
body.aps-cards-on .aside div:nth-of-type(4n+3):has(> article.topic){ --_ritem:var(--apsc-teal); }
body.aps-cards-on .aside div:nth-of-type(4n+4):has(> article.topic){ --_ritem:var(--apsc-navy); }
body.aps-cards-on .aside article.topic{
	padding:14px 16px;
	margin:0;
	border-top:1px solid var(--apsc-border);         /* drop the top accent here … */
	border-left:4px solid var(--_ritem,var(--apsc-blue)); /* … move it to the left */
}
/* subtly round the related thumbnails */
body.aps-cards-on article.topic img{ border-radius:4px; }

/* Keep the author callout and the Related list as separate, sibling blocks. */
body.aps-cards-on .aside .author-bio{ margin-bottom:18px; }
body.aps-cards-on .aside h2.subhead:has(+ .author-bio) + .author-bio{ margin-bottom:18px; }

/* ---------- Homepage & featured tiles ---------- */
/* Tiles are article.article inside ul.article-list (front page, featured
   content / featured sections). Frame each as a card; the image stays within
   the card padding so nothing upscales, with a gentle hover lift. */
body.aps-cards-on .article-list .article{
	background:#fff;
	border:1px solid var(--apsc-border);
	border-top:4px solid var(--_row,var(--apsc-blue));
	border-radius:6px;
	padding:14px;
	box-shadow:var(--apsc-shadow);
	transition:box-shadow .18s ease, transform .18s ease;
}
body.aps-cards-on .article-list .article:hover{
	box-shadow:0 8px 24px rgb(15 61 94 / .13);
	transform:translateY(-2px);
}
body.aps-cards-on .article-list .article img{ border-radius:4px; }
body.aps-cards-on .article-list .article h3 a{ color:var(--apsc-navy); }
/* Equal-height tiles: stretch each card to the tallest in its row. */
body.aps-cards-on .article-list > li{ display:flex; margin-bottom:20px; }
body.aps-cards-on .article-list .article{ flex:1 1 auto; margin:0; display:flex; flex-direction:column; }

/* Reusable sidebar callouts for WordPress-editor content — add ONE class to a
   Group/Paragraph block (Advanced → Additional CSS class):
     aps-sidebar-card        (blue)
     aps-sidebar-card-gold   (gold)
     aps-sidebar-card-teal   (teal)
     aps-sidebar-card-navy   (navy) */
body.aps-cards-on .aps-sidebar-card,
body.aps-cards-on .aps-sidebar-card-gold,
body.aps-cards-on .aps-sidebar-card-teal,
body.aps-cards-on .aps-sidebar-card-navy{
	background:var(--apsc-tint);
	border:1px solid var(--apsc-border);
	border-left:4px solid var(--_sc,var(--apsc-blue));
	border-radius:6px;
	padding:16px 18px;
	box-shadow:var(--apsc-shadow);
	margin:0 0 18px;
}
body.aps-cards-on .aps-sidebar-card-gold{ --_sc:var(--apsc-gold); }
body.aps-cards-on .aps-sidebar-card-teal{ --_sc:var(--apsc-teal); }
body.aps-cards-on .aps-sidebar-card-navy{ --_sc:var(--apsc-navy); }
body.aps-cards-on [class*="aps-sidebar-card"] > :first-child{ margin-top:0; }
body.aps-cards-on [class*="aps-sidebar-card"] > :last-child{ margin-bottom:0; }
@media (prefers-reduced-motion:reduce){
	body.aps-cards-on .article-list .article{ transition:none; }
	body.aps-cards-on .article-list .article:hover{ transform:none; }
}

/* Alternate the accent per featured row (--_row inherits down to the tiles). */
body.aps-cards-on .featured-tile-set{ --_row:var(--apsc-blue); }
body.aps-cards-on .featured-tile-set:nth-of-type(4n+2){ --_row:var(--apsc-gold); }
body.aps-cards-on .featured-tile-set:nth-of-type(4n+3){ --_row:var(--apsc-teal); }
body.aps-cards-on .featured-tile-set:nth-of-type(4n+4){ --_row:var(--apsc-navy); }

/* Drop the horizontal rule under each featured-row heading. */
body.aps-cards-on .featured-tile-set > hr.wp-block-separator{ display:none; }

/* ---------- Upcoming events ---------- */
/* Each .event already carries a cycling colored border; refine into a card with
   a single LEFT accent (remapped to the palette), rounded, and drop the <hr>s. */
body.aps-cards-on .impexium-upcoming .event{
	background:#fff;
	border:1px solid var(--apsc-border);
	border-left:4px solid var(--_ev,var(--apsc-blue));
	border-radius:6px;
	box-shadow:var(--apsc-shadow);
	margin:0 0 12px;
	padding:8px 6px;
	align-items:center;
}
body.aps-cards-on .impexium-upcoming .event:hover{
	background:#fff;
	border-left-width:4px;
	border-right-width:1px;             /* cancel the old both-sides widen */
	box-shadow:0 6px 18px rgb(15 61 94 / .12);
}
body.aps-cards-on .impxevent0{ --_ev:var(--apsc-blue); }
body.aps-cards-on .impxevent1{ --_ev:var(--apsc-gold); }
body.aps-cards-on .impxevent2{ --_ev:var(--apsc-teal); }
body.aps-cards-on .impxevent3{ --_ev:var(--apsc-navy); }
body.aps-cards-on .impxevent4{ --_ev:var(--apsc-blue); }
body.aps-cards-on .impexium-upcoming .event .date span.bigdate{ color:var(--_ev,var(--apsc-blue)); }
body.aps-cards-on .impexium-upcoming hr.wp-block-separator{ display:none; }

/* ---------- "Psychological Science in the News" ([mitn] shortcode) ---------- */
/* .psitn-holder is the box (currently a partial #CCC border); .psitn are the items. */
body.aps-cards-on .psitn-holder{
	background:#fff;
	border:1px solid var(--apsc-border);
	border-top:4px solid var(--apsc-gold);
	border-radius:6px;
	box-shadow:var(--apsc-shadow);
	padding:4px 18px 8px;
}
body.aps-cards-on .psitn{ border-bottom:1px solid var(--apsc-hairline); padding:12px 0; }
body.aps-cards-on .psitn:last-child{ border-bottom:0; }

/* ---------- Hero images ---------- */
/* Subtle rounding on the banner + a gentler hover zoom (was scale 1.2). */
body.aps-cards-on .hero{ border-radius:10px; }
body.aps-cards-on .hero a:hover img{ transform:scale(1.05); }

/* ---------- Navigation dropdowns ---------- */
/* Turn the flyout submenus into rounded cards matching the system (gold top edge,
   hairline border, softer shadow, subtle hover highlight on items). */
body.aps-cards-on .header-nav ul li ul{
	border:1px solid var(--apsc-border);
	border-top:3px solid var(--apsc-gold);
	border-radius:0 0 8px 8px;
	box-shadow:0 10px 26px rgb(15 61 94 / .16);
	padding:6px 0;
}
body.aps-cards-on .header-nav ul li ul li{ transition:background .12s ease; border-radius:4px; margin:0 6px; padding-left:8px; width:auto; }
body.aps-cards-on .header-nav ul li ul li:hover{ background:var(--apsc-tint); }
/* Sticky (scrolled) dropdown has a BLUE container with white text; a light hover
   tint would wash it out and the gold hover text is low-contrast on blue. Use a
   white hover pill instead so the gold link text reads cleanly. */
body.aps-cards-on .sticky .header-nav ul li ul li:hover{ background:#fff; }

/* ---------- Breadcrumbs ---------- */
/* Keep the signature GOLD, but refine it into the card language: rounded, inset,
   with a deeper-gold left accent bar and a navy hover. (Leaves .gscrumb/.blue alone.) */
body.aps-cards-on .breadcrumbs:not(.gscrumb):not(.blue){
	background:var(--apsc-gold);
	color:#fff;
	border:0;
	border-left:5px solid #b96c12;   /* deeper gold accent edge */
	border-radius:8px;
	padding:10px 18px;
	margin:10px 0;
}
body.aps-cards-on .breadcrumbs:not(.gscrumb):not(.blue) a{ color:#fff; text-decoration:none; }
body.aps-cards-on .breadcrumbs:not(.gscrumb):not(.blue) a:hover{ color:var(--apsc-navy); }
body.aps-cards-on .breadcrumbs:not(.gscrumb):not(.blue) span{ color:rgba(255,255,255,.9); }

/* ---------- Member info card ---------- */
/* .member-info wrapper added to the template; card the whole profile block. */
body.aps-cards-on .member-info{
	background:var(--apsc-tint);
	border:1px solid var(--apsc-border);
	border-top:4px solid var(--apsc-gold);
	border-radius:6px;
	padding:18px 20px;
	box-shadow:var(--apsc-shadow);
	overflow:hidden;             /* contain the floated avatar */
	margin:0 0 18px;
}
body.aps-cards-on .member-info h1{ color:var(--apsc-navy); }

/* ---------- Speaker cards ---------- */
/* The preview JS wraps each headshot + speaker-info pair into a .speaker-card. */
body.aps-cards-on .webinar-speakers .speaker-list{ flex-direction:column; gap:14px; }
body.aps-cards-on .webinar-speakers .speaker-card{
	display:flex;
	gap:16px;
	align-items:flex-start;
	background:#fff;
	border:1px solid var(--apsc-border);
	border-left:4px solid var(--apsc-teal);
	border-radius:6px;
	padding:16px;
	box-shadow:var(--apsc-shadow);
	width:100%;
}
body.aps-cards-on .webinar-speakers .speaker-card .headshot{ width:22%; margin:0; flex:0 0 auto; }
body.aps-cards-on .webinar-speakers .speaker-card .headshot img{ border-radius:6px; width:100%; }
body.aps-cards-on .webinar-speakers .speaker-card .speaker-info{ width:auto; flex:1 1 auto; }

/* Full-width pages print a duplicate breadcrumb (page-full-width.php + header.php) — hide the extra, site-wide. */
body.aps-cards-on section.breadcrumbs + section.breadcrumbs{display:none}

/* Hide the decorative rule directly under any section header (feathead) — homepage, Observer, etc. */
body.aps-cards-on h2.feathead + hr.wp-block-separator{display:none}

/* Full-bleed image on featured/observer tiles — image fills the card top and meets
   the colored top edge, matching the Observer archive cards (.nx-obs-card). */
body.aps-cards-on .article-list .article{padding:0 0 1.6rem;overflow:hidden}
body.aps-cards-on .article-list .article a:has(> img){display:block;line-height:0;margin:0 0 1.2rem}
body.aps-cards-on .article-list .article img,
body.aps-cards-on .article-list .article .feat-thumb-img{width:100%;height:18rem;object-fit:cover;display:block;border-radius:0;margin:0}
body.aps-cards-on .article-list .article > h3,
body.aps-cards-on .article-list .article > p,
body.aps-cards-on .article-list .article > .noth3,
body.aps-cards-on .article-list .article > .article-head{padding-left:1.4rem;padding-right:1.4rem}
body.aps-cards-on .article-list .article > .article-head{padding-top:1.2rem}