/*
 * Hojt theme stylesheet.
 *
 * Styling order (CLAUDE.md 2.1):
 *   1. theme.json (tokens, element and block styles)
 *   2. block style variations (register_block_style)
 *   3. this file, only for what theme.json cannot express
 *
 * Every rule here must carry a short comment saying why theme.json cannot do it.
 */

/* ---------- Spacing ---------- */

/* Side gutter. Stockholm centres .container_inner at a stepped width (1100, then
   950 under 1200 px, 768 under 1000, 600 under 768, 420 under 600, 300 under 480,
   95% under 350: responsive.min.css) and the page edge takes the rest, so on a
   390 px phone each side is (390 - 300) / 2 = 45 px. theme.json styles.spacing.padding
   reads this variable (root padding, applied by core to every constrained group);
   a calc() that depends on the viewport cannot be written in theme.json itself. */
:root {
	--hojt-gutter: 0px;
}
@media (max-width: 1200px) {
	:root { --hojt-gutter: calc((100vw - 950px) / 2); }
}
@media (max-width: 1000px) {
	:root { --hojt-gutter: calc((100vw - 768px) / 2); }
}
@media (max-width: 768px) {
	:root { --hojt-gutter: calc((100vw - 600px) / 2); }
}
@media (max-width: 600px) {
	:root { --hojt-gutter: calc((100vw - 420px) / 2); }
}
@media (max-width: 480px) {
	:root { --hojt-gutter: calc((100vw - 300px) / 2); }
}
@media (max-width: 350px) {
	:root { --hojt-gutter: 2.5vw; }
}
/* Header and footer use their own inset: .header_bottom and footer .container_inner
   are 45 px under 1000 px, 25 px under 480 and 15 px under 420 (responsive.min.css).
   Core reads the root padding from these two variables, so they are set on the
   element itself; the value is a plain length, not the viewport formula above. */
@media (max-width: 1000px) {
	.hojt-header,
	.hojt-footer {
		--wp--style--root--padding-left: 45px;
		--wp--style--root--padding-right: 45px;
	}
}
@media (max-width: 480px) {
	.hojt-header,
	.hojt-footer {
		--wp--style--root--padding-left: 25px;
		--wp--style--root--padding-right: 25px;
	}
}
@media (max-width: 420px) {
	.hojt-header,
	.hojt-footer {
		--wp--style--root--padding-left: 15px;
		--wp--style--root--padding-right: 15px;
	}
}

/* theme.json blockGap is 0 (Stockholm has no block gap). WordPress still gives the
   first child of a flow layout its own margin-block-start rule at low specificity;
   these resets make the zero explicit where the baseline starts flush. */
main > *,
.wp-block-post-content > * {
	margin-block-start: 0;
}

/* Running text in posts: Stockholm sets margin-bottom 15px on .blog_single
   .post_content p (the Scoop.it posts, plain HTML). Builder pages and builder blog
   posts measured 0; those keep 0 through this rule being scoped to .single.
   theme.json has no per-context paragraph margin. */
.single .wp-block-post-content p {
	margin-block: 0 15px;
}

/* Page content: Stockholm's paragraphs have margin 0 and the authors spaced them with an
   empty <p>&nbsp;</p> (26 px line) between two paragraphs (home has five). The
   converter drops those empty paragraphs, so the gap is restored here as a top margin
   between consecutive paragraphs. Single posts keep their own 15 px rule above. */
.page .wp-block-post-content p + p {
	margin-block-start: 26px;
}

/* Links keep their own weight where the parent sets one: the theme.json link
   element is weight 500 and targets the anchor directly, which would override the
   heading, nav, breadcrumb and pagination weights set on the parent. */
.wp-block-heading a,
.wp-block-post-title a,
.wp-block-navigation a,
.hojt-breadcrumb a,
.wp-block-query-pagination a,
.hojt-share__link {
	font-weight: inherit;
}

/* ---------- Header ---------- */

/* Sticky comes from the block's position support; this adds the stacking order
   and a hairline that fades in on scroll, which position support cannot express.
   The hairline is an inset box-shadow, not a border: a transparent 1px border added
   a pixel (101 px against the baseline 100 px). */
.hojt-header {
	z-index: 100;
	box-shadow: inset 0 -1px 0 transparent;
}

/* Static 100 px fallback. Logo 165 px wide (220x120 source, ratio 0.5455) is
   165 x 90 px, so 5 + 90 + 5 = 100 px, as the baseline. The shrink animation needs
   a CSS base, and theme.json cannot style a nested group by class. */
.hojt-header__row {
	align-items: center;
	padding-block: 5px;
}

.hojt-header .wp-block-site-logo img {
	width: 165px;
	height: auto;
}

