/**
 * Work-in-Shifts skin.
 *
 * Palette, type and card shapes come from Mockup/work-in-shifts.html. Directorist
 * ships mirrored RTL builds of its own stylesheets, so nothing here needs to
 * flip direction by hand -- logical properties are used where this file adds
 * its own spacing.
 */

/* ---------- Fonts ---------- */

@font-face {
	font-family: 'Heebo';
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url('../fonts/heebo-hebrew.woff2') format('woff2');
	unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
	font-family: 'Heebo';
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url('../fonts/heebo-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

@font-face {
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url('../fonts/rubik-hebrew.woff2') format('woff2');
	unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url('../fonts/rubik-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

/* ---------- Tokens ---------- */

:root {
	--sw-green-deep: #28401F;
	--sw-green-deeper: #20331A;
	--sw-green-mid: #4C7A3A;
	--sw-green-bright: #79A75A;
	--sw-green-soft: #DCE9D0;
	--sw-green-pale: #F0F5EA;
	--sw-cream: #FBF9F2;
	--sw-gold: #D6A23C;
	--sw-brown: #7A5C3E;
	--sw-white: #FFFFFF;
	--sw-ink: #2A2A22;
	--sw-muted: #8B9A83;
	--sw-whatsapp: #25D366;
	--sw-whatsapp-ink: #103928;
	--sw-whatsapp-deeper: #20B95A;
	--sw-shadow: 0 6px 20px rgba(40, 64, 31, 0.14);
	--sw-shadow-sm: 0 2px 8px rgba(40, 64, 31, 0.10);
	--sw-radius: 18px;
	/* Layout is driven by these three, not by a list of device breakpoints:
	   cards claim a column once --sw-card-min fits, prose stops widening at
	   --sw-column-width-wide, and the page itself stops at --sw-container. */
	--sw-card-min: 300px;
	--sw-column-width-wide: 720px;
	--sw-container: 1140px;
	--sw-gutter: 18px;
}

/* Directorist's own palette, repointed at the board's.
 *
 * Its stock primary is pure black, so every control this theme has not dressed
 * by hand -- the sign-in button, the submission form's buttons, checkboxes --
 * arrives black on a cream page. Setting the variables at the source recolours
 * all of them at once, rather than chasing each button with its own rule.
 *
 * The two btn-primary values are listed separately because Directorist hard
 * codes them as #000 rather than deriving them from the primary above. The rgb
 * triplets are raw numbers on purpose: they are consumed inside rgba().
 *
 * --directorist-color-dark is deliberately left alone; it colours body text,
 * not controls, and tinting that green would wash the page out.
 */
:root {
	--directorist-color-primary: #28401F;
	--directorist-color-primary-rgb: 40, 64, 31;
	--directorist-color-btn-primary-bg: #28401F;
	--directorist-color-btn-primary-border: #28401F;
	--directorist-color-btn-primary-rgb: 40, 64, 31;

	/* Directorist's "info" blue, which it uses in exactly one place: the edit
	   link on each row of the dashboard's table. Left alone it is the only
	   blue on a green page. */
	--directorist-color-info: #4C7A3A;
}

/* ---------- App shell ---------- */

body {
	font-family: 'Heebo', system-ui, sans-serif;
	background:
		radial-gradient(circle at 100% 0%, var(--sw-green-soft) 0%, transparent 45%),
		var(--sw-cream);
	color: var(--sw-ink);
	-webkit-tap-highlight-color: transparent;
}

/* The mockup is drawn at phone width, but the site is not phone-only: narrow
   screens get that single app-like column, wider ones get a real page with the
   same palette and card language rather than a stretched phone. */
.wp-site-blocks {
	width: min(100%, var(--sw-container));
	margin-inline: auto;
	min-height: 100vh;
	background: var(--sw-cream);
	overflow-x: hidden;
}

.wp-site-blocks > * {
	margin-block: 0;
}

/* The shadow suggests a sheet floating above the page, which only reads once
   there is background either side of it. On a phone the sheet is the screen,
   so it would just be a smudge at the edges. This is a genuine change in the
   design rather than a size tweak, which is why it is the one place a
   breakpoint beats intrinsic sizing. */
@media (min-width: 1180px) {
	.wp-site-blocks {
		box-shadow: 0 0 40px rgba(0, 0, 0, 0.08);
	}
}

h1, h2, h3, h4, .directorist-listing-title, .directorist-btn {
	font-family: 'Rubik', system-ui, sans-serif;
}

/* ---------- Site header ---------- */

/* The template part renders its own <header> inside this wrapper, so padding
   here would be applied twice. The background and stripe live on the wrapper;
   the spacing lives in parts/header.html.

   White rather than the mockup's green gradient, because the brand is now the
   logo and the logo is dark green ink on white. On green it needed either a
   knockout version of the artwork, which does not exist, or a white plate,
   which reads as a sticker. On white its own ground disappears and the ink
   lands on the paper it was drawn for. The green moves down to the stripe and
   out to the navigation, so the page still opens in the board's colours.

   No overflow: hidden. It was here defensively, and nothing needs it -- the
   background is a paint and the stripe below is pinned inside the bottom
   edge -- but it clipped the account menu to the header, hiding יציאה.

   z-index so the menu, which now hangs past the header, paints over the page
   rather than behind the first card. */
.wp-site-blocks > header {
	background: var(--sw-white);
	color: var(--sw-green-deep);
	padding: 0;
	position: relative;
	z-index: 10;
}

/* The stitched rule along the bottom of the mockup's header, at full strength
   now that it is the only green left up here: the 0.55 that softened it inside
   a green field left the white header and the cream page running together.

   Half the height it was drawn at. It is a trim, and at 14px it was claiming
   as much of a phone's first screen as a line of text; at 7 the stitches still
   read and the board starts that much sooner. The header's own bottom padding
   came down with it in parts/header.html, or the stripe would just have left
   more white above itself and saved nothing. */
.wp-site-blocks > header::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 7px;
	background-image: repeating-linear-gradient(90deg,
		var(--sw-green-bright) 0 22px, var(--sw-green-deep) 22px 24px);
}

/* The name and the tagline are both drawn into the lockup, so the artwork
   replaces the two blocks that used to set them, and the type rules that
   styled those go with them. Nothing takes their place here: the block is
   centred and sized through its own attributes in parts/header.html, and
   core's site-logo styles already cap the picture at the width it is given.

   460px is a maximum rather than a size. The header's own padding is what
   stops it on a phone, so the artwork -- cropped to within a few pixels of its
   own ink -- starts and ends on the same line as the first and last button of
   the row beneath it; a wider screen stops it at 460 rather than letting a
   picture of a name grow to the width of the column. */

/* ---------- Header navigation ---------- */

.work-in-shifts-header__brand {
	min-width: 0;
}

/* The account rides at the end of the same row as the rest. */
.work-in-shifts-account {
	display: flex;
	flex: none;
	margin: 0;
	margin-inline-start: auto;
}

/* The pair of hairlines under the lockup is one line, not two: a rule with a
   paler one directly beneath it is how an engraved edge is drawn, and the eye
   reads the second as the light falling past the first rather than as a
   border of its own. It separates the name from the places you can go without
   the weight of a real divider.

   #D9DECE is the hairline the search frame and the outlined tag are already
   drawn in, so the fold carries the same weight as every other edge on the
   page instead of being the darkest thing in the header.

   The 16px that used to sit between the two now sits either side of the line,
   so the row keeps its distance from the rule as well as from the logo. */
.work-in-shifts-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .375em;
	font-size: 16px;
	margin-block-start: 14px;
	padding-block-start: 14px;
	border-block-start: 1px solid #D9DECE;
	box-shadow: inset 0 1px 0 #F2F4EE;
}

/* How large the bar's buttons are is a setting on the board's own screen, and
   the theme names the choice as a class on the bar. Everything the buttons
   are made of -- the gaps, the padding, the figure, the writing, the menu the
   account opens -- is measured in ems of the bar's own text, so this one size
   carries all of it. The pixel figures in the notes below are the normal
   size's: a 36px pill.

   Named by the height a pill stands at, 44 and 52 against the normal 36. */
.work-in-shifts-nav--large {
	font-size: calc(16px * 44 / 36);
}

.work-in-shifts-nav--larger {
	font-size: calc(16px * 52 / 36);
}

/* The parent theme holds the header's content to 645px however wide the
   screen, which is room for the 52px pills' figures and not always for their
   words. At that size the bar is as wide as its row instead, never narrower
   than that 645 and never wider than the header, so a wide screen can show
   the words and a bar with room to spare looks like every other size's. */
.wp-site-blocks > header .work-in-shifts-nav--larger {
	width: max-content;
	min-width: min(100%, var(--wp--style--global--content-size, 645px));
	max-width: 100%;
}

/* Every one of these selectors repeats `.wp-site-blocks > header` to outrank
   the parent theme's own link styling, which these would otherwise tie with on
   specificity and beat only by the order the stylesheets happen to load in. */
.wp-site-blocks > header .work-in-shifts-nav__link {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	font-family: 'Heebo', system-ui, sans-serif;
	font-size: 1em;
	font-weight: 600;
	line-height: 1;
	color: var(--sw-green-deep);
	background: var(--sw-green-pale);
	/* Even, top and bottom. The figure is taller than the writing, so the flex
	   row centres the line box inside it first; from there the baseline falls
	   13px and Heebo stands its Hebrew 9px above the baseline, which leaves the
	   block of letters on the pill's centre.

	   This used to carry a pixel more above, on the reasoning that Hebrew has
	   no descenders and so sits high in a line box that reserves room for
	   them. The room is real but the correction was measured against the ink,
	   which includes the ascender on ל -- one stroke, not the block the eye
	   reads -- and answering it pushed the writing a pixel and a half low. */
	padding: .5em 1.125em;
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
	transition: background .15s ease, color .15s ease;
}

.wp-site-blocks > header .work-in-shifts-nav__link:hover {
	background: var(--sw-green-soft);
	color: var(--sw-green-deep);
}

/* The page you are on, so the bar answers "where am I" as well as "where can
   I go" -- the site had no answer to either.
 *
 * Not the account, though: it is a control rather than one of the board's
 * three places, and filling it in on the sign-in page made it the loudest
 * thing in the header at the moment it has least to say. It still carries
 * aria-current, so the page is announced without being shouted. */
.wp-site-blocks > header .work-in-shifts-nav__link.is-here:not(.work-in-shifts-nav__link--account) {
	background: var(--sw-green-deep);
	color: var(--sw-white);
}

/* The account is one of the bar's buttons, not a different species. Outlining
   it to set it apart only made it read as unfinished beside the filled ones,
   and its place at the end of the row already says what it is. */
.wp-site-blocks > header .work-in-shifts-nav__link--account {
	border: none;
}

/* Directorist paints its icons as a mask on ::after, so the wrapper must stay
   transparent or it draws a solid block over the glyph. currentColor rather
   than white, so the figure follows the pill through its open and active
   states instead of disappearing into them.

   20px against 16px writing: the figure is what a glance lands on, and at the
   text's own size it read as a mark beside the word rather than as the thing
   the word names. It is the tallest item in the row now, so it and not the
   line box sets how tall the pill stands, and the padding above and below came
   down to 8 to keep the pill at the 36px it already was.

   Boxed with line-height 0 so the wrapper adds no leading of its own on top of
   the flex row's centring. */
.wp-site-blocks > header .work-in-shifts-nav__link .directorist-icon-mask {
	display: inline-flex;
	flex: none;
	margin: 0;
	line-height: 0;
	background-color: transparent !important;
}

.wp-site-blocks > header .work-in-shifts-nav__link .directorist-icon-mask::after {
	width: 1.25em;
	height: 1.25em;
	background-color: currentColor !important;
}


/* ---------- Header navigation: the signed-in account ---------- */

.work-in-shifts-nav__account {
	position: relative;
}

/* The disclosure triangle, in both the standard and the WebKit spelling. The
   caret below replaces it, on the side the text runs towards. */
.work-in-shifts-nav__account > summary {
	list-style: none;
	cursor: pointer;
}

.work-in-shifts-nav__account > summary::-webkit-details-marker {
	display: none;
}

.work-in-shifts-nav__account > summary::after {
	content: "";
	width: 0;
	height: 0;
	margin-inline-start: .125em;
	border-inline: .3125em solid transparent;
	border-block-start: .375em solid currentColor;
	transition: transform .15s ease;
}

.work-in-shifts-nav__account[open] > summary::after {
	transform: rotate(180deg);
}

.work-in-shifts-nav__account[open] > summary {
	background: var(--sw-green-deep);
	color: var(--sw-white);
}

/* The name is the user's own, so it takes whatever width it needs up to a
   point, then gives way rather than pushing the bar wider than the header. */
.work-in-shifts-nav__name {
	max-width: 12ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}


/* Anchored on its end edge so it opens inward. The control now sits at the end
   of the bar, so a menu hanging further that way would run off the screen. */
.work-in-shifts-nav__menu {
	position: absolute;
	inset-block-start: calc(100% + .375em);
	inset-inline-end: 0;
	z-index: 20;
	min-width: 10em;
	display: flex;
	flex-direction: column;
	padding: .375em;
	background: var(--sw-white);
	border-radius: .875em;
	box-shadow: var(--sw-shadow);
}

/* Repeating the header ancestor again: these are links inside the header too,
   so the brand rule reaches them the same way it reaches the bar itself.

   The same 16px as the bar, and 10px above and below it stands an item at the
   36px a pill stands at: the menu is what the account button opens into, so it
   is read at the size of the thing it came out of rather than at the size the
   bar used to be. */
.wp-site-blocks > header .work-in-shifts-nav__menu-item {
	font-family: 'Heebo', system-ui, sans-serif;
	font-size: 1em;
	font-weight: 600;
	line-height: 1;
	color: var(--sw-green-deep);
	text-decoration: none;
	padding: .625em .875em;
	border-radius: .625em;
	white-space: nowrap;
}

.wp-site-blocks > header .work-in-shifts-nav__menu-item:hover {
	background: var(--sw-green-pale);
	color: var(--sw-green-deep);
}

/* ---------- Header navigation: narrow screens ---------- */

/* Below this the account's own pill no longer fits on the line with the three
   places you can go, and it is the one that should give way -- it is who you
   are, not where you are going. It drops its name and its caret for a circle
   and stays in the row, at the end of it, where the auto margin already puts
   it: 36px is the square the pills already stand at. The name, the figure and
   the caret measure 193 together, which with the three places and the gaps
   comes to 615 of the 620 a 660px screen leaves the bar.

   A width, not a device: the number is where the bar runs out of room, and
   each size runs out at its own. The 44px pills keep a guest's word down to
   690, but no width fits a member's name beside them -- the bar stops at 645
   however wide the screen is -- so a member is a circle at every width there.
   The 52px pills have the bar widened for them, and keep a name down to
   930. */
.work-in-shifts-nav--large .work-in-shifts-nav__account .work-in-shifts-nav__name,
.work-in-shifts-nav--large .work-in-shifts-nav__account > summary::after {
	display: none;
}

/* Square, at the height the pills make out of their own padding and line box,
   so the circle reads as one of the row rather than as a control that happened
   to land in it. */
.wp-site-blocks > header .work-in-shifts-nav--large .work-in-shifts-nav__account > .work-in-shifts-nav__link--account {
	width: 2.25em;
	height: 2.25em;
	padding: 0;
	gap: 0;
	justify-content: center;
}

@media (max-width: 930px) {
	.work-in-shifts-nav--larger .work-in-shifts-nav__name,
	.work-in-shifts-nav--larger .work-in-shifts-nav__account > summary::after {
		display: none;
	}

	.wp-site-blocks > header .work-in-shifts-nav--larger .work-in-shifts-nav__link--account {
		width: 2.25em;
		height: 2.25em;
		padding: 0;
		gap: 0;
		justify-content: center;
	}
}

@media (max-width: 690px) {
	.work-in-shifts-nav--large .work-in-shifts-nav__name {
		display: none;
	}

	.wp-site-blocks > header .work-in-shifts-nav--large .work-in-shifts-nav__link--account {
		width: 2.25em;
		height: 2.25em;
		padding: 0;
		gap: 0;
		justify-content: center;
	}
}

@media (max-width: 660px) {
	.work-in-shifts-nav--normal .work-in-shifts-nav__name,
	.work-in-shifts-nav--normal .work-in-shifts-nav__account > summary::after {
		display: none;
	}

	.wp-site-blocks > header .work-in-shifts-nav--normal .work-in-shifts-nav__link--account {
		width: 2.25em;
		height: 2.25em;
		padding: 0;
		gap: 0;
		justify-content: center;
	}
}

/* Narrower still, and the three places give way the same way the account did
   before them: the word goes, the figure stays, and the pill closes to the
   circle the figure needs. A house, a list and a plus are conventional enough
   to be read without their labels, which is what makes this trade available
   here and not on, say, a chip naming a trade.

   Below 520px the labelled row runs out of line: the three places measure 404
   together, the account is already a circle by then, and with the gaps that is
   458 of the 480 a screen this wide has to give. The 44px pills run out below
   610, and the 52px ones below 710. The label stays in the markup and in the
   accessibility tree through aria-label, so only the drawing of it changes. */
@media (max-width: 710px) {
	.work-in-shifts-nav--larger .work-in-shifts-nav__label {
		display: none;
	}

	.wp-site-blocks > header .work-in-shifts-nav--larger .work-in-shifts-nav__link {
		width: 2.25em;
		height: 2.25em;
		padding: 0;
		gap: 0;
		justify-content: center;
	}
}

@media (max-width: 610px) {
	.work-in-shifts-nav--large .work-in-shifts-nav__label {
		display: none;
	}

	.wp-site-blocks > header .work-in-shifts-nav--large .work-in-shifts-nav__link {
		width: 2.25em;
		height: 2.25em;
		padding: 0;
		gap: 0;
		justify-content: center;
	}
}

@media (max-width: 520px) {
	.work-in-shifts-nav--normal .work-in-shifts-nav__label {
		display: none;
	}

	.wp-site-blocks > header .work-in-shifts-nav--normal .work-in-shifts-nav__link {
		width: 2.25em;
		height: 2.25em;
		padding: 0;
		gap: 0;
		justify-content: center;
	}
}

/* The parent theme stacks three separate spacings between the header and the
   content -- a margin on main, padding on its inner group, and a margin on
   .entry-content -- which adds up to about 80px of emptiness under the header.
   Collapse them into one deliberate gap. */
.wp-site-blocks > main {
	margin-block-start: 0;
}

.wp-site-blocks > main > .wp-block-group {
	padding-block: 20px 0;
}

.wp-site-blocks > main .entry-content {
	margin-block-start: 0;
}

/* ---------- The board's search ---------- */

/* The board's own search field, wearing the same ground, edge and corner as
   the one on the listings page: white paper, a hairline in the colour every
   other edge on the site is drawn in, and no shadow under it. The two are the
   same control asking the same question, and there is no reason for the front
   page to answer in a different voice.

   The magnifier stays where the mockup put it -- inside the box, on the side
   the text starts from -- and it is a real submit button rather than the
   mockup's decorative glyph, so the box can be used without relying on a
   keyboard that offers a search key.

   Logical padding, because the 46px belongs to whichever side the icon is on
   and that follows the writing direction, not the left of the screen. */
.work-in-shifts-search {
	position: relative;
	margin-block-end: 4px;
}

.work-in-shifts-search__input {
	width: 100%;
	height: 40px;
	padding-inline: 46px 16px;
	border: 1px solid #D9DECE;
	border-radius: 12px;
	background: var(--sw-white);
	font-family: 'Heebo', system-ui, sans-serif;
	font-size: 14px;
	color: var(--sw-ink);
}

.work-in-shifts-search__input::placeholder {
	color: var(--sw-muted);
}

.work-in-shifts-search__input:focus-visible {
	outline: 2px solid var(--sw-green-mid);
	outline-offset: 2px;
}

.work-in-shifts-search__submit {
	position: absolute;
	inset-inline-start: 12px;
	inset-block-start: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--sw-green-mid);
	cursor: pointer;
}

/* Directorist paints its icons as a mask on ::after, so the wrapper has to stay
   transparent or it draws a block over the glyph -- the same treatment the
   navigation's own icons need. */
.work-in-shifts-search__submit .directorist-icon-mask {
	display: inline-flex;
	line-height: 0;
	background-color: transparent !important;
}

/* Turned to sit as the filter bar's magnifier does: lens top-left, handle down
   to the right. The glyph's own orientation is a quarter turn from that, not
   half -- a circle on a 45-degree stem looks mirrored either way. */
.work-in-shifts-search__submit .directorist-icon-mask::after {
	width: 18px;
	height: 18px;
	background-color: currentColor !important;
	transform: rotate(-90deg);
}

/* The row between the box and the grid while something is typed: the way to
   the things the grid cannot answer -- a person's name, a word from inside a
   recommendation -- and the visible sign that typing did anything at all. */
.work-in-shifts-search-status {
	margin-block: 10px 4px;
}

.work-in-shifts-search-status__all {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 14px;
	border-radius: 12px;
	background: var(--sw-green-pale);
	color: var(--sw-green-deep);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.work-in-shifts-search-status__all::after {
	content: "";
	flex: none;
	width: 0;
	height: 0;
	border-block: 5px solid transparent;
	/* The filled side is the triangle's base, so it points away from it -- put
	   the base on the starting edge and the point follows the way the text
	   runs, leftwards here, rightwards in a language that reads that way. */
	border-inline-start: 6px solid currentColor;
}

.work-in-shifts-search-status__all:hover {
	background: var(--sw-green-soft);
}

.work-in-shifts-search-status__note:empty {
	display: none;
}

.work-in-shifts-search-status__note {
	margin-block: 10px 0;
	font-size: 13px;
	color: var(--sw-muted);
}

/* The card is a flex box, which outranks the hidden attribute's own display. */
.work-in-shifts-cat-card[hidden] {
	display: none;
}

/* ---------- Directorist: archive ---------- */

/* The page's gutter is the theme's root padding, which theme.json floors at
   --sw-gutter, and one gutter is the whole of it. Directorist nests its
   containers -- archive-contents holds a container-fluid which holds another --
   and each one carries a gutter of its own, so on a 375px screen the board's
   cards sat 51px in from the edge while the headings above them sat at 30px,
   and a third of the screen was margin.

   Zeroed rather than left out: Directorist's own rule pads these 15px, so
   deleting this one would only trade the theme's gutter for the plugin's. */
.directorist-container-fluid,
.directorist-archive-contents {
	padding-inline: 0;
}

.directorist-listings-header {
	margin-block: 18px 12px;
}

/* Directorist spaces this row for the two things it ships with. It carries
   three now -- the category tag, the count and the sort pill -- and its 15px
   was the last 5px between them and a wrapped row on a phone. The repeated
   ancestors are there to outrank the plugin's own rule. */
.directorist-content-active .listing-with-sidebar__header .directorist-listings-header__left {
	gap: 10px;
}

/* Says which field or trade the count is counting. Sized as the chip row's
   pills are, down to the pixel, so the two read as one family; outlined and
   unfilled and without a hover, so it is still plainly not one of them. It
   reports where the reader is, and there is nowhere for it to lead. */
.work-in-shifts-listings-where {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 7px 14px;
	border-radius: 999px;
	border: 1px solid #D9DECE;
	font-family: 'Heebo', system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	color: var(--sw-green-deep);
}

/* Below 426px Directorist gives the sort control a line of its own, stacked
   under the count. Both together are 150px of the 284 a 320px screen offers,
   so they go back on one line. The repeated ancestor is there to outrank the
   plugin's own rule, which carries the same two classes. */
@media (max-width: 425px) {
	.directorist-content-active .listing-with-sidebar__header .directorist-listings-header__right {
		flex: 0 1 auto;
		flex-direction: row;
	}
}

/* ---------- Directorist: the filter bar ---------- */

/* Two of the column's wrappers can end up holding nothing but the template's
   whitespace: the directory-type nav, there being one directory, and the
   search box when the setting says to draw none. Each measures nothing and
   each still takes one of the column's 30px gaps, which is what stood between
   the header and the search box. :empty would not catch either -- whitespace
   is a child like any other. */
.listing-with-sidebar__type-nav:not(:has(*)),
.listing-with-sidebar__searchform:not(:has(*)) {
	display: none;
}

/* Directorist's own sizes are drawn for a page whose search is the headline.
   Here it sits above a list the reader is already looking at, and it claimed
   187px of a 320px screen before the first recommendation -- more than half a
   phone -- with a 50px button standing against 40px fields.

   The white card around it goes with them. The board's search box is a field
   on the cream with nothing behind it, and there is no card here either: the
   two rounded controls and the button are their own shape, and boxing them
   spent 26px on saying so a second time. */
.listing-with-sidebar__searchform .directorist-search-form__box {
	padding: 0;
	gap: 10px;
	background: none;
	border: 0;
	box-shadow: none;
}

/* Both controls drew their edges from the card that used to be behind them:
   transparent ground, no border. Standing on the cream they need their own,
   or a search field reads as a line of grey text with nothing to click. The
   ground goes on the wrapper rather than on select2's box, which stops short
   of the chevron Directorist parks at the field's start. */
.listing-with-sidebar__searchform .directorist-search-query .directorist-search-field__input,
.listing-with-sidebar__searchform .directorist-select {
	background: var(--sw-white);
	border: 1px solid #D9DECE;
	border-radius: 12px;
}

.listing-with-sidebar__searchform .directorist-search-query .directorist-search-field__input {
	padding-inline: 14px;
}

/* The select takes its height from select2's box inside it, so the border
   above lands outside the 40px the other two controls stand at. Height stated
   here and handed down, rather than added to. */
.listing-with-sidebar__searchform .directorist-select {
	box-sizing: border-box;
	height: 40px;
}

.listing-with-sidebar__searchform .directorist-select .select2,
.listing-with-sidebar__searchform .directorist-select .select2-selection {
	height: 100%;
}

/* Above 576px Directorist drops the fields 5px and insets each one 15px on its
   end edge. Both centred them against the white card that used to sit behind
   them -- the inset making room for the dividers it drew between fields. With
   the card gone the drop only stood them below the button they share a line
   with, and the inset only opened a 25px gap where the row declares 10px.

   One gap for the whole row while we are here: Directorist puts 18px between
   the fields and the box puts 10px before the button, which reads as a wobble
   once nothing is drawn around them. */
.listing-with-sidebar__searchform .directorist-search-form__top {
	margin-top: 0;
	gap: 10px;
}

.listing-with-sidebar__searchform .directorist-search-form__top .directorist-search-field {
	padding-left: 0;
}

/* And the same again on the button's side of the row, where Directorist pads
   the action box by another 10px on top of the gap the row already declares. */
.listing-with-sidebar__searchform .directorist-search-form-action {
	padding-inline-start: 0;
}

/* The glyph ships with its lens top-right and its handle down to the left, and
   Directorist turns it a quarter clockwise, which leaves the handle sticking up
   out of the top of the lens. Half a turn more puts it back on its feet, lens
   top-left and handle down to the right. */
.listing-with-sidebar__searchform .directorist-search-form-action__submit .directorist-btn-search .directorist-icon-mask::after {
	transform: rotate(-90deg);
}

/* Two of Directorist's own rules stand in the way: a height on
   .directorist-search-form-action__submit and a taller min-height on
   .directorist-btn-lg. Hence the repeated ancestor, which selects nothing the
   line above it does not, and the min-height beside the height. */
.listing-with-sidebar__searchform .directorist-search-form-action__submit .directorist-btn-search {
	height: 40px;
	min-height: 40px;
	padding-inline: 18px;
	font-size: 14px;
	border-radius: 12px;
}

/* Below Directorist's breakpoint the three controls stack, one per line. The
   search phrase does want the full width, but the category and the button do
   not, so they share the second line instead of taking one each.

   display: contents on the wrapper hands its two fields to the grid below,
   which is what lets the button -- the wrapper's sibling, not its child -- sit
   beside one of them. */
@media (max-width: 767px) {
	.listing-with-sidebar__searchform .directorist-search-form__box {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: 8px;
	}

	.listing-with-sidebar__searchform .directorist-search-form-top {
		display: contents;
	}

	.listing-with-sidebar__searchform .directorist-search-query {
		grid-column: 1 / -1;
	}

	/* With the category dropdown switched off there are only two controls, and
	   they fit the one line -- the shape the board's own search box has. */
	.listing-with-sidebar__searchform .work-in-shifts-search-form--query .directorist-search-query {
		grid-column: auto;
	}
}

/* Directorist lays cards out with its own column classes, which assume a
   full-width page. This replaces that row with an intrinsically responsive
   grid: cards claim a column whenever one fits, so the count follows the space
   available rather than a set of guessed breakpoints. The min() guard stops a
   card wider than the viewport from forcing a horizontal scrollbar.

   Scoped to the archive: .directorist-row is Directorist's generic row class,
   used by the single listing page too, where turning it into a card grid put
   the page's one column into a single 300px-wide cell. */
.directorist-archive-items .directorist-row {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--sw-card-min)), 1fr));
	gap: 12px;
	margin-inline: 0;
}

