/* ==========================================================================
   Tiles site layout  (Theme Settings > Layout > Site Layout > Tiles)

   Loaded only when that layout is chosen, after main.css and the plugins'
   stylesheets; everything here is scoped to body.site-layout-tiles, so the
   Boxed and Full Width layouts never see a rule of it.

   The idea: no outlines. Every part of the page - the header, an ad, the
   article, each widget, the footer - is a tile of its own, and tiles are told
   apart by colour alone. Every colour is the primary colour mixed into the
   content background in a small, different amount, so the whole page carries
   a faint wash of the brand, follows the colours set in the theme settings,
   and follows dark mode without a second palette.

   color-mix() into --content-bg rather than hsl(from var(--primary-color) ...):
   a lightness picked from the primary colour ignores the content background a
   site has set, and would need its own set of numbers for dark mode. Mixed into
   the background, the same percentages are right in both modes.

   The HTML is the same as in the other layouts. The space between tiles is
   Element Gap in the Layout settings (--layout-gap, written by custom-css.php);
   left at "Layout default" it is 16px, and on phones never more than 10px.

   Corners follow the theme's own radius tokens (custom-css.php), so the Layout
   settings decide them here as everywhere else: a tile is a container and
   takes --card-radius ("Use Rounded Elements" - round, or square when off),
   and a panel inside a tile takes the same, a step smaller. Pictures inside
   keep --image-radius, which "Rounded Images" rounds on its own.
   ========================================================================== */