/* Nav and search sit together at the right of the 1100 px container: the logo takes the
   free space (Stockholm floats the nav right and the search button after it). Links
   have 24 px side padding and no gap, as nav.main_menu>ul>li>a padding 0 24px.
   Menu items are laid out by the navigation block, not by theme.json. */
.hojt-header__row > .wp-block-site-logo {
	margin-right: auto;
}
.hojt-header .wp-block-navigation__container {
	gap: 0;
}
.hojt-header .wp-block-navigation-item__content {
	padding: 0 24px;
}

/* Shrink 100 to 57 px on scroll with a scroll-driven animation, no JavaScript.
   Arithmetic: logo 165 -> 95 px wide gives 90 -> 51.8 px tall (ratio 0.5455);
   padding 5 -> 2.5 px per side; 2.5 + 51.8 + 2.5 = 56.8 px, about the baseline 57.
   Browsers without animation-timeline keep the static 100 px header. */
@supports (animation-timeline: scroll()) {
	@keyframes hojt-header-shrink {
		to { padding-block: 2.5px; }
	}
	@keyframes hojt-logo-shrink {
		to { width: 95px; }
	}
	@keyframes hojt-header-line {
		to { box-shadow: inset 0 -1px 0 #cacaca; }
	}
	.hojt-header__row {
		animation: hojt-header-shrink linear both;
		animation-timeline: scroll(root block);
		animation-range: 0 100px;
	}
	.hojt-header .wp-block-site-logo img {
		animation: hojt-logo-shrink linear both;
		animation-timeline: scroll(root block);
		animation-range: 0 100px;
	}
	.hojt-header {
		animation: hojt-header-line linear both;
		animation-timeline: scroll(root block);
		animation-range: 0 100px;
	}
}

/* Front page only: the baseline slider starts at y=0 and the 100 px header overlays
   it. Pull the hero under the sticky header by the header's static height (the
   header sits above it with z-index 100). Not on phones: the 390 baseline stacks
   the hero below the header (hero y=100). */
@media (min-width: 600px) {
	.home .wp-block-post-content > .hojt-hero:first-child {
		margin-top: -100px;
	}
}

/* Current item colour: needs the navigation block's own current-item class. */
.hojt-header .wp-block-navigation .current-menu-item > a,
.hojt-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--muted);
}

/* Search icon button: core ships the glyph with button chrome; make it a bare
   icon in the nav colour. */
.hojt-header .wp-block-search__button {
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	color: var(--wp--preset--color--contrast-2);
	/* 37 px box centred in the 100 px bar, as .side_menu_button (37.4 x 100). */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 37px;
	height: 37px;
	line-height: 1;
}
.hojt-header .wp-block-search__button svg {
	display: block;
	width: 16px;
	height: 16px;
}
.hojt-header .wp-block-search__button:hover {
	color: var(--wp--preset--color--muted);
}

/* Mobile order: DOM order is logo, navigation, search; the design wants
   hamburger left, logo centre, search right. Core's overlay breakpoint is a
   fixed 600 px, so the grid applies below it. */
@media (max-width: 599px) {
	/* Measured on baseline-roles/*-390.png: the phone logo is the same 165 px as on
	   desktop (ink x 112 to 277, centred) in a 100 px bar, so only the shrink animation
	   is dropped and the 5 px padding stays (5 + 90 + 5 = 100). */
	.hojt-header .wp-block-site-logo img {
		animation: none;
	}
	/* Four class names: core's .wp-block-group-is-layout-flex sets display:flex at
	   the same weight and loads later, so a plain .hojt-header__row lost on phones
	   (logo left, hamburger centre). */
	.hojt-header .hojt-header__row.wp-block-group.is-layout-flex {
		animation: none;
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
	}
	.hojt-header__row > .wp-block-navigation {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
	}
	.hojt-header__row > .wp-block-site-logo {
		grid-column: 2;
		grid-row: 1;
		margin-right: 0;
	}
	.hojt-header__row > .wp-block-search {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
	}
}

/* Open mobile menu: white list, hairline dividers, 16 px sentence case
   (baseline mobile-menu-open.png). Core styles the overlay through its own
   classes, so this has to be CSS. */
.hojt-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast-2);
	padding: 100px 0 0;
}
.hojt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: 0 20px;
}
.hojt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: stretch;
	gap: 0;
	width: 100%;
}
.hojt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding: 0;
}
.hojt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	font-size: 16px;
	text-transform: none;
	letter-spacing: 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding: 10px 0;
}
.hojt-header .wp-block-navigation__responsive-container-open,
.hojt-header .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--contrast-2);
}

/* ---------- Footer ---------- */

