/*
Theme Name: Hello Elementor Child
Theme URI: https://e-webuk.uk/rentuk/
Description: Child theme for Rent UK Property. Holds the header/hero stylesheet so a Hello Elementor update cannot wipe it.
Author: E-WebUK
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

/* --------------------------------------------------------------------------
   Additions to rentuk-hero.css (which is kept exactly as supplied).

   The design hides the nav under 900px and shows a burger, but ships no open
   state — the button had nothing to open. These rules are that drawer; the
   behaviour is in assets/js/rentuk-header.js.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.ruk-masthead {
		position: relative;
	}

	.ruk-masthead.ruk-nav-open .ruk-nav {
		display: flex;
		position: absolute;
		inset: 100% 0 auto 0;
		z-index: 60;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin: 0;
		padding: 6px var(--ruk-pad) 14px;
		background: #fff;
		border-top: 1px solid var(--ruk-line);
		box-shadow: 0 18px 30px -18px rgba(16, 21, 17, .35);
	}

	.ruk-masthead.ruk-nav-open .ruk-nav a {
		padding: 13px 2px;
		border-bottom: 1px solid var(--ruk-line);
		font-size: 15px;
	}

	.ruk-masthead.ruk-nav-open .ruk-nav a:last-child {
		border-bottom: 0;
	}

	/* the underline sweep is a desktop hover affordance; pointless in a drawer */
	.ruk-masthead.ruk-nav-open .ruk-nav a::after {
		display: none;
	}

	.ruk-burger[aria-expanded="true"] {
		border-color: var(--ruk-forest);
	}
}

/* --------------------------------------------------------------------------
   Visible keyboard focus. The design stylesheet styles :focus-within on the
   search fields only, and the hero sits on a dark ground where the browser
   default ring is close to invisible — so links, buttons and fields get an
   explicit one. Mouse users never see it (:focus-visible).
   -------------------------------------------------------------------------- */
.ruk a:focus-visible,
.ruk button:focus-visible,
.ruk input:focus-visible,
.ruk select:focus-visible {
	outline: 3px solid #F4F6F2;
	outline-offset: 2px;
	border-radius: 4px;
}

/* On the light strips the pale ring would disappear, so flip it to the ink colour. */
.ruk-utility a:focus-visible,
.ruk-masthead a:focus-visible,
.ruk-masthead button:focus-visible,
.ruk-search input:focus-visible,
.ruk-search select:focus-visible,
.ruk-card a:focus-visible {
	outline-color: #08411F;
}