/******* Do not edit this file *******
Woody Code Snippets CSS and JS
Saved: Aug 23 2026 | 14:48:50 */
/* =============================================================================
   SmartwatchCrunch typography
   Lifewire's measured proportions, rendered in Barlow + Jost.

   Barlow  — all headings and metadata
   Jost    — body copy only

   SETUP (two steps, then never touch the Customizer again):

   1. Customize → Typography → Font Manager
      Add Barlow (weights 400, 500, 600)
      Add Jost (weight 400)
      Add Barlow Condensed (weight 500)  — for your header and footer
      Publish.

   2. Customize → Typography → Typography Manager
      DELETE every entry (the bin icon on each): Body, Primary Menu Items,
      Archive Content Title, Heading 1 through Heading 4.
      This file sets all of them. Leaving entries in place means two systems
      fighting over the same properties.
      Publish.

   3. Paste this whole file into Customize → Additional CSS. Publish.

   Scoped to GeneratePress's article containers, so it cannot leak into the
   header, footer, sidebar or widgets.
   ============================================================================= */

:root {
  /* --- Families --- */
  --font-display: "Barlow", helvetica, sans-serif;
  --font-body: "Jost", helvetica, sans-serif;

  /* --- Scale: mobile first --- */
  --size-h1: 32px;
  --size-h2: 29px;
  --size-h3: 23px;
  --size-h4: 20px;
  --size-card: 24px;      /* post titles on archive / category pages */
  --size-body: 18px;
  --size-dek: 16px;
  --size-meta: 14px;
  --size-caption: 12px;

  /* --- Line heights (unitless — multiples of the font size) --- */
  --lh-heading: 1.2;
  --lh-body: 1.65;
  --lh-meta: 1.4;
  --lh-byline: 1.43;
  --lh-tight: 1.3;

  /* --- Weights ---
     Lifewire runs headings at 500 in Space Grotesk. Barlow is narrower and
     lighter, so 600 restores the same presence. Change this one value to
     500 if you want it airier. */
  --weight-heading: 600;
  --weight-body: 400;

  /* --- Colour --- */
  --ink: rgba(0, 0, 0, 0.95);
  --ink-muted: rgba(0, 0, 0, 0.65);
  --link: #0065FF;

  /* --- Spacing: every value is a multiple of 8 --- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;

  /* --- Column widths (see the optional block at the end) --- */
  /* Body copy runs at two-thirds the featured-image width. Title, dek and
     byline span the full width above it. */
  --measure: 813px;         /* body, lists, tables, in-body images */
  --measure-wide: 1220px;   /* featured image, title, dek, byline */

  /* Image corners. One value, used everywhere an image appears. */
  --radius-image: 12px;
}

/* --- Headings ------------------------------------------------------------ */

.entry-title,
.entry-title a,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-heading);
  line-height: var(--lh-heading);
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
}

/* Single post title */
h1.entry-title {
  font-size: var(--size-h1);
  margin: var(--space-2) 0 var(--space-1);
}

/* Post titles on category and blog listings — smaller, so they read as
   cards rather than competing with in-article headings */
h2.entry-title {
  font-size: var(--size-card);
  margin: 0 0 var(--space-1);
}

/* 48 above, 16 below. Headings bind to the text that follows them, not the
   text above. This asymmetry is what makes a long article scannable. */
.entry-content h2 {
  font-size: var(--size-h2);
  margin: var(--space-6) 0 var(--space-3);
}

.entry-content h3 {
  font-size: var(--size-h3);
  margin: var(--space-4) 0 var(--space-2);
}

.entry-content h4 {
  font-size: var(--size-h4);
  margin: var(--space-4) 0 var(--space-2);
}

/* --- Body ---------------------------------------------------------------- */

.entry-content {
  font-family: var(--font-body);
  font-size: var(--size-body);
  font-weight: var(--weight-body);
  line-height: var(--lh-body);
  color: var(--ink);
}

.entry-content p {
  margin: 0 0 var(--space-3);
}

/* Inline links only — links inside running prose. Deliberately NOT
   ".entry-content a", which also catches post titles, buttons, read-more
   links and AAWP product links and turns them all blue. */
.entry-content p > a,
.entry-content li > a,
.entry-content blockquote a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Buttons and product links keep whatever the theme or plugin gives them */
.entry-content .wp-block-button__link,
.entry-content .gb-button,
.entry-content .button,
.entry-content .read-more,
.entry-content .aawp a,
.entry-content [class*="aawp-"] a {
  color: inherit;
  text-decoration: none;
}

/* Post titles are headings that happen to link — they take heading colour,
   never link colour, and never an underline. */