/* Four 25% columns of 275 px with no gap, 215 px tall; each carries 30 px right
   padding, and columns 2, 3 and 4 a 1 px #444 line plus 30 px left padding
   (.footer_top .column_inner, measured: text at x 170 / 476 / 751, 214 px wide).
   #444 is not a palette value; the fourth column stays empty but keeps its line. */
.hojt-footer .wp-block-columns {
	gap: 0;
}
.hojt-footer .wp-block-column {
	box-sizing: border-box;
	padding-right: 30px;
	min-height: 215px;
}
.hojt-footer__divided {
	border-left: 1px solid #444444;
	padding-left: 30px;
}
/* Copyright bar: 25.5 px above and below the 14 px line (65 px), 4% of the width
   under 600 px (.footer_bottom{padding:4% 0}, 15.6 px at 390). */
.hojt-footer-bar {
	padding-block: 25.5px;
}
@media (max-width: 600px) {
	.hojt-footer-bar {
		padding-block: 4%;
	}
}
/* Headings keep the text as authored (Stockholm: text-transform none); the
   theme.json h6 element would uppercase every one. */
.hojt-footer h6 {
	text-transform: none;
}
/* The tagline is 18 px line height in the baseline footer widget. */
.hojt-footer p {
	line-height: 18px;
}
/* Social icons: 35 px white circles, 16 px glyph, 14 px apart (.q_social_icon_holder).
   Core pads the link by .25em; 16 + 2 x 9.5 = 35. */
.hojt-footer .wp-block-social-links {
	gap: 14px;
	margin-top: 27px;
	margin-bottom: 14px;
}
.hojt-footer .wp-block-social-links .wp-social-link a {
	padding: 9.5px;
}

/* Footer post list: strip list chrome from the post-template. Items carry 10 px
   below them as block margin; the -10 px takes the last one back (Stockholm's last
   .widget li has no margin, so the widget ends at the text). */
.hojt-footer .wp-block-post-template {
	list-style: none;
	margin: 0 0 -10px;
	padding: 0;
}
/* Phone and tablet: each social icon holder is 39.5 px (35 px circle plus 2.25 px
   margin all round, measured at 390 px). */
@media (max-width: 1000px) {
	.hojt-footer .wp-block-social-links .wp-social-link {
		margin: 2.25px;
	}
}

/* Social icon hover background (#cecece, measured). Core writes the round
   background inline, hence !important. */
.hojt-footer .wp-block-social-links .wp-social-link:hover {
	background-color: #cecece !important;
}

/* Columns stack at 781 px (core); drop the vertical hairline then. */
@media (max-width: 781px) {
	/* Stacked: each widget keeps 25 px below it (.column_inner>div margin) and each
	   column another 25 px (.footer_top .column margin), 50 px between widgets. */
	.hojt-footer .wp-block-column {
		min-height: 0;
		padding-right: 0;
		padding-bottom: 25px;
		margin-bottom: 25px;
	}
	.hojt-footer__divided {
		border-left: 0;
		padding-left: 0;
	}
	.hojt-footer__divided:empty {
		display: none;
	}
}

/* ---------- Hero ---------- */

/* Mobile hero title is about 32 px (m-hero.png) where the preset is a fixed 60 px
   (non-fluid by design). The preset class carries !important, so this must too. */
@media (max-width: 599px) {
	.hojt-hero h2.has-xx-large-font-size {
		font-size: 32px !important;
		line-height: 40px !important;
		letter-spacing: 3px !important;
	}
}

/* ---------- Logo grid ---------- */

/* Five logos per row from 1024 px, two below; the flex gap and item width are a
   per-item layout detail the Group block cannot express. */
.hojt-logo-grid {
	gap: 20px;
}
.hojt-logo-grid .hojt-logo {
	flex: 0 0 calc(50% - 10px);
	margin: 0;
}
@media (min-width: 1024px) {
	.hojt-logo-grid .hojt-logo {
		flex-basis: calc(20% - 16px);
	}
}
/* Baseline: colour at rest, grey on hover. A CSS filter replaces the .gray_ files. */
.hojt-logo img {
	width: 100%;
	height: auto;
	filter: grayscale(0);
	transition: filter 0.25s linear;
}
.hojt-logo:hover img,
.hojt-logo:focus-within img {
	filter: grayscale(1);
}

/* ---------- Share row ---------- */

/* Rendered by the hojt/share-row block, so there is no block class to hook theme.json onto. */
/* Stockholm: li 27 px wide, margin 10px 12px 0 0, 26 px dark glyph; the row is 37.4 px
   tall (.social_share_list_holder). The 90 px space below a page's row comes from the
   group that wraps it in the page content, so the row has none of its own (it used to
   add 90 px more: 212 px against 127 px on home). */
