/*
 * The site's ONE button style (user, 2026-09-29: "one place that, when we change it, applies to every button").
 * Chosen from design/button-options.html, option 2: the "צור קשר" brown at rest; on hover it turns sage with white
 * text and an oval ring grows out and fades (keeping the button's shape).
 *
 * Use: class="sc-btn" on any <a> / <button> ("ביטול" too, user 2026-09-29), sc-btn--danger for delete,
 * sc-btn--small inside small boxes, sc-btn--round for icon buttons, sc-btn--block for full width.
 * Buttons in page content (WordPress button blocks, e.g. the home page) get it automatically.
 * Not for: the main menu (incl. its "צור קשר"), the login window's Google / Facebook / e-mail buttons, icon buttons,
 * filter pills / chips / page numbers, and the small tools inside cards.
 *
 * Colours come from the theme's colour set (--sc-c-*, colors.css), so dark mode follows by itself.
 * ":not(#sc-btn)" adds an id's weight: the site's Additional CSS paints every [type=submit] and button block green
 * with long selectors, and this must win over them without !important.
 */

/* ---- the knobs: change the look of every button here ---- */
body {
	--sc-btn-bg: var(--sc-c-soft, #D9D3C7);
	--sc-btn-fg: var(--sc-c-ink, #343E35);
	--sc-btn-hover-bg: var(--sc-c-accent, #6D8B74); /* the lighter green (user, 2026-09-29) */
	--sc-btn-hover-fg: var(--sc-c-btntext, #fff);
	--sc-btn-ring: var(--sc-c-accent, #6D8B74);
	--sc-btn-pad: 12px 28px;
	--sc-btn-font-size: 1rem;
	--sc-btn-weight: 600;
}
/* dark mode: the dark palette's accent is too pale for white text; its button green is this same #6D8B74 */
body.dark-mode { --sc-btn-hover-bg: var(--sc-c-btn, #6D8B74); --sc-btn-ring: var(--sc-c-btn, #6D8B74); }

.sc-btn:not(#sc-btn),
.site-main .wp-block-button:not(.call-to-action) .wp-block-button__link:not(#sc-btn) {
	position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 0; margin: 0; padding: var(--sc-btn-pad); border: 0; border-radius: 999px; box-shadow: none;
	background: var(--sc-btn-bg); color: var(--sc-btn-fg);
	font-family: inherit; font-size: var(--sc-btn-font-size); font-weight: var(--sc-btn-weight); line-height: 1.4;
	text-decoration: none; text-align: center; cursor: pointer; filter: none;
	transition: background-color .4s ease, color .4s ease;
}
/* the ring, oval like the button. It grows by a FIXED 16px sideways / 13px up-down = what
   a scale(1.2, 1.5) gives a 160px button, so it looks the same on any width and still fits inside the
   windows (a full-width button scaled by 20% stuck out of the login / upload window, 2026-09-29) */
.sc-btn:not(#sc-btn)::before,
.site-main .wp-block-button:not(.call-to-action) .wp-block-button__link:not(#sc-btn)::before {
	content: ''; position: absolute; inset: 0; margin: auto; z-index: 5; pointer-events: none;
	border: 2px solid transparent; border-radius: inherit; opacity: .9; transform: none;
	transition: opacity .5s ease, border .5s ease, inset .5s ease;
}
.sc-btn:not(#sc-btn):focus-visible,
.site-main .wp-block-button:not(.call-to-action) .wp-block-button__link:not(#sc-btn):focus-visible {
	background: var(--sc-btn-hover-bg); color: var(--sc-btn-hover-fg); text-decoration: none; filter: none; transform: none;
}
/* hover only with a real mouse: on a touch screen the tapped button kept its hover (green) — the back-to-top arrow
   came back green (user, 2026-09-30) */
@media (hover: hover) {
	.sc-btn:not(#sc-btn):hover,
	.site-main .wp-block-button:not(.call-to-action) .wp-block-button__link:not(#sc-btn):hover {
		background: var(--sc-btn-hover-bg); color: var(--sc-btn-hover-fg); text-decoration: none; filter: none; transform: none;
	}
	.sc-btn:not(#sc-btn):hover::before,
	.site-main .wp-block-button:not(.call-to-action) .wp-block-button__link:not(#sc-btn):hover::before {
		border: 2px solid var(--sc-btn-ring); opacity: 0; inset: -13px -16px;
	}
}
.sc-btn:not(#sc-btn):focus-visible { outline: 2px solid var(--sc-btn-ring); outline-offset: 3px; }
.sc-btn:not(#sc-btn) span { color: inherit; } /* a span inside must follow the button (the menu rule once kept it green) */
.sc-btn:not(#sc-btn) .sc-ico, .sc-btn:not(#sc-btn) svg { flex: none; width: 19px; height: 19px; }

/* not allowed yet: faded by colour (opacity would let the text under it show through) */
.sc-btn:not(#sc-btn):disabled {
	background: color-mix(in srgb, var(--sc-btn-bg) 55%, var(--sc-c-bg, #fff)); color: color-mix(in srgb, var(--sc-btn-fg) 45%, transparent);
	cursor: not-allowed;
}
.sc-btn:not(#sc-btn):disabled::before, .sc-btn:not(#sc-btn).is-busy::before { display: none; }
/* working ("מעלה 1 מתוך 2…", "טוען…"): the button keeps its colours so the words read well, also in dark mode
   (user, 2026-09-30); only the cursor and a slow pulse say "wait" */
.sc-btn:not(#sc-btn).is-busy { cursor: progress; animation: sc-btn-busy 1.4s ease-in-out infinite; }
@keyframes sc-btn-busy { 50% { filter: brightness(1.12); } }
@media (prefers-reduced-motion: reduce) { .sc-btn:not(#sc-btn).is-busy { animation: none; } }

/* delete: a warning, not an ordinary action */
.sc-btn.sc-btn--danger:not(#sc-btn) { background: #b85a53; color: #fff; --sc-btn-ring: #b85a53; }
.sc-btn.sc-btn--danger:not(#sc-btn):hover, .sc-btn.sc-btn--danger:not(#sc-btn):focus-visible { background: #a24c46; color: #fff; }

/* small (inside small boxes: the caption field, the favourites toast); the ring grows less */
.sc-btn.sc-btn--small:not(#sc-btn) { --sc-btn-pad: 5px 14px; --sc-btn-font-size: .85rem; }
.sc-btn.sc-btn--small:not(#sc-btn):hover::before { inset: -8px -10px; }

/* full width (windows, narrow columns) */
.sc-btn.sc-btn--block:not(#sc-btn) { display: flex; width: 100%; }

/* round icon button (e.g. the arrows of "פורחים בסתיו"): the same colours, a circle, the ring grows evenly */
.sc-btn.sc-btn--round:not(#sc-btn) { width: 44px; height: 44px; padding: 0; border-radius: 50%; flex: none; }
.sc-btn.sc-btn--round:not(#sc-btn):hover::before { inset: -13px; }
.sc-btn.sc-btn--round:not(#sc-btn) svg { width: 22px; height: 22px; }

/* ---- the back-to-top arrow (the theme's .back-to-top): buttons.js makes it a round site button (.sc-btn--round with an
   arrow icon), so colours, hover, ring and nudge all come from the rules above. Only its place is its own: the
   corner, a soft shadow (it floats over the page) and --sc-btt-bottom, which keeps it above the footer.
   The theme's script shows / hides it with an inline display: block / none. */
.back-to-top.sc-btn:not(#sc-btn) { display: none; /* hidden until the theme shows it (inline display: block) */ position: fixed; left: auto; right: 18px; bottom: var(--sc-btt-bottom, 22px); z-index: 999; width: 48px; height: 48px; box-shadow: 0 6px 18px rgba(31, 58, 48, .14);
	outline: var(--sc-float-ring, 1.5px) solid var(--sc-c-card, #fff); outline-offset: 0; } /* a thin white ring (3px → 1.5px, user 2026-09-30): it floats over photos and brown panels and got lost there (user, 2026-09-29) */
.back-to-top.sc-btn[style*="block"]:not(#sc-btn) { display: flex !important; } /* shown: keep the icon centred */
.back-to-top.sc-btn:not(#sc-btn) svg { stroke: currentColor; }

/* ---- the nudge: the login icon's hop + a ring spreading out, four times, so a button that just appeared isn't missed
   (user, 2026-09-29). buttons.js adds .sc-nudge: the back-to-top arrow the first time it shows, and any element with
   data-sc-nudge the first time it comes into view (site buttons, the catalog's "המועדפים שלי", the share button). Reduced motion: only the ring, like the login icon. */
@keyframes sc-btn-hop { 0%, 100% { transform: none; } 25% { transform: translateY(-3px) rotate(-8deg); } 50% { transform: translateY(0) rotate(6deg); } 75% { transform: rotate(-3deg); } }
@keyframes sc-btn-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sc-btn-ring) 55%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }
.sc-btn.sc-nudge:not(#sc-btn), [data-sc-nudge].sc-nudge:not(#sc-btn) { animation: sc-btn-hop .9s ease-in-out 4, sc-btn-ring 1.2s ease-out 4; } /* 4 times = twice as long (user, 2026-09-29) */
@media (prefers-reduced-motion: reduce) { .sc-btn.sc-nudge:not(#sc-btn), [data-sc-nudge].sc-nudge:not(#sc-btn) { animation: sc-btn-ring 1.2s ease-out 4; } }

/* Choosing a photo on a phone (includes/photo-pick.php, 2026-09-30): the two buttons "צילום" / "בחירה מהגלריה" show only
   on touch screens, and each place's computer area (.sc-pick-desk: drop zone) hides there. */
.sc-pick-phone { display: none; flex-direction: column; gap: 10px; }
@media (pointer: coarse) {
	.sc-pick-phone { display: flex; }
	.sc-pick-desk { display: none !important; } /* beats the places' own display rules */
}