/* Aston Cross Housing — custom CSS.
   Colours, fonts and spacing are set in Elementor's Site Settings (global styles).
   Only put here what Elementor cannot express. */

/* Hero: the mockup slices the photo with a diagonal edge that the text sits
   inside. clip-path is the only way to express this, so it lives here rather
   than in Elementor. Disabled below 1024px, where the layout stacks. */
@media (min-width: 1025px) {
	#hero-photo {
		clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%);
		margin-left: -4%;
	}

	#hero-photo::before {
		content: "";
		position: absolute;
		inset: 0;
		clip-path: polygon(9% 0, 10.6% 0, 1.6% 100%, 0 100%);
		background: #065C39;
	}
}

/* Long uppercase headings can out-measure a narrow viewport. Scope this to
   heading widgets only — applying it to every h1-h3 also hits icon-box titles,
   where it breaks words like "Accommodation" mid-syllable. */
.elementor-widget-heading .elementor-heading-title {
	overflow-wrap: break-word;
}

/* --- Small screens ---------------------------------------------------------
   NOT YET VERIFIED below ~600px: headless Chrome clamps its layout viewport,
   so phone widths could not be checked in this environment. The header carries
   eight nav items plus two CTAs and will need a burger menu before launch;
   check on a real device before trusting this breakpoint. */
@media (max-width: 767px) {
	.elementor-widget-button .elementor-button {
		width: 100%;
		justify-content: center;
	}
}

/* About hero: same diagonal slice as the homepage hero. */
@media (min-width: 1025px) {
	#about-hero-photo {
		clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%);
		margin-left: -4%;
	}

	#about-hero-photo::before {
		content: "";
		position: absolute;
		inset: 0;
		clip-path: polygon(9% 0, 10.6% 0, 1.6% 100%, 0 100%);
		background: #065C39;
	}
}

/* "A foundation for brighter futures": the mockup fades the photo into the
   green rather than butting them together. */
#about-keys::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #065C39 0%, rgba(6, 92, 57, 0.55) 34%, rgba(6, 92, 57, 0) 72%);
}

/* Hello Elementor's reset paints bare <button> elements in #c36 (pink) — its
   own placeholder accent — on hover and focus. Nothing on this site should be
   pink, and it surfaces anywhere a plain button appears (FAQ accordions, and
   any form submit added later), so retire it here once. Elementor's own
   buttons use .elementor-button and are unaffected. */
button:not(.elementor-button),
[type="button"]:not(.elementor-button),
[type="submit"]:not(.elementor-button) {
	border-color: var(--e-global-color-primary, #065C39);
	color: var(--e-global-color-primary, #065C39);
}

button:not(.elementor-button):hover,
button:not(.elementor-button):focus,
[type="button"]:not(.elementor-button):hover,
[type="button"]:not(.elementor-button):focus,
[type="submit"]:not(.elementor-button):hover,
[type="submit"]:not(.elementor-button):focus {
	background-color: var(--e-global-color-primary, #065C39);
	color: #fff;
}

/* Accommodation option cards: the green icon disc overlaps the photo's bottom
   edge in the design, so pull it up out of normal flow. */
#acc-card-self-head,
#acc-card-shared-head {
	z-index: 2;
	padding-top: 14px;
}

/* Only the disc overlaps the photo — pulling the whole row up drags the title
   over the image too. */
#acc-card-self-badge,
#acc-card-shared-badge {
	margin-top: -48px;
}

/* A fixed circle. Elementor's container width/height controls do not hold a
   square here — the box stretches and the radius renders as a pill — so size it
   directly. */
#acc-card-self-badge,
#acc-card-shared-badge {
	width: 72px;
	height: 72px;
	min-height: 72px;
	flex: 0 0 72px;
	border-radius: 50%;
}

/* Numbered process steps (Referrals, Partner With Us, and the form pages).
   The number badge and the dashed connector are drawn here so each step stays
   a single Elementor widget. The step index arrives as data-step. */
.ach-step {
	position: relative;
}

.ach-step[data-step]::before {
	content: attr(data-step);
	position: absolute;
	top: -4px;
	left: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	margin-left: 12px;
	border-radius: 50%;
	background: var(--e-global-color-primary, #065C39);
	color: #fff;
	font-family: Montserrat, system-ui, sans-serif;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
}

/* Dashed rule linking one step to the next. */
.ach-step--connected::after {
	content: "";
	position: absolute;
	top: 50%;
	left: calc(50% + 42px);
	width: calc(100% - 84px);
	border-top: 1px dashed #C6D3CD;
}

@media (max-width: 1024px) {
	.ach-step--connected::after { display: none; }
}

/* Tenancy Sustainment: the green promise strip overlaps the hero above it. */
#ts-promise > .e-con-inner,
#ts-promise {
	margin-top: -46px;
	position: relative;
	z-index: 2;
}

/* Application / referral journey: numbered circles on a dashed rule. */
.ach-dot {
	position: relative;
}