.hojt-share {
	display: flex;
	flex-wrap: wrap;
	gap: 0 12px;
	padding-top: 10px;
	padding-bottom: 0;
}
.hojt-share__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 27px;
	height: 27px;
	color: var(--wp--preset--color--contrast-2);
}
.hojt-share__link svg {
	width: 26px;
	height: 26px;
	fill: currentColor;
}
/* Round variant (pages): 27 px dark circle with a white glyph, centred. */
.hojt-share--round {
	justify-content: center;
}
.hojt-share--round .hojt-share__link {
	border-radius: 50%;
	background: var(--wp--preset--color--contrast-2);
	color: var(--wp--preset--color--base);
}
.hojt-share--round .hojt-share__link svg {
	width: 14px;
	height: 14px;
}
.hojt-share--round .hojt-share__link:hover {
	background: var(--wp--preset--color--muted);
}
/* Plain variant (single posts): bare 26 px glyphs in #393939, left aligned, 60 px
   below the text (.post_social margin-top 60, which includes the 10 px above). */
.hojt-share--plain {
	margin-top: 50px;
}
.hojt-share--plain .hojt-share__link:hover {
	color: var(--wp--preset--color--muted);
}

/* ---------- Contact details ---------- */

/* Icon sits in a 100 px left gutter of the column (baseline text_left_padding 100);
   absolute positioning is not a block setting. */
.hojt-icon-text-col {
	position: relative;
	padding-left: 100px;
}
.hojt-icon-text {
	position: absolute;
	left: 0;
	top: 0;
	margin: 0;
}
.hojt-icon-text svg {
	width: 25px;
	height: 25px;
	color: var(--wp--preset--color--contrast-2);
}
/* Columns stack here; a 100 px gutter would waste the narrow screen. */
@media (max-width: 781px) {
	.hojt-icon-text-col {
		padding-left: 50px;
	}
}

/* ---------- Sidebar ---------- */

/* Widget title box (widget-title.png: 255 x 50 px, muted, white, 13px / 700 /
   2px uppercase). theme.json styles.blocks.core/heading cannot target a class. */
.hojt-sidebar h6 {
	background: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--base);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	line-height: 26px;
	padding: 12px 18px;
	margin: 0 0 18px;
}
/* Space between widgets: a sibling rule, not expressible per block. */
.hojt-sidebar > * + h6 {
	margin-top: 26px;
}
/* Core renders lists with list chrome; the widgets show plain lines. */
.hojt-sidebar .wp-block-post-template,
.hojt-sidebar .wp-block-categories {
	list-style: none;
	margin: 0;
	padding: 0;
}
/* Widget lists: Crete Round italic 14 / 18 px, weight 400, 1 px letter-spacing, muted
   links, 7 px between items and none after the last (aside.sidebar .widget li).
   The categories block has no link-element typography setting. The post list items
   carry their 7 px as block margin; the negative margin takes the last one back. */
.hojt-sidebar .wp-block-post-template {
	margin-bottom: -7px;
}
.hojt-sidebar__categories a {
	font-family: var(--wp--preset--font-family--crete-round);
	font-style: italic;
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
	letter-spacing: 1px;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}
.hojt-sidebar__categories a:hover {
	color: var(--wp--preset--color--contrast-2);
}
.hojt-sidebar__categories li {
	margin-bottom: 7px;
	line-height: 18px;
}
.hojt-sidebar__categories li:last-child {
	margin-bottom: 0;
}
/* Search field: baseline background is #ededed (no token); base-2 is the nearest. */
.hojt-sidebar .wp-block-search__inside-wrapper {
	background: var(--wp--preset--color--base-2);
	border: 0;
}
.hojt-sidebar .wp-block-search__input {
	background: transparent;
	border: 0;
	border-radius: 0;
	font-family: var(--wp--preset--font-family--raleway);
	font-size: 14px;
}
/* The theme button style would paint the search button orange; the baseline shows
   a bare muted icon (docs/components/search-field.png). */
.hojt-sidebar .wp-block-search__button,
.hojt-sidebar .wp-block-search__inside-wrapper .wp-block-search__button {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--wp--preset--color--muted);
}
.hojt-sidebar .wp-block-search__button:hover {
	background: transparent;
	color: var(--wp--preset--color--contrast-2);
}
.hojt-sidebar .wp-block-search__inside-wrapper {
	border-radius: 0;
}

/* ---------- Tag chips ---------- */

/* Boxed chips for the tag cloud and post tags; border, padding and spacing are not
   settings of the tag-cloud block. !important because the cloud writes the size inline. */