.entry-title a,
.entry-title a:visited {
  color: var(--ink);
  text-decoration: none;
}

.entry-title a:hover,
.entry-title a:focus {
  color: var(--ink);
  text-decoration: underline;

  /* Browsers scale underline thickness with font size and weight, so a
     46px/600 heading gets a heavy rule. Pin it to a hairline and drop it
     clear of the descenders. */
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.entry-content li {
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  margin-bottom: var(--space-2);
}

.entry-content ul,
.entry-content ol {
  margin: 0 0 var(--space-2);
}

.entry-content blockquote {
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  margin: var(--space-4) 0;
}

/* --- Dek (standfirst under the title) ------------------------------------ */

.swc-dek {
  font-family: var(--font-display);
  font-size: var(--size-dek);
  font-weight: var(--weight-body);
  line-height: var(--lh-meta);
  color: var(--ink);
  margin: var(--space-1) 0;
}

/* --- Metadata ------------------------------------------------------------ */

.entry-meta,
.entry-meta a,
.posted-on,
.byline {
  font-family: var(--font-display);
  font-size: var(--size-meta);
  font-weight: var(--weight-body);
  line-height: var(--lh-byline);
  color: var(--ink);
}

/* --- Caption — the only muted text on the page --------------------------- */

.entry-content figcaption,
.wp-caption-text {
  font-family: var(--font-display);
  font-size: var(--size-caption);
  font-weight: var(--weight-body);
  line-height: var(--lh-tight);
  color: var(--ink-muted);
  margin: var(--space-1) 0 0;
}

/* --- Label / uppercase eyebrow ------------------------------------------- */

.swc-label {
  font-family: var(--font-display);
  font-size: var(--size-meta);
  font-weight: var(--weight-heading);
  line-height: var(--lh-meta);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink);
}

/* =============================================================================
   Desktop — from 768px up
   Only the large headings scale. Body, H3, H4 and all metadata hold steady
   at every width, which is exactly what Lifewire does.
   ============================================================================= */

@media (min-width: 768px) {
  :root {
    --size-h1: 46px;
    --size-h2: 36px;
    --size-card: 29px;
  }

  h1.entry-title {
    margin: var(--space-4) 0 var(--space-2);
  }

  .swc-dek {
    margin: var(--space-2) 0;
  }
}

/* =============================================================================
   COLUMN WIDTHS

   Two widths: 1220px for the featured image, title, dek and byline, and
   813px — two-thirds of that — for everything you read.

   This is ON. Without it, and with the sidebar removed, GeneratePress gives
   the article the full container and lines run past 100 characters — far
   enough that readers lose their place returning to the left margin.

   The exclusions keep images, tables and AAWP product boxes full width.
   ============================================================================= */

@media (min-width: 768px) {
  .entry-content > p,
  .entry-content > ul,
  .entry-content > ol,
  .entry-content > h2,
  .entry-content > h3,
  .entry-content > h4,
  .entry-content > blockquote {
    max-width: var(--measure);
  }

  .entry-content > figure,
  .entry-content > .wp-block-image,
  .entry-content > table,
  .entry-content .aawp,
  .entry-content [class*="aawp-"] {
    max-width: none;
  }

  /* Anything not named above still gets the column, so new block types
     don't silently escape it. */
  .entry-content > * {
    max-width: var(--measure);
  }

  .entry-content > figure,
  .entry-content > .wp-block-image,
  .entry-content > table,
  .entry-content > .wp-block-table,
  .entry-content > .aawp,
  .entry-content > [class*="aawp-"] {
    max-width: var(--measure-wide);
  }
}

/* =============================================================================
   COMPONENTS
   Add these class names to blocks in the editor (Block → Advanced → CSS class).
   The .swc- prefix keeps them clear of theme and plugin styles.
   ============================================================================= */

/* --- Eyebrow (category label above the title) ---------------------------- */

.swc-eyebrow {
  font-family: var(--font-label, "Barlow Condensed", sans-serif);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 12px;
}

/* --- Dek (standfirst under the title) ------------------------------------ */

.swc-dek {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink-muted);
  max-width: var(--measure-wide);
  text-wrap: pretty;
  margin: 0 0 20px;
}

/* --- Answer / verdict block ----------------------------------------------
   One component, three labels. Info posts say "Short answer", comparisons
   say "The winner", reviews say "Verdict". Same styling every time so
   readers learn to look for it. */

.swc-answer {
  border-left: 4px solid var(--ink);
  background: #F4F4F5;
  border-radius: 0;
  padding: 22px 26px;
  margin: var(--space-4) 0;
}

