/*
 * Item page (/dvar-torah/{id}/) and the "no longer available" page. Tokens,
 * buttons, tags and the state panel are in base.css; every rule is scoped
 * under #dt-item (see there).
 */

#dt-item .dt-preview-note { margin: var(--s5) 0 0; padding: var(--s3) var(--s4); background: #FFF4D6; color: #8A5A00; border-radius: var(--r); font-size: 15px; }

/* Breadcrumbs */
#dt-item .dt-crumbs { padding-top: var(--s5); font-size: 14px; }
#dt-item .dt-crumbs ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
#dt-item .dt-crumbs li + li::before { content: "›"; margin: 0 6px; color: var(--line); }
#dt-item .dt-crumbs a { color: var(--muted); text-decoration: none; }
#dt-item .dt-crumbs a:hover { color: var(--gold-ink); text-decoration: underline; }

#dt-item .dt-item-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s7); margin-top: var(--s5); align-items: start; }

/* Head */
#dt-item .dt-item-head h1 { font-size: 46px; font-weight: 700; margin: var(--s2) 0 var(--s4); }
#dt-item .dt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s5); color: var(--muted); font-size: 15px; padding-bottom: var(--s4); border-bottom: 1px solid var(--line); }
#dt-item .dt-speaker { color: var(--ink); font-weight: 500; text-decoration: none; }
#dt-item .dt-speaker:hover { color: var(--gold-ink); text-decoration: underline; }
#dt-item .dt-tags { display: inline-flex; flex-wrap: wrap; gap: 6px; }

/* Actions */
#dt-item .dt-item-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: var(--s4) 0 var(--s5); }
#dt-item .dt-share { position: relative; }
#dt-item .dt-share summary { list-style: none; }
#dt-item .dt-share summary::-webkit-details-marker { display: none; }
#dt-item .dt-share-menu { position: absolute; top: calc(100% + 6px); inset-inline-start: 0; z-index: 30; display: flex; flex-direction: column; min-width: 200px; padding: var(--s2); background: var(--white); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg); }
#dt-item .dt-share-menu :is(a, button) { display: block; width: 100%; min-height: 0; margin: 0; padding: 10px 12px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink); font-size: 15px; text-align: start; text-decoration: none; cursor: pointer; }
#dt-item .dt-share-menu :is(a, button):hover { background: var(--cream); }

/* Text */
#dt-item .dt-pullquote { margin: 0 0 var(--s6); padding: var(--s5) var(--s6); background: var(--cream-2); border: 0; border-inline-start: 4px solid var(--gold); border-radius: 0 var(--r) var(--r) 0; font-family: var(--font-display); font-size: 23px; font-style: normal; line-height: 1.55; color: var(--brown); }
#dt-item .dt-abstract { margin-bottom: var(--s6); padding: var(--s4) var(--s5); background: var(--white); border: 1px solid var(--line); border-radius: var(--r); }
#dt-item .dt-abstract .dt-label { font-family: var(--font-body); font-size: 13px; font-weight: 600; margin-bottom: var(--s1); }
#dt-item .dt-abstract p { margin: 0; }
#dt-item .dt-prose { max-width: 68ch; font-size: 19px; line-height: 1.9; overflow-wrap: break-word; }
#dt-item .dt-prose p { margin: 0 0 1.1em; }
#dt-item .dt-prose h3 { font-size: 22px; margin: 1.4em 0 .6em; }
#dt-item .dt-prose blockquote { margin: 0 0 1.2em; padding: var(--s4) var(--s5); border: 0; background: var(--cream-2); border-radius: var(--r); font-family: var(--font-display); font-size: 20px; font-style: normal; color: var(--brown); }
#dt-item .dt-prose blockquote::before { content: none; } /* Some themes add a quote mark. */
#dt-item .dt-prose cite { display: block; margin-top: 6px; font-family: var(--font-body); font-size: 13px; font-style: normal; color: var(--muted); }
#dt-item .dt-no-text { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s5); background: var(--white); border: 1px dashed var(--line); border-radius: var(--r); }
#dt-item .dt-no-text span { display: block; font-size: 14px; color: var(--muted); }

