/**
 * MDW Blog - front office styles.
 *
 * Built on top of the default-bootstrap theme: layout comes from its grid,
 * buttons and pagination from its own classes. Only what the theme has no
 * equivalent for is defined here.
 *
 * @author    MozArtsduWeb
 * @copyright MozArtsduWeb
 */

/* Category shortcuts
   ------------------------------------------------------------------------- */

.mdwblog-categories {
	list-style: none;
	margin: 0 0 25px;
	padding: 0;
}

.mdwblog-categories li {
	display: inline-block;
	margin: 0 8px 8px 0;
}

/* Exact colours of a.button.pdfdimension (global.css:12012), the shop's own
   secondary button. Its 2px 5px padding is not reused: that makes a 20px tall
   target, well under the 44px a finger needs. */
.mdwblog-categories a {
	display: inline-block;
	padding: 10px 16px;
	border: solid 1px #888888;
	background: #cccccc;
	color: #444444;
	font-size: 14px;
	line-height: 18px;
	font-weight: bold;
	text-decoration: none;
	transition: background-color .15s ease;
}

.mdwblog-categories a:hover,
.mdwblog-categories a:focus {
	background: #bbbbbb;
	color: #222222;
}

.mdwblog-count {
	display: inline-block;
	margin-left: 4px;
	font-size: 13px;
	font-weight: normal;
	opacity: .75;
}

/* Article grid
   ------------------------------------------------------------------------- */

/* Cards of one row share a height, so a short article does not leave a step
   next to a long one. Flexbox only from the tablet breakpoint: below it the
   grid is a single column and there is nothing to equalise. */
