/**
 * Global child theme styles — loaded site-wide.
 *
 * @package experthive-child
 */

/*
 * Mobile gutter correction.
 *
 * The wrapper chain stacks fixed padding that never reduces on small
 * screens: .container (2rem) + .hp-page (2rem) + grid column (1rem) =
 * 80px per side, so a 390px phone loses 160px — roughly 41% of the
 * viewport — before any card renders. This affects every HivePress
 * archive and single view, not just chef profiles.
 *
 * .hp-page's gutter is redundant with .container's, so it is dropped
 * and the remaining two are tightened.
 *
 * NOTE: .hp-row carries negative margins (-1rem) that must stay equal
 * and opposite to the column padding. Changing the column padding
 * without matching the row margin pushes content past the container
 * edge and causes horizontal scroll — both are adjusted together below.
 */
/*
 * Specificity note: `.container` is set by flexboxgrid.min.css, which the
 * theme enqueues AFTER this file, and `.hp-page` is set by an inline
 * <style> block in the head (padding: 32px shorthand). Neither can be
 * beaten on load order from an enqueued stylesheet, so both selectors are
 * prefixed with `body` to raise specificity to (0,1,1) and win outright.
 */
@media (max-width: 767px) {

	body .container {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	body .hp-page {
		padding-left: 0;
		padding-right: 0;
	}

	body .hp-row {
		margin-left: -0.5rem;
		margin-right: -0.5rem;
	}

	body [class*="hp-col-"] {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}
}

/*
 * Listing card (.hp-listing--view-block) footer/price legibility.
 *
 * The parent theme (see experthive/style.css ~L1433-1775) lays the card
 * out as header | content | footer in a single flex row on desktop, with
 * .hp-listing__content at flex:1 and no min-width — so once .hp-listing__
 * footer's price/tier-meta/unit/action-icon content is wide (long add-on
 * lists, multi-word tier descriptions), the content column gets squeezed
 * to a sliver and wraps character-by-character. On desktop the footer is
 * also flex-direction: column-reverse (icons stacked above price, both
 * right-aligned) rather than a single row, and its decorative
 * ::before accent pill is positioned (right: -1.75rem) for that stacked,
 * right-aligned context specifically — it cannot coexist with a
 * horizontal price+icons row, so it is dropped rather than repositioned.
 *
 * Specificity note: functions.php enqueues experthive/style.css TWICE on
 * purpose — once as 'experthive-style' (early, standard child-theme
 * boilerplate) and again as HiveTheme's own 'hivetheme-parent-frontend'
 * (late, because WordPress always loads this child theme's functions.php
 * before the parent's, and that's where HiveTheme's Asset component
 * registers it). The late copy carries HiveTheme's Customizer-driven
 * inline CSS (live theme colors/fonts — see class-customizer.php's
 * add_theme_styles()), which depends on printing last to reliably beat
 * other defaults; re-pointing this file's own dependency chain to load
 * after that handle instead (removing the "duplicate") was tried and
 * reverted because it broke that inline CSS's ability to win, turning
 * the site's teal accent color into HivePress's default amber. So the
 * duplicate stays, and every selector below is prefixed with `body`
 * (same trick as the mobile gutter fix above) to win on specificity
 * instead of load order.
 */

body .hp-listing--view-block .hp-listing__attributes--primary::before {
	content: none;
}

/* Footer as a single row — price left, icons right — at every width,
   rather than relying on the parent's desktop column-reverse / unmanaged
   mobile row, either of which lets a long tier-meta string collide with
   or wrap through the price and icons. */
body .hp-listing--view-block .hp-listing__footer {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding-top: 1rem;
	margin-top: 0.25rem;
	border-top: 1px solid rgba(7, 36, 86, 0.075);
}

body .hp-listing--view-block .hp-listing__attributes--primary {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	row-gap: 0.125rem;
	column-gap: 0.375rem;
}

/* Price + unit stay on one line; tier-meta is forced to its own line via
   flex-basis: 100% and truncated with an ellipsis instead of wrapping or
   growing the card — card height stays predictable regardless of how
   long a listing's tier description is. */
body .hp-listing--view-block .hp-listing__attribute--price {
	order: 1;
	flex: 0 0 auto;
	white-space: nowrap;
	font-weight: 700;
	font-size: 1.05em;
}

body .hp-listing--view-block .hp-listing__attribute--tier-price-unit {
	order: 2;
	flex: 0 0 auto;
	white-space: nowrap;
	opacity: 0.85;
}

body .hp-listing--view-block .hp-listing__attribute--tier-meta {
	order: 3;
	flex: 1 1 100%;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 0.85em;
	opacity: 0.65;
}

body .hp-listing--view-block .hp-listing__actions--primary {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

/* Desktop: give the content column its own grid row instead of the
   parent's flex:1-with-no-min-width sizing (the actual cause of the
   squeeze), and move the footer below it as a second row rather than a
   third flex column competing for the same horizontal space. */
@media only screen and (min-width: 48em) {

	body .hp-listing--view-block {
		display: grid;
		/*
		 * minmax(0, 1fr) rather than a bare 1fr: `1fr` resolves to
		 * minmax(auto, 1fr), whose auto minimum is min-content, so the
		 * track refuses to shrink below the widest unbreakable run of
		 * content and pushes everything past the card's right edge. The
		 * explicit 0 minimum lets the track shrink and the content wrap.
		 */
		grid-template-columns: 6.25rem minmax(0, 1fr);
		grid-template-rows: auto auto;
		column-gap: 1.5rem;
		row-gap: 1rem;
		align-items: start;
	}

	body .hp-listing--view-block > .hp-listing__header {
		grid-column: 1;
		grid-row: 1 / span 2;
		margin-right: 0;
	}

	body .hp-listing--view-block > .hp-listing__content {
		grid-column: 2;
		grid-row: 1;
		width: auto;
		min-width: 0;
		margin-right: 0;
	}

	body .hp-listing--view-block > .hp-listing__footer {
		grid-column: 2;
		grid-row: 2;
		width: auto;
		min-width: 0;
		margin-right: 0;
	}
}

/*
 * Listing card inside a multi-column grid (the Gutenberg
 * `hivepress/listings` block with columns 2/3/4, and anything else that
 * emits a grid item narrower than full width).
 *
 * HivePress sizes each grid item from the block's `columns` setting:
 * `hp-col-sm-12` for a single column, `hp-col-sm-6`/`-4`/`-3` otherwise.
 * A listing archive is always sm-12, which is why the archive renders
 * correctly and the landing-page block does not — at sm-4 the card is
 * roughly 360px wide, so the two-column layout above spends 100px on the
 * image plus a 1.5rem gap and leaves under 240px for a title, a
 * vendor/category/rating row, guest counts, an add-on list and a price
 * footer. Even with the minmax(0, 1fr) fix the result is legible but
 * cramped, and the footer's price/tier-meta/action-icon row is the first
 * thing to break down.
 *
 * So a narrow card opts out of the row layout entirely and stacks:
 * image, content, footer. This is the same reasoning as the sidebar
 * exception below, generalised — the sidebar was simply the first narrow
 * container to hit it.
 *
 * Scoped to `:not(.hp-col-sm-12)` rather than replacing the rule above,
 * so every context that renders full-width cards today (archives, vendor
 * profile pages, single-listing related blocks) is untouched.
 *
 * Gated at 48em because below that every grid item is `hp-col-xs-12`
 * and the card is full width again.
 */
@media only screen and (min-width: 48em) {

	body .hp-grid__item:not(.hp-col-sm-12) > .hp-listing--view-block {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		height: 100%;
		/* Symmetric, so the full-bleed footer divider below lines up on
		   both sides. The parent theme's padding is 2rem 1.75rem 2rem 2rem. */
		padding: 1.75rem;
		overflow-wrap: break-word;
	}

	body .hp-grid__item:not(.hp-col-sm-12) > .hp-listing--view-block > * {
		grid-column: auto;
		grid-row: auto;
		flex: 0 0 auto;
		width: auto;
		max-width: 100%;
		min-width: 0;
		margin-right: 0;
	}

	body .hp-grid__item:not(.hp-col-sm-12) .hp-listing__header {
		margin-bottom: 1.25rem;
	}

	body .hp-grid__item:not(.hp-col-sm-12) .hp-listing__image {
		width: 4rem;
	}

	/* The vendor/category/rating row separates its children with inline
	   `•` pseudo-elements that wrap onto their own lines at this width. */
	body .hp-grid__item:not(.hp-col-sm-12) .hp-listing__details--primary {
		flex-direction: column;
		align-items: flex-start;
		row-gap: 0.25rem;
		margin-right: 0;
		margin-left: 0;
	}

	body .hp-grid__item:not(.hp-col-sm-12) .hp-listing__details--primary > * {
		max-width: 100%;
		margin-right: 0;
		margin-left: 0;
	}

	body .hp-grid__item:not(.hp-col-sm-12) .hp-listing__details--primary > *:not(:last-child)::after {
		content: none;
	}

	/* Add-on lists are written for a full-width row; at a third of that
	   they need to be secondary to the title and price, not compete. */
	body .hp-grid__item:not(.hp-col-sm-12) .hp-listing__attribute--addons {
		font-size: 0.8125rem;
		line-height: 1.55;
	}

	/*
	 * margin-top: auto pins the footer to the bottom of the card, so the
	 * price rows of three cards in a row line up even when their add-on
	 * lists are different lengths. The width/margin pair bleeds the
	 * divider to the card edges and must stay equal and opposite to the
	 * 1.75rem padding set above.
	 */
	body .hp-grid__item:not(.hp-col-sm-12) > .hp-listing--view-block > .hp-listing__footer {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		column-gap: 0.75rem;
		width: calc(100% + 3.5rem);
		max-width: none;
		margin: 1.5rem -1.75rem 0;
		padding: 1.25rem 1.75rem 0;
	}

	body .hp-grid__item:not(.hp-col-sm-12) .hp-listing__attributes--primary {
		flex: 1 1 auto;
		min-width: 0;
	}

	body .hp-grid__item:not(.hp-col-sm-12) .hp-listing__actions--primary {
		flex: 0 0 auto;
		margin-left: auto;
	}

	/* Secondary to the price rather than a second line of the same size.
	   The global rule truncates this with an ellipsis to keep full-width
	   card heights predictable; a grid card is already equal-height via
	   the flex column above, so here it can wrap and stay readable. */
	body .hp-grid__item:not(.hp-col-sm-12) .hp-listing__attribute--tier-meta {
		margin: 0.125rem 0 0;
		overflow: visible;
		font-size: 0.8125rem;
		font-weight: 400;
		line-height: 1.4;
		text-overflow: clip;
		white-space: normal;
		opacity: 0.7;
	}
}

/*
 * Listing card inside a page sidebar (booking flow, /make-booking/details/).
 *
 * HivePress renders the booked listing as a listing_view_block inside the
 * page's <aside class="hp-page__sidebar ... site-sidebar"> — a ~337px
 * column, not the wide content well the desktop grid above was written
 * for. Two things broke there:
 *
 * 1. The grid override above still applied, so the card kept a
 *    `6.25rem 1fr` two-column track even though the parent theme hides
 *    .hp-listing__header in a sidebar (experthive/style.css ~L1492). The
 *    empty 100px track plus a 1.5rem gap left ~223px for content whose
 *    min-content width (the add-on lines) was wider — 1fr can't shrink
 *    below min-content, so the whole content column, and the footer with
 *    it, rendered ~70px past the card's right edge.
 *
 * 2. The parent theme's sidebar footer rule bleeds the divider to the card
 *    edges with `margin: 2rem -2rem -0.75rem`, but the card's padding is
 *    asymmetric (2rem 1.75rem 2rem 2rem), so the right side overshot by
 *    4px on top of that.
 *
 * So: opt the sidebar card out of the grid entirely and lay it out as a
 * single column, normalize the padding to 2rem so the full-bleed footer
 * lines up on both sides, and stack the vendor/category/rating details
 * (their inline `•` separators wrap onto their own lines at this width).
 *
 * `:is()` keeps specificity at one class, so every selector here is
 * prefixed with `body` for the same load-order reason documented above.
 */

body :is(.hp-page__sidebar, .site-sidebar) .hp-listing--view-block {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: 2rem;
	overflow-wrap: break-word;
}

body :is(.hp-page__sidebar, .site-sidebar) .hp-listing--view-block > * {
	grid-column: auto;
	grid-row: auto;
	flex: 0 0 auto;
	width: auto;
	max-width: 100%;
	min-width: 0;
	margin-right: 0;
}

body :is(.hp-page__sidebar, .site-sidebar) .hp-listing--view-block .hp-listing__details--primary {
	flex-direction: column;
	align-items: flex-start;
	row-gap: 0.25rem;
	margin-left: 0;
	margin-right: 0;
}

body :is(.hp-page__sidebar, .site-sidebar) .hp-listing--view-block .hp-listing__details--primary > * {
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

body :is(.hp-page__sidebar, .site-sidebar) .hp-listing--view-block .hp-listing__details--primary > *:not(:last-child)::after {
	content: none;
}

/* Full-bleed divider: width + negative margins match the 2rem padding
   exactly, so the rule spans the card edge to edge without overhang. */
body :is(.hp-page__sidebar, .site-sidebar) .hp-listing--view-block > .hp-listing__footer {
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	column-gap: 0.75rem;
	width: calc(100% + 4rem);
	max-width: none;
	margin: 1.75rem -2rem 0;
	padding: 1.25rem 2rem 0;
}

body :is(.hp-page__sidebar, .site-sidebar) .hp-listing--view-block .hp-listing__attributes--primary {
	flex: 1 1 auto;
	min-width: 0;
}

body :is(.hp-page__sidebar, .site-sidebar) .hp-listing--view-block .hp-listing__actions--primary {
	flex: 0 0 auto;
	margin-left: auto;
}

body :is(.hp-page__sidebar, .site-sidebar) .hp-listing--view-block .hp-listing__attribute--price {
	margin-right: 0.375rem;
	font-weight: 700;
}

body :is(.hp-page__sidebar, .site-sidebar) .hp-listing--view-block .hp-listing__attribute--tier-price-unit {
	margin-right: 0;
}

/* Secondary to the price rather than a second line of the same size. */
body :is(.hp-page__sidebar, .site-sidebar) .hp-listing--view-block .hp-listing__attribute--tier-meta {
	margin: 0.125rem 0 0;
	font-size: 0.8125rem;
	font-weight: 400;
	line-height: 1.4;
	opacity: 0.7;
}

/* ---------------------------------------------------------------------------
   Branded icon set
   Rendered by inc/brand-icons.php as a CSS mask filled with currentColor, so
   the same SVG can sit on cream, on the dark card, or inside a teal circle.
   The mask itself and its size are inline on the element so the icon also
   renders in the block editor's server-side preview, which does not load this
   stylesheet; everything below is colour and layout only.
   --------------------------------------------------------------------------- */

.ec-icon {
	/* Matches .hp-feature's own spacing so branded and Font Awesome features
	   can sit side by side in the same row without drifting.

	   The width override needs the `body` prefix: the parent theme's
	   `.hp-feature { width: 5.5rem }` is printed by the LATE copy of
	   experthive/style.css (see the note in functions.php), so it wins on
	   load order at equal specificity. 5.875rem matches the 94px core/image
	   icons placed by hand elsewhere, and sizes the wrapper the numbered
	   caption badge is positioned against — the badge is absolute to
	   .hp-feature, so a glyph wider than its wrapper pushes the badge on
	   top of the artwork. */
	color: #0F1727;
	text-align: center;
}

body .ec-icon {
	width: 5.875rem;
}

.ec-icon:not(:last-child) {
	margin-bottom: 1rem;
}

.ec-icon__glyph {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
}

.ec-icon__glyph:not(:last-child) {
	margin-bottom: 1rem;
}

.ec-icon--teal {
	color: #00876F;
}

/* For the dark #14312B interrupt card. */
.ec-icon--light {
	color: #fff;
}

/* Restores the filled circle HivePress gives Font Awesome feature icons,
   for rows that mix branded and Font Awesome glyphs. */
.ec-icon--circle .ec-icon__glyph {
	width: 5.5rem;
	height: 5.5rem;
	border-radius: 50%;
	background-color: #00876F;
	color: #fff;
}

.ec-icon--circle .ec-icon__glyph > span {
	width: 3.25rem !important;
	height: 3.25rem !important;
}

/* ---------------------------------------------------------------------------
   Send Message modal — recipient details
   Added by inc/message-modal.php, which injects the recipient card above the
   message field so the sender can see who they're actually writing to.
   --------------------------------------------------------------------------- */

.ec-msg-recipient {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	margin-bottom: 20px;
	border: 1px solid #dce3e5;
	border-radius: 12px;
	background: #f7fafa;
}

.ec-msg-recipient__image {
	width: 52px;
	height: 52px;
	flex: 0 0 52px;
	border-radius: 50%;
	object-fit: cover;
}

.ec-msg-recipient__details {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ec-msg-recipient__label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #667277;
}

.ec-msg-recipient__name {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: #182326;
}

.ec-msg-recipient__meta {
	font-size: 13px;
	line-height: 1.45;
	color: #667277;
}

.ec-msg-recipient__meta--signals {
	margin-top: 2px;
}

.ec-msg-recipient__meta--signals .fa-star {
	color: #f0a202;
	font-size: 12px;
}

.ec-msg-subject {
	margin: -8px 0 20px;
	font-size: 13px;
	color: #667277;
}

.ec-msg-subject strong {
	color: #182326;
}

@media (max-width: 480px) {
	.ec-msg-recipient {
		padding: 12px;
		gap: 12px;
	}

	.ec-msg-recipient__image {
		width: 44px;
		height: 44px;
		flex-basis: 44px;
	}

	.ec-msg-recipient__name {
		font-size: 16px;
	}
}

/* --- Booking deposit / balance panel (chefcations-booking) --------------
   Rendered by the extension's booking-balance.php part inside HivePress's
   sidebar attribute list. Prefixed with `body` for the same cascade reason
   the rest of this file is — see functions.php on the parent stylesheet
   being enqueued twice. */
body .cc-balance {
	display: block;
	width: 100%;
	margin-top: .5rem;
	padding-top: .75rem;
	border-top: 1px solid rgba(0, 0, 0, .08);
}

body .cc-balance__rows {
	margin: 0 0 .5rem;
	padding: 0;
	list-style: none;
}

body .cc-balance__rows li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 .25rem;
	font-size: .875rem;
}

body .cc-balance__rows .cc-balance__due {
	padding-top: .35rem;
	border-top: 1px dashed rgba(0, 0, 0, .12);
	font-size: 1rem;
}

body .cc-balance__rows .cc-balance__due strong {
	color: #00876F;
}

body .cc-balance__note {
	margin: 0;
	font-size: .8125rem;
	line-height: 1.4;
	opacity: .7;
}

/* ── Listing gallery tab ────────────────────────────────────────────────
   Images were moved out of the Details body into their own Gallery panel
   (ec_move_images_to_gallery). The first image spans both columns so the
   panel opens on a hero rather than a uniform grid of thumbnails.
   Prefixed with `body` for the specificity reason documented in CLAUDE.md. */
body .ec-listing-gallery {
	margin-top: 2.5rem;
}

body .ec-gallery-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

body .ec-gallery-item {
	margin: 0;
	overflow: hidden;
	border-radius: 8px;
	background: #f2f2f2;
}

body .ec-gallery-item--lead {
	grid-column: 1 / -1;
}

body .ec-gallery-item img,
body .ec-gallery-item video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
}

body .ec-gallery-item--lead img,
body .ec-gallery-item--lead video {
	aspect-ratio: 16 / 9;
}

@media (max-width: 600px) {
	body .ec-gallery-grid {
		grid-template-columns: 1fr;
	}
}

/* ── Booking card summary ───────────────────────────────────────────────
   Event date / guest count / extras, added by ec_alter_booking_view_block
   so a chef can triage a request without opening it. */
body .ec-booking-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 20px;
	margin: 6px 0 10px;
}

