/* Login — the account button at the end of the main menu, its small menu, and the login window (includes/login.php) */

/* menu: a round icon button like the theme's search and dark-mode buttons (user, 2026-09-28); logged in = the user's
   small round photo, with the theme's dropdown (the same one as "מאמרים") */
#primary-menu > li.sc-account { position: relative; }
#primary-menu > li.sc-account > .sc-account-btn, .sc-account-btn {
	display: inline-grid; place-items: center; width: 42px; height: 42px; padding: 0; margin: 0; border: 0; border-radius: 50%;
	background: none; color: var(--sc-c-ink); cursor: pointer;
}
#primary-menu > li.sc-account > .sc-account-btn:hover { color: var(--sc-c-primary); background: color-mix(in srgb, var(--sc-c-soft) 55%, transparent); }
#primary-menu > li.sc-account > a.sc-account-btn::after { content: none; } /* the theme's arrow: ours is a real element (::after is the hover label) */
/* logged in: the picture + a small arrow like the menu's other dropdowns, so it reads as a menu (user, 2026-09-29) */
#primary-menu > li.sc-account.is-in > .sc-account-btn { display: inline-flex; align-items: center; gap: 7px; width: auto; padding: 0 10px 0 7px; border-radius: 999px; }
.sc-account-caret { width: 7px; height: 7px; margin-top: -4px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); opacity: .7; transition: transform .25s ease; }
#primary-menu > li.sc-account.is-in:hover .sc-account-caret, #primary-menu > li.sc-account.is-in:focus-within .sc-account-caret { transform: translateY(3px) rotate(225deg); }
.sc-account-btn svg { width: 21px; height: 21px; }
.sc-account-btn:focus-visible { outline: 2px solid var(--sc-c-accent); outline-offset: 2px; }
.sc-account-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; vertical-align: middle; box-shadow: 0 0 0 2px var(--sc-c-card), 0 0 0 3px var(--sc-c-line); transition: box-shadow .2s ease; }
.sc-account.is-in > a:hover .sc-account-avatar { box-shadow: 0 0 0 2px var(--sc-c-card), 0 0 0 3px var(--sc-c-accent); }
/* the account's dropdown: a name / e-mail line on top; "מחיקת החשבון" last, in quiet red after a thin line */
#primary-menu .sc-account .sub-menu { right: auto; left: 0; }
#primary-menu .sc-account .sub-menu .sc-account-who { padding: 8px 14px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--sc-c-line); color: var(--sc-c-ink); font-weight: 600; font-size: .95rem; cursor: default; }
.sc-account-who small { display: block; font-weight: 400; font-size: .8rem; opacity: .65; direction: ltr; text-align: right; }
#primary-menu .sc-account .sub-menu .sc-account-delete { margin-top: 4px; border-top: 1px solid var(--sc-c-line); }
#primary-menu .sc-account .sub-menu .sc-account-delete > a { color: var(--sc-c-danger); font-size: .9rem; }