.swc-answer > p:first-child {
  font-family: var(--font-label, "Barlow Condensed", sans-serif);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.swc-answer > p:last-child {
  font-size: 19px;
  line-height: 1.65;
  margin: 0;
}

/* --- Bottom line / closing verdict --------------------------------------- */

.swc-takeaway {
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  padding: 20px 0;
  margin: var(--space-6) 0;
}

.swc-takeaway > p:first-child {
  font-family: var(--font-label, "Barlow Condensed", sans-serif);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 8px;
}

.swc-takeaway > p:last-child {
  margin: 0;
}

/* --- Numbered steps ------------------------------------------------------ */

.entry-content .swc-steps {
  list-style: none;
  counter-reset: swcstep;
  margin: var(--space-3) 0;
  padding: 0;
}

.entry-content .swc-steps li {
  counter-increment: swcstep;
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}

.entry-content .swc-steps li::before {
  content: counter(swcstep);
  flex: 0 0 30px;
  height: 30px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
}

/* --- Data tables (compatibility, spec, scorecard) ------------------------ */

.entry-content .swc-table table,
.entry-content table.swc-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-display);
  font-size: 16px;
  margin: var(--space-3) 0;
}

.entry-content .swc-table th {
  font-family: var(--font-label, "Barlow Condensed", sans-serif);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  padding: 10px 14px;
  border-bottom: 2px solid var(--ink);
}

.entry-content .swc-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

/* --- Table of contents ---------------------------------------------------- */

.swc-toc {
  border: 1px solid rgba(0, 0, 0, 0.12);
  padding: 18px 22px;
  margin: var(--space-4) 0;
}

.swc-toc > p:first-child {
  font-family: var(--font-label, "Barlow Condensed", sans-serif);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.swc-toc a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.swc-toc a:hover {
  border-bottom-color: var(--ink);
}

/* =============================================================================
   PER-CATEGORY OVERRIDES
   WordPress puts category classes on the <article> element via post_class(),
   so .category-{slug} works on single posts. Verify by inspecting the
   <article> tag on a live post before relying on it.
   ============================================================================= */

/* Comparisons run wider tables — let them use the full column */
.category-comparison .entry-content .swc-table table {
  font-size: 15px;
}

/* Reviews: give the answer block a heavier rule so the verdict carries */
.category-reviews .swc-answer {
  border-left-width: 6px;
}

/* =============================================================================
   TABLE OF CONTENTS — built by assets/swc-toc.js
   ============================================================================= */

.swc-toc {
	max-width: var(--measure, 813px);
	border: 1px solid rgba(0, 0, 0, 0.12);
	padding: 18px 22px;
	margin: 32px 0;
}

.swc-toc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.95);
	text-align: left;
}

.swc-toc__head:hover,
.swc-toc__head:focus,
.swc-toc__head:active {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	-webkit-tap-highlight-color: transparent;
}

.swc-toc__head svg {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	fill: currentColor;
	transition: transform 0.2s ease;
}

.swc-toc__head[aria-expanded="false"] svg {
	transform: rotate(-90deg);
}

.swc-toc__list {
	margin: 14px 0 0;
	padding: 0 0 0 22px;
}

.swc-toc__list[hidden] {
	display: none;
}

.swc-toc__list li {
	margin: 0 0 8px;
	font-family: "Barlow", helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.4;
}

.swc-toc__list li:last-child {
	margin-bottom: 0;
}

.swc-toc__list a {
	color: rgba(0, 0, 0, 0.95);
	text-decoration: none;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.swc-toc__list a:hover,
.swc-toc__list a:focus-visible {
	border-bottom-color: rgba(0, 0, 0, 0.95);
}

.swc-toc__head:focus-visible,
.swc-toc__list a:focus-visible {
	outline: 2px solid #CCCCCC;
	outline-offset: 3px;
}

/* Stop anchor jumps hiding the heading behind a sticky header */
.entry-content h2[id] {
	scroll-margin-top: 24px;
}

@media (prefers-reduced-motion: reduce) {
	.swc-toc__head svg {
		transition: none;
	}
	html {
		scroll-behavior: auto;
	}
}

@media (max-width: 768px) {
	.swc-toc {
		padding: 16px 18px;
		margin: 24px 0;
	}
	.swc-toc__list li {
		font-size: 15px;
	}
}

/* =============================================================================
   GRACEFUL DEGRADATION
   Old posts have no dek, no answer block and no closing block. These rules
   make their absence invisible rather than leaving holes, so all 231 posts
   look finished from day one and you can retrofit at your own pace.
   ============================================================================= */

/* No dek: close the gap between title and byline */
.swc-eyebrow + .entry-title {
  margin-top: 0;
}

.entry-title + .entry-meta {
  margin-top: var(--space-2);
}

/* Answer block absent: the first paragraph carries a little more weight so
   the opening still reads as an opening */
.entry-content > p:first-of-type {
  font-size: 19px;
  line-height: 1.6;
}

/* Legacy lists: posts written before the step component still get breathing
   room, they just do not get the numbered circles */
.entry-content > ol:not(.swc-steps) li,
.entry-content > ul li {
  margin-bottom: var(--space-2);
}

/* Legacy tables: any table in old content picks up the house styling without
   needing the swc-table class added by hand */
.entry-content table:not(.swc-table) {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-display);
  font-size: 16px;
  margin: var(--space-3) 0;
}

