/*
 * canopy-media-bridge recipe blocks — myarticles.co.il
 * design.md tokens applied here as CSS custom properties.
 * Elementor global custom CSS can override --atuse-rc-* at :root.
 */

:root {
	--atuse-rc-primary:  #C4552A;
	--atuse-rc-secondary:#5D3E2B;
	--atuse-rc-bg:       #FDFAF5;
	--atuse-rc-text:     #1E1A18;
	--atuse-rc-accent:   #E8A44D;
	--atuse-rc-surface:  #F5EFE3;
}

/* ═══ RECIPE CARD ════════════════════════════════════════════════════════════ */

.atuse-recipe-card {
	background:      var(--atuse-rc-surface);
	border-radius:   12px;
	padding:         32px;
	margin-block-end:24px;
}

.atuse-rc__cells {
	display:         flex;
	flex-direction:  row;
	justify-content: center;
	gap:             24px;
	flex-wrap:       wrap;
}

.atuse-rc__cell {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            4px;
	min-width:      72px;
	text-align:     center;
}

.atuse-rc__icon {
	color:          var(--atuse-rc-primary);
	display:        flex;
	align-items:    center;
	justify-content:center;
	margin-block-end:4px;
}

.atuse-rc__lbl {
	font-family: Assistant, "Heebo", "Arial Hebrew", system-ui, sans-serif;
	font-size:   13px;
	font-weight: 500;
	line-height: 1.5;
	color:       rgba(30, 26, 24, 0.5);
}

.atuse-rc__val {
	font-family: "Frank Ruhl Libre", "David Libre", Georgia, serif;
	font-size:   1.5rem;
	font-weight: 700;
	line-height: 1.2;
	color:       var(--atuse-rc-secondary);
}

.atuse-rc__pills {
	display:         flex;
	flex-wrap:       wrap;
	gap:             8px;
	justify-content: center;
	margin-block-start:16px;
}

.atuse-rc__pill {
	border-radius: 20px;
	padding:       4px 12px;
	font-family:   Assistant, "Heebo", "Arial Hebrew", system-ui, sans-serif;
	font-size:     13px;
	font-weight:   500;
	line-height:   1.4;
	display:       inline-block;
}

/* Dietary pill colors per design.md */
.atuse-rc__pill--בשרי       { background: rgba(180, 40,  40,  .1); color: #B42828; }
.atuse-rc__pill--חלבי       { background: rgba(40,  100, 180, .1); color: #2864B4; }
.atuse-rc__pill--פרווה      { background: rgba(40,  130, 80,  .1); color: #288250; }
.atuse-rc__pill--גלוטן-פרי  { background: rgba(180, 120, 40,  .1); color: #B47828; }

@media (max-width: 767px) {
	.atuse-recipe-card { padding: 20px; }
	.atuse-rc__cells   { flex-direction: column; align-items: center; }
}

/* ═══ WHY IT WORKS ═══════════════════════════════════════════════════════════ */

.atuse-why-it-works {
	border-inline-start: 4px solid var(--atuse-rc-primary);
	background:          rgba(232, 164, 77, 0.15);
	border-radius:       8px;
	padding:             24px;
	margin-block:        24px;
}

.atuse-why-it-works__heading {
	font-family: "Frank Ruhl Libre", "David Libre", Georgia, serif;
	font-size:   1.25rem;
	font-weight: 600;
	color:       var(--atuse-rc-secondary);
	margin:      0 0 12px;
	line-height: 1.4;
}

.atuse-why-it-works__body {
	font-family: Assistant, "Heebo", "Arial Hebrew", system-ui, sans-serif;
	font-size:   17px;
	font-weight: 400;
	line-height: 1.7;
	color:       var(--atuse-rc-text);
}

.atuse-why-it-works__body > *:first-child { margin-block-start: 0; }
.atuse-why-it-works__body > *:last-child  { margin-block-end:   0; }

/* ═══ NUTRITION TABLE ════════════════════════════════════════════════════════ */

.atuse-nutrition-table {
	background:    var(--atuse-rc-surface);
	border-radius: 8px;
	padding:       20px;
	margin-block:  24px;
}

.atuse-nt__hdr {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	margin-block-end:16px;
	flex-wrap:       wrap;
	gap:             8px;
}

.atuse-nt__title {
	font-family: "Frank Ruhl Libre", "David Libre", Georgia, serif;
	font-size:   1.1rem;
	font-weight: 600;
	color:       var(--atuse-rc-secondary);
	margin:      0;
	line-height: 1.4;
}

.atuse-nt__toggles {
	display: flex;
	gap:     4px;
}

.atuse-nt__toggle-btn {
	padding:       4px 12px;
	font-family:   Assistant, "Heebo", "Arial Hebrew", system-ui, sans-serif;
	font-size:     13px;
	font-weight:   500;
	border:        1px solid rgba(93, 62, 43, .2);
	background:    transparent;
	color:         var(--atuse-rc-text);
	border-radius: 6px;
	cursor:        pointer;
	line-height:   1.5;
	transition:    background .15s, color .15s, border-color .15s;
}

.atuse-nt__toggle-btn.is-active {
	background:   var(--atuse-rc-primary);
	color:        var(--atuse-rc-bg);
	border-color: var(--atuse-rc-primary);
}

.atuse-nt__tbl {
	width:           100%;
	border-collapse: collapse;
	font-family:     Assistant, "Heebo", "Arial Hebrew", system-ui, sans-serif;
	font-size:       14px;
}

.atuse-nt__cell {
	padding:     8px 12px;
	font-family: Assistant, "Heebo", "Arial Hebrew", system-ui, sans-serif;
	color:       var(--atuse-rc-text);
	line-height: 1.5;
}

.atuse-nt__cell--lbl    { font-weight: 400; text-align: start; }
.atuse-nt__cell--val    { font-weight: 600; text-align: end;   }
.atuse-nt__cell--hidden { display: none; }
.atuse-nt__row--alt     { background: rgba(245, 239, 227, .5); }
.atuse-nt__unit         { font-weight: 400; font-size: 12px; }

/* ── Mobile nutrition table collapse ─────────────────────────────────────── */

@media (max-width: 767px) {
	.wp-block-atuse-bridge-nutrition-table .atuse-nt-table-wrap  { display: none; }
	.wp-block-atuse-bridge-nutrition-table .atuse-nt-mobile-toggle { display: flex; }
}

@media (min-width: 768px) {
	.wp-block-atuse-bridge-nutrition-table .atuse-nt-mobile-toggle { display: none; }
	.wp-block-atuse-bridge-nutrition-table .atuse-nt-table-wrap  { display: block; }
}

.atuse-nt-mobile-toggle {
	width:           100%;
	justify-content: space-between;
	align-items:     center;
	padding:         8px 16px;
	font-family:     Assistant, "Heebo", "Arial Hebrew", system-ui, sans-serif;
	font-size:       14px;
	font-weight:     500;
	color:           var(--atuse-rc-primary, #C4552A);
	background:      transparent;
	border:          1px solid var(--atuse-rc-surface, #F5EFE3);
	border-radius:   6px;
	cursor:          pointer;
	margin-block-end:8px;
	direction:       rtl;
}