/*
Theme Name: Blocksy Child - Tehisarukas
Theme URI: https://tehisarukas.ee/
Description: Tehisarukas.ee premium editorial child theme based on Blocksy and Brandbook v2.0.
Author: Tehisarukas
Author URI: https://tehisarukas.ee/
Template: blocksy
Version: 2.2.0
Text Domain: blocksy-child
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ==========================================================================
   1. TEHISARUKAS BRANDBOOK v2.0 DESIGN TOKENS
   "Selgus üle müra" — Graphite, Titanium, Turquoise & Champagne
   ========================================================================== */
:root {
  /* Brand Core Palette */
  --ta-graphite: #0E1114;
  --ta-deep-graphite: #1A1D21;
  --ta-carbon: #25292E;
  --ta-titanium: #BFC2C7;
  --ta-mist-silver: #D6D9DC;
  --ta-quartz: #F4F1EA;
  --ta-turquoise: #00A1AC;
  --ta-deep-turquoise: #01838C;
  --ta-champagne: #C9B88F;

  /* Semantic Colors */
  --ta-positive: #72C9A7;
  --ta-caution: #D2B46F;
  --ta-critical: #D98585;
  --ta-info: #6FBBC2;

  /* System Mappings / Backwards-Compatibility */
  --ta-bg: var(--ta-graphite);
  --ta-surface: var(--ta-deep-graphite);
  --ta-surface-elevated: var(--ta-carbon);
  --ta-ink: var(--ta-quartz);
  --ta-text: var(--ta-mist-silver);
  --ta-secondary: var(--ta-titanium);
  --ta-accent: var(--ta-turquoise);
  --ta-link: var(--ta-turquoise);
  --ta-link-hover: var(--ta-deep-turquoise);
  --ta-border: #30363D;
  --ta-border-subtle: rgba(255, 255, 255, 0.08);
  --ta-border-strong: rgba(255, 255, 255, 0.16);
  --ta-success: var(--ta-positive);
  --ta-warning: var(--ta-caution);
  --ta-danger: var(--ta-critical);

  /* Typography */
  --ta-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --ta-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ta-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Layout & Sizing */
  --ta-container-max: 1320px;
  --ta-reading-width: 760px;
  --ta-radius-sm: 6px;
  --ta-radius-md: 10px;
  --ta-radius-lg: 16px;

  /* Spacing Scale */
  --ta-space-1: 4px;
  --ta-space-2: 8px;
  --ta-space-3: 12px;
  --ta-space-4: 16px;
  --ta-space-6: 24px;
  --ta-space-8: 32px;
  --ta-space-12: 48px;
  --ta-space-16: 64px;
  --ta-space-24: 96px;

  /* Motion: Signal, not spectacle */
  --ta-transition-micro: 140ms cubic-bezier(.22, .8, .2, 1);
  --ta-transition-state: 220ms cubic-bezier(.22, .8, .2, 1);
  --ta-transition-reveal: 420ms cubic-bezier(.22, .8, .2, 1);

  /* Blocksy Core Color Palette Bindings */
  --theme-palette-color-1: var(--ta-turquoise);       /* Primary Accent */
  --theme-palette-color-2: var(--ta-deep-turquoise);  /* Hover / Secondary Accent */
  --theme-palette-color-3: var(--ta-quartz);          /* Headings / Ink */
  --theme-palette-color-4: var(--ta-mist-silver);     /* Body Text */
  --theme-palette-color-5: var(--ta-titanium);        /* Muted / Secondary */
  --theme-palette-color-6: var(--ta-border);          /* Borders / Dividers */
  --theme-palette-color-7: var(--ta-deep-graphite);   /* Surfaces / Cards */
  --theme-palette-color-8: var(--ta-graphite);        /* Background */
  --theme-body-background-color: var(--ta-graphite);
}

/* ==========================================================================
   2. GLOBAL THEME FOUNDATION & ACCESSIBILITY
   ========================================================================== */
html,
body {
  background-color: var(--ta-graphite);
  color: var(--ta-mist-silver);
  font-family: var(--ta-font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

#main-container,
.site-main,
article,
.entry-content,
.ct-container,
.ct-container-full {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.entry-content {
  overflow-x: clip !important;
}

/* On mobile, strictly contain Gutenberg content blocks from blowing out the viewport */
@media (max-width: 767px) {
  #main-container,
  .site-main,
  article,
  .entry-content,
  .ct-container,
  .ct-container-full,
  .entry-content > *,
  :where(.is-layout-constrained) > :not(.alignleft):not(.alignright):not(.alignfull) {
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  figure.wp-block-table,
  .wp-block-table {
    display: block !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }
}

/* Accessible focus ring */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ta-turquoise) !important;
  outline-offset: 3px !important;
}

::selection {
  background-color: var(--ta-deep-turquoise);
  color: var(--ta-quartz);
}

/* Display & Heading Typography */
h1,
.entry-title,
.page-title {
  font-family: var(--ta-font-display);
  color: var(--ta-quartz);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

h2 {
  font-family: var(--ta-font-display);
  color: var(--ta-quartz);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

h3, h4, h5, h6 {
  font-family: var(--ta-font-body);
  color: var(--ta-quartz);
  font-weight: 700;
  letter-spacing: -0.01em;
}

a {
  color: var(--ta-turquoise);
  transition: color var(--ta-transition-micro);
}

a:hover {
  color: var(--ta-deep-turquoise);
}

/* ==========================================================================
   3. GLOBAL LAYOUT ARCHITECTURE & ELEMENTOR FULL-WIDTH CANVAS
   ========================================================================== */
#main-container {
  background-color: var(--ta-graphite);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#main-container > main,
.site-main {
  background-color: var(--ta-graphite);
  flex: 1 0 auto;
}

/* Ensure Elementor full-width pages stretch seamlessly to 100% width */
.home #main-container,
.home #main-container > main,
.home .site-main,
.home article,
.home .entry-content,
.elementor-page #main-container,
.elementor-page #main-container > main,
.elementor-page .site-main,
.elementor-page article,
.elementor-page .entry-content,
.ta-home-layout #main-container,
.ta-home-layout #main-container > main,
.ta-home-layout .site-main,
.ta-home-layout article,
.ta-home-layout .entry-content {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.home .ct-container,
.home .ct-container-full,
.elementor-page .ct-container,
.elementor-page .ct-container-full,
.ta-home-layout .ct-container,
.ta-home-layout .ct-container-full {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  display: block !important;
}

/* Eliminate default Blocksy page title / header banner on homepage & Elementor pages */
.home .entry-header,
.home .page-title,
.home .hero-section,
.elementor-page .entry-header,
.elementor-page .page-title,
.elementor-page .hero-section,
.ta-home-layout .entry-header,
.ta-home-layout .page-title,
.ta-home-layout .hero-section {
  display: none !important;
}

/* Eliminate vertical padding on homepage & Elementor pages */
.home [data-vertical-spacing],
.elementor-page [data-vertical-spacing],
.ta-home-layout [data-vertical-spacing] {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Completely remove sidebar column footprint */
.home .ct-sidebar,
.elementor-page .ct-sidebar,
.ta-home-layout .ct-sidebar,
.single-post .ct-sidebar {
  display: none !important;
}

[data-sidebar="none"] {
  grid-template-columns: 100% !important;
}

/* ==========================================================================
   4. BLOCKSY HEADER & NAVIGATION ARCHITECTURE
   ========================================================================== */
header[data-device="desktop"],
header[data-device="mobile"],
.ct-header,
[data-row="middle"],
[data-row="top"],
[data-row="bottom"] {
  background-color: var(--ta-graphite) !important;
  border-bottom: 1px solid var(--ta-border) !important;
}

.ct-header .ct-container {
  max-width: var(--ta-container-max) !important;
  padding-inline: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 72px !important;
}

/* Site Branding & Authentic Optimized Logo */
.site-branding {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.site-branding .site-logo-container,
.site-branding .custom-logo-link {
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
}

.site-branding img,
.site-branding .site-logo-container img,
.site-branding .custom-logo-link img,
.site-branding .default-logo,
.site-branding .custom-logo,
.ct-header .custom-logo {
  display: block !important;
  height: 48px !important;
  width: auto !important;
  max-height: 48px !important;
  max-width: 240px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 12px rgba(0, 161, 172, 0.3));
  transition: transform var(--ta-transition-micro), filter var(--ta-transition-micro) !important;
}

.site-branding .site-logo-container:hover img,
.site-branding .custom-logo-link:hover img {
  filter: drop-shadow(0 0 18px rgba(0, 161, 172, 0.55));
  transform: scale(1.02);
}

/* Hide redundant text site title so only the authentic graphical logo is visible */
.site-branding .site-title,
.site-branding .site-description {
  display: none !important;
}

/* Main Navigation Menu (Desktop Only) */
.ct-header [data-device="desktop"] [data-id*="menu"] ul,
.header-menu-1 ul {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.ct-header [data-device="desktop"] [data-id*="menu"] a,
.header-menu-1 a {
  color: var(--ta-mist-silver) !important;
  font-family: var(--ta-font-body) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  padding: 8px 14px !important;
  border-radius: var(--ta-radius-sm) !important;
  text-decoration: none !important;
  transition: color var(--ta-transition-micro), background-color var(--ta-transition-micro) !important;
}

.ct-header [data-device="desktop"] [data-id*="menu"] a:hover,
.header-menu-1 a:hover {
  color: var(--ta-turquoise) !important;
  background-color: rgba(255, 255, 255, 0.04) !important;
}

.ct-header [data-device="desktop"] [data-id*="menu"] .current-menu-item > a,
.ct-header [data-device="desktop"] [data-id*="menu"] .current-menu-ancestor > a,
.header-menu-1 .current-menu-item > a,
.header-menu-1 .current-menu-ancestor > a {
  color: var(--ta-turquoise) !important;
  font-weight: 600 !important;
  background-color: rgba(0, 161, 172, 0.08) !important;
}

/* Dropdown sub-menus (Desktop) */
.ct-header [data-device="desktop"] [data-id*="menu"] .sub-menu,
.header-menu-1 .sub-menu {
  background-color: var(--ta-deep-graphite) !important;
  border: 1px solid var(--ta-border) !important;
  border-radius: var(--ta-radius-md) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6) !important;
  padding: 8px !important;
  min-width: 200px !important;
}

.ct-header [data-device="desktop"] [data-id*="menu"] .sub-menu li a,
.header-menu-1 .sub-menu li a {
  color: var(--ta-mist-silver) !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  border-radius: var(--ta-radius-sm) !important;
  display: block !important;
}

.ct-header [data-device="desktop"] [data-id*="menu"] .sub-menu li a:hover,
.ct-header [data-device="desktop"] [data-id*="menu"] .sub-menu .current-menu-item > a,
.header-menu-1 .sub-menu li a:hover,
.header-menu-1 .sub-menu .current-menu-item > a {
  background-color: var(--ta-carbon) !important;
  color: var(--ta-turquoise) !important;
}

/* Search Icon & Modal */
.ct-header [data-id="search"] .ct-icon,
.ct-header-search-icon,
.ta-mobile-search-toggle .ct-icon {
  color: var(--ta-titanium) !important;
  transition: color var(--ta-transition-micro) !important;
}

.ct-header [data-id="search"]:hover .ct-icon,
.ta-mobile-search-toggle:hover .ct-icon {
  color: var(--ta-turquoise) !important;
}

.ct-header-search.ta-mobile-search-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin-right: 4px !important;
}

#search-modal,
.ct-search-modal {
  background-color: rgba(14, 17, 20, 0.96) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

#search-modal form,
.ct-search-modal form {
  border: 1px solid var(--ta-border) !important;
  border-radius: var(--ta-radius-md) !important;
  background-color: var(--ta-deep-graphite) !important;
  padding: 6px !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.7) !important;
}

#search-modal input[type="search"],
.ct-search-modal input[type="search"] {
  background-color: transparent !important;
  border: none !important;
  color: var(--ta-quartz) !important;
  font-family: var(--ta-font-body) !important;
  font-size: 18px !important;
  padding: 12px 18px !important;
  outline: none !important;
}

#search-modal input[type="search"]::placeholder,
.ct-search-modal input[type="search"]::placeholder {
  color: var(--ta-titanium) !important;
}

/* Blocksy Live Search Results Container */
.ct-search-results {
  background-color: var(--ta-deep-graphite) !important;
  border: 1px solid var(--ta-border) !important;
  border-radius: var(--ta-radius-md) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6) !important;
  margin-top: 10px !important;
  overflow: hidden !important;
}

.ct-search-results .ct-search-item {
  border-bottom: 1px solid var(--ta-border-subtle) !important;
  padding: 12px 16px !important;
  transition: background-color var(--ta-transition-micro) !important;
}

.ct-search-results .ct-search-item:hover {
  background-color: var(--ta-carbon) !important;
}

.ct-search-results .ct-search-item a {
  color: var(--ta-quartz) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

.ct-search-results .ct-search-item:hover a {
  color: var(--ta-turquoise) !important;
}

/* Mobile Menu / Drawer (#offcanvas) */
#offcanvas {
  background-color: var(--ta-deep-graphite) !important;
  border-left: 1px solid var(--ta-border) !important;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.8) !important;
}

#offcanvas .ct-panel-inner {
  padding: 24px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

#offcanvas .ct-panel-actions {
  display: flex !important;
  justify-content: flex-end !important;
  margin-bottom: 16px !important;
  width: 100% !important;
}

#offcanvas .ct-toggle-close {
  color: var(--ta-titanium) !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--ta-border) !important;
  border-radius: var(--ta-radius-sm) !important;
  width: 38px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all var(--ta-transition-micro) !important;
}

