/**
 * redesign.css - post presentation layer (2026)
 *
 * Loaded after style.css and responsive.css, so it wins ties by order.
 *
 * SCOPE CONTRACT - read before adding anything here:
 *
 *   IN scope:  how articles are presented. The post card on index / archive /
 *              category / search, the "Law Posts" page heading, single-post
 *              typography, and hiding the front-page slideshow below 1025px.
 *
 *   OUT of scope: #flag, #branding, #logo, .header-desc, nav, #copy. The
 *              desktop header, the menu bar and the footer must stay exactly as
 *              they are. Every selector below is scoped inside #content or
 *              .home-slideshow precisely so it cannot reach them.
 *
 * COLOUR CONTRACT: no new brand colours. Everything below is drawn from the
 * existing theme palette -
 *
 *   #b41423  accent red        (style.css, .widget ul li a:hover)
 *   #232a30  heading ink       (style.css, .entry-title)
 *   #666     body text         (style.css, .entry-content)
 *   #c5d1d9  borders           (style.css, .col2)
 *   #f3f3f3  page backdrop     (setup.php, BACKGROUND_COLOR)
 *   #fff     surfaces
 *
 * Two deliberate, single-line-revertible departures are marked DEPARTURE below.
 *
 * @package wplook
 * @subpackage BlogoLife
 */


/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	--wpl-red: #b41423;
	--wpl-ink: #232a30;
	--wpl-body: #666;
	--wpl-muted: #8c8c8c;
	--wpl-border: #c5d1d9;
	--wpl-backdrop: #f3f3f3;
	--wpl-surface: #fff;

	--wpl-serif: 'Playfair Display', "Palatino Linotype", Georgia, serif;
	--wpl-sans: 'Open Sans', Arial, Helvetica, sans-serif;

	--wpl-radius: 8px;
	--wpl-card-gap: 18px;
	--wpl-shadow: 0 1px 3px rgba(35, 42, 48, 0.08), 0 1px 2px rgba(35, 42, 48, 0.04);
	--wpl-shadow-hover: 0 4px 14px rgba(35, 42, 48, 0.12), 0 2px 4px rgba(35, 42, 48, 0.06);
}


/* ==========================================================================
   2. Content column
   --------------------------------------------------------------------------
   #main #content is (2,0,0) so it outranks .right-sidebar #content (1,1,0)
   from style.css without needing !important.

   box-sizing: border-box keeps the column the same outer width it has always
   had - the new padding eats into the existing 660px instead of adding to it,
   so the sidebar does not move.

   NOTE ON THE BACKDROP - deliberately left alone. The mockups show the cards
   on a light grey field, but style.css paints #main white and the sidebar has
   no background of its own. Tinting only #content would put a visible seam
   down the middle of the page: grey article column, white sidebar, with the
   existing border-right between them. So the cards are defined by their
   border and shadow instead, and #main stays white.

   To try the grey field later, uncomment the block below. It tints the whole
   of #main (both columns at once, so no seam) with #f3f3f3 - the colour the
   theme already uses for the page background, so it is not a new colour:

   #main {
       background-color: var(--wpl-backdrop);
   }
   #secondary .widget {
       background: var(--wpl-surface);
       border: 1px solid var(--wpl-border);
       border-radius: var(--wpl-radius);
   }
   ========================================================================== */

#main #content {
	box-sizing: border-box;
	padding: 10px 12px 0 12px;
}

/* The trailing clear divs in the old markup would otherwise add stray gaps. */
#main #content > .clear {
	display: none;
}


/* ==========================================================================
   3. "Law Posts" heading
   --------------------------------------------------------------------------
   style.css paints .page-header as a solid #5A82A6 ribbon with white text and
   a decorative png corner. The mockups show dark text on the light backdrop
   with a red bar on the left, so the ribbon is switched off here.

   IMPORTANT: the #5A82A6 rule is shared with .widget-title and .postformat.
   These selectors stay inside #content so sidebar widget titles keep their
   ribbon untouched.
   ========================================================================== */

#content .page-header {
	position: relative;
	margin: 0 0 18px 0;
	padding: 0 0 0 14px;
	background: none;
}

#content .page-header::before {
	content: "";
	position: absolute;
	top: 2px;
	bottom: 2px;
	left: 0;
	width: 4px;
	border-radius: 2px;
	background: var(--wpl-red);
}

/* The png corner belonged to the ribbon that no longer exists. */
#content .page-header .left-corner,
#content .page-header .right-corner {
	display: none;
}

#content .page-header h1,
#content .page-header h2,
#content .page-header .page-title {
	margin: 0;
	padding: 0;
	font-family: var(--wpl-serif);
	font-weight: 600;
	font-size: 1.6em;
	line-height: 1.25;
	color: var(--wpl-ink);
	text-transform: none;
}

#content .page-header a {
	color: var(--wpl-ink);
	text-decoration: none;
}

#content .page-header a:hover {
	color: var(--wpl-red);
	text-decoration: none;
}


