/**
 * FunGuyMe – wp-login styling (astra-child 1.6.0)
 * Box cream #FFFEF9 · text charcoal #1C1917 · buttons/links terracotta #C2410C
 * Background: sacral-orange gradient 180deg #FDBA74 → #F97316 → #EA580C (Studio Desk 2026-09-25)
 * Logo: bundled assets/login-logo.png (160px slot, contain) → fallback custom_logo → fallback site name text.
 * Sidebar + slider sit on cream cards, so their headings stay charcoal on cream.
 * Layout: desktop = form + right sidebar (recent posts); mobile = stacked; shop teaser slider at bottom.
 * Child-theme only — no pretty-login plugins.
 */

/* ===== Background (Studio Desk sacral-orange, 2026-09-25) ===== */
body.login {
	min-height: 100vh;
	color: #1C1917;
	background-color: #F97316 !important; /* fallback */
	background: linear-gradient(180deg, #FDBA74 0%, #F97316 55%, #EA580C 100%) fixed !important;
}
body.login::before { display: none !important; } /* old faint cream glow layer dropped */

/* ===== Layout grid =====
 * Desktop: 3-column centred grid (1fr | form | 1fr). The form is always the exact centre column;
 * the blog sidebar sits in the right track without shifting it. Language switcher = compact row
 * directly under the form links; shop slider = full-width row at the bottom.
 * Mobile/tablet (<1024px): normal stacked flow (form → language → sidebar → slider).
 */
body.login > * { box-sizing: border-box; }
@media (min-width: 1024px) {
	body.login {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(320px, 360px) minmax(0, 1fr);
		column-gap: 40px;
		align-items: start;
		padding: 0 24px;
	}
	body.login > * { grid-column: 1 / -1; }
	body.login #login { grid-column: 2; grid-row: 1; margin: 0; padding: 6vh 0 0; width: 100%; }
	body.login .language-switcher { grid-column: 2; grid-row: 4; } /* v1.6.3: very bottom, below slider */
	body.login .fg-login-aside {
		grid-column: 3; grid-row: 1 / span 2; justify-self: start;
		width: 100%; max-width: 300px; margin: calc(6vh + 232px) 0 0;
	}
	body.login .fg-login-shop { grid-column: 1 / -1; grid-row: 3; }
}

/* ===== Language switcher: compact, under the form links, text on orange = charcoal ===== */
.login .language-switcher {
	margin: 8px auto 0 !important;
	padding: 0 !important;
	width: 100%;
	max-width: 360px;
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
	text-align: center;
}
.login .language-switcher form,
.login #language-switcher {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
}
.login .language-switcher label { margin: 0 !important; font-size: 12.5px; font-weight: 600; }
.login .language-switcher label .dashicons { width: 16px; height: 16px; font-size: 16px; vertical-align: -3px; }
.login .language-switcher select {
	min-height: 32px !important; padding: 2px 28px 2px 8px !important; font-size: 13px !important;
	background-color: #FFFEF9 !important; border: 1px solid #1C1917 !important; border-radius: 6px !important; color: #1C1917 !important;
	max-width: 180px;
}
.login .language-switcher .button {
	min-height: 32px !important; padding: 0 12px !important; font-size: 13px !important;
	background: #FFFEF9 !important; color: #1C1917 !important; border: 1px solid #1C1917 !important; border-radius: 6px !important;
}
.login .language-switcher .button:hover { background: #1C1917 !important; color: #FFFEF9 !important; }

/* ===== Logo ===== */
#login h1 a,
.login h1 a {
	background-size: contain !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	width: 160px !important;
	height: 160px !important;
	margin: 0 auto 20px !important;
	padding: 0 !important;
	border-radius: 50% !important;
	box-shadow: 0 8px 24px rgba(124, 45, 18, 0.25);
	background-color: #FFFEF9;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#login h1 a:hover { transform: scale(1.03); box-shadow: 0 12px 30px rgba(124, 45, 18, 0.3); }
/* Fallback when no custom logo: show site name as text (class added by functions.php). */
body.login.fg-login-textlogo #login h1 a {
	background-image: none !important;
	text-indent: 0 !important;
	width: auto !important;
	height: auto !important;
	border-radius: 12px;
	padding: 12px 20px !important;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.2;
	color: #1C1917 !important;
	display: inline-block;
	overflow: visible;
}
body.login.fg-login-textlogo #login h1 { text-align: center; }

/* ===== Welcome line (login_message) ===== */
.login .fg-login-welcome {
	background: rgba(255, 254, 249, 0.85);
	border-left: 4px solid #C2410C;
	border-radius: 8px;
	padding: 10px 14px;
	margin: 0 0 14px;
	color: #1C1917;
	font-size: 14px;
	box-shadow: 0 4px 14px rgba(124, 45, 18, 0.12);
}

/* ===== Form box ===== */
.login form {
	background: #FFFEF9 !important;
	border-radius: 14px !important;
	border: 1px solid rgba(28, 25, 23, 0.12) !important;
	box-shadow: 0 16px 40px rgba(124, 45, 18, 0.18) !important;
	padding: 28px 26px 24px !important;
	margin-top: 8px;
	color: #1C1917;
}
.login label { color: #1C1917 !important; font-weight: 600 !important; font-size: 13.5px !important; }
.login form .input,
.login form input[type="text"],
.login form input[type="password"],
.login form input[type="email"] {
	background: #fff !important;
	border: 1.5px solid #D6D3D1 !important;
	border-radius: 8px !important;
	padding: 10px 14px !important;
	font-size: 15px !important;
	color: #1C1917 !important;
	box-shadow: none !important;
	transition: border-color 0.2s, box-shadow 0.2s;
}
.login form .input:focus,
.login form input[type="text"]:focus,
.login form input[type="password"]:focus,
.login form input[type="email"]:focus {
	border-color: #C2410C !important;
	box-shadow: 0 0 0 2px #C2410C !important;
	outline: none !important;
}
.login .button.wp-hide-pw { color: #C2410C !important; }
.login .forgetmenot label { font-weight: 500 !important; color: #44403C !important; }
.login input[type="checkbox"]:checked::before { filter: hue-rotate(-190deg) saturate(3); }

/* ===== Primary button ===== */
.wp-core-ui .button-primary {
	background: #C2410C !important;
	border-color: #9A3412 !important;
	color: #FFFEF9 !important;
	text-shadow: none !important;
	box-shadow: 0 4px 12px rgba(194, 65, 12, 0.28) !important;
	border-radius: 8px !important;
	font-weight: 700 !important;
	font-size: 14.5px !important;
	padding: 6px 22px !important;
	height: auto !important;
	line-height: 1.6 !important;
	transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease !important;
}
.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus {
	background: #9A3412 !important;
	border-color: #7C2D12 !important;
	box-shadow: 0 6px 16px rgba(194, 65, 12, 0.35) !important;
	transform: translateY(-1px);
	color: #FFFEF9 !important;
}
.wp-core-ui .button-primary:active { transform: translateY(0); }
.wp-core-ui .button-secondary, .wp-core-ui .button { color: #C2410C; border-color: #C2410C; }

/* ===== Links ===== */
.login a { color: #C2410C; }
.login #nav,
.login #backtoblog { padding: 0 8px !important; text-align: center; }
.login #nav a,
.login #backtoblog a {
	color: #1C1917 !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}
.login #nav a:hover,
.login #backtoblog a:hover { color: #1C1917 !important; text-decoration: underline !important; }
/* Anything sitting directly on the orange = charcoal #1C1917 (AA on #EA580C), never cream. */
.login .privacy-policy-page-link a,
.login .privacy-policy-link { color: #1C1917 !important; font-size: 12.5px !important; font-weight: 600; }
.login .privacy-policy-page-link a:hover,
.login .privacy-policy-link:hover { color: #1C1917 !important; text-decoration: underline !important; }
.login .language-switcher label,
.login .language-switcher .dashicons { color: #1C1917 !important; }

/* ===== Messages ===== */
.login #login_error,
.login .message,
.login .success,
.login .notice {
	background: #FFFEF9 !important;
	color: #1C1917;
	border-radius: 8px !important;
	border-left: 4px solid #C2410C !important;
	box-shadow: 0 4px 14px rgba(124, 45, 18, 0.12);
}

/* Error notices: own style, distinct from the welcome line (cream + terracotta) */
.login #login_error,
.login .message.error,
.login .notice-error,
.login .notice.notice-error {
	background: #FEF2F2 !important;
	color: #1C1917 !important;
	border: 0 !important;
	border-left: 4px solid #B91C1C !important;
	border-radius: 8px !important;
	box-shadow: 0 4px 14px rgba(127, 29, 29, 0.14) !important;
	padding: 12px 14px !important;
}
.login #login_error p,
.login .notice-error p { color: #1C1917 !important; margin: 0; }
.login #login_error strong,
.login #login_error b,
.login .notice-error strong { font-weight: 800 !important; color: #1C1917 !important; }
.login #login_error a,
.login .notice-error a { color: #1C1917 !important; text-decoration: underline !important; font-weight: 600; }

/* ===== Keyboard focus (visible, charcoal) ===== */
.login a:focus-visible,
.login input[type="checkbox"]:focus-visible,
.login button:focus-visible,
.login .button:focus-visible,
.login select:focus-visible {
	outline: 2px solid #1C1917 !important;
	outline-offset: 2px !important;
	box-shadow: none !important;
}
.login a:focus { box-shadow: none !important; }
.login input[type="checkbox"]:focus { border-color: #1C1917 !important; box-shadow: none !important; }

/* ===== Log In button: full width, 44px touch target ===== */
.login .submit { margin-top: 14px; }
.login #wp-submit,
.login form .submit .button-primary {
	float: none !important;
	display: block !important;
	width: 100% !important;
	min-height: 44px !important;
	margin: 0 !important;
}
.login .forgetmenot { float: none !important; display: flex; align-items: center; gap: 6px; margin-bottom: 0 !important; }
.login .forgetmenot label { margin: 0 !important; }

/* ===== "Remember Me" help toggletip: charcoal outline only (kept — it carries a security hint) ===== */
.login .wp-tooltip .wp-tooltip__toggle {
	width: 20px !important;
	height: 20px !important;
	background: transparent !important;
	border: 1px solid #1C1917 !important;
	border-radius: 50% !important;
	color: #1C1917 !important;
	box-shadow: none !important;
	padding: 0 !important;
	min-height: 0 !important;
}
.login .wp-tooltip .wp-tooltip__toggle .dashicons {
	width: 16px !important; height: 16px !important; font-size: 16px !important; color: #1C1917 !important;
}
.login .wp-tooltip .wp-tooltip__toggle:hover { background: rgba(28, 25, 23, 0.06) !important; color: #1C1917 !important; }
.login .wp-tooltip .wp-tooltip__bubble { background: #FFFEF9 !important; color: #1C1917 !important; border: 1px solid #1C1917 !important; }
.login .wp-tooltip .wp-tooltip__close { background: transparent !important; color: #1C1917 !important; }

/* ===== Right sidebar: recent posts ===== */
.fg-login-aside {
	background: #FFFEF9;
	border-radius: 14px;
	border: 1px solid rgba(194, 65, 12, 0.18);
	box-shadow: 0 16px 40px rgba(124, 45, 18, 0.18);
	padding: 20px 22px;
	color: #1C1917;
	width: 100%;
	max-width: 400px;
	margin: 24px auto 0;
}
.fg-login-aside h2 {
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #1C1917;
}
.fg-login-aside ul { list-style: none; margin: 0; padding: 0; }
.fg-login-aside li { padding: 8px 0; border-top: 1px solid #E7E5E4; line-height: 1.35; }
.fg-login-aside li:first-child { border-top: 0; }
.fg-login-aside a { color: #C2410C; font-weight: 600; text-decoration: none; font-size: 14px; }
.fg-login-aside a:hover { color: #7C2D12; text-decoration: underline; }
.fg-login-aside time { display: block; font-size: 11.5px; color: #57534E; margin-top: 2px; }
.fg-login-aside .fg-login-aside__more { display: inline-block; margin-top: 10px; font-size: 13px; }

/* ===== Bottom: shop teaser slider (look-only) ===== */
.fg-login-shop {
	width: 100%;
	max-width: 760px;
	margin: 28px auto 40px;
	padding: 0 16px;
}
.fg-login-shop .fg-rand-slider {
	background: rgba(255, 254, 249, 0.92);
	border: 1px solid rgba(194, 65, 12, 0.18);
	border-radius: 14px;
	padding: 18px 16px 10px;
	margin: 0;
	box-shadow: 0 16px 40px rgba(124, 45, 18, 0.15);
}

@media (max-width: 1023px) {
	body.login #login { padding-top: 5vh; }
}
@media (max-width: 480px) {
	#login h1 a { width: 120px !important; height: 120px !important; }
	.login form { padding: 22px 16px 18px !important; }
	.fg-login-aside { margin: 20px 16px 0; width: auto; }
}

/* ===== v1.6.3: language switcher at the very bottom (below sidebar + shop slider) ===== */
.login .language-switcher.fg-lang-bottom { margin: 0 auto 32px !important; padding: 0 16px !important; }
@media (max-width: 1023px) {
	body.login { display: flex; flex-direction: column; }
	body.login #login { margin: 0 auto; } /* no vertical auto-margins in flex flow */
	body.login .language-switcher { order: 99; } /* no-JS fallback: still last on mobile */
}

/* v1.6.22: "No account? Register" under the login form – same link look as #nav. */
.login .fg-login-register { margin: 16px 0 0 !important; padding: 0 8px !important; text-align: center; font-size: 14px; }
.login .fg-login-register a { font-weight: 600; text-decoration: underline !important; color: inherit; }
.login .fg-login-register a:hover { color: #1C1917 !important; }

/* v1.6.24: own password at registration */
.fg-regpass__row { margin-bottom: 12px; }
.fg-regpass__tools { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 6px; }
.login .fg-regpass__tools .button { border-color: #C2410C; color: #C2410C; background: #FFFEF9; font-weight: 600; }
.login .fg-regpass__tools .button:hover { background: #C2410C; color: #fff; }
.fg-regpass__hint { font-size: 12.5px; color: #57534E; margin: 0 0 6px; }
.fg-regpass__msg { font-size: 13px; color: #7C2D12; font-weight: 600; margin: 0 0 10px; min-height: 1em; }
.fg-regpass input[type="text"] { font-family: Consolas, Monaco, monospace; }
.login #reg_passmail { display: none; }