.directorist-archive-items .directorist-row > [class*="directorist-col-"] {
	width: 100%;
	max-width: none;
	flex: none;
	padding: 0;
}

/* Anything that is prose or a form stays at a readable measure however wide
   the window gets. */
.directorist-search-contents,
.directorist-listing-form-wrap,
.directorist-single-listing-section {
	width: min(100%, var(--sw-column-width-wide));
	margin-inline: auto;
}

/* The single page reuses this class for its rating-and-category strip, which is
   a line of meta rather than a card -- hence the exclusion here and below. */
.directorist-listing-single:not(.directorist-listing-single-quickinfo) {
	background: var(--sw-white);
	border-radius: var(--sw-radius);
	padding: 16px;
	margin-bottom: 12px;
	box-shadow: var(--sw-shadow-sm);
	border: 1px solid rgba(76, 122, 58, 0.08);
	position: relative;
	overflow: hidden;
}

/* The dashed green rule across the top of every recommendation card. */
.directorist-listing-single:not(.directorist-listing-single-quickinfo)::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 5px;
	background-image: repeating-linear-gradient(90deg,
		var(--sw-green-bright) 0 14px, var(--sw-green-soft) 14px 16px);
}

.directorist-listing-title,
.directorist-listing-title a {
	font-weight: 700;
	font-size: 16px;
	color: var(--sw-ink);
	text-decoration: none;
}

