/* PeoplePath WordPress Snippets — login snippet styles */

/* Single-column layout is capped in width; the two-column layout is not. */
.iw-login--single {
	max-width: 315px;
}

.iw-input {
	position: relative;
}
input[type=checkbox] {
	appearance: none;
	-webkit-appearance: none;
	width: var(--input-checkbox-width);
	height: var(--input-checkbox-height);
	border: 1px solid var(--input-color-border);
	border-radius: var(--input-border-radius);
	margin: 0 17px 0 0;
	display: inline-block;
	vertical-align: middle;
	padding: 0;
	background-position: center;
	background-size: 100% auto;
	background-color: #fff;
	background-image: url('../img/check_grey.svg');
}
input[type=checkbox]:checked {
	color: #000;
	border-color: var(--color-brand-5);
	background-color: var(--color-brand-5);
	background-image: var(--checkbox-check-image);
}
.iw-login-remember {
	margin-bottom: 14px;
	position: relative;
}
.iw-login-remember label {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	line-height: 26px;
	color: #333333;
	cursor: pointer;
	padding-left: 37px;
}
.iw-login-sso {
	clear: both;
	text-align: center;
	line-height: 1;
	margin-top: 10px;
}
.iw-login-sso-item {
	width: 48px;
	height: 48px;
	line-height: 48px;
	margin: 0 3px;
	border: 1px solid #000;
	border-radius: 0;
	display: inline-block;
	padding-top: 2px;
}
.iw-login-sso .social-note {
	padding: 10px 0 20px 0;
	color: var(--color-text);
}
.iw-login-employee {
	text-align: center;
}
/* The three main buttons — Login, Employee Login and Register — are rendered
   full width (capped by --button-max-width from .iw-button) and centred, so
   they stay identical in size regardless of label length or where they appear
   in the configurable element order, in every layout. This overrides the
   inline-block default from .iw-button. */
#iw-submit,
.iw-employee-login,
.iw-register {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 12px auto 0;
}
/* Keep the Employee Login button from sitting flush against an adjacent element
   (e.g. the SSO icons) when placed next to it in the order. */
.iw-employee-login {
	margin-bottom: 12px;
}
/* The Login / Send Login Link button always aligns left (Employee Login and
   Register stay centred). */
#iw-submit {
	margin-left: 0;
	margin-right: 0;
}
/* Secondary action links (login-type switch + reset password). Rendered
   inline-block so that when placed next to each other in the order they sit
   side by side, and otherwise flow onto their own line. Colour is configurable
   via the "Link Color" styling option (--color-action-link). */
.iw-login-typeswitch,
.iw-login a.iw-login-forgot {
	display: inline-block;
	margin: 10px 20px 0 0;
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	color: var(--color-action-link);
	cursor: pointer;
	text-align: left;
	white-space: normal;
	text-decoration: none;
}
.iw-login-typeswitch:hover,
.iw-login a.iw-login-forgot:hover {
	color: var(--color-action-link);
	text-decoration: underline;
}
.iw-login h2 {
	text-align: left;
	font-size: 18px;
	padding: 10px 0 20px 0;
}
.iw-login .iw-input {
	font-size: 14px;
}
.iw-login .iw-input input:-internal-autofill-selected, .iw-login .iw-input input:focus {
	background-color: #fff !important;
	border: 2px solid #369;
}
.iw-login-dropdown.active {
    display: block;
    position: fixed;
    right: 42px;
    top: 107px;
    border-radius: var(--border-radius);
    background-color: white;
    padding: 20px;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
	z-index: 100000;
}
.iw-login-dropdown {
    display: none;
    width: 335px;
    max-width: 100%;
}
.iw-login-trigger::after {
    content: '';
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    margin-left: 3px;
    vertical-align: middle;
    background-color: currentColor;
    -webkit-mask: url('../img/angle-down.svg') center / contain no-repeat;
            mask: url('../img/angle-down.svg') center / contain no-repeat;
}
.iw-login-trigger.active::after {
    -webkit-mask-image: url('../img/angle-up.svg');
            mask-image: url('../img/angle-up.svg');
}

