/*
  TechBada WordPress Article Styles
  Enqueue this file in the WordPress theme for Gutenberg front-end and editor parity.
  Recommended wrapper classes: .techbada-article, .entry-content, .wp-block-post-content, .editor-styles-wrapper
*/

:root {
  --tb-bg: #05070a;
  --tb-surface: rgba(255, 255, 255, 0.035);
  --tb-surface-strong: rgba(6, 9, 12, 0.66);
  --tb-line: rgba(255, 255, 255, 0.1);
  --tb-line-strong: rgba(255, 255, 255, 0.16);
  --tb-text: rgba(232, 239, 247, 0.78);
  --tb-text-strong: #f8fbff;
  --tb-muted: rgba(216, 224, 231, 0.58);
  --tb-cyan: #78e8ff;
  --tb-green: #8dffb0;
  --tb-orange: #ffb160;
  --tb-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
}

.techbada-article,
.entry-content,
.wp-block-post-content,
.editor-styles-wrapper {
  color: var(--tb-text);
  font-family: inherit;
  letter-spacing: 0;
  overflow-wrap: break-word;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.techbada-article,
.entry-content,
.wp-block-post-content {
  width: min(100%, 768px);
  margin-inline: auto;
}

.techbada-article ::selection,
.entry-content ::selection,
.wp-block-post-content ::selection,
.editor-styles-wrapper ::selection {
  background: rgba(120, 232, 255, 0.24);
  color: #f8fbff;
}

.techbada-article p,
.entry-content p,
.wp-block-post-content p,
.editor-styles-wrapper p,
.techbada-article li,
.entry-content li,
.wp-block-post-content li,
.editor-styles-wrapper li {
  color: var(--tb-text);
  font-size: clamp(16px, 1.45vw, 19px);
  line-height: 1.82;
  letter-spacing: 0;
  overflow-wrap: break-word;
  word-break: keep-all;
}

.techbada-article p,
.entry-content p,
.wp-block-post-content p,
.editor-styles-wrapper p {
  margin: 0 0 2rem;
}

.techbada-article > p:first-of-type,
.entry-content > p:first-of-type,
.wp-block-post-content > p:first-of-type {
  margin-bottom: 3rem;
  color: var(--tb-text-strong);
  font-size: clamp(24px, 3vw, 31px);
  line-height: 1.72;
  text-wrap: pretty;
}

.techbada-article strong,
.entry-content strong,
.wp-block-post-content strong,
.editor-styles-wrapper strong {
  color: rgba(248, 252, 255, 0.98);
  font-weight: 880;
}

.techbada-article h2,
.entry-content h2,
.wp-block-post-content h2,
.editor-styles-wrapper h2 {
  margin: 6rem 0 1.6rem;
  background: linear-gradient(110deg, #f8fbff 0%, #d4dce1 52%, var(--tb-cyan) 100%);
  background-clip: text;
  color: transparent;
  font-size: clamp(36px, 5vw, 54px);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: 0;
  text-wrap: balance;
  -webkit-background-clip: text;
}

.techbada-article h3,
.entry-content h3,
.wp-block-post-content h3,
.editor-styles-wrapper h3 {
  margin: 2.7rem 0 1rem;
  color: rgba(247, 251, 255, 0.92);
  font-size: clamp(21px, 2.2vw, 26px);
  font-weight: 850;
  line-height: 1.22;
  letter-spacing: 0;
  text-wrap: balance;
}

.techbada-article ul,
.entry-content ul,
.wp-block-post-content ul,
.editor-styles-wrapper ul,
.techbada-article ol,
.entry-content ol,
.wp-block-post-content ol,
.editor-styles-wrapper ol {
  display: grid;
  gap: 1rem;
  margin: 1.7rem 0 3rem;
  padding-left: 1.25rem;
}

.techbada-article li::marker,
.entry-content li::marker,
.wp-block-post-content li::marker,
.editor-styles-wrapper li::marker {
  color: var(--tb-cyan);
}

.techbada-article a,
.entry-content a,
.wp-block-post-content a,
.editor-styles-wrapper a {
  color: var(--tb-cyan);
  font-weight: 800;
  text-decoration: none;
  text-underline-offset: 0.22em;
  transition: color 220ms ease, text-shadow 220ms ease;
}

.techbada-article a:hover,
.entry-content a:hover,
.wp-block-post-content a:hover,
.editor-styles-wrapper a:hover {
  color: #f8fbff;
  text-shadow: 0 0 18px rgba(120, 232, 255, 0.34);
}

.techbada-article blockquote,
.entry-content blockquote,
.wp-block-post-content blockquote,
.editor-styles-wrapper blockquote {
  position: relative;
  overflow: hidden;
  margin: 3.2rem 0;
  border: 1px solid var(--tb-line);
  border-left: 5px solid var(--tb-cyan);
  border-radius: 8px;
  padding: clamp(22px, 3vw, 34px);
  background:
    radial-gradient(circle at 0% 0%, rgba(120, 232, 255, 0.13), transparent 34%),
    rgba(4, 8, 12, 0.66);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 80px rgba(0, 0, 0, 0.22);
}

.techbada-article blockquote::before,
.entry-content blockquote::before,
.wp-block-post-content blockquote::before,
.editor-styles-wrapper blockquote::before {
  position: absolute;
  top: 14px;
  right: 24px;
  color: rgba(120, 232, 255, 0.16);
  font-size: 82px;
  font-weight: 900;
  line-height: 1;
  content: ">";
}

.techbada-article blockquote p,
.entry-content blockquote p,
.wp-block-post-content blockquote p,
.editor-styles-wrapper blockquote p {
  position: relative;
  margin: 0;
  color: rgba(248, 252, 255, 0.9);
  font-size: clamp(19px, 1.55vw, 22px);
  font-weight: 680;
  line-height: 1.82;
}

.techbada-article hr,
.entry-content hr,
.wp-block-post-content hr,
.editor-styles-wrapper hr {
  height: 1px;
  margin: 4rem 0;
  border: 0;
  background: linear-gradient(90deg, transparent, rgba(120, 232, 255, 0.54), transparent);
}

.techbada-article table,
.entry-content table,
.wp-block-post-content table,
.editor-styles-wrapper table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  color: rgba(232, 239, 247, 0.78);
  font-size: 15px;
  line-height: 1.7;
}

.techbada-table-wrap,
.techbada-article .wp-block-table,
.entry-content .wp-block-table,
.wp-block-post-content .wp-block-table {
  overflow-x: auto;
  margin: 3rem 0;
  border: 1px solid var(--tb-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.028);
}

.techbada-article th,
.entry-content th,
.wp-block-post-content th,
.editor-styles-wrapper th {
  white-space: nowrap;
  color: rgba(248, 252, 255, 0.92);
  font-size: 13px;
  font-weight: 850;
  text-align: left;
}

.techbada-article th,
.entry-content th,
.wp-block-post-content th,
.editor-styles-wrapper th,
.techbada-article td,
.entry-content td,
.wp-block-post-content td,
.editor-styles-wrapper td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 15px 18px;
  vertical-align: top;
  word-break: keep-all;
}