#offcanvas .ct-toggle-close:hover {
  color: var(--ta-quartz) !important;
  border-color: var(--ta-turquoise) !important;
  background-color: rgba(0, 161, 172, 0.12) !important;
}

/* Embedded Search in Mobile Drawer */
.ta-drawer-search-item {
  width: 100% !important;
  list-style: none !important;
  margin: 0 0 18px 0 !important;
  padding: 0 !important;
}

.ta-drawer-search-form {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ta-drawer-search-inner {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  background-color: var(--ta-carbon) !important;
  border: 1px solid var(--ta-border) !important;
  border-radius: var(--ta-radius-md) !important;
  transition: border-color var(--ta-transition-micro), box-shadow var(--ta-transition-micro) !important;
  padding: 2px 4px !important;
}

.ta-drawer-search-inner:focus-within {
  border-color: var(--ta-turquoise) !important;
  box-shadow: 0 0 0 2px rgba(0, 161, 172, 0.25) !important;
}

.ta-drawer-search-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-left: 12px !important;
  padding-right: 6px !important;
  color: var(--ta-titanium) !important;
}

.ta-drawer-search-input {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  background: transparent !important;
  border: none !important;
  color: var(--ta-quartz) !important;
  font-family: var(--ta-font-body) !important;
  font-size: 15px !important;
  padding: 10px 8px !important;
  outline: none !important;
}

.ta-drawer-search-input::placeholder {
  color: var(--ta-titanium) !important;
}

.ta-drawer-search-submit-btn {
  background-color: transparent !important;
  color: var(--ta-turquoise) !important;
  border: none !important;
  font-family: var(--ta-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 6px 12px !important;
  cursor: pointer !important;
  border-radius: var(--ta-radius-sm) !important;
  transition: all var(--ta-transition-micro) !important;
}

.ta-drawer-search-submit-btn:hover {
  background-color: var(--ta-turquoise) !important;
  color: var(--ta-graphite) !important;
}

/* Offcanvas Mobile Navigation Menu (Vertical Column Stack) */
#offcanvas .mobile-menu,
#offcanvas [data-id="mobile-menu"],
#offcanvas .ct-panel-content-inner {
  width: 100% !important;
}

#offcanvas .mobile-menu ul,
#offcanvas [data-id="mobile-menu"] ul {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  overflow: visible !important;
}

#offcanvas .mobile-menu li,
#offcanvas [data-id="mobile-menu"] li {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

#offcanvas .mobile-menu li > a,
#offcanvas [data-id="mobile-menu"] li > a,
#offcanvas .mobile-menu .ct-menu-link,
#offcanvas .ct-header-mobile-menu a {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  padding: 14px 18px !important;
  color: var(--ta-quartz) !important;
  font-family: var(--ta-font-body) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  border-radius: var(--ta-radius-sm) !important;
  background-color: transparent !important;
  border: 1px solid transparent !important;
  border-bottom: 1px solid var(--ta-border-subtle) !important;
  text-decoration: none !important;
  transition: all var(--ta-transition-micro) !important;
  box-sizing: border-box !important;
}

#offcanvas .mobile-menu li > a:hover,
#offcanvas [data-id="mobile-menu"] li > a:hover,
#offcanvas .mobile-menu a:hover,
#offcanvas .ct-header-mobile-menu a:hover {
  color: var(--ta-turquoise) !important;
  background-color: var(--ta-carbon) !important;
  border-color: var(--ta-border) !important;
  padding-left: 22px !important;
}

#offcanvas .mobile-menu li.current-menu-item > a,
#offcanvas [data-id="mobile-menu"] li.current-menu-item > a,
#offcanvas .ct-header-mobile-menu .current-menu-item > a {
  color: var(--ta-turquoise) !important;
  background-color: rgba(0, 161, 172, 0.1) !important;
  border-color: rgba(0, 161, 172, 0.3) !important;
  font-weight: 700 !important;
}

