/*
Theme Name: RT Theme
Theme URI:
Author: Retrotec
Author URI:
Description: Retrotec's WordPress block theme with deep WooCommerce integration and a full Automatic.css-derived design system. Standalone merge of the Airtight parent theme (v0.77.0) and Airtight Child Theme (v0.78.0), including all site-specific overrides, templates, and customizations.
Requires at least: 6.6
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: airtight
Tags: full-site-editing, block-styles, wide-blocks, editor-style, e-commerce
*/

/* ===========================================
   SITE OVERRIDES
   The design system (colors, fluid spacing,
   fluid type, radius, shadows, utilities) lives
   in assets/css/framework.css, generated from
   design-system/automatic-css.md by
   design-system/build-framework.mjs.
   This block overrides framework defaults for
   this site. Raising the widths re-calibrates
   .width--* and .section__inner too.
   =========================================== */

:root {
	--content-width: 62.5rem; /* 1000px — framework default is 100rem */
	--wide-width: 75rem;      /* 1200px */
}


/* ===========================================
   CSS CUSTOM PROPERTY BRIDGE
   Maps shorthand tokens to theme.json presets
   for compatibility with existing code.
   =========================================== */

:root {
	/* Colors — Brand */
	--color-primary: var(--wp--preset--color--primary);
	--color-primary-dark: var(--wp--preset--color--primary-dark);
	--color-secondary: var(--wp--preset--color--secondary);
	--color-base: var(--wp--preset--color--base);
	--color-accent: var(--wp--preset--color--accent);
	--color-light: var(--wp--preset--color--light);
	--color-neutral: var(--wp--preset--color--neutral);
	--color-white: var(--wp--preset--color--white);
	--color-black: var(--wp--preset--color--black);

	/* Colors — Semantic */
	--color-success: var(--wp--preset--color--success);
	--color-warning: var(--wp--preset--color--warning);
	--color-error: var(--wp--preset--color--error);
	--color-info: var(--wp--preset--color--info);

	/* Colors — Surfaces & Borders */
	--color-surface: var(--wp--preset--color--surface);
	--color-surface-alt: var(--wp--preset--color--light);
	--color-border: var(--wp--preset--color--border);

	/* Colors — Text Hierarchy */
	--color-text-primary: var(--wp--preset--color--body-text);
	--color-text-secondary: var(--wp--preset--color--text-muted);
	--color-text-disabled: var(--wp--preset--color--neutral);
	--color-text-inverse: var(--wp--preset--color--white);

	/* Colors — WooCommerce */
	--color-sale-badge: var(--wp--preset--color--primary);
	--color-sale-badge-text: #ffffff;
	--color-price: var(--wp--preset--color--base);
	--color-price-sale: var(--wp--preset--color--primary);
	--color-price-regular: var(--wp--preset--color--accent);
	--color-stock-in: var(--wp--preset--color--success);
	--color-stock-out: var(--wp--preset--color--error);
	--color-stock-backorder: var(--wp--preset--color--warning);
	--color-star-filled: #ffb400;
	--color-star-empty: var(--wp--preset--color--neutral);
	--color-notice-info-bg: #e3f2fd;
	--color-notice-info-border: var(--wp--preset--color--info);
	--color-notice-success-bg: #e8f5e9;
	--color-notice-success-border: var(--wp--preset--color--success);
	--color-notice-error-bg: #ffebee;
	--color-notice-error-border: var(--wp--preset--color--error);

	/* Typography */
	--font-primary: var(--wp--preset--font-family--body);
	--font-system: var(--wp--preset--font-family--system-font);
	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--leading-tight: 1.2;
	--leading-normal: 1.5;
	--leading-relaxed: 1.75;

	/* Spacing */
	--spacing-xs: var(--wp--preset--spacing--20);
	--spacing-sm: var(--wp--preset--spacing--30);
	--spacing-md: var(--wp--preset--spacing--40);
	--spacing-lg: var(--wp--preset--spacing--50);
	--spacing-xl: var(--wp--preset--spacing--60);
	--spacing-2xl: var(--wp--preset--spacing--70);
	--spacing-3xl: var(--wp--preset--spacing--80);

	/* Border Radius — legacy names for the framework radius scale */
	--radius-sm: var(--radius-s);
	--radius-md: var(--radius-m);
	--radius-lg: var(--radius-l);
	--radius-full: 9999px;

	/* Shadows — md/xl come from the framework */
	--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
	--shadow-md: var(--box-shadow-m);
	--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
	--shadow-xl: var(--box-shadow-xl);

	/* Transitions */
	--transition-fast: 150ms ease;
	--transition-base: var(--transition-duration) var(--transition-timing);
	--transition-slow: 350ms ease;

	/* Z-Index Scale */
	--z-dropdown: 100;
	--z-sticky: 200;
	--z-overlay: 300;
	--z-modal: 400;
	--z-toast: 500;

	/* Layout: --content-width / --wide-width are set in SITE OVERRIDES above */

	/* Buttons */
	--button-sm-font-size: 0.875rem;
	--button-sm-padding: 8px 14px;
	--button-sm-min-height: 36px;
	--button-base-font-size: 1rem;
	--button-base-padding: 10px 20px;
	--button-base-min-height: 44px;
	--button-lg-font-size: 1.125rem;
	--button-lg-padding: 14px 28px;
	--button-lg-min-height: 52px;

	/* Form Inputs */
	--input-height: 44px;
	--input-padding: 10px 14px;
	--input-font-size: 1rem;
	--input-border-color: var(--color-border);
	--input-border-radius: var(--radius-sm);
	--input-focus-border-color: var(--color-primary);
	--input-focus-shadow: 0 0 0 3px rgba(230, 24, 56, 0.15);
	--input-bg: var(--color-white);
	--input-disabled-bg: var(--color-light);
}