/* ── Two-column layout ─────────────────────────────────────────────── */
/* The columns wrapper lives inside the <form>. Elements are split into the two
   columns by the admin-positioned "Column Break" (see snippets/login.php). */
.iw-login--columns {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 30px;
}
.iw-login--columns .iw-login-col {
	flex: 1;
	min-width: 0;
}

/* Divider carrying the translated "or". Horizontal by default — used as the
   single-column "column break" separator and when two columns stack. */
.iw-login-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 20px 0;
	color: var(--color-text);
	text-transform: lowercase;
}
.iw-login-divider::before,
.iw-login-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--color-border);
}

/* Two columns side by side: the same divider becomes vertical, filling the gap
   between the columns. */
@media (min-width: 769px) {
	.iw-login--columns .iw-login-divider {
		flex: 0 0 auto;
		flex-direction: column;
		align-self: stretch;
		margin: 0;
	}
	.iw-login--columns .iw-login-divider::before,
	.iw-login--columns .iw-login-divider::after {
		width: 1px;
		height: auto;
	}
	.iw-login--columns .iw-login-divider span {
		padding: 12px 0;
	}
}

/* Stack into a single column on narrow screens; the divider stays horizontal. */
@media (max-width: 768px) {
	.iw-login--columns {
		flex-direction: column;
		gap: 0;
	}
}

/* ── Login navigation buttons ──────────────────────────────────────── */
/* The login dropdown trigger and employee login nav menu items are rendered as
   buttons (style configurable under Button Assignments). The colour scheme is
   supplied by the shared .iw-button-primary / -secondary / -tertiary classes;
   this adds the button chrome at a size suited to a navigation bar. The text
   colour is forced with !important because Divi sets `#top-menu a` colours with
   !important, which would otherwise win. Non-Divi themes are unaffected. */
.iw-nav-button {
	display: inline-block;
	padding: 10px 22px;
	border-width: var(--button-border-width);
	border-style: var(--button-border-style);
	border-radius: var(--button-border-radius);
	font-weight: var(--button-font-weight);
	line-height: 1.2;
	text-transform: var(--button-text-transform);
}
.iw-nav-button.iw-button-primary {
	color: var(--button-primary-text-color) !important;
}
.iw-nav-button.iw-button-primary:hover {
	color: var(--button-primary-hover-text-color) !important;
}
.iw-nav-button.iw-button-secondary {
	color: var(--button-secondary-text-color) !important;
}
.iw-nav-button.iw-button-secondary:hover {
	color: var(--button-secondary-hover-text-color) !important;
}
.iw-nav-button.iw-button-tertiary {
	color: var(--button-tertiary-text-color) !important;
}
.iw-nav-button.iw-button-tertiary:hover {
	color: var(--button-tertiary-hover-text-color) !important;
}
/* Divi gives top-level nav links a large `padding-bottom` (reserved space for
   the hover dropdown), which leaves empty space beneath the button text. The
   higher-specificity selector below overrides it so the button height follows
   its text, and adds vertical margin so stacked buttons keep a gap when they
   wrap onto separate lines. */
#et-top-navigation nav > ul > li > a.iw-nav-button {
	padding: 10px 22px;
	margin: 6px 0;
}

/* ── Dropdown login — navigation (Divi) ────────────────────────────── */
/* Below 980px Divi swaps the regular menu (#top-menu) for its mobile hamburger
   (#et_mobile_nav_menu). The dropdown trigger lives in the regular menu, so
   that swap moves it into the mobile menu and out of reach of the trigger JS.
   Keep the regular menu visible and hide the mobile menu across all mobile
   widths so the login dropdown trigger stays available at every size.
   Harmless on non-Divi themes — the selectors simply match nothing. */
@media (max-width: 980px) {
	.pph-header-nav-login #et_mobile_nav_menu {
		display: none !important;
	}
	.pph-header-nav-login #top-menu {
		display: block !important;
	}
}

/* ── Dropdown login — header layout (Divi default header) ──────────── */
/* By default the logo is absolutely positioned (out of flow) and the menu
   floats right, so once the menu — now carrying the login trigger — no longer
   fits beside the logo it overlaps it. Lay the header out as a wrapping flex
   row instead: logo on the left, menu on the right using the available space,
   and the menu drops onto its own line *beneath* the logo when there is no more
   room, rather than overlapping. Applied at every width so the layout and the
   vertical centring are consistent from mobile through wide desktop. Harmless
   on non-Divi themes — the selectors match nothing. */