.directorist-listing-card-text,
.directorist-listing-card-posted-date {
	font-size: 12px;
	color: var(--sw-muted);
}

.directorist-listing-excerpt,
.directorist-listing-card-excerpt {
	font-size: 14px;
	color: #5A5F52;
	line-height: 1.5;
}

/* Profession badge, as the pill under the name in the mockup. */
.directorist-listing-single__footer .directorist-listing-category a,
.directorist-listing-category a {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	color: var(--sw-green-mid);
	background: var(--sw-green-pale);
	padding: 2px 9px;
	border-radius: 10px;
	text-decoration: none;
}

/* ---------- Call / WhatsApp actions ---------- */

.directorist-listing-single__action-list {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}

.directorist-listing-single__action-list > div {
	flex: 1;
}

/* Directorist paints these grey with `background: ... !important` on this very
   selector, so !important here is not laziness -- a normal declaration cannot
   win against it at any specificity. Ours is later in the cascade, so matching
   the flag is enough. */
.directorist-listing-single__action-list .directorist-btn.directorist-btn-default,
.directorist-listing-single__action-list .directorist-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	padding: 10px 8px;
	border-radius: 12px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	border: none;
	background: var(--sw-green-deep) !important;
	color: var(--sw-white) !important;
}

.directorist-listing-single__action-list .directorist-btn-text {
	color: var(--sw-white) !important;
}