body.site-layout-tiles {
    --tiles-gap: var(--layout-gap, 16px);
    --tiles-radius: var(--card-radius, 0px);
    /* For panels inside a tile: a step smaller so they nest, never below zero. */
    --tiles-radius-inner: max(0px, calc(var(--tiles-radius) - 4px));
    --tiles-pad: 32px;
    --tiles-pad-sm: 20px;

    /* How much of the primary colour each surface carries. */
    --tiles-mix-page: 9%;
    --tiles-shade-page: 5%;
    --tiles-mix-card: 2%;
    --tiles-mix-soft: 5%;
    --tiles-mix-inset: 8%;
    --tiles-mix-line: 16%;

    /* Colors > Tiles Layout fills --tiles-custom-*; empty there, the mix applies. */
    --tiles-page-bg: var(--tiles-custom-page, color-mix(in oklab, var(--primary-color) var(--tiles-mix-page), color-mix(in oklab, var(--content-bg), #000 var(--tiles-shade-page))));
    --tiles-card-bg: var(--tiles-custom-card, color-mix(in oklab, var(--primary-color) var(--tiles-mix-card), var(--content-bg)));
    --tiles-soft-bg: var(--tiles-custom-soft, color-mix(in oklab, var(--primary-color) var(--tiles-mix-soft), var(--content-bg)));
    --tiles-inset-bg: var(--tiles-custom-inset, color-mix(in oklab, var(--primary-color) var(--tiles-mix-inset), var(--content-bg)));
    --tiles-line: color-mix(in oklab, var(--primary-color) var(--tiles-mix-line), var(--content-bg));

    /* Where a sticky sidebar stops: below the floating header - the gap above
       it, the header, the gap below. The App layout, whose header is a side
       panel, sets it to the gap alone. Plugins read it for their own sidebars. */
    --tiles-sticky-top: calc(var(--header-height, 70px) + 2 * var(--tiles-gap));

    /* The width every tile row shares, so the header, the ads, the content and
       the footer line up edge to edge. */
    --tiles-row: min(var(--total-width), calc(100% - 2 * var(--tiles-gap)));
}

/* Dark: the page goes well below the tiles, and the tiles carry a little more
   colour, or they would all read as the same near-black. */
body.site-layout-tiles.dark-mode {
    --tiles-mix-page: 6%;
    --tiles-shade-page: 45%;
    --tiles-mix-card: 3%;
    --tiles-mix-soft: 7%;
    --tiles-mix-inset: 12%;
    --tiles-mix-line: 22%;
}

/* The page behind the tiles. Doubled with .dark-mode to outrank the inline
   CSS that re-declares --outer-bg on body.dark-mode - the same as Full Width. */
body.site-layout-tiles,
body.site-layout-tiles.dark-mode {
    --outer-bg: var(--tiles-page-bg);
    background-color: var(--tiles-page-bg);
}

/* ---------------------------------------------------------------- header */

/* The mix is written here rather than taken from a token: a header forced to
   light or dark re-declares --content-bg and --primary-color on itself, and the
   formula then follows the header's own colours. Custom header colours set on
   #masthead still win - they are an explicit choice. */
body.site-layout-tiles .site-header {
    width: var(--tiles-row);
    margin: var(--tiles-gap) auto 0;
    background-color: var(--tiles-custom-soft, color-mix(in oklab, var(--primary-color) var(--tiles-mix-soft), var(--content-bg)));
    border-bottom: 0;
    box-shadow: none;
    border-radius: var(--tiles-radius);
}

/* A sticky header floats one gap below the top of the window. */
body.site-layout-tiles.sticky-header .site-header {
    top: var(--tiles-gap);
}

body.site-layout-tiles.sticky-header.header-hide-on-scroll .site-header.scroll-down {
    transform: translateY(calc(-100% - var(--tiles-gap) - 8px));
}

/* The bottom row of the compact header is a band inside the tile. */
body.site-layout-tiles .header-compact-bottom-outer {
    background-color: color-mix(in oklab, var(--primary-color) var(--tiles-mix-inset), var(--content-bg));
    border-radius: 0 0 var(--tiles-radius) var(--tiles-radius);
}

/* Below the floating header: the gap above it, the header, the gap below. No
   more - a sticky offset larger than where the sidebar already sits pushes it
   down on load, out of line with the tile beside it. */
body.site-layout-tiles.sticky-header #secondary,
body.site-layout-tiles.sticky-header .widget-area,
body.site-layout-tiles.sticky-header .mrwin-service-sidebar {
    top: var(--tiles-sticky-top, calc(var(--header-height, 70px) + 2 * var(--tiles-gap)));
}

/* ---------------------------------------------------------------- ads */

/* Above and below the header and above the footer: a tile of their own. An
   unfilled AdSense slot hides its whole wrapper (ads.css), tile included. */
body.site-layout-tiles .boxedtheme-ad--full-width {
    width: var(--tiles-row);
    margin: var(--tiles-gap) auto 0;
    padding: 12px;
    background-color: var(--tiles-soft-bg);
    border-radius: var(--tiles-radius);
}

/* Below the featured image: inside the article, so an inset panel. */
body.site-layout-tiles .boxedtheme-ad--content-width {
    padding: 12px;
    background-color: var(--tiles-inset-bg);
    border-radius: var(--tiles-radius-inner);
}

/* ---------------------------------------------------------------- content */

body.site-layout-tiles .site-content {
    width: var(--tiles-row);
    margin: var(--tiles-gap) auto 0;
}

/* The white card of the boxed layout goes; what was inside it becomes tiles. */
body.site-layout-tiles .content-wrapper {
    max-width: none;
    padding: 0;
    background-color: transparent;
    box-shadow: none;
    border-radius: 0;
}

/* A tool a plugin puts above the article (boxed_content_wrapper_top - the
   wheel, for one) is a tile of its own. */
body.site-layout-tiles .content-wrapper > :where(:not(.content-area-wrapper, script, style, link, noscript, template)) {
    margin-block: 0 var(--tiles-gap);
    padding: var(--tiles-pad-sm);
    background-color: var(--tiles-card-bg);
    border-radius: var(--tiles-radius);
    --outer-bg: var(--tiles-inset-bg);
    --border-color: var(--tiles-line);
}

body.site-layout-tiles .content-area-wrapper {
    gap: var(--tiles-gap);
}

/* The main column holds tiles rather than being one: the article, the post
   navigation, related posts and comments are each their own. It takes all the
   width the sidebar leaves - the boxed card's padding is gone, and a column held
   to the Content Width would leave the sidebar short of the row's right edge. */
body.site-layout-tiles .site-main {
    flex: 1 1 0;
    max-width: none;
}

body.site-layout-tiles .site-main > :where(:not(script, style, link, noscript, template, .screen-reader-text)) {
    margin-block: 0 var(--tiles-gap);
    background-color: var(--tiles-card-bg);
    border-radius: var(--tiles-radius);
    /* Inside a tile, anything that used the page colour as its panel colour
       (the author box, tags, comment form...) gets a tinted inset instead, and
       the few lines that stay - table cells, form fields - are drawn in tint. */
    --outer-bg: var(--tiles-inset-bg);
    --border-color: var(--tiles-line);
}

body.site-layout-tiles .site-main > :last-child {
    margin-bottom: 0;
}

/* Inside a tile the padding is the space: the first thing in it keeps no top
   margin and the last no bottom one. An archive title (an h1 with its own
   margins) made a tile twice as tall as its text. */
body.site-layout-tiles .site-main > :where(:not(article)) > :first-child,
body.site-layout-tiles .content-wrapper > :where(:not(.content-area-wrapper)) > :first-child {
    margin-top: 0;
}

body.site-layout-tiles .site-main > :where(:not(article)) > :last-child,
body.site-layout-tiles .content-wrapper > :where(:not(.content-area-wrapper)) > :last-child {
    margin-bottom: 0;
}

/* Every tile gets an inner padding except an article, which has its own
   (entry-header, entry-content). A post list, the post navigation, comments, a
   plugin's own block - all of them would otherwise run into the tile's edge. */
body.site-layout-tiles .site-main > :where(:not(article, script, style, link, noscript, template, .screen-reader-text)) {
    padding: var(--tiles-pad-sm);
}

/* The rows of a post list keep their separator, drawn in the tile's tint. */
body.site-layout-tiles .boxedtheme-post-list .list-item:not(:last-child) {
    border-bottom-color: var(--tiles-line);
}

/* The article: no frame, and the featured image clipped to the tile's corners.
   flow-root so a first heading's top margin stays inside the tile instead of
   falling through it (overflow: clip, unlike hidden, does not contain it). */
body.site-layout-tiles .site-main > article,
/* Not the rows of a post list or the cards of [post_compact]: they are posts
   too, and display: flow-root undid their flex layout. */
body.site-layout-tiles .site-main article.type-post:not(.list-item, .compact-item) {
    display: flow-root;
    border: 0;
    overflow: clip;
    padding-bottom: 4px;
}

/* An article with no header - the front page, which leaves its title out -
   starts straight with the content, and the content has side padding only:
   its first heading sat on the tile's top edge. The same inset on top as on
   the sides, and the first element's own top margin dropped, so the gap is
   the same whatever the content starts with. */
body.site-layout-tiles .site-main > article > .entry-content:first-child {
    padding-top: 20px;
}

body.site-layout-tiles .site-main > article > .entry-content:first-child > :first-child {
    margin-top: 0;
}

/* On listings each post is its own tile. */
body.site-layout-tiles .site-main article.type-post:not(.list-item, .compact-item):not(:only-of-type) {
    margin-bottom: var(--tiles-gap);
}

/* No panel of its own: on most posts it is empty, and an empty tinted bar at
   the end of every article read as a glitch. Inset like the text above it - the
   boxed card's padding used to keep the tags off the edge. */
body.site-layout-tiles .entry-footer {
    border-top: 0;
    padding-top: 0;
    padding-inline: 20px;
}

body.site-layout-tiles .posts-navigation,
body.site-layout-tiles .post-nav,
body.site-layout-tiles .post-sources {
    border-top: 0;
    border-bottom: 0;
}

body.site-layout-tiles .posts-navigation,
body.site-layout-tiles .post-nav {
    margin-top: 0;
}

body.site-layout-tiles .author-box {
    border: 0;
    border-radius: var(--tiles-radius-inner);
}

body.site-layout-tiles .post-tag,
body.site-layout-tiles .source-tag {
    border-color: transparent;
}

/* Cards of the post grid shortcode sit inside a tile: inset, no shadow. */
body.site-layout-tiles .boxedtheme-post-grid .grid-item {
    background-color: var(--tiles-inset-bg);
    box-shadow: none;
}

/* ---------------------------------------------------------------- comments */

body.site-layout-tiles .comments-area {
    border-top: 0;
    margin-top: 0;
}

body.site-layout-tiles .comment-body,
body.site-layout-tiles .comment-content,
body.site-layout-tiles .comment-respond {
    border: 0;
    background-color: var(--tiles-inset-bg);
    border-radius: var(--tiles-radius-inner);
}

body.site-layout-tiles .comment-meta {
    border-bottom: 0;
}

/* ---------------------------------------------------------------- sidebar */

body.site-layout-tiles .widget-area .widget {
    margin-bottom: var(--tiles-gap);
    padding: var(--tiles-pad-sm);
    background-color: var(--tiles-soft-bg);
    border: 0;
    border-radius: var(--tiles-radius);
    --outer-bg: var(--tiles-inset-bg);
    --border-color: var(--tiles-line);
}

body.site-layout-tiles .widget-area .widget:last-child {
    margin-bottom: 0;
}

body.site-layout-tiles .widget-title {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 12px;
}

/* ---------------------------------------------------------------- footer */

body.site-layout-tiles .site-footer {
    width: var(--tiles-row);
    margin: var(--tiles-gap) auto var(--tiles-gap);
    padding: var(--tiles-pad) var(--tiles-pad-sm);
    background-color: var(--tiles-soft-bg);
    border-top: 0;
    border-radius: var(--tiles-radius);
    --outer-bg: var(--tiles-inset-bg);
    --border-color: var(--tiles-line);
}

body.site-layout-tiles .footer-widgets {
    border-bottom: 0;
    padding-bottom: 0;
}

/* ---------------------------------------------------------------- smaller screens */

@media screen and (max-width: 768px) {
    body.site-layout-tiles {
        --tiles-pad: 24px;
        --tiles-pad-sm: 16px;
    }

    body.site-layout-tiles .site-content {
        margin-top: var(--tiles-gap);
    }
}

@media screen and (max-width: 480px) {
    body.site-layout-tiles {
        --tiles-gap: min(var(--layout-gap, 10px), 10px);
        --tiles-pad: 20px;
        --tiles-pad-sm: 14px;
    }

    /* main.css moves the padding of the content card onto .site-main below 480px;
       here the tiles have their own. */
    body.site-layout-tiles .site-main,
    body.site-layout-tiles .widget-area {
        padding: 0;
    }
}