/* Header buttons & CTA */
.ct-header .ct-button,
.ct-button.btn-primary {
  background-color: transparent;
  color: var(--ta-turquoise);
  border: 1px solid var(--ta-turquoise);
  border-radius: var(--ta-radius-sm);
  padding: 8px 18px;
  font-weight: 600;
  font-size: 14px;
  transition: all var(--ta-transition-micro);
}

.ct-header .ct-button:hover,
.ct-button.btn-primary:hover {
  background-color: var(--ta-turquoise);
  color: var(--ta-graphite);
}

/* Champagne special badge / pill (restrained use) */
.ta-badge-champagne {
  background-color: rgba(201, 184, 143, 0.12);
  color: var(--ta-champagne);
  border: 1px solid rgba(201, 184, 143, 0.35);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ==========================================================================
   5. SINGLE POST EDITORIAL SYSTEM (760px READING MEASURE)
   ========================================================================== */
.single-post #main-container,
.single-post .site-main {
  background-color: var(--ta-graphite);
}

.single-post .ct-container,
.single-post .ct-container-narrow {
  max-width: var(--ta-reading-width) !important;
  width: 100% !important;
  margin-inline: auto !important;
  padding-inline: 20px !important;
}

/* Post Hero & Header */
.single-post .hero-section,
.single-post .entry-header {
  max-width: var(--ta-reading-width);
  margin: var(--ta-space-12) auto var(--ta-space-6) auto;
  text-align: left;
}

.single-post .entry-title,
.single-post .hero-section .page-title {
  font-family: var(--ta-font-display) !important;
  color: var(--ta-quartz) !important;
  font-weight: 700 !important;
  font-size: clamp(32px, 4.5vw, 48px) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.015em !important;
  margin-top: var(--ta-space-3) !important;
  margin-bottom: var(--ta-space-6) !important;
}

/* Post meta (author, date, reading time) */
.single-post .entry-meta,
.single-post .hero-section .entry-meta {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  color: var(--ta-titanium) !important;
  font-family: var(--ta-font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.single-post .entry-meta a {
  color: var(--ta-titanium) !important;
  text-decoration: none !important;
}

.single-post .entry-meta a:hover {
  color: var(--ta-turquoise) !important;
}

.single-post .entry-meta .ct-meta-element {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Featured Image on Single Post */
.single-post .ct-featured-image {
  max-width: 980px !important;
  width: 100% !important;
  margin: var(--ta-space-8) auto !important;
  border: 1px solid var(--ta-border) !important;
  border-radius: var(--ta-radius-md) !important;
  overflow: hidden !important;
}

.single-post .ct-featured-image img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* Reading content measure */
.single-post .entry-content {
  max-width: var(--ta-reading-width) !important;
  margin-inline: auto !important;
  font-size: 19px !important;
  line-height: 1.72 !important;
  color: var(--ta-mist-silver) !important;
}

/* Post Author Box */
.ct-author-box {
  background-color: var(--ta-deep-graphite) !important;
  border: 1px solid var(--ta-border) !important;
  border-radius: var(--ta-radius-md) !important;
  padding: var(--ta-space-6) !important;
  margin: var(--ta-space-12) auto !important;
  max-width: var(--ta-reading-width) !important;
}

.ct-author-box .ct-author-name {
  font-family: var(--ta-font-display) !important;
  color: var(--ta-quartz) !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  margin-bottom: var(--ta-space-2) !important;
}

.ct-author-box .ct-author-description {
  color: var(--ta-titanium) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

/* Post Navigation (Prev / Next) */
.ct-post-nav {
  max-width: var(--ta-reading-width) !important;
  margin: var(--ta-space-8) auto !important;
  border-top: 1px solid var(--ta-border) !important;
  padding-top: var(--ta-space-6) !important;
}

.ct-post-nav a {
  color: var(--ta-mist-silver) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.ct-post-nav a:hover {
  color: var(--ta-turquoise) !important;
}

/* Related Posts */
.ct-related-posts {
  max-width: 980px !important;
  margin: var(--ta-space-16) auto var(--ta-space-8) auto !important;
}

.ct-related-posts .ct-block-title {
  font-family: var(--ta-font-display) !important;
  color: var(--ta-quartz) !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  margin-bottom: var(--ta-space-6) !important;
}

.ct-related-posts-items {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: var(--ta-space-6) !important;
}

.ct-related-posts article {
  background-color: var(--ta-deep-graphite) !important;
  border: 1px solid var(--ta-border) !important;
  border-radius: var(--ta-radius-md) !important;
  overflow: hidden !important;
  transition: border-color var(--ta-transition-state), transform var(--ta-transition-state) !important;
}

.ct-related-posts article:hover {
  border-color: var(--ta-turquoise) !important;
  transform: translateY(-2px) !important;
}

/* Comments Section */
.ct-comments {
  max-width: var(--ta-reading-width) !important;
  margin: var(--ta-space-12) auto !important;
}

.ct-comments .comments-title {
  font-family: var(--ta-font-display) !important;
  color: var(--ta-quartz) !important;
  font-size: 26px !important;
  margin-bottom: var(--ta-space-6) !important;
}

.ct-comments textarea,
.ct-comments input[type="text"],
.ct-comments input[type="email"],
.ct-comments input[type="url"] {
  background-color: var(--ta-carbon) !important;
  border: 1px solid var(--ta-border) !important;
  color: var(--ta-quartz) !important;
  border-radius: var(--ta-radius-sm) !important;
  padding: 12px 16px !important;
}

.ct-comments .submit {
  background-color: var(--ta-turquoise) !important;
  color: var(--ta-graphite) !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: var(--ta-radius-sm) !important;
  padding: 12px 28px !important;
  cursor: pointer !important;
  transition: background-color var(--ta-transition-micro) !important;
}

.ct-comments .submit:hover {
  background-color: var(--ta-deep-turquoise) !important;
}

/* ==========================================================================
   6. ARCHIVE & CATEGORY PAGES
   ========================================================================== */
.ct-archive .ct-container,
.archive .ct-container,
.blog .ct-container,
.search .ct-container {
  max-width: 1240px !important;
  padding-inline: 24px !important;
  margin-inline: auto !important;
}

.ct-archive .page-title,
.archive .page-title {
  font-family: var(--ta-font-display) !important;
  color: var(--ta-quartz) !important;
  font-size: clamp(32px, 4vw, 44px) !important;
  text-align: center !important;
  margin: var(--ta-space-12) 0 var(--ta-space-8) 0 !important;
}

.entries {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important;
  gap: var(--ta-space-8) !important;
}

.entries article,
.entry-card,
article.post,
.post-item,
[class*="post-card"],
[class*="article-card"],
.blog-post-item {
  background-color: var(--ta-deep-graphite) !important;
  border: 1px solid rgba(100, 200, 255, 0.3) !important;
  border-radius: var(--ta-radius-md) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow:
    0 0 20px rgba(100, 200, 255, 0.35),
    0 0 40px rgba(100, 200, 255, 0.18),
    0 0 60px rgba(100, 200, 255, 0.08),
    inset -2px -2px 10px rgba(0, 0, 0, 0.3),
    inset 2px 2px 10px rgba(100, 200, 255, 0.15) !important;
  transition: box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease !important;
}

.entries article:hover,
.entry-card:hover,
article.post:hover,
.post-item:hover,
[class*="post-card"]:hover,
[class*="article-card"]:hover,
.blog-post-item:hover {
  border-color: rgba(100, 200, 255, 0.55) !important;
  transform: translateY(-4px) !important;
  box-shadow:
    0 0 30px rgba(100, 200, 255, 0.55),
    0 0 60px rgba(100, 200, 255, 0.35),
    0 0 90px rgba(100, 200, 255, 0.18),
    inset -2px -2px 15px rgba(0, 0, 0, 0.4),
    inset 2px 2px 15px rgba(100, 200, 255, 0.25) !important;
}

.entries article .entry-title {
  font-family: var(--ta-font-display) !important;
  font-size: 21px !important;
  line-height: 1.3 !important;
  margin: var(--ta-space-3) 0 !important;
}

.entries article .entry-title a {
  color: var(--ta-quartz) !important;
  text-decoration: none !important;
}

.entries article .entry-title a:hover {
  color: var(--ta-turquoise) !important;
}

.entries article .entry-excerpt {
  color: var(--ta-titanium) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

.entries article .entry-meta {
  color: var(--ta-titanium) !important;
  font-size: 13px !important;
  margin-top: auto !important;
}

/* Pagination */
.ct-pagination {
  margin: var(--ta-space-12) 0 !important;
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
}

.ct-pagination a,
.ct-pagination span {
  background-color: var(--ta-carbon) !important;
  border: 1px solid var(--ta-border) !important;
  color: var(--ta-mist-silver) !important;
  border-radius: var(--ta-radius-sm) !important;
  padding: 8px 16px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.ct-pagination .current {
  background-color: var(--ta-turquoise) !important;
  color: var(--ta-graphite) !important;
  border-color: var(--ta-turquoise) !important;
}

/* ==========================================================================
   7. BLOCKSY FOOTER SYSTEM
   ========================================================================== */
footer.ct-footer,
.ct-footer {
  background-color: var(--ta-graphite) !important;
  border-top: 1px solid var(--ta-border) !important;
  padding: var(--ta-space-12) 0 var(--ta-space-8) 0 !important;
  color: var(--ta-titanium) !important;
}

.ct-footer .ct-container {
  max-width: var(--ta-container-max) !important;
  padding-inline: 24px !important;
}

.ct-footer a {
  color: var(--ta-titanium) !important;
  text-decoration: none !important;
  transition: color var(--ta-transition-micro) !important;
}

.ct-footer a:hover {
  color: var(--ta-turquoise) !important;
}

.ct-footer [data-id="copyright"] {
  font-size: 14px !important;
  color: var(--ta-titanium) !important;
  text-align: center !important;
}

/* ==========================================================================
   8. HOMEPAGE & ELEMENTOR BRANDBOOK HARMONY
   ========================================================================== */
.elementor-14,
.elementor-14 .elementor-element {
  --e-global-color-primary: var(--ta-turquoise) !important;
  --e-global-color-secondary: var(--ta-quartz) !important;
  --e-global-color-text: var(--ta-mist-silver) !important;
}

/* Ensure background of hero and dark sections matches graphite */
.elementor-14 .elementor-element-6186555,
.elementor-14 .elementor-element-51623bc,
.elementor-14 .elementor-element-359047c {
  background-color: var(--ta-graphite) !important;
}

/* Text rotator */
.elementor-14 .lqd-text-rotator-el {
  font-family: var(--ta-font-display) !important;
  color: var(--ta-quartz) !important;
}

/* Marquee / Tool badges */
.elementor-14 .lqd-marquee-slider img {
  filter: grayscale(100%) opacity(0.7) !important;
  transition: filter var(--ta-transition-micro) !important;
}

.elementor-14 .lqd-marquee-slider img:hover {
  filter: grayscale(0%) opacity(1) !important;
}

/* Elementor post cards on homepage */
.elementor-14 .elementor-post {
  background-color: var(--ta-deep-graphite) !important;
  border: 1px solid var(--ta-border) !important;
  border-radius: var(--ta-radius-md) !important;
  padding: var(--ta-space-4) !important;
  transition: border-color var(--ta-transition-state), transform var(--ta-transition-state) !important;
}

.elementor-14 .elementor-post:hover {
  border-color: var(--ta-turquoise) !important;
  transform: translateY(-2px) !important;
}

.elementor-14 .elementor-post__title,
.elementor-14 .elementor-post__title a {
  font-family: var(--ta-font-display) !important;
  color: var(--ta-quartz) !important;
}

.elementor-14 .elementor-post__title a:hover {
  color: var(--ta-turquoise) !important;
}

.elementor-14 .elementor-button {
  background-color: var(--ta-turquoise) !important;
  color: var(--ta-graphite) !important;
  font-weight: 600 !important;
  border-radius: var(--ta-radius-sm) !important;
}

/* ==========================================================================
   8.1 TEHISARUKAS BRANDBOOK v2.0 HOMEPAGE ARCHITECTURE (.ta-front-page)
   "Signal, not spectacle" — Graphite, Titanium, Turquoise & Champagne
   ========================================================================== */
.ta-front-page {
  background-color: var(--ta-graphite);
  color: var(--ta-mist-silver);
  overflow-x: hidden;
}

.ta-container {
  max-width: var(--ta-container-max);
  margin-inline: auto;
  padding-inline: 24px;
  width: 100%;
  box-sizing: border-box;
}

/* 1. HERO SECTION */
.ta-hero {
  padding-top: var(--ta-space-16);
  padding-bottom: var(--ta-space-12);
  border-bottom: 1px solid var(--ta-border);
  position: relative;
  background: radial-gradient(circle at 80% 20%, rgba(0, 161, 172, 0.05) 0%, transparent 60%);
}

.ta-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
}

.ta-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: rgba(0, 161, 172, 0.1);
  border: 1px solid rgba(0, 161, 172, 0.35);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: var(--ta-space-4);
}

.ta-signal-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--ta-turquoise);
  box-shadow: 0 0 6px var(--ta-turquoise);
}

.ta-kicker-text {
  font-family: var(--ta-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ta-turquoise);
  text-transform: uppercase;
}

.ta-hero-title {
  font-family: var(--ta-font-display);
  color: var(--ta-quartz);
  font-weight: 700;
  font-size: clamp(38px, 4.4vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-top: 0;
  margin-bottom: var(--ta-space-6);
}

.ta-accent-phrase {
  color: var(--ta-turquoise);
}

.ta-hero-lead {
  font-family: var(--ta-font-body);
  font-size: 18px;
  line-height: 1.65;
  color: var(--ta-titanium);
  max-width: 520px;
  margin-bottom: var(--ta-space-8);
}

.ta-hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Button System */
.ta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-family: var(--ta-font-body);
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--ta-radius-sm);
  text-decoration: none !important;
  cursor: pointer;
  transition: all var(--ta-transition-micro);
}

.ta-btn-primary {
  background-color: var(--ta-turquoise);
  color: var(--ta-graphite) !important;
  border: 1px solid var(--ta-turquoise);
}

.ta-btn-primary:hover {
  background-color: var(--ta-deep-turquoise);
  border-color: var(--ta-deep-turquoise);
  color: var(--ta-quartz) !important;
}

.ta-btn-secondary {
  background-color: var(--ta-carbon);
  color: var(--ta-quartz) !important;
  border: 1px solid var(--ta-border);
}

.ta-btn-secondary:hover {
  border-color: var(--ta-turquoise);
  color: var(--ta-turquoise) !important;
}

.ta-btn-sm {
  padding: 7px 16px;
  font-size: 13px;
}

/* Hero Lead Feature Card */
.ta-lead-card {
  background-color: var(--ta-deep-graphite);
  border: 1px solid rgba(100, 200, 255, 0.3) !important;
  border-radius: var(--ta-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 0 20px rgba(100, 200, 255, 0.35),
    0 0 40px rgba(100, 200, 255, 0.18),
    0 0 60px rgba(100, 200, 255, 0.08),
    inset -2px -2px 10px rgba(0, 0, 0, 0.3),
    inset 2px 2px 10px rgba(100, 200, 255, 0.15) !important;
  transition: box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease !important;
}

.ta-lead-card:hover {
  border-color: rgba(100, 200, 255, 0.55) !important;
  transform: translateY(-4px) !important;
  box-shadow:
    0 0 30px rgba(100, 200, 255, 0.55),
    0 0 60px rgba(100, 200, 255, 0.35),
    0 0 90px rgba(100, 200, 255, 0.18),
    inset -2px -2px 15px rgba(0, 0, 0, 0.4),
    inset 2px 2px 15px rgba(100, 200, 255, 0.25) !important;
}

.ta-lead-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--ta-carbon);
}

.ta-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--ta-transition-state);
}