.sc-name-input {
	width: 100%; box-sizing: border-box; margin: 0 0 14px; padding: 11px 14px; border: 1px solid #dadce0; border-radius: 12px;
	font: inherit; font-size: 1.02rem; text-align: center;
}
/* account deletion: the "your photos stay" warning + checkbox */
.sc-delete-photos { margin: 0 0 16px; padding: 12px 14px; border-radius: 14px; background: #fff6d8; color: #5c4c10; text-align: start; font-size: .9rem; line-height: 1.55; }
.sc-delete-photos p { margin: 0 0 8px; }
.sc-delete-photos label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; font-weight: 600; }
.sc-delete-photos input { flex: none; width: 17px; height: 17px; margin: 2px 0 0; accent-color: #b85a53; }

/* "מחיקת החשבון": last in the account menu, quiet red; its confirmation window */
.sc-delete-actions { display: flex; flex-direction: column; gap: 18px; } /* 18px: room for the button ring (13px) */
/* "כן, למחוק" (red) + "ביטול": look from assets/buttons.css (.sc-btn--danger, .sc-btn) */

/* phone: the account sits with the search / dark-mode icons at the top of the slide-in menu */
@media (max-width: 900px) {
	#primary-menu > li.sc-account { display: inline-flex; flex: 0 0 auto; border: 0; }
	#primary-menu > li.sc-account.is-in { flex: 1 0 100%; display: block; border-bottom: 1px solid var(--sc-c-line); }
	#primary-menu .sc-account .sub-menu .sc-account-who { border: 0; }
	.sc-account-caret { display: none; } /* the phone menu shows the account's items open */
}

/* the login window. Responsive to the screen HEIGHT (user, 2026-09-29): spacing, icon, title and pill heights use
   clamp(min, dvh, max), so on a short laptop screen (e.g. 1080p at 125% ≈ 660px) it shrinks to fit with no scrollbar,
   and on a tall screen it keeps its roomy look. Scrolls inside only on a really tiny screen. */
.sc-login {
	width: min(440px, calc(100vw - 32px)); box-sizing: border-box; padding: clamp(18px, 4dvh, 34px) 32px clamp(14px, 3dvh, 24px); /* 32px sides: room for the button ring (grows 16px, assets/buttons.css) */ border: 0; border-radius: 24px;
	max-height: calc(100dvh - 32px); overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; /* phone: 16px free on every side, scroll inside if tall */
	background: #fff; color: var(--sc-c-ink, #2c3b33); text-align: center;
	box-shadow: 0 30px 80px rgba(20, 30, 25, .3);
}
.sc-login[open] { animation: sc-login-in .35s cubic-bezier(.2, .8, .2, 1); }
.sc-login::backdrop { background: rgba(25, 35, 30, .38); backdrop-filter: blur(3px); animation: sc-login-fade .3s ease; }
@keyframes sc-login-in { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes sc-login-fade { from { opacity: 0; } }
.sc-login-close-form { position: absolute; top: 10px; inset-inline-end: 10px; margin: 0; }
.sc-login-close {
	width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer;
	color: inherit; font-size: 26px; line-height: 1; opacity: .55;
}
.sc-login-close:hover { opacity: 1; background: rgba(20, 30, 25, .06); }
.sc-login-close:focus { outline: 0; }
.sc-login-close:focus-visible { outline: 2px solid var(--sc-c-btn, #3d7a66); outline-offset: 1px; opacity: 1; }
.sc-login-leaf {
	display: grid; place-items: center; width: clamp(38px, 7dvh, 58px); height: clamp(38px, 7dvh, 58px); margin: 0 auto clamp(6px, 1.6dvh, 14px); border-radius: 50%;
	background: color-mix(in srgb, var(--sc-c-btn, #3d7a66) 14%, #fff); color: var(--sc-c-btn, #3d7a66);
}
.sc-login-leaf svg { width: 48%; height: 48%; }
.sc-login h2 { margin: 0 0 .3em; font-size: clamp(1.3rem, 3.4dvh, 1.6rem); line-height: 1.2; }
.sc-login-why { margin: 0 0 clamp(.7rem, 2.2dvh, 1.4rem); font-size: 1.02rem; line-height: 1.55; opacity: .85; }
.sc-login-google {
	display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: clamp(44px, 6.8dvh, 55px); box-sizing: border-box; padding: 6px 18px;
	border: 1px solid #dadce0; border-radius: 999px; background: #fff; color: #1f1f1f !important;
	font-size: 1.02rem; font-weight: 600; text-decoration: none !important;
	transition: background .2s ease, box-shadow .2s ease;
}
.sc-login-google:hover { background: #f8faf9; box-shadow: 0 4px 14px rgba(20, 30, 25, .12); }
.sc-login-google:focus-visible { outline: 2px solid var(--sc-c-btn, #3d7a66); outline-offset: 3px; }
.sc-login-google.is-going { opacity: .6; pointer-events: none; }
.sc-login-soon { margin: .8rem 0 0; padding: 9px 12px; border-radius: 12px; font-size: .92rem; background: #fbeeed; color: #9a4a44; }
.sc-login-soon.flash { animation: sc-login-shake .4s ease; }
@keyframes sc-login-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.sc-login-small { margin: clamp(.6rem, 1.8dvh, 1.2rem) 0 0; font-size: .8rem; line-height: 1.5; opacity: .6; }
.sc-login-small a { color: inherit; }

/* dark mode */
body.dark-mode .sc-login { background: var(--sc-c-card); color: var(--sc-c-text); }
body.dark-mode .main-navigation .sc-account .sub-menu .sc-account-who, body.dark-mode .main-navigation .sc-account .sub-menu .sc-account-delete { border-color: rgba(255, 255, 255, .1); }
body.dark-mode .sc-login-leaf { background: rgba(255, 255, 255, .08); }
body.dark-mode .sc-login-close:hover { background: rgba(255, 255, 255, .08); }

@media (prefers-reduced-motion: reduce) { .sc-login[open], .sc-login::backdrop { animation: none; } }
@media (max-width: 480px) { .sc-login { padding: clamp(18px, 4dvh, 30px) 22px clamp(14px, 3dvh, 20px); } } /* 22px sides: the button ring (16px) still fits */

/* "אודות" page: the small legal line at the bottom (privacy policy), after a thin line (user, 2026-09-28) */
.entry-content hr.sc-about-sep { margin: 3rem 0 1rem; height: 1px; border: 0 !important; background: color-mix(in srgb, currentColor 14%, transparent); opacity: 1; }
.entry-content p.sc-about-legal { font-size: .88rem; opacity: .75; }
.entry-content p.sc-about-legal a { color: inherit; }

/* "this is a button": once per visit, a second after the page loads, the account picture / icon gives a small hop
   and a soft ring spreads from it (user, 2026-09-28: it wasn't clear the picture can be clicked). When the device asks for reduced motion: only the ring,
   no hop. */
@keyframes sc-nudge-hop { 0%, 100% { transform: none; } 25% { transform: translateY(-3px) rotate(-8deg); } 50% { transform: translateY(0) rotate(6deg); } 75% { transform: rotate(-3deg); } }
@keyframes sc-nudge-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sc-c-btn, #3d7a66) 55%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }
.sc-account-btn.sc-nudge .sc-account-avatar, .sc-account-btn.sc-nudge svg { animation: sc-nudge-hop .9s ease-in-out 2, sc-nudge-ring 1.2s ease-out 2; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) { .sc-account-btn.sc-nudge .sc-account-avatar, .sc-account-btn.sc-nudge svg { animation: sc-nudge-ring 1.2s ease-out 2; } } /* reduced motion: only the ring, no hop */

/* visitors: "log in here" — the same hop + soft ring as above (user, 2026-09-28: the shake was replaced — "the
   previous nudge looks much better"), but on EVERY page for 10 s: 5 rounds of 2 s = a hop with its ring, then a pause.
   login.js adds/removes .sc-shake (on phones on the menu button). Reduced motion: only the ring, like the nudge. */
@keyframes sc-nudge-hop-cycle { 0%, 45%, 100% { transform: none; } 11% { transform: translateY(-3px) rotate(-8deg); } 22% { transform: translateY(0) rotate(6deg); } 34% { transform: rotate(-3deg); } }
@keyframes sc-nudge-ring-cycle { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sc-c-btn, #3d7a66) 55%, transparent); } 60%, 100% { box-shadow: 0 0 0 12px transparent; } }
/* members with a red dot: their picture (.sc-account-avatar) — the same nudge (login.js) */
.sc-account-btn.sc-shake svg, .sc-account-btn.sc-shake .sc-account-avatar, .menu-toggle.sc-shake, #sc-menu-fab.sc-shake { animation: sc-nudge-hop-cycle 2s ease-in-out 5, sc-nudge-ring-cycle 2s ease-out 5; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) { .sc-account-btn.sc-shake svg, .sc-account-btn.sc-shake .sc-account-avatar, .menu-toggle.sc-shake, #sc-menu-fab.sc-shake { animation: sc-nudge-ring-cycle 2s ease-out 5; } }
/* "המשך עם Facebook" under the Google button (2026-09-28), same pill */
.sc-login-provider + .sc-login-provider { margin-top: 10px; }
/* account menu: "חסרה כתובת מייל" when the login brought none (Facebook by phone) */
.sc-account-nomail a { color: #a2504a !important; text-decoration: underline; }


/* "או עם מייל": a line with the words in the middle, the address field + button, the "check your mail" note */
.sc-login-or { display: flex; align-items: center; gap: 12px; margin: clamp(.6rem, 1.9dvh, 1.1rem) 0 clamp(.5rem, 1.5dvh, .9rem); font-size: .88rem; opacity: .65; }
.sc-login-or::before, .sc-login-or::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: .35; }
.sc-login-mail { display: flex; flex-direction: column; gap: 16px; } /* 16px: the button ring still fits */ /* 18px: the button ring grows 13px up (assets/buttons.css) */
/* the address field and the button: the same full-width pills as "המשך עם Google / Facebook" above them */
html body .sc-login .sc-login-mail input[type=email] { /* same height as the buttons (the site's input rule shrank it) */
	width: 100%; height: clamp(44px, 6.8dvh, 55px); box-sizing: border-box; padding: 0 18px; margin: 0; border: 1px solid #dadce0; border-radius: 999px; background: #fff; color: #1f1f1f;
	font: inherit; font-size: 1.02rem; text-align: center;
}
.sc-login-mail input[type=email]::placeholder { color: #9aa29d; }
html body .sc-login .sc-login-mail input[type=email]:focus { outline: 2px solid var(--sc-c-btn, #3d7a66); outline-offset: 1px; border-color: transparent; }
/* "שלחו לי קישור כניסה": the site button (assets/buttons.css, user 2026-09-29) */
.sc-login-mail .sc-btn:not(#sc-btn) { min-height: clamp(44px, 6.8dvh, 55px); } /* same height as Google / Facebook above it */
.sc-login-hp { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip-path: inset(50%); opacity: 0; } /* bots fill it; takes no space (was left:-9999px → sideways scrollbar) */
.sc-login-mail-err { margin: 0; font-size: .9rem; color: #9a4a44; }
.sc-login-sent { display: flex; flex-direction: column; gap: 4px; margin: 1.1rem 0 0; padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--sc-c-btn, #3d7a66) 12%, #fff); color: #26352a; text-align: start; }
.sc-login-sent strong { font-size: 1.05rem; }
.sc-login-sent span { font-size: .93rem; line-height: 1.5; }
.sc-login-sent[hidden], .sc-login-or[hidden], .sc-login-mail[hidden] { display: none; }

/* the site owner: a number on the account picture when photos / comments wait for approval ("לאישור", review.php);
   on phones, where the account is inside the slide-in menu, a dot on the menu button (body.sc-has-review) */
.sc-account-btn { position: relative; }
.sc-account-badge {
	position: absolute; top: -3px; right: -4px; z-index: 1; display: grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px;
	box-sizing: border-box; border-radius: 999px; background: var(--sc-c-heart, #c0564b); color: #fff;
	font-size: 11px; font-weight: 700; line-height: 1; box-shadow: 0 0 0 2px var(--sc-c-bg, #fff); pointer-events: none;
}
body.sc-has-review .menu-toggle { position: relative; } /* the round menu button (#sc-menu-fab) is already fixed-positioned */
body.sc-has-review .menu-toggle::after, body.sc-has-review #sc-menu-fab::after {
	content: ''; position: absolute; top: 4px; right: 4px; width: 10px; height: 10px; border-radius: 50%;
	background: var(--sc-c-heart, #c0564b); box-shadow: 0 0 0 2px var(--sc-c-bg, #fff);
}
@media (max-width: 900px) { .sc-account-badge { top: -2px; } }
/* the menu's hover underline (theme effects.css: "#primary-menu > li > a > span" gets a background) must not reach the badge */
#primary-menu > li.sc-account > a > span.sc-account-badge { background: var(--sc-c-heart, #c0564b); background-size: auto; transition: none; }

/* the site owner's numbers at the top of the account menu (includes/stats.php): three small figures in a soft box */
#primary-menu .sc-account .sub-menu .sc-account-stats > a { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 2px 8px 6px; padding: 10px 8px; border-radius: 12px; background: var(--sc-c-panel); text-align: center; white-space: normal; }
#primary-menu .sc-account .sub-menu .sc-account-stats > a:hover { background: var(--sc-c-soft); }
.sc-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sc-stat b { color: var(--sc-c-ink); font-size: 1.15rem; line-height: 1.1; }
.sc-stat small { color: var(--sc-c-muted); font-size: .72rem; line-height: 1.25; }

/* a red dot before (= on the right of) a menu item / heading with something new (e.g. "הפרופיל שלי" for a name to choose, profile.php) */
.sc-menu-dot { display: inline-block; width: 8px; height: 8px; margin-inline-end: 6px; border-radius: 50%; background: var(--sc-c-heart, #c0564b); vertical-align: middle; }