/* Branded log in / join / reset password screens (wp-login.php). */
@font-face { font-family: 'Figtree'; font-display: swap; font-weight: 300 900; src: url('fonts/figtree-latin-wght-normal.woff2') format('woff2-variations'); }
@font-face { font-family: 'Bricolage Grotesque'; font-display: swap; font-weight: 200 800; src: url('fonts/bricolage-grotesque-latin-wght-normal.woff2') format('woff2-variations'); }
body.login { background: #F6F5FA; font-family: Figtree, system-ui, sans-serif; color: #2B2B2B; }
#login { width: min(400px, calc(100% - 32px)); padding-top: 6vh; }
.login h1 a { background: none; width: auto; height: auto; text-indent: 0; font: 700 1.6rem/1.2 'Bricolage Grotesque', system-ui, sans-serif; color: #2B2B2B; display: inline-flex; align-items: center; gap: 10px; margin: 0 auto 8px; }
.login h1 a::before { content: ""; width: 260px; height: 67px; background: url('img/logo-heart.png') center / contain no-repeat; }
.login h1 { text-align: center; }
.login form { border: 1px solid #E6E5EC; border-radius: 20px; box-shadow: 0 14px 40px rgba(22,32,28,.08); padding: 26px 24px; margin-top: 12px; }
.login label { font-weight: 700; font-size: .95rem; color: #2B2B2B; }
.login form .input, .login input[type=text], .login input[type=password], .login input[type=email] { font-size: 1rem; min-height: 50px; padding: 10px 14px; border: 1.5px solid #E2E1EA; border-radius: 14px; background: #FAFAFC; box-shadow: none; }
.login form .input:focus, .login input:focus { border-color: #3E7D0E; box-shadow: 0 0 0 4px rgba(62,125,14,.14); background: #fff; }
.wp-core-ui .button-primary { background: #78CC25; border-color: #78CC25; color: #2B2B2B; border-radius: 999px; min-height: 46px; padding: 0 26px; font-weight: 700; font-size: 1rem; box-shadow: none; text-shadow: none; }
.wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:focus { background: #6AB91F; border-color: #6AB91F; color: #2B2B2B; }
.login .button.wp-hide-pw { min-height: 50px; color: #3E7D0E; }
.login #nav, .login #backtoblog { text-align: center; font-size: .95rem; }
.login #nav a, .login #backtoblog a, .login .privacy-policy-link { color: #3E7D0E; font-weight: 600; }
.login .message, .login .notice, .login .success { border-left-color: #3E7D0E; border-radius: 12px; }
.login #login_error { border-left-color: #B5302B; border-radius: 12px; }
.login .pr-login-note { text-align: center; color: #4E5955; margin: 0 0 4px; }
.login .language-switcher { display: none; }
.login h1 a { font-size: 0; gap: 0; }

/* ---------- Card layout: photo collage left, form right (all log in / join screens) ---------- */
html { background: #F4F1EA; }
body.login { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 440px); gap: 56px; align-items: center; max-width: 1160px; margin: clamp(16px, 4vh, 48px) auto; padding: 48px 64px 40px; box-sizing: border-box; min-height: 0; height: auto; background: #FDFCF8; border-radius: 28px; box-shadow: 0 24px 60px rgba(35, 48, 28, .08); }
body.login > *:not(.pr-join-art):not(#login) { grid-column: 1 / -1; }
body.login .clear { display: none; }
#login { width: auto; max-width: 440px; padding: 0; margin: 0; }
.login h1 { display: none; }
.login form { border: 0; box-shadow: none; padding: 0; margin-top: 18px; background: none; }
.pr-join-h { font: 800 clamp(2rem, 4vw, 3rem)/1.05 'Bricolage Grotesque', system-ui, sans-serif; color: #16301F; letter-spacing: -.02em; margin: 0 0 10px; }
.login .pr-login-note { text-align: left; font-size: 1.1rem; color: #4E5955; margin: 0 0 6px; }
.login .message, .login .notice, .login #login_error { margin-top: 14px; }

.pr-join-art { position: relative; }
.pr-join-logo img { width: 200px; height: auto; display: block; margin: 0 0 22px; }
.pr-join-pics { position: relative; aspect-ratio: 1 / 1.02; max-width: 560px; }
.pr-join-pics img { position: absolute; object-fit: cover; border-radius: 16px; box-shadow: 0 14px 34px rgba(35, 48, 28, .16); }
.pr-join-pics .p-dog { left: 7%; top: 0; width: 62%; height: 74%; }
.pr-join-pics .p-cat { right: 6%; top: 46%; width: 44%; height: 48%; border: 5px solid #FDFCF8; }
.pr-join-pics .p-rabbit { left: 10%; top: 63%; width: 33%; height: 37%; border: 5px solid #FDFCF8; }
.pr-frame { position: absolute; border: 2px solid #1F3A26; border-radius: 2px; }
.pr-frame.f1 { left: 0; top: 11%; width: 40%; height: 62%; border-right: 0; }
.pr-frame.f2 { left: 38%; top: 70%; width: 30%; height: 28%; border-top: 0; }
.pr-fern { position: absolute; right: -2%; top: 6%; width: 34%; height: 72%; z-index: 0; }
.pr-join-pics img { z-index: 1; }
.pr-join-tag { margin: 22px 0 0; font: 500 1.15rem/1.3 Figtree, system-ui, sans-serif; letter-spacing: .14em; color: #1F3A26; }

/* Join form: icons inside the fields, labels for screen readers only */
.login-action-register #registerform label[for] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.login-action-register #registerform .input { background-color: #F5F3EE; border-color: #E8E4DA; padding-left: 48px; background-repeat: no-repeat; background-position: 16px 50%; background-size: 20px; }
body.login-action-register #user_login { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E6B63' stroke-width='1.8'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E"); }
#user_email, body.login-action-login #user_login { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E6B63' stroke-width='1.8'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); }
#prc_pass, body.login-action-login #user_pass { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E6B63' stroke-width='1.8'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }
.login-action-register #reg_passmail { display: none; }
.login-action-register .prc-adult label { font-weight: 500; }
.login-action-register .submit { margin-top: 6px; }
.login-action-register #wp-submit { width: 100%; min-height: 54px; font-size: 1.15rem; float: none; }
.login #nav { margin-top: 18px; }

/* Phones and small tablets: form first, collage reduced to the logo */
@media (max-width: 860px) {
	html { background: #FDFCF8; }
	body.login { display: block; max-width: none; margin: 0; padding: 20px 16px 32px; border-radius: 0; box-shadow: none; }
	.pr-join-pics, .pr-join-tag { display: none; }
	.pr-join-logo img { width: 170px; margin: 0 auto 18px; }
	#login { margin: 0 auto; }
	.pr-join-h { font-size: 2rem; }
}

/* Log in form: same look as Join */
.login-action-login #loginform label[for="user_login"], .login-action-login #loginform label[for="user_pass"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.login-action-login #loginform .input { background-color: #F5F3EE; border-color: #E8E4DA; padding-left: 48px; background-repeat: no-repeat; background-position: 16px 50%; background-size: 20px; }
.login-action-login .wp-pwd { position: relative; }
.login-action-login .wp-pwd .button.wp-hide-pw { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; min-height: 40px; }
.login-action-login .forgetmenot { float: none; display: flex; align-items: center; gap: 8px; margin: 4px 0 18px; }
.login-action-login .forgetmenot .pr-forgot { margin-left: auto; }
.login-action-login .forgetmenot label { font-weight: 500; }
.login .pr-forgot { color: #1F3A26; font-weight: 600; text-decoration: underline; }
.login-action-login .submit { margin: 0; }
.login-action-login #wp-submit { width: 100%; min-height: 54px; font-size: 1.15rem; float: none; }
.login #nav a { text-decoration: underline; }

/* Join form spacing: room between password, tick box and button; brand-green links */
.login-action-register .prc-pass { margin-bottom: 18px; }
.login-action-register .prc-adult { margin: 0 0 22px; }
.login-action-register .prc-adult label { display: block; position: relative; padding-left: 28px; line-height: 1.45; font-size: .95rem; }
.login-action-register .prc-adult input { position: absolute; left: 0; top: 3px; margin: 0; }
.login .prc-adult a, .login form a { color: #3E7D0E; font-weight: 600; }
.login #backtoblog { display: none; }