/* Ijara 360 App page — a port of "Ijara 360 App.dc.html".

   Scoped under .ij-app360 so the other Beaver Builder pages are untouched.
   Layout lives in the template's inline styles, as on every other
   redesigned page; this file carries the base typeface, the hover states an
   inline style cannot express, and the design's own breakpoints. */

.ij-app360 { font-family: var(--font-sans); font-weight: 500; color: var(--color-text); -webkit-font-smoothing: antialiased; }
.ij-app360 a { text-decoration: none; }

/* bb-theme's base sheet underlines links on hover and paints a system-blue
   focus ring, and Beaver Builder's skin adds `.fl-page-content a:hover`
   (0-2-1). Both load after this file, so the leading `body` is what lets
   these win rather than tie. */
body .ij-app360 a:hover, body .ij-app360 a:focus { text-decoration: none; }
body .ij-app360 a:focus { outline: none; }

.ij-app360 a:focus-visible {
	outline: 2px solid var(--brand-green-dark);
	outline-offset: 2px;
	border-radius: 100px;
}

/* ---- Buttons --------------------------------------------------------------
   Colour restated with each background: without it `color` falls through to
   the link hover colour and repaints the label. */

.ij-app360 .scp0,
.ij-app360 .scp1 { transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms cubic-bezier(0.4, 0, 0.2, 1); }

body .ij-app360 .scp1:hover,
body .ij-app360 .scp1:focus-visible {
	background: var(--brand-green-dark) !important;
	color: #fff;
}

body .ij-app360 .scp0:hover,
body .ij-app360 .scp0:focus-visible {
	border-color: var(--brand-green) !important;
	color: var(--color-text);
}

/* Images must never escape their rounded corners in Safari. */
.ij-app360 .appframe { isolation: isolate; }

@media (prefers-reduced-motion: reduce) {
	.ij-app360 .scp0,
	.ij-app360 .scp1 { transition: none; }
}

/* ---- Breakpoints: the design's own ---------------------------------------
   `.appgrid` goes to two columns at 1000px and one at 620px; `.appsplit`
   stacks at 900px with every row text-first. */

@media (max-width: 1000px) {
	.ij-app360 .appgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 900px) {
	.ij-app360 .appsplit { grid-template-columns: minmax(0, 1fr) !important; }
	.ij-app360 .appsplit > div { order: 0 !important; }
}

@media (max-width: 620px) {
	.ij-app360 .appgrid { grid-template-columns: minmax(0, 1fr) !important; }
	.ij-app360 section { padding-left: 16px !important; padding-right: 16px !important; }

	.ij-app360 h1 {
		font-size: 36px !important;
		letter-spacing: -1.4px !important;
	}

	.ij-app360 h2 {
		font-size: 30px !important;
		letter-spacing: -1px !important;
	}

	.ij-app360 .appstores a { width: 100%; justify-content: center; }
}