/*
Theme Name:   WPZOOM Cookbook Child
Theme URI:    https://andrewk.space
Description:  Child theme for wpzoom-cookbook. All site-specific CSS and
              template overrides belong here so that updating the parent
              theme never overwrites them.
Author:       Andrew Kehrig
Template:     wpzoom-cookbook
Version:      1.2.0
Text Domain:  wpzoom-cookbook-child
*/

/* ==========================================================================
   NOTE ON UNITS

   The parent theme sets `html { font-size: 62.5% }` -- the old trick that
   makes 1rem equal 10px instead of 16px. Any rem value here renders at 62.5%
   of its intended size, so sizes are given in px. Do not convert them to rem
   without multiplying by 1.6.
   ========================================================================== */

/* ==========================================================================
   1. Centre the content

   The theme lays the index out as two columns inside .site-main:

       section.content-area   800px
       div.site-sidebar       360px

   Emptying the sidebar of widgets does not remove the element, so it kept
   holding its 360px of the row and the 800px content column stayed pinned to
   the left. The content was never the wrong size -- it was the right size,
   pushed over by an empty column.

   So: drop the empty column and centre the one that is left, at its original
   width. Nothing here changes type size or measure.

   If you ever put widgets back in the sidebar, delete this block.
   ========================================================================== */

.blog .site-sidebar,
.archive .site-sidebar,
.search .site-sidebar,
.single .site-sidebar {
	display: none;
}

.blog .content-area,
.archive .content-area,
.search .content-area,
.single .content-area {
	float: none;
	/* The theme's own width is 800px, sized for a column sitting beside a
	   sidebar rather than centred in the full width. Standing alone it reads
	   a little wide, so 700px. max-width keeps it from overflowing once the
	   viewport is narrower than that. */
	width: 700px;
	max-width: 100%;
	margin-inline: auto;
}

/* ==========================================================================
   2. The "Latest Posts" heading

   Theme Options -> Title for Recent Posts is cleared, but the theme prints
   the <h2> regardless, so it arrives as `<h2 class="section-title"> </h2>` --
   whitespace rather than empty, so :empty will not match it and it keeps its
   full margin box above the first post.

   To bring a heading back: set Title for Recent Posts and delete this rule.
   ========================================================================== */

.blog .section-title,
.home .section-title,
.archive .section-title {
	display: none;
}

/* ==========================================================================
   3. Separation between entries

   Entries used to be uniform 55-word excerpts, which spaced the list evenly
   on their own. They are now full posts running from one line to several
   screens, so without a divider a short note reads as a continuation of the
   article above it. This is the only styling change to the entries; type
   size and measure are the theme's own.
   ========================================================================== */

.blog .regular-post,
.archive .regular-post,
.search .regular-post {
	padding-bottom: 32px;
	margin-bottom: 32px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}

.blog .regular-post:last-of-type,
.archive .regular-post:last-of-type {
	border-bottom: 0;
}

/* ==========================================================================
   4. The date permalink

   Rendered by the child theme's content.php. On a titleless note it is the
   only handle the entry has, so it has to read as clickable without
   competing with the body text.
   ========================================================================== */

.ok-permalink {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 120ms ease;
}

.ok-permalink:hover,
.ok-permalink:focus-visible {
	border-bottom-color: currentColor;
}

/* Images are wrapped in a link to the full-size file (see functions.php).
   The link is a plain wrapper and should not inherit link styling -- no
   underline, no colour, and no inline-gap under the image. */
.ok-image-link {
	display: block;
	border: 0;
	text-decoration: none;
	line-height: 0;
	cursor: zoom-in;
}

/* Full-length posts can now contain anything the editor allows. */
.blog .entry-content img,
.archive .entry-content img,
.single .entry-content img,
.blog .entry-content iframe,
.single .entry-content iframe {
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
   5. Hide the hamburger on desktop

   The theme switches to the mobile menu at 979px:

       @media screen and (max-width: 979px) {
           .slicknav_menu     { display: block }
           #navbar-main > div { display: none }
       }

   but .slicknav_btn is declared `display: block` with no media query at all,
   and lives in .navbar-header-main rather than inside .slicknav_menu -- so it
   escapes that query and renders at every width, beside a perfectly good
   desktop menu. Matching the theme's own 979/980 boundary means nothing
   changes below it.
   ========================================================================== */

@media screen and (min-width: 980px) {
	.navbar-header-main .slicknav_btn,
	.slicknav_menu,
	.slicknav_nav {
		display: none !important;
	}
}

/* ==========================================================================
   6. Dark mode
   ========================================================================== */

@media (prefers-color-scheme: dark) {
	.blog .regular-post,
	.archive .regular-post {
		border-bottom-color: rgba(255, 255, 255, 0.13);
	}
}

body.mode-dark .blog .regular-post,
body.mode-dark .archive .regular-post {
	border-bottom-color: rgba(255, 255, 255, 0.13);
}