/* NOTE: layout declarations here use !important on purpose. Divi's on-load
   JavaScript writes inline styles onto the header (logo positioning, nav float
   / width, fixed-header sizing), which would otherwise override these rules a
   moment after load and snap the menu back to its floated position. */
/* GATED: scoped to body.pph-header-nav-login, which PHP adds only when a login
   nav button is actually injected (login dropdown, or Employee SSO + "Add to
   Navigation"). Without it these header rules would restructure the header on any
   page that merely loads the login CSS (e.g. a plain [pph_login] shortcode). */
.pph-header-nav-login #main-header .container.et_menu_container {
	display: flex !important;
	flex-wrap: wrap !important;
	/* Stretch both columns to the full row height, then centre their contents
	   inside each column (below). Centring the columns' boxes directly doesn't
	   work: the nav box hugs the buttons while the logo column is taller, so the
	   two never line up. */
	align-items: stretch !important;
	justify-content: space-between !important;
}
/* The container carries Divi's `.clearfix`, whose `::after` pseudo-element
   becomes a third flex item. With space-between that phantom item claims the
   right-hand slot and pushes the nav into the middle. Remove it so only the
   logo and the menu participate — logo left, menu right. */
.pph-header-nav-login #main-header .container.et_menu_container::after {
	display: none !important;
}
/* Bring the logo into normal flow so the menu can wrap below it. */
.pph-header-nav-login #main-header .logo_container {
	position: relative !important;
	width: auto !important;
	height: auto !important;
	display: flex !important;
	align-items: center !important;
}
/* The logo sized against the (previously fixed-height) container; give it a
   concrete height now that the container height is content-driven. */
.pph-header-nav-login #main-header #logo {
	position: relative !important;
	width: auto !important;
	height: auto !important;
}
/* Drop the right float and shrink the nav to its content width. This is the
   key to the alignment: because the nav hugs its buttons, the container's
   space-between pushes the whole (narrow) nav hard against the right while it
   sits beside the logo, and drops it to the left on its own line once it wraps
   beneath the logo. `width: auto` is not enough — the flex children stretch the
   nav wider than its buttons, leaving them stranded mid-header. */
.pph-header-nav-login #main-header #et-top-navigation {
	float: none !important;
	width: max-content !important;
	max-width: 100% !important;
	/* Fill the stretched row height and centre the menu within it. */
	display: flex !important;
	align-items: center !important;
	/* Divi's JS sets an inline `padding-left` equal to the (absolute) logo width
	   to reserve space beside it, and its CSS adds an asymmetric `padding-top` —
	   both push the menu right and down. Replace it with symmetric vertical
	   padding and no horizontal padding, which cancels the inline value and
	   keeps the buttons vertically centred. */
	padding: 12px 0 !important;
}
/* Lay the menu items out as a single left-aligned row. Because the nav hugs its
   content, this reads as right-aligned beside the logo, and as a left-aligned
   single line once it wraps beneath the logo — only stacking if there genuinely
   isn't room for one line. */
.pph-header-nav-login #main-header #top-menu {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 8px 14px !important;
}
/* Spacing is handled by the flex gap above. */
.pph-header-nav-login #main-header #top-menu > li {
	padding-right: 0 !important;
}

/* ── Dropdown login — small screens ────────────────────────────────── */
/* On phones the fixed-position dropdown expands to a full-width panel so it
   never overflows the viewport. */
@media (max-width: 500px) {
	.iw-login-dropdown {
		width: 100%;
	}
	.iw-login-dropdown.active {
		left: 0;
		right: 0;
		width: 100%;
		box-sizing: border-box;
		border-radius: 0;
	}
	/* The panel spans the full width, but the form itself keeps its natural
	   width — centre it horizontally rather than leaving it pinned left. */
	.iw-login-dropdown.active .iw-login {
		margin-left: auto;
		margin-right: auto;
	}
}