/* ===========================================
   RT UTILITY FRAMEWORK
   The site's own rt- prefixed utility/component
   classes and their --rt-* semantic tokens.
   Tokens alias the framework scale (--space-*,
   --section-space-*) so build-script scale
   changes propagate automatically. Components
   use BEM (.rt-hero-alpha__content) and consume
   tokens, never raw values; a single instance
   re-tunes via an inline token override.
   theme.json exposes rt tokens to the editor UI
   as presets (e.g. spacingSizes "Group" ->
   --rt-group-padding).
   =========================================== */

:root {
	/* Vertical rhythm inside a content column (heading / text / buttons). */
	--rt-content-gap: var(--space-m);

	/* Gap between cards/columns in a grid or flex row. */
	--rt-grid-gap: var(--space-l);

	/* Space between stacked sub-sections inside one section. */
	--rt-section-gap: var(--section-space-s);

	/* Padding inside a grouped container (boxed groups, cards).
	   Promoted from Site Editor Additional CSS 2026-08-31: pads with the
	   XXL spacing preset (--space-xxl). */
	--rt-group-padding: var(--wp--preset--spacing--xxl);
}

.rt-stack {
	display: flex;
	flex-direction: column;
	row-gap: var(--rt-content-gap);
}

.rt-center-content {
	justify-content: center;
}

.rt-group {
	padding: var(--rt-group-padding);
}

.rt-hero-alpha__content {
	display: flex;
	flex-direction: column;
	row-gap: var(--rt-content-gap);
	justify-content: center;
}

/* Gap utilities — for flex/grid groups (Rows, Stacks, Grids).
   Suffix = the framework spacing token, 1:1 (gap-m = --space-m), so no
   mapping to remember. !important beats the gap WP's layout-support
   styles set per block. */
.gap-0   { gap: 0 !important; }
.gap-xs  { gap: var(--space-xs) !important; }
.gap-s   { gap: var(--space-s) !important; }
.gap-m   { gap: var(--space-m) !important; }
.gap-l   { gap: var(--space-l) !important; }
.gap-xl  { gap: var(--space-xl) !important; }
.gap-xxl { gap: var(--space-xxl) !important; }

/* Stack utilities — for flow/constrained groups (spacing between children) */
.stack-0   > * + * { margin-block-start: 0 !important; }
.stack-xs  > * + * { margin-block-start: var(--space-xs) !important; }
.stack-s   > * + * { margin-block-start: var(--space-s) !important; }
.stack-m   > * + * { margin-block-start: var(--space-m) !important; }
.stack-l   > * + * { margin-block-start: var(--space-l) !important; }
.stack-xl  > * + * { margin-block-start: var(--space-xl) !important; }
.stack-xxl > * + * { margin-block-start: var(--space-xxl) !important; }