.hojt-tags a,
.hojt-tag-chip a {
	display: inline-block;
	font-size: 10px !important;
	font-weight: 500;
	line-height: 32px;
	text-transform: uppercase;
	letter-spacing: 1px;
	border: 1px solid var(--wp--preset--color--border);
	padding: 0 15px;
	margin: 0 3px 5px 0;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}
.hojt-tags a:hover,
.hojt-tag-chip a:hover {
	color: var(--wp--preset--color--contrast-2);
}

/* ---------- Templates: breadcrumb, masonry, single post ---------- */

/* The breadcrumb is a dynamic block with no typography settings of its own:
   uppercase 12px / 1px as the baseline title bar, links contrast-2, current muted. */
.hojt-breadcrumb {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	line-height: 26px;
	color: var(--wp--preset--color--contrast-2);
}
.hojt-breadcrumb a {
	color: var(--wp--preset--color--contrast-2);
	text-decoration: none;
}
.hojt-breadcrumb a:hover {
	color: var(--wp--preset--color--muted);
}
/* Current item #959595 (.breadcrumbs .current); link-hover is that value. */
.hojt-breadcrumb__current {
	color: var(--wp--preset--color--link-hover);
}
/* Title bar: 88 px (31 + 26 + 31) on desktop. Under 1000 px Stockholm drops the
   height and padding (.title{height:auto} .title_holder{padding:0}), so the bar is
   just the text, about 28 px on one line. */
.hojt-titlebar {
	padding-block: 31px;
}
@media (max-width: 1000px) {
	.hojt-titlebar {
		padding-block: 0;
	}
}

/* Masonry: card heights vary in the baseline, so CSS columns, not a grid. */
.hojt-masonry .wp-block-post-template {
	list-style: none;
	padding: 0;
	margin: 0;
}
/* Stockholm's masonry puts each next card in the shorter column, so card 3 sits under
   card 1 and card 4 under card 2 (blog at 1440: cards 1 and 3 at x 170, 2 and 4 at
   x 572.5). CSS columns fill column by column (1 and 2 in the first column), a grid
   aligns rows; two left floats of 48% with a 2% right margin reproduce the
   shortest-column placement exactly for two columns. Cards are 386.4 px of the 805 px
   column, 16 px apart. */
.hojt-masonry .wp-block-post-template > .wp-block-post {
	float: left;
	width: 48%;
	margin-right: 2%;
}
.hojt-masonry .wp-block-post-template::after {
	content: "";
	display: block;
	clear: both;
}
/* Card image: 386.4 x 349.8 px on desktop and 300 x 271.6 px on phones, a cropped
   thumbnail (blog_image_in_grid), ratio 1.1045. */
.hojt-card .wp-block-post-featured-image img {
	width: 100%;
	aspect-ratio: 386.391 / 349.844;
	object-fit: cover;
}
/* Card text block: 5 px below the excerpt (.post_text_inner padding 25px 0 5px; the
   25 px above is carried by the date block's top margin, 29 with the 4 px line gap). */
.hojt-card {
	padding-bottom: 5px;
}
/* Under 768 px the card title link is .85em (responsive.min.css). */
@media (max-width: 768px) {
	.hojt-card .wp-block-post-title a {
		font-size: 0.85em;
	}
}
/* Sidebar column 255 px and a 40 px gutter between it and the 805 px main column
   (.two_columns_75_25: 25% column with 20 px padding each side). Core's columns
   gap is 24 px. */
.hojt-with-sidebar.wp-block-columns {
	gap: 40px;
}
/* Keep a card whole inside one column. */
.hojt-masonry .wp-block-post {
	break-inside: avoid;
}
/* One column on phones, as the baseline stacks them. */
@media (max-width: 600px) {
	.hojt-masonry .wp-block-post-template > .wp-block-post {
		float: none;
		width: auto;
		margin-right: 0;
	}
}

/* Pagination sits well below the last card; spacing has no pagination setting. */
.wp-block-query-pagination {
	margin-top: 40px;
	justify-content: center;
	gap: 20px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 2px;
}
/* Baseline load-more area: muted links, current page in contrast-2. */
.wp-block-query-pagination a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}
.wp-block-query-pagination a:hover,
.wp-block-query-pagination .page-numbers.current {
	color: var(--wp--preset--color--contrast-2);
}

/* Tag chips: the post-terms block lays links inline; wrap them with a gap. */
.hojt-tag-chip {
	display: flex;
	flex-wrap: wrap;
	/* Let the chips share the row with the "TAGS:" label and wrap among themselves
	   instead of dropping to their own line when they are wider than the rest. */
	flex: 1 1 0;
	min-width: 0;
}

/* "In <category>" in the meta line: muted italic Crete Round, no underline, regular
   weight (.post_info a). The theme.json link element would make it #421b1b / 500. */
