/* Hot Fashion News: our layer over the 2022 CSS (assets/css/main.css stays as it was).
 * Every rule says what it fixes. Colours come from the 2022 palette: navy #202f5b, blue #1151d3. */

/* date-plain: in 2022 the card date linked to a monthly listing that is gone; now it is text, keep the link colour */
.mg-blog-meta .mg-blog-date time { color: inherit; }
.mg-blog-post .bottom .mg-blog-meta, .mg-blog-post .bottom .mg-blog-meta time,
.mg-blog-post-3.back-img .mg-blog-meta time { color: #fff; }

/* breadcrumbs: visible trail for visitors and search engines (not in the 2022 layout) */
.hfn-breadcrumbs { font-size: 13px; line-height: 1.5; color: #6c757d; margin: 0 0 12px; }
.hfn-breadcrumbs a { color: #1151d3; }
.hfn-breadcrumbs .sep { margin: 0 4px; color: #adb5bd; }
.mg-blog-post-box > .hfn-breadcrumbs { padding: 15px 20px 0; margin: 0; background: #fff; }

/* cover: our illustration sits where the 2022 posts showed the source photo */
article.small.single img.hfn-cover { display: block; width: 100%; height: auto; margin: 0 auto 20px; }
.hfn-sources { font-size: 13px; color: #6c757d; border-top: 1px solid #eee; padding-top: 10px; margin-top: 20px; }

/* share-buttons: icons are buttons now (no href), keep the pointer */
.post-share-icons a.link { cursor: pointer; }

/* live-search: suggestions under the search field */
.mg-search-box .searchinner { min-width: 300px; }
.hfn-live { margin-top: 8px; background: #fff; max-height: 360px; overflow-y: auto; }
.hfn-live ul { list-style: none; margin: 0; padding: 0; }
.hfn-live li { border-top: 1px solid #eee; }
.hfn-live li:first-child { border-top: 0; }
.hfn-live a { display: block; padding: 8px 6px; color: #212121; text-decoration: none; line-height: 1.35; }
.hfn-live a:hover, .hfn-live a:focus { background: #f2f5fc; color: #1151d3; }
.hfn-live-title { display: block; font-weight: 600; font-size: 14px; }
.hfn-live-meta { display: block; font-size: 12px; color: #6c757d; margin-top: 2px; }
.hfn-live-empty { margin: 6px; font-size: 13px; color: #6c757d; }
.hfn-search-page { margin-top: 12px; }
.hfn-static-q { font-size: 20px; margin-bottom: 12px; }
.hfn-static-list li { margin-bottom: 10px; }

/* footer-note: copyright and independence note replace the engine credit of 2022 */
.mg-footer-copyright p { margin: 0; }

/* overlay-contrast: the 2022 gradient (0 to 0.7 black) was made for dark photos; over our light
   illustrations white titles lost contrast, so the shade under the text is deeper, in the navy of the palette */
.mg-blog-post .bottom,
.mg-blog-post-3.back-img .mg-blog-inner,
.featuredcat .mg-blog-post-3 .mg-blog-inner {
  background: linear-gradient(rgba(15, 26, 51, 0) 0, rgba(15, 26, 51, .72) 38%, rgba(15, 26, 51, .94) 100%);
}

/* title-clamp: 2022 cards cut titles in the middle of a line (fixed max-height smaller than two lines);
   now whole lines with an ellipsis */
.mg-blog-post.lg .bottom h4.title,
.featuredcat h4.title,
.missed-inner h4.title,
.mg-featured-slider h4.title,
.title_small_post h5,
.small-post-content h5.title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  max-height: none;
  height: auto;
}
.title_small_post { max-height: none; height: auto; }
.mg-blog-post.lg .bottom h4.title { -webkit-line-clamp: 3; }

/* footer-note: the 2022 line-height (45px) was for one short credit line; two lines of the note need less */
.mg-footer-copyright p { line-height: 1.7; padding: 12px 0; }

/* sidebar-slider-crop: the TV & Movies card is tall and narrow; centre the picture on its subject */
.mg-sidebar .postcrousel .mg-blog-post.lg { background-position: 70% 35%; }

/* phone-title: long story titles took a whole phone screen at the 2022 size */
@media (max-width: 575px) {
  .mg-header h1.title.single { font-size: 28px; line-height: 1.22; }
  .mg-breadcrumb-title h1 { font-size: 26px; }
}

/* logo-link: the whole name block is the link to the front page (in 2022 only the text inside the heading was) */
a.site-branding-text { display: block; text-decoration: none; }
a.site-branding-text .site-title, a.site-branding-text .site-title span { color: #fff; }
a.site-branding-text:hover .site-title span, a.site-branding-text:focus .site-title span { color: #fff; opacity: .9; }

/* header-tall: the 2022 header took 21% of a laptop screen; the photo band and top line are a little lower */
.mg-headwidget .mg-head-detail { padding-top: 6px; }
.mg-nav-widget-area-back .inner { padding-top: 12px; padding-bottom: 12px; }

/* contrast-low: breadcrumbs sit on the grey page background on rubric pages */
.hfn-breadcrumbs { color: #555a62; }

/* tap-small: rubric labels on picture tiles are easier to hit on the phone */
@media (max-width: 575px) {
  .mg-blog-category .newsup-categories { display: inline-block; padding: 7px 10px; line-height: 1.2; }
}

/* tap-small: rubric labels reach 32 px on the phone; the picture link of a carousel card is a block,
   not an inline line under the image */
@media (max-width: 575px) {
  .mg-blog-category .newsup-categories { padding: 10px 12px; }
}
.mg-blog-post-3 .mg-blog-img a { display: block; }

/* h1-one: the site name is h1 only on the front page; elsewhere p.site-title.h1 with the same look.
   The 2022 sizes were set on ".site-title a"; the link now wraps the block, so they move to the text */
.site-branding-text .site-title { margin-bottom: 0; }
@media only screen and (max-width: 640px) { .site-branding-text .site-title span { font-size: 40px; } }
@media only screen and (max-width: 375px) { .site-branding-text .site-title span { font-size: 32px; } }