.directorist-listing-single__action-list .work-in-shifts-wa-btn.directorist-btn-default,
.directorist-listing-single__action-list .work-in-shifts-wa-btn {
	background: var(--sw-whatsapp) !important;
}

/* Directorist greys these on hover, !important and one class more specific
   than the rules above, which left the call button's number white on light
   grey. Each darkens its own colour instead. */
.directorist-listing-single__action-list .directorist-btn.directorist-btn-default:hover {
	background-color: var(--sw-green-deeper) !important;
}

.directorist-listing-single__action-list .work-in-shifts-wa-btn.directorist-btn-default:hover {
	background-color: var(--sw-whatsapp-deeper) !important;
}

/* The number is the button's whole label, so it never breaks across lines. */
.directorist-listing-single__action-list .work-in-shifts-action-number {
	white-space: nowrap;
}

/* WhatsApp's own buttons write on this green in dark ink: white on it is too
   faint to read. */
.directorist-listing-single__action-list .work-in-shifts-wa-btn .work-in-shifts-action-number {
	color: var(--sw-whatsapp-ink);
}

.directorist-listing-single__action-list .work-in-shifts-wa-btn .directorist-icon-mask::after {
	background-color: var(--sw-whatsapp-ink) !important;
}

/* The glyph is a mask on the ::after pseudo-element, tinted by its
   background-color -- painting the wrapper instead just draws a solid box over
   the icon. Only the pseudo-element should take the button's text colour. */
