/* Ijara Contracts page.

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

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

/* ---- Parent-theme overrides ---------------------------------------------
   bb-theme/css/base.min.css underlines every link on hover and paints a
   system-blue focus ring, and Beaver Builder's generated skin carries
   `.fl-page-content a:hover { text-decoration: underline }` — which wraps
   this <main>. That selector scores 0-2-1 and both sheets load after this
   one, so a bare `.ij-contracts a:hover` would TIE and lose on load order.
   The leading `body` adds the element that settles it, exactly as in
   tokens.css. */
body .ij-contracts a:hover, body .ij-contracts a:focus { text-decoration: none; }
body .ij-contracts a:focus { outline: none; }

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

/* ---- Prose links ---------------------------------------------------------
   The design marks its one inline link in brand green at 600 rather than
   underlining it. The same treatment carries the page's other internal
   links. Each rule states its own colour: without it, `color` falls
   through to the link hover colour and paints them brand-orange. */

.ij-contracts .icprose a {
	color: var(--brand-green-dark);
	font-weight: 600;
}

.ij-contracts .icprose a:hover,
.ij-contracts .icprose a:focus-visible {
	color: var(--brand-green);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---- The index rail ------------------------------------------------------
   Four anchors down the left of #types, flush with the heading as in the
   design (no side border). The design's own rules: hover tints the title
   green, and the row for the panel in view (.is-on, set by the script at the
   foot of the template) takes the text colour. */

.ij-contracts .icrail { transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1); }
/* The design's titles inherit its body line-height (16px x 1.35 = 21.6px);
   this theme's body is 14px x 1.45, which made each row 2px shorter. */
.ij-contracts .icrail-t { line-height: 21.6px; }
body .ij-contracts .icrail:hover .icrail-t { color: var(--brand-green-dark); }
body .ij-contracts .icrail.is-on,
body .ij-contracts .icrail.is-on .icrail-t { color: var(--color-text); }

/* ---- The stacking panels -------------------------------------------------
   Every panel is sticky at the same offset, so each comes to rest under
   the header and the next slides over it. Two things that needs:

   1. an opaque background, or the panel beneath shows through;
   2. an increasing z-index, so a later panel covers an earlier one. The
      template cannot know the count, so nth-child does it here. */

.ij-contracts .icpanel:nth-child(1) { z-index: 1; }
.ij-contracts .icpanel:nth-child(2) { z-index: 2; }
.ij-contracts .icpanel:nth-child(3) { z-index: 3; }
.ij-contracts .icpanel:nth-child(4) { z-index: 4; }
.ij-contracts .icpanel:nth-child(5) { z-index: 5; }

/* The last panel has nothing to slide over it, so its upward shadow would
   sit against the section's own background with nothing to cast onto. */
.ij-contracts .icpanel:last-child { box-shadow: var(--shadow-card); }

/* Safari keeps an image's square corners over a rounded parent without
   this. */
.ij-contracts .icframe { isolation: isolate; }

@media (prefers-reduced-motion: reduce) {
	.ij-contracts .icrail { transition: none; }
}

/* ---- Breakpoints ---------------------------------------------------------
   The hero and intro are auto-fit grids and collapse on their own. The
   two that need stating are #types' fixed 260px index column and each
   panel's fixed two-column split. */

@media (max-width: 1024px) {
	/* The index stops being a column and becomes a row above the panels;
	   sticky is dropped with it, since a horizontal rail pinned under the
	   header would eat the space the panels need. */
	.ij-contracts .icgrid {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 32px !important;
	}

	.ij-contracts .icrail-wrap { position: static !important; }

	.ij-contracts .icrail-wrap > div {
		flex-direction: row !important;
		flex-wrap: wrap;
		gap: 8px 24px;
	}

	/* Stacking only reads as stacking when there is room to scroll between
	   panels. Below the split there is not, so they become plain cards. */
	.ij-contracts .icpanel { position: static !important; }
}

@media (max-width: 760px) {
	.ij-contracts .ictwo { grid-template-columns: minmax(0, 1fr) !important; }

	/* The design pushes the body text down to sit under a tall heading.
	   In one column that gap is just dead space. */
	.ij-contracts .icpanel-body { margin-top: 20px !important; }

	.ij-contracts .ichero h1 {
		font-size: 36px !important;
		letter-spacing: -1.3px !important;
	}
}