/*
Theme Name: Kubicki 2026
Theme URI: https://kubicki.com/
Author: Kubicki
Author URI: https://kubicki.com/
Description: The Studio Black look for kubicki.com: black background, white text, the Kubicki red, the Factor logo with the menu on the right, and larger type. Built as a child theme of Twenty Twenty-Five.
Template: twentytwentyfive
Requires at least: 7.0
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kubicki-2026
*/

/* Colors and fonts come from theme.json. This file holds the few things theme.json can't express. */

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

.kubicki-header .kubicki-logo {
	margin: 0;
	flex-shrink: 0;
}

.kubicki-header .kubicki-logo img {
	display: block;
	width: 300px;
	max-width: 80vw;
	height: auto;
}

.kubicki-header .kubicki-logo a:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 6px;
}

/* Main menu: the page you are on shows in red. */
.kubicki-nav .current-menu-item > .wp-block-navigation-item__content,
.kubicki-nav .current-menu-ancestor > .wp-block-navigation-item__content,
.kubicki-nav .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--accent-2);
}

/* Drop-down lists under Store, Support and History. */
.kubicki-nav .wp-block-navigation__submenu-container {
	min-width: 250px !important;
	padding: 8px 0;
	border: 1px solid var(--wp--preset--color--accent-6) !important;
	background-color: var(--wp--preset--color--accent-5) !important;
	font-family: var(--wp--preset--font-family--archivo);
	font-weight: 500;
	letter-spacing: 0.01em;
	text-transform: none;
}

.kubicki-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 9px 22px !important;
}

/* On computers the drop-down lists line up under their heading. */
@media (min-width: 1240px) {
	.kubicki-nav .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
		left: -22px !important;
		right: auto !important;
	}
}

/* Keep the focus outline for keyboard users only, not after a tap or click. */
.kubicki-nav :focus:not(:focus-visible) {
	outline: none;
}

/* Touch screens have no pointer to rest on a heading, so the drop-down lists are left out
   of the row of headings there. Each heading's own page links to every page under it. */
@media (hover: none) {
	.kubicki-nav-grid :is(.wp-block-navigation__submenu-container, .wp-block-navigation__submenu-icon),
	.kubicki-nav .wp-block-navigation__responsive-container:not(.is-menu-open) :is(.wp-block-navigation__submenu-container, .wp-block-navigation__submenu-icon) {
		display: none !important;
	}
}

/* Tablets and small laptops: the menu no longer fits beside the logo,
   so the logo sits above it, both centered, with all six headings in one row. */
@media (min-width: 700px) and (max-width: 1239px) {
	.kubicki-header .alignwide {
		flex-direction: column;
		flex-wrap: wrap !important;
		justify-content: center !important;
		align-items: center !important;
		row-gap: 18px !important;
	}

	.kubicki-nav .wp-block-navigation__container {
		justify-content: center;
		gap: 10px 28px !important;
	}
}

/* Homepage on phones: the logo above, and the six headings in two rows of three. */
@media (max-width: 699px) {
	.kubicki-header-home .alignwide {
		flex-direction: column;
		flex-wrap: wrap !important;
		justify-content: center !important;
		align-items: center !important;
		row-gap: 16px !important;
		padding-top: 22px !important;
		padding-bottom: 20px !important;
	}

	.kubicki-header-home .kubicki-logo img {
		width: 260px;
	}

	.kubicki-nav-grid {
		width: 100%;
		font-size: var(--wp--preset--font-size--label) !important;
	}

	.kubicki-nav-grid .wp-block-navigation__container {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		width: 100%;
		max-width: 360px;
		margin: 0 auto;
		gap: 12px 8px !important;
	}

	.kubicki-nav-grid .wp-block-navigation__container > .wp-block-navigation-item {
		justify-content: center;
		text-align: center;
	}
}

/* Other pages on phones: the logo, and a three-line button that opens the full menu. */
@media (max-width: 699px) {
	.kubicki-header:not(.kubicki-header-home) .kubicki-logo img {
		max-width: 64vw;
	}

	.kubicki-header:not(.kubicki-header-home) .alignwide {
		column-gap: 16px !important;
	}
}

@media (min-width: 600px) and (max-width: 699px) {
	.kubicki-nav:not(.kubicki-nav-grid) .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.kubicki-nav:not(.kubicki-nav-grid) .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

.kubicki-nav .wp-block-navigation__responsive-container-open,
.kubicki-nav .wp-block-navigation__responsive-container-close {
	color: #ffffff;
}

.kubicki-nav .wp-block-navigation__responsive-container-open svg,
.kubicki-nav .wp-block-navigation__responsive-container-close svg {
	width: 36px;
	height: 36px;
}

/* The full menu that the three-line button opens. */
.kubicki-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 28px clamp(20px, 5vw, 72px);
}

