/*
Theme Name: TJT-ELEC
Theme URI: https://tjt-elec.com
Description: TJT-ELEC child theme of Twenty Twenty-Five. Carries the brand design tokens (theme.json) and small structural CSS. Templates and template parts live in the Site Editor so the owner can edit them visually.
Author: TJT-ELEC
Template: twentytwentyfive
Version: 1.0.9
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tjt-elec
*/

/* ------------------------------------------------------------------
   1. Numeric alignment — spec tables and any tabular data
   ------------------------------------------------------------------ */
.wp-block-table table,
.wp-block-table th,
.wp-block-table td,
.tjt-numeric,
.wp-block-post-date,
.wp-block-post-terms {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table th {
	font-size: 0.6875rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
	border-bottom: 1px solid var(--wp--preset--color--line);
	font-weight: 600;
}

.wp-block-table td {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.wp-block-table td:first-child {
	font-weight: 600;
}

/* ------------------------------------------------------------------
   2. Focus visibility — one ring for every interactive element
   ------------------------------------------------------------------ */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid color-mix(in srgb, var(--wp--preset--color--primary) 30%, transparent);
	outline-offset: 2px;
	border-radius: 6px;
}

/* ------------------------------------------------------------------
   3. Eyebrow / overline label
   ------------------------------------------------------------------ */
.tjt-eyebrow {
	font-size: 0.75rem;
	line-height: 1.2;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}

/* ------------------------------------------------------------------
   4. Accent CTA button style (the single emphasis colour on the site)
   ------------------------------------------------------------------ */
.wp-block-button.is-style-tjt-accent .wp-block-button__link {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}

.wp-block-button.is-style-tjt-accent .wp-block-button__link:hover,
.wp-block-button.is-style-tjt-accent .wp-block-button__link:focus {
	background-color: #d98a0b;
	color: var(--wp--preset--color--contrast);
}

/* Outline button style */
.wp-block-button.is-style-tjt-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--primary);
	border: 1.5px solid var(--wp--preset--color--primary);
}

.wp-block-button.is-style-tjt-outline .wp-block-button__link:hover,
.wp-block-button.is-style-tjt-outline .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* ------------------------------------------------------------------
   5. Card surface used by product / case grids
   ------------------------------------------------------------------ */
.tjt-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	overflow: hidden;
	block-size: 100%;
}

.tjt-card:hover {
	box-shadow: 0 18px 40px rgba(10, 16, 32, 0.12);
}

/* ------------------------------------------------------------------
   6. Long-form readability
   ------------------------------------------------------------------ */
.wp-block-post-content > p,
.entry-content > p {
	max-width: 72ch;
}

/* ------------------------------------------------------------------
   7. Dark footer — deterministic contrast for links inside a dark surface
      (a global `elements.link` colour would otherwise win over the block
      level value, leaving navy text on a navy background)
   ------------------------------------------------------------------ */
.tjt-footer a {
	color: var(--wp--preset--color--primary-light);
	text-decoration: none;
}

.tjt-footer a:hover,
.tjt-footer a:focus-visible {
	color: #ffffff;
	text-decoration: underline;
}

.tjt-footer .wp-block-list {
	padding-inline-start: 0;
	list-style: none;
}

.tjt-footer .wp-block-list li::before {
	content: none;
}

/* ------------------------------------------------------------------
   8. Outline button on dark surfaces.
      The outline variant is brand-blue on light backgrounds; inside any
      section that carries the dark brand background it must flip to white
      or it disappears. Keyed off the preset class WordPress already emits,
      so no page markup has to know about it.
   ------------------------------------------------------------------ */
.has-primary-dark-background-color .wp-block-button.is-style-tjt-outline .wp-block-button__link,
.has-primary-background-color .wp-block-button.is-style-tjt-outline .wp-block-button__link {
	border-color: rgba(255, 255, 255, 0.55);
	color: #ffffff;
}

