/* ----------------------------------------------------------------
	Custom CSS — Umbracolombia (Solido)

	Everything this project adds on top of the purchased theme, so the
	theme's own stylesheets stay untouched and updatable. Loaded last.
-----------------------------------------------------------------*/


/* ----------------------------------------------------------------
	Language Switcher

	Desktop: floats right ahead of .menu in the markup, so it ends up
	furthest right — floated boxes stack from the right in source order.
	The theme gives .menu the header's 68px gutter; with the switcher
	outside it, the gutter moves to the switcher and .menu keeps a
	smaller gap of its own.
-----------------------------------------------------------------*/

.language-switcher {
	float: right;
	margin-right: 68px;
}

.menu {
	margin-right: 24px;
}

.language-switcher ul {
	list-style: none;
	margin: 0;
	padding: 0;
	height: 75px;
}

.language-switcher li {
	float: left;
	line-height: 75px;
	padding: 0 8px;
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 2px;
}

/* A short centred rule rather than a border on the li, which would run the full 75px of the
   header and read as a column divider instead of a separator between two words. */
.language-switcher li + li {
	position: relative;
}

.language-switcher li + li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	height: 16px;
	margin-top: -8px;
	border-left: 1px solid #ddd;
}

.language-switcher a {
	text-decoration: none;
	color: #414141;
}

.language-switcher a:hover,
.language-switcher a:focus-visible {
	color: #4cddf3;
}

/* aria-current already says which language this is for assistive technology. This says the
   same thing visually, and not with colour alone — the theme's accent is a pale cyan that
   several kinds of colour vision cannot separate from the default grey. */
.language-switcher [aria-current] {
	color: #4cddf3;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.language-switcher a:focus-visible {
	outline: 2px solid #4cddf3;
	outline-offset: 2px;
}

/* Below the theme's menu breakpoint .menu is hidden and #nav2 takes over, with its 50px
   jump-menu button floated to the right edge of the header. Taking the switcher out of the
   float flow entirely — the header is position:absolute, so it is the containing block —
   keeps it clear of that button instead of competing with it for the same corner. */
@media only screen and (max-width: 974px) {
	.language-switcher {
		position: absolute;
		top: 0;
		right: 60px;
		float: none;
		margin: 0;
		z-index: 80;
	}
}

/* ── Language switcher ─────────────────────────────────────────────────────
   Same reasoning as Canvas: two loose links beside a menu read as two more
   menu items. A bordered track with the active segment filled says "these are
   alternatives" and "you are here" without needing a caption. Solido's header
   is 75px of fixed chrome, so this stays compact and keeps the codes.        */

.language-switcher {
	display: flex;
	align-items: center;
	margin-left: 22px;
}

.language-switcher ul {
	display: flex;
	margin: 0;
	padding: 2px;
	list-style: none;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 999px;
	background: rgba(255, 255, 255, .9);
}

.language-switcher li { margin: 0; float: none; }

.language-switcher a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 30px;
	padding: 0 11px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #6f7780;
	text-decoration: none;
	line-height: 1;
	transition: color .18s ease, background-color .18s ease;
}