.entry-content table:not(.swc-table) th {
  font-family: var(--font-label, "Barlow Condensed", sans-serif);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  padding: 10px 14px;
  border-bottom: 2px solid var(--ink);
}

.entry-content table:not(.swc-table) td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

/* AAWP tables opt out of all of the above */
.entry-content .aawp table,
.entry-content [class*="aawp-"] table {
  font-family: inherit;
  font-size: inherit;
}


/* =============================================================================
   STICKY TOC RAIL — desktop only, 1200px and up

   The body column is 813px inside a 1220px zone, which leaves roughly 380px
   of empty space on the right. The TOC floats into it and sticks while you
   scroll. Below 1200px it reverts to the inline collapsible block.
   ============================================================================= */

@media (min-width: 1200px) {
  .entry-content > .swc-toc--rail {
    float: right;
    position: sticky;
    top: 24px;
    width: 320px;
    max-width: 320px;
    margin: 0 0 24px 48px;
    padding: 0 0 0 20px;
    border: 0;
    border-left: 1px solid rgba(0, 0, 0, 0.12);
    max-height: calc(100vh - 60px);
    overflow-y: auto;
  }

  .swc-toc--rail .swc-toc__head {
    cursor: default;
    pointer-events: none;
  }

  .swc-toc--rail .swc-toc__head svg {
    display: none;
  }

  .swc-toc--rail .swc-toc__list {
    padding-left: 0;
    list-style: none;
    counter-reset: swctoc;
  }

  .swc-toc--rail .swc-toc__list li {
    counter-increment: swctoc;
    margin: 0;
  }

  .swc-toc--rail .swc-toc__list a {
    display: block;
    padding: 7px 0 7px 14px;
    margin-left: -21px;
    border: 0;
    border-left: 2px solid transparent;
    color: var(--ink-muted);
    font-size: 15px;
    line-height: 1.35;
    transition: color 0.15s ease, border-color 0.15s ease;
  }

  .swc-toc--rail .swc-toc__list a:hover,
  .swc-toc--rail .swc-toc__list a:focus-visible {
    color: var(--ink);
    border-left-color: rgba(0, 0, 0, 0.25);
  }

  /* Section currently in view */
  .swc-toc--rail .swc-toc__list a[aria-current="true"] {
    color: var(--ink);
    border-left-color: var(--ink);
    font-weight: 500;
  }

  /* Headings need clearance so the sticky rail never covers them */
  .entry-content h2[id] {
    scroll-margin-top: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .swc-toc--rail .swc-toc__list a {
    transition: none;
  }
}

/* =============================================================================
   IMAGES

   Rounded corners on every image, at one shared radius. Applied to the <img>
   itself rather than the wrapper, so a figure's caption stays square and
   flush beneath it.
   ============================================================================= */

.post-image img,
.featured-image img,
.entry-content img,
.entry-content .wp-block-image img,
.entry-content figure img,
.entry-content video,
.entry-content iframe {
  border-radius: var(--radius-image);
}

/* Wrappers that clip a scaled or object-fit image need the radius too,
   otherwise the corners show through from underneath. */
.post-image,
.featured-image,
.entry-content .wp-block-image,
.entry-content figure {
  border-radius: var(--radius-image);
}

.post-image,
.featured-image {
  overflow: hidden;
}

/* Featured image sits in the wide zone with room beneath it */
.post-image,
.featured-image {
  max-width: var(--measure-wide);
  margin: 0 0 var(--space-4);
}

.post-image img,
.featured-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Captions stay square and sit tight under the image */
.entry-content figcaption,
.wp-caption-text {
  border-radius: 0;
}

/* Icons, logos, avatars and AAWP product shots keep their own shape —
   a rounded corner on a transparent PNG logo looks like a mistake. */
.entry-content .aawp img,
.entry-content [class*="aawp-"] img,
.entry-content img.no-radius,
.avatar,
.swc-toc img {
  border-radius: 0;
}

.avatar {
  border-radius: 50%;
}

@media (max-width: 768px) {
  :root {
    --radius-image: 8px;
  }
}