/* Side column */
#dt-item .dt-item-side { display: flex; flex-direction: column; gap: var(--s5); }
#dt-item .dt-side-box { padding: var(--s4) var(--s5); background: var(--white); border: 1px solid var(--line); border-radius: var(--r); }
#dt-item .dt-side-box h2 { font-size: 18px; margin-bottom: var(--s2); }
#dt-item .dt-side-list { list-style: none; margin: 0; padding: 0; text-align: start; }
#dt-item .dt-side-list li { margin: 0; }
#dt-item .dt-side-list li + li { border-top: 1px solid var(--line); }
#dt-item .dt-side-list a { display: block; padding: 10px 0; color: var(--ink); text-decoration: none; }
#dt-item .dt-side-list a:hover .dt-t { color: var(--gold-ink); text-decoration: underline; }
#dt-item .dt-side-list .dt-t { display: block; font-family: var(--font-display); font-size: 16px; font-weight: 700; line-height: 1.35; }
#dt-item .dt-side-list .dt-s { font-size: 13px; color: var(--muted); }
#dt-item .dt-side-more { display: inline-block; margin-top: var(--s2); font-size: 14px; }

/* No longer available */
#dt-item .dt-unavailable { max-width: 640px; margin: var(--s8) auto; }
#dt-item .dt-unavailable h1 { font-size: 30px; margin: var(--s3) 0 var(--s2); }
#dt-item .dt-unavailable .dt-side-list { max-width: 420px; margin: 0 auto var(--s5); }

#dt-item .dt-print-url { display: none; }

/* Tablet: the side column moves below the text. */
@media (max-width: 1023px) {
	#dt-item .dt-item-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
}

/* Phone: one column, and the actions become a bar fixed to the bottom of the screen. */
@media (max-width: 639px) {
	#dt-item .dt-item-head h1 { font-size: 32px; }
	#dt-item .dt-meta { gap: var(--s2) var(--s4); }
	#dt-item { padding-bottom: calc(var(--s7) + 64px); } /* Room for the bar. */
	#dt-item .dt-item-actions { position: fixed; inset: auto 0 0 0; z-index: 300; margin: 0; padding: var(--s2) 16px calc(var(--s2) + env(safe-area-inset-bottom, 0px)); background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(43, 33, 24, .08); flex-wrap: nowrap; }
	#dt-item .dt-share { flex: 1; }
	#dt-item .dt-share summary { width: 100%; min-height: 44px; }
	#dt-item .dt-item-actions > .dt-btn { min-height: 44px; }
	#dt-item .dt-share-menu { top: auto; bottom: calc(100% + 6px); }
	#dt-item .dt-share-menu :is(a, button) { padding: 12px; }
	#dt-item .dt-pullquote { padding: var(--s4); font-size: 20px; }
	#dt-item .dt-prose { font-size: 18px; }
	#dt-item .dt-no-text { flex-direction: column; align-items: stretch; }
	#dt-item .dt-unavailable { margin: var(--s6) auto; }
}

/* Print: the text only, with its address at the end. */
@media print {
	header:not(.dt-item-head), footer, nav,
	.elementor-location-header, .elementor-location-footer,
	.ekit-template-content-header, .ekit-template-content-footer,
	#wpadminbar,
	#dt-item .dt-item-actions, #dt-item .dt-item-side, #dt-item .dt-toast, #dt-item .dt-preview-note { display: none !important; }
	#dt-item { max-width: none; padding: 0; }
	#dt-item .dt-item-layout { display: block; margin: 0; }
	#dt-item .dt-item-head h1 { font-size: 28pt; }
	#dt-item .dt-meta a { color: inherit; text-decoration: none; }
	a[href]::after { content: none !important; } /* The live theme prints each link's full address after it. */
	#dt-item .dt-prose { max-width: none; font-size: 13pt; line-height: 1.7; }
	#dt-item .dt-prose blockquote, #dt-item .dt-pullquote { break-inside: avoid; }
	#dt-item .dt-print-url { display: block; margin-top: 2em; font-size: 10pt; color: var(--muted); direction: ltr; text-align: left; }
}