/* ==========================================================================
   4. The card
   --------------------------------------------------------------------------
   #main #content .wpl-card is (2,1,0), comfortably above style.css's bare
   `article` (0,0,1) and responsive.css's `article` inside its media query.
   ========================================================================== */

#main #content .wpl-card {
	box-sizing: border-box;
	margin: 0 0 var(--wpl-card-gap) 0;
	padding: 22px 24px;
	background: var(--wpl-surface);
	border: 1px solid var(--wpl-border);
	border-radius: var(--wpl-radius);
	box-shadow: var(--wpl-shadow);
	overflow: hidden;
	transition: box-shadow 0.18s ease;
}

/* Pointer-only: a tap on a touch screen should not leave a card "lifted". */
@media (hover: hover) {
	#main #content .wpl-card:hover {
		box-shadow: var(--wpl-shadow-hover);
	}
}

/* Leftovers from the old float layout - the card is a plain block now. */
#main #content .wpl-card .col1,
#main #content .wpl-card .col2 {
	float: none;
	width: auto;
	border: 0;
	background: none;
}

#main #content .wpl-card > .clear,
#main #content .wpl-card .entry-content > .clear {
	display: none;
}


/* ==========================================================================
   5. Card header: categories, title, date
   ========================================================================== */

#content .wpl-card .entry-header {
	margin: 0 0 12px 0;
	background: none;
}

#content .wpl-card .entry-header .category {
	margin: 0 0 8px 0;
	padding: 0;
	background: none;
	font-family: var(--wpl-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--wpl-muted);
}

/*
 * DEPARTURE 1 of 2: category links were #FF7900 (orange). The mockups show
 * them in the brand red, which is already in the palette as #b41423.
 * To restore the orange, change the colour on the next rule back to #FF7900.
 *
 * Specificity note: style.css has #content .entry-header .category a (1,2,1).
 * Adding .wpl-card makes this (1,3,1), so it wins on merit, not on file order.
 */
#content .wpl-card .entry-header .category a {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wpl-red);
	text-decoration: none;
}

#content .wpl-card .entry-header .category a:hover {
	color: var(--wpl-ink);
	text-decoration: underline;
}

#content .wpl-card .entry-header .category .end {
	display: none;
}

#content .wpl-card .entry-title {
	margin: 0 0 6px 0;
	padding: 0;
	font-family: var(--wpl-serif);
	font-size: 1.5em;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wpl-ink);
	text-transform: none;
}

/*
 * style.css sets #content .entry-title a to font: bold 0.8em "Palatino
 * Linotype" - a shorthand, so it also resets family, style and line-height.
 * Because it is 0.8em the link renders smaller than the h2 around it. Inherit
 * instead, so the link is exactly the size of its heading.
 */
#content .wpl-card .entry-title a {
	font: inherit;
	color: var(--wpl-ink);
	text-decoration: none;
	text-transform: none;
	border: 0;
}

#content .wpl-card .entry-title a:hover {
	color: var(--wpl-red);
	text-decoration: none;
}

#content .wpl-card .date-i {
	margin: 0 0 14px 0;
	font-family: var(--wpl-sans);
	font-size: 13px;
	line-height: 1.4;
	color: var(--wpl-muted);
}


/* ==========================================================================
   6. Card thumbnail
   --------------------------------------------------------------------------
   Fixed 16:9 box with object-fit: cover, so cards line up even when the
   featured image has not been regenerated at the new wpl-card size and
   WordPress falls back to a differently proportioned file.
   ========================================================================== */

#content .wpl-card .card-thumb {
	display: block;
	margin: 0 0 16px 0;
	border-radius: 6px;
	overflow: hidden;
	background: var(--wpl-backdrop);
	line-height: 0;
}

#content .wpl-card .card-thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border: 0;
	margin: 0;
	padding: 0;
}

/*
 * Fallback for engines without aspect-ratio (Safari < 15, older Android):
 * a padded box with the image absolutely filling it. Harmless where
 * aspect-ratio is supported because the padding trick sits on the wrapper.
 */
@supports not (aspect-ratio: 16 / 9) {
	#content .wpl-card .card-thumb {
		position: relative;
		height: 0;
		padding-bottom: 56.25%;
	}

	#content .wpl-card .card-thumb img {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
	}
}


/* ==========================================================================
   7. Card excerpt and Read more
   ========================================================================== */

#content .wpl-card .entry-content,
#content .wpl-card .entry-summary {
	margin: 0;
	font-family: var(--wpl-sans);
	font-size: 15px;
	line-height: 1.7;
	color: var(--wpl-body);
}

#content .wpl-card .entry-summary p {
	margin: 0 0 10px 0;
}

#content .wpl-card .entry-summary p:last-child {
	margin-bottom: 0;
}

#content .wpl-card .card-more {
	margin: 14px 0 0 0;
	font-family: var(--wpl-sans);
	font-size: 14px;
	line-height: 1.4;
}

#content .wpl-card .card-more a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 24px;
	font-weight: 600;
	color: var(--wpl-ink);
	text-decoration: none;
}

#content .wpl-card .card-more a:hover {
	color: var(--wpl-red);
	text-decoration: none;
}