/* Padding utilities — inside the group's edges */
.pad-0   { padding: 0 !important; }
.pad-xs  { padding: var(--space-xs) !important; }
.pad-s   { padding: var(--space-s) !important; }
.pad-m   { padding: var(--space-m) !important; }
.pad-l   { padding: var(--space-l) !important; }
.pad-xl  { padding: var(--space-xl) !important; }
.pad-xxl { padding: var(--space-xxl) !important; }

/* Section padding: generous block padding, tighter inline (old pad-lg). */
.pad-section { padding: var(--space-xl) var(--space-m) !important; }

/* One-off resets */
.mt-0 { margin-block-start: 0 !important; }
.mb-0 { margin-block-end: 0 !important; }


/* ===========================================
   BASE RESETS
   =========================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

img {
	max-width: 100%;
	height: auto;
}

/* Editor parity: framework.css zeroes p/h/list margins on the front end but
   deliberately skips the editor canvas. Mirror the reset here (this file is
   registered as an editor style) so the editor previews what ships. */
.editor-styles-wrapper :where(p, h1, h2, h3, h4, h5, h6, ul, ol, li) {
	margin-block: 0;
}


/* ===========================================
   CONTENT FLOW RHYTHM
   The framework reset zeroes p/heading/list
   margins everywhere. Block layouts space
   themselves (blockGap/spacers), but containers
   that render raw HTML — product descriptions,
   tab content, term descriptions, comments —
   lose their vertical rhythm. Restore it there
   using the framework's flow tokens.
   =========================================== */

:is(.woocommerce-product-details__short-description,
	.woocommerce-Tabs-panel,
	.wc-tab,
	.wp-block-rt-blocks-product-tabs,
	.wp-block-term-description,
	.comment-content,
	.wp-block-comment-content) :is(* + p, * + ul, * + ol, * + table, * + figure, * + blockquote) {
	margin-block-start: var(--flow-spacing, 1em);
}

:is(.woocommerce-product-details__short-description,
	.woocommerce-Tabs-panel,
	.wc-tab,
	.wp-block-rt-blocks-product-tabs,
	.wp-block-term-description,
	.comment-content,
	.wp-block-comment-content) :is(* + h2, * + h3, * + h4, * + h5, * + h6) {
	margin-block-start: var(--heading-spacing, 1.2em);
}

:is(.woocommerce-product-details__short-description,
	.woocommerce-Tabs-panel,
	.wc-tab,
	.wp-block-rt-blocks-product-tabs,
	.wp-block-term-description,
	.comment-content,
	.wp-block-comment-content) li + li {
	margin-block-start: var(--list-item-spacing, 0.5em);
}


/* ===========================================
   FORM INPUTS
   =========================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select {
	min-height: var(--input-height);
	padding: var(--input-padding);
	font-size: var(--input-font-size);
	font-family: inherit;
	border: 1px solid var(--input-border-color);
	border-radius: var(--input-border-radius);
	background-color: var(--input-bg);
	color: var(--color-text-primary);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--input-focus-border-color);
	box-shadow: var(--input-focus-shadow);
	outline: none;
}

input:disabled,
textarea:disabled,
select:disabled {
	background-color: var(--input-disabled-bg);
	cursor: not-allowed;
}


/* ===========================================
   UTILITY CLASSES
   =========================================== */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* ===========================================
   NAVIGATION
   =========================================== */

.wp-block-navigation .wp-block-navigation-item__label {
	color: #757575;
	transition: color var(--transition-fast);
}

.wp-block-navigation .wp-block-navigation-item__label:hover {
	color: #E61838;
}

.screen-reader-text:focus {
	background-color: var(--color-light);
	clip: auto !important;
	clip-path: none;
	color: var(--color-base);
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: var(--z-toast);
}


/* ===========================================================
   CHILD THEME CUSTOM CSS
   Carried over verbatim from Airtight Child Theme v0.78.0
   =========================================================== */
/*hide menu contacts for desktop*/
@media screen and (min-width:1025px){
	.resposive-only{display:none!important;}
}

@media screen and (max-width:1024px){

    .airtight-menu-mega-menu-item:nth-last-child(4),
    .wp-block-airtight-menu-mega-menu-item:nth-last-child(4) {
      margin-bottom:25px!important;
    }

    .airtight-menu-mega-menu-item:nth-last-child(-n+3), 
    .wp-block-airtight-menu-mega-menu-item:nth-last-child(-n+3){
        border-bottom:none!important;
    }
    
        .airtight-menu-mega-menu-item:nth-last-child(-n+3) a, 
        .wp-block-airtight-menu-mega-menu-item:nth-last-child(-n+3) a{
            font-weight:400!important;
            padding:0!important;
            min-height: 40px !important;
            font-size: .95em;
    }
}