.ach-dot > .e-con-inner,
.ach-dot .elementor-widget-heading {
	position: relative;
	z-index: 2;
}

.ach-dot .elementor-heading-title {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	margin: 0 auto;
	border: 1px solid #C6D3CD;
	border-radius: 50%;
	background: #fff;
}

.ach-dot--first .elementor-heading-title {
	border-color: var(--e-global-color-primary, #065C39);
	background: var(--e-global-color-primary, #065C39);
}

.ach-dot--connected::after {
	content: "";
	position: absolute;
	top: 17px;
	left: calc(50% + 24px);
	width: calc(100% - 48px);
	border-top: 1px dashed #C6D3CD;
}

@media (max-width: 1024px) {
	.ach-dot--connected::after { display: none; }
}

/* --- Forminator ------------------------------------------------------------
   Forminator ships its own design layer; these bring it in line with the
   mockups. Scoped to .forminator-custom-form so nothing else is affected. */
.forminator-ui.forminator-custom-form {
	--ach-green: var(--e-global-color-primary, #065C39);
	--ach-navy: var(--e-global-color-secondary, #0A2D45);
	--ach-hairline: #D9E0E5;
}

/* Labels */
.forminator-ui.forminator-custom-form .forminator-label {
	color: var(--ach-navy);
	font-family: Montserrat, system-ui, sans-serif;
	font-size: 12.5px;
	font-weight: 600;
}

/* Section headings ("Applicant Details" etc.) */
.forminator-ui.forminator-custom-form .forminator-title {
	color: var(--ach-green);
	font-family: Montserrat, system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .5px;
	text-transform: uppercase;
}

/* Inputs */
.forminator-ui.forminator-custom-form input[type="text"],
.forminator-ui.forminator-custom-form input[type="email"],
.forminator-ui.forminator-custom-form input[type="tel"],
.forminator-ui.forminator-custom-form input[type="number"],
.forminator-ui.forminator-custom-form input[type="date"],
.forminator-ui.forminator-custom-form textarea,
.forminator-ui.forminator-custom-form .forminator-input,
.forminator-ui.forminator-custom-form .forminator-textarea,
.forminator-ui.forminator-custom-form .forminator-select .select2-selection {
	border: 1px solid var(--ach-hairline);
	border-radius: 4px;
	background: #fff;
	color: var(--ach-navy);
	font-family: "Open Sans", system-ui, sans-serif;
	font-size: 13px;
}

.forminator-ui.forminator-custom-form input:focus,
.forminator-ui.forminator-custom-form textarea:focus,
.forminator-ui.forminator-custom-form .forminator-input:focus,
.forminator-ui.forminator-custom-form .forminator-textarea:focus {
	border-color: var(--ach-green);
	box-shadow: 0 0 0 2px rgba(6, 92, 57, .12);
	outline: none;
}

/* Submit button — matches the site's primary button */
.forminator-ui.forminator-custom-form button.forminator-button-submit,
.forminator-ui.forminator-custom-form .forminator-button-submit {
	border: 0;
	border-radius: 3px;
	background: var(--ach-green);
	color: #fff;
	font-family: Montserrat, system-ui, sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .6px;
	text-transform: uppercase;
	padding: 15px 26px;
	width: 100%;
	justify-content: center;
	transition: background-color .15s ease;
}

.forminator-ui.forminator-custom-form button.forminator-button-submit:hover,
.forminator-ui.forminator-custom-form button.forminator-button-submit:focus {
	background: #04482C;
	color: #fff;
}

/* Consent / checkbox text */
.forminator-ui.forminator-custom-form .forminator-checkbox__label,
.forminator-ui.forminator-custom-form .forminator-radio-label {
	color: #4A5560;
	font-family: "Open Sans", system-ui, sans-serif;
	font-size: 12.5px;
}

.forminator-ui.forminator-custom-form .forminator-checkbox__label a {
	color: var(--ach-green);
	text-decoration: underline;
}

/* Required marker */
.forminator-ui.forminator-custom-form .forminator-required {
	color: #C0392B;
}


/* Section headings need air above them, not below. */
.forminator-ui.forminator-custom-form .forminator-field-section {
	margin-top: 10px;
}

.forminator-ui.forminator-custom-form .forminator-border {
	display: none;
}

.forminator-ui.forminator-custom-form .forminator-title {
	margin-bottom: 4px;
}


/* Radio and checkbox rows */
.forminator-ui.forminator-custom-form .forminator-radio,
.forminator-ui.forminator-custom-form .forminator-checkbox {
	margin-bottom: 4px;
	font-size: 12.5px;
}

.forminator-ui.forminator-custom-form .forminator-field-section {
	margin-top: 6px;
}


/* Who We Help: the pale disc behind the house badge in the "who we are for" panel. */
#wwh-badge {
	width: 128px;
	height: 128px;
	min-height: 128px;
	flex: 0 0 128px;
	border-radius: 50%;
}


/* --- Forminator spacing ----------------------------------------------------
   Forminator's grid stylesheet targets rows with a six-class selector
   (`.forminator-ui.forminator-custom-form:not(.forminator-size--small)
   [data-grid=open] .forminator-row:not(:last-child)`), which outranks any
   plain override — it is (0,6,0), and the child stylesheet is enqueued BEFORE
   Forminator's, so equal-specificity rules lose too. Rather than chase it with
   an ever-longer selector against vendor CSS that may change, these few spacing
   declarations use !important. Values measured against the mockups at matched
   scale. */
body .forminator-ui.forminator-custom-form .forminator-row:not(:last-child) {
	margin-bottom: 8px !important;
}

body .forminator-ui.forminator-custom-form .forminator-label {
	margin-bottom: 3px !important;
}

body .forminator-ui.forminator-custom-form input[type="text"],
body .forminator-ui.forminator-custom-form input[type="email"],
body .forminator-ui.forminator-custom-form input[type="tel"],
body .forminator-ui.forminator-custom-form input[type="number"],
body .forminator-ui.forminator-custom-form input[type="date"],
body .forminator-ui.forminator-custom-form .forminator-input,
body .forminator-ui.forminator-custom-form .forminator-select .select2-selection--single {
	height: 36px !important;
	min-height: 36px !important;
	padding: 6px 11px !important;
}

body .forminator-ui.forminator-custom-form textarea,
body .forminator-ui.forminator-custom-form .forminator-textarea {
	min-height: 60px !important;
	height: 60px !important;
	padding: 7px 11px !important;
}

body .forminator-ui.forminator-custom-form .forminator-field-section {
	margin-top: 12px !important;
	margin-bottom: 0 !important;
}

body .forminator-ui.forminator-custom-form .forminator-field-section .forminator-field {
	padding: 0 !important;
	margin: 0 !important;
}

body .forminator-ui.forminator-custom-form .forminator-border {
	display: none !important;
}

body .forminator-ui.forminator-custom-form .forminator-title {
	margin-bottom: 4px !important;
}

body .forminator-ui.forminator-custom-form .forminator-radio,
body .forminator-ui.forminator-custom-form .forminator-checkbox {
	margin-bottom: 4px !important;
}

body .forminator-ui.forminator-custom-form .forminator-button-submit {
	margin-top: 8px !important;
}

/* ---------------------------------------------------------------------------
   Mobile tap targets

   Measured with build/mobile.py at 360/390/768px. Anything interactive that
   came out under ~44px square is padded out here. This tracks Elementor's
   tablet breakpoint rather than the mobile one, because a tablet is a finger
   target too; desktop is untouched.
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    /* Linked icon-list rows (phone, email, website) rendered as 21px-tall
       targets. Unlinked rows are left alone so bullet lists keep their spacing. */
    .elementor-widget-icon-list .elementor-icon-list-item > a {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    /* Forminator sizes its fields from per-form CSS carrying the form's element
       id, which outranks any class selector we can write -- the same trap as
       the row spacing above, so these need !important too. */
    .forminator-ui.forminator-custom-form .forminator-button-submit {
        min-height: 48px !important;
        font-size: 14px !important;
    }

    /* iOS Safari zooms the whole page when a focused field's text is under
       16px, which leaves the form scrolled sideways and half off-screen. 16px
       is the threshold, not a preference -- do not lower it. */
    .forminator-ui.forminator-custom-form input[type="text"],
    .forminator-ui.forminator-custom-form input[type="email"],
    .forminator-ui.forminator-custom-form input[type="tel"],
    .forminator-ui.forminator-custom-form input[type="url"],
    .forminator-ui.forminator-custom-form input[type="number"],
    .forminator-ui.forminator-custom-form input[type="date"],
    .forminator-ui.forminator-custom-form textarea,
    .forminator-ui.forminator-custom-form select {
        font-size: 16px !important;
    }

    /* 36px fields are hard to hit accurately. */
    .forminator-ui.forminator-custom-form input:not([type="checkbox"]):not([type="radio"]),
    .forminator-ui.forminator-custom-form select {
        min-height: 46px !important;
    }

    .forminator-ui.forminator-custom-form .forminator-label,
    .forminator-ui.forminator-custom-form .forminator-radio-label,
    .forminator-ui.forminator-custom-form .forminator-checkbox-label {
        font-size: 14px !important;
    }

    .forminator-ui.forminator-custom-form .forminator-title {
        font-size: 15px !important;
    }
}

/* A long word in a narrow card ("Accommodation" in a 102px column) has nothing
   to break on and renders straight out of its box. Cheap insurance on the card
   labels, which are the only place this bites. */
.elementor-image-box-title,
.elementor-image-box-description {
    overflow-wrap: break-word;
}

/* Elementor's text-editor `margin` control sets the *widget's* margin; the
   inner <p> keeps Hello Elementor's `margin-block-end: .9rem`, which added
   ~14px under every footer paragraph and inflated the legal row. Scoped to the
   footer so the page rhythm elsewhere is untouched. */
.elementor-location-footer .elementor-widget-text-editor p:last-child {
    margin-bottom: 0;
}