/* Nudge the arrow on hover - cheap affordance, no layout shift. */
#content .wpl-card .card-more-arrow {
	transition: transform 0.16s ease;
}

#content .wpl-card .card-more a:hover .card-more-arrow {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	#main #content .wpl-card,
	#content .wpl-card .card-more-arrow {
		transition: none;
	}

	#content .wpl-card .card-more a:hover .card-more-arrow {
		transform: none;
	}
}


/* ==========================================================================
   8. Single post
   --------------------------------------------------------------------------
   Same card shell, but full-width typography and a visible utility block.
   ========================================================================== */

#main #content .single .wpl-card,
#main #content.single-content .wpl-card {
	padding: 26px 28px;
}

#content .wpl-card .entry-header .entry-title {
	font-size: 1.9em;
}

#content .wpl-card .entry-content {
	font-size: 16px;
	line-height: 1.75;
}

#content .wpl-card .entry-content h2,
#content .wpl-card .entry-content h3,
#content .wpl-card .entry-content h4 {
	font-family: var(--wpl-serif);
	font-weight: 600;
	color: var(--wpl-ink);
	line-height: 1.3;
	margin: 1.6em 0 0.5em;
}

#content .wpl-card .entry-content h2 { font-size: 1.45em; }
#content .wpl-card .entry-content h3 { font-size: 1.22em; }
#content .wpl-card .entry-content h4 { font-size: 1.08em; }

#content .wpl-card .entry-content p {
	margin: 0 0 1.1em 0;
}

#content .wpl-card .entry-content a {
	color: var(--wpl-red);
	text-decoration: underline;
}

#content .wpl-card .entry-content a:hover {
	color: var(--wpl-ink);
}

#content .wpl-card .entry-content img {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
}

#content .wpl-card .entry-content blockquote {
	margin: 1.4em 0;
	padding: 2px 0 2px 18px;
	border-left: 3px solid var(--wpl-red);
	font-family: var(--wpl-serif);
	font-size: 1.05em;
	font-style: italic;
	color: var(--wpl-ink);
}

#content .wpl-card .entry-utility {
	margin: 20px 0 0 0;
	padding: 14px 0 0 0;
	border-top: 1px solid var(--wpl-border);
	font-family: var(--wpl-sans);
	font-size: 13px;
	color: var(--wpl-body);
}

#content .wpl-card .entry-utility a {
	color: var(--wpl-red);
	text-decoration: none;
}

#content .wpl-card .entry-utility a:hover {
	text-decoration: underline;
}

#content .wpl-card .entry-meta {
	margin: 14px 0 0 0;
	font-family: var(--wpl-sans);
	font-size: 13px;
}

/* style.css pushes .comment-i 540px to the right for the old float layout. */
#content .wpl-card .entry-meta .comment-i {
	margin: 0;
	font: 600 13px var(--wpl-sans);
}

#content .wpl-card .entry-meta a {
	color: var(--wpl-ink);
	text-decoration: none;
}

#content .wpl-card .entry-meta a:hover {
	color: var(--wpl-red);
	text-decoration: underline;
}


/* ==========================================================================
   9. Pagination below the loop
   ========================================================================== */

#content #nav-below,
#content .navigation {
	margin: 4px 0 0 0;
	font-family: var(--wpl-sans);
	font-size: 14px;
}

#content #nav-below a,
#content .navigation a {
	color: var(--wpl-ink);
	text-decoration: none;
}

#content #nav-below a:hover,
#content .navigation a:hover {
	color: var(--wpl-red);
}


/* ==========================================================================
   10. Front-page slideshow: desktop only
   --------------------------------------------------------------------------
   DEPARTURE 2 of 2 - requested explicitly: the NextGEN carousel is hidden on
   tablets and phones. It is a display:none on the wrapper rather than a
   server-side check, because wp_is_mobile() is decided before a caching plugin
   stores the page and would then serve the wrong variant to everybody.
   The trade-off is that the slide images are still downloaded.
   ========================================================================== */

@media (max-width: 1024px) {
	.home-slideshow {
		display: none;
	}
}


/* ==========================================================================
   11. Tablet and phone tuning for the cards
   ========================================================================== */

@media (max-width: 1024px) {
	#main #content {
		padding: 10px 10px 0 10px;
	}

	#main #content .wpl-card {
		padding: 18px 18px;
	}
}

@media (max-width: 768px) {
	#content .wpl-card .entry-title {
		font-size: 1.35em;
	}

	#content .wpl-card .entry-header .entry-title {
		font-size: 1.5em;
	}
}

@media (max-width: 480px) {
	#main #content {
		padding: 8px 6px 0 6px;
	}

	#main #content .wpl-card {
		padding: 16px 15px;
		border-radius: 6px;
	}

	#content .page-header h1,
	#content .page-header h2,
	#content .page-header .page-title {
		font-size: 1.35em;
	}

	#content .wpl-card .entry-title {
		font-size: 1.22em;
	}

	#content .wpl-card .entry-header .entry-title {
		font-size: 1.35em;
	}

	#content .wpl-card .entry-content,
	#content .wpl-card .entry-summary {
		font-size: 15px;
	}
}