/*
 * App mode: only inside the Android app (display-mode: standalone). The website is untouched.
 */
@media (display-mode: standalone) {

	/* Header: the website's own light green (Astra global colour 4, #EDFBE2: what the floating
	   header shows through on the website), compact and in the page flow. The app's status bar is
	   the same green (app 1.2.0). Icons and menu links keep the website's colours (black account
	   icon, green menu button). 1.0.2 had it brand blue with white icons; 1.0.1 had it white.
	   Astra's transparent header floats it over the content (position: absolute), which is what
	   the "start below the floating header" padding in the Customizer CSS works around. */
	.ast-theme-transparent-header #masthead {
		position: relative !important;
	}
	#masthead .main-header-bar,
	#masthead .ast-primary-header-bar {
		background: var(--ast-global-color-4, #EDFBE2) !important;
		border-bottom: 0 !important;
	}
	#masthead .ast-builder-grid-row {
		min-height: 56px !important;
	}
	#masthead .site-logo-img img,
	#masthead .custom-logo {
		max-height: 40px !important;
		width: auto !important;
	}

	/* Site menu: the menu button opens Astra's drop-down under the bar (phones and tablets in
	   portrait); wider screens show the menu in the bar. The drop-down is the same light green as
	   the bar (the website paints it white with #f9f9f9 menus), with thin green dividers and a
	   shadow to set it off from the page, which is the same green. */
	#masthead .ast-mobile-header-content,
	#masthead .ast-mobile-header-content .main-header-menu,
	#masthead .ast-mobile-header-content .sub-menu {
		background: var(--ast-global-color-4, #EDFBE2) !important;
	}
	#masthead .ast-mobile-header-content {
		box-shadow: 0 10px 24px rgba(11, 58, 83, .18);
		max-height: calc(100vh - 56px);
		overflow-y: auto;
	}
	#masthead .ast-mobile-header-content .menu-item {
		border-bottom: 1px solid var(--ast-global-color-6, #D5EAD8);
	}
	#masthead .ast-mobile-header-content .menu-item:last-child {
		border-bottom: 0;
	}

	/* With the header in the flow, the offsets that pushed content below it are no longer needed. */
	#content {
		padding-top: 16px !important;
	}
	.asa-why .asa-hero,
	.asa-why .asa-store-hero {
		margin-top: 16px !important;
	}
	.elementor-6097 .elementor-element.elementor-element-241cfa88 {
		margin-top: 0 !important;
	}
	/* Dashboard (/user/, page 4302): the dashboard plugin's own 92/108px offset, and its
	   container's 30px (20px on phones) margin. */
	body.ast-theme-transparent-header .afd {
		padding-top: 0 !important;
	}
	.elementor-4302 .elementor-element.elementor-element-6f506328 {
		--margin-top: 0px !important;
		margin-top: 0 !important;
	}
	/* Login (4303): the form's container sits 50/70px down. Registration (4304), Account (4307)
	   and Password Reset (4308): the page heading has a 50px top margin. */
	.elementor-4303 .elementor-element.elementor-element-1f9c9f3e {
		--margin-top: 0px !important;
		margin-top: 0 !important;
	}
	.elementor-4304 .elementor-element.elementor-element-9becc21 > .elementor-widget-container,
	.elementor-4307 .elementor-element.elementor-element-5610e84 > .elementor-widget-container,
	.elementor-4308 .elementor-element.elementor-element-5654ece > .elementor-widget-container {
		margin-top: 0 !important;
	}

	/* Login: no Register button; Login takes the full width. */
	.um-login .um-col-alt .um-right.um-half {
		display: none !important;
	}
	.um-login .um-col-alt .um-left.um-half {
		width: 100% !important;
		float: none !important;
	}

	/* No app tab bar (removed in 1.0.2): the bottom of every page is the website's own, and the
	   dashboard keeps the dashboard plugin's pinned buttons, which also lift the language picker. */

	/* ===== Spacing pass 2026-09-28 (1.0.4): the remaining offsets that only existed to clear the website's floating header,
	   found by measuring every page in the app view. ===== */
	/* ===== Main pages spacing (2026-09-28). Goes anywhere inside the @media (display-mode: standalone) block. ===== */
	/* Designed pages' hero card (About, Why Choose, Enhancements, Enrollment, FAQ, Resources, Contact):
	   the plugin's shared 16px hero rule plus #content's 16px put it 32px under the header; 4px makes it 20px.
	   "body" outranks the shared ".asa-why .asa-hero, .asa-why .asa-store-hero" rule, so this works
	   wherever it is placed; the shop's .asa-store-hero keeps its 16px. */
	body .asa-why .asa-hero {
		margin-top: 4px !important;
	}
	/* Home (2732): the logo column's 20px margin + 30px padding and the logo's own 70px margin (all there
	   to clear the website's floating header) left 146px of empty green above the logo. Now 16px, like
	   the page padding. */
	.elementor-2732 .elementor-element.elementor-element-9923533 {
		--padding-top: 0px !important;
	}
	.elementor-2732 .elementor-element.elementor-element-479e7df {
		--margin-top: 0px !important;
		--padding-top: 0px !important;
		margin-top: 0 !important;
		padding-top: 0 !important;
	}
	.elementor-2732 .elementor-element.elementor-element-7504643 > .elementor-widget-container {
		margin-top: 0 !important;
	}
	/* Home, app on a tablet or a phone turned sideways (768px and wider, where the logo and the mascot
	   sit side by side): the mascot column's 121px website offset left it hanging 121px below the logo.
	   Start both columns at the top. */
	.elementor-2732 .elementor-element.elementor-element-cd7a6d8 {
		--margin-top: 0px !important;
	}
	/* Graduation (2783): the title's 200px margin and its container's 10px padding put it 236px under
	   the header. */
	.elementor-2783 .elementor-element.elementor-element-35db82e {
		--padding-top: 0px !important;
	}
	.elementor-2783 .elementor-element.elementor-element-c1239f1 > .elementor-widget-container {
		margin-top: 0 !important;
		padding-top: 0 !important;
	}
	/* Privacy Policy (4897): the page's inline 140px top padding put the title 156px under the header.
	   (Higher specificity than the website rule, which needs !important to beat the inline style.) */
	html body.page-id-4897 .asa-why.asa-embed > .asa-sec[style*="padding-top"] {
		padding-top: 0 !important;
	}
	/* ===== end Main pages spacing ===== */

	/* Shop pages (spacing audit 2026-09-28). #content's 16px already clears the in-flow header, so
	   the website's own offsets on these pages only add empty space in the app. (Checkout needs no app
	   rule: the website block zeroes its container margin and padding, leaving #content's 16px.) */
	/* Shop (3477): the hero's 16px on top of #content's 16px made 32px. */
	.woocommerce-shop .asa-why .asa-store-hero {
		margin-top: 0 !important;
	}
	/* Shop page 2+, product categories and product search: the website's 28px offsets. */
	.woocommerce-shop.paged .ast-woocommerce-container,
	.tax-product_cat .woocommerce-products-header {
		padding-top: 0 !important;
	}
	body.tax-product_cat #primary,
	body.search.post-type-archive-product #primary {
		margin-top: 0 !important;
	}
	/* My Account (7056): #content's 16px plus the container's 10px inner padding put the heading
	   26px down; 16px like the other shop pages. */
	.elementor-7056 .elementor-element.elementor-element-d469535 > .e-con-inner {
		padding-top: 0 !important;
	}

	/* Time card (6097): 16px + the container's own 10px padding put the attendance note 26px under the bar; 8px
	   makes it 18px. */
	.page-id-6097 #content {
		padding-top: 8px !important;
	}
	/* Login, Registration, Account, Password reset on wide screens (tablets in landscape, 922px and up): no website
	   desktop offset (136px margin), and no Astra 72px top padding either (Astra pads #primary instead of giving it a
	   margin between 922px and 992px, which left the card 88px under the bar there); the card starts 16px under the
	   bar at every width. */
	body:is(.page-id-4303, .page-id-4304, .page-id-4307, .page-id-4308) #primary {
		margin-top: 0 !important;
		padding-top: 0 !important;
	}
}