body .ec-booking-when,
body .ec-booking-guests {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
}

body .ec-booking-when .ec-booking-date {
	font-weight: 700;
	font-size: 15px;
}

body .ec-booking-summary .hp-icon {
	opacity: 0.55;
	font-size: 13px;
}

body .ec-booking-extras {
	flex: 1 1 100%;
	margin-top: 2px;
}

body .ec-booking-extras-label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.6;
	margin-bottom: 3px;
}

body .ec-booking-extras-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

body .ec-booking-extras-list li {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	padding: 3px 9px;
	border-radius: 999px;
	background: rgba(0, 135, 111, 0.08);
	font-size: 13px;
	line-height: 1.4;
}

body .ec-booking-extra-price {
	font-weight: 600;
	opacity: 0.75;
}

/* ── Booking request summary (/make-booking/details) ────────────────────
   Itemised quote + deposit split, rendered by chefcations-booking's
   booking/make/booking-summary.php. Lives here rather than in the plugin
   because this site is its only consumer and child.css is already the
   single global sheet. */
body .cc-quote {
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 10px;
	padding: 20px 22px;
	margin-bottom: 24px;
	background: #fff;
}

body .cc-quote__title {
	margin: 0 0 14px;
	font-size: 17px;
}

body .cc-quote__lines {
	list-style: none;
	margin: 0;
	padding: 0;
}

body .cc-quote__line {
	display: flex;
	justify-content: space-between;
	gap: 18px;
	padding: 7px 0;
	font-size: 14px;
	line-height: 1.45;
}

body .cc-quote__line--extra .cc-quote__label {
	padding-left: 14px;
	opacity: 0.8;
}

body .cc-quote__line--subtotal {
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	margin-top: 4px;
	font-weight: 600;
}

body .cc-quote__line--total {
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	margin-top: 4px;
	padding-top: 10px;
	font-size: 16px;
	font-weight: 700;
}

body .cc-quote__value {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

body .cc-quote__deposit {
	margin-top: 16px;
	padding: 14px 16px;
	border-radius: 8px;
	background: rgba(0, 135, 111, 0.07);
}

body .cc-quote__deposit-row {
	display: flex;
	justify-content: space-between;
	gap: 18px;
	font-size: 15px;
	font-weight: 700;
}

body .cc-quote__deposit-row--balance {
	margin-top: 6px;
	font-size: 13px;
	font-weight: 500;
	opacity: 0.75;
}

body .cc-quote__note {
	margin: 12px 0 0;
	font-size: 13px;
	line-height: 1.5;
	opacity: 0.75;
}