.hojt-post-meta a {
	color: var(--wp--preset--color--muted);
	font-weight: 400;
	text-decoration: none;
}
.hojt-post-meta a:hover {
	color: var(--wp--preset--color--contrast-2);
}

/* Single post: the featured image fills the column whatever its stored size. */
.single .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
}

/* ---------- Block style variations (Task 7) ---------- */

/* Button hover eases over .3s as the baseline; theme.json has no transition setting. */
.wp-block-button__link {
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Secondary (white) button: white fill, dark text and border, inverted on hover.
   Style variations written in CSS so the editor shows the same (editor-styles). */
.wp-block-button.is-style-hojt-secondary .wp-block-button__link {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast-2);
	border-color: var(--wp--preset--color--contrast-2);
}
.wp-block-button.is-style-hojt-secondary .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--contrast-2);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--contrast-2);
}

/* Transparent separator = spacer: no line, the height comes from the block's own margin. */
.wp-block-separator.is-style-hojt-transparent {
	border: 0;
	background: transparent;
	height: 0;
	opacity: 1;
}

/* Full-width grey band (base-2); a group style cannot be set in theme.json by class. */
.wp-block-group.is-style-hojt-band {
	background-color: var(--wp--preset--color--base-2);
	padding-block: var(--wp--preset--spacing--60);
}

/* Logo image style: colour at rest, grey on hover (same rule as .hojt-logo above,
   for logos placed outside the logo-grid pattern). */
.wp-block-image.is-style-hojt-logo img {
	width: 100%;
	height: auto;
	filter: grayscale(0);
	transition: filter 0.25s linear;
}
.wp-block-image.is-style-hojt-logo:hover img,
.wp-block-image.is-style-hojt-logo:focus-within img {
	filter: grayscale(1);
}

/* Blockquote in post content. Plain quote (the Scoop.it posts): Stockholm sets
   `blockquote > p` to Crete Round 18 / 26 px in #e6ae48, no indent, no icon, no margin
   (computed on security-news_email-is-forever at 390 and 1440). #e6ae48 is not in the
   palette (nearest accent-2 #dd9933), so it stays a literal. */
.wp-block-quote {
	position: relative;
	border-left: 0;
	margin: 0;
	padding: 0;
	color: #e6ae48;
	font-weight: 400;
	line-height: 26px;
}
.wp-block-quote p {
	margin: 0;
}
.wp-block-quote cite {
	display: block;
	font-size: 13px;
	font-style: normal;
}

/* Icon quote (builder posts, `is-style-hojt-pull`, from blockquote.with_quote_icon):
   Crete Round 18 / 23.14 px, weight 400, letter-spacing normal, #a7a6a6, text 60 px
   from the left; the 48 px icon is #d5d5d5 (nearest token: border, #cacaca) centred
   vertically. */
.wp-block-quote.is-style-hojt-pull {
	padding: 0 0 0 60px;
	color: var(--wp--preset--color--muted);
	letter-spacing: normal;
	line-height: 1.2857;
}
.wp-block-quote.is-style-hojt-pull::before {
	content: "\201D";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 48px;
	line-height: 48px;
	color: var(--wp--preset--color--border);
}

/* Converted post content arrives wrapped in an alignfull constrained group, which core
   pads with the root gutter again. Inside the sidebar layout the column is already
   inside the gutter, so the inner group takes none (it was 45 px extra each side at
   390 px: text and images started at x=90). */
.hojt-with-sidebar .has-global-padding {
	padding-inline: 0;
}

/* Images and embeds never outgrow the column: an aligncenter figure is display:table
   and sized from the image's own 850 px width, which pushed the page to 940 px wide at
   390 (and the wordpress.org embed iframe to 545 px). */
.wp-block-image.aligncenter,
.wp-block-image figure {
	max-width: 100%;
}
/* display:table cannot be capped by max-width when its content is wider (an inline-block
   link around an 850 px image), so centred images are blocks; the figure's own
   text-align:center keeps them centred. */
.wp-block-post-content .wp-block-image.aligncenter {
	display: block;
}
.wp-block-post-content .wp-block-image a {
	max-width: 100%;
}
.wp-block-post-content img,
.wp-block-post-content iframe,
.wp-block-post-content video {
	max-width: 100%;
}
.wp-block-post-content img {
	height: auto;
}

/* ---------- Back to top (Task 7b) ---------- */

/* Dynamic block output; fixed 46 px square, dark with a white chevron. Visible by
   default (fallback); browsers with scroll-driven animations hide it until 300 px. */