@media (min-width: 768px) {
	.mdwblog-grid {
		display: flex;
		flex-wrap: wrap;
	}

	.mdwblog-grid > div[class*="col-"] {
		display: flex;
	}

	.mdwblog-grid > div[class*="col-"] > .mdwblog-card {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.mdwblog-card-body {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
	}

	/* Pushes the read more link to the bottom of every card. */
	.mdwblog-more {
		margin-top: auto;
	}
}

/* Placeholder for an article with no picture. Padding-top rather than
   aspect-ratio: the property is unsupported by the browsers a PrestaShop 1.6
   shop still serves. 380/570 = 66.67% reproduces the thumbnail ratio exactly. */
.mdwblog-card-noimage {
	padding-top: 66.67%;
	background: #f2f2f2;
	background-image: linear-gradient(135deg, #f6f6f6 25%, #f0f0f0 25%, #f0f0f0 50%, #f6f6f6 50%, #f6f6f6 75%, #f0f0f0 75%);
	background-size: 16px 16px;
}

/* Shadow and 5px radius are the card convention of this theme, repeated
   throughout product_list.css. The flat 2px border used before appears
   nowhere in it: border-radius 2px has zero occurrence, 5px has 26. */
.mdwblog-card {
	margin-bottom: 30px;
	background: #fff;
	box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.09);
	border-radius: 5px;
	overflow: hidden;
	transition: box-shadow .2s ease;
}

.mdwblog-card:hover {
	box-shadow: 2px 6px 10px rgba(0, 0, 0, 0.14);
}

.mdwblog-card-media {
	display: block;
	overflow: hidden;
	background: #fafafa;
	border-bottom: 1px solid #eaeaea;
}

/* display, max-width and height come from .img-responsive, applied in the
   template. Only the full width fill is specific to the card. */
.mdwblog-img {
	width: 100%;
}

/* No zoom on hover: the theme never moves its own thumbnails, and on a
   memorial site a picture shifting under the cursor reads as an accident
   rather than as feedback. The shadow lift below plays the same role. */

.mdwblog-card-body {
	padding: 18px;
}

/* No font-family here: the theme already puts Open Sans on every h1..h6
   (global.css:7278), after its own Arial reset.
   Only the weight needed fixing. The reset asks for 500, a weight this shop
   never loads (Open Sans is fetched in 400 and 700 only), so the browser fell
   back to 400 and the title read like plain text next to its summary. */
.mdwblog-card-title {
	margin: 10px 0 8px;
	font-weight: bold;
	font-size: 18px;
	line-height: 1.35;
}

/* #555454 is the colour of every page title on this shop (.page-heading),
   so an article title reads as a title of the site, not as a foreign block. */
.mdwblog-card-title a {
	color: #555454;
}

.mdwblog-card-title a:hover,
.mdwblog-card-title a:focus {
	color: #333333;
	text-decoration: underline;
}

/* 14px against the title's 18px. At 15px the gap was too small to read as a
   hierarchy: two sizes that close look like one. */
.mdwblog-card-summary {
	margin: 0 0 14px;
	color: #666666;
	font-size: 14px;
	line-height: 1.65;
}

/* Uppercase removes word shapes and costs reading speed, a penalty that grows
   with age. #6f6f6f reaches 5.02:1 where #777 stopped at 4.48:1. */
.mdwblog-tag {
	display: inline-block;
	color: #6f6f6f;
	font-size: 14px;
	text-decoration: none;
}

.mdwblog-tag:hover,
.mdwblog-tag:focus {
	color: #333333;
	text-decoration: underline;
}

/* #595959 gives 7.0:1 on white, where the previous #999 gave 2.85:1 and
   failed WCAG AA. 13px: the date supports the title, it does not compete with
   it, and the strong contrast keeps it readable at that size. */
.mdwblog-date {
	display: block;
	color: #595959;
	font-size: 13px;
}

/* Category and date on one line above the title, same arrangement as the
   article header. Sitting between title and summary, the date used to break
   the reading in two. */
.mdwblog-card-meta {
	margin-bottom: 8px;
	font-size: 13px;
	line-height: 18px;
}

/* display:inline stated on the element itself, so nothing in the theme can win
   this on a specificity tie. */
.mdwblog-card-meta time.mdwblog-date,
.mdwblog-card-meta a.mdwblog-tag {
	display: inline;
}

.mdwblog-card-meta-sep {
	margin: 0 6px;
	color: #949494;
}

/* A bare text link is a 16px tall target. 44px is the minimum comfortable
   size for an imprecise pointer or a trembling hand. */
.mdwblog-more {
	display: inline-block;
	min-height: 44px;
	padding: 12px 0;
	font-size: 15px;
}

/* Nothing said this text was a link. The chevron does, and it uses the theme
   icon font already loaded on every page.
   margin-right is reset: the theme sets 5px on .link-button i, meant for an
   icon placed before the text, which glued this one to the label. */
a.mdwblog-more i,
.mdwblog-card-body .mdwblog-more i {
	margin-left: 10px;
	margin-right: 0;
	font-size: 12px;
	transition: margin-left .15s ease;
}

a.mdwblog-more:hover i,
a.mdwblog-more:focus i {
	margin-left: 15px;
}

/* Article page
   ------------------------------------------------------------------------- */

.mdwblog-post {
	max-width: 820px;
	margin: 0 auto;
}

.mdwblog-post-header {
	margin-bottom: 22px;
}

/* .page-heading carries its own bottom border. The meta line closes the header
   here, so the title gives its rule up: two stacked horizontal lines read as a
   mistake. */
.mdwblog-post-header .page-heading {
	margin-bottom: 10px;
	padding-bottom: 0;
	border-bottom: none;
}

/* One compact meta line under the title instead of three stacked blocks:
   category, separator and date on a single row, so the title stands alone. */
.mdwblog-post-meta {
	margin: 0 0 26px;
	padding-bottom: 14px;
	border-bottom: 1px solid #d4d4d4;
	color: #595959;
	font-size: 13px;
}

.mdwblog-post-meta .mdwblog-date {
	display: inline;
	margin: 0;
}

.mdwblog-post-meta .mdwblog-tag {
	font-size: 13px;
}

.mdwblog-post-meta-sep {
	margin: 0 8px;
	color: #949494;
}

.mdwblog-post-media {
	margin-bottom: 26px;
}

/* padding, margin and left border come from the theme blockquote. */
.mdwblog-summary {
	margin-bottom: 22px;
}

.mdwblog-summary p {
	color: #555555;
	font-size: 17px;
	font-weight: normal;
	line-height: 1.7;
}

/* 16px against the 13px of the rest of the site: an article is read
   continuously where a product grid is scanned, and the browser default is
   the least surprising value to step up to. */
.mdwblog-content {
	font-size: 16px;
	line-height: 1.7;
	/* The theme sets #777 on body, which measures 4.48:1 on white and misses
	   the 4.5:1 required by WCAG AA. #6f6f6f is the nearest darker grey that
	   passes, at 5.02:1, so the intent of the design is preserved. */
	color: #6f6f6f;
}

.mdwblog-content img {
	max-width: 100%;
	height: auto;
}

/* Left alone, h2 and h3 inherit 27px and 23px from the theme, a ratio of 1.7
   against a 16px body. The theme itself never goes beyond 18px for a content
   subheading. Family comes from the theme, only size, weight and colour are
   set here. */
.mdwblog-content h2,
.mdwblog-content h3 {
	margin: 28px 0 12px;
	color: #555454;
	font-weight: bold;
	line-height: 1.3;
}

.mdwblog-content h2 {
	font-size: 20px;
}

.mdwblog-content h3 {
	font-size: 18px;
}

.mdwblog-intro {
	margin-bottom: 25px;
	color: #666666;
}

.mdwblog-back {
	margin: 30px 0 0;
}

/* Pagination
   ------------------------------------------------------------------------- */

/* The skin comes from .bottom-pagination-content in the theme. Only the
   current page marker is added: colour alone cannot carry the information,
   it disappears in forced contrast modes and for colour blind users. */
.mdwblog-pagination {
	margin-top: 10px;
}

.mdwblog-pagination ul.pagination > .active > span {
	font-weight: 700;
	text-decoration: underline;
}

/* Small screens
   ------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.mdwblog-card-body {
		padding: 14px;
	}

	.mdwblog-summary p {
		font-size: 16px;
	}
}

/* Users who asked the system to limit motion get no transition at all. */
@media (prefers-reduced-motion: reduce) {
	.mdwblog-card {
		transition: none;
	}
}

/* Focus
   -------------------------------------------------------------------------
   The theme draws a thin dotted outline with a negative offset, which lands
   over the image and disappears on a busy photo. A solid ring drawn outside
   is visible on any background. */

.mdwblog-categories a:focus,
.mdwblog-card-body a:focus,
.mdwblog-pagination a:focus,
.mdwblog-back a:focus {
	outline: 2px solid #333333;
	outline-offset: 2px;
}