.ta-lead-card:hover .ta-thumb-img {
  transform: scale(1.02);
}

.ta-card-pill,
.ta-card-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background-color: rgba(14, 17, 20, 0.88);
  backdrop-filter: blur(8px);
  border: 1px solid var(--ta-turquoise);
  color: var(--ta-turquoise);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--ta-radius-sm);
  z-index: 2;
}

.ta-badge-guide {
  border-color: var(--ta-caution);
  color: var(--ta-caution);
}

.ta-lead-body {
  padding: 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.ta-lead-meta,
.ta-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ta-titanium);
  font-size: 13px;
  font-family: var(--ta-font-body);
  margin-bottom: var(--ta-space-2);
}

.ta-meta-dot {
  color: var(--ta-border);
}

.ta-lead-title {
  font-family: var(--ta-font-display);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.25;
  margin-top: 0;
  margin-bottom: var(--ta-space-3);
}

.ta-lead-title a,
.ta-card-title a {
  color: var(--ta-quartz);
  text-decoration: none !important;
  transition: color var(--ta-transition-micro);
}

.ta-lead-title a:hover,
.ta-card-title a:hover {
  color: var(--ta-turquoise);
}

.ta-lead-excerpt {
  color: var(--ta-mist-silver);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: var(--ta-space-6);
}

.ta-lead-footer,
.ta-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: var(--ta-space-4);
  border-top: 1px solid var(--ta-border-subtle);
}

.ta-author-name {
  color: var(--ta-titanium);
  font-size: 13px;
  font-weight: 500;
}

.ta-read-link,
.ta-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ta-turquoise);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  transition: gap var(--ta-transition-micro);
}

.ta-read-link:hover,
.ta-card-link:hover {
  color: var(--ta-deep-turquoise);
  gap: 9px;
}

/* 2. TOPIC PILLARS STRIP */
.ta-topic-strip {
  padding-block: var(--ta-space-4);
  background-color: var(--ta-deep-graphite);
  border-bottom: 1px solid var(--ta-border);
}

