/**
 * Known Universe - Access Content Page (Member-facing)
 *
 * Plain CSS for the six-section layout. Originally carried over the exact
 * negative-margin spacing from the Elementor export (template 67859), but
 * those values existed only to compensate for Elementor's own heading
 * widget spacing quirks - confirmed 08-13-2026 from Dianne's live
 * screenshot, where that same pull-up caused each section's image to
 * overlap its own heading text, since plain HTML headings don't carry
 * Elementor's extra spacing to begin with. Replaced with normal, positive
 * spacing between heading and row instead of reproducing that workaround.
 *
 * Heading color/size/font need !important - confirmed 08-13-2026 
 * Decided to make the heading color adjustable for the World Hosts.
 * They can make the font color change to fit their new ability to
 * customize more elements on the page. The default font color is
 * #122B46 (overrides Elementor color).
 *
 * Outer padding added directly here rather than relying on the World
 * Tab's own "Sub-tab Content Padding" setting - confirmed that setting
 * only applies to native BuddyBoss pages nested under a tab that has no
 * screen of its own (Members, Photos, Documents, etc.), never to a tab's
 * own direct content, which is what this page is.
 *
 * Created 08-13-2026. Revised 08-13-2026 twice (see notes above).
 */

.ku-access-content-page {
	box-sizing: border-box;
	width: 100%;
	padding: 10px 30px 5px 30px;
}

.ku-ac-page-banner {
	width: calc( 100% + 15px );
	margin-bottom: 25px;
	margin-left: -10px;
}

.ku-ac-page-sections {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.ku-ac-page-section {
	box-sizing: border-box;
	width: 50%;
	padding: 0 20px 20px 0;
}

/* NOTE: --ku-world-font-color has no default value set anywhere in this
 * file - it only exists when a Host checks "Also use my Button Background
 * color for Section Title text" on their Design Settings panel. When
 * checked, it's set on .group-{id} by a small inline <style> block
 * printed in PHP - see output_group_style_inline() in
 * knownuni/classes/design/class-ku-design-card.php - not from this file.
 * Unchecked, the var() fallback below (#122B46) is what actually applies.
 * Added 2026-08-14. */
.ku-ac-page-heading {
	margin: 15px 0 20px 30px !important;
	font-size: 18px !important;
	font-weight: 500 !important;
	color: var(--ku-world-font-color, #122B46) !important;
}

.ku-ac-page-row {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 20px;
	width: 92%;
	margin: 0 0 0 30px;
}

.ku-ac-page-image-col {
	flex: 0 0 100px;
	width: 100px;
}

.ku-ac-page-image-col img {
	display: block;
	width: 100%;
	height: auto;
}

.ku-ac-page-content-col {
	flex: 1 1 auto;
	min-width: 0;
}

/* +2px above/below button text - scoped to this page only, since
   .elementor-button is shared sitewide (confirmed live 08-13-2026:
   5px top/bottom, 10px left/right by default). !important + the extra
   .ku-ac-page-content-col level of specificity are both needed - Host
   button-color customization already outputs its own inline
   .group-{id} .nonu-button rule (wp_head, priority 20) setting the same
   5px padding at the same specificity as a plain two-class rule here,
   and it prints after this stylesheet, so a plain rule loses the tie. */

.ku-access-content-page .ku-ac-page-content-col .elementor-button {
	padding-top: 7px !important;
	padding-bottom: 7px !important;
}

/* Stacked to a single column on phones - Design Document v3, section 13.
   Image and content stay side by side within a section even on phones,
   matching the 67859 export's own mobile settings - only the six-section
   grid itself stacks. */

@media ( max-width: 767px ) {

	.ku-access-content-page {
		padding: 16px 16px 5px 16px;
	}

	.ku-ac-page-section {
		width: 100%;
		padding-right: 0;
	}

	.ku-ac-page-row {
		width: 100%;
		margin: 0 0 16px 0;
		gap: 10px;
	}

	/* Keep the title aligned with the image's left edge on phones too,
	   where the row itself no longer carries the 20px indent. */
	.ku-ac-page-heading {
		margin-left: 0;
	}
}

/* Preview banner (Design Document v3, section 12) - added 08-13-2026.
   Only ever shown to that World's own Host or Dianne, when they open a
   Preview link with unpublished draft changes still pending - regular
   Members visiting the real page never see this, since $is_preview in
   KU_Access_Content_Page::render_page() only turns on for that viewer. */

.ku-ac-preview-banner {
	background: #FFF4E5;
	border: 1px solid #E8A33D;
	color: #6B4A16;
	font-size: 14px;
	font-weight: 600;
	padding: 10px 16px;
	margin: 0 0 15px 0;
	border-radius: 4px;
}