.has-primary-dark-background-color .wp-block-button.is-style-tjt-outline .wp-block-button__link:hover,
.has-primary-dark-background-color .wp-block-button.is-style-tjt-outline .wp-block-button__link:focus,
.has-primary-background-color .wp-block-button.is-style-tjt-outline .wp-block-button__link:hover,
.has-primary-background-color .wp-block-button.is-style-tjt-outline .wp-block-button__link:focus {
	background-color: #ffffff;
	border-color: #ffffff;
	color: var(--wp--preset--color--primary-dark);
}

/* ------------------------------------------------------------------
   9. Collapse the primary navigation to the hamburger one breakpoint
      earlier than WordPress' 600px default.
      With the brand logo at full size plus seven nav items plus the quote
      CTA, the row needs ~865px: between 600px and 1024px the items would
      otherwise either squeeze or push the header onto three lines.
      Additive only — it affects the 600-1024px band and nothing else, so
      desktop keeps the inline navigation and mobile is unchanged.
   ------------------------------------------------------------------ */
@media (min-width: 600px) and (max-width: 1023.98px) {
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

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

/* ------------------------------------------------------------------
   10. Legal-entity line under the logo.
      "Shenzhen Tengfei JiaPin Technology Co., LTD" needs ~249px; with the
      hamburger and the quote CTA that overflows a 390px viewport and pushes
      the header onto two rows. Hide it below 600px, where the row genuinely
      stops fitting — the full legal name remains in the footer at every
      breakpoint, so nothing is lost. Tablet and desktop keep it inline.
   ------------------------------------------------------------------ */
@media (max-width: 599.98px) {
	.tjt-brandline {
		display: none;
	}
}

/* ------------------------------------------------------------------
   11. Wide specification tables.
      The product spec table runs to eight columns (parameter x six
      interfaces + unit). Below ~900px it cannot fit, so the wrapper scrolls
      horizontally instead of squashing the cells or overflowing the page.
   ------------------------------------------------------------------ */
.tjt-table-scroll {
	overflow-x: auto;
	overscroll-behavior-x: contain;
}

.tjt-table-scroll .wp-block-table table {
	min-width: 860px;
}

.tjt-table-scroll .wp-block-table figcaption {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--text-muted);
}

/* ------------------------------------------------------------------
   12. Specification-table legibility.
      The header row was 11px in --text-muted, which is the least readable
      thing on a dense 8-column table. Darken it, size it up, and make the
      zebra rows explicit so the served CSS never depends on the core
      is-style-stripes rule being present.
   ------------------------------------------------------------------ */
.wp-block-table thead th {
	font-size: 0.75rem;
	color: var(--wp--preset--color--contrast);
	border-bottom: 2px solid var(--wp--preset--color--line);
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background-color: var(--wp--preset--color--muted);
}

.tjt-table-scroll .wp-block-table td,
.tjt-table-scroll .wp-block-table th {
	padding: 0.75rem 1rem 0.75rem 0;
}

/* Columns block: WordPress only emits the centring class when the attribute is
   set; pin the behaviour here so a re-save in the Site Editor cannot drop it. */
.wp-block-columns.are-vertically-aligned-center,
.wp-block-column.is-vertically-aligned-center {
	align-items: center;
	align-self: center;
}

/* 13. Distinct spec-table header band + aligned numeric columns */
.wp-block-table thead th {
	font-size: 0.75rem;
	color: var(--wp--preset--color--primary-dark);
	background-color: var(--wp--preset--color--primary-light);
	border-bottom: 2px solid var(--wp--preset--color--primary);
	vertical-align: middle;
}

.wp-block-table thead th:not(:first-child) {
	text-align: center;
}

.wp-block-table td.tjt-num {
	text-align: center;
}

.tjt-table-scroll .wp-block-table figcaption {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--text-muted);
	line-height: 1.6;
}

/* 14. Mobile affordance for the scrollable spec table.
   The wrapper clips correctly but macOS overlay scrollbars are invisible until
   you scroll, so nothing signals that columns 4-8 exist. Hint only where the
   table can actually overflow. */
@media (max-width: 899.98px) {
	.tjt-table-scroll {
		scrollbar-width: thin;
	}

	.tjt-table-scroll::after {
		content: "Swipe the table sideways to see all six interfaces";
		display: block;
		margin-top: 0.5rem;
		font-size: 0.8125rem;
		color: var(--wp--preset--color--text-muted);
	}
}