.ta-topic-pills {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  white-space: nowrap;
  padding-block: 4px;
  scrollbar-width: none;
}

.ta-topic-pills::-webkit-scrollbar {
  display: none;
}

.ta-topic-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ta-titanium);
  margin-right: 6px;
  flex-shrink: 0;
}

.ta-pill {
  display: inline-block;
  background-color: var(--ta-carbon);
  color: var(--ta-mist-silver);
  border: 1px solid var(--ta-border);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none !important;
  transition: all var(--ta-transition-micro);
  flex-shrink: 0;
}

.ta-pill:hover {
  border-color: var(--ta-turquoise);
  color: var(--ta-turquoise);
}

.ta-pill-active {
  background-color: rgba(0, 161, 172, 0.12);
  border-color: var(--ta-turquoise);
  color: var(--ta-turquoise);
  font-weight: 600;
}

/* 3. SECTIONS COMMON */
.ta-section {
  padding-block: var(--ta-space-16);
  border-bottom: 1px solid var(--ta-border);
}

.ta-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--ta-space-8);
  gap: 24px;
  flex-wrap: wrap;
}

.ta-section-title {
  font-family: var(--ta-font-display);
  font-size: clamp(28px, 3.2vw, 38px);
  color: var(--ta-quartz);
  margin-top: 0;
  margin-bottom: var(--ta-space-2);
  line-height: 1.2;
}

.ta-section-desc {
  color: var(--ta-titanium);
  font-size: 16px;
  margin: 0;
  max-width: 600px;
}

.ta-view-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ta-turquoise);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  white-space: nowrap;
}

.ta-view-all:hover {
  color: var(--ta-deep-turquoise);
}

/* 3-Column Card Grid */
.ta-card-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.ta-card {
  background-color: var(--ta-deep-graphite);
  border: 1px solid rgba(100, 200, 255, 0.3) !important;
  border-radius: var(--ta-radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 0 20px rgba(100, 200, 255, 0.35),
    0 0 40px rgba(100, 200, 255, 0.18),
    0 0 60px rgba(100, 200, 255, 0.08),
    inset -2px -2px 10px rgba(0, 0, 0, 0.3),
    inset 2px 2px 10px rgba(100, 200, 255, 0.15) !important;
  transition: box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease !important;
}

.ta-card:hover {
  border-color: rgba(100, 200, 255, 0.55) !important;
  transform: translateY(-4px) !important;
  box-shadow:
    0 0 30px rgba(100, 200, 255, 0.55),
    0 0 60px rgba(100, 200, 255, 0.35),
    0 0 90px rgba(100, 200, 255, 0.18),
    inset -2px -2px 15px rgba(0, 0, 0, 0.4),
    inset 2px 2px 15px rgba(100, 200, 255, 0.25) !important;
}

.ta-card-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--ta-carbon);
}

.ta-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.ta-card-title {
  font-family: var(--ta-font-display);
  font-size: 20px;
  line-height: 1.35;
  margin-top: 0;
  margin-bottom: var(--ta-space-3);
}

.ta-card-excerpt {
  color: var(--ta-titanium);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: var(--ta-space-4);
}

/* 4. VALUES & EDITORIAL AUTHORITY (E-E-A-T) */
.ta-values-card {
  background-color: var(--ta-deep-graphite);
  border: 1px solid rgba(100, 200, 255, 0.3) !important;
  border-radius: var(--ta-radius-lg);
  padding: 48px;
  box-shadow:
    0 0 20px rgba(100, 200, 255, 0.25),
    0 0 40px rgba(100, 200, 255, 0.12),
    0 0 60px rgba(100, 200, 255, 0.05),
    inset -2px -2px 10px rgba(0, 0, 0, 0.3),
    inset 2px 2px 10px rgba(100, 200, 255, 0.1) !important;
}

.ta-values-header {
  max-width: 680px;
  margin-bottom: 40px;
}

.ta-values-title {
  font-family: var(--ta-font-display);
  font-size: clamp(32px, 3.8vw, 44px);
  color: var(--ta-quartz);
  margin-top: var(--ta-space-3);
  margin-bottom: var(--ta-space-4);
}

.ta-values-lead {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ta-mist-silver);
}

.ta-values-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 40px;
}

.ta-value-item {
  background-color: var(--ta-carbon);
  border: 1px solid var(--ta-border-subtle);
  border-radius: var(--ta-radius-md);
  padding: 24px;
}

.ta-value-num {
  font-family: var(--ta-font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--ta-turquoise);
  display: block;
  margin-bottom: var(--ta-space-3);
}

.ta-value-heading {
  font-family: var(--ta-font-body);
  font-size: 17px;
  font-weight: 700;
  color: var(--ta-quartz);
  margin-top: 0;
  margin-bottom: var(--ta-space-2);
}

.ta-value-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ta-titanium);
  margin: 0;
}

.ta-values-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 28px;
  border-top: 1px solid var(--ta-border-subtle);
  gap: 20px;
  flex-wrap: wrap;
}

.ta-editor-name {
  font-family: var(--ta-font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--ta-quartz);
  display: block;
}

.ta-editor-role {
  font-size: 13px;
  color: var(--ta-titanium);
}

.ta-editor-links {
  display: flex;
  gap: 12px;
}

/* 5. NEWSLETTER STRIP */
.ta-newsletter-box {
  background-color: var(--ta-deep-graphite);
  border: 1px solid rgba(100, 200, 255, 0.3) !important;
  border-radius: var(--ta-radius-lg);
  padding: 44px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
  box-shadow:
    0 0 20px rgba(100, 200, 255, 0.25),
    0 0 40px rgba(100, 200, 255, 0.12),
    0 0 60px rgba(100, 200, 255, 0.05),
    inset -2px -2px 10px rgba(0, 0, 0, 0.3),
    inset 2px 2px 10px rgba(100, 200, 255, 0.1) !important;
}

.ta-newsletter-title {
  font-family: var(--ta-font-display);
  font-size: 32px;
  color: var(--ta-quartz);
  margin-top: 0;
  margin-bottom: var(--ta-space-2);
}

.ta-newsletter-desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ta-titanium);
  margin: 0;
}