.hojt-back-to-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	background: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--base);
	text-decoration: none;
	transition: background-color 0.2s ease;
}
.hojt-back-to-top:hover {
	background: var(--wp--preset--color--dark-hover);
	color: var(--wp--preset--color--base);
}
.hojt-back-to-top svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}
@supports (animation-timeline: scroll()) {
	@keyframes hojt-back-to-top-in {
		from { opacity: 0; visibility: hidden; }
		to { opacity: 1; visibility: visible; }
	}
	.hojt-back-to-top {
		animation: hojt-back-to-top-in linear both;
		animation-timeline: scroll(root block);
		animation-range: 0 300px;
	}
}

/* ---------- Header search, expanded (Task 7b) ---------- */

/* Core expands the button-only search inline. On tablet and phone the field would
   squeeze the nav, so it drops below the header row at full width instead.
   The sticky header is the containing block. The baseline's full-screen overlay is
   a known difference. */
@media (max-width: 1024px) {
	.hojt-header .wp-block-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__inside-wrapper {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		width: 100%;
		min-width: 0;
		background: var(--wp--preset--color--base);
		border-bottom: 1px solid var(--wp--preset--color--border);
		padding: 10px 20px;
		box-sizing: border-box;
	}
}
.hojt-header .wp-block-search__input {
	font-size: 14px;
	font-family: var(--wp--preset--font-family--raleway);
	border: 0;
	background: var(--wp--preset--color--base);
}

/* ---------- Focus (Task 8) ---------- */

/* Visible keyboard focus on every interactive element; no outline is ever removed. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.wp-block-button__link:focus-visible,
.wp-block-navigation-item__content:focus-visible,
.hojt-share__link:focus-visible,
.hojt-back-to-top:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-2);
	outline-offset: 2px;
}

/* ---------- Phone and tablet type (responsive.min.css) ---------- */

/* Page-content h2: 30 px to 768, 26 under 600, 22 under 480
   (.content .container_inner.default_template_holder h2). Only h2 steps down; h1 and
   h3 to h6 keep their desktop size in Stockholm. The hero heading carries its own
   size class and rule above. */
@media (max-width: 600px) {
	.wp-block-post-content h2:not(.has-xx-large-font-size) {
		font-size: 26px;
	}
	/* The 404 title is a template heading with a preset size class (!important). */
	.hojt-step-h2 {
		font-size: 26px !important;
	}
}
@media (max-width: 480px) {
	.wp-block-post-content h2:not(.has-xx-large-font-size) {
		font-size: 22px;
	}
	.hojt-step-h2 {
		font-size: 22px !important;
	}
}

/* Single post title: the .blog_holder article h2 span steps .85em / .7em / .5em of the
   h2 (30 / 26 / 22 px), so 25.5 px to 768, 18.2 px under 600 and 11 px under 480, with
   line-height .9em then .65em of the h2 and the margin under the meta line and the
   title 20 then 15 px. The size is a preset class on the block (!important), so the
   override needs !important too. */
@media (max-width: 768px) {
	.hojt-single-title {
		font-size: 25.5px !important;
	}
}
@media (max-width: 600px) {
	.hojt-single-title {
		font-size: 18.2px !important;
		line-height: 23.4px !important;
		margin-bottom: 20px !important;
	}
}
@media (max-width: 480px) {
	.hojt-single-title {
		font-size: 11px !important;
		line-height: 14.3px !important;
		margin-bottom: 15px !important;
	}
}

/* ---------- Code, long words, form button ---------- */

/* Stockholm: pre{max-width:100%; white-space:pre-wrap; word-wrap:break-word}. The
   background and 15 px padding / margin come from theme.json (core/code). A long
   unbroken token (a URL, a hook name) would otherwise push the page wider than the
   phone (500 px at 390 on the Elementor sharing post). */
.wp-block-code,
.wp-block-code code {
	max-width: 100%;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	word-break: break-word;
}
.wp-block-post-content {
	overflow-wrap: break-word;
}

/* The contact form's submit is a plain .qbutton in Stockholm: 37 px line height and
   22 px side padding (45 / 25 px is the large CTA button). */
.wp-block-form .wp-block-button__link,
.jetpack-contact-form-container .wp-block-button__link,
.hojt-button-small .wp-block-button__link {
	line-height: 37px;
	padding-inline: 22px;
}

/* ---------- Contact form (Jetpack form block) ---------- */

/* Old page: a #f5f5f5 band with 75 px above and 80 px below the form (.contact_detail
   margin 75px 0 80px), two 540 px columns 20 px apart (.two_columns_50_50), fields
   15 px apart, 40 px high inputs and a 202 px textarea with a 1 px #cacaca border,
   10px 17px padding, 14 / 18 px text, no radius, white fill. The block's own field
   markup carries no placeholders, so the labels stay visible (kept for accessibility)
   in the old placeholder look. The Jetpack stylesheet is not in the repo: if its
   selectors outweigh these, the values here need !important after the first look. */