/*hide toggle menu label*/
.airtight-menu-mobile-toggle-label{display:none!important;}

/*mobile header re-arrange*/
@media screen and (max-width:1024px){
    header.wp-block-template-part .header-logo{	order:2; }

    header.wp-block-template-part .airtight-menu--mobile{
        order:1;
        width:auto;
        margin-right: 20px;
    }

    header.wp-block-template-part .header-icon-links{order:3;}
}

.airtight-menu--mobile .airtight-menu-mega-menu-item>a.airtight-menu-mega-menu-link, .airtight-menu--mobile .wp-block-airtight-menu-mega-menu-item>a.airtight-menu-mega-menu-link{display: flex !important;}
.wp-block-query-pagination-next{
margin-left:20px !important
}
.wp-block-query-pagination-previous{
margin-right:20px !important
}
.rt-spec-footnote {
  font-size: var(--wp--preset--font-size--x-small);
  color: var(--wp--preset--color--neutral-400, #555);
  margin-top: var(--wp--preset--spacing--20);
}


/* Remove grey striped background from WooCommerce product variations table */
.variations tbody tr:nth-child(2n),
.variations tbody tr:nth-child(even) {
    background-color: transparent !important;
}

/* Vertically align View Product buttons across all product cards */
.wc-block-product-template > li.wc-block-product {
    display: flex !important;
    flex-direction: column !important;
}

.wc-block-product-template > li.wc-block-product .wp-block-woocommerce-product-button {
    margin-top: auto !important;
}

/* Product-grid buttons take their size from the font-size token set on the
   Product Button block (has-*-font-size, e.g. small = --text-s, the framework's
   card-button standard) instead of the global elements.button "medium".
   Inheritance is what makes that token reach the anchor — the global styles
   rule on .wp-element-button would otherwise override it. The catalog-rules
   quote/reseller buttons match too: catalog-visibility.js injects them with
   the same wp-block-button__link class as the native buttons they replace. */
.wc-block-product-template > li.wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link {
    font-size: inherit !important;
}
.blog-card { height: 100%; }
.blog-card > .wp-block-group.is-vertical.is-layout-flex {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.blog-card > .wp-block-group.is-vertical.is-layout-flex > .wp-block-read-more {
  margin-top: auto;
  align-self: flex-start;
}

/* ─── Mobile menu search ───────────────────────────────────────
   The airtight-menu mobile drawer IS ul.airtight-menu-mega-menu-list
   (position:fixed, 80%/380px, translateX). The search form cannot live
   inside it, so it is pinned as its own fixed element on the same rail
   and slides with the same transform. Requires the form block to be
   placed AFTER the Retro Mega Menu block (the `~` combinator).
   ───────────────────────────────────────────────────────────── */

@media screen and (max-width: 1024px) {

	:root {
		--rt-mobile-header-h: 69px;
		--rt-mobile-search-h: 64px;
	}

	/* Constrain the drawer so overflow-y:auto actually scrolls.
	   Specificity (0,3,0) beats the plugin's (0,2,0) — no !important. */
	.airtight-menu-mega-menu-nav.airtight-menu--mobile .airtight-menu-mega-menu-list {
		top: var(--rt-mobile-header-h);
		height: calc(100dvh - var(--rt-mobile-header-h));
		padding-top: var(--rt-mobile-search-h);
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}

	/* Search bar on the same rail as the drawer, one layer above it. */
	.rt-mobile-menu-search {
		position: fixed;
		top: var(--rt-mobile-header-h);
		left: 0;
		z-index: 101;
		box-sizing: border-box;
		width: 80%;
		max-width: 380px;
		margin: 0;
		padding: 12px 20px;
		background: #fff;
		transform: translateX(-100%);
		transition: transform .3s;
	}

	.airtight-menu--mobile-open ~ .rt-mobile-menu-search {
		transform: translateX(0);
	}

	.rt-mobile-menu-search .searchwp-form,
	.rt-mobile-menu-search .searchwp-form-input-container,
	.rt-mobile-menu-search .swp-input {
		width: 100%;
	}
}

@media screen and (min-width: 1025px) {
	.rt-mobile-menu-search { display: none; }
}