.ta-newsletter-form {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.ta-input {
  flex: 1;
  background-color: var(--ta-carbon);
  border: 1px solid var(--ta-border);
  border-radius: var(--ta-radius-sm);
  color: var(--ta-quartz);
  font-family: var(--ta-font-body);
  font-size: 15px;
  padding: 12px 18px;
  outline: none;
}

.ta-input:focus {
  border-color: var(--ta-turquoise);
}

.ta-privacy-note {
  font-size: 12px;
  color: var(--ta-titanium);
  display: block;
}

/* Responsive adjustments for homepage */
@media (max-width: 1024px) {
  .ta-hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .ta-values-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ta-newsletter-box {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 32px;
  }
}

@media (max-width: 767px) {
  .ta-hero {
    padding-top: var(--ta-space-8);
    padding-bottom: var(--ta-space-8);
  }
  .ta-card-grid-3 {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .ta-values-grid {
    grid-template-columns: 1fr;
  }
  .ta-values-card {
    padding: 24px;
  }
  .ta-newsletter-form {
    flex-direction: column;
  }
}

/* ==========================================================================
   9. TEHISARUKAS EDITORIAL ARTICLE SYSTEM v3.0 (.ta-article)
   Aligned with Brandbook v2.0 & Gutenberg
   ========================================================================== */
.ta-article {
  color: var(--ta-mist-silver);
  font-family: var(--ta-font-body);
  font-size: 19px;
  line-height: 1.7;
}

.ta-article > :where(p, ul, ol, h2, h3, h4, blockquote, .ta-callout, .ta-prompt, .ta-example, .ta-quote, .ta-table-wrap, figure, .ta-faq) {
  width: min(100%, var(--ta-reading-width));
  margin-inline: auto;
}

.ta-article :where(p, ul, ol) {
  margin-top: 0;
  margin-bottom: var(--ta-space-6);
}

.ta-article :where(ul, ol) {
  padding-left: 1.35em;
}

.ta-article :where(li + li) {
  margin-top: var(--ta-space-2);
}

/* Section Headings */
.ta-article h2 {
  font-family: var(--ta-font-display);
  color: var(--ta-quartz);
  font-weight: 700;
  font-size: clamp(30px, 3.8vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin-top: var(--ta-space-16);
  margin-bottom: var(--ta-space-6);
}

.ta-article h3 {
  font-family: var(--ta-font-body);
  color: var(--ta-quartz);
  font-weight: 700;
  font-size: clamp(22px, 2.8vw, 30px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-top: var(--ta-space-12);
  margin-bottom: var(--ta-space-4);
}

.ta-article h4 {
  font-family: var(--ta-font-body);
  color: var(--ta-quartz);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.35;
  margin-top: var(--ta-space-8);
  margin-bottom: var(--ta-space-3);
}

.ta-article a {
  color: var(--ta-turquoise);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--ta-transition-micro);
}

.ta-article a:hover {
  color: var(--ta-deep-turquoise);
}

.ta-article strong {
  color: var(--ta-quartz);
  font-weight: 600;
}

.ta-article .ta-term,
body .ta-article p > em {
  display: inline;
  margin-left: 0.12em;
  color: var(--ta-titanium);
  font-size: 0.9em;
  font-style: italic;
  font-weight: 400;
}

/* Callouts & Information Panels */
body .ta-article .wp-block-group.ta-callout,
body .ta-article .wp-block-group.ta-example,
.ta-article .ta-callout,
.ta-article .ta-example {
  box-sizing: border-box;
  margin-top: var(--ta-space-8);
  margin-bottom: var(--ta-space-8);
  padding: var(--ta-space-6);
  border: 1px solid var(--ta-border);
  border-left: 4px solid var(--ta-turquoise);
  border-radius: var(--ta-radius-md);
  background-color: var(--ta-deep-graphite);
  font-size: 17px;
  line-height: 1.6;
}

body .ta-article .ta-callout--summary {
  border-left-color: var(--ta-turquoise);
  background: linear-gradient(180deg, rgba(0, 161, 172, 0.08) 0%, var(--ta-deep-graphite) 100%);
}

body .ta-article .ta-callout--important {
  border-left-color: var(--ta-info);
  background: linear-gradient(180deg, rgba(111, 187, 194, 0.08) 0%, var(--ta-deep-graphite) 100%);
}

body .ta-article .ta-callout--recommendation {
  border-left-color: var(--ta-positive);
  background: linear-gradient(180deg, rgba(114, 201, 167, 0.08) 0%, var(--ta-deep-graphite) 100%);
}

body .ta-article .ta-callout--warning {
  border-left-color: var(--ta-caution);
  background: linear-gradient(180deg, rgba(210, 180, 111, 0.08) 0%, var(--ta-deep-graphite) 100%);
}

body .ta-article .ta-callout--danger {
  border-left-color: var(--ta-critical);
  background: linear-gradient(180deg, rgba(217, 133, 133, 0.08) 0%, var(--ta-deep-graphite) 100%);
}

body .ta-article .ta-example {
  border-left-color: var(--ta-turquoise);
  background: linear-gradient(180deg, rgba(0, 161, 172, 0.06) 0%, var(--ta-carbon) 100%);
}

.ta-article .ta-callout__title,
.ta-article .ta-example__title,
.ta-article .ta-prompt__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--ta-space-3);
  color: var(--ta-quartz);
  font-family: var(--ta-font-body);
  font-size: 0.82em;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ta-article .ta-callout__title::before,
.ta-article .ta-example__title::before,
.ta-article .ta-prompt__title::before {
  content: "";
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.ta-article .ta-callout--summary .ta-callout__title { color: var(--ta-turquoise); }
.ta-article .ta-callout--summary .ta-callout__title::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
}

.ta-article .ta-callout--important .ta-callout__title { color: var(--ta-info); }
.ta-article .ta-callout--important .ta-callout__title::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2.5 20h19L12 3Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2.5 20h19L12 3Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}

.ta-article .ta-callout--recommendation .ta-callout__title { color: var(--ta-positive); }
.ta-article .ta-callout--recommendation .ta-callout__title::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E");
}

.ta-article .ta-callout--warning .ta-callout__title { color: var(--ta-caution); }
.ta-article .ta-callout--warning .ta-callout__title::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2.5 20h19L12 3Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2.5 20h19L12 3Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}

.ta-article .ta-example__title { color: var(--ta-turquoise); }
.ta-article .ta-example__title::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19h16'/%3E%3Cpath d='M7 16 17 6'/%3E%3Cpath d='M10 6h7v7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19h16'/%3E%3Cpath d='M7 16 17 6'/%3E%3Cpath d='M10 6h7v7'/%3E%3C/svg%3E");
}

.ta-article .ta-prompt__title { color: var(--ta-turquoise); }
.ta-article .ta-prompt__title::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m7 9 3 3-3 3'/%3E%3Cpath d='M13 15h4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m7 9 3 3-3 3'/%3E%3Cpath d='M13 15h4'/%3E%3C/svg%3E");
}

/* AI Prompts with One-Click Copy */
.ta-article .ta-prompt {
  box-sizing: border-box;
  margin-top: var(--ta-space-8);
  margin-bottom: var(--ta-space-8);
  padding: var(--ta-space-6);
  border: 1px solid var(--ta-border);
  border-radius: var(--ta-radius-md);
  background: var(--ta-carbon);
}

.ta-article .ta-prompt__hint {
  margin: 0 0 var(--ta-space-4);
  color: var(--ta-titanium);
  font-size: 0.9em;
  font-style: italic;
}

.ta-article .ta-prompt pre,
.ta-article pre.ta-prompt__code {
  box-sizing: border-box;
  margin: 0;
  padding: var(--ta-space-4);
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border: 1px solid var(--ta-border);
  border-radius: var(--ta-radius-sm);
  background: var(--ta-graphite);
  color: var(--ta-mist-silver);
  font-family: var(--ta-font-mono);
  font-size: 0.9em;
  line-height: 1.6;
}

.ta-article .ta-prompt__toolbar {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 var(--ta-space-3);
}

.ta-article .ta-copy-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0 var(--ta-space-4);
  border: 1px solid var(--ta-border);
  border-radius: var(--ta-radius-sm);
  background: var(--ta-deep-graphite);
  color: var(--ta-quartz);
  font-family: var(--ta-font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: all var(--ta-transition-micro);
}

.ta-article .ta-copy-button__icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.ta-article .ta-copy-button:hover {
  border-color: var(--ta-turquoise);
  color: var(--ta-turquoise);
}

.ta-article .ta-copy-button[data-state="copied"] {
  border-color: var(--ta-positive);
  color: var(--ta-positive);
}

.ta-article .ta-copy-button[data-state="error"] {
  border-color: var(--ta-critical);
  color: var(--ta-critical);
}