.kubicki-nav .wp-block-navigation__responsive-container-close {
	top: 0;
	right: 0;
}

.kubicki-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 48px;
	align-items: flex-start;
}

.kubicki-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 16px;
	align-items: flex-start;
}

.kubicki-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: flex-start;
}

.kubicki-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-size: 1.375rem;
}

.kubicki-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	min-width: 0 !important;
	padding: 8px 0 0 18px !important;
	border: 0 !important;
	background-color: transparent !important;
	gap: 7px;
	font-size: 1.0625rem;
}

.kubicki-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0 !important;
}

/* ---------- Homepage ---------- */

.kubicki-hero {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.kubicki-hero img {
	display: block;
	width: 100%;
	height: clamp(220px, 47.6vw, 620px);
	object-fit: cover;
}

.kubicki-home-intro {
	margin-top: 0 !important;
}

.kubicki-home-intro h1 {
	margin: 0;
	line-height: 1.05;
}

.kubicki-red {
	color: var(--wp--preset--color--accent-1);
}

.kubicki-tagline {
	margin-top: 22px !important;
	color: #bdbdbd;
	font-size: var(--wp--preset--font-size--large);
	letter-spacing: 0.02em;
}

.kubicki-tagline span + span::before {
	content: "\00B7";
	margin: 0 0.55em;
}

@media (max-width: 640px) {
	.kubicki-tagline span {
		display: block;
	}

	.kubicki-tagline span + span::before {
		content: none;
	}
}

/* ---------- Pages ---------- */

/* Text keeps a comfortable line length and lines up on the left with the photos,
   galleries and columns, which use the full width. */
.wp-block-post-content.is-layout-constrained > :is(p, ul, ol, dl, blockquote, address, table, form, .arconix-faq-accordion-wrap, .wpcf7, .paypal) {
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
	margin-right: auto !important;
}

.wp-block-post-content.is-layout-constrained > :is(p, ul, ol, dl, blockquote, address, .arconix-faq-accordion-wrap) {
	max-width: min(820px, 100%);
}

.wp-block-post-content.is-layout-constrained > :is(p, ul, ol).has-text-align-center,
.wp-block-post-content.is-layout-constrained > :is(p, ul, ol)[style*="text-align: center"],
.wp-block-post-content.is-layout-constrained > :is(p, ul, ol)[style*="text-align:center"] {
	margin-left: auto !important;
}

.wp-block-post-content img {
	max-width: 100%;
	height: auto;
}

/* YouTube and Vimeo videos added in the classic editor shrink to fit on phones. */
.wp-block-post-content :not(.wp-block-embed__wrapper) > iframe:is([src*="youtube"], [src*="vimeo"]) {
	max-width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

/* Photo galleries: captions in the site's font. */
.wp-block-post-content .foogallery :is(.fg-caption, .fg-caption-title, .fg-caption-desc) {
	font-family: var(--wp--preset--font-family--inter);
}

/* Image placement from the classic editor. */
.wp-block-post-content .alignleft {
	float: left;
	margin: 0.3em 1.5em 1em 0;
}

.wp-block-post-content .alignright {
	float: right;
	margin: 0.3em 0 1em 1.5em;
}

.wp-block-post-content .aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-block-post-content::after {
	content: "";
	display: table;
	clear: both;
}

.wp-block-post-content .wp-caption {
	max-width: 100%;
}

.wp-block-post-content .wp-caption-text {
	margin-top: 0.4em;
	color: var(--wp--preset--color--accent-4);
	font-size: var(--wp--preset--font-size--small);
}

/* Tables, such as the strings comparison. */
.wp-block-post-content table {
	border-collapse: collapse;
	max-width: 100%;
}

.wp-block-post-content.is-layout-constrained > table {
	width: min(100%, var(--wp--style--global--content-size)) !important;
}

.wp-block-post-content :is(th, td) {
	padding: 0.55em 0.8em;
	border: 1px solid #333333;
	vertical-align: top;
	text-align: left;
}

.wp-block-post-content th {
	color: #ffffff;
	font-family: var(--wp--preset--font-family--archivo);
	font-weight: 600;
}

/* The PayPal option lists on the store pages are laid out with small tables; they need no lines. */
.wp-block-post-content form table,
.wp-block-post-content form :is(th, td) {
	border: 0;
	padding: 0 0 0.4em;
}

/* Form fields: the contact form and the PayPal option lists. */
.wp-block-post-content :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="search"], textarea, select) {
	max-width: 100%;
	padding: 0.6em 0.75em;
	border: 1px solid #3a3a3a;
	border-radius: 3px;
	background-color: var(--wp--preset--color--accent-5);
	color: var(--wp--preset--color--contrast);
	font: inherit;
}