.language-switcher a:hover { color: #1f2933; background: rgba(0, 0, 0, .05); }

/* Filled, not merely tinted — colour alone is not a state everyone can see,
   and aria-current is what carries it to assistive technology. */
.language-switcher li.current a {
	color: #fff;
	background: #7fba00;          /* the theme's green, from color/green.css */
	cursor: default;
}

.language-switcher a:focus-visible {
	outline: 2px solid #7fba00;
	outline-offset: 2px;
}

/* The theme sizes everything inside its header off `nav.menu ul li a { height:
   75px; line-height: 75px }` so the whole bar is one clickable strip. Inherited
   here it made the track 81px tall, and a 999px radius on a box that tall is an
   oval rather than a pill. These reset the inheritance rather than fighting it
   with !important further down. */
.language-switcher,
.language-switcher ul,
.language-switcher li,
.language-switcher a {
	height: auto;
	line-height: 1;
}

.language-switcher ul { align-self: center; }

.language-switcher a {
	height: 30px;
	line-height: 30px;
	padding-top: 0;
	padding-bottom: 0;
}

/* The theme underlines every header link on hover and keeps the underline on the
   active one. Inside a filled pill that reads as a mistake rather than emphasis —
   the fill already says which language is active. */
.language-switcher a,
.language-switcher a:hover,
.language-switcher li.current a {
	text-decoration: none;
	border-bottom: 0;
}

/* The switcher is a float in a 75px header, so its box is only as tall as the pill
   inside it — which meant align-items:center had nothing to centre against and the
   pill sat 14px above the menu it lines up with. Matching the header's height is what
   the rest of this theme already does for header chrome (.logo line-height, .menu ul
   height), so the value is the theme's convention rather than a new magic number.

   The right gutter matches .logo's 68px left margin. It was 8px, which put the pill
   almost against the viewport edge while the logo breathed on the other side. */
.language-switcher {
	height: 75px;
	margin-top: 0;
	margin-bottom: 0;
	margin-right: 68px;
}

/* Distance from the last menu item. The menu floats right after the switcher, so its
   own right margin is the gap between the two rather than a gap to the edge. */
.menu {
	margin-right: 32px;
}

/* The theme built every section title as <header> and the hero tagline as <div>, so the page
   carried no heading elements at all. They are now h1 and h2, which a browser gives its own
   margin and font-size — the classes below already set the size, so only the margin needs
   putting back to what the original elements had. */
h1.second-title,
h2.title,
h3.title-one {
	margin: 0;
}

/* .contour-btn is width:100% because the theme only ever uses it as the submit button of a
   form that fills its column. As a standalone link it stretched into a full-width green band
   that did not read as a button at all. */
.error-cta .contour-btn {
	width: auto;
	padding: 10px 34px;
	text-decoration: none;
}

/* Blog. The purchased theme has no listing or article layout — it was sold as a one-page site —
   so these are the only styles the blog needs, and they stay in the theme's measurements
   (centred column, .title one at 37px) rather than introducing a second scale. */
.blog-list { max-width: 760px; margin: 0 auto; text-align: left; }
.blog-entry { padding: 0 20px 44px; }
.blog-entry + .blog-entry { border-top: 1px solid #e6e6e6; padding-top: 40px; }
.blog-entry h2 { font-weight: 300; font-size: 24px; margin: 0 0 8px; }
.blog-entry h2 a { color: #404141; text-decoration: none; }
.blog-entry h2 a:hover { color: #77be32; }
.blog-meta { color: #9a9a9a; font-size: 13px; margin: 0 0 12px; }
.blog-summary { color: #6f6f6f; line-height: 1.7; margin: 0 0 12px; }
.blog-more { color: #77be32; text-decoration: none; }

.blog-body,
.blog-image,
.blog-tags,
.blog-back { max-width: 760px; margin-left: auto; margin-right: auto; text-align: left; padding: 0 20px; }
.blog-body { line-height: 1.75; color: #4a4a4a; }
.blog-body img { max-width: 100%; height: auto; }
.blog-body pre { overflow-x: auto; }
.blog-image img { max-width: 100%; height: auto; }
.blog-tags { color: #9a9a9a; font-size: 13px; }
.blog-back a { color: #77be32; text-decoration: none; }

/* --- blog detail: the article is one column, and the theme's section title is not a headline ---
   .title.one is built for a short centred section label: 37px with 5px of tracking and 120px of
   padding above it. An article headline is a sentence, so at that tracking it overflows the
   viewport, and .blog-meta was the one element left outside the column — which is why the day
   of the month was being clipped off the left edge rather than sitting "far away". */
h1.title.one.blog-title {
	max-width: 760px;
	margin: 0 auto;
	padding: 70px 20px 20px;
	font-size: 30px;
	line-height: 1.25;
	letter-spacing: 1px;
	text-align: left;
	text-transform: none;
}

.blog-body .blog-meta,
article.content > .blog-meta {
	max-width: 760px;
	margin: 0 auto 24px;
	padding: 0 20px;
	text-align: left;
}

/* Links in an article take the site's green, like every other link here. The browser default
   was arriving instead, so a post read as a page from a different site. */
.blog-body a {
	color: #77be32;
	text-decoration: none;
	border-bottom: 1px solid rgba(119, 190, 50, .45);
}
.blog-body a:hover {
	border-bottom-color: #77be32;
}

/* Headings inside an article body. The theme sets every h2 to 2.4em, uppercase and 0.20em of
   tracking, which is right for a one-page site whose h2s are three-word section labels and
   wrong for a sentence written by an author. */
.blog-body h2 {
	font-size: 21px;
	line-height: 1.3;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
	color: #404141;
	margin: 38px 0 14px;
}
.blog-body h3 {
	font-size: 17px;
	line-height: 1.35;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 600;
	margin: 28px 0 10px;
}
.blog-body p { margin: 0 0 16px; }
.blog-body pre {
	background: #f2f3f5;
	border: 1px solid #e3e5e8;
	border-radius: 4px;
	padding: 14px 16px;
	font-size: 13px;
	line-height: 1.55;
}
.blog-body code { font-size: 0.9em; }

/* ---------------------------------------------------------------------------
   Blog listing: sidebar, filters and the list/grid switch.

   Solido's article body is dark text on a light ground — the theme's `.content
   .dark` class names the type colour, not the background. The controls therefore
   use the same palette the rest of this file already establishes for the blog:
   #404141 for headings, #6f6f6f for body, #9a9a9a for meta, #77be32 for the
   accent, #e6e6e6 for rules.

   The layout constraint matters as much as the colour. This theme centres each
   piece of content individually (see .blog-list above, max-width 760px) rather
   than wrapping the page in a container, so a two-column grid has to establish
   its own measure or it spills across the full viewport and the sidebar ends up
   outside the page.
   --------------------------------------------------------------------------- */

.blog-layout {
	max-width: 1060px;
	margin: 0 auto;
	padding: 0 20px;
	text-align: left;
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}

@media (min-width: 900px) {
	.blog-layout { grid-template-columns: minmax(0, 1fr) 210px; align-items: start; }
	/* Placed explicitly rather than by source order. The sidebar comes first in the
	   markup — a filter should be reachable before the results it filters — and it
	   belongs on the right, where Canvas puts it too. Left to flow, it would take
	   the wide column and squeeze the articles into 210px. */
	.blog-main { grid-column: 1; grid-row: 1; min-width: 0; }
	.blog-sidebar { grid-column: 2; grid-row: 1; position: sticky; top: 24px; }
}

/* Inside the grid the column is already the measure, so the list must not
   re-centre itself at 760px on top of it. */
.blog-layout .blog-list { max-width: none; margin: 0; }
.blog-layout .blog-entry { padding-left: 0; padding-right: 0; }

.blog-sidebar { font-size: 14px; }
.blog-sidebar .blog-search { margin-bottom: 28px; }
.blog-sidebar .blog-search label {
	display: block;
	margin-bottom: 8px;
	color: #9a9a9a;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: .1em;
}
.blog-sidebar .blog-search input {
	width: 100%;
	height: 38px;
	padding: 0 12px;
	background: #fff;
	border: 1px solid #e3e5e8;
	border-radius: 3px;
	color: #404141;
	font-size: 14px;
}
.blog-sidebar .blog-search input::placeholder { color: #9a9a9a; }
.blog-sidebar .blog-search input:focus {
	outline: none;
	border-color: #77be32;
	box-shadow: 0 0 0 3px rgba(119, 190, 50, .18);
}
.blog-sidebar .blog-search button {
	margin-top: 10px;
	padding: 7px 16px;
	background: transparent;
	border: 1px solid #77be32;
	border-radius: 3px;
	color: #77be32;
	font-size: 13px;
	cursor: pointer;
}
.blog-sidebar .blog-search button:hover { background: #77be32; color: #fff; }

.blog-facets { margin-bottom: 28px; }
.blog-facets h2 {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: #9a9a9a;
	margin: 0 0 10px;
	font-weight: 400;
}
.blog-facets ul { list-style: none; margin: 0; padding: 0; }
.blog-facets li { margin: 0 0 1px; }
.blog-facets a {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	padding: 5px 8px;
	border-radius: 3px;
	color: #6f6f6f;
	text-decoration: none;
}
.blog-facets a:hover { background: #f2f3f5; color: #404141; }
/* aria-current carries the state, so the highlight cannot disagree with what a
   screen reader is told. */
.blog-facets a[aria-current="true"] { background: #77be32; color: #fff; }
.blog-facets a[aria-current="true"] .blog-count { color: rgba(255, 255, 255, .8); }
.blog-count { font-size: 12px; color: #9a9a9a; font-variant-numeric: tabular-nums; }

/* Tags read as a cloud rather than a list: there are many, they are short, and
   their relative weight does not matter the way a category's does. */
.blog-sidebar .blog-tags {
	max-width: none;
	margin: 0 0 28px;
	padding: 0;
	color: inherit;
	font-size: inherit;
}
.blog-sidebar .blog-tags ul { display: flex; flex-wrap: wrap; gap: 6px; }
.blog-sidebar .blog-tags li { margin: 0; }
.blog-sidebar .blog-tags a {
	display: inline-block;
	padding: 3px 10px;
	border: 1px solid #e3e5e8;
	border-radius: 999px;
	font-size: 12.5px;
	background: #fff;
}

.blog-clear { font-size: 13px; color: #9a9a9a; text-decoration: underline; }
.blog-clear:hover { color: #77be32; }

.blog-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 10px;
	margin-bottom: 28px;
	border-bottom: 1px solid #e6e6e6;
}
.blog-status { margin: 0; font-size: 13px; color: #9a9a9a; font-variant-numeric: tabular-nums; }

.blog-views { display: flex; gap: 4px; }
.blog-views button {
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #e3e5e8;
	border-radius: 3px;
	background: #fff;
	color: #9a9a9a;
	line-height: 1;
	padding: 0;
	cursor: pointer;
}
.blog-views button:hover { color: #404141; border-color: #9a9a9a; }
.blog-views button[aria-pressed="true"] { background: #77be32; border-color: #77be32; color: #fff; }

.blog-entry .blog-thumb { display: block; margin-bottom: 14px; }
.blog-entry .blog-thumb img { width: 100%; height: auto; border-radius: 3px; display: block; }

/* In list view the picture is a thumbnail beside the text, not a banner above it.
   Left to fill the column it made each entry a screenful and the listing eight
   screens long — the reader has to scroll past the article to find the next
   title, which is the opposite of what a listing is for. */
@media (min-width: 620px) {
	[data-blog-list][data-view="list"] .blog-entry {
		display: flex;
		gap: 24px;
		align-items: flex-start;
	}
	[data-blog-list][data-view="list"] .blog-thumb { flex: 0 0 220px; margin-bottom: 0; }
	[data-blog-list][data-view="list"] .blog-body { flex: 1 1 auto; min-width: 0; }
}
.blog-cats {
	margin: 0 0 6px;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: #77be32;
}

/* The grid is the same cards in columns. Nothing is re-fetched and nothing is
   re-rendered — only the layout changes. */
[data-blog-list][data-view="grid"] {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px 28px;
	/* Cards are different heights because summaries are; without this they
	   stretch and the rules under them stop lining up with anything. */
	align-items: start;
}
[data-blog-list][data-view="grid"] .blog-entry { margin: 0; padding: 0; border: 0; }
[data-blog-list][data-view="grid"] .blog-entry + .blog-entry { border-top: 0; padding-top: 0; }
[data-blog-list][data-view="grid"] .blog-entry h2 { font-size: 19px; }

@media (max-width: 700px) {
	[data-blog-list][data-view="grid"] { grid-template-columns: 1fr; }
}

.blog-more-wrap { margin-top: 32px; }
.blog-empty { text-align: left; }

/* While a request is in flight the old results stay put and dim, rather than the
   page emptying and reflowing under the reader. */
.blog[data-busy] [data-blog-list] { opacity: .55; transition: opacity .12s ease-out; }