/* Comparison & Content Tables (Brandbook v2.0) */
.ta-article .ta-table-wrap,
.entry-content .wp-block-table,
.ta-article .wp-block-table,
article .wp-block-table,
.wp-block-table {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: var(--ta-space-6) 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  contain: paint !important; /* CRITICAL: prevents table scroll blowout from expanding page width */
  border: 1px solid var(--ta-border) !important;
  border-radius: var(--ta-radius-md) !important;
  background-color: var(--ta-deep-graphite) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

.ta-article .ta-table-wrap > figure.wp-block-table {
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
}

.entry-content .wp-block-table > table,
.ta-article .wp-block-table > table,
article .wp-block-table > table,
.wp-block-table > table {
  box-sizing: border-box !important;
  display: table !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 500px !important; /* Ensures clean readable columns with horizontal touch swipe */
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  table-layout: auto !important; /* Natural width allocation prevents mid-word breaks */
  background-color: transparent !important;
  color: var(--ta-mist-silver) !important;
  font-family: var(--ta-font-body) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

@media (min-width: 768px) {
  .entry-content .wp-block-table > table,
  .ta-article .wp-block-table > table,
  article .wp-block-table > table,
  .wp-block-table > table {
    min-width: 100% !important;
  }
}

/* Cell padding, typography and strict word break prevention */
.entry-content .wp-block-table :where(th, td),
.ta-article .wp-block-table :where(th, td),
article .wp-block-table :where(th, td),
.wp-block-table :where(th, td) {
  padding: 12px 16px !important;
  border: none !important;
  border-right: 1px solid var(--ta-border) !important;
  border-bottom: 1px solid var(--ta-border) !important;
  color: var(--ta-mist-silver) !important;
  text-align: left !important;
  vertical-align: top !important;
  word-break: normal !important;        /* PREVENTS ugly mid-syllable word splitting */
  word-wrap: normal !important;
  overflow-wrap: break-word !important;   /* Only breaks if an unbroken word exceeds column width */
  -webkit-hyphens: none !important;
  -ms-hyphens: none !important;
  hyphens: none !important;
  white-space: normal !important;
}

/* Table Header Row */
.entry-content .wp-block-table thead th,
.ta-article .wp-block-table thead th,
article .wp-block-table thead th,
.wp-block-table thead th,
.wp-block-table th {
  background-color: #121518 !important;
  color: var(--ta-quartz) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  border-bottom: 2px solid var(--ta-border) !important;
}

/* First Column Emphasis */
.entry-content .wp-block-table tbody td:first-child,
.ta-article .wp-block-table tbody td:first-child,
article .wp-block-table tbody td:first-child,
.wp-block-table tbody td:first-child {
  font-weight: 600 !important;
  color: var(--ta-quartz) !important;
  white-space: nowrap !important;
}

.entry-content .wp-block-table tbody td:first-child strong,
.ta-article .wp-block-table tbody td:first-child strong,
article .wp-block-table tbody td:first-child strong,
.wp-block-table tbody td:first-child strong {
  color: var(--ta-turquoise) !important;
  font-weight: 600 !important;
}

/* Remove outer borders on edge cells */
.entry-content .wp-block-table :where(th, td):last-child,
.ta-article .wp-block-table :where(th, td):last-child,
article .wp-block-table :where(th, td):last-child,
.wp-block-table :where(th, td):last-child {
  border-right: none !important;
}

.entry-content .wp-block-table tbody tr:last-child td,
.ta-article .wp-block-table tbody tr:last-child td,
article .wp-block-table tbody tr:last-child td,
.wp-block-table tbody tr:last-child td {
  border-bottom: none !important;
}

/* Alternating zebra rows & hover feedback */
.entry-content .wp-block-table tbody tr:nth-child(even) td,
.ta-article .wp-block-table tbody tr:nth-child(even) td,
article .wp-block-table tbody tr:nth-child(even) td,
.wp-block-table tbody tr:nth-child(even) td {
  background-color: rgba(255, 255, 255, 0.015) !important;
}

.entry-content .wp-block-table tbody tr:hover td,
.ta-article .wp-block-table tbody tr:hover td,
article .wp-block-table tbody tr:hover td,
.wp-block-table tbody tr:hover td {
  background-color: rgba(0, 161, 172, 0.04) !important;
}

/* Styled horizontal scrollbar for wide tables */
.entry-content .wp-block-table::-webkit-scrollbar,
.ta-article .wp-block-table::-webkit-scrollbar,
article .wp-block-table::-webkit-scrollbar,
.wp-block-table::-webkit-scrollbar {
  height: 6px !important;
}

.entry-content .wp-block-table::-webkit-scrollbar-track,
.ta-article .wp-block-table::-webkit-scrollbar-track,
article .wp-block-table::-webkit-scrollbar-track,
.wp-block-table::-webkit-scrollbar-track {
  background: var(--ta-carbon) !important;
  border-radius: 4px !important;
}

.entry-content .wp-block-table::-webkit-scrollbar-thumb,
.ta-article .wp-block-table::-webkit-scrollbar-thumb,
article .wp-block-table::-webkit-scrollbar-thumb,
.wp-block-table::-webkit-scrollbar-thumb {
  background: var(--ta-border) !important;
  border-radius: 4px !important;
}

.entry-content .wp-block-table::-webkit-scrollbar-thumb:hover,
.ta-article .wp-block-table::-webkit-scrollbar-thumb:hover,
article .wp-block-table::-webkit-scrollbar-thumb:hover,
.wp-block-table::-webkit-scrollbar-thumb:hover {
  background: var(--ta-turquoise) !important;
}

/* Quotes */
.ta-article .ta-quote,
.ta-article blockquote.ta-quote {
  box-sizing: border-box;
  margin-top: var(--ta-space-8);
  margin-bottom: var(--ta-space-8);
  padding: var(--ta-space-4) 0 var(--ta-space-4) var(--ta-space-6);
  border: 0;
  border-left: 2px solid var(--ta-turquoise);
  color: var(--ta-quartz);
  font-family: var(--ta-font-display);
  font-size: 1.15em;
  line-height: 1.6;
}

.ta-article .ta-quote cite {
  display: block;
  margin-top: var(--ta-space-3);
  color: var(--ta-titanium);
  font-family: var(--ta-font-body);
  font-size: 0.8em;
  font-style: normal;
}

/* Figures and Visual Media */
.ta-article figure.ta-figure,
.ta-article figure.ta-article-visual {
  width: min(100%, 980px);
  margin-top: var(--ta-space-8);
  margin-bottom: var(--ta-space-8);
}

.ta-article .ta-figure img,
.ta-article .ta-article-visual img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--ta-border);
  border-radius: var(--ta-radius-md);
}

.ta-article .ta-figure figcaption,
.ta-article .ta-article-visual figcaption {
  margin-top: var(--ta-space-2);
  color: var(--ta-titanium);
  font-size: 0.85em;
  line-height: 1.45;
}

/* Information Cards Grid */
.ta-article .ta-card-grid {
  box-sizing: border-box;
  width: min(100%, 980px);
  margin: var(--ta-space-8) auto;
}

.ta-article .ta-card-grid > .wp-block-group__inner-container {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--ta-space-4) !important;
  width: 100%;
}

.ta-article .ta-card {
  --ta-card-accent: var(--ta-turquoise);
  --ta-card-tint: var(--ta-deep-graphite);
  box-sizing: border-box;
  min-width: 0;
  min-height: 240px;
  height: auto;
  padding: var(--ta-space-6);
  border: 1px solid color-mix(in srgb, var(--ta-card-accent) 30%, var(--ta-border));
  border-radius: var(--ta-radius-md);
  background-color: var(--ta-card-tint);
  color: var(--ta-mist-silver);
}

.ta-article .ta-card--info {
  --ta-card-accent: var(--ta-turquoise);
  --ta-card-tint: color-mix(in srgb, var(--ta-turquoise) 6%, var(--ta-deep-graphite));
}

.ta-article .ta-card--analysis {
  --ta-card-accent: var(--ta-info);
  --ta-card-tint: color-mix(in srgb, var(--ta-info) 6%, var(--ta-deep-graphite));
}

.ta-article .ta-card--success {
  --ta-card-accent: var(--ta-positive);
  --ta-card-tint: color-mix(in srgb, var(--ta-positive) 6%, var(--ta-deep-graphite));
}

.ta-article .ta-card--warning {
  --ta-card-accent: var(--ta-caution);
  --ta-card-tint: color-mix(in srgb, var(--ta-caution) 6%, var(--ta-deep-graphite));
}

.ta-article .ta-card__icon {
  display: flex;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--ta-space-4);
  border: 1px solid color-mix(in srgb, var(--ta-card-accent) 40%, var(--ta-border));
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--ta-card-accent) 10%, transparent);
  color: var(--ta-card-accent);
}

.ta-article .ta-card__icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

.ta-article .ta-card__title {
  margin: 0 0 var(--ta-space-2);
  color: var(--ta-card-accent);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

.ta-article .ta-card__text {
  color: var(--ta-mist-silver);
  font-size: 15px;
  line-height: 1.55;
}

/* Accessible FAQ Accordion */
.ta-article .ta-faq {
  box-sizing: border-box;
  width: min(100%, var(--ta-reading-width));
  margin: var(--ta-space-8) auto;
  border-top: 1px solid var(--ta-border);
}

.ta-article .ta-faq details {
  margin: 0;
  border-bottom: 1px solid var(--ta-border);
  background: transparent;
}

.ta-article .ta-faq summary {
  position: relative;
  display: flex;
  min-height: 52px;
  align-items: center;
  padding: var(--ta-space-4) 42px var(--ta-space-4) 0;
  color: var(--ta-quartz);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

.ta-article .ta-faq summary::-webkit-details-marker { display: none; }

.ta-article .ta-faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ta-turquoise);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}

.ta-article .ta-faq details[open] summary::after { content: "−"; }

.ta-article .ta-faq__answer {
  padding: 0 42px var(--ta-space-4) 0;
  color: var(--ta-mist-silver);
  font-size: 16px;
  line-height: 1.6;
}

/* ==========================================================================
   10. RESPONSIVE BREAKPOINTS & ACCESSIBILITY QA
   ========================================================================== */
@media (max-width: 900px) {
  .ta-article .ta-card-grid > .wp-block-group__inner-container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  .ta-article {
    font-size: 17px;
    line-height: 1.62;
  }

  .ta-article > :where(p, ul, ol, h2, h3, h4, blockquote, .ta-callout, .ta-prompt, .ta-example, .ta-quote, .ta-table-wrap, figure, .ta-faq) {
    width: 100%;
  }

  .ta-article h2 {
    margin-top: var(--ta-space-12);
    font-size: 28px;
  }

  .ta-article h3 {
    margin-top: var(--ta-space-8);
    font-size: 22px;
  }

  .ta-article .ta-callout,
  .ta-article .ta-example,
  .ta-article .ta-prompt {
    padding: var(--ta-space-4);
  }

  .ta-article .ta-card-grid > .wp-block-group__inner-container {
    grid-template-columns: 1fr !important;
  }

  .ta-article .ta-card {
    min-height: 0;
    padding: var(--ta-space-4);
  }
}

/* ==========================================================================
   11. BLOG & ARCHIVE EDITORIAL ARCHITECTURE (BRANDBOOK V2.0)
   ========================================================================== */

/* Blog Page Container */
.ta-blog-page {
  background-color: var(--ta-graphite);
  color: var(--ta-quartz);
  font-family: var(--ta-font-body);
  min-height: 80vh;
}

/* 1. Editorial Hero */
.ta-blog-hero {
  text-align: center;
  padding: 64px 0 40px 0;
  border-bottom: 1px solid rgba(48, 54, 61, 0.4);
  background: radial-gradient(ellipse at 50% 0%, rgba(0, 161, 172, 0.1) 0%, transparent 70%);
}

