/* ==========================================================================
   SCS Theme — main.css  (matched to sendcutsend.com design system)
   Brand red #24E35A · accent blue #24E35A · ink #101010 · body #333
   Fonts: Inter Tight (headings/body), Golos Text (secondary)
   ========================================================================== */

:root {
	--scs-red: var(--wp--preset--color--brand-red, #24E35A);
	--scs-red-ink: #14751F;
	--scs-blue: var(--wp--preset--color--brand-blue, #24E35A);
	--scs-ink: var(--wp--preset--color--ink, #101010);
	--scs-body: var(--wp--preset--color--body, #333333);
	--scs-muted: var(--wp--preset--color--muted, #68737D);
	--scs-surface: var(--wp--preset--color--surface, #F5F5F5);
	--scs-surface-2: var(--wp--preset--color--surface-2, #EBEBEB);
	--scs-radius: 8px;
	--scs-shadow: 0 1px 3px rgba(40,44,47,.08), 0 10px 30px rgba(40,44,47,.07);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
img, video { max-width: 100%; height: auto; }
body { color: var(--scs-body); }

/* --------------------------------------------------------------------------
   Header — transparent overlay on the home hero, solid ink elsewhere,
   dark fixed bar once scrolled (matches sendcutsend.com).
   -------------------------------------------------------------------------- */
.scs-header {
	position: sticky;
	top: 0;
	z-index: 200;
	background: var(--scs-ink);
	transition: background .25s ease, box-shadow .25s ease;
}
/* On the front page the header overlays the full-bleed hero. A top-down dark
   scrim keeps the white logo + nav legible over any hero imagery (standard
   transparent-header pattern) — it snaps to solid ink once scrolled (.is-stuck). */
.home .scs-header {
	position: absolute;
	inset-inline: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,.62) 0%, rgba(0,0,0,.30) 55%, rgba(0,0,0,0) 100%);
}
/* Hero is alignfull now — pull it flush under the overlay header (no top gap). */
.home main { margin-block-start: 0; }
.scs-header.is-stuck {
	position: fixed;
	inset-inline: 0;
	background: var(--scs-ink);
	box-shadow: 0 2px 14px rgba(0,0,0,.25);
}

/* White logo + nav on the dark/transparent header */
.scs-header .wp-block-site-logo img { filter: brightness(0) invert(1); }
.scs-header .wp-block-navigation,
.scs-header .wp-block-navigation a { color: #fff; }
.scs-header .wp-block-navigation { gap: 1.6rem; font-size: .95rem; letter-spacing: .02em; }
.scs-header .wp-block-navigation a:hover { color: var(--scs-blue); }

.scs-headerbar > .wp-block-group { align-items: center; gap: 1.25rem; flex-wrap: nowrap; }
.scs-header .wp-block-navigation { flex-wrap: nowrap; flex: 1 1 auto; }
.scs-header-actions { align-items: center; gap: .6rem; flex: 0 0 auto; }
.scs-nav-toggle { display: none; } /* core Navigation block owns the mobile menu */

/* Search box */
.scs-header .scs-search .wp-block-search__input {
	border: 0; border-radius: 6px; padding: .5rem .7rem;
	background: #fff; min-width: 150px; max-width: 200px;
}
/* Search button hugs the end of the input: rounded on its outer (end) corners,
   flat where it meets the input. Logical radii mirror automatically in RTL. */
.scs-header .scs-search .wp-block-search__button {
	background: var(--scs-ink);
	border-start-start-radius: 0;
	border-end-start-radius: 0;
	border-start-end-radius: 6px;
	border-end-end-radius: 6px;
}

/* --------------------------------------------------------------------------
   ORMCUT wordmark — text logo that replaces the old ~190px SVG in the header
   and footer. "ORM" white + "CUT" brand-red. Uses Heebo (loaded by the Hebrew
   font stack) so the Latin wordmark sits tonally with the Hebrew UI.
   -------------------------------------------------------------------------- */
.scs-brand {
	display: inline-flex;
	align-items: center;
	/* "ORMCUT" is a Latin brand string — force LTR so ORM always precedes CUT
	   even inside the RTL (Hebrew) document; the header/footer flow still places
	   the whole lockup at the writing-mode start edge. */
	direction: ltr;
	unicode-bidi: isolate;
	font-family: "Heebo", system-ui, sans-serif;
	font-weight: 800;
	font-size: 1.7rem;          /* ≈ old 190px logo footprint at this weight */
	letter-spacing: .5px;
	line-height: 1;
	text-decoration: none;
	color: #fff;
	white-space: nowrap;        /* ORM+CUT never wrap to two lines */
}
.scs-brand__orm { color: #fff; }
.scs-brand__cut { color: var(--scs-red, #24E35A); }
.scs-header .scs-brand { color: #fff; }
.scs-header .scs-brand:hover .scs-brand__orm { color: #fff; }
/* Footer variant — a touch smaller, sits above the blurb. */
.scs-footer .scs-brand,
.scs-brand--footer {
	color: #fff;
	font-size: 1.4rem;
	margin-bottom: .75rem;
}
@media (max-width: 781px) {
	.scs-brand { font-size: 1.55rem; }
}
@media (max-width: 599px) {
	.scs-brand { font-size: 1.35rem; }
}

/* Header buttons */
.scs-btn-get .wp-block-button__link { background: var(--scs-red) !important; }
.scs-btn-login .wp-block-button__link { background: var(--scs-ink) !important; border: 1px solid rgba(255,255,255,.25); }

@media (max-width: 900px) {
	.scs-header .scs-search { display: none; }
}

/* Tablet: slightly smaller logo; nav is still inline (WP collapses to the
   hamburger only at <=600px), so keep the natural logo | nav | actions order. */
@media (max-width: 781px) {
	.scs-header .wp-block-site-logo img { width: 160px; }
}
/* Mobile (<=600px, where the nav collapses to a hamburger): reorder to
   logo (left) · primary CTA · hamburger (far right). Login lives in the overlay. */
@media (max-width: 599px) {
	.scs-headerbar > .wp-block-group { justify-content: flex-end; gap: .6rem; }
	.scs-header .wp-block-site-logo { margin-inline-end: auto; }
	.scs-header .wp-block-site-logo img { width: 150px; }
	.scs-header .scs-header-actions { order: 2; gap: .4rem; }
	.scs-header .scs-nav { order: 3; }
	.scs-header-actions .wp-element-button { padding: .6rem .9rem; }
}
@media (max-width: 420px) {
	.scs-header .wp-block-site-logo img { width: 128px; }
	.scs-header-actions .wp-element-button { padding: .55rem .7rem; letter-spacing: .04em; }
}

/* --------------------------------------------------------------------------
   Buttons (global) — red, uppercase, bold, 8px (theme.json sets base)
   -------------------------------------------------------------------------- */
.wp-element-button, .wp-block-button__link {
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .02em;
	transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.wp-element-button:hover, .wp-block-button__link:hover { transform: translateY(-1px); filter: brightness(1.06); }
.scs-hero-cta .wp-block-button__link { font-size: 1.05rem; padding: 1rem 2.2rem; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.scs-hero { text-align: center; }
.scs-hero .wp-block-cover__inner-container { max-width: 860px; margin: 0 auto; }
.scs-hero h1 { letter-spacing: -.01em; }

/* --------------------------------------------------------------------------
   Sections / headings
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 { color: var(--scs-ink); }
h2.wp-block-heading { letter-spacing: -.01em; }

/* Cards & grids */
.scs-card {
	background: #fff;
	border: 1px solid var(--scs-surface-2);
	border-radius: var(--scs-radius);
	padding: 1.1rem;
	box-shadow: var(--scs-shadow);
	transition: transform .18s ease, box-shadow .18s ease;
	height: 100%;
}
.scs-card:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(40,44,47,.14); }
.scs-card h3, .scs-card h2 { margin-top: .25rem; }
.scs-card a { text-decoration: none; }
.scs-card img { width: 100%; display: block; border-radius: 6px; }
.scs-card .wp-block-post-featured-image { margin-bottom: .75rem; }
.scs-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* Logo wall */
.scs-logos { display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; align-items: center; justify-content: center; }
.scs-logos .scs-logo { height: 30px; width: auto; opacity: .55; filter: grayscale(1); transition: opacity .15s ease, filter .15s ease; }
.scs-logos .scs-logo:hover { opacity: 1; filter: none; }

/* Cover background images fill */
.wp-block-cover__image-background { object-fit: cover; }

/* Pricing table */
.scs-pricing { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--scs-radius); overflow: hidden; box-shadow: var(--scs-shadow); }
.scs-pricing th, .scs-pricing td { padding: .8rem 1rem; text-align: start; border-bottom: 1px solid var(--scs-surface); }
.scs-pricing th { background: var(--scs-surface); font-size: .9rem; text-transform: uppercase; letter-spacing: .03em; }
.scs-pricing tr:last-child td { border-bottom: 0; }

/* FAQ accordion */
.scs-faq details { border: 1px solid var(--scs-surface-2); border-radius: var(--scs-radius); margin-bottom: .75rem; background: #fff; overflow: hidden; }
.scs-faq summary { cursor: pointer; padding: 1rem 1.2rem; font-weight: 700; list-style: none; display: flex; justify-content: space-between; align-items: center; color: var(--scs-ink); }
.scs-faq summary::-webkit-details-marker { display: none; }
.scs-faq summary::after { content: "+"; font-size: 1.4rem; color: var(--scs-red-ink); transition: transform .2s ease; }
.scs-faq details[open] summary::after { transform: rotate(45deg); }
.scs-faq .scs-faq__body { padding: 0 1.2rem 1.1rem; color: var(--scs-muted); }

/* Instant-quote widget */
.scs-quote { background: #fff; border: 2px dashed var(--scs-red); border-radius: var(--scs-radius); padding: 2rem; text-align: center; max-width: 560px; margin: 1.5rem auto; transition: background .15s ease, border-color .15s ease; }
.scs-quote.is-dragover { background: #EAF7EC; border-color: var(--scs-ink); }
.scs-quote__hint { color: var(--scs-muted); font-size: .95rem; margin: .25rem 0 1rem; }
.scs-quote__result { display: none; margin-top: 1rem; padding: 1rem; border-radius: 8px; background: var(--scs-surface); text-align: start; }
.scs-quote__result.is-visible { display: block; }
.scs-quote__price { font-size: 1.6rem; font-weight: 800; color: var(--scs-red-ink); }

/* Reviews */
.scs-stars { color: #f5a623; letter-spacing: .15em; font-size: 1.3rem; margin: .25rem 0; }
.scs-quote-card { font-style: italic; color: var(--scs-body); }
.scs-quote-card cite { display: block; margin-top: .6rem; font-style: normal; font-weight: 700; color: var(--scs-ink); }

/* Footer */
.wp-block-group.has-ink-background-color a { color: #cdd8ff; }
.wp-block-group.has-ink-background-color a:hover { color: #fff; }

/* Scroll reveal (gated on .js so no-JS always shows content) */
.js .scs-reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); will-change: opacity, transform; }
.js .scs-reveal.is-visible { opacity: 1; transform: none; }
/* Stat count-up numbers use tabular figures so width doesn't jitter while animating */
.scs-stat__num, [data-countup] { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.js .scs-reveal { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   Quote app (/quote/)
   -------------------------------------------------------------------------- */
.scsq { max-width: 1000px; margin: 0 auto; }
.scsq-steps { display: flex; gap: .5rem; list-style: none; padding: 0; margin: 0 0 1.5rem; }
.scsq-steps li { flex: 1; text-align: center; padding: .6rem; border-radius: 6px; background: var(--scs-surface); color: var(--scs-muted); font-weight: 700; font-size: .9rem; }
.scsq-steps li.is-active { background: var(--scs-red); color: #fff; }
.scsq-grid { display: grid; grid-template-columns: 1fr 320px; gap: 1.5rem; align-items: start; }
@media (max-width: 781px) { .scsq-grid { grid-template-columns: 1fr; } }
.scsq-drop { border: 2px dashed var(--scs-red); border-radius: var(--scs-radius); padding: 1.5rem; text-align: center; margin-bottom: 1.25rem; transition: background .15s ease; }
.scsq-drop.is-dragover { background: #EAF7EC; }
.scsq-drop__hint { color: var(--scs-muted); margin: 0 0 .75rem; }
.scsq-file { margin: .75rem 0 0; font-weight: 700; color: var(--scs-ink); }
.scsq-config label, .scsq-checkout label { display: flex; flex-direction: column; gap: .3rem; font-weight: 700; font-size: .9rem; color: var(--scs-ink); }
.scsq-block { margin-bottom: 1rem; }
.scsq-row { display: flex; gap: 1rem; margin-bottom: 1rem; }
.scsq-row > label { flex: 1; }
.scsq input, .scsq select { padding: .6rem .7rem; border: 1px solid var(--scs-surface-2); border-radius: 6px; font: inherit; font-weight: 400; }
.scsq-side { position: sticky; top: 90px; background: #fff; border: 1px solid var(--scs-surface-2); border-radius: var(--scs-radius); padding: 1.25rem; box-shadow: var(--scs-shadow); }
.scsq-price { text-align: center; padding: .5rem 0 1rem; }
.scsq-price__big { display: block; font-size: 1.8rem; font-weight: 800; color: var(--scs-red-ink); }
.scsq-price__sub { display: block; color: var(--scs-muted); font-size: .85rem; margin-top: .25rem; }
.scsq-breakdown { list-style: none; padding: .75rem 0 0; margin: .75rem 0 0; border-top: 1px solid var(--scs-surface-2); font-size: .8rem; color: var(--scs-body); }
.scsq-breakdown li { display: flex; justify-content: space-between; padding: .15rem 0; }
.scsq-breakdown .scsq-bd-meta { display: block; color: var(--scs-muted); margin-top: .4rem; font-size: .75rem; }
.scsq-add { width: 100%; }
.scsq-add:disabled { opacity: .5; cursor: not-allowed; }
.scsq-cart { margin-top: 1rem; }
.scsq-cart h4 { margin: 0 0 .5rem; }
.scsq-cart__empty { color: var(--scs-muted); font-size: .9rem; }
.scsq-cartlist { list-style: none; padding: 0; margin: 0; font-size: .85rem; }
.scsq-cartlist li { display: flex; justify-content: space-between; gap: .5rem; padding: .5rem 0; border-bottom: 1px solid var(--scs-surface); }
.scsq-rm { border: 0; background: none; color: var(--scs-red-ink); font-size: 1.1rem; cursor: pointer; line-height: 1; }
.scsq-cart__total { margin-top: .75rem; text-align: end; }
.scsq-checkout { margin-top: 2rem; padding-top: 1.5rem; border-top: 2px solid var(--scs-surface); }
.scsq-ok { background: #e9f7ec; border: 1px solid #b6e2c1; border-radius: 8px; padding: 1rem; margin-top: 1rem; }
.scsq-ok h4 { margin: 0 0 .5rem; }
.scsq-err { color: var(--scs-red-ink); font-weight: 700; }

/* Template gallery */
.scsq-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 1.25rem; }
.scsq-tcard { display: block; background: #fff; border: 1px solid var(--scs-surface-2); border-radius: var(--scs-radius); padding: 1rem; text-decoration: none; box-shadow: var(--scs-shadow); transition: transform .15s ease, box-shadow .15s ease; }
.scsq-tcard:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(40,44,47,.14); }
.scsq-tcard__art { background: var(--scs-surface); border-radius: 6px; padding: .5rem; margin-bottom: .75rem; }
.scsq-tcard h3 { margin: 0; color: var(--scs-ink); }
.scsq-tcard__cat { display: block; color: var(--scs-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; margin: .15rem 0 .5rem; }
.scsq-tcard__cta { color: var(--scs-red-ink); font-weight: 800; text-transform: uppercase; font-size: .85rem; }

/* Template builder */
.scsq-back { margin: 0 0 1rem; }
.scsq-tplhead { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.scsq-tplhead h2 { margin: 0; }
.scsq-badge { background: var(--scs-red); color: #fff; font-size: .7rem; font-weight: 800; text-transform: uppercase; padding: .25rem .6rem; border-radius: 4px; letter-spacing: .05em; }
.scsq-preview { background: var(--scs-surface); border: 1px solid var(--scs-surface-2); border-radius: var(--scs-radius); padding: 1rem; margin-bottom: 1.25rem; }
.scsq-params { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 1rem; margin-bottom: 1rem; }

/* Focus + skip link (a11y) */
:where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--scs-blue); outline-offset: 2px; }
.scs-skip-link { position: absolute; inset-inline-start: -9999px; top: 0; background: var(--scs-ink); color: #fff; padding: .6rem 1rem; z-index: 999; }
.scs-skip-link:focus { inset-inline-start: .5rem; top: .5rem; }

/* ==========================================================================
   FOUNDATION — exact desktop type scale is fixed in theme.json (fluid:false):
   H1 72/800, H2 45/700, H3 24/700, button 13/800. This layer adds the
   reference section rhythm + responsive down-scaling for tablet/mobile so the
   fixed desktop sizes never overflow. Owned by main.css (foundation only).
   ========================================================================== */
:root {
	--scs-wrap: 1200px;          /* reference inner content width */
	--scs-section-y: clamp(2.5rem, 5vw, 4.5rem); /* vertical section rhythm */
}

/* Section vertical rhythm: top-level home sections breathe like the reference */
.home main > .wp-block-group,
.home main > .wp-block-cover,
.scs-section { padding-block: var(--scs-section-y); }

/* Reference uses a 1200px inner column; keep section headings centered + tight */
.scs-section__head { text-align: center; max-width: 760px; margin-inline: auto; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.scs-section__head h2 { margin: 0 0 .5rem; }
.scs-section__head p { color: var(--scs-muted); font-size: 1.05rem; margin: 0; }

/* Tablet/mobile heading down-scaling (desktop px stay exact >=1200px) */
@media (max-width: 1199px) {
	h1, .wp-block-heading.is-style-hero { font-size: clamp(2.75rem, 6vw, 4rem) !important; }
	h2.wp-block-heading { font-size: clamp(2rem, 4vw, 2.6rem) !important; }
}
@media (max-width: 600px) {
	h1, .wp-block-heading.is-style-hero { font-size: 2.5rem !important; line-height: 1.05 !important; }
	h2.wp-block-heading { font-size: 1.8rem !important; }
}

/* ==========================================================================
   BLACK + LASER-GREEN re-skin (spinat.fr) — finishing overrides.
   Bright #24E35A = fills/borders/glows/brand & text-on-dark.
   Deep --scs-red-ink (#14751F) = green text on white (AA). Buttons: green + black label.
   ========================================================================== */
/* Outline (secondary) buttons: deep-green label + border on white for AA. */
.wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--scs-red-ink); border-color: var(--scs-red); background: transparent;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--scs-red); color: #0B0B0B;
}
/* Brand wordmark "CUT" stays BRIGHT laser-green (it sits on the black header). */
.scs-brand__cut { color: var(--scs-red) !important; }
/* Filled brand buttons: black label on laser green (machine-panel, 7.4:1). */
.has-brand-red-background-color, .scs-btn-get .wp-block-button__link,
.scs-hero-cta .wp-block-button__link, .scs-footer__cta-btn .wp-block-button__link {
	color: #0B0B0B !important;
}
/* Nav hover: laser green on the dark header. */
.scs-header .wp-block-navigation a:hover { color: var(--scs-red); }
/* Subtle laser-green glow washing up the hero — evokes the cut without hurting text legibility. */
.scs-hero::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
	background:
		radial-gradient(120% 80% at 50% 118%, rgba(36,227,90,.42) 0%, rgba(36,227,90,.14) 34%, transparent 62%),
		linear-gradient(0deg, rgba(16,16,16,.28), transparent 40%);
	mix-blend-mode: screen;
}
.scs-hero > .wp-block-cover__inner-container { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .scs-hero::after { mix-blend-mode: normal; opacity: .8; } }

/* ==========================================================================
   "LIVE" laser-green glows (2026 black+green) — tasteful, interactive-only.
   ========================================================================== */
/* Primary green buttons get a soft laser glow that intensifies on hover/focus. */
.has-brand-red-background-color, .scs-btn-get .wp-block-button__link,
.scs-hero-cta .wp-block-button__link, .scs-footer__cta-btn .wp-block-button__link {
	box-shadow: 0 2px 14px rgba(36,227,90,.30);
}
.has-brand-red-background-color:hover, .scs-btn-get .wp-block-button__link:hover,
.scs-hero-cta .wp-block-button__link:hover, .scs-footer__cta-btn .wp-block-button__link:hover {
	box-shadow: 0 4px 26px rgba(36,227,90,.55) !important;
}
/* Brand "CUT" glows like a laser line on the black header. */
.scs-brand__cut { text-shadow: 0 0 12px rgba(36,227,90,.6); }
/* Scroll-progress beam: brighter live glow. */
.scs-progress { box-shadow: 0 0 12px rgba(36,227,90,.75); }
/* Card hover accent bar picks up a faint glow. */
.scs-card:hover::after, .scs-matcard:hover::after { box-shadow: 0 0 10px rgba(36,227,90,.6); }
@media (prefers-reduced-motion: reduce) {
	.has-brand-red-background-color, .scs-btn-get .wp-block-button__link { box-shadow: 0 2px 10px rgba(36,227,90,.25); }
}