.techbada-article tr:hover,
.entry-content tr:hover,
.wp-block-post-content tr:hover {
  background: rgba(120, 232, 255, 0.045);
}

.techbada-editor-factcheck {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 58px 0 34px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: clamp(24px, 3vw, 32px);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.046), rgba(255, 255, 255, 0.014)),
    rgba(4, 8, 12, 0.48);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03),
    0 24px 74px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(24px) saturate(145%);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
}

.techbada-editor-factcheck::before {
  position: absolute;
  inset: -35% -25% auto -18%;
  z-index: -1;
  height: 230px;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(circle at 18% 22%, rgba(120, 232, 255, 0.2), transparent 34%),
    radial-gradient(circle at 38% 12%, rgba(141, 255, 176, 0.09), transparent 30%);
  filter: blur(4px);
}

.techbada-editor-factcheck__label {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  color: rgba(120, 232, 255, 0.92);
  font-size: 13px;
  font-weight: 880;
  letter-spacing: 0.1em;
  line-height: 1;
  text-shadow:
    0 0 14px rgba(120, 232, 255, 0.34),
    0 0 28px rgba(120, 232, 255, 0.16);
  text-transform: uppercase;
}

.techbada-editor-factcheck p {
  max-width: 680px;
  margin: 18px 0 0;
  color: rgba(216, 224, 231, 0.78);
  font-size: 17px;
  line-height: 1.86;
}

.techbada-device-explode {
  position: relative;
  overflow: hidden;
  margin: 58px 0;
  border: 1px solid var(--tb-line-strong);
  border-radius: 8px;
  padding: clamp(24px, 6vw, 56px);
  background:
    radial-gradient(circle at 68% 42%, rgba(120, 232, 255, 0.14), transparent 24rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018)),
    rgba(7, 9, 12, 0.78);
  box-shadow: var(--tb-shadow);
  backdrop-filter: blur(18px);
}

.techbada-device-explode__label {
  color: var(--tb-cyan);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.techbada-device-explode__title {
  margin: 14px 0 0;
  color: #fff;
  font-size: clamp(34px, 5vw, 64px);
  font-weight: 900;
  line-height: 0.98;
  text-wrap: balance;
}

.techbada-device-explode__shape {
  display: block;
  width: min(360px, 74vw);
  aspect-ratio: 9 / 16;
  margin: 38px auto 0;
  border: 1px solid rgba(120, 232, 255, 0.34);
  border-radius: 34px;
  background:
    linear-gradient(135deg, rgba(120, 232, 255, 0.2), rgba(141, 255, 176, 0.08)),
    rgba(9, 12, 15, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 28px 90px rgba(0, 0, 0, 0.5);
}

.techbada-device-explode[data-device-type="tablet"] .techbada-device-explode__shape {
  width: min(560px, 84vw);
  aspect-ratio: 4 / 3;
  border-radius: 28px;
}

.techbada-device-explode[data-device-type="wearable"] .techbada-device-explode__shape {
  width: min(300px, 62vw);
  aspect-ratio: 1;
  border-radius: 46px;
}

.techbada-device-explode[data-device-type="audio"] .techbada-device-explode__shape {
  width: min(430px, 78vw);
  aspect-ratio: 4 / 2.25;
  border-radius: 999px;
}

.techbada-device-explode[data-device-type="monitor"] .techbada-device-explode__shape {
  width: min(560px, 86vw);
  aspect-ratio: 16 / 9;
  border-radius: 18px;
}

.techbada-device-explode[data-device-type="keyboard"] .techbada-device-explode__shape {
  width: min(620px, 88vw);
  aspect-ratio: 5 / 1.35;
  border-radius: 20px;
}

@media (max-width: 640px) {
  .techbada-article,
  .entry-content,
  .wp-block-post-content {
    width: min(100% - 28px, 768px);
  }

  .techbada-article p,
  .entry-content p,
  .wp-block-post-content p,
  .editor-styles-wrapper p,
  .techbada-article li,
  .entry-content li,
  .wp-block-post-content li,
  .editor-styles-wrapper li {
    font-size: 16px;
  }

  .techbada-article h2,
  .entry-content h2,
  .wp-block-post-content h2,
  .editor-styles-wrapper h2 {
    font-size: clamp(36px, 11vw, 46px);
  }
}