.ta-hero-kicker {
  font-family: var(--ta-font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ta-turquoise);
  margin-bottom: 16px;
  display: inline-block;
  font-weight: 600;
}

.ta-blog-title {
  font-family: var(--ta-font-display);
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 700;
  color: var(--ta-quartz);
  line-height: 1.15;
  margin: 0 auto 18px auto;
  max-width: 900px;
  letter-spacing: -0.02em;
}

.ta-blog-subtitle {
  font-size: clamp(16px, 1.8vw, 19px);
  color: var(--ta-titanium);
  line-height: 1.6;
  max-width: 760px;
  margin: 0 auto 24px auto;
}

.ta-blog-subtitle p {
  margin: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.ta-hero-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  font-family: var(--ta-font-mono);
  font-size: 13px;
  color: var(--ta-mist-silver);
  margin-top: 16px;
}

.ta-hero-stat-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ta-hero-stat-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--ta-turquoise);
  box-shadow: 0 0 8px rgba(0, 161, 172, 0.6);
}

/* 2. Category Filter Section (Flex-Wrap, Full Visibility) */
.ta-blog-filter-section {
  padding: 36px 0 20px 0;
}

.ta-filter-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ta-filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ta-filter-label {
  font-family: var(--ta-font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ta-titanium);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.ta-filter-label svg {
  color: var(--ta-turquoise);
}

.ta-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.ta-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none !important;
  color: var(--ta-mist-silver) !important;
  background-color: var(--ta-deep-graphite);
  border: 1px solid var(--ta-border);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  cursor: pointer !important;
  user-select: none;
}

.ta-filter-pill:hover {
  color: var(--ta-quartz) !important;
  border-color: rgba(0, 161, 172, 0.6);
  background-color: rgba(0, 161, 172, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.ta-filter-pill.is-active {
  background-color: rgba(0, 161, 172, 0.2) !important;
  border-color: var(--ta-turquoise) !important;
  color: #FFFFFF !important;
  font-weight: 600;
  box-shadow: 0 0 16px rgba(0, 161, 172, 0.35);
}

.ta-filter-pill .ta-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--ta-titanium);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.ta-filter-pill.is-active .ta-pill-dot {
  background-color: var(--ta-turquoise);
  box-shadow: 0 0 6px var(--ta-turquoise);
}

.ta-filter-pill .ta-pill-count {
  font-family: var(--ta-font-mono);
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--ta-titanium);
  transition: all 0.2s ease;
}

.ta-filter-pill.is-active .ta-pill-count {
  background-color: var(--ta-turquoise);
  color: #0E1114;
  font-weight: 700;
}

/* 3. Post Grid Section */
.ta-blog-grid-section {
  padding: 16px 0 48px 0;
}

#ta-posts-grid {
  transition: opacity 0.25s ease;
  min-height: 380px;
}

#ta-posts-grid.is-loading {
  opacity: 0.35;
  pointer-events: none;
}

/* Fallback Card Thumbnail */
.ta-card-thumb--fallback {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #1A1D21 0%, #0E1114 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.ta-thumb-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.ta-fallback-logo {
  font-family: var(--ta-font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--ta-titanium);
  letter-spacing: 0.04em;
  opacity: 0.7;
}

/* Empty State */
.ta-no-posts {
  grid-column: 1 / -1;
  text-align: center;
  padding: 64px 24px;
  background-color: var(--ta-deep-graphite);
  border: 1px dashed var(--ta-border);
  border-radius: var(--ta-radius-lg);
  color: var(--ta-mist-silver);
}

.ta-no-posts svg {
  color: var(--ta-turquoise);
  margin-bottom: 16px;
}

.ta-no-posts h3 {
  font-family: var(--ta-font-display);
  font-size: 24px;
  color: var(--ta-quartz);
  margin-bottom: 8px;
}

.ta-no-posts p {
  color: var(--ta-titanium);
  margin-bottom: 24px;
  font-size: 16px;
}

/* 4. Numbered Pagination */
.ta-pagination-wrap {
  margin-top: 56px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ta-pagination-wrap ul.page-numbers {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
  justify-content: center;
}

.ta-pagination-wrap .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 16px;
  border-radius: var(--ta-radius-sm);
  background-color: var(--ta-deep-graphite);
  border: 1px solid var(--ta-border);
  color: var(--ta-mist-silver);
  font-family: var(--ta-font-mono);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.ta-pagination-wrap a.page-numbers:hover {
  color: var(--ta-quartz);
  border-color: rgba(0, 161, 172, 0.7);
  background-color: rgba(0, 161, 172, 0.12);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.ta-pagination-wrap .page-numbers.current {
  background-color: var(--ta-turquoise) !important;
  border-color: var(--ta-turquoise) !important;
  color: #0E1114 !important;
  font-weight: 700;
  box-shadow: 0 0 16px rgba(0, 161, 172, 0.45);
}

.ta-pagination-wrap .page-numbers.dots {
  border: none;
  background: transparent;
  color: var(--ta-titanium);
  min-width: 24px;
}

.ta-pagination-wrap .prev,
.ta-pagination-wrap .next {
  gap: 6px;
  padding: 0 18px;
}

/* 5. Showcase Card (Universal, Uncropped, Full Responsive, Cursor Fixed) */
.ta-showcase-section {
  padding: 40px 0 64px 0;
}

.ta-showcase-card {
  display: block !important;
  position: relative !important;
  z-index: 10 !important;
  border-radius: var(--ta-radius-lg);
  overflow: hidden;
  border: 1px solid rgba(100, 200, 255, 0.35) !important;
  background-color: var(--ta-deep-graphite);
  box-shadow:
    0 0 30px rgba(100, 200, 255, 0.2),
    0 0 60px rgba(100, 200, 255, 0.08),
    inset 0 0 15px rgba(100, 200, 255, 0.05) !important;
  text-decoration: none !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

.ta-showcase-card,
.ta-showcase-card * {
  cursor: pointer !important;
}

.ta-showcase-card:hover {
  border-color: rgba(100, 200, 255, 0.7) !important;
  transform: translateY(-4px) !important;
  box-shadow:
    0 0 45px rgba(100, 200, 255, 0.45),
    0 0 90px rgba(100, 200, 255, 0.2),
    inset 0 0 20px rgba(100, 200, 255, 0.12) !important;
}

.ta-showcase-image-wrap {
  position: relative;
  width: 100%;
  background: #000;
  display: block;
  overflow: hidden;
  line-height: 0;
}

.ta-showcase-img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  display: block !important;
  object-fit: contain !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
  cursor: pointer !important;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.ta-showcase-card:hover .ta-showcase-img {
  transform: scale(1.015);
}

.ta-showcase-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 28px;
  background: linear-gradient(180deg, #15181C 0%, #0E1114 100%);
  border-top: 1px solid rgba(48, 54, 61, 0.6);
  flex-wrap: wrap;
}

.ta-showcase-info {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 260px;
  flex-wrap: wrap;
}

.ta-showcase-badge {
  font-family: var(--ta-font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 4px;
  background-color: rgba(0, 161, 172, 0.2);
  border: 1px solid var(--ta-turquoise);
  color: var(--ta-turquoise);
  white-space: nowrap;
}

.ta-showcase-title {
  font-family: var(--ta-font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--ta-quartz);
  line-height: 1.35;
}

.ta-showcase-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ta-font-body);
  font-size: 14px;
  font-weight: 600;
  color: #0E1114 !important;
  background-color: var(--ta-turquoise);
  padding: 10px 20px;
  border-radius: var(--ta-radius-sm);
  white-space: nowrap;
  box-shadow: 0 0 16px rgba(0, 161, 172, 0.35);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.ta-showcase-card:hover .ta-showcase-action {
  background-color: #00B5C2;
  box-shadow: 0 0 24px rgba(0, 161, 172, 0.6);
  transform: translateX(3px);
}

.ta-showcase-action svg {
  transition: transform 0.25s ease;
}

.ta-showcase-card:hover .ta-showcase-action svg {
  transform: translateX(3px);
}

/* 6. Responsive Styles */
@media (max-width: 1024px) {
  .ta-showcase-bar {
    padding: 18px 24px;
  }
}

@media (max-width: 768px) {
  .ta-blog-hero {
    padding: 44px 0 28px 0;
  }

  .ta-hero-stats {
    gap: 12px;
    font-size: 12px;
  }

  .ta-filter-pills {
    gap: 8px;
  }

  .ta-filter-pill {
    font-size: 13px;
    padding: 6px 14px;
  }

  .ta-showcase-bar {
    padding: 16px 20px;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .ta-showcase-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
  }

  .ta-showcase-title {
    font-size: 15px;
  }

  .ta-showcase-action {
    justify-content: center;
    width: 100%;
    padding: 12px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}