.jetpack-contact-form-container {
	position: relative;
	/* !important: the saved capture showed no space under the button, so the Jetpack
	   stylesheet (not in the repo) must be resetting the container's padding. */
	padding-block: 75px 80px !important;
	background-color: var(--wp--preset--color--base-2);
	/* Full-bleed band without a wrapper group: the form sits directly in the page
	   content (1100 px column), so the grey is painted past its edges and clipped. */
	box-shadow: 0 0 0 100vmax var(--wp--preset--color--base-2);
	clip-path: inset(0 -100vmax);
}
.jetpack-contact-form-container .wp-block-jetpack-contact-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px 20px;
	align-items: start;
}
.jetpack-contact-form-container .wp-block-jetpack-field-textarea,
.jetpack-contact-form-container .wp-block-button,
.jetpack-contact-form-container .contact-form__error {
	grid-column: 1 / -1;
}
/* The wrapper spans the form but the button keeps its natural width (about 144 px),
   left-aligned. Jetpack sets width:100% on the button, hence !important. */
.jetpack-contact-form-container .wp-block-button {
	display: flex;
	justify-content: flex-start;
}
.jetpack-contact-form-container .wp-block-button__link {
	width: auto !important;
	flex: 0 0 auto;
	/* Fixed 41 px box (37 line + 2 x 2 border) as the old .qbutton; the captured button
	   was 72 px tall, so Jetpack's button padding or min-height survives. */
	box-sizing: border-box;
	height: 41px !important;
	min-height: 0 !important;
	padding: 0 22px !important;
	line-height: 37px !important;
	border: 2px solid var(--wp--preset--color--accent-2) !important;
}
/* White space under the band is real page height: a margin on the container collapsed
   or was reset (none showed in the capture). The old page reserves an empty 300 px map
   holder between the form and the footer. */
.hojt-page-content:has(.jetpack-contact-form-container) {
	padding-bottom: 300px;
}
/* Default-template pages (cookies): Stockholm wraps the content in .default_template_holder
   (padding-top 44 px) where builder pages use .full_width. Builder pages here start with
   alignfull groups, default pages do not. Bottom: the old row ends 102 px under the
   text, the content group supplies 90 px, so 12 px more. */
.hojt-page-content:not(:has(> .alignfull)) {
	padding-top: 44px;
	padding-bottom: 12px;
}
.jetpack-contact-form-container .grunion-field-label {
	display: block;
	margin: 0 0 5px;
	font-size: 14px;
	font-weight: 400;
	line-height: 18px;
	letter-spacing: normal;
	color: var(--wp--preset--color--contrast-3);
}
.jetpack-contact-form-container input.grunion-field,
.jetpack-contact-form-container textarea.grunion-field {
	box-sizing: border-box;
	width: 100%;
	height: 40px;
	margin: 0;
	padding: 10px 17px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 0;
	background: var(--wp--preset--color--base);
	box-shadow: none;
	font-family: var(--wp--preset--font-family--raleway);
	font-size: 14px;
	line-height: 18px;
	letter-spacing: normal;
	color: var(--wp--preset--color--contrast-2);
}
.jetpack-contact-form-container textarea.grunion-field {
	height: 202px;
}
/* Fields stack where Stockholm's 50/50 columns do. */
@media (max-width: 768px) {
	.jetpack-contact-form-container .wp-block-jetpack-contact-form {
		grid-template-columns: 1fr;
	}
}

/* Contact details: Stockholm's four 25% columns (the fourth, Skype, is dropped by
   decision) are 252.5 px wide, 30 px apart, left-aligned, with the title 14 / 26 px
   at weight 500 and 15.4 px above the text, and the 40 + 2 + 10 px separator plus 18 px
   of text padding below. The page content carries flex-basis 33.33% inline, hence
   !important. */
.hojt-icon-text-col h6 {
	font-size: 14px;
	font-weight: 500;
	line-height: 26px;
	margin-bottom: 15.4px;
}
@media (min-width: 782px) {
	.wp-block-columns:has(> .hojt-icon-text-col) {
		gap: 30px;
	}
	/* border-box: the 100 px icon gutter is part of the 252.5 px (content-box made
	   each column 352.5 px and the pitch 382.5 px, which read as thirds). */
	.hojt-icon-text-col {
		box-sizing: border-box;
		flex: 0 0 252.5px !important;
		padding-bottom: 70px;
	}
}

/* ---------- Hidden page title ---------- */

/* Page templates carry the page title as an h1 for assistive technology only (the
   old pages show no h1; the visible title is the breadcrumb bar or the hero).
   Standard clip pattern; core's .screen-reader-text is not guaranteed on block themes. */
.hojt-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}