.directorist-listing-single__action-list .directorist-icon-mask {
	background-color: transparent !important;
	margin: 0;
}

.directorist-listing-single__action-list .directorist-icon-mask::after {
	background-color: var(--sw-white) !important;
}

/* ---------- Sort and filter chips ---------- */

.directorist-viewas {
	font-size: 13px;
}

/* The sort control, dressed as one of the chips it sits above. It offers to
   change the list exactly as they do, and it arrived as a 40px grey rectangle
   in the plugin's own typeface -- the last control on the row still wearing
   them. The pill is also 11px narrower and 10px shorter, which the count line
   needs now that it carries a category tag as well.

   The caret is a mask painted with currentColor, so it turns green with the
   text. The hover has to shout: the plugin's own carries !important, and
   would otherwise repaint the pill grey and drop the text colour to a
   variable it never defines. */
.directorist-sortby-dropdown .directorist-dropdown__toggle {
	height: auto;
	min-height: 0;
	padding: 7px 14px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: 'Heebo', system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	background: var(--sw-green-pale);
	color: var(--sw-green-deep);
}

.directorist-sortby-dropdown .directorist-dropdown__toggle:hover,
.directorist-sortby-dropdown .directorist-dropdown__toggle:focus {
	background-color: var(--sw-green-soft) !important;
	border-color: transparent !important;
	color: var(--sw-green-deep);
}

/* The control names the order it has put the list in, in place of the generic
   label, wherever the row can hold the name.

   Only there: the count line already carries a category tag and a count, and
   a sort named in full is twice the width of "מיון". 500px is where the widest
   pairing the tree can produce -- its longest category name against its
   longest sort name -- still leaves the three on one line, measured rather
   than guessed, and the column only grows from there. It was 480 while the
   chips were set in half pixels; a whole-pixel scale is wider, so the number
   was re-measured rather than kept.

   The :has() guard keeps a button from emptying out. The name is only drawn
   when the order in force is one the menu offers; when it is not, there is
   nothing to swap in and the generic label has to stay. */
.work-in-shifts-sort__current {
	display: none;
}

@media (min-width: 500px) {
	.directorist-dropdown__toggle:has(.work-in-shifts-sort__current) .work-in-shifts-sort__label {
		display: none;
	}

	.work-in-shifts-sort__current {
		display: inline;
	}
}

/* Directorist positions this panel three times in its RTL sheet: hung from its
   inline start by default, from its inline end below 1440px, and from its start
   again below 425px. That last one is the LTR rule mirrored across, where
   anchoring a menu to the right edge is what keeps it on the screen -- and here
   it does the opposite. The control sits at the left end of the count line, so a
   panel hung from its right edge opens leftwards off a phone: 119px of 212 at
   375px wide, with every sort name cut mid-word and no way to scroll to them. */
@media (max-width: 425px) {
	.directorist-content-active .directorist-listings-header__right .directorist-dropdown__links {
		inset-inline-start: auto;
		inset-inline-end: 0;
	}
}

/* The panel is wider than the control it hangs from, so names set against the
   far edge stand clear of the button that opened them and sit under the count
   instead. Set against the same edge the panel is hung from, the list reads as
   the button's own, at every width. */
.directorist-sortby-dropdown .directorist-dropdown__links a {
	text-align: left;
}

/* Directorist nests two flex boxes between the column and the cards, and a flex
 * item's min-width defaults to auto -- never narrower than its own contents. A
 * chip longer than the column would push the column, the cards and the page out
 * with it rather than wrapping inside it.
 */
.listing-with-sidebar__listing,
.directorist-archive-items {
	min-width: 0;
}

/* The trades of the chosen field, sitting between the sort bar and the cards.
 *
 * Wrapping at every width, rather than the mockup's single sideways-scrolling
 * line. That line hides half of itself behind a gesture with nothing to
 * advertise it: no scrollbar, and swiping a strip sideways is not something a
 * reader thinks to try. Whatever falls off the edge is simply lost. Wrapping
 * spends a line or two of height above the first card and shows the lot.
 */
.work-in-shifts-trade-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

/* Typed as the header's pills are, being the same thing: a green pill you tap
   to go somewhere. Left to inherit, a chip took Directorist's page font at 12px
   and normal weight, which read as a caption beside them. Padding is even top
   and bottom for the reason given on the header's pills.

   A flex row rather than a line of text, because WordPress swaps each emoji
   for an <img>: inline, that image stands taller than the line box and lifts
   it, and the baseline -- with all the Hebrew on it -- goes down 1.7px to
   make room. As an item of its own it is centred beside the writing instead.
   The gap stands in for the space between them, which the flex item drops. */
.work-in-shifts-trade {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 7px 14px;
	border-radius: 999px;
	border: 1px solid transparent;
	font-family: 'Heebo', system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	background: var(--sw-green-pale);
	color: var(--sw-green-deep);
	text-decoration: none;
	white-space: nowrap;
}

.work-in-shifts-trade:hover {
	background: var(--sw-green-soft);
}

.work-in-shifts-trade.is-here {
	background: var(--sw-green-deep);
	color: var(--sw-white);
}

/* The ring a pill shows while it is being pressed. The parent theme draws
   every focus at 2px and leaves the colour at currentColor, so a chip answers
   a press with a dark green band as thick as two of the hairlines the rest of
   the page is drawn with -- on a shape 30px tall it reads as the pill having
   grown a second, heavier border.

   Half that. The ring still says which pill has the keyboard, which is what it
   is for, without restating the pill's own outline. It costs no room either
   way: an outline is painted over the page rather than laid out in it, so the
   chip is the same size pressed as at rest. */