.wp-block-post-content :is(input, textarea, select):focus {
	border-color: var(--wp--preset--color--accent-2);
	outline: 2px solid var(--wp--preset--color--accent-2);
	outline-offset: 0;
}

.wp-block-post-content select option {
	background-color: var(--wp--preset--color--accent-5);
	color: var(--wp--preset--color--contrast);
}

.wpcf7 :is(input[type="text"], input[type="email"], input[type="tel"], textarea) {
	width: 100%;
	max-width: 640px;
}

.wpcf7 label {
	font-weight: 500;
}

.wpcf7 input[type="submit"] {
	padding: 0.8rem 1.75rem;
	border: 0;
	border-radius: 3px;
	background-color: var(--wp--preset--color--accent-1);
	color: #ffffff;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
}

.wpcf7 input[type="submit"]:hover {
	background-color: #b80f17;
}

.wpcf7 input[type="submit"]:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

/* FAQ list: one line per question, click to open. */
.wp-block-post-content .arconix-faq-accordion-wrap {
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
}

.wp-block-post-content .arconix-faq-accordion-title {
	position: relative;
	margin: 0;
	padding: 18px 44px 18px 0;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 0;
	background: none;
	color: #ffffff;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	cursor: pointer;
}

.wp-block-post-content .arconix-faq-accordion-title .ui-icon {
	display: none;
}

.wp-block-post-content .arconix-faq-accordion-title::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	color: var(--wp--preset--color--accent-2);
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1;
}

.wp-block-post-content .arconix-faq-accordion-title.ui-state-active::after,
.wp-block-post-content .arconix-faq-accordion-title[aria-expanded="true"]::after {
	content: "\2212";
}

.wp-block-post-content .arconix-faq-accordion-title:hover,
.wp-block-post-content .arconix-faq-accordion-title.ui-state-active {
	color: var(--wp--preset--color--accent-2);
}

.wp-block-post-content .arconix-faq-accordion-content {
	padding: 0 0 22px;
	border: 0;
	background: none;
	color: var(--wp--preset--color--contrast);
}

/* Store parts lists (the Info Box plugin): dark cards in the site's fonts.
   The plugin writes its own colors and fonts with high priority, so these rules need it too. */
.wp-block-post-content :is([id^="infobox_main_container_"], #kubicki-infobox) .wpsm_panel {
	border: 1px solid var(--wp--preset--color--accent-6) !important;
	border-radius: 3px !important;
	background: var(--wp--preset--color--accent-5) !important;
	box-shadow: none !important;
}

.wp-block-post-content :is([id^="infobox_main_container_"], #kubicki-infobox) .wpsm_panel-default > .wpsm_panel-heading {
	border-bottom: 1px solid var(--wp--preset--color--accent-6) !important;
	color: #ffffff !important;
}

.wp-block-post-content :is([id^="infobox_main_container_"], #kubicki-infobox) :is(.wpsm_panel-title, .wpsm_panel-title span) {
	color: #ffffff !important;
	font-family: var(--wp--preset--font-family--archivo) !important;
	font-size: var(--wp--preset--font-size--large) !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
}

.wp-block-post-content :is([id^="infobox_main_container_"], #kubicki-infobox) .wpsm_panel-body {
	color: var(--wp--preset--color--contrast) !important;
	font-family: var(--wp--preset--font-family--inter) !important;
	font-size: var(--wp--preset--font-size--medium) !important;
}

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

.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0;
}

.kubicki-footer {
	color: var(--wp--preset--color--accent-4);
	font-size: 1.0625rem;
	line-height: 1.6;
}

.kubicki-footer p {
	margin: 0;
}

.kubicki-footer .kubicki-footer-name {
	color: #ffffff;
	font-weight: 600;
}

.kubicki-footer a {
	color: #ffffff;
	text-decoration: none;
}

.kubicki-footer a:hover,
.kubicki-footer a:focus-visible {
	color: var(--wp--preset--color--accent-2);
	text-decoration: underline;
}

.kubicki-footer a[href^="tel:"],
.kubicki-footer a[href^="mailto:"] {
	white-space: nowrap;
}

.kubicki-footer .kubicki-social {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
}

.kubicki-footer .kubicki-copyright {
	flex-basis: 100%;
	color: #8a8a8a;
	font-size: var(--wp--preset--font-size--small);
}

/* ---------- Leftovers from the old theme ---------- */

/* The old site's separate phone menus (two plugins) are not used with this theme.
   One of them hides every menu on screens under 1024px; this keeps ours showing. */
.wp-site-blocks nav.kubicki-nav {
	display: flex !important;
}

.wprm-wrapper,
#mg-wprm-wrap,
#wprmenu_bar,
.rmp_menu_trigger,
.rmp-container {
	display: none !important;
}

html:root {
	padding-top: 0 !important;
}

::selection {
	background-color: var(--wp--preset--color--accent-1);
	color: #ffffff;
}