/*
Theme Name: CloudBound Security
Theme URI: https://cloudboundsecurity.com
Author: Nick Schmitz
Author URI: https://cloudboundsecurity.com
Description: Block theme for cloudboundsecurity.com. Dark editorial treatment for long-form Microsoft identity security writing: serif for prose, monospace for technical furniture, and first-class handling of code blocks and portal screenshots.
Version: 2.1.0
Requires at least: 6.9
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cloudbound
Tags: blog, one-column, full-site-editing, custom-menu
*/

/*
 * Design tokens live in theme.json, not here.
 *
 * This file is loaded on every page, so it holds only small global rules
 * that theme.json cannot express. Feature CSS (code block chrome, figure
 * frame, table of contents) goes in per-block files under
 * assets/css/blocks/, registered with wp_enqueue_block_style() inside an
 * init hook so it only loads on pages that render that block.
 *
 * Reference tokens as var(--wp--preset--*), never literal values.
 */

/*
 * Site mark: the amber "C" box in front of the wordmark. Drawn with
 * generated content so the header markup stays a plain site-title block;
 * the empty alt text ("/ ''") keeps screen readers from announcing it.
 */
.wp-block-site-title a {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--heading);
}

.wp-block-site-title a::before {
	content: "C";
	content: "C" / "";
	display: inline-grid;
	place-items: center;
	width: 2.3em;
	height: 2.3em;
	border: 1px solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	letter-spacing: 0;
	line-height: 1;
}

/*
 * Current menu item: amber underline (the class is added in inc/single.php,
 * because core never marks custom links as current).
 */
/* The color goes on the item: core sets "color: inherit" on the link with a
 * higher-specificity rule, so the link picks it up from here. */
.wp-block-navigation .current-menu-item {
	color: var(--wp--preset--color--heading);
}

.wp-block-navigation .current-menu-item > a {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.45em;
}

/*
 * Inline code in running text: teal mono on a sunken chip. Long GUIDs and
 * URLs are allowed to wrap anywhere so they never push the column wide.
 * A wrapped chip keeps the default slice decoration (open ends at the
 * break): Chrome does not reserve room for a cloned end border when it
 * breaks the line, so "box-decoration-break: clone" pushed the border up
 * to 5px past the column.
 */
:where(p, li, td, th, figcaption, blockquote, h1, h2, h3, h4, h5, h6) code {
	padding: 0.1em 0.35em;
	border: 1px solid var(--wp--preset--color--line);
	background-color: var(--wp--preset--color--sunken);
	color: var(--wp--preset--color--signal);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.85em;
	overflow-wrap: anywhere;
}

/*
 * Tag chips: post-terms blocks with the class "post-chips", above a post
 * title and in the post list rows.
 */
.post-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
}

.post-chips .wp-block-post-terms__separator {
	display: none;
}

.post-chips a {
	padding: 0.3em 0.7em;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--signal) 30%, transparent);
	background-color: color-mix(in srgb, var(--wp--preset--color--signal) 8%, transparent);
	color: var(--wp--preset--color--signal);
	font-size: var(--wp--preset--font-size--tiny);
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
}

.post-chips a:hover,
.post-chips a:focus-visible {
	border-color: var(--wp--preset--color--signal);
	text-decoration: none;
}

/* Long URLs and words in running text wrap instead of pushing the page
 * wider than a phone screen. Normal words are unaffected. */
body {
	overflow-wrap: break-word;
}

/* Several posts wrap whole headings in <strong>; keep the heading weight. */
:where(h1, h2, h3, h4, h5, h6) strong {
	font-weight: inherit;
}

/* Anchor targets (table of contents links) stop short of the top edge. */
:where(h2, h3, h4)[id] {
	scroll-margin-top: var(--wp--preset--spacing--50);
}

/*
 * Outline button hover. theme.json cannot put a :hover on a block style
 * variation before WordPress 7.0, and core's outline variation forces a
 * transparent background, so the element-level button hover never shows.
 */
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

/* ------------------------------------------------------------------ */
/* Phones and touch screens                                           */
/* ------------------------------------------------------------------ */

/*
 * Menu and close buttons: 44px touch targets around core's 24px icons.
 * The negative margin gives the padding back, so the icon and the header
 * row stay exactly where they were. The class is doubled to match the
 * navigation editor rule that resets these buttons to "padding: 0", so the
 * editor preview keeps the same geometry as the front end.
 */
.wp-block-navigation .wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open,
.wp-block-navigation .wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close {
	padding: calc((2.75rem - 24px) / 2);
	margin: calc((24px - 2.75rem) / 2);
}

.wp-block-navigation .wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open:focus-visible,
.wp-block-navigation .wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: -2px;
}

/*
 * Open overlay on phones: the menu is the whole screen, so the links are
 * set in the display face at the site title's size, with 44px+ rows. Core
 * forces "color: inherit !important" on items inside the overlay, so the
 * current item's heading color goes on its link here.
 */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
	padding-block: var(--wp--preset--spacing--10);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.2;
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--heading);
}

/*
 * Open overlay: line the close button up with the menu button in the
 * header (header padding, plus half of the title row minus core's 24px
 * icon; the wordmark's "S" box sits on the text baseline and adds about
 * 4px to that row, hence the 0.125rem). Keep in step with the header
 * padding in parts/header.html and the body line-height in theme.json.
 */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	padding-top: calc(var(--wp--preset--spacing--30) + (var(--wp--preset--font-size--x-large) * 1.8 - 24px) / 2 + 0.125rem);
}

/* Touch screens with the inline menu (landscape phones, tablets): taller
 * tap areas, with the padding given back so nothing moves. */
@media (pointer: coarse) {
	.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content {
		padding-block: var(--wp--preset--spacing--10);
		margin-block: calc(var(--wp--preset--spacing--10) * -1);
	}
}

/*
 * Touch screens: taller hit areas on the footer links. Padding on an
 * inline link does not move the line, and the negative side margin gives
 * the side padding back, so nothing shifts. The focus ring is kept for
 * keyboard focus only; Chrome also focuses a tapped link.
 */
@media (pointer: coarse) {
	footer.wp-block-template-part a {
		padding: 0.875rem var(--wp--preset--spacing--10);
		margin-inline: calc(-1 * var(--wp--preset--spacing--10));
	}

	footer.wp-block-template-part a:focus:not(:focus-visible) {
		outline: none;
	}
}

/*
 * Fit text has no minimum size: core shrinks a sentence onto one line,
 * which is 5 to 8px in a phone column. Below 782px, fit text paragraphs in
 * post content wrap at the inherited body size instead. !important beats
 * the inline size written by core's front end script and core's own
 * ".has-fit-text { white-space: nowrap !important }". ":not(#fit-text-guard)"
 * adds ID weight so this also beats the editor's per-block size rule;
 * without it the editor keeps its size but wraps, and the fit loop grows
 * the text to hundreds of px.
 */
@media not all and (min-width: 782px) {
	.wp-block-post-content p.has-fit-text:not(#fit-text-guard) {
		font-size: inherit !important;
		white-space: normal !important;
	}

	/* Preformatted notes get the same 1rem side padding as code on phones. */
	.wp-block-post-content .wp-block-preformatted {
		padding-inline: var(--wp--preset--spacing--20);
	}
}