.wp-site-blocks > header .work-in-shifts-nav__link:focus,
.work-in-shifts-trade:focus,
.directorist-sortby-dropdown .directorist-dropdown__toggle:focus {
	outline-width: 1px;
}

/* ---------- Forms ---------- */

.directorist-form-element,
.directorist-form-group input,
.directorist-form-group textarea,
.directorist-form-group select {
	width: 100%;
	padding: 11px 12px;
	border-radius: 11px;
	border: 1px solid #D9DECE;
	font-family: 'Heebo', system-ui, sans-serif;
	font-size: 14px;
	background: var(--sw-white);
	color: var(--sw-ink);
}

.directorist-form-group label,
.directorist-form-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--sw-brown);
}

.directorist-btn-primary,
.directorist-form-submit__btn {
	background: var(--sw-green-mid);
	border-color: var(--sw-green-mid);
	color: var(--sw-white);
	border-radius: 14px;
	font-weight: 700;
	font-size: 15px;
	padding: 14px;
}

/* Two dependent dropdowns replacing Directorist's flat category list. */
.work-in-shifts-category-picker {
	display: grid;
	gap: 8px;
}

.work-in-shifts-original-category,
.work-in-shifts-original-category + .select2 {
	display: none !important;
}

/* The fields stand in the one list of trades as headings that cannot be picked. */
.select2-results__option[aria-disabled="true"] {
	color: var(--sw-green-mid);
	font-weight: 700;
}

.work-in-shifts-footer-note {
	/* The parent theme's fluid paragraph sizing wins on font-size alone, which
	   leaves this one line about 77px tall. */
	font-size: 11px !important;
	line-height: 1.5;
	color: #A6B39E;
	margin: 0;
}

/* The parent theme falls back to listing every published page when no menu is
   assigned, which surfaces Directorist's utility pages (Dashboard, Sign In,
   Single Category...) as if they were navigation. */
.wp-block-navigation .wp-block-page-list {
	display: none;
}

/* ---------- Category grid (landing screen) ---------- */

/* Two across on a phone as in the mockup, more as the screen allows. */
.work-in-shifts-cat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
	gap: 12px;
	margin-block: 4px 26px;
}

.work-in-shifts-cat-card {
	background: var(--sw-white);
	border-radius: var(--sw-radius);
	padding: 16px 14px;
	text-align: center;
	box-shadow: var(--sw-shadow-sm);
	border: 1px solid rgba(76, 122, 58, 0.08);
	text-decoration: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	transition: transform .15s ease, box-shadow .15s ease;
}

.work-in-shifts-cat-card:hover {
	box-shadow: var(--sw-shadow);
}

.work-in-shifts-cat-card:active {
	transform: scale(0.96);
}

.work-in-shifts-cat-card__emoji {
	font-size: 28px;
	line-height: 1.2;
	margin-block-end: 4px;
}

.work-in-shifts-cat-card__label {
	font-family: 'Rubik', system-ui, sans-serif;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.3;
	color: var(--sw-green-deep);
}

.work-in-shifts-cat-card__count {
	font-size: 11px;
	color: var(--sw-muted);
}

.work-in-shifts-section-title {
	font-family: 'Rubik', system-ui, sans-serif;
	font-weight: 700;
	font-size: 17px;
	color: var(--sw-green-deep);
	margin-block: 0 12px;
}

/* ---------- Directorist: single recommendation ---------- */

/* The mockup has no detail view. This page exists because reviews live here, so
   it is drawn as the card opened up: same palette, same card shapes, same
   action buttons, on the one readable column the forms already use. */
.directorist-single-wrapper {
	width: min(100%, var(--sw-column-width-wide));
	margin-inline: auto;
}

/* Directorist pulls this header up 15px. Nothing between it and the block
   wrapper the page sits in carries a top padding or a border, so that margin
   collapses all the way out and lifts the whole page, tucking the title under
   the bar. The column it sits in already spaces it from what is above. */
.directorist-single-listing-header {
	margin-block-start: 0;
	margin-block-end: 16px;
}

/* Directorist stacks the actions row above the title, which spends a whole
   line on a row that holds one button for the owner and nothing at all for
   everyone else. Pairing them on one line gives that line back.

   A grid rather than a flex row, so the details underneath still span the full
   width: the title takes column one, the button column two, and everything
   below spans both. In RTL column one is the right, which puts the button at
   the end of the title's line. An empty row costs nothing, because the second
   column is sized to its content. */
.directorist-single-wrapper .directorist-single-listing-header {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	/* Directorist's gap was written for a flex column, where it only ever
	   separated rows. As a grid it would space the columns too, narrowing the
	   title by 8px for everyone including readers who see no button. */
	column-gap: 0;
}

.directorist-single-listing-header > .directorist-listing-details__listing-title {
	grid-column: 1;
	grid-row: 1;
}

.directorist-single-listing-header > .directorist-single-listing-top {
	grid-column: 2;
	grid-row: 1;
	margin-block-end: 0;
}

.directorist-single-listing-header > .directorist-listing-details {
	grid-column: 1 / -1;
}

/* The owner's edit button, dressed like the rest of the board. Directorist
   ships it black-on-grey with 8px corners, which reads as a control borrowed
   from another site next to the cream page and its round pills.

   Quiet on purpose: it is the only thing in this row, and it belongs to the
   page's owner rather than to the neighbour reading the recommendation, so it
   should not compete with the call and WhatsApp buttons below it.

   Three classes to clear Directorist's own .directorist-btn.directorist-btn-light,
   and !important on the border to answer .directorist-single-listing-action,
   which declares "border: 2px solid white !important" against a single class --
   no amount of specificity beats that, only a matching !important does. */
.directorist-single-listing-top .directorist-btn.directorist-single-listing-top__btn-edit {
	width: auto;
	gap: 6px;
	/* The gap to the title sits on the button rather than on the grid, so a
	   reader who sees no button loses no width from the title's column. */
	margin-inline-start: 12px;
	/* A pixel more above than below, as on the navigation's pills: Hebrew's
	   missing descenders leave a centred line box looking high. */
	padding: 9px 16px 7px;
	border: 1px solid var(--sw-green-soft) !important;
	border-radius: 999px;
	font-weight: 600;
	font-size: 14px;
	line-height: 1;
	text-decoration: none;
	background-color: var(--sw-white);
	color: var(--sw-green-deep);
	transition: background-color .15s ease, border-color .15s ease;
}

/* Directorist's hover is white background, black border, both !important. */
.directorist-single-listing-top .directorist-btn.directorist-single-listing-top__btn-edit:hover,
.directorist-single-listing-top .directorist-btn.directorist-single-listing-top__btn-edit:focus {
	border-color: var(--sw-green-mid) !important;
	background-color: var(--sw-green-pale) !important;
	color: var(--sw-green-deep);
}

/* The pen is a CSS mask, coloured by a Directorist variable rather than by
   the text around it, so it stays grey unless it is told to follow. */
.directorist-single-listing-top .directorist-single-listing-top__btn-edit .directorist-icon-mask {
	background-color: transparent !important;
	margin: 0;
}

.directorist-single-listing-top .directorist-single-listing-top__btn-edit .directorist-icon-mask::after {
	width: 14px;
	height: 14px;
	background-color: currentColor !important;
}

/* Directorist drops the label below 576px and leaves the pen on its own, which
   the pill's side padding stretches into an oval. Square it off into the same
   circle the navigation bar's account button becomes at this width. */
@media (max-width: 575px) {
	.directorist-single-listing-top .directorist-btn.directorist-single-listing-top__btn-edit {
		width: 38px;
		height: 38px;
		padding: 0;
		gap: 0;
		justify-content: center;
	}
}

.directorist-listing-details__listing-title {
	font-family: 'Rubik', system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(20px, 4.5vw, 26px);
	line-height: 1.25;
	color: var(--sw-green-deep);
	margin-block: 0 8px;
}

/* Rating and profession sit on one muted line under the name. */
.directorist-listing-single-quickinfo {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
	margin-block-end: 4px;
}

.directorist-listing-single-quickinfo .directorist-listing-single__info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var(--sw-muted);
}

/* Each content group is one card, matching the recommendation cards. */
.directorist-single-wrapper .directorist-card {
	background: var(--sw-white);
	border-radius: var(--sw-radius);
	border: 1px solid rgba(76, 122, 58, 0.08);
	box-shadow: var(--sw-shadow-sm);
	padding: 16px;
	margin-block-end: 12px;
}

.directorist-single-wrapper .directorist-card__header__title,
.directorist-single-wrapper .directorist-card__header-text {
	font-family: 'Rubik', system-ui, sans-serif;
	font-weight: 700;
	font-size: 15px;
	color: var(--sw-green-deep);
	margin-block: 0 10px;
}

.directorist-single-wrapper .directorist-card__header {
	display: flex;
	align-items: center;
	gap: 8px;
}

.directorist-single-wrapper .directorist-listing-details__text {
	font-size: 15px;
	line-height: 1.6;
	color: #5A5F52;
}

/* ---------- Single page: call / WhatsApp ---------- */

/* The two buttons share a row once both fit, and stack when they do not. The
   :has() is what lets the contact group become a row without a section-specific
   selector; without it the buttons simply stack, which is the phone layout.

   flex-direction is set explicitly because Directorist already makes this
   wrapper a column flex container. Inheriting that turned the flex-basis below
   into a button height, giving two full-width blocks 180px tall.

   The ancestors are repeated to outweigh Directorist's own
   `.directorist-single-contents-area .directorist-single-wrapper
   .directorist-details-info-wrap`, which carries three classes to the two a
   bare `.directorist-details-info-wrap:has(...)` would have. Loading later is
   no help against higher specificity. */
.directorist-single-contents-area .directorist-single-wrapper .directorist-details-info-wrap:has(.work-in-shifts-single-action) {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
}

.work-in-shifts-single-action {
	flex: 1 1 180px;
}

/* Same !important reasoning as the card actions: Directorist ships
   `background: ... !important` on .directorist-btn itself. */
/* A stated height, because the pair would not agree on one otherwise. Both
   buttons carry the same icon, label and number -- measured identical at 84.5px
   of content -- yet the WhatsApp one resolved 12px taller than the call one
   under both `height: 100%` and `min-height`. Padding, gap, the three children
   and the 16px icon masks all measure the same, so the difference is not in the
   content, and chasing it further was not worth the time.

   86px clears the 84.5px the content needs. A longer label or a wrapped number
   would need this revisited -- the buttons go full width before they get narrow
   enough for that, so there is room, but it is a number to check if the wording
   changes. */
.work-in-shifts-single-action .directorist-btn,
.work-in-shifts-single-action .directorist-btn.directorist-btn-default {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: 100%;
	height: 86px;
	padding: 12px 10px;
	border: none;
	border-radius: 12px;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	background: var(--sw-green-deep) !important;
	color: var(--sw-white) !important;
}

.work-in-shifts-single-action--whatsapp .directorist-btn,
.work-in-shifts-single-action--whatsapp .directorist-btn.directorist-btn-default {
	background: var(--sw-whatsapp) !important;
}

.work-in-shifts-single-action .directorist-btn-text {
	color: var(--sw-white) !important;
}

/* The number under the action word: readable on a desktop, where tel: does
   little, without turning the button into a sentence. */
.work-in-shifts-action-number {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .02em;
	color: rgba(255, 255, 255, 0.85);
	direction: ltr;
}

.work-in-shifts-single-action .directorist-icon-mask {
	background-color: transparent !important;
	margin: 0;
}

.work-in-shifts-single-action .directorist-icon-mask::after {
	background-color: var(--sw-white) !important;
}

/* Dark ink on the WhatsApp green, as on the card. */
.work-in-shifts-single-action--whatsapp .directorist-btn-text,
.work-in-shifts-single-action--whatsapp .work-in-shifts-action-number {
	color: var(--sw-whatsapp-ink) !important;
}

.work-in-shifts-single-action--whatsapp .directorist-icon-mask::after {
	background-color: var(--sw-whatsapp-ink) !important;
}

/* ---------- Single page: who recommended ---------- */

.work-in-shifts-single-recommender {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--sw-green-deep);
}

.work-in-shifts-single-recommender__name {
	font-weight: 600;
}

.work-in-shifts-single-recommender__icon .directorist-icon-mask::after {
	background-color: var(--sw-green-mid) !important;
}

/* ---------- Single page: reviews ---------- */

.directorist-review-container {
	width: min(100%, var(--sw-column-width-wide));
	margin-inline: auto;
}

.directorist-review-single.directorist-noreviews {
	font-size: 14px;
	color: var(--sw-muted);
}

.directorist-review-criteria__single {
	margin-block-end: 10px;
}

/* ---------- Directorist: member dashboard ---------- */

/* Only registered members get here -- guests are sent to sign-in, deliberately,
   so a board anyone can post to still has one place that is not anonymous. */
.directorist-user-dashboard {
	width: min(100%, var(--sw-container));
	margin-inline: auto;
}

/* Directorist keeps this navigation off-canvas below 1199px and opens it with a
   hamburger, and stands it beside the content as a 230px column above that.
   Four things live in it and the header already carries three -- ההמלצות שלי
   and יציאה in the account menu, הוספת המלצה as a nav link -- so the panel is a
   button, a backdrop and an animation guarding one destination. It comes inline
   instead, as a chip row above what it switches, reading like the status filter
   further down the same page.

   Every property here undoes one of the plugin's. Three of its rules describe
   the panel -- the sidebar column, the fixed full-height sheet, and the
   collapsed state a phone loads in -- and the last two are written as
   two-class selectors, so this is named through its container to outrank them
   rather than repeating each of their classes. The width is the one property
   they set through !important.

   The card it used to be is gone with the panel: it now sits inside the
   contents card, where a second background and shadow would only draw a box
   around the chips. */
.directorist-user-dashboard .directorist-user-dashboard__nav {
	position: static;
	width: auto !important;
	min-width: 0;
	height: auto;
	overflow: visible;
	margin-left: 0;
	padding: 0;
	margin-block-end: 14px;
	transform: none;
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	background: none;
	border: 0;
	box-shadow: none;
}

/* Directorist sizes the tab content as calc(100% - 250px), the room the sidebar
   used to take. With the chips above it instead, that is 250px of nothing. */
.directorist-user-dashboard__tab-content {
	width: auto;
}

/* The hamburger, the X inside the panel, and the sheet it laid over the page.
   There is nothing left to open or close. */
.directorist-user-dashboard__toggle,
.directorist-user-dashboard__nav .directorist-dashboard__nav__close,
.directorist-shade,
.directorist-shade.directorist-active {
	display: none;
}

/* The two buttons at the foot of the panel, שליחת המלצה and יציאה. Both sit in
   the header on every page of the board, this one included. */
.directorist-tab__nav__action {
	display: none;
}

.directorist-tab__nav__items {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.directorist-tab__nav__link {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 9px 14px;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--sw-green-mid);
	text-decoration: none;
}

.directorist-tab__nav__link.directorist-tab__nav__active {
	background: var(--sw-green-deep);
	color: var(--sw-white);
}

.directorist-tab__nav__link.directorist-tab__nav__active .directorist-icon-mask::after {
	background-color: var(--sw-white) !important;
}

/* On a phone the two chips came to more than the row could hold, once
   Directorist's icons and the three nested paddings between them and the screen
   edge were counted, so the row wrapped and the inactive chip sat alone on a
   line of its own reading as a stray link.

   The icons go: the labels name their own tabs, and the glyphs are Directorist's
   generic list and person. What is left takes the status filter's metrics, the
   chips it sits directly above. Narrower than about 350px the row still wraps --
   the labels are as short as Hebrew makes them -- so the inactive chip is
   filled too, which is what keeps a wrapped row reading as a set of chips. */
@media (max-width: 575px) {
	.directorist-tab__nav__link {
		padding: 7px 12px;
		font-size: 13px;
	}

	.directorist-tab__nav__link .directorist_menuItem-icon {
		display: none;
	}

	.directorist-tab__nav__link:not(.directorist-tab__nav__active) {
		background: var(--sw-green-pale);
	}
}

/* The nav and the tab content are flex children here, which is what stood the
   nav up as a column beside the content. Stacked, the chips sit above it. */
.directorist-user-dashboard__contents {
	display: block;
	background: var(--sw-white);
	border-radius: var(--sw-radius);
	border: 1px solid rgba(76, 122, 58, 0.08);
	box-shadow: var(--sw-shadow-sm);
	padding: 16px;
}

/* Directorist stacks the status filter as a column of bare links, each padded
   for a sidebar it no longer sits in, so five options fill a phone screen and
   read as a menu rather than as a filter. Chips in a row, matching the sort
   chips on the board, say "pick one of these" in the shape itself. */
.directorist-user-dashboard-tab__nav .directorist-dashboard-listing-nav-js {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Directorist gives each item a full row of its own (flex: 0 0 100%), which is
   what made the list a column in the first place, and a 20px left margin meant
   for a stacked list. The margin is set through
   `.directorist-user-dashboard-tab li:not(:last-child)`, so the element has to
   be named here too for this to outrank it. */
.directorist-user-dashboard-tab__nav .directorist-dashboard-listing-nav-js li.directorist-tab-nav--content-link {
	flex: 0 0 auto;
	margin: 0;
}

.directorist-user-dashboard-tab__nav .directorist-dashboard-listing-nav-js a {
	display: block;
	padding: 7px 13px;
	border: none;
	border-radius: 999px;
	background: var(--sw-green-pale);
	font-size: 13px;
	font-weight: 600;
	color: var(--sw-green-mid);
	text-decoration: none;
}

.directorist-user-dashboard-tab__nav .directorist-dashboard-listing-nav-js a.directorist-tab__nav__active {
	background: var(--sw-green-deep);
	color: var(--sw-white);
}

/* Directorist marks the active item with a 2px rule drawn under the word by a
   pseudo-element. On a filled pill that reads as a stray line, and the fill is
   already saying which one is chosen. */
.directorist-user-dashboard-tab__nav .directorist-dashboard-listing-nav-js a::after {
	display: none;
}

/* The chips still need naming -- a row of words is only obviously a filter once
   something says so. The label is generated content rather than markup because
   Directorist's tab-my-listings.php offers no hook above the list, and copying
   that template into the theme to add one line would mean owning all ninety of
   its lines through every Directorist release. */
.directorist-user-dashboard-tab__nav::before {
	content: "סינון לפי סטטוס";
	display: block;
	margin-block-end: 8px;
	font-size: 12px;
	font-weight: 600;
	color: var(--sw-muted);
}

/* Nothing on this board expires, so the filter for it selects an empty list on
   every press. The class comes from the dashboard mu-plugin, which reads the
   directory's own expiry setting -- turn expiry back on and the chip returns. */
.work-in-shifts-no-expiry .directorist-tab-nav--content-link:has(> a[data-tab="expired"]) {
	display: none;
}

/* The search box beside those chips is sized for the row it shares with them
   above 767px: a twenty-character input with a 260px floor under it. Below
   that width Directorist stands the two in a column and the box keeps that
   width, so it hangs out of the card it sits in -- 35px past the border at
   320px, and 35px again from 376px up, where the floor returns after the
   plugin's own 375px exception drops it.

   A column leaves nothing beside the box to share the line with, so it takes
   the card's width instead of an intrinsic one, and lines up with the chips
   above it. The plugin's vertical margins are left alone: they are the gap
   between the two rows. */
@media (max-width: 767px) {
	.directorist-user-dashboard-tab .directorist-user-dashboard-search {
		align-self: stretch;
		margin-inline: 0;
	}

	.directorist-user-dashboard-tab .directorist-user-dashboard-search input {
		width: 100%;
		min-width: 0;
	}
}

/* The listing table is the one place a member sees everything they posted, and
   a table is the wrong shape for a phone. It scrolls rather than squeezing. */
.directorist-table-responsive {
	overflow-x: auto;
}

.directorist-listing-table .directorist-title,
.directorist-listing-table .directorist-title a {
	font-weight: 700;
	font-size: 15px;
	color: var(--sw-ink);
	text-decoration: none;
}

.directorist-listing-table-listing-info__img {
	display: none;
}

.directorist-table-status {
	font-size: 13px;
	color: var(--sw-muted);
}

/* Recommendations do not expire, so the column would read the same on every
   row -- and Directorist words that sameness as "Never Expires", in English.
   The heading carries a class; the cell does not, and its position shifts with
   the optional Type column, so it is matched by the span Directorist puts
   inside it. */
.directorist-table-ex-date,
.directorist-listing-table td:has(> .directorist-ex-plan) {
	display: none;
}

/* Below this width the three columns want 560px and get about 240, so the
   table becomes a sideways scroller in which no position shows both a
   recommendation and the buttons that act on it. Each row becomes a card
   instead: the name on its own line, then the status and the actions sharing
   the next one. */
@media (max-width: 767px) {
	.directorist-listing-table.directorist-table-responsive {
		overflow-x: visible;
	}

	/* Directorist floors the table at 250px so a short list still fills the
	   tab. Two recommendations come to under 100px, and the rest is blank. */
	.directorist-user-dashboard-tabcontent .directorist-listing-table {
		min-height: 0;
	}

	/* The cells are left out of this deliberately. A flex container blockifies
	   its children anyway, and naming them here would re-declare a display on
	   the expiry cell that the rule hiding it has no way to outrank. */
	.directorist-listing-table .directorist-table,
	.directorist-listing-table .directorist-dashboard-listings-tbody {
		display: block;
		width: auto;
	}

	.directorist-listing-table .directorist-table thead {
		display: none;
	}

	.directorist-listing-table .directorist-dashboard-listings-tbody tr {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 10px;
		padding: 12px 14px;
		margin-block-end: 10px;
		border: 1px solid rgba(76, 122, 58, 0.14);
		border-radius: 14px;
	}

	.directorist-listing-table .directorist-dashboard-listings-tbody td {
		padding: 0;
		border: none;
	}

	/* The name grows to fill the first line, which pushes the status to the far
	   end of it -- the two things a member scans for, on one line. */
	.directorist-listing-table td:has(.directorist-listing-table-listing-info) {
		flex: 1 1 auto;
	}

	.directorist-listing-table td:has(> .directorist_badge) {
		flex: 0 0 auto;
	}

	/* The buttons take a line of their own: the pair needs about 135px and the
	   badge about 75, which together overrun a card on a narrow phone. */
	.directorist-listing-table td:has(> .directorist-actions) {
		flex: 1 0 100%;
	}

	.directorist-listing-table .directorist-actions {
		justify-content: flex-end;
	}

	.directorist-listing-table .directorist-title {
		margin: 0;
	}
}

/* ---------- Sign-in ---------- */

.work-in-shifts-signin-notice {
	/* No width here: the notice is rendered inside Directorist's own grid
	   column, which sizes it to match the sign-in card at every viewport. */
	box-sizing: border-box;
	margin-block-end: 18px;
	padding: 16px 18px;
	background: var(--sw-green-pale);
	border: 1px solid var(--sw-green-soft);
	border-radius: var(--sw-radius);
	font-size: 14px;
	line-height: 1.6;
	color: #4A5142;
}

.work-in-shifts-signin-notice__title {
	font-family: 'Rubik', system-ui, sans-serif;
	font-weight: 700;
	font-size: 16px;
	color: var(--sw-green-deep);
	margin-block: 0 4px;
}

.work-in-shifts-signin-notice